ovh · yjaaouane · Sep 23, 2025 · Sep 19, 2025 · Sep 25, 2025 · Oct 9, 2025
@@ -34,6 +34,7 @@ packages/manager/modules/config
 packages/manager/modules/gcj
 packages/manager/modules/logs-to-customer
 packages/manager/modules/network-common
+packages/manager/modules/observability-to-customer
 packages/manager/modules/order
 packages/manager-tools/manager-cli
 packages/manager-tools/manager-static-analysis-kit
@@ -46,6 +47,7 @@ packages/manager/apps/cloud-shell/src/wasm_exec.js
 packages/manager/apps/pci-instances
 packages/manager/apps/pci-kubernetes
 packages/manager/apps/pci-workflow
+packages/manager/apps/observability
 packages/manager/apps/web-domains
 packages/manager/apps/web-hosting
 packages/manager/apps/web-office

@@ -44,6 +44,7 @@
 /packages/manager/apps/nasha @ovh/dev-manager-infrastructure-baremetalstorage
 /packages/manager/apps/netapp @ovh/dev-manager-infrastructure-baremetalstorage
 /packages/manager/apps/nutanix @ovh/dev-manager-enterprise-nutanixBackup
+/packages/manager/apps/observability @ovh/dev-manager-enablers-all
 /packages/manager/apps/okms @ovh/dev-manager-enterprise-kms
 /packages/manager/apps/overthebox @ovh/dev-manager-infrastructure-network
 /packages/manager/apps/pci @ovh/dev-manager-pci-all

@@ -14,7 +14,10 @@ react
 vue
 packages/manager/apps/pci-databases-analytics/src/components/ui
 packages/manager/apps/pci-databases-analytics/src/lib/utils.ts
+packages/manager/apps/observability
+packages/manager/modules/observability-to-customer
 packages/manager-ui-kit
 packages/manager-wiki
 packages/manager-tools/manager-forge-cli
 packages/manager-tools/manager-forge-cli/template
+packages/manager/apps/observability
@@ -1,9 +1,11 @@
 [
+  "packages/manager/apps/observability",
   "packages/manager/apps/web-office",
   "packages/manager/apps/zimbra",
   "packages/manager/apps/pci-contacts",
   "packages/manager/apps/pci-instances",
   "packages/manager/apps/web-hosting",
   "packages/manager/apps/web-ongoing-operations",
-  "packages/manager/apps/pci-block-storage"
+  "packages/manager/apps/pci-block-storage",
+  "packages/manager/modules/observability-to-customer"
 ]
@@ -51,6 +51,9 @@ export const features = [
   'okms',
   'okms:key-management-service',
   'okms:secret-manager',
+  'observability',
+  'observability:dashboards',
+  'observability:metrics:tenants',
 ];
 
 export default function DedicatedSidebar() {
@@ -442,6 +445,48 @@ export default function DedicatedSidebar() {
       });
     }
 
+    if (feature['observability']) {
+
+      const observabilityIcon = (
+        <OsdsIcon
+          name={ODS_ICON_NAME.KEY_CONCEPT}
+          size={ODS_ICON_SIZE.xxs}
+          color={ODS_THEME_COLOR_INTENT.text}
+        />
+      );
+
+      menu.push({
+        id: 'observability',
+        label: t('sidebar_observability'),
+        icon: (
+          <OsdsIcon
+            name={ODS_ICON_NAME.CLOUD_EYE_CONCEPT}
+            size={ODS_ICON_SIZE.xxs}
+            color={ODS_THEME_COLOR_INTENT.text}
+          />
+        ),
+        pathMatcher: new RegExp('^/observability'),
+        subItems: [
+          feature['observability:dashboards'] && {
+            id: 'dashboards',
+            href: navigation.getURL('observability', '#/dashboards'),
+            label: t('sidebar_observability_dashboards'),
+            pathMatcher: new RegExp('^/observability/dashboards'),
+            ignoreSearch: true,
+            icon: observabilityIcon,
+          },
+          feature['observability:metrics:tenants'] && {
+            id: 'tenants',
+            href: navigation.getURL('observability', '#/metrics/tenants'),
+            label: t('sidebar_observability_metrics_tenants'),
+            pathMatcher: new RegExp('^/observability/metrics'),
+            ignoreSearch: true,
+            icon: observabilityIcon,
+          },
+        ].filter(Boolean),
+      });
+    }
+
     return menu;
   };
 

@@ -7,6 +7,7 @@ import sunrise from './services/sunrise';
 import telecom from './services/telecom';
 import webCloud from './services/webCloud';
 import securityIdentityOperation from './services/securityIdentityOperation';
+import observability from './services/observability';
 import { assistanceTree } from './assistance';
 
 const root: Node = {
@@ -28,6 +29,7 @@ const root: Node = {
         publicCloud,
         sunrise,
         securityIdentityOperation,
+        observability,
         telecom,
         webCloud,
       ],

@@ -0,0 +1,55 @@
+import OvhProductName from '@ovh-ux/ovh-product-icons/utils/OvhProductNameEnum';
+import illustration from '@/assets/images/sidebar/security-identity-operations.png';
+import { Node } from '../node';
+
+const sioUniverse: Node = {
+  id: 'observability',
+  idAttr: 'observability-link',
+  translation: 'sidebar_observability',
+  shortTranslation: 'sidebar_observability_short',
+  illustration,
+  svgIcon: OvhProductName.SHIELDCHECK,
+  routing: {
+    application: 'observability',
+  },
+  hasService: false,
+  features: ['observability'],
+};
+
+sioUniverse.children = [
+  {
+    id: 'dashboards',
+    idAttr: 'dashboards-link',
+    translation: 'sidebar_observability_dashboards',
+    universe: sioUniverse.id,
+    features: ['observability:dashboards'],
+    routing: {
+      application: 'observability',
+      hash: '#/dashboards',
+    },
+  },
+  {
+    id: 'metrics',
+    idAttr: 'metrics-link',
+    translation: 'sidebar_observability_metrics',
+    universe: sioUniverse.id,
+    features: ['observability:metrics'],
+    children: [
+      {
+        id: 'observability-metrics-tenants',
+        idAttr: 'observability-metrics-tenants-link',
+        translation: 'sidebar_observability_metrics_tenants',
+        universe: sioUniverse.id,
+        serviceType: 'DBAAS_LOGS',
+        features: ['observability:metrics:tenants'],
+        routing: {
+          application: 'observability',
+          hash: '#/metrics/tenants',
+          pathMatcher: /observability\/metrics/,
+        },
+      },
+    ],
+  },
+];
+
+export default sioUniverse;
@@ -212,5 +212,10 @@
   "sidebar_skip_to_the_main_content": "Allez au contenu principal",
   "sidebar_public_networking": "Réseau public",
   "sidebar_private_networking": "Réseau privé",
-  "sidebar_network_services": "Services réseau"
+  "sidebar_network_services": "Services réseau",
+  "sidebar_observability": "Observabilité",
+  "sidebar_observability_short": "Observabilité",
+  "sidebar_observability_dashboards": "Tableaux de bord",
+  "sidebar_observability_metrics": "Métriques",
+  "sidebar_observability_metrics_tenants": "Tenants"
 }
@@ -0,0 +1,56 @@
+# observability — OVHcloud Manager Application
+
+> Universe: **Manager / Manager**
+
+## Overview
+
+This application is a single-page React app integrated into the OVHcloud Manager ecosystem.  
+
+---
+## 🚀 Development
+
+From the root:
+
+```bash
+# Install dependencies
+yarn install
+
+# Start dev server (Vite)
+yarn start
+
+# Build for production
+yarn build
+
+# Lint
+yarn lint:modern
+yarn lint:modern:fix
+
+# Test
+yarn test
+yarn test:coverage
+```
+
+The app uses **hash-based routing**. Open the dev server URL printed by Vite (default `http://localhost:5173/`) and navigate under:
+```
+#/[flavor-aware root from Routes.utils.ts]
+```
+### Enable mock mode for API calls (temporary)
+
+Update `src/__mocks__/mock.config.ts`
+```js
+export const apiConfig = {
+  mode: 'mock',
+};
+```
+---
+
+## 📚 Useful Links
+
+- Manager React Shell Client: https://github.com/ovh/manager
+- React Router Docs: https://reactrouter.com/
+- Iceberg API Guide: https://github.com/ovh/manager-core-api
+- OVHcloud Public API Explorer: https://api.ovh.com/
+
+---
+
+**Generated with ❤️ by OVHcloud Manager App Generator**
@@ -0,0 +1,50 @@
+import { tailwind4 } from 'tailwind-csstree';
+
+import { a11yEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/a11y';
+import {
+  complexityJsxTsxConfig,
+  complexityTsJsConfig,
+} from '@ovh-ux/manager-static-analysis-kit/eslint/complexity';
+import { cssEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/css';
+import { htmlEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/html';
+import { javascriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/javascript';
+import { prettierEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/prettier';
+import { reactEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/react';
+import { tailwindJsxConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tailwind-jsx';
+import { tanStackQueryEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tanstack';
+import { vitestEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/tests';
+import { typescriptEslintConfig } from '@ovh-ux/manager-static-analysis-kit/eslint/typescript';
+
+export default [
+  javascriptEslintConfig,
+  typescriptEslintConfig,
+  { ...reactEslintConfig, ignores: [...(reactEslintConfig.ignores || []), '**/__tests__/**'] },
+  a11yEslintConfig,
+  htmlEslintConfig,
+  tailwindJsxConfig,
+  tanStackQueryEslintConfig,
+  vitestEslintConfig,
+  prettierEslintConfig,
+  {
+    ...complexityJsxTsxConfig,
+    ignores: [...(complexityJsxTsxConfig.ignores || []), '**/__tests__/**'],
+  },
+  {
+    ...complexityTsJsConfig,
+    ignores: [...(complexityTsJsConfig.ignores || []), '**/__tests__/**'],
+  },
+  {
+    ...cssEslintConfig,
+    files: ['**/*.css', '**/*.scss'],
+    languageOptions: {
+      ...cssEslintConfig.languageOptions,
+      customSyntax: tailwind4,
+    },
+    rules: {
+      ...cssEslintConfig.rules,
+      'css/no-invalid-properties': 'off',
+      'css/no-invalid-at-rules': 'off',
+      'css/no-invalid-at-rule-placement': 'off',
+    },
+  },
+];
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>OVHcloud</title>
+        <link rel="shortcut icon" href="images/favicon.png" />
+        <link rel="apple-touch-icon" href="images/touchicon-180.png" />
+    </head>
+    <body>
+        <noscript>
+            <strong>
+                We're sorry but this application doesn't work properly without
+                JavaScript enabled. Please enable it to continue.
+            </strong>
+        </noscript>
+        <div id="root"></div>
+        <script type="module" src="./src/index.tsx"></script>
+    </body>
+</html>
@@ -0,0 +1,61 @@
+{
+  "name": "@ovh-ux/manager-observability-app",
+  "version": "0.0.0",
+  "private": true,
+  "description": "OVHCloud Observability µApplication",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ovh/manager.git",
+    "directory": "packages/manager/apps/observability"
+  },
+  "license": "BSD-3-Clause",
+  "author": "OVH SAS",
+  "scripts": {
+    "build": "tsc && vite build",
+    "lint:modern": "manager-lint --config eslint.config.mjs ./src",
+    "lint:modern:fix": "manager-lint --fix --config eslint.config.mjs ./src",
+    "start": "vite",
+    "test": "manager-test run",
+    "test:coverage": "manager-test run --coverage"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "5.2.1",
+    "@ovh-ux/manager-common-translations": "*",
+    "@ovh-ux/manager-config": "*",
+    "@ovh-ux/manager-core-api": "*",
+    "@ovh-ux/manager-core-utils": "*",
+    "@ovh-ux/manager-react-core-application": "*",
+    "@ovh-ux/manager-react-shell-client": "*",
+    "@ovh-ux/muk": "0.9.0",
+    "@ovh-ux/request-tagger": "*",
+    "@ovh-ux/shell": "^4.5.7",
+    "@ovhcloud/ods-react": "^19.3.0",
+    "@ovhcloud/ods-themes": "^19.3.0",
+    "@tanstack/react-query": "5.51.21",
+    "axios": "^1.6.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "duration-fns": "^3.0.2",
+    "element-internals-polyfill": "^3.0.2",
+    "i18next": "23.8.2",
+    "i18next-http-backend": "2.4.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.56.1",
+    "react-i18next": "14.1.3",
+    "react-router-dom": "6.16.0",
+    "tailwindcss": "^3.4.4",
+    "zod": "^4.0.17"
+  },
+  "devDependencies": {
+    "@ovh-ux/manager-static-analysis-kit": "*",
+    "@ovh-ux/manager-tests-setup": "*",
+    "@ovh-ux/manager-vite-config": "*",
+    "@tanstack/react-query-devtools": "5.51.21"
+  },
+  "regions": [
+    "CA",
+    "EU",
+    "US"
+  ]
+}
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,3 @@
+{
+  "title": "Dashboards"
+}