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

package/package.json

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

package/src/Form/Inputs/Grid.tsx

@@ -21,8 +21,9 @@ const Grid = ({
     <div
       className={`${className} grid gap-3`}
       style={{
-        gridTemplateColumns:
-          className ? grid?.gridTemplateColumns || undefined : grid?.gridTemplateColumns ||
+        gridTemplateColumns: className
+          ? grid?.gridTemplateColumns || undefined
+          : grid?.gridTemplateColumns ||
             `repeat(${grid?.columns.length || 1}, 1fr)`,
         alignItems: grid?.alignItems || 'flex-start'
       }}

package/src/Form/Section/navigateToSection.ts

@@ -1,9 +1,9 @@
 export const useNavigateToSection = () => {
-    return (sectionName: string) => {
-        const section = document.querySelector(
-            `[data-section-group-form-id="${sectionName}"]`
-        );
+  return (sectionName: string) => {
+    const section = document.querySelector(
+      `[data-section-group-form-id="${sectionName}"]`
+    );
 
-        section?.scrollIntoView({ behavior: 'smooth' });
-    };
+    section?.scrollIntoView({ behavior: 'smooth' });
+  };
 };

package/src/Graph/BarChart/BarChart.cypress.spec.tsx

@@ -8,6 +8,7 @@ import dataLastWeek from '../mockedData/lastWeek.json';
 import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
+import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
 
 import BarChart, { BarChartProps } from './BarChart';
 
@@ -312,4 +313,12 @@ describe('Bar chart', () => {
     cy.contains('1 s').should('be.visible');
     cy.contains('1%').should('be.visible');
   });
+
+  it('displays the stacked bar chart correctly when a point is missing compare to the time serie', () => {
+    initialize({ data: dataMissingPoint });
+
+    cy.findByTestId('stacked-bar-2-0-139').should('be.visible');
+
+    cy.makeSnapshot();
+  });
 });

package/src/Graph/BarChart/BarChart.stories.tsx

@@ -6,6 +6,8 @@ import dataPingService from '../mockedData/pingService.json';
 import dataPingServiceMixedStacked from '../mockedData/pingServiceMixedStacked.json';
 import dataPingServiceStacked from '../mockedData/pingServiceStacked.json';
 
+import { ClickAwayListener } from '@mui/material';
+import { useState } from 'react';
 import BarChart from './BarChart';
 
 const meta: Meta<typeof BarChart> = {
@@ -259,4 +261,43 @@ export const mixedStackedMinMax: Story = {
     max: 20
   },
   render: Template
-};
+};
+
+const LegendSecondaryClick = (args) => {
+  const [position, setPosition] = useState<Array<[number, number]> | null>(
+    null
+  );
+
+  return (
+    <>
+      <Template
+        {...args}
+        legend={{
+          secondaryClick: ({ position }) => setPosition(position)
+        }}
+      />
+      {position && (
+        <ClickAwayListener onClickAway={() => setPosition(null)}>
+          <div
+            className="absolute py-1 px-2 rounded-sm bg-background-widget shadow-md"
+            style={{ left: position?.[0], top: position?.[1] }}
+            open={Boolean(position)}
+            onClose={() => setPosition(null)}
+          >
+            menu
+          </div>
+        </ClickAwayListener>
+      )}
+    </>
+  );
+};
+
+export const withLegendSecondaryClick: Story = {
+  args: defaultArgs,
+  render: (args) => (
+    <LegendSecondaryClick
+      {...args}
+      data={dataPingService as unknown as LineChartData}
+    />
+  )
+};

package/src/Graph/BarChart/BarChart.tsx

@@ -116,4 +116,4 @@ const BarChart = ({
   );
 };
 
-export default BarChart;
+export default BarChart;

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -196,7 +196,8 @@ const ResponsiveBarChart = ({
         displayLegend,
         mode: legend?.mode,
         placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent
+        renderExtraComponent: legend?.renderExtraComponent,
+        secondaryClick: legend?.secondaryClick
       }}
       legendRef={legendRef}
       limitLegend={limitLegend}

package/src/Graph/Chart/Chart.cypress.spec.tsx

@@ -180,7 +180,7 @@ describe('Line chart', () => {
       cy.contains('06/18/2023').should('be.visible');
 
       cy.contains('0.4 s').should('be.visible');
-       cy.contains('75.64%').should('be.visible');
+      cy.contains('75.64%').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -532,7 +532,7 @@ describe('Line chart', () => {
 
       checkGraphWidth();
       cy.contains(':00 AM').should('be.visible');
-      cy.get('circle[cx="250.83333333333334"]').should('be.visible');
+      cy.get('circle[cx="248.33333333333334"]').should('be.visible');
       cy.get('circle[cy="251.79089393069725"]').should('be.visible');
 
       cy.makeSnapshot();
@@ -591,7 +591,7 @@ describe('Line chart', () => {
       cy.get('path.visx-area-closed')
         .should('have.attr', 'stroke-dasharray')
         .and('equals', '5 4');
-      cy.get('circle[cx="33.44444444444444"]').should('be.visible');
+      cy.get('circle[cx="33.11111111111111"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -746,9 +746,11 @@ describe('Lines and bars', () => {
 
     checkGraphWidth();
 
-    cy.get('path[d="M7.501377410468319,350.5553648585503 h56.51239669421488 h1v1 v23.44463514144968 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-23.44463514144968 v-1h1z"]'
+    cy.get(
+      'path[d="M7.501377410468319,350.5553648585503 h56.51239669421488 h1v1 v23.44463514144968 a1,1 0 0 1 -1,1 h-56.51239669421488 a1,1 0 0 1 -1,-1 v-23.44463514144968 v-1h1z"]'
     ).should('be.visible');
-    cy.get('path[d="M24.05509641873278,201.58170928199803 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v113.86621756002336 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-113.86621756002336 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
+    cy.get(
+      'path[d="M24.05509641873278,201.58170928199803 h23.404958677685954 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,17.553719008264462 v113.86621756002336 v17.553719008264462h-17.553719008264462 h-23.404958677685954 h-17.553719008264462v-17.553719008264462 v-113.86621756002336 a17.553719008264462,17.553719008264462 0 0 1 17.553719008264462,-17.553719008264462z"]'
     ).should('be.visible');
 
     cy.makeSnapshot();
@@ -814,4 +816,21 @@ describe('Lines and bars', () => {
 
     cy.makeSnapshot();
   });
+
+  it('calls the secondary function when a metric is clicked in the legend', () => {
+    const secondaryClick = cy.stub().as('secondaryClick');
+    initialize({
+      data: dataPingServiceLines,
+      legend: {
+        mode: 'grid',
+        placement: 'bottom',
+        secondaryClick
+      }
+    });
+
+    checkGraphWidth();
+
+    cy.contains('Packet Loss').rightclick();
+    cy.get('@secondaryClick').should('have.been.called');
+  });
 });

package/src/Graph/Chart/Chart.stories.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from '@mui/material';
+import { Button, Menu } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
@@ -758,3 +758,36 @@ export const linesAndBarsMinMaxForUnit: Story = {
     />
   )
 };
+
+const LegendSecondaryClick = (args) => {
+  const [anchor, setAnchor] = useState<EventTarget | null>(null);
+
+  return (
+    <>
+      <WrapperChart
+        {...args}
+        legend={{
+          secondaryClick: ({ element }) => setAnchor(element)
+        }}
+      />
+      <Menu
+        anchorEl={anchor}
+        open={Boolean(anchor)}
+        onClose={() => setAnchor(null)}
+      >
+        menu
+      </Menu>
+    </>
+  );
+};
+
+export const withLegendSecondaryClick: Story = {
+  argTypes,
+  args: argumentsData,
+  render: (args) => (
+    <LegendSecondaryClick
+      {...args}
+      data={dataPingService as unknown as LineChartData}
+    />
+  )
+};

package/src/Graph/Chart/Chart.tsx

@@ -277,7 +277,8 @@ const Chart = ({
             legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
-            renderExtraComponent: legend?.renderExtraComponent
+            renderExtraComponent: legend?.renderExtraComponent,
+            secondaryClick: legend?.secondaryClick
           }}
           legendRef={legendRef}
           limitLegend={limitLegend}
@@ -394,4 +395,4 @@ const Chart = ({
   );
 };
 
-export default Chart;
+export default Chart;

package/src/Graph/Chart/Legend/index.tsx

@@ -26,6 +26,11 @@ interface Props extends Pick<LegendModel, 'placement' | 'mode'> {
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
   shouldDisplayLegendInCompactMode: boolean;
   toggable?: boolean;
+  secondaryClick?: (props: {
+    element: EventTarget | null;
+    metricId: number | string;
+    position: [number, number];
+  }) => void;
 }
 
 const MainLegend = ({
@@ -38,7 +43,8 @@ const MainLegend = ({
   shouldDisplayLegendInCompactMode,
   placement,
   height,
-  mode
+  mode,
+  secondaryClick
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     limitLegendRows: Boolean(limitLegend),
@@ -65,7 +71,24 @@ const MainLegend = ({
       value
     }) || 'N/A';
 
-  const selectMetric = ({ event, metric_id }): void => {
+  const contextMenuClick =
+    (metricId: number) =>
+    (event: MouseEvent): void => {
+      if (!secondaryClick) {
+        return;
+      }
+      event.preventDefault();
+      secondaryClick({
+        element: event.target,
+        metricId,
+        position: [event.pageX, event.pageY]
+      });
+    };
+
+  const selectMetric = ({
+    event,
+    metric_id
+  }: { event: MouseEvent; metric_id: number }): void => {
     if (!toggable) {
       return;
     }
@@ -127,6 +150,7 @@ const MainLegend = ({
               onClick={(event): void => selectMetric({ event, metric_id })}
               onMouseEnter={(): void => highlightLine(metric_id)}
               onMouseLeave={(): void => clearHighlight()}
+              onContextMenu={contextMenuClick(metric_id)}
             >
               <LegendHeader
                 color={markerColor}

package/src/Graph/Chart/models.ts

@@ -175,6 +175,11 @@ export interface LegendModel {
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;
+  secondaryClick?: (props: {
+    element: EventTarget | null;
+    metricId: number | string;
+    position: [number, number];
+  }) => void;
 }
 
 export interface GetDate {
@@ -193,4 +198,4 @@ export interface GraphTooltipData {
     unit: string;
     value: number;
   }>;
-}
+}

package/src/Graph/Chart/useChartData.ts

@@ -40,7 +40,7 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       return data;
     }
 
-    if (isEmpty(data.metrics) || isEmpty(data.times)) {
+    if (isEmpty(data.metrics)) {
       return undefined;
     }
 

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

@@ -19,7 +19,10 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
+  legend: Pick<
+    LegendModel,
+    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
+  > & {
     displayLegend: boolean;
     legendHeight?: number;
   };
@@ -101,6 +104,7 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
+                  secondaryClick={legend?.secondaryClick}
                 />
               </div>
             )}
@@ -122,6 +126,7 @@ const BaseChart = ({
             renderExtraComponent={legend.renderExtraComponent}
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
+            secondaryClick={legend?.secondaryClick}
           />
         </div>
       )}

package/src/Graph/common/timeSeries/index.ts

@@ -72,7 +72,7 @@ const toTimeTickValue = (
   const getMetricsForIndex = (): Omit<TimeValue, 'timeTick'> => {
     const addMetricForTimeIndex = (acc, { metric_id, data }): TimeValue => ({
       ...acc,
-      [metric_id]: data[timeIndex]
+      [metric_id]: data[timeIndex] === undefined ? null : data[timeIndex]
     });
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
@@ -240,7 +240,10 @@ const getStackedMetricValues = ({
   timeSeries
 }: LinesTimeSeries): Array<number> => {
   const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
-    map((timeValue) => getValueForMetric(timeValue)(metric_id), timeSeries);
+    map(
+      (timeValue) => getValueForMetric(timeValue)(metric_id) || 0,
+      timeSeries
+    );
 
   const metricsValues = pipe(
     map(prop('metric_id')) as (metric) => Array<number>,
@@ -593,15 +596,15 @@ const getYScalePerUnit = ({
   return scalePerUnit;
 };
 
-const formatTime = (value: number): string => {
-  return `${numeral(value).format('0.[00]a')} ms`;
+const formatTime = ({ value, unit }): string => {
+  return `${numeral(value).format('0.[00]a')} ${unit}`;
 };
 
 const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
       format: (value) => {
-        return formatTime(value);
+        return formatTime({ value, unit: 'ms' });
       },
       regexps: {
         format: /(ms)/,
@@ -618,6 +621,27 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
+const registerSecondsUnitToNumeral = (): null => {
+  try {
+    numeral.register('format', 'seconds', {
+      format: (value) => {
+        return formatTime({ value, unit: 's' });
+      },
+      regexps: {
+        format: /(s)/,
+        unformat: /(s)/
+      },
+      unformat: () => ''
+    });
+
+    return null;
+  } catch (_) {
+    return null;
+  }
+};
+
+registerSecondsUnitToNumeral();
+
 const getBase1024 = ({ unit, base }): boolean => {
   const base2Units = [
     'B',
@@ -647,6 +671,7 @@ const formatMetricValue = ({
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
+    [equals('s'), always(' s')],
     [T, always(base1024 ? ' ib' : 'a')]
   ])(unit);
 
@@ -671,8 +696,6 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
-  const base1024 = getBase1024({ base, unit });
-
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -685,9 +708,7 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return base1024 || !unit || equals(unit, 'ms')
-    ? formattedMetricValue
-    : `${formattedMetricValue} ${unit}`;
+  return formattedMetricValue;
 };
 
 const bisectDate = bisector(identity).center;
@@ -766,4 +787,4 @@ export {
   formatMetricValueWithUnit,
   getYScaleUnit,
   getYScalePerUnit
-};
+};

package/src/Graph/common/utils.ts

@@ -25,7 +25,7 @@ import { BarStyle } from '../BarChart/models';
 import { margin } from '../Chart/common';
 import { LineStyle } from '../Chart/models';
 import { Threshold, Thresholds } from './models';
-import { formatMetricValue } from './timeSeries';
+import { formatMetricValueWithUnit } from './timeSeries';
 import { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
@@ -234,7 +234,7 @@ export const getFormattedAxisValues = ({
 
   const formattedData = metricIds.map((metricId) =>
     timeSeries.map((data) =>
-      formatMetricValue({
+      formatMetricValueWithUnit({
         value: data[metricId],
         unit: axisUnit,
         base
@@ -246,7 +246,7 @@ export const getFormattedAxisValues = ({
 
   const formattedThresholdValues = equals(thresholdUnit, axisUnit)
     ? threshold.map(({ value }) =>
-        formatMetricValue({
+        formatMetricValueWithUnit({
           value,
           unit: axisUnit,
           base
@@ -273,5 +273,11 @@ export const computeGElementMarginLeft = ({
 export const computPixelsToShiftMouse = (xScale): number => {
   const domain = xScale.domain();
 
-  return Math.round(8 / dayjs(domain[1]).diff(domain[0], 'h'));
+  const hoursDiffInGraph = dayjs(domain[1]).diff(domain[0], 'h');
+
+  if (!hoursDiffInGraph) {
+    return 0;
+  }
+
+  return Math.round(8 / hoursDiffInGraph);
 };

package/src/Graph/mockedData/dataWithMissingPoint.json

@@ -0,0 +1,74 @@
+{
+  "global": {},
+  "metrics": [
+    {
+      "metric": "count",
+      "metric_id": 1,
+      "legend": "count",
+      "displayAs": "bar",
+      "ds_data": {
+        "ds_stack": true,
+        "ds_transparency": 0,
+        "ds_filled": false,
+        "ds_color_area": "#4269d0",
+        "ds_color_line": "#4269d0"
+      },
+      "datasourceOptions": {
+        "field": null,
+        "group_by": null,
+        "op": "count-doc",
+        "query": "severity_text:\"Fatal\" OR severity_text:\"Error\"",
+        "period": 3600
+      },
+      "data": [
+        217, 270, 293, 300, 303, 295, 298, 283, 299, 299, 297, 285, 270, 248,
+        274, 292, 284, 47
+      ]
+    },
+    {
+      "metric": "count",
+      "metric_id": 2,
+      "legend": "count",
+      "displayAs": "bar",
+      "ds_data": {
+        "ds_stack": true,
+        "ds_transparency": 0,
+        "ds_filled": false,
+        "ds_color_area": "#efb118",
+        "ds_color_line": "#efb118"
+      },
+      "datasourceOptions": {
+        "field": null,
+        "group_by": null,
+        "op": "count-doc",
+        "query": "",
+        "period": 3600
+      },
+      "data": [
+        32, 825, 939, 922, 918, 939, 943, 947, 946, 909, 931, 939, 883, 907,
+        928, 904, 923, 893, 139
+      ]
+    }
+  ],
+  "times": [
+    "2025-10-04T16:19:30.000Z",
+    "2025-10-04T16:20:00.000Z",
+    "2025-10-04T16:20:30.000Z",
+    "2025-10-04T16:21:00.000Z",
+    "2025-10-04T16:21:30.000Z",
+    "2025-10-04T16:22:00.000Z",
+    "2025-10-04T16:22:30.000Z",
+    "2025-10-04T16:23:00.000Z",
+    "2025-10-04T16:23:30.000Z",
+    "2025-10-04T16:24:00.000Z",
+    "2025-10-04T16:24:30.000Z",
+    "2025-10-04T16:25:00.000Z",
+    "2025-10-04T16:25:30.000Z",
+    "2025-10-04T16:26:00.000Z",
+    "2025-10-04T16:26:30.000Z",
+    "2025-10-04T16:27:00.000Z",
+    "2025-10-04T16:27:30.000Z",
+    "2025-10-04T16:28:00.000Z",
+    "2025-10-04T16:28:30.000Z"
+  ]
+}

package/src/InputField/Select/index.tsx

@@ -96,7 +96,6 @@ const SelectField = ({
       fullWidth={fullWidth}
       size="small"
       {...formControlProps}
-      
     >
       {label && <InputLabel>{label}</InputLabel>}
       <Select
@@ -151,4 +150,4 @@ const SelectField = ({
   );
 };
 
-export default SelectField;
+export default SelectField;

package/src/Module/index.tsx

@@ -3,6 +3,7 @@ import { Provider as JotaiProvider, createStore } from 'jotai';
 
 import { StylesProvider, createGenerateClassName } from '@mui/styles';
 
+import { ThemeOptions } from '@mui/material';
 import { QueryProvider, ThemeProvider } from '..';
 import SnackbarProvider from '../Snackbar/SnackbarProvider';
 
@@ -12,6 +13,10 @@ export interface ModuleProps {
   queryClient?: QueryClient;
   seedName: string;
   store: ReturnType<typeof createStore>;
+  overrideTheme?: {
+    light: Partial<ThemeOptions>;
+    dark: Partial<ThemeOptions>;
+  };
 }
 
 const Module = ({
@@ -19,7 +24,8 @@ const Module = ({
   seedName,
   maxSnackbars = 3,
   store,
-  queryClient
+  queryClient,
+  overrideTheme
 }: ModuleProps): JSX.Element => {
   const generateClassName = createGenerateClassName({
     seed: seedName
@@ -29,7 +35,7 @@ const Module = ({
     <QueryProvider queryClient={queryClient}>
       <JotaiProvider store={store}>
         <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider>
+          <ThemeProvider overrideTheme={overrideTheme}>
             <SnackbarProvider maxSnackbars={maxSnackbars}>
               {children}
             </SnackbarProvider>

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

@@ -1,11 +1,12 @@
 import { useAtomValue } from 'jotai';
-import { equals } from 'ramda';
+import { equals, mergeDeepRight } from 'ramda';
 import { CSSInterpolation } from 'tss-react';
 
 import {
   ButtonProps,
   InputBaseProps,
   ThemeProvider as MuiThemeProvider,
+  PaletteOptions,
   StyledEngineProvider,
   Theme,
   createTheme
@@ -147,46 +148,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 +172,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: {
@@ -294,15 +258,23 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
 
 interface Props {
   children: ReactNode;
+  overrideTheme?: {
+    light: Partial<PaletteOptions>;
+    dark: Partial<PaletteOptions>;
+  };
 }
 
-const ThemeProvider = ({ children }: Props): JSX.Element => {
+const ThemeProvider = ({ children, overrideTheme }: Props): JSX.Element => {
   const { themeMode } = useAtomValue(userAtom);
 
-  const theme = useMemo(
-    () => createTheme(getTheme(themeMode || ThemeMode.light)),
-    [themeMode]
-  );
+  const theme = useMemo(() => {
+    const overrideThemeByMode = overrideTheme?.[themeMode || 'light'];
+    return createTheme(
+      mergeDeepRight(getTheme(themeMode || ThemeMode.light), {
+        palette: overrideThemeByMode || {}
+      })
+    );
+  }, [themeMode, overrideTheme]);
 
   return (
     <StyledEngineProvider injectFirst enableCssLayer>

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

package/src/components/Modal/Modal.styles.ts

@@ -72,8 +72,7 @@ const useStyles = makeStyles<{
       opacity: 0.6
     },
     top: theme.spacing(1)
-  },
-  
+  }
 }));
 
 export { useStyles };

package/src/components/Modal/ModalHeader.tsx

@@ -16,7 +16,11 @@ const ModalHeader = ({
 }: ModalHeaderProps & DialogTitleProps): ReactElement => {
   return (
     <div className={modalHeader}>
-      <MuiDialogTitle className="p-0 font-bold text-2xl" color="primary" {...rest}>
+      <MuiDialogTitle
+        className="p-0 font-bold text-2xl"
+        color="primary"
+        {...rest}
+      >
         {children}
       </MuiDialogTitle>
     </div>