@centreon/ui 25.3.4 → 25.4.0-MON-191119-npm-develop.0

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
@@ -21,6 +22,7 @@ import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
 import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
 import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 
+import { GlobalStyles } from '@mui/system';
 import { ReactNode, useMemo } from 'react';
 import { getPalette } from './palettes';
 
@@ -146,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;
@@ -210,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: {
@@ -293,18 +258,27 @@ 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>
+    <StyledEngineProvider injectFirst enableCssLayer>
+      <GlobalStyles styles="@layer theme,base,mui,components,utilities;" />
       <MuiThemeProvider theme={theme}>
         <CssBaseline />
         {children}

package/src/ThemeProvider/palettes.ts

@@ -295,7 +295,9 @@ export const lightPalette: PaletteOptions = {
   },
   warning: {
     contrastText: '#000',
-    main: '#FD9B27'
+    main: '#FD9B27',
+    light: '#FCC481',
+    dark: '#FC7E00'
   }
 };
 

package/src/ThemeProvider/tailwindcss.css

@@ -0,0 +1,230 @@
+@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);
+  --spacing-1: calc(var(--spacing) * 1);
+  --spacing-2: calc(var(--spacing) * 2);
+  --spacing-3: calc(var(--spacing) * 3);
+  --spacing-4: calc(var(--spacing) * 4);
+  --spacing-5: calc(var(--spacing) * 5);
+  --spacing-6: calc(var(--spacing) * 6);
+  --spacing-7: calc(var(--spacing) * 7);
+  --spacing-8: calc(var(--spacing) * 8);
+  --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;
+  --color-action-in-flapping-background: #d8f3ef;
+  --color-action-activated-opacity: 0.12;
+  --color-action-active: #666666;
+  --color-action-disabled: #999999;
+  --color-action-disabled-background: rgba(0, 0, 0, 0.12);
+  --color-action-focus: #dadada;
+  --color-action-focus-opacity: 0.12;
+  --color-action-hover: rgba(0, 0, 0, 0.06);
+  --color-action-hover-opacity: 0.06;
+  --color-action-in-downtime: #512980;
+  --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;
+  --color-background-panel-groups: #f5f5f5;
+  --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;
+  --color-header-page-action-color-default: #696969;
+  --color-header-page-border: #ededed;
+  --color-header-page-description: #4a4a4a;
+  --color-header-page-title: #000000;
+  --color-header-info-main: #1588d1;
+  --color-header-layout-body-background: #f6f6f6;
+  --color-header-layout-header-background: #ffffff;
+  --color-header-layout-header-border: #e3e3e3;
+  --color-header-menu-background: #ffffff;
+  --color-header-menu-button-background-active: #ecf4fd;
+  --color-header-menu-button-background-default: transparent;
+  --color-header-menu-button-background-hover: #d2e4f9;
+  --color-header-menu-button-color-active: #3e85d5;
+  --color-header-menu-button-color-default: #8c98a6;
+  --color-header-menu-button-color-hover: #6f7b8a;
+  --color-header-menu-divider-border: #cad0d8;
+  --color-header-menu-item-background-active: #ecf4fd;
+  --color-header-menu-item-background-default: transparent;
+  --color-header-menu-item-background-hover: #eaedf0;
+  --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;
+  --color-status-background-success: #88b922;
+  --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;
+}
+
+@layer base {
+  @variant dark {
+    --color-action-acknowledged: #dfd2b9;
+    --color-action-acknowledged-background: #745f35;
+    --color-action-in-flapping: #d8f3ef;
+    --color-action-in-flapping-background: #064a3f;
+    --color-action-activated-opacity: 0.3;
+    --color-action-active: #b5b5b5;
+    --color-action-disabled: #999999;
+    --color-action-disabled-background: rgba(0, 0, 0, 0.12);
+    --color-action-focus: #6d6d6d;
+    --color-action-focus-opacity: 0.3;
+    --color-action-hover: rgba(255, 255, 255, 0.16);
+    --color-action-hover-opacity: 0.16;
+    --color-action-in-downtime: #e5d8f3;
+    --color-action-in-downtime-background: #512980;
+    --color-action-selected: rgba(255, 255, 255, 0.5);
+    --color-action-selected-opacity: 0.5;
+    --color-background-default: #4a4a4a;
+    --color-background-listing-header: #666666;
+    --color-background-panel: #4a4a4a;
+    --color-background-panel-groups: #252525;
+    --color-background-paper: #212121;
+    --color-background-tooltip: #aab4c0;
+    --color-background-widget: #2e2e2e;
+    --color-chip-error: #d60101;
+    --color-chip-info: #1ca9f4;
+    --color-chip-neutral: #434e5b;
+    --color-chip-success: #5f8118;
+    --color-chip-warning: #c55400;
+    --color-divider: #666666;
+    --color-error-main: #d60101;
+    --color-header-page-action-background-active: #1975d10f;
+    --color-header-page-action-background-default: #ffffff00;
+    --color-header-page-action-color-active: #1976d2;
+    --color-header-page-action-color-default: #696969;
+    --color-header-page-border: #666666;
+    --color-header-page-description: #bdbdbd;
+    --color-header-page-title: #ffffff;
+    --color-header-info-main: #1ca9f4;
+    --color-header-layout-body-background: #f6f6f6;
+    --color-header-layout-header-background: #ffffff;
+    --color-header-layout-header-border: #e3e3e3;
+    --color-header-menu-background: #101418;
+    --color-header-menu-button-background-active: #071d37;
+    --color-header-menu-button-background-default: transparent;
+    --color-header-menu-button-background-hover: #1b2127;
+    --color-header-menu-button-color-active: #205593;
+    --color-header-menu-button-color-default: #596573;
+    --color-header-menu-button-color-hover: #6f7b8a;
+    --color-header-menu-divider-border: #2f3741;
+    --color-header-menu-item-background-active: #071d37;
+    --color-header-menu-item-background-default: transparent;
+    --color-header-menu-item-background-hover: #1b2127;
+    --color-header-menu-item-color-active: #3e85d5;
+    --color-header-menu-item-color-default: #f9fafb;
+    --color-header-menu-item-color-hover: #ffffff;
+    --color-pending-main: #118077;
+    --color-primary-main: #6eaff8;
+    --color-primary-light: #8bbff9;
+    --color-primary-dark: #4974a5;
+    --color-secondary-main: #7c1fa2;
+    --color-status-background-error: #d60101;
+    --color-status-background-none: --alpha(#2e68aa / 10%);
+    --color-status-background-pending: #118077;
+    --color-status-background-success: #5f8118;
+    --color-stauts-background-unknown: #666666;
+    --color-status-background-warning: #c55400;
+    --color-success-main: #5f8118;
+    --color-text-disabled: #666666;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #cccccc;
+    --color-warning-main: #c55400;
+  }
+}
+
+@layer components {
+  .flex-column {
+    @apply flex flex-col gap-1;
+  }
+
+  .flex-row {
+    @apply flex flex-row gap-1;
+  }
+
+  .flex-column-center {
+    @apply flex flex-col items-center;
+  }
+
+  .flex-column-start {
+    @apply flex flex-col items-start;
+  }
+
+  .flex-column-end {
+    @apply flex flex-col items-end;
+  }
+}
+
+#root {
+  transition-duration: var(--default-transition-duration);
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-timing-function: var(--default-transition-timing-function);
+}

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/PickersStartEndDate.tsx

@@ -10,8 +10,6 @@ import { Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-import { userAtom } from '@centreon/ui-context';
-
 import DateTimePickerInput from '../../DateTimePickerInput';
 import { isInvalidDate } from '../../helpers';
 import {
@@ -20,6 +18,7 @@ import {
 } from '../../models';
 import { errorTimePeriodAtom } from '../../timePeriodsAtoms';
 
+import { useLocale } from '../../../utils';
 import ErrorText from './ErrorText';
 import {
   PickersStartEndDateDirection,
@@ -96,11 +95,10 @@ const PickersStartEndDate = ({
   changeDate,
   rangeStartDate,
   rangeEndDate,
-  direction = PickersStartEndDateDirection.column
+  direction = PickersStartEndDateDirection.column,
+  className
 }: PickersStartEndDateProps): JSX.Element => {
-  const { classes } = useStyles();
-
-  const { locale } = useAtomValue(userAtom);
+  const locale = useLocale();
   const error = useAtomValue(errorTimePeriodAtom);
   const isError = error || isInvalidDate({ endDate, startDate });
 
@@ -109,16 +107,16 @@ const PickersStartEndDate = ({
   const maxEnd = rangeEndDate?.max;
   const minEnd = rangeEndDate?.min || startDate;
 
-  const styleContainer = equals(direction, PickersStartEndDateDirection.column)
-    ? classes.verticalDirection
-    : classes.horizontalDirection;
+  const isColumn = equals(direction, PickersStartEndDateDirection.column);
 
   return (
     <LocalizationProvider
       adapterLocale={locale.substring(0, 2)}
       dateAdapter={AdapterDayjs}
     >
-      <div className={styleContainer}>
+      <div
+        className={`flex ${isColumn ? 'flex-col justify-center' : 'flex-row items-center py-2 px-4'} gap-2 ${className}`}
+      >
         <PickerDateWithLabel
           changeDate={changeDate}
           date={startDate}
@@ -144,7 +142,7 @@ const PickersStartEndDate = ({
       {isError && (
         <ErrorText
           message="The end date must be greater than the start date"
-          style={classes.error}
+          style="text-center"
         />
       )}
     </LocalizationProvider>

package/src/TimePeriods/CustomTimePeriod/PopoverCustomTimePeriod/models.ts

@@ -71,4 +71,5 @@ export interface PickersStartEndDateProps
     PickersStartEndDateModel {
   direction?: PickersStartEndDateDirection;
   disabled?: DisabledPicker;
+  className?: string;
 }

package/src/TimePeriods/DateTimePickerInput.tsx

@@ -13,6 +13,7 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 import { userAtom } from '@centreon/ui-context';
 
+import { useLocale } from '../utils';
 import { CustomTimePeriodProperty } from './models';
 
 interface ChangeDateProps {
@@ -50,6 +51,7 @@ const DateTimePickerInput = ({
     '@media (min-width: 1024px) or (pointer: fine)';
 
   const user = useAtomValue(userAtom);
+  const localeToUse = useLocale();
 
   const isUTC = equals(timezone ?? user.timezone, 'UTC');
 
@@ -72,7 +74,7 @@ const DateTimePickerInput = ({
 
   return (
     <LocalizationProvider
-      adapterLocale={(locale ?? user.locale).substring(0, 2)}
+      adapterLocale={(locale ?? localeToUse).substring(0, 2)}
       dateAdapter={AdapterDayjs}
       dateLibInstance={dayjs}
     >

package/src/api/models.ts

@@ -8,3 +8,12 @@ export interface Listing<TEntity> {
   meta: ListingMeta;
   result: Array<TEntity>;
 }
+
+export interface ListingMap<TEntity> {
+  content: Array<TEntity>;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  numberOfElements: number;
+}

package/src/api/useGraphQuery/index.ts

@@ -36,6 +36,7 @@ interface UseMetricsQueryProps {
     start?: string | null;
     timePeriodType: number;
   };
+  isEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -46,6 +47,12 @@ interface UseMetricsQueryState {
   start: string;
 }
 
+interface FormatLegend {
+  host?: string | null;
+  service?: string | null;
+  metric: string;
+}
+
 const getStartEndFromTimePeriod = (
   timePeriod: number
 ): { end: string; start: string } => {
@@ -95,7 +102,8 @@ const useGraphQuery = ({
   refreshInterval = false,
   refreshCount,
   bypassQueryParams = false,
-  prefix
+  prefix,
+  isEnabled = true
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -152,7 +160,10 @@ const useGraphQuery = ({
       refreshCount || 0
     ],
     queryOptions: {
-      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
+      enabled:
+        areResourcesFullfilled(resources) &&
+        !isEmpty(definedMetrics) &&
+        isEnabled,
       refetchInterval: refreshInterval,
       suspense: false
     },
@@ -164,22 +175,107 @@ const useGraphQuery = ({
     data.current = graphData;
   }
 
+  const getCurrentMetrics = () => {
+    if (!data.current) {
+      return undefined;
+    }
+
+    return bypassMetricsExclusion
+      ? data.current.metrics
+      : data.current.metrics.filter(({ metric_id }) => {
+          return pipe(
+            pluck('excludedMetrics'),
+            flatten,
+            includes(metric_id),
+            not
+          )(metrics);
+        });
+  };
+
+  const formatLegend = ({
+    host = null,
+    service = null,
+    metric
+  }: FormatLegend) => {
+    if (!host && !service) {
+      return metric;
+    }
+
+    if (!host) {
+      return `${service}: ${metric}`;
+    }
+
+    if (!service) {
+      return `${host}: ${metric}`;
+    }
+
+    return `${host} ${service}: ${metric}`;
+  };
+
+  const getFormattedMetrics = () => {
+    const metrics = getCurrentMetrics();
+
+    if (equals(metrics?.length, 1)) {
+      return metrics?.map((line) => {
+        const formattedLegend = formatLegend({
+          host: line?.host_name,
+          service: line?.service_name,
+          metric: line?.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      });
+    }
+
+    return metrics?.map((line) => {
+      const areHostNameRedundant = metrics.every(({ host_name }) =>
+        equals(host_name, line.host_name)
+      );
+      const areServiceNameRedundant = metrics.every(({ service_name }) =>
+        equals(service_name, line.service_name)
+      );
+
+      if (areHostNameRedundant && areServiceNameRedundant) {
+        const formattedLegend = formatLegend({ metric: line.metric });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      if (areHostNameRedundant) {
+        const formattedLegend = formatLegend({
+          service: line.service_name,
+          metric: line.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      if (areServiceNameRedundant) {
+        const formattedLegend = formatLegend({
+          host: line.host_name,
+          metric: line.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      const formattedLegend = formatLegend({
+        host: line.host_name,
+        service: line.service_name,
+        metric: line.metric
+      });
+
+      return { ...line, legend: formattedLegend };
+    });
+  };
+
   const formattedGraphData = data.current
     ? {
         global: {
           base: data.current.base,
           title: ''
         },
-        metrics: bypassMetricsExclusion
-          ? data.current.metrics
-          : data.current.metrics.filter(({ metric_id }) => {
-              return pipe(
-                pluck('excludedMetrics'),
-                flatten,
-                includes(metric_id),
-                not
-              )(metrics);
-            }),
+        metrics: getFormattedMetrics(),
         times: data.current.times
       }
     : undefined;

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Avatar from './Avatar';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof Avatar> = {
   component: Avatar

package/src/components/Button/Button.module.css

@@ -0,0 +1,38 @@
+.button {
+  &[data-size="medium"] {
+    font-size: 16px;
+    height: unset;
+    line-height: 24px;
+  }
+
+  &[data-size="small"] {
+    &[data-variant="primary"] {
+      padding-left: var(--spacing-4);
+      padding-right: var(--spacing-4);
+    }
+
+    font-size: 14px;
+    height: unset;
+    line-height: 22px;
+  }
+
+  &[data-variant="primary"]:not(:disabled) {
+    &[data-is-danger="true"] {
+      background-color: var(--color-error-main);
+    }
+
+    background-color: var(--color-primary-main);
+  }
+
+  &[data-variant="secondary"]:not(:disabled) {
+    &[data-is-danger="true"] {
+      border-color: var(--color-error-main);
+      color: var(--color-error-main);
+    }
+
+    border-color: var(--color-primary-main);
+    color: var(--color-primary-main);
+  }
+
+  text-wrap: nowrap;
+}

package/src/components/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import '../../ThemeProvider/tailwindcss.css';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Add as AddIcon } from '@mui/icons-material';
@@ -32,3 +33,27 @@ export const AsDanger: Story = {
     isDanger: true
   }
 };
+
+export const small: Story = {
+  args: {
+    ...Default.args,
+    size: 'small'
+  }
+};
+
+export const smallWithIcon: Story = {
+  args: {
+    ...Default.args,
+    size: 'small',
+    icon: <AddIcon />,
+    iconVariant: 'start'
+  }
+};
+
+export const smallDanger: Story = {
+  args: {
+    ...Default.args,
+    size: 'small',
+    isDanger: true
+  }
+};