@centreon/ui 24.4.65 → 24.4.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.65",
+  "version": "24.4.67",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/Dashboard.styles.ts

@@ -76,11 +76,12 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       border: 'none',
       borderRadius: theme.spacing(1),
       height: '100%',
-      paddingBottom: theme.spacing(2),
       width: '100%'
     },
     widgetContent: {
-      height: '100%'
+      height: hasHeader
+        ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`
+        : `calc(100% - ${theme.spacing(3.5)})`
     },
     widgetHeader: {
       '&:hover': {
@@ -92,17 +93,17 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&[data-canMove="true"]': {
         cursor: 'move'
       },
-      padding: theme.spacing(0.5, 2),
+      padding: theme.spacing(0, 1.5),
       position: 'relative'
     },
     widgetHeaderDraggable: {
       height: '100%',
       position: 'absolute',
-      width: '100%'
+      width: '95%'
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
+      padding: theme.spacing(0.5, 1.5, 1.5)
     }
   })
 );

package/src/Graph/LineChart/BasicComponents/ThresholdLine.tsx

@@ -2,6 +2,8 @@ import { equals } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
+import { margin } from '../common';
+
 interface Props {
   hideTooltip: () => void;
   label: string;
@@ -28,7 +30,7 @@ export const ThresholdLine = ({
   const onMouseEnter = (): void =>
     showTooltip({
       tooltipData: label,
-      tooltipLeft: 0,
+      tooltipLeft: -(margin.left + margin.right),
       tooltipTop: scaledValue
     });
 

package/src/Graph/LineChart/InteractiveComponents/index.tsx

@@ -70,7 +70,6 @@ interface CommonData {
 
 interface TimeShiftZonesData extends InteractedZone {
   graphInterval: GraphInterval;
-  loading: boolean;
 }
 
 interface Props {
@@ -234,7 +233,7 @@ const InteractionWithGraph = ({
           value: timeValue?.[metric_id]
         }),
         linesData
-      ).filter(({ value }) => value)
+      ).filter(({ value }) => !isNil(value))
     });
   };
 

package/src/Graph/LineChart/Legend/Legend.styles.ts

@@ -28,10 +28,11 @@ export const useStyles = makeStyles<MakeStylesProps>()(
       columnGap: theme.spacing(3),
       display: 'grid',
       gridAutoRows: theme.spacing(legendItemHeight),
-      gridTemplateColumns: `repeat(auto-fit, ${theme.spacing(legendWidth)})`,
+      gridTemplateColumns: `repeat(auto-fit, minmax(${theme.spacing(legendWidth)}, 1fr))`,
       maxHeight: limitLegendRows
         ? theme.spacing(legendItemHeight * 2 + 1)
         : 'unset',
+      overflowX: 'hidden',
       overflowY: 'auto',
       rowGap: theme.spacing(1),
       width: '100%'
@@ -63,9 +64,6 @@ interface StylesProps {
 export const useLegendHeaderStyles = makeStyles<StylesProps>()(
   (theme, { color }) => ({
     container: {
-      display: 'flex',
-      flexDirection: 'row',
-      gap: theme.spacing(0.5),
       width: '100%'
     },
     disabled: {
@@ -79,10 +77,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       width: theme.spacing(1.5)
     },
     legendName: {
-      '&[data-mode="compact"]': {
-        maxWidth: theme.spacing(legendWidth * 0.5)
-      },
-      maxWidth: theme.spacing(legendWidth * 0.75)
+      maxWidth: '95%'
     },
     markerAndLegendName: {
       alignItems: 'center',
@@ -97,6 +92,7 @@ export const useLegendHeaderStyles = makeStyles<StylesProps>()(
       whiteSpace: 'nowrap'
     },
     text: {
+      fontSize: '0.75rem',
       fontWeight: theme.typography.fontWeightMedium,
       lineHeight: 1
     }

package/src/Graph/LineChart/Legend/LegendHeader.tsx

@@ -1,5 +1,3 @@
-import { isEmpty } from 'ramda';
-
 import { Typography } from '@mui/material';
 
 import {
@@ -31,21 +29,11 @@ const LegendHeader = ({
 }: Props): JSX.Element => {
   const { classes, cx } = useLegendHeaderStyles({ color });
 
-  const { unit, name, legend } = line;
+  const { name, legend } = line;
 
   const metricName = formatMetricName({ legend, name });
 
   const legendName = legend || name;
-  const hasUnit = !isEmpty(unit);
-  const unitName = `(${unit})`;
-
-  const getEndText = (): string => {
-    if (value) {
-      return value;
-    }
-
-    return hasUnit ? ` ${unitName}` : '';
-  };
 
   return (
     <div className={classes.container}>
@@ -54,7 +42,7 @@ const LegendHeader = ({
         label={
           minMaxAvg ? (
             <div>
-              <Typography>{`${legendName} ${unitName}`}</Typography>
+              <Typography>{legendName}</Typography>
               <div className={classes.minMaxAvgContainer}>
                 {minMaxAvg.map(({ label, value: subValue }) => (
                   <LegendContent
@@ -69,7 +57,7 @@ const LegendHeader = ({
               </div>
             </div>
           ) : (
-            `${legendName} ${unitName}`
+            legendName
           )
         }
         placement="top"
@@ -86,9 +74,6 @@ const LegendHeader = ({
           </EllipsisTypography>
         </div>
       </Tooltip>
-      {hasUnit && (
-        <Typography className={classes.text}>{getEndText()}</Typography>
-      )}
     </div>
   );
 };

package/src/Graph/LineChart/LineChart.tsx

@@ -14,7 +14,6 @@ import Axes from './BasicComponents/Axes';
 import Grids from './BasicComponents/Grids';
 import Lines from './BasicComponents/Lines';
 import { canDisplayThreshold } from './BasicComponents/Lines/Threshold/models';
-import LoadingProgress from './BasicComponents/LoadingProgress';
 import useFilterLines from './BasicComponents/useFilterLines';
 import { useStyles } from './LineChart.styles';
 import Header from './Header';
@@ -45,7 +44,6 @@ interface Props extends LineChartProps {
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
   limitLegend?: false | number;
-  marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
   thresholds?: ThresholdsModel;
@@ -63,7 +61,6 @@ const LineChart = ({
   shapeLines,
   axis,
   displayAnchor,
-  loading,
   zoomPreview,
   graphInterval,
   timeShiftZones,
@@ -73,7 +70,6 @@ const LineChart = ({
   graphRef,
   header,
   curve,
-  marginBottom,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -104,8 +100,7 @@ const LineChart = ({
     (height || 0) > 0
       ? (height || 0) -
         margin.top -
-        margin.bottom -
-        marginBottom -
+        5 -
         (legendRef.current?.getBoundingClientRect().height || 0)
       : 0;
 
@@ -196,11 +191,6 @@ const LineChart = ({
           title={<GraphValueTooltip base={baseAxis} />}
         >
           <div className={classes.container}>
-            <LoadingProgress
-              display={loading}
-              height={graphHeight}
-              width={width}
-            />
             <svg
               height={graphHeight + margin.top}
               ref={graphSvgRef}
@@ -259,8 +249,7 @@ const LineChart = ({
                   }}
                   timeShiftZonesData={{
                     ...timeShiftZones,
-                    graphInterval,
-                    loading
+                    graphInterval
                   }}
                   zoomData={{ ...zoomPreview }}
                 />

package/src/Graph/LineChart/LoadingSkeleton.tsx

@@ -13,8 +13,8 @@ const useSkeletonStyles = makeStyles<Props>()(
       display: 'grid',
       gridGap: theme.spacing(1),
       gridTemplateRows: `${
-        displayTitleSkeleton ? '1fr' : ''
-      } ${graphHeight}px ${theme.spacing(7)}`,
+        displayTitleSkeleton ? '0.8fr' : ''
+      } ${graphHeight}px ${theme.spacing(2)}`,
       height: '100%'
     },
     loadingSkeletonLine: {

package/src/Graph/LineChart/index.tsx

@@ -30,7 +30,6 @@ interface Props extends Partial<LineChartProps> {
   legend: LegendModel;
   limitLegend?: false | number;
   loading: boolean;
-  marginBottom?: number;
   shapeLines?: GlobalAreaLines;
   start: string;
   thresholdUnit?: string;
@@ -54,7 +53,6 @@ const WrapperLineChart = ({
   legend,
   header,
   curve = Curve.curveLinear,
-  marginBottom = 0,
   thresholds,
   thresholdUnit,
   limitLegend
@@ -65,7 +63,7 @@ const WrapperLineChart = ({
   if (loading && !adjustedData) {
     return (
       <LoadingSkeleton
-        displayTitleSkeleton={header?.displayTitle ?? true}
+        displayTitleSkeleton={header?.displayTitle ?? false}
         graphHeight={height || 200}
       />
     );
@@ -78,7 +76,7 @@ const WrapperLineChart = ({
   return (
     <div
       ref={lineChartRef as MutableRefObject<HTMLDivElement>}
-      style={{ height: '100%', overflowY: 'hidden', width: '100%' }}
+      style={{ height: '100%', overflow: 'hidden', width: '100%' }}
     >
       <ParentSize>
         {({
@@ -98,8 +96,6 @@ const WrapperLineChart = ({
               height={height || responsiveHeight}
               legend={legend}
               limitLegend={limitLegend}
-              loading={loading}
-              marginBottom={marginBottom}
               shapeLines={shapeLines}
               thresholdUnit={thresholdUnit}
               thresholds={thresholds}

package/src/Graph/LineChart/models.ts

@@ -88,7 +88,6 @@ export interface LineChartProps {
   displayAnchor?: DisplayAnchor;
   header?: LineChartHeader;
   height?: number | null;
-  loading: boolean;
   timeShiftZones?: InteractedZone;
   tooltip?: Tooltip;
   width: number;

package/src/Graph/Text/Text.styles.ts

@@ -1,6 +1,9 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useTextStyles = makeStyles()((theme) => ({
+  critical: {
+    color: theme.palette.error.main
+  },
   graphText: {
     alignItems: 'center',
     display: 'flex',
@@ -9,9 +12,17 @@ export const useTextStyles = makeStyles()((theme) => ({
     height: '100%',
     justifyContent: 'center'
   },
+  threshold: {
+    textAlign: 'center'
+  },
   thresholds: {
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(5)
+    gap: theme.spacing(5),
+    whiteSpace: 'nowrap',
+    width: '100%'
+  },
+  warning: {
+    color: theme.palette.warning.main
   }
 }));

package/src/Graph/Text/Text.tsx

@@ -2,6 +2,7 @@ import { isNil } from 'ramda';
 
 import { Typography, useTheme } from '@mui/material';
 
+import FluidTypography from '../../Typography/FluidTypography';
 import { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValueWithUnit,
@@ -30,7 +31,7 @@ export const Text = ({
   baseColor
 }: Props): JSX.Element | null => {
   const theme = useTheme();
-  const { classes } = useTextStyles();
+  const { classes, cx } = useTextStyles();
 
   if (isNil(data)) {
     return null;
@@ -74,16 +75,20 @@ export const Text = ({
       </Typography>
       {thresholds.enabled && (
         <div className={classes.thresholds}>
-          <Typography sx={{ color: 'warning.main' }} variant="h5">
-            {labels.warning}
-            {': '}
-            {warningThresholdLabels.join(' - ')}
-          </Typography>
-          <Typography sx={{ color: 'error.main' }} variant="h5">
-            {labels.critical}
-            {': '}
-            {criticalThresholdLabels.join(' - ')}
-          </Typography>
+          <FluidTypography
+            containerClassName={cx(classes.threshold, classes.warning)}
+            max="30px"
+            pref={14}
+            text={`${labels.warning}: ${warningThresholdLabels.join(' - ')}`}
+            variant="h5"
+          />
+          <FluidTypography
+            containerClassName={cx(classes.threshold, classes.critical)}
+            max="30px"
+            pref={14}
+            text={`${labels.critical}: ${criticalThresholdLabels.join(' - ')}`}
+            variant="h5"
+          />
         </div>
       )}
     </div>

package/src/Graph/LineChart/BasicComponents/LoadingProgress.tsx

@@ -1,46 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { CircularProgress, alpha } from '@mui/material';
-
-interface StyleProps {
-  height: number;
-  width: number;
-}
-
-const useStyles = makeStyles<StyleProps>()((theme, { height, width }) => ({
-  graphLoader: {
-    alignItems: 'center',
-    backgroundColor: alpha(theme.palette.common.white, 0.5),
-    display: 'flex',
-    height,
-    justifyContent: 'center',
-    position: 'absolute',
-    width
-  }
-}));
-
-interface LoadingProgress {
-  display: boolean;
-  height: number;
-  width: number;
-}
-
-const LoadingProgress = ({
-  display,
-  height,
-  width
-}: LoadingProgress): JSX.Element | null => {
-  const { classes } = useStyles({ height, width });
-
-  if (!display) {
-    return null;
-  }
-
-  return (
-    <div className={classes.graphLoader}>
-      <CircularProgress />
-    </div>
-  );
-};
-
-export default LoadingProgress;