From 6095a9d7d19c64d6006e1dfe0e69511c195871a7 Mon Sep 17 00:00:00 2001
From: rjamet-ovh <157609363+rjamet-ovh@users.noreply.github.com>
Date: Thu, 14 Nov 2024 19:17:51 +0100
Subject: [PATCH] feat(web): add private-database logs to customer module
 (#13574)

ref: MANAGER-15356

Signed-off-by: Romain Jamet <romain.jamet.ext@corp.ovh.com>
Co-authored-by: CDS Translator Agent <opensource@ovh.net>
---
 .../dashboard/private-database.controller.js  |  2 +
 .../dashboard/private-database.html           |  7 ++-
 .../dashboard/private-database.module.js      |  2 +-
 .../dashboard/private-database.routing.js     |  6 ++
 .../translations/Messages_de_DE.json          |  3 +-
 .../translations/Messages_en_GB.json          |  3 +-
 .../translations/Messages_es_ES.json          |  3 +-
 .../translations/Messages_fr_CA.json          |  3 +-
 .../translations/Messages_fr_FR.json          |  3 +-
 .../translations/Messages_it_IT.json          |  3 +-
 .../translations/Messages_pl_PL.json          |  3 +-
 .../translations/Messages_pt_PT.json          |  3 +-
 .../logs/data-streams/index.js                | 27 +++++++++
 ...private-database-data-streams.component.js | 13 +++++
 ...private-database-data-streams.constants.js | 12 ++++
 ...rivate-database-data-streams.controller.js | 19 +++++++
 .../private-database-data-streams.module.js   | 15 +++++
 .../private-database-data-streams.routing.js  | 29 ++++++++++
 ...rivate-database-data-streams.template.html | 10 ++++
 .../client/app/private-database/logs/index.js | 22 +++++++
 .../app/private-database/logs/logs.module.js  | 10 ----
 .../app/private-database/logs/logs.routing.js | 15 -----
 .../logs/private-database-logs.component.js   | 14 +++++
 .../logs/private-database-logs.constants.js   | 50 ++++++++++++++++
 .../logs/private-database-logs.controller.js  | 57 ++++++-------------
 .../logs/private-database-logs.html           | 30 ----------
 .../logs/private-database-logs.module.js      | 23 ++++++++
 .../logs/private-database-logs.routing.js     | 43 ++++++++++++++
 .../logs/private-database-logs.service.js     | 32 +++++------
 .../logs/private-database-logs.template.html  | 17 ++++++
 .../logs/translations/Messages_de_DE.json     |  4 +-
 .../logs/translations/Messages_en_GB.json     |  4 +-
 .../logs/translations/Messages_es_ES.json     |  4 +-
 .../logs/translations/Messages_fr_CA.json     |  4 +-
 .../logs/translations/Messages_fr_FR.json     |  4 +-
 .../logs/translations/Messages_it_IT.json     |  4 +-
 .../logs/translations/Messages_pl_PL.json     |  4 +-
 .../logs/translations/Messages_pt_PT.json     |  4 +-
 packages/manager/apps/web/package.json        |  2 +
 39 files changed, 381 insertions(+), 132 deletions(-)
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/index.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.component.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.constants.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.controller.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.module.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.routing.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.template.html
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/index.js
 delete mode 100644 packages/manager/apps/web/client/app/private-database/logs/logs.module.js
 delete mode 100644 packages/manager/apps/web/client/app/private-database/logs/logs.routing.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/private-database-logs.component.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/private-database-logs.constants.js
 delete mode 100644 packages/manager/apps/web/client/app/private-database/logs/private-database-logs.html
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/private-database-logs.module.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/private-database-logs.routing.js
 create mode 100644 packages/manager/apps/web/client/app/private-database/logs/private-database-logs.template.html

diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.controller.js b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.controller.js
index 0f8700b6f94d..2d931ad664da 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.controller.js
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.controller.js
@@ -22,6 +22,7 @@ export default class PrivateDatabaseCtrl {
     databaseLink,
     hasConfiguration,
     logsLink,
+    isLogsToCustomerFeatureAvailable,
     metricsLink,
     Hosting,
     PrivateDatabase,
@@ -47,6 +48,7 @@ export default class PrivateDatabaseCtrl {
     this.hasConfiguration = hasConfiguration;
     this.hostingService = Hosting;
     this.logsLink = logsLink;
+    this.isLogsToCustomerFeatureAvailable = isLogsToCustomerFeatureAvailable;
     this.metricsLink = metricsLink;
     this.privateDatabaseExtensionService = PrivateDatabaseExtension;
     this.privateDatabaseService = PrivateDatabase;
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.html b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.html
index 86d940343016..10f5357aa1e3 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.html
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.html
@@ -229,11 +229,15 @@
                     <span data-translate="privateDatabase_tab_METRICS"></span>
                 </oui-header-tabs-item>
                 <oui-header-tabs-item
-                    data-ng-if="database.serviceInfos.status !== 'expired'"
+                    data-ng-if=":: ctrl.isLogsToCustomerFeatureAvailable && database.serviceInfos.status !== 'expired'"
                     href="{{ ctrl.logsLink }}"
                     active="ctrl.currentActiveLink() === ctrl.logsLink"
                 >
                     <span data-translate="privateDatabase_tab_LOGS"></span>
+                    <span
+                        class="oui-badge oui-badge_s oui-badge_success"
+                        data-translate="privateDatabase_beta_status"
+                    ></span>
                 </oui-header-tabs-item>
                 <oui-header-tabs-item
                     data-ng-if="database.serviceInfos.status !== 'expired' && !isLegacyDatabase() && !hasConfiguration"
@@ -254,6 +258,7 @@
             </oui-header-tabs>
         </div>
         <div ui-view></div>
+        <div data-ui-view="privateDatabaseLogsView"></div>
     </div>
 
     <div id="currentAction" class="modal fade currentAction" role="dialog">
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.module.js b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.module.js
index b96207d757b6..adda029a4280 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.module.js
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.module.js
@@ -2,7 +2,7 @@ import routing from './private-database.routing';
 
 import configuration from '../configuration/configuration.module';
 import database from '../database/database.module';
-import logs from '../logs/logs.module';
+import logs from '../logs/private-database-logs.module';
 import metrics from '../metrics/metrics.module';
 import orderCloudDb from '../order/clouddb';
 import state from '../state/state.module';
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.routing.js b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.routing.js
index 01081280e96b..d02e74b895c7 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/private-database.routing.js
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/private-database.routing.js
@@ -68,6 +68,12 @@ export default /* @ngInject */ ($stateProvider) => {
       currentActiveLink: /* @ngInject */ ($state, $transition$) => () =>
         $state.href($state.current.name, $transition$.params()),
       breadcrumb: /* @ngInject */ (serviceName) => serviceName,
+      isLogsToCustomerFeatureAvailable: /* @ngInject */ (ovhFeatureFlipping) =>
+        ovhFeatureFlipping
+          .checkFeatureAvailability('private-database:logs-to-customer')
+          .then((feature) =>
+            feature.isFeatureAvailable('private-database:logs-to-customer'),
+          ),
     },
   });
 
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_de_DE.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_de_DE.json
index 537659aff39b..631d35a0b3ea 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_de_DE.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_de_DE.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Beim Einrichten der Erweiterung ist ein Fehler aufgetreten.",
   "privateDatabase_tabs_list_extensions_disable_success": "Die Erweiterung wurde erfolgreich deaktiviert.",
   "privateDatabase_tabs_list_extensions_disable_error": "Bei der Deaktivierung der Erweiterung ist ein Fehler aufgetreten.",
-  "privateDatabase_order_sql_period_sub_title": "Wie lange möchten Sie sie benutzen? "
+  "privateDatabase_order_sql_period_sub_title": "Wie lange möchten Sie sie benutzen? ",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_en_GB.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_en_GB.json
index a57d73a0b8fe..59a67831e837 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_en_GB.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_en_GB.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "An error has occurred enabling your extension.",
   "privateDatabase_tabs_list_extensions_disable_success": "Extension correctly disabled.",
   "privateDatabase_tabs_list_extensions_disable_error": "An error has occurred disabling the extension.",
-  "privateDatabase_order_sql_period_sub_title": "How long do you want to use it for?"
+  "privateDatabase_order_sql_period_sub_title": "How long do you want to use it for?",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_es_ES.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_es_ES.json
index 8b0e7215b517..25b7e96bac6b 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_es_ES.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_es_ES.json
@@ -502,5 +502,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Se ha producido un error al activar la extensión.",
   "privateDatabase_tabs_list_extensions_disable_success": "La extensión se ha desactivado correctamente.",
   "privateDatabase_tabs_list_extensions_disable_error": "Se ha producido un error al desactivar la extensión.",
-  "privateDatabase_order_sql_period_sub_title": "¿Por cuánto tiempo quiere utilizarlas?"
+  "privateDatabase_order_sql_period_sub_title": "¿Por cuánto tiempo quiere utilizarlas?",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_CA.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_CA.json
index bec981b8d3b1..9e61dbd128da 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_CA.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_CA.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Une erreur est survenue lors de l'action de l'extension.",
   "privateDatabase_tabs_list_extensions_disable_success": "Extension correctement désactivée.",
   "privateDatabase_tabs_list_extensions_disable_error": "Une erreur est survenue lors de la désactivation de l'extension.",
-  "privateDatabase_order_sql_period_sub_title": "Combien de temps désirez-vous l'utiliser ?"
+  "privateDatabase_order_sql_period_sub_title": "Combien de temps désirez-vous l'utiliser ?",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_FR.json
index bec981b8d3b1..9e61dbd128da 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_FR.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_fr_FR.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Une erreur est survenue lors de l'action de l'extension.",
   "privateDatabase_tabs_list_extensions_disable_success": "Extension correctement désactivée.",
   "privateDatabase_tabs_list_extensions_disable_error": "Une erreur est survenue lors de la désactivation de l'extension.",
-  "privateDatabase_order_sql_period_sub_title": "Combien de temps désirez-vous l'utiliser ?"
+  "privateDatabase_order_sql_period_sub_title": "Combien de temps désirez-vous l'utiliser ?",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_it_IT.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_it_IT.json
index b3414ae67a48..fa27a38f009e 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_it_IT.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_it_IT.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Si è verificato un errore durante l'attivazione dell'estensione.",
   "privateDatabase_tabs_list_extensions_disable_success": "Estensione disattivata correttamente.",
   "privateDatabase_tabs_list_extensions_disable_error": "Si è verificato un errore durante la disattivazione dell'estensione.",
-  "privateDatabase_order_sql_period_sub_title": "Per quanto tempo vuoi utilizzarla?"
+  "privateDatabase_order_sql_period_sub_title": "Per quanto tempo vuoi utilizzarla?",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pl_PL.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pl_PL.json
index e29ec1fb7277..2b18b755a6fc 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pl_PL.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pl_PL.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Wystąpił błąd podczas aktywowania rozszerzenia.",
   "privateDatabase_tabs_list_extensions_disable_success": "Rozszerzenie poprawnie dezaktywowane.",
   "privateDatabase_tabs_list_extensions_disable_error": "Wystąpił błąd podczas aktywowania rozszerzenia.",
-  "privateDatabase_order_sql_period_sub_title": "Jak długo chcesz korzystać z bazy?"
+  "privateDatabase_order_sql_period_sub_title": "Jak długo chcesz korzystać z bazy?",
+  "privateDatabase_beta_status": "Wersja beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pt_PT.json b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pt_PT.json
index b7bf8db347d2..bc112bb728e5 100644
--- a/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pt_PT.json
+++ b/packages/manager/apps/web/client/app/private-database/dashboard/translations/Messages_pt_PT.json
@@ -504,5 +504,6 @@
   "privateDatabase_tabs_list_extensions_enable_error": "Erro ao processar ativação da extensão",
   "privateDatabase_tabs_list_extensions_disable_success": "Extensão desativada",
   "privateDatabase_tabs_list_extensions_disable_error": "Erro ao processar desativação da extensão",
-  "privateDatabase_order_sql_period_sub_title": "Durante quanto tempo deseja utilizá-las?"
+  "privateDatabase_order_sql_period_sub_title": "Durante quanto tempo deseja utilizá-las?",
+  "privateDatabase_beta_status": "Beta"
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/index.js b/packages/manager/apps/web/client/app/private-database/logs/data-streams/index.js
new file mode 100644
index 000000000000..aace592d7d3c
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/index.js
@@ -0,0 +1,27 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerPrivateDatabaseLogsDataStreamsLazyLoading';
+
+angular.module(moduleName, ['oc.lazyLoad', 'ui.router']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state(
+      'app.private-database.dashboard.logs.data-streams.**',
+      {
+        url: '',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+          return import('./private-database-data-streams.module').then(
+            (mod) => {
+              return $ocLazyLoad.inject(mod.default || mod);
+            },
+          );
+        },
+      },
+    );
+  },
+);
+
+export default moduleName;
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.component.js b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.component.js
new file mode 100644
index 000000000000..779904d37657
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.component.js
@@ -0,0 +1,13 @@
+import controller from './private-database-data-streams.controller';
+import template from './private-database-data-streams.template.html';
+
+export default {
+  bindings: {
+    projectId: '<',
+    kind: '<',
+    goBack: '<',
+    trackClick: '<',
+  },
+  controller,
+  template,
+};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.constants.js b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.constants.js
new file mode 100644
index 000000000000..42d74628edda
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.constants.js
@@ -0,0 +1,12 @@
+export const PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS = {
+  LISTING_PAGE: 'web::private-database::dashboard::logs::data-streams',
+  ADD_DATA_STREAM:
+    'web::private-database::dashboard::logs::data-streams::add-datastream',
+  GO_BACK:
+    'web::private-database::dashboard::logs::data-streams::back-previous-page',
+  LDP_DETAIL:
+    'web::private-database::dashboard::logs::data-streams::ldp-detail',
+  SUBSCRIBE: 'web::private-database::dashboard::logs::data-streams::subscribe',
+  UNSUBSCRIBE:
+    'web::private-database::dashboard::logs::data-streams::unsubscribe',
+};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.controller.js b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.controller.js
new file mode 100644
index 000000000000..43c9c3eb5e0a
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.controller.js
@@ -0,0 +1,19 @@
+import { PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS } from './private-database-data-streams.constants';
+
+export default class PrivateDatabasedataStreamsCtrl {
+  /* @ngInject */
+  constructor($stateParams) {
+    this.$stateParams = $stateParams;
+  }
+
+  $onInit() {
+    this.productId = this.$stateParams.productId;
+    this.PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS = PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS;
+    this.logSubscriptionApiData = {
+      url: `/hosting/privateDatabase/${this.productId}/log/subscription`,
+      params: {
+        kind: this.kind,
+      },
+    };
+  }
+}
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.module.js b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.module.js
new file mode 100644
index 000000000000..92fafb5563cc
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.module.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'angular-translate';
+
+import component from './private-database-data-streams.component';
+import routing from './private-database-data-streams.routing';
+
+const moduleName = 'ovhManagerPrivateDatabaseDataStreams';
+angular
+  .module(moduleName, ['pascalprecht.translate', 'ui.router'])
+  .config(routing)
+  .component('privateDatabaseDataStreams', component)
+  .run(/* @ngTranslationsInject:json ../translations */);
+
+export default moduleName;
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.routing.js b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.routing.js
new file mode 100644
index 000000000000..54b921676a6a
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.routing.js
@@ -0,0 +1,29 @@
+import { PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS } from './private-database-data-streams.constants';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.private-database.dashboard.logs.data-streams', {
+    url: '',
+    params: {
+      kind: null,
+    },
+    views: {
+      'privateDatabaseLogsView@app.private-database.dashboard':
+        'privateDatabaseDataStreams',
+    },
+    atInternet: {
+      rename: PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS.LISTING_PAGE,
+    },
+    resolve: {
+      breadcrumb: () => null,
+      kind: /* @ngInject */ ($transition$) => $transition$.params().kind,
+      goBack: /* @ngInject  */ ($state, kind, trackClick) => () => {
+        trackClick(PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS.GO_BACK);
+        $state.go(
+          'app.private-database.dashboard.logs',
+          { kind },
+          { reload: true },
+        );
+      },
+    },
+  });
+};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.template.html b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.template.html
new file mode 100644
index 000000000000..6de2f480c1d9
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/data-streams/private-database-data-streams.template.html
@@ -0,0 +1,10 @@
+<div data-ovh-alert></div>
+
+<log-to-customer-list
+    data-log-subscription-api-data="$ctrl.logSubscriptionApiData"
+    data-description="{{ 'private_database_data_streams_description_' + $ctrl.kind | translate }}"
+    data-go-back="$ctrl.goBack"
+    data-tracking-hits="$ctrl.PRIVATE_DATABASE_DATA_STREAMS_TRACKING_HITS"
+    data-track-click="$ctrl.trackClick"
+>
+</log-to-customer-list>
diff --git a/packages/manager/apps/web/client/app/private-database/logs/index.js b/packages/manager/apps/web/client/app/private-database/logs/index.js
new file mode 100644
index 000000000000..85765547b646
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/index.js
@@ -0,0 +1,22 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerPrivateDatabaseLogsLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state('app.private-database.dashboard.logs.**', {
+      url: '/logs',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+        return import('./private-database-logs.module').then((mod) =>
+          $ocLazyLoad.inject(mod.default || mod),
+        );
+      },
+    });
+  },
+);
+
+export default moduleName;
diff --git a/packages/manager/apps/web/client/app/private-database/logs/logs.module.js b/packages/manager/apps/web/client/app/private-database/logs/logs.module.js
deleted file mode 100644
index d41b59715128..000000000000
--- a/packages/manager/apps/web/client/app/private-database/logs/logs.module.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import routing from './logs.routing';
-
-const moduleName = 'ovhManagerPrivateDatabaseLogs';
-
-angular
-  .module(moduleName, [])
-  .config(routing)
-  .run(/* @ngTranslationsInject:json ./translations */);
-
-export default moduleName;
diff --git a/packages/manager/apps/web/client/app/private-database/logs/logs.routing.js b/packages/manager/apps/web/client/app/private-database/logs/logs.routing.js
deleted file mode 100644
index c4f6b5d0bf30..000000000000
--- a/packages/manager/apps/web/client/app/private-database/logs/logs.routing.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import template from './private-database-logs.html';
-import controller from './private-database-logs.controller';
-
-export default /* @ngInject */ ($stateProvider) => {
-  $stateProvider.state('app.private-database.dashboard.logs', {
-    url: '/logs',
-    template,
-    controller,
-    controllerAs: 'listCtrl',
-    resolve: {
-      breadcrumb: /* @ngInject */ ($translate) =>
-        $translate.instant('private_database_logs'),
-    },
-  });
-};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.component.js b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.component.js
new file mode 100644
index 000000000000..1dcc3f9574ed
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.component.js
@@ -0,0 +1,14 @@
+import template from './private-database-logs.template.html';
+import controller from './private-database-logs.controller';
+
+export default {
+  bindings: {
+    projectId: '<',
+    goToListingPage: '<',
+    logKindsList: '<',
+    kind: '<',
+    trackClick: '<',
+  },
+  template,
+  controller,
+};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.constants.js b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.constants.js
new file mode 100644
index 000000000000..29fd2baf6bd9
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.constants.js
@@ -0,0 +1,50 @@
+export const PRIVATE_DATABASE_LOGS_SERVICE_GUIDE_LINK = {
+  DEFAULT:
+    'https://help.ovhcloud.com/csm/en-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062040',
+  FR:
+    'https://help.ovhcloud.com/csm/fr-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062007',
+  DE:
+    'https://help.ovhcloud.com/csm/de-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062033',
+  ES:
+    'https://help.ovhcloud.com/csm/es-es-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062037',
+  WE:
+    'https://help.ovhcloud.com/csm/en-ie-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062032',
+  IE:
+    'https://help.ovhcloud.com/csm/en-ie-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062032',
+  IT:
+    'https://help.ovhcloud.com/csm/it-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062041',
+  PL:
+    'https://help.ovhcloud.com/csm/pl-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062043',
+  PT:
+    'https://help.ovhcloud.com/csm/pt-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062035',
+  GB:
+    'https://help.ovhcloud.com/csm/en-gb-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062031',
+  CA:
+    'https://help.ovhcloud.com/csm/en-ca-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062034',
+  QC:
+    'https://help.ovhcloud.com/csm/fr-ca-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062008',
+  WS:
+    'https://help.ovhcloud.com/csm/es-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062042',
+  AU:
+    'https://help.ovhcloud.com/csm/en-au-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062036',
+  SG:
+    'https://help.ovhcloud.com/csm/en-sg-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062039',
+  ASIA:
+    'https://help.ovhcloud.com/csm/asia-web-cloud-db-retrieve-logs?id=kb_article_view&sysparm_article=KB0062038',
+};
+
+export const PRIVATE_DATABASE_LOGS_KINDS_KEYS = {
+  dbms: ['message'],
+};
+
+export const PRIVATE_DATABASE_LOGS_TRACKING_HITS = {
+  LOGS_PAGE: 'web::private-database::dashboard::logs',
+  TRANSFER: 'web::private-database::dashboard::logs::subscribe',
+  STOP_TRANSFER: 'web::private-database::dashboard::logs::unsubscribe',
+  SUBSCRIBE_OTHER_ACCOUNT:
+    'web::private-database::dashboard::logs::subscribe-other-datastream',
+  CREATE_ACCOUNT: 'web::private-database::dashboard::logs::create-account',
+  CREATE_DATA_STREAM:
+    'web::private-database::dashboard::logs::create-data-stream',
+  GRAYLOG_WATCH: 'web::private-database::dashboard::logs::graylog',
+};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.controller.js b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.controller.js
index 9baa0b682e4c..f8f477b66a6a 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.controller.js
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.controller.js
@@ -1,49 +1,24 @@
-export default class PrivateDatabaseLogsCtrl {
+import {
+  PRIVATE_DATABASE_LOGS_SERVICE_GUIDE_LINK,
+  PRIVATE_DATABASE_LOGS_TRACKING_HITS,
+  PRIVATE_DATABASE_LOGS_KINDS_KEYS,
+} from './private-database-logs.constants';
+
+export default class PrivateDatabaseLogsController {
   /* @ngInject */
-  constructor($scope, $stateParams, TailLogs, PrivateDatabaseLogsService) {
-    this.$scope = $scope;
+  constructor(coreConfig, $stateParams) {
+    this.user = coreConfig.getUser();
     this.$stateParams = $stateParams;
-    this.TailLogs = TailLogs;
-    this.privateDatabaseLogsService = PrivateDatabaseLogsService;
-    this.loader = true;
-
-    $scope.$on('$destroy', () => {
-      if (this.logger) {
-        this.logger.stop();
-      }
-    });
   }
 
   $onInit() {
-    this.loader = true;
     this.productId = this.$stateParams.productId;
-
-    this.logger = new this.TailLogs({
-      source: () =>
-        this.privateDatabaseLogsService
-          .getLogs(this.productId)
-          .then((logs) => logs.url),
-      delay: 2000,
-    });
-
-    this.startLog();
-    this.loader = false;
-  }
-
-  $onDestroy() {
-    this.logger.stop();
-  }
-
-  stopLog() {
-    this.logger.stop();
-  }
-
-  startLog() {
-    this.logger.log();
-  }
-
-  getLogs() {
-    this.logger = this.logger.logs;
-    return this.logger;
+    this.PRIVATE_DATABASE_LOGS_TRACKING_HITS = PRIVATE_DATABASE_LOGS_TRACKING_HITS;
+    this.logApiUrl = `/hosting/privateDatabase/${this.productId}/log/url`;
+    this.logSubscriptionUrl = `/hosting/privateDatabase/${this.productId}/log/subscription`;
+    this.logServiceGuideLink =
+      PRIVATE_DATABASE_LOGS_SERVICE_GUIDE_LINK[this.user.ovhSubsidiary] ||
+      PRIVATE_DATABASE_LOGS_SERVICE_GUIDE_LINK.DEFAULT;
+    this.logKindsKeys = PRIVATE_DATABASE_LOGS_KINDS_KEYS;
   }
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.html b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.html
deleted file mode 100644
index f83d2d4c262a..000000000000
--- a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<div>
-    <div data-ovh-alert="{{alerts.main}}"></div>
-
-    <h2 data-translate="privateDatabase_tabs_logs_list_title"></h2>
-
-    <tail-logs>
-        <div
-            class="row ml-0"
-            data-ng-repeat="log in listCtrl.logger.logs track by $index"
-            data-ng-class="{
-                'text-muted'   : false,
-                'text-primary' : false,
-                'text-warning' : false,
-                'text-danger'  : false
-            }"
-        >
-            <span
-                class="col-md-2"
-                data-ng-bind="log.message.timestamp | date:'short'"
-            ></span>
-            <span class="col-md-1" data-ng-bind="log.message.stream"></span>
-            <span class="col-md-9" data-ng-bind="log.message.message"></span>
-        </div>
-
-        <div
-            data-translate="privateDatabase_tabs_logs_list_no_logs"
-            data-ng-if="listCtrl.logger.logs.length === 0"
-        ></div>
-    </tail-logs>
-</div>
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.module.js b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.module.js
new file mode 100644
index 000000000000..372b69b7aab1
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.module.js
@@ -0,0 +1,23 @@
+import '@ovh-ux/manager-log-to-customer';
+import routing from './private-database-logs.routing';
+import service from './private-database-logs.service';
+import component from './private-database-logs.component';
+import dataStreams from './data-streams';
+
+const moduleName = 'ovhManagerPrivateDatabaseLogs';
+
+angular
+  .module(moduleName, [
+    'ngTranslateAsyncLoader',
+    'oui',
+    'pascalprecht.translate',
+    'ui.router',
+    'ovhManagerLogToCustomer',
+    dataStreams,
+  ])
+  .config(routing)
+  .component('privateDatabaseLogs', component)
+  .service('logsService', service)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.routing.js b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.routing.js
new file mode 100644
index 000000000000..882b597fcd9f
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.routing.js
@@ -0,0 +1,43 @@
+import { PRIVATE_DATABASE_LOGS_TRACKING_HITS } from './private-database-logs.constants';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.private-database.dashboard.logs', {
+    url: '/logs',
+    views: {
+      privateDatabaseLogsView: 'privateDatabaseLogs',
+    },
+    atInternet: {
+      rename: PRIVATE_DATABASE_LOGS_TRACKING_HITS.LOGS_PAGE,
+    },
+    redirectTo: (transition) =>
+      transition
+        .injector()
+        .getAsync('isLogsToCustomerFeatureAvailable')
+        .then((isLogsToCustomerFeatureAvailable) =>
+          isLogsToCustomerFeatureAvailable
+            ? false
+            : {
+                state: 'app.private-database.dashboard.state',
+              },
+        ),
+    resolve: {
+      breadcrumb: /* @ngInject */ ($translate) =>
+        $translate.instant('private_database_logs'),
+      logKindsList: /* @ngInject */ (logsService, serviceName) =>
+        logsService.getLogKinds(serviceName),
+      kind: /* @ngInject */ (logKindsList, $state) =>
+        $state.params.kind || logKindsList[0].name,
+      goToListingPage: /* @ngInject */ ($state, $transition$) => (params) =>
+        $state.go('app.private-database.dashboard.logs.data-streams', {
+          ...$transition$.params(),
+          ...params,
+        }),
+      trackClick: /* @ngInject */ (atInternet) => (hit) => {
+        atInternet.trackClick({
+          name: hit,
+          type: 'action',
+        });
+      },
+    },
+  });
+};
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.service.js b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.service.js
index c830bb706c4f..2d460bbea9e2 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.service.js
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.service.js
@@ -1,19 +1,15 @@
-angular.module('services').service(
-  'PrivateDatabaseLogsService',
-  class PrivateDatabaseLogsService {
-    /* @ngInject */
-    constructor($http) {
-      this.$http = $http;
+export default class PrivateDatabaseLogsService {
+  /* @ngInject */
+  constructor($http, iceberg) {
+    this.$http = $http;
+    this.iceberg = iceberg;
+  }
 
-      this.apiVersion = 'apiv6';
-    }
-
-    getLogs(serviceName) {
-      return this.$http
-        .post(
-          `${this.apiVersion}/hosting/privateDatabase/${serviceName}/generateTemporaryLogsLink`,
-        )
-        .then((res) => res.data);
-    }
-  },
-);
+  getLogKinds(serviceName) {
+    return this.iceberg(`/hosting/privateDatabase/${serviceName}/log/kind`)
+      .query()
+      .expand('CachedObjectList-Pages')
+      .execute()
+      .$promise.then(({ data }) => data);
+  }
+}
diff --git a/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.template.html b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.template.html
new file mode 100644
index 000000000000..00fc7d6ca88d
--- /dev/null
+++ b/packages/manager/apps/web/client/app/private-database/logs/private-database-logs.template.html
@@ -0,0 +1,17 @@
+<div data-ovh-alert></div>
+
+<log-to-customer-live-tail
+    data-log-api-url="$ctrl.logApiUrl"
+    data-log-service-guide-link="$ctrl.logServiceGuideLink"
+    data-log-subscription-url="$ctrl.logSubscriptionUrl"
+    data-go-to-listing-page="$ctrl.goToListingPage"
+    data-log-kinds-list="$ctrl.logKindsList"
+    data-log-kinds-keys="$ctrl.logKindsKeys"
+    data-kind-init-value="$ctrl.kind"
+    data-track-click="$ctrl.trackClick"
+    data-tracking-hits="$ctrl.PRIVATE_DATABASE_LOGS_TRACKING_HITS"
+>
+    <main-description>
+        <span data-translate="private_database_logs_description_dbms"></span>
+    </main-description>
+</log-to-customer-live-tail>
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_de_DE.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_de_DE.json
index 4981aca0ecfe..2df2ce646133 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_de_DE.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_de_DE.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logs"
+  "private_database_logs": "Logs",
+  "private_database_logs_description_dbms": "Im Folgenden finden Sie die von Ihrer Web Cloud Database generierten Logs in Echtzeit.",
+  "private_database_data_streams_description_dbms": "Wenn Sie die Logs Ihrer Web Cloud Database abonnieren, werden diese zur Logs Data Platform übertragen. Diese Plattform bietet Zugriff auf erweiterte Funktionen wie die Verwaltung von Warnungen, das Durchführen von Suchen oder die Verwaltung der Aufbewahrung."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_en_GB.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_en_GB.json
index 4981aca0ecfe..fc99cf51704d 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_en_GB.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_en_GB.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logs"
+  "private_database_logs": "Logs",
+  "private_database_logs_description_dbms": "Below, you will find the real-time logs generated by your Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "By subscribing to Webcloud Database logs, they will be transferred to the Logs Data Platform. This platform gives you access to advanced features such as alerting, search execution and retention management."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_es_ES.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_es_ES.json
index 4981aca0ecfe..37d027af6b34 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_es_ES.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_es_ES.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logs"
+  "private_database_logs": "Logs",
+  "private_database_logs_description_dbms": "Incluimos a continuación los logs en tiempo real generados por su Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "Al suscribirse a los logs de su Web Cloud Database, estos se transferirán a Logs Data Platform. Esta plataforma le permite acceder a funcionalidades avanzadas como la gestión de las alertas, la ejecución de las búsquedas o la gestión de las retenciones."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_CA.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_CA.json
index 4981aca0ecfe..ab62c138ee41 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_CA.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_CA.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logs"
+  "private_database_logs": "Logs",
+  "private_database_logs_description_dbms": "Vous trouverez ci-dessous les logs en temps réel générés par votre Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "En vous abonnant aux logs de votre Webcloud Database, ils seront transférés vers la Logs Data Platform. Cette plateforme vous donne accès à des fonctionnalités avancées telles que la gestion des alertes, l'exécution de recherches ou la gestion des rétentions."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_FR.json
index 4981aca0ecfe..ab62c138ee41 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_FR.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_fr_FR.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logs"
+  "private_database_logs": "Logs",
+  "private_database_logs_description_dbms": "Vous trouverez ci-dessous les logs en temps réel générés par votre Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "En vous abonnant aux logs de votre Webcloud Database, ils seront transférés vers la Logs Data Platform. Cette plateforme vous donne accès à des fonctionnalités avancées telles que la gestion des alertes, l'exécution de recherches ou la gestion des rétentions."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_it_IT.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_it_IT.json
index 083e41436930..fdf2dc88fc71 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_it_IT.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_it_IT.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Log"
+  "private_database_logs": "Log",
+  "private_database_logs_description_dbms": "Qui sotto troverai i log in tempo reale generati dal tuo Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "Effettuando l’abbonamento ai log del tuo Webcloud Database, questi verranno trasferiti verso Logs Data Platform. Questa piattaforma offre accesso a funzionalità avanzate come configurazione degli alert, esecuzione di ricerche e gestione delle retention."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pl_PL.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pl_PL.json
index f1e96d6b4cec..aba2cf802c07 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pl_PL.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pl_PL.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logi"
+  "private_database_logs": "Logi",
+  "private_database_logs_description_dbms": "Poniżej znajdziesz logi w czasie rzeczywistym generowane przez Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "Po zasubskrybowaniu logów Webcloud Database zostaną one przeniesione do Logs Data Platform. Platforma ta zapewnia dostęp do zaawansowanych funkcji, takich jak zarządzanie alertami, wyszukiwanie lub zarządzanie czasem przechowywania."
 }
diff --git a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pt_PT.json b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pt_PT.json
index 4981aca0ecfe..7905fc4518a7 100644
--- a/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pt_PT.json
+++ b/packages/manager/apps/web/client/app/private-database/logs/translations/Messages_pt_PT.json
@@ -1,3 +1,5 @@
 {
-  "private_database_logs": "Logs"
+  "private_database_logs": "Logs",
+  "private_database_logs_description_dbms": "Encontrará abaixo os logs em tempo real gerados pelo Web Cloud Database.",
+  "private_database_data_streams_description_dbms": "Ao subscrever os logs da sua Webcloud Database, eles serão transferidos para a Logs Data Platform. Esta plataforma dá-lhe acesso a funcionalidades avançadas tais como a gestão de alertas, a execução de pesquisas ou a gestão de retenções."
 }
diff --git a/packages/manager/apps/web/package.json b/packages/manager/apps/web/package.json
index 45595e25bba8..edc484a75aa6 100644
--- a/packages/manager/apps/web/package.json
+++ b/packages/manager/apps/web/package.json
@@ -31,6 +31,7 @@
     "@ovh-ux/manager-error-page": "^2.4.1",
     "@ovh-ux/manager-exchange": "^4.9.0",
     "@ovh-ux/manager-filters": "^1.1.1",
+    "@ovh-ux/manager-log-to-customer": "^2.3.2",
     "@ovh-ux/manager-ng-layout-helpers": "^2.9.1",
     "@ovh-ux/manager-office": "^2.12.0",
     "@ovh-ux/manager-phone-prefix": "^1.1.1",
@@ -38,6 +39,7 @@
     "@ovh-ux/manager-web-paas": "^2.0.0",
     "@ovh-ux/ng-at-internet": "^6.0.0",
     "@ovh-ux/ng-at-internet-ui-router-plugin": "^3.5.0",
+    "@ovh-ux/ng-log-live-tail": "^2.4.0",
     "@ovh-ux/ng-ovh-actions-menu": "^5.1.1",
     "@ovh-ux/ng-ovh-api-wrappers": "^5.1.0",
     "@ovh-ux/ng-ovh-chart": "^1.2.0",