@centreon/ui 25.10.2-dev-25-10-x.0 → 25.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.10.2-dev-25-10-x.0",
+  "version": "25.10.2",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.7.3'
-const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
+const PACKAGE_VERSION = '2.2.14'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,12 +62,7 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: {
-          client: {
-            id: client.id,
-            frameType: client.frameType,
-          },
-        },
+        payload: true,
       })
       break
     }
@@ -160,10 +155,6 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
-  if (activeClientIds.has(event.clientId)) {
-    return client
-  }
-
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -192,26 +183,12 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    // Cast the request headers to a new Headers instance
-    // so the headers can be manipulated with.
-    const headers = new Headers(requestClone.headers)
-
-    // Remove the "accept" header value that marked this request as passthrough.
-    // This prevents request alteration and also keeps it compliant with the
-    // user-defined CORS policies.
-    const acceptHeader = headers.get('accept')
-    if (acceptHeader) {
-      const values = acceptHeader.split(',').map((value) => value.trim())
-      const filteredValues = values.filter(
-        (value) => value !== 'msw/passthrough',
-      )
+    const headers = Object.fromEntries(requestClone.headers.entries())
 
-      if (filteredValues.length > 0) {
-        headers.set('accept', filteredValues.join(', '))
-      } else {
-        headers.delete('accept')
-      }
-    }
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
 
     return fetch(requestClone, { headers })
   }

package/src/Graph/common/BaseChart/Header/index.tsx

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import Typography from '@mui/material/Typography';
 
 import { useMemoComponent } from '@centreon/ui';
@@ -10,7 +12,7 @@ interface Props {
   title: string;
 }
 
-const Header = ({ title, header }: Props): JSX.Element => {
+const Header = ({ title, header }: Props): ReactElement => {
   const { classes } = ussHeaderChartStyles();
 
   const displayTitle = header?.displayTitle ?? true;

package/src/Graph/index.ts

@@ -6,6 +6,7 @@ export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+export { default as Header } from './common/BaseChart/Header';
 
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';

package/src/ThemeProvider/base.css

@@ -0,0 +1,49 @@
+@layer base {
+  ::-webkit-scrollbar {
+    height: var(--spacing-2);
+    width: var(--spacing-2);
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-text-disabled);
+    border-radius: var(--spacing-1);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-primary-main);
+  }
+
+  * {
+    scrollbar-color: var(--color-text-disabled) var(--color-background-default);
+    scrollbar-width: thin;
+  }
+
+  html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: var(--color-background-paper);
+    height: 100%;
+    padding: 0;
+    width: 100%;
+  }
+
+  #root {
+    background-color: var(--color-background-paper) !important;
+  }
+
+  @variant dark {
+    ::-webkit-scrollbar-thumb {
+      background-color: var(--color-divider);
+    }
+    * {
+      scrollbar-color: var(--color-divider) var(--color-background-default);
+    }
+  }
+}

package/src/ThemeProvider/index.tsx

@@ -26,7 +26,7 @@ import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
-  interface DefaultTheme extends Theme {}
+  interface DefaultTheme extends Theme { }
 }
 
 declare module '@mui/material/TextField' {
@@ -147,46 +147,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        ::-webkit-scrollbar {
-          height: ${theme.spacing(1)};
-          width: ${theme.spacing(1)};
-          background-color: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-          background-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          };
-          border-radius: ${theme.spacing(0.5)};
-        }
-        ::-webkit-scrollbar-thumb:hover {
-          background-color: ${theme.palette.primary.main};
-        }
-        * {
-          scrollbar-color: ${
-            equals(mode, 'dark')
-              ? theme.palette.divider
-              : theme.palette.text.disabled
-          } ${theme.palette.background.default};
-          scrollbar-width: thin;
-        }
-        html {
-          margin: 0;
-          padding: 0;
-          width: 100%;
-          height: 100%;
-          text-rendering: optimizeLegibility;
-        }
-        body {
-          background-color: ${theme.palette.background.paper};
-          height: 100%;
-          padding: 0;
-          width: 100%;
-        }
-        #root {
-          background-color: ${theme.palette.background.paper};
-        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;
@@ -211,6 +171,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           font-weight: 700;
           src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
         }
+        body {
+          background-color: ${theme.palette.background.paper};
+        }
       `
     },
     MuiInputBase: {
@@ -235,14 +198,14 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           '&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus':
-            {
-              background: equals(theme.palette.mode, ThemeMode.dark)
-                ? theme.palette.primary.dark
-                : theme.palette.primary.light,
-              color: equals(theme.palette.mode, ThemeMode.dark)
-                ? theme.palette.common.white
-                : theme.palette.primary.main
-            },
+          {
+            background: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.primary.dark
+              : theme.palette.primary.light,
+            color: equals(theme.palette.mode, ThemeMode.dark)
+              ? theme.palette.common.white
+              : theme.palette.primary.main
+          },
           fontSize: theme.typography.body2.fontSize
         })
       }
@@ -259,12 +222,12 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
       styleOverrides: {
         root: ({ theme }) => ({
           [`[role="tooltip"] &, &.MuiMenu-paper, &.${autocompleteClasses.paper}`]:
-            {
-              backgroundColor: theme.palette.background.default,
-              border: 'none',
-              borderRadius: `${theme.shape.borderRadius}px`,
-              boxShadow: theme.shadows[3]
-            }
+          {
+            backgroundColor: theme.palette.background.default,
+            border: 'none',
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: theme.shadows[3]
+          }
         })
       }
     },

package/src/ThemeProvider/tailwindcss.css

@@ -1,10 +1,13 @@
 @import "tailwindcss";
+@import "./base.css"; /* Base styles: scrollbar, html, body, #root */
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+  /* Typography */
   --font-body: Roboto, Arial, serif;
 
+  /* Spacing system */
   --spacing: 4px;
 
   --spacing-0: calc(var(--spacing) * 0);
@@ -19,6 +22,11 @@
   --spacing-9: calc(var(--spacing) * 9);
   --spacing-10: calc(var(--spacing) * 10);
 
+  /* =============
+     COLOR SYSTEM
+     ============= */
+  
+  /* Action colors */
   --color-action-acknowledged: #745f35;
   --color-action-acknowledged-background: #dfd2b9;
   --color-action-in-flapping: #064a3f;
@@ -35,6 +43,8 @@
   --color-action-in-downtime-background: #e5d8f3;
   --color-action-selected: rgba(102, 102, 102, 0.3);
   --color-action-selected-opacity: 0.3;
+  
+  /* Background colors */
   --color-background-default: #f4f4f4;
   --color-background-listing-header: #666666;
   --color-background-panel: #ededed;
@@ -42,13 +52,19 @@
   --color-background-paper: #ffffff;
   --color-background-tooltip: #434e58;
   --color-background-widget: #f8f8f8;
+  
+  /* Chip colors */
   --color-chip-error: #ff6666;
   --color-chip-info: #1588d1;
   --color-chip-neutral: #6da4e4;
   --color-chip-success: #88b922;
   --color-chip-warning: #fd9b27;
+  
+  /* Utility colors */
   --color-divider: #e3e3e3;
   --color-error-main: #ff4a4a;
+  
+  /* Header colors */
   --color-header-page-action-background-active: #1975d10f;
   --color-header-page-action-background-default: #ffffff00;
   --color-header-page-action-color-active: #1976d2;
@@ -74,13 +90,19 @@
   --color-header-menu-item-color-active: #3e85d5;
   --color-header-menu-item-color-default: #1b2127;
   --color-header-menu-item-color-hover: #101418;
+  
+  /* State colors */
   --color-pending-main: #1ebeb3;
+  
+  /* Primary & Secondary colors */
   --color-primary-main: #2e68aa;
   --color-primary-light: #cde7fc;
   --color-primary-dark: #255891;
   --color-secondary-main: #c772d6;
   --color-secondary-light: #e5a5f0;
   --color-secondary-dark: #ac28c1;
+  
+  /* Status colors */
   --color-status-background-error: #ff6666;
   --color-status-background-none: --alpha(#2e68aa / 10%);
   --color-status-background-pending: #1ebeb3;
@@ -88,12 +110,16 @@
   --color-stauts-background-unknown: #e3e3e3;
   --color-status-background-warning: #fd9b27;
   --color-success-main: #88b922;
+  
+  /* Text colors */
   --color-text-disabled: #999999;
   --color-text-primary: #000000;
   --color-text-secondary: #666666;
   --color-warning-main: #fd9b27;
   --color-warning-light: #fcc481;
   --color-warning-dark: #fc7e00;
+  
+  /* Base colors */
   --color-white: #ffffff;
   --color-black: #000000;
 }

package/src/api/useGraphQuery/index.ts

@@ -36,6 +36,7 @@ interface UseMetricsQueryProps {
     start?: string | null;
     timePeriodType: number;
   };
+  isEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -101,7 +102,8 @@ const useGraphQuery = ({
   refreshInterval = false,
   refreshCount,
   bypassQueryParams = false,
-  prefix
+  prefix,
+  isEnabled = true
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -158,7 +160,10 @@ const useGraphQuery = ({
       refreshCount || 0
     ],
     queryOptions: {
-      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
+      enabled:
+        areResourcesFullfilled(resources) &&
+        !isEmpty(definedMetrics) &&
+        isEnabled,
       refetchInterval: refreshInterval,
       suspense: false
     },