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

package/package.json

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

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
     },