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

package/package.json

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

package/src/Form/Inputs/Grid.tsx

@@ -21,9 +21,8 @@ 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,7 +8,6 @@ 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';
 
@@ -313,12 +312,4 @@ 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,8 +6,6 @@ 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> = {
@@ -261,43 +259,4 @@ 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,8 +196,7 @@ const ResponsiveBarChart = ({
         displayLegend,
         mode: legend?.mode,
         placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent,
-        secondaryClick: legend?.secondaryClick
+        renderExtraComponent: legend?.renderExtraComponent
       }}
       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="248.33333333333334"]').should('be.visible');
+      cy.get('circle[cx="250.83333333333334"]').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.11111111111111"]').should('be.visible');
+      cy.get('circle[cx="33.44444444444444"]').should('be.visible');
 
       cy.makeSnapshot();
     });
@@ -746,11 +746,9 @@ 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();
@@ -816,21 +814,4 @@ 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, Menu } from '@mui/material';
+import { Button } from '@mui/material';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Switch from '@mui/material/Switch';
 import Tooltip from '@mui/material/Tooltip';
@@ -758,36 +758,3 @@ 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,8 +277,7 @@ const Chart = ({
             legendHeight: legend?.height,
             mode: legend?.mode,
             placement: legend?.placement,
-            renderExtraComponent: legend?.renderExtraComponent,
-            secondaryClick: legend?.secondaryClick
+            renderExtraComponent: legend?.renderExtraComponent
           }}
           legendRef={legendRef}
           limitLegend={limitLegend}
@@ -395,4 +394,4 @@ const Chart = ({
   );
 };
 
-export default Chart;
+export default Chart;

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

@@ -26,11 +26,6 @@ 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 = ({
@@ -43,8 +38,7 @@ const MainLegend = ({
   shouldDisplayLegendInCompactMode,
   placement,
   height,
-  mode,
-  secondaryClick
+  mode
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     limitLegendRows: Boolean(limitLegend),
@@ -71,24 +65,7 @@ const MainLegend = ({
       value
     }) || 'N/A';
 
-  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 => {
+  const selectMetric = ({ event, metric_id }): void => {
     if (!toggable) {
       return;
     }
@@ -150,7 +127,6 @@ 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,11 +175,6 @@ 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 {
@@ -198,4 +193,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)) {
+    if (isEmpty(data.metrics) || isEmpty(data.times)) {
       return undefined;
     }
 

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

@@ -19,10 +19,7 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: Pick<
-    LegendModel,
-    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
-  > & {
+  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
     displayLegend: boolean;
     legendHeight?: number;
   };
@@ -104,7 +101,6 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
-                  secondaryClick={legend?.secondaryClick}
                 />
               </div>
             )}
@@ -126,7 +122,6 @@ 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] === undefined ? null : data[timeIndex]
+      [metric_id]: data[timeIndex]
     });
 
     return reduce(addMetricForTimeIndex, {} as TimeValue, metrics);
@@ -240,10 +240,7 @@ const getStackedMetricValues = ({
   timeSeries
 }: LinesTimeSeries): Array<number> => {
   const getTimeSeriesValuesForMetric = (metric_id): Array<number> =>
-    map(
-      (timeValue) => getValueForMetric(timeValue)(metric_id) || 0,
-      timeSeries
-    );
+    map((timeValue) => getValueForMetric(timeValue)(metric_id), timeSeries);
 
   const metricsValues = pipe(
     map(prop('metric_id')) as (metric) => Array<number>,
@@ -596,15 +593,15 @@ const getYScalePerUnit = ({
   return scalePerUnit;
 };
 
-const formatTime = ({ value, unit }): string => {
-  return `${numeral(value).format('0.[00]a')} ${unit}`;
+const formatTime = (value: number): string => {
+  return `${numeral(value).format('0.[00]a')} ms`;
 };
 
 const registerMsUnitToNumeral = (): null => {
   try {
     numeral.register('format', 'milliseconds', {
       format: (value) => {
-        return formatTime({ value, unit: 'ms' });
+        return formatTime(value);
       },
       regexps: {
         format: /(ms)/,
@@ -621,27 +618,6 @@ 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',
@@ -671,7 +647,6 @@ const formatMetricValue = ({
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
-    [equals('s'), always(' s')],
     [T, always(base1024 ? ' ib' : 'a')]
   ])(unit);
 
@@ -696,6 +671,8 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
+  const base1024 = getBase1024({ base, unit });
+
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -708,7 +685,9 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return formattedMetricValue;
+  return base1024 || !unit || equals(unit, 'ms')
+    ? formattedMetricValue
+    : `${formattedMetricValue} ${unit}`;
 };
 
 const bisectDate = bisector(identity).center;
@@ -787,4 +766,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 { formatMetricValueWithUnit } from './timeSeries';
+import { formatMetricValue } 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) =>
-      formatMetricValueWithUnit({
+      formatMetricValue({
         value: data[metricId],
         unit: axisUnit,
         base
@@ -246,7 +246,7 @@ export const getFormattedAxisValues = ({
 
   const formattedThresholdValues = equals(thresholdUnit, axisUnit)
     ? threshold.map(({ value }) =>
-        formatMetricValueWithUnit({
+        formatMetricValue({
           value,
           unit: axisUnit,
           base
@@ -273,11 +273,5 @@ export const computeGElementMarginLeft = ({
 export const computPixelsToShiftMouse = (xScale): number => {
   const domain = xScale.domain();
 
-  const hoursDiffInGraph = dayjs(domain[1]).diff(domain[0], 'h');
-
-  if (!hoursDiffInGraph) {
-    return 0;
-  }
-
-  return Math.round(8 / hoursDiffInGraph);
+  return Math.round(8 / dayjs(domain[1]).diff(domain[0], 'h'));
 };

package/src/InputField/Select/index.tsx

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

package/src/Module/index.tsx

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

package/src/ThemeProvider/index.tsx

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

package/src/ThemeProvider/tailwindcss.css

@@ -1,13 +1,10 @@
 @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);
@@ -22,11 +19,6 @@
   --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;
@@ -43,8 +35,6 @@
   --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;
@@ -52,19 +42,13 @@
   --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;
@@ -90,19 +74,13 @@
   --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;
@@ -110,16 +88,12 @@
   --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,7 +36,6 @@ interface UseMetricsQueryProps {
     start?: string | null;
     timePeriodType: number;
   };
-  isEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -102,8 +101,7 @@ const useGraphQuery = ({
   refreshInterval = false,
   refreshCount,
   bypassQueryParams = false,
-  prefix,
-  isEnabled = true
+  prefix
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -160,10 +158,7 @@ const useGraphQuery = ({
       refreshCount || 0
     ],
     queryOptions: {
-      enabled:
-        areResourcesFullfilled(resources) &&
-        !isEmpty(definedMetrics) &&
-        isEnabled,
+      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
       refetchInterval: refreshInterval,
       suspense: false
     },

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

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

package/src/components/Modal/ModalHeader.tsx

@@ -16,11 +16,7 @@ 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>

package/src/Graph/mockedData/dataWithMissingPoint.json

@@ -1,74 +0,0 @@
-{
-  "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/ThemeProvider/base.css

@@ -1,49 +0,0 @@
-@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);
-    }
-  }
-}