@centreon/ui 23.10.82 → 23.10.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.82",
+  "version": "23.10.84",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Dashboard.styles.ts

@@ -69,6 +69,9 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
 export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
   (theme, { hasHeader }) => ({
     widgetContainer: {
+      background: theme.palette.background.widget,
+      border: 'none',
+      borderRadius: theme.spacing(1),
       height: '100%',
       paddingBottom: theme.spacing(2),
       width: '100%'

package/src/Dashboard/Item.tsx

@@ -8,7 +8,7 @@ import {
 
 import { isNil } from 'ramda';
 
-import { Card } from '@mui/material';
+import { Card, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '../utils';
 
@@ -46,6 +46,7 @@ const Item = forwardRef(
     const hasHeader = !isNil(header);
 
     const { classes, cx } = useDashboardItemStyles({ hasHeader });
+    const theme = useTheme();
 
     const listeners = {
       onMouseDown,
@@ -85,7 +86,7 @@ const Item = forwardRef(
           </Card>
         </div>
       ),
-      memoProps: [style, className, header]
+      memoProps: [style, className, header, theme.palette.mode, canMove]
     });
   }
 );

package/src/Dashboard/Layout.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react';
 
-import { Responsive } from '@visx/visx';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 
-import { Responsive as ResponsiveHeight, useMemoComponent } from '..';
+import {
+  Responsive as ResponsiveHeight,
+  ParentSize,
+  useMemoComponent
+} from '..';
 
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import { getColumnsFromScreenSize, getLayout, rowHeight } from './utils';
@@ -46,7 +49,7 @@ const Layout = <T extends Layout>({
   return useMemoComponent({
     Component: (
       <ResponsiveHeight margin={40}>
-        <Responsive.ParentSize>
+        <ParentSize>
           {({ width, height }): JSX.Element => (
             <div className={classes.container}>
               {displayGrid && (
@@ -66,10 +69,10 @@ const Layout = <T extends Layout>({
               </ReactGridLayout>
             </div>
           )}
-        </Responsive.ParentSize>
+        </ParentSize>
       </ResponsiveHeight>
     ),
-    memoProps: [columns, layout, displayGrid]
+    memoProps: [columns, layout, displayGrid, isStatic]
   });
 };
 

package/src/Graph/Gauge/Gauge.tsx

@@ -1,5 +1,4 @@
-import { Responsive } from '@visx/visx';
-
+import { ParentSize } from '../..';
 import { LineChartData, Thresholds } from '../common/models';
 import { getMetricWithLatestData } from '../common/timeSeries';
 import { Metric } from '../common/timeSeries/models';
@@ -26,7 +25,7 @@ export const Gauge = ({
   const metric = getMetricWithLatestData(data) as Metric;
 
   return (
-    <Responsive.ParentSize>
+    <ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
           baseColor={baseColor}
@@ -37,6 +36,6 @@ export const Gauge = ({
           width={width}
         />
       )}
-    </Responsive.ParentSize>
+    </ParentSize>
   );
 };

package/src/Graph/LineChart/index.tsx

@@ -1,6 +1,6 @@
 import { MutableRefObject, useRef } from 'react';
 
-import { Curve, Responsive } from '@visx/visx';
+import { Curve } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -10,6 +10,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import timezonePlugin from 'dayjs/plugin/timezone';
 import utcPlugin from 'dayjs/plugin/utc';
 
+import { ParentSize } from '../..';
 import { LineChartData, Thresholds } from '../common/models';
 
 import LineChart from './LineChart';
@@ -77,7 +78,7 @@ const WrapperLineChart = ({
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
       style={{ height: '100%', width: '100%' }}
     >
-      <Responsive.ParentSize>
+      <ParentSize>
         {({
           height: responsiveHeight,
           width: responsiveWidth
@@ -106,7 +107,7 @@ const WrapperLineChart = ({
             />
           );
         }}
-      </Responsive.ParentSize>
+      </ParentSize>
     </div>
   );
 };

package/src/ParentSize/ParentSize.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+
+import { Responsive } from '@visx/visx';
+
+type ParentSizeState = {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+};
+
+type Props = {
+  children: (args: ParentSizeState) => ReactElement;
+};
+
+const ParentSize = ({ children, ...props }: Props): JSX.Element => {
+  return (
+    <Responsive.ParentSize {...props} debounceTime={0}>
+      {children}
+    </Responsive.ParentSize>
+  );
+};
+
+export default ParentSize;

package/src/ParentSize/index.ts

@@ -0,0 +1 @@
+export { default as ParentSize } from './ParentSize';

package/src/RichTextEditor/ContentEditable.tsx

@@ -35,6 +35,9 @@ const useStyles = makeStyles<StyleProps>()(
         ? `1px solid ${theme.palette.error.main}`
         : `1px solid ${theme.palette.primary.main}`
     },
+    notEditable: {
+      backgroundColor: 'transparent'
+    },
     placeholder: {
       color: theme.palette.grey[500],
       pointerEvents: 'none'
@@ -162,6 +165,7 @@ const ContentEditable = ({
       className={cx(
         classes.root,
         editable && classes.container,
+        !isEditable && !disabled && classes.notEditable,
         className,
         isFocused && classes.inputFocused
       )}

package/src/ThemeProvider/palettes.ts

@@ -55,6 +55,7 @@ declare module '@mui/material/styles' {
     panelGroups: string;
     paper: string;
     tooltip: string;
+    widget: string;
   }
 
   interface TypeLayout {
@@ -162,7 +163,8 @@ export const lightPalette: PaletteOptions = {
     panel: '#EDEDED',
     panelGroups: '#F5F5F5',
     paper: '#FFFFFF',
-    tooltip: '#434E5B'
+    tooltip: '#434E5B',
+    widget: '#F8F8F8'
   },
   chip: {
     color: {
@@ -301,7 +303,8 @@ export const darkPalette: PaletteOptions = {
     panel: '#4a4a4a',
     panelGroups: '#252525',
     paper: '#212121',
-    tooltip: '#AAB4C0'
+    tooltip: '#AAB4C0',
+    widget: '#2E2E2E'
   },
   chip: {
     color: {

package/src/TimePeriods/index.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 
-import { Responsive } from '@visx/visx';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/es';
@@ -13,6 +12,8 @@ import utcPlugin from 'dayjs/plugin/utc';
 
 import { Paper } from '@mui/material';
 
+import { ParentSize } from '..';
+
 import CustomTimePeriod from './CustomTimePeriod';
 import SelectedTimePeriod from './SelectedTimePeriod';
 import { useStyles } from './TimePeriods.styles';
@@ -57,7 +58,7 @@ const TimePeriod = ({
 
   return (
     <div>
-      <Responsive.ParentSize>
+      <ParentSize>
         {({ width }): JSX.Element => {
           return (
             <Paper className={classes.header} style={{ width }}>
@@ -71,7 +72,7 @@ const TimePeriod = ({
             </Paper>
           );
         }}
-      </Responsive.ParentSize>
+      </ParentSize>
     </div>
   );
 };

package/src/api/useGraphQuery/index.ts

@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import { equals, has, isEmpty, pluck } from 'ramda';
 import dayjs from 'dayjs';
 
@@ -13,6 +15,7 @@ interface CustomTimePeriod {
 interface UseMetricsQueryProps {
   baseEndpoint: string;
   metrics: Array<string>;
+  refreshCount?: number;
   refreshInterval?: number | false;
   resources?: Array<Resource>;
   timePeriod?: {
@@ -72,7 +75,8 @@ const useGraphQuery = ({
   timePeriod = {
     timePeriodType: 1
   },
-  refreshInterval = false
+  refreshInterval = false,
+  refreshCount
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -115,7 +119,8 @@ const useGraphQuery = ({
       'graph',
       JSON.stringify(definedMetrics),
       JSON.stringify(resources),
-      timePeriod
+      timePeriod,
+      refreshCount || 0
     ],
     queryOptions: {
       enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
@@ -124,14 +129,19 @@ const useGraphQuery = ({
     }
   });
 
-  const formattedGraphData = graphData
+  const data = useRef<PerformanceGraphData | undefined>(undefined);
+  if (graphData) {
+    data.current = graphData;
+  }
+
+  const formattedGraphData = data.current
     ? {
         global: {
-          base: graphData.base,
+          base: data.current.base,
           title: ''
         },
-        metrics: graphData.metrics,
-        times: graphData.times
+        metrics: data.current.metrics,
+        times: data.current.times
       }
     : undefined;
 

package/src/components/DataTable/DataTable.styles.ts

@@ -8,7 +8,7 @@ const useStyles = makeStyles()((theme) => ({
       },
       display: 'grid',
       gridGap: theme.spacing(2.5),
-      gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))'
+      gridTemplateColumns: `repeat(auto-fill, ${theme.spacing(45)})`
     },
     '&[data-variant][data-is-empty="true"]': {
       display: 'flex',

package/src/components/DataTable/Item/DataTableItem.styles.ts

@@ -16,23 +16,17 @@ const useStyles = makeStyles()((theme) => ({
       },
       display: 'flex',
 
-      justifyContent: 'space-between',
-      opacity: 0
-    },
-    '&:hover .MuiCardActions-root': {
-      opacity: 1
+      justifyContent: 'space-between'
     },
     borderRadius: theme.shape.borderRadius,
     display: 'flex',
     flexDirection: 'column',
-    height: '210px',
-    minWidth: '280px',
+    height: '186px',
     p: {
       color: theme.palette.text.secondary,
       letterSpacing: '0',
       margin: '0'
-    },
-    width: '320px'
+    }
   }
 }));
 

package/src/components/DataTable/Item/DataTableItem.tsx

@@ -58,7 +58,9 @@ const DataTableItem = forwardRef(
       >
         <ActionArea aria-label="view" onClick={() => onClick?.()}>
           <MuiCardContent>
-            <MuiTypography variant="h5">{title}</MuiTypography>
+            <MuiTypography fontWeight={500} variant="h5">
+              {title}
+            </MuiTypography>
             {description && <MuiTypography>{description}</MuiTypography>}
           </MuiCardContent>
         </ActionArea>

package/src/components/Form/Dashboard/GlobalRefreshFieldOption.tsx

@@ -4,9 +4,12 @@ import { FormikValues, useFormikContext } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { isEmpty } from 'ramda';
 import pluralize from 'pluralize';
+import { useAtomValue } from 'jotai';
 
 import { Typography } from '@mui/material';
 
+import { refreshIntervalAtom } from '@centreon/ui-context';
+
 import { TextField } from '../../..';
 
 import {
@@ -22,7 +25,9 @@ const GlobalRefreshFieldOption = (): JSX.Element => {
 
   const { values, setFieldValue } = useFormikContext<FormikValues>();
 
-  const value = values.refresh.interval;
+  const platformRefreshInterval = useAtomValue(refreshIntervalAtom);
+
+  const value = values.refresh?.interval;
 
   const changeInput = (event: ChangeEvent<HTMLInputElement>): void => {
     setFieldValue(
@@ -43,7 +48,7 @@ const GlobalRefreshFieldOption = (): JSX.Element => {
         }}
         size="compact"
         type="number"
-        value={value || ''}
+        value={value || platformRefreshInterval}
         onChange={changeInput}
       />
       <Typography>{pluralize(t(labelSeconds), value)}</Typography>

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -11,7 +11,9 @@ export const useStyles = makeStyles()((theme) => ({
       display: 'flex',
       gap: theme.spacing(0.5)
     },
-
+    '&[data-row-reverse="true"]': {
+      flexDirection: 'row-reverse'
+    },
     display: 'flex',
     justifyContent: 'space-between',
     paddingBottom: theme.spacing(2.5)
@@ -23,7 +25,7 @@ export const useStyles = makeStyles()((theme) => ({
     display: 'grid',
     gridTemplateRows: 'min-content',
     overflow: 'hidden',
-    padding: theme.spacing(3, 3, 5)
+    padding: theme.spacing(2, 3, 5)
   },
   pageLayoutHeader: {
     '[data-variant="fixed-header"] &': {

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

@@ -2,14 +2,23 @@ import { ReactElement, ReactNode } from 'react';
 
 import { useStyles } from './PageLayout.styles';
 
-type PageLayoutActionsProps = {
+interface PageLayoutActionsProps {
   children: Array<ReactNode> | ReactNode;
-};
+  rowReverse?: boolean;
+}
 
 export const PageLayoutActions = ({
-  children
+  children,
+  rowReverse
 }: PageLayoutActionsProps): ReactElement => {
   const { classes } = useStyles();
 
-  return <section className={classes.pageLayoutActions}>{children}</section>;
+  return (
+    <section
+      className={classes.pageLayoutActions}
+      data-row-reverse={rowReverse}
+    >
+      {children}
+    </section>
+  );
 };

package/src/components/Menu/Menu.styles.ts

@@ -9,15 +9,8 @@ export const useStyles = makeStyles()((theme) => ({
   menuItem: {
     '&, &.MuiMenuItem-root': {
       '& > button': {
-        '&:hover:not(&[data-is-active="true"])': {
-          backgroundColor: theme.palette.menu.item.background.hover,
-          color: theme.palette.menu.item.color.hover
-        },
-        backgroundColor: theme.palette.menu.item.background.default,
-        color: theme.palette.menu.item.color.default,
         fontSize: '1rem',
-        justifyContent: 'flex-start',
-        width: '100%'
+        justifyContent: 'flex-start'
       },
 
       '&:has(button)': {
@@ -51,7 +44,12 @@ export const useStyles = makeStyles()((theme) => ({
         padding: theme.spacing(0.75, 2)
       },
 
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row',
       fontSize: '1rem',
+      gap: theme.spacing(2),
+      justifyContent: 'space-between',
       minHeight: 'unset'
     }
   },

package/src/components/Modal/ModalHeader.tsx

@@ -13,7 +13,7 @@ const ModalHeader = ({ children }: ModalHeaderProps): ReactElement => {
 
   return (
     <div className={classes.modalHeader}>
-      <MuiDialogTitle>{children}</MuiDialogTitle>
+      <MuiDialogTitle color="primary">{children}</MuiDialogTitle>
     </div>
   );
 };

package/src/index.ts

@@ -150,3 +150,4 @@ export * from './Graph/common/timeSeries';
 
 export { default as TimePeriods } from './TimePeriods';
 export { default as SimpleCustomTimePeriod } from './TimePeriods/CustomTimePeriod/SimpleCustomTimePeriod';
+export * from './ParentSize';