@centreon/ui 26.9.1 → 26.10.1

package/src/Graph/common/BaseChart/useComputeYAxisMaxCharacters.ts

@@ -1,21 +1,18 @@
-import { getTicks } from '@visx/scale';
-import { ScaleLinear } from 'd3-scale';
 import { isEmpty } from 'ramda';
 import { useMemo } from 'react';
 
 import type { ChartAxis } from '../../Chart/models';
-import useAxisY from '../Axes/useAxisY';
-import { Line } from '../timeSeries/models';
+import type { Data } from '../Axes/models';
+import type { Thresholds } from '../models';
+import { getFormattedAxisValues } from '../utils';
 
 interface UseComputeYAxisMaxCharactersProps {
+  firstUnit: string;
+  secondUnit: string;
+  thresholdUnit?: string;
+  thresholds?: Thresholds;
+  graphData: Data;
   axis?: ChartAxis;
-  base: number;
-  displayedLines: Array<Line>;
-  graphWidth: number;
-  graphHeight: number;
-  isHorizontal: boolean;
-  leftScale: ScaleLinear<number, number, never>;
-  rightScale: ScaleLinear<number, number, never>;
 }
 
 interface UseComputteYAxisMaxCharactersState {
@@ -24,52 +21,71 @@ interface UseComputteYAxisMaxCharactersState {
 }
 
 export const useComputeYAxisMaxCharacters = ({
+  thresholds,
+  firstUnit,
+  secondUnit,
+  graphData,
   axis,
-  base,
-  displayedLines,
-  graphWidth,
-  graphHeight,
-  isHorizontal,
-  leftScale,
-  rightScale
+  thresholdUnit
 }: UseComputeYAxisMaxCharactersProps): UseComputteYAxisMaxCharactersState => {
-  const { axisLeft, axisRight } = useAxisY({
-    data: {
-      baseAxis: base,
-      lines: displayedLines,
-      ...axis
-    },
-    graphHeight,
-    graphWidth,
-    isHorizontal
-  });
+  const maxLeftValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        axisUnit: axis?.axisYLeft?.unit ?? firstUnit,
+        base: graphData?.baseAxis,
+        lines: graphData?.lines ?? [],
+        threshold: thresholds?.critical ?? [],
+        thresholdUnit,
+        timeSeries: graphData?.timeSeries ?? []
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYLeft?.unit,
+      firstUnit,
+      graphData?.timeSeries,
+      thresholdUnit,
+      graphData?.lines,
+      graphData?.baseAxis
+    ]
+  );
 
-  // Always add a character space in case the algorithm does not compute the displayed value in axis.
-  const maxLeftAxisCharacters = useMemo(() => {
-    if (!leftScale) {
-      return 0;
-    }
-
-    const ticks = getTicks(leftScale, axisLeft.numTicks);
-    const formattedTicks = ticks.map(axisLeft.tickFormat);
-
-    return isEmpty(formattedTicks)
-      ? 2
-      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
-  }, [leftScale, axisLeft]);
+  const maxRightValue = useMemo(
+    () =>
+      getFormattedAxisValues({
+        axisUnit: axis?.axisYRight?.unit ?? secondUnit,
+        base: graphData.baseAxis,
+        lines: graphData.lines ?? [],
+        threshold: thresholds?.critical ?? [],
+        thresholdUnit,
+        timeSeries: graphData.timeSeries ?? []
+      }),
+    [
+      thresholds?.critical,
+      axis?.axisYRight?.unit,
+      secondUnit,
+      graphData.timeSeries,
+      thresholdUnit,
+      graphData.lines,
+      graphData.baseAxis
+    ]
+  );
 
-  const maxRightAxisCharacters = useMemo(() => {
-    if (!rightScale) {
-      return 0;
-    }
-
-    const ticks = getTicks(rightScale, axisRight.numTicks);
-    const formattedTicks = ticks.map(axisRight.tickFormat);
+  // Always add a character space in case the algorithm does not compute the displayed value in axis.
+  const maxLeftAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxLeftValue)
+        ? 2
+        : Math.max(...maxLeftValue.map((value) => value.length), 2) + 1,
+    [maxLeftValue]
+  );
 
-    return isEmpty(formattedTicks)
-      ? 2
-      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
-  }, [rightScale, axisRight]);
+  const maxRightAxisCharacters = useMemo(
+    () =>
+      isEmpty(maxRightValue)
+        ? 5
+        : Math.max(...maxRightValue.map((value) => value.length), 5) + 1,
+    [maxRightValue]
+  );
 
   return {
     maxLeftAxisCharacters,

package/src/Graph/common/utils.ts

@@ -22,6 +22,7 @@ import {
 } from 'ramda';
 
 import type { BarStyle } from '../BarChart/models';
+import { margin } from '../Chart/common';
 import type { LineStyle } from '../Chart/models';
 import type { Threshold, Thresholds } from './models';
 import { formatMetricValueWithUnit } from './timeSeries';
@@ -262,8 +263,16 @@ export const getFormattedAxisValues = ({
     .filter((v) => v) as Array<string>;
 };
 
-export const computeGElementMarginLeft = (maxLeftCharacters: number): number =>
-  maxLeftCharacters * 5;
+interface ComputeGElementMarginLeftProps {
+  maxCharacters: number;
+  hasSecondUnit?: boolean;
+}
+
+export const computeGElementMarginLeft = ({
+  maxCharacters,
+  hasSecondUnit
+}: ComputeGElementMarginLeftProps): number =>
+  maxCharacters * 5 + (hasSecondUnit ? margin.top * 0.8 : margin.top * 0.6);
 
 export const computPixelsToShiftMouse = (
   xScale: import('d3-scale').ScaleTime<number, number>

package/src/ThemeProvider/palettes.ts

@@ -45,6 +45,7 @@ declare module '@mui/material/styles' {
       main: string;
     };
     statusBackground: StatusBackground;
+    tile: TypeTile;
   }
   interface StatusBackground {
     error: string;
@@ -64,6 +65,13 @@ declare module '@mui/material/styles' {
       main: string;
     };
     statusBackground: StatusBackground;
+    tile: TypeTile;
+  }
+
+  interface TypeTile {
+    background: string;
+    border: string;
+    borderHover: string;
   }
 
   interface TypeBackground {
@@ -294,6 +302,11 @@ export const lightPalette: PaletteOptions = {
     primary: '#000000',
     secondary: '#666666'
   },
+  tile: {
+    background: '#FFFFFF',
+    border: '#E3E3E3',
+    borderHover: '#CCCCCC'
+  },
   warning: {
     contrastText: '#000',
     dark: '#FC7E00',
@@ -436,6 +449,11 @@ export const darkPalette: PaletteOptions = {
     primary: '#FFFFFF',
     secondary: '#CCCCCC'
   },
+  tile: {
+    background: '#2E2E2E',
+    border: '#4A4A4A',
+    borderHover: '#6D6D6D'
+  },
   warning: {
     contrastText: '#fff',
     main: '#C55400'

package/src/ThemeProvider/tailwindcss.css

@@ -112,6 +112,11 @@
   --color-status-background-warning: #fd9b27;
   --color-success-main: #88b922;
 
+  /* Tile container colors */
+  --color-tile-background: #ffffff;
+  --color-tile-border: #e3e3e3;
+  --color-tile-border-hover: #cccccc;
+
   /* Text colors */
   --color-text-disabled: #999999;
   --color-text-primary: #000000;
@@ -195,6 +200,9 @@
     --color-stauts-background-unknown: #666666;
     --color-status-background-warning: #c55400;
     --color-success-main: #5f8118;
+    --color-tile-background: #2e2e2e;
+    --color-tile-border: #4a4a4a;
+    --color-tile-border-hover: #6d6d6d;
     --color-text-disabled: #666666;
     --color-text-primary: #ffffff;
     --color-text-secondary: #cccccc;

package/src/TopCounterElements/ResourceCounters.tsx

@@ -1,6 +1,5 @@
 import type { SeverityCode } from '@centreon/ui';
 
-import { Fragment } from 'react';
 import { Link } from 'react-router';
 import { makeStyles } from 'tss-react/mui';
 
@@ -8,29 +7,23 @@ import StatusCounter from './StatusCounter';
 
 const useStyles = makeStyles()((theme) => ({
   container: {
-    display: 'inline-block',
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1),
     listStyle: 'none',
     margin: 0,
-    padding: 0,
-    [theme.breakpoints.down(1025)]: {
-      flexFlow: 'row wrap'
-    }
+    padding: 0
   },
   item: {
-    display: 'inline-block',
+    alignItems: 'center',
+    display: 'flex',
     margin: 0,
-    padding: 0,
-    paddingRight: theme.spacing(0.25)
+    padding: 0
   },
   link: {
+    alignItems: 'center',
+    display: 'flex',
     textDecoration: 'none'
-  },
-  splitter: {
-    display: 'none',
-    [theme.breakpoints.down(1025)]: {
-      display: 'block',
-      marginBottom: theme.spacing(0.25)
-    }
   }
 }));
 
@@ -38,6 +31,7 @@ export interface CounterProps {
   counters: Array<{
     ariaLabel: string;
     count: string | number;
+    detail?: string | number;
     onClick: (e: React.MouseEvent) => void;
     severityCode: SeverityCode;
     to: string;
@@ -50,20 +44,21 @@ export default ({ counters }: CounterProps): JSX.Element => {
   return (
     <ul className={classes.container}>
       {counters.map(
-        ({ to, ariaLabel, onClick, count, severityCode }, index) => (
-          <Fragment key={to.toString().replace(/\W/g, '')}>
-            {index === 2 && <li className={classes.splitter} />}
-            <li className={classes.item}>
-              <Link
-                aria-label={ariaLabel}
-                className={classes.link}
-                onClick={onClick}
-                to={to}
-              >
-                <StatusCounter count={count} severityCode={severityCode} />
-              </Link>
-            </li>
-          </Fragment>
+        ({ to, ariaLabel, onClick, count, detail, severityCode }) => (
+          <li className={classes.item} key={to.toString().replace(/\W/g, '')}>
+            <Link
+              aria-label={ariaLabel}
+              className={classes.link}
+              onClick={onClick}
+              to={to}
+            >
+              <StatusCounter
+                count={count}
+                detail={detail}
+                severityCode={severityCode}
+              />
+            </Link>
+          </li>
         )
       )}
     </ul>

package/src/TopCounterElements/StatusCounter.tsx

@@ -1,63 +1,72 @@
-import { Badge, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 
 import { getStatusColors, type SeverityCode } from '@centreon/ui';
 
 import numeral from 'numeral';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 export interface StyleProps {
   severityCode?: SeverityCode | null;
 }
 
-const useStyles = makeStyles<StyleProps>()((theme, { severityCode }) => ({
-  badge: {
-    background: severityCode
-      ? getStatusColors({ severityCode, theme })?.backgroundColor
-      : 'transparent',
-    borderRadius: theme.spacing(1.25),
-    color: theme.palette.common.black,
-    cursor: 'pointer',
-    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-    height: theme.spacing(2.125),
-    lineHeight: theme.spacing(2.125),
-    minWidth: theme.spacing(2.125),
-    position: 'relative',
-    right: 0,
-    top: 0,
-    transform: 'none'
-  }
-}));
+const useStyles = makeStyles<StyleProps>()((theme, { severityCode }) => {
+  const statusColors = severityCode
+    ? getStatusColors({ severityCode, theme })
+    : null;
+
+  return {
+    container: {
+      alignItems: 'center',
+      color: theme.palette.mode === 'dark' ? '#EAEEF7' : '#1B2233',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      gap: '3px'
+    },
+    count: {
+      fontFamily: 'ui-monospace, "Roboto Mono", Menlo, monospace',
+      fontSize: '12px',
+      fontWeight: theme.typography.fontWeightMedium,
+      lineHeight: 1
+    },
+    dot: {
+      backgroundColor: statusColors?.backgroundColor ?? theme.palette.divider,
+      borderRadius: '50%',
+      flexShrink: 0,
+      height: '9px',
+      width: '9px'
+    }
+  };
+});
 
 export interface Props {
   className?: string;
   count: string | number;
+  detail?: string | number;
   severityCode?: SeverityCode | null;
 }
 
 const StatusCounter = ({
   severityCode = null,
   count,
+  detail,
   className
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ severityCode });
-  const shouldDisableTooltip = Number(count) < 1000;
+  const hasDetail = !isNil(detail);
+  const shouldDisableTooltip = !hasDetail && Number(count) < 1000;
   const formattedCount = numeral(count).format('0.[0]a');
 
   return (
     <Tooltip
       disableHoverListener={shouldDisableTooltip}
       followCursor
-      title={count}
+      title={hasDetail ? detail : count}
     >
-      <Badge
-        badgeContent={formattedCount}
-        classes={{
-          badge: cx(classes.badge, className)
-        }}
-        max={Number.POSITIVE_INFINITY}
-        overlap="circular"
-      />
+      <span className={cx(classes.container, className)}>
+        <span className={classes.dot} />
+        <span className={classes.count}>{formattedCount}</span>
+      </span>
     </Tooltip>
   );
 };