@centreon/ui 25.10.20 → 25.10.22

package/src/Graph/mockedData/pingServiceWithStackedKeys.json

@@ -0,0 +1,205 @@
+{
+  "global": {
+    "base": 1000,
+    "title": "Ping service"
+  },
+  "metrics": [
+    {
+      "metric_id": 2,
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "%",
+      "min": 0.0,
+      "max": 100.0,
+      "ds_data": {
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": false,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Packet Loss",
+      "stack": 0,
+      "warning_high_threshold": 20.0,
+      "critical_high_threshold": 50.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        10.0,
+        20.0,
+        null,
+        null
+      ],
+      "last_value": 0.0,
+      "minimum_value": null,
+      "maximum_value": 0.0,
+      "average_value": 0.0
+    },
+    {
+      "metric_id": 1,
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE",
+        "ds_color_area": "#29AFEE",
+        "ds_filled": true,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_order": 1,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        0.04508,
+        0.0242,
+        0.03592,
+        0.01304,
+        0.025,
+        0.02748,
+        0.05296,
+        0.01864,
+        0.02688,
+        0.03676,
+        0.03696,
+        null,
+        null
+      ],
+      "last_value": 0.04,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.03
+    },
+    {
+      "metric_id": 3,
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#525256",
+        "ds_color_area": "#525256",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_stack_key": "test",
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.11372,
+        0.05604,
+        0.08556,
+        0.02548,
+        0.05352,
+        0.05336,
+        0.109,
+        0.04112,
+        0.05504,
+        0.06812,
+        0.08644,
+        null,
+        null
+      ],
+      "last_value": 0.09,
+      "minimum_value": null,
+      "maximum_value": 0.11,
+      "average_value": null
+    },
+    {
+      "metric_id": 4,
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
+      "unit": "ms",
+      "min": null,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#191777",
+        "ds_color_area": "#191777",
+        "ds_filled": false,
+        "ds_invert": false,
+        "ds_legend": null,
+        "ds_stack": true,
+        "ds_stack_key": "test",
+        "ds_order": 2,
+        "ds_transparency": 80.0,
+        "ds_color_line_mode": 0
+      },
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
+      "stack": 0,
+      "warning_high_threshold": null,
+      "critical_high_threshold": null,
+      "warning_low_threshold": null,
+      "critical_low_threshold": null,
+      "ds_order": 2,
+      "data": [
+        0.00984,
+        0.008,
+        0.00784,
+        0.00624,
+        0.00932,
+        0.01348,
+        0.01796,
+        0.0064,
+        0.01148,
+        0.01644,
+        0.01168,
+        null,
+        null
+      ],
+      "last_value": 0.01,
+      "minimum_value": 0.01,
+      "maximum_value": null,
+      "average_value": null
+    }
+  ],
+  "times": [
+    "2024-06-19T10:50:00+02:00",
+    "2024-06-19T10:55:00+02:00",
+    "2024-06-19T11:00:00+02:00",
+    "2024-06-19T11:05:00+02:00",
+    "2024-06-19T11:10:00+02:00",
+    "2024-06-19T11:15:00+02:00",
+    "2024-06-19T11:20:00+02:00",
+    "2024-06-19T11:25:00+02:00",
+    "2024-06-19T11:30:00+02:00",
+    "2024-06-19T11:35:00+02:00",
+    "2024-06-19T11:40:00+02:00",
+    "2024-06-19T11:45:00+02:00",
+    "2024-06-19T11:50:00+02:00"
+  ]
+}

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/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
@@ -26,7 +27,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' {
@@ -198,14 +199,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
         })
       }
@@ -222,12 +223,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]
+            }
         })
       }
     },
@@ -257,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

@@ -25,7 +25,7 @@
   /* =============
      COLOR SYSTEM
      ============= */
-  
+
   /* Action colors */
   --color-action-acknowledged: #745f35;
   --color-action-acknowledged-background: #dfd2b9;
@@ -43,7 +43,7 @@
   --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;
@@ -52,18 +52,18 @@
   --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;
@@ -90,10 +90,10 @@
   --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;
@@ -101,7 +101,7 @@
   --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%);
@@ -110,7 +110,7 @@
   --color-stauts-background-unknown: #e3e3e3;
   --color-status-background-warning: #fd9b27;
   --color-success-main: #88b922;
-  
+
   /* Text colors */
   --color-text-disabled: #999999;
   --color-text-primary: #000000;
@@ -118,7 +118,7 @@
   --color-warning-main: #fd9b27;
   --color-warning-light: #fcc481;
   --color-warning-dark: #fc7e00;
-  
+
   /* Base colors */
   --color-white: #ffffff;
   --color-black: #000000;

package/src/components/Layout/PageLayout/PageLayout.tsx

@@ -5,16 +5,22 @@ import { useStyles } from './PageLayout.styles';
 type PageLayoutProps = {
   children: Array<ReactNode> | ReactNode;
   variant?: 'default' | 'fixed-header';
+  className?: string;
 };
 
 export const PageLayout = ({
   children,
-  variant = 'default'
+  variant = 'default',
+  className
 }: PageLayoutProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
-    <section className={classes.pageLayout} data-variant={variant} id="page">
+    <section
+      className={cx(classes.pageLayout, className)}
+      data-variant={variant}
+      id="page"
+    >
       {children}
     </section>
   );

package/src/components/Layout/PageLayout/PageLayoutActions.tsx

@@ -5,17 +5,19 @@ import { useStyles } from './PageLayout.styles';
 interface PageLayoutActionsProps {
   children: Array<ReactNode> | ReactNode;
   rowReverse?: boolean;
+  className?: string;
 }
 
 export const PageLayoutActions = ({
   children,
-  rowReverse
+  rowReverse,
+  className
 }: PageLayoutActionsProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <section
-      className={classes.pageLayoutActions}
+      className={cx(classes.pageLayoutActions, className)}
       data-row-reverse={rowReverse}
       id="actions"
     >

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -5,17 +5,19 @@ import { useStyles } from './PageLayout.styles';
 type PageLayoutBodyProps = {
   children: Array<ReactNode> | ReactNode;
   hasBackground?: boolean;
+  className?: string;
 };
 
 export const PageLayoutBody = ({
   children,
-  hasBackground = false
+  hasBackground = false,
+  className
 }: PageLayoutBodyProps): ReactElement => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
     <section
-      className={classes.pageLayoutBody}
+      className={cx(classes.pageLayoutBody, className)}
       data-has-background={hasBackground}
       data-has-actions={!!children?.length}
       id="page-body"

package/src/components/Layout/PageLayout/PageLayoutHeader.tsx

@@ -4,15 +4,17 @@ import { useStyles } from './PageLayout.styles';
 
 type PageLayoutHeaderProps = {
   children: Array<ReactNode> | ReactNode;
+  className?: string;
 };
 
 export const PageLayoutHeader = ({
-  children
+  children,
+  className
 }: PageLayoutHeaderProps): JSX.Element => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   return (
-    <header className={classes.pageLayoutHeader} id="header">
+    <header className={cx(classes.pageLayoutHeader, className)} id="header">
       {children}
     </header>
   );

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>