@centreon/ui 23.10.1-MON-21683-manual-refresh.4 → 23.10.1-MON-20803-RS-add-basic-filter.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.1-MON-21683-manual-refresh.4",
+  "version": "23.10.1-MON-20803-RS-add-basic-filter.7",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Dashboard/Dashboard.styles.ts

@@ -79,12 +79,7 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      '&[data-canMove="false"]': {
-        cursor: 'default'
-      },
-      '&[data-canMove="true"]': {
-        cursor: 'move'
-      },
+      cursor: 'move',
       padding: theme.spacing(0.5, 2)
     },
     widgetPadding: {

package/src/Dashboard/Item.tsx

@@ -15,7 +15,6 @@ import { useMemoComponent } from '../utils';
 import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
-  canMove?: boolean;
   children: ReactElement;
   className?: string;
   disablePadding?: boolean;
@@ -38,8 +37,7 @@ const Item = forwardRef(
       onMouseUp,
       onTouchEnd,
       id,
-      disablePadding = false,
-      canMove = false
+      disablePadding = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
@@ -68,7 +66,6 @@ const Item = forwardRef(
               <div
                 {...listeners}
                 className={classes.widgetHeader}
-                data-canMove={canMove}
                 data-testid={`${id}_move_panel`}
               >
                 {header}

package/src/Dashboard/Layout.tsx

@@ -45,7 +45,7 @@ const Layout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <ResponsiveHeight margin={40}>
+      <ResponsiveHeight>
         <Responsive.ParentSize>
           {({ width, height }): JSX.Element => (
             <div className={classes.container}>

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split, type } from 'ramda';
+import { equals, includes, path, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -73,23 +73,12 @@ const Radio = ({
                   disabled={disabled}
                   id={getNormalizedId(`${dataTestId}${optionLabel}`)}
                   inputProps={{
-                    'aria-label':
-                      (equals(type(optionLabel), 'String') &&
-                        t(optionLabel as string)) ||
-                      ''
+                    'aria-label': t(optionLabel) || ''
                   }}
                 />
               }
-              key={
-                equals(type(optionLabel), 'String')
-                  ? (optionLabel as string)
-                  : `${optionValue}`
-              }
-              label={
-                equals(type(optionLabel), 'String')
-                  ? (t(optionLabel as string) as string)
-                  : optionLabel
-              }
+              key={optionLabel}
+              label={t(optionLabel) as string}
               value={optionValue}
             />
           ))}

package/src/Form/Inputs/models.ts

@@ -77,7 +77,7 @@ export interface InputProps {
   label: string;
   radio?: {
     options?: Array<{
-      label: string | JSX.Element;
+      label: string;
       value: boolean | string;
     }>;
     row?: boolean;

package/src/Graph/Gauge/Gauge.stories.tsx

@@ -134,13 +134,3 @@ export const withRangeThresholds: Story = {
   },
   render: Template
 };
-
-export const RawValue: Story = {
-  args: {
-    data: dataLastWeek,
-    displayAsRaw: true,
-    thresholdTooltipLabels: ['Warning', 'Critical'],
-    thresholds: [0.5, 0.6]
-  },
-  render: Template
-};

package/src/Graph/Gauge/Gauge.tsx

@@ -7,18 +7,11 @@ import { Metric } from '../common/timeSeries/models';
 import ResponsiveGauge from './ResponsiveGauge';
 
 interface Props {
-  baseColor?: string;
   data?: LineChartData;
-  displayAsRaw?: boolean;
   thresholds: Thresholds;
 }
 
-export const Gauge = ({
-  thresholds,
-  data,
-  displayAsRaw,
-  baseColor
-}: Props): JSX.Element | null => {
+export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
   if (!data) {
     return null;
   }
@@ -29,8 +22,6 @@ export const Gauge = ({
     <Responsive.ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
-          baseColor={baseColor}
-          displayAsRaw={displayAsRaw}
           height={height}
           metric={metric}
           thresholds={thresholds}

package/src/Graph/Gauge/PieData.tsx

@@ -16,8 +16,7 @@ const PieData = ({
   metric,
   adaptedMaxValue,
   thresholds,
-  radius,
-  baseColor
+  radius
 }: Omit<
   GaugeProps,
   'width' | 'height' | 'showTooltip' | 'hideTooltip' | 'thresholdTooltipLabels'
@@ -25,12 +24,13 @@ const PieData = ({
   const theme = useTheme();
 
   const pieData = [metric.data[0], adaptedMaxValue - metric.data[0]];
-  const pieColor = getColorFromDataAndTresholds({
-    baseColor,
-    data: metric.data[0],
-    theme,
-    thresholds
-  });
+  const pieColor = !thresholds.enabled
+    ? theme.palette.success.main
+    : getColorFromDataAndTresholds({
+        data: metric.data[0],
+        theme,
+        thresholds
+      });
 
   const getDataColor = scaleOrdinal({
     domain: pieData,

package/src/Graph/Gauge/ResponsiveGauge.tsx

@@ -7,7 +7,7 @@ import { Tooltip } from '@visx/visx';
 import { Box, Fade, useTheme } from '@mui/material';
 
 import { Metric } from '../common/timeSeries/models';
-import { formatMetricValueWithUnit } from '../common/timeSeries';
+import { formatMetricValue } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
 import { margins } from '../common/margins';
 
@@ -15,8 +15,7 @@ import Thresholds from './Thresholds';
 import PieData from './PieData';
 import { GaugeProps } from './models';
 
-interface Props extends Pick<GaugeProps, 'thresholds' | 'baseColor'> {
-  displayAsRaw?: boolean;
+interface Props extends Pick<GaugeProps, 'thresholds'> {
   height: number;
   metric: Metric;
   width: number;
@@ -31,9 +30,7 @@ const ResponsiveGauge = ({
   width,
   height,
   thresholds,
-  metric,
-  displayAsRaw,
-  baseColor
+  metric
 }: Props): JSX.Element => {
   const svgRef = useRef<SVGSVGElement>(null);
 
@@ -53,46 +50,31 @@ const ResponsiveGauge = ({
   const centerY = innerHeight / 2;
   const centerX = innerWidth / 2;
   const radius = Math.min(innerWidth, innerHeight) / 2;
-  const thresholdValues = thresholds.enabled
-    ? flatten([
-        pluck('value', thresholds.warning),
-        pluck('value', thresholds.critical)
-      ])
-    : [0];
+  const thresholdValues = flatten([
+    pluck('value', thresholds.warning),
+    pluck('value', thresholds.critical)
+  ]);
   const adaptedMaxValue = Math.max(
     metric.maximum_value || 0,
     Math.max(...thresholdValues) * 1.1,
     head(metric.data) as number
   );
 
-  const pieColor = getColorFromDataAndTresholds({
-    baseColor,
-    data: metric.data[0],
-    theme,
-    thresholds
-  });
+  const pieColor = !thresholds.enabled
+    ? theme.palette.success.main
+    : getColorFromDataAndTresholds({
+        data: metric.data[0],
+        theme,
+        thresholds
+      });
 
   const svgTop = svgRef.current?.getBoundingClientRect().top || 0;
   const svgLeft = svgRef.current?.getBoundingClientRect().left || 0;
 
-  const isSmallWidget = height < 240;
-
-  const gaugeValue = formatMetricValueWithUnit({
-    base: 1000,
-    isRaw: displayAsRaw,
-    unit: metric.unit,
-    value: metric.data[0]
-  });
+  const isSmallHeight = height < 250;
 
   return (
-    <Box
-      sx={{
-        height: '100%',
-        overflow: 'hidden',
-        position: 'relative',
-        width: '100%'
-      }}
-    >
+    <Box sx={{ position: 'relative' }}>
       <svg height={height} ref={svgRef} width={width}>
         <Group left={centerX + margins.left} top={centerY + height / 6}>
           <Thresholds
@@ -105,7 +87,6 @@ const ResponsiveGauge = ({
           />
           <PieData
             adaptedMaxValue={adaptedMaxValue}
-            baseColor={baseColor}
             metric={metric}
             radius={radius}
             thresholds={thresholds}
@@ -116,15 +97,18 @@ const ResponsiveGauge = ({
           style={{
             fill: pieColor,
             ...theme.typography.h3,
-            fontSize:
-              Math.min(width, height) / 7 -
-              (isSmallWidget ? 0 : (gaugeValue?.length || 0) * 2)
+            fontSize: Math.min(width, height) / 7
           }}
           textAnchor="middle"
           x="50%"
-          y={isSmallWidget ? 130 : height - height / 2.3}
+          y={isSmallHeight ? 140 : 100 + Math.min(width, height) / 3}
         >
-          {gaugeValue}
+          {formatMetricValue({
+            base: 1000,
+            unit: metric.unit,
+            value: metric.data[0]
+          })}{' '}
+          {metric.unit}
         </text>
       </svg>
       <Fade in={tooltipOpen && thresholds.enabled}>

package/src/Graph/Gauge/Thresholds.tsx

@@ -16,7 +16,7 @@ const Thresholds = ({
   showTooltip,
   hideTooltip,
   metric
-}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
   const theme = useTheme();
 
   const criticalThresholdValues = pluck('value', thresholds.critical);
@@ -65,7 +65,30 @@ const Thresholds = ({
   });
 
   if (!thresholds.enabled) {
-    return null;
+    return (
+      <Pie
+        data={successThresholdArc}
+        endAngle={-Math.PI / 2}
+        innerRadius={radius - thresholdThickness}
+        outerRadius={radius}
+        pieSortValues={() => -1}
+        pieValue={(d) => d.value}
+        startAngle={Math.PI / 2}
+      >
+        {(pie) => (
+          <AnimatedPie<{ name: string; value: number }>
+            {...pie}
+            animate
+            getColor={(arc) => successThresholdScaleOrdinal(arc.data.name)}
+            getKey={(arc) => `${arc.data.name}_${arc.data.value}`}
+            hideTooltip={hideTooltip}
+            metric={metric}
+            showTooltip={showTooltip}
+            thresholds={thresholds}
+          />
+        )}
+      </Pie>
+    );
   }
 
   const arcs = [

package/src/Graph/Gauge/models.ts

@@ -3,7 +3,6 @@ import { Metric } from '../common/timeSeries/models';
 
 export interface GaugeProps {
   adaptedMaxValue: number;
-  baseColor?: string;
   height: number;
   hideTooltip: () => void;
   metric: Metric;

package/src/Graph/LineChart/BasicComponents/Axes/index.tsx

@@ -38,7 +38,7 @@ const Axes = ({
 
   const [firstUnit, secondUnit, thirdUnit] = getUnits(lines);
 
-  const xTickCount = Math.min(Math.ceil(width / 82), 12);
+  const xTickCount = Math.ceil(width / 82);
 
   const tickFormat =
     data?.axisX?.xAxisTickFormat ?? getXAxisTickFormat(graphInterval);

package/src/Graph/LineChart/BasicComponents/Lines/RegularLines/index.tsx

@@ -16,7 +16,7 @@ interface Props {
   graphHeight: number;
   highlight?: boolean;
   lineColor: string;
-  metric_id: number;
+  metric: string;
   shapeAreaClosed?: Record<string, unknown>;
   shapeLinePath?: Record<string, unknown>;
   timeSeries: Array<TimeValue>;
@@ -30,7 +30,7 @@ const RegularLine = ({
   filled,
   timeSeries,
   highlight,
-  metric_id,
+  metric,
   lineColor,
   unit,
   yScale,
@@ -43,13 +43,13 @@ const RegularLine = ({
   const props = {
     curve,
     data: timeSeries,
-    defined: (value): boolean => !isNil(value[metric_id]),
+    defined: (value): boolean => !isNil(value[metric]),
     opacity: 1,
     stroke: lineColor,
     strokeWidth: !highlight ? 1 : 2,
     unit,
     x: (timeValue): number => xScale(getTime(timeValue)) as number,
-    y: (timeValue): number => yScale(prop(metric_id, timeValue)) ?? null
+    y: (timeValue): number => yScale(prop(metric, timeValue)) ?? null
   };
 
   if (filled) {
@@ -57,7 +57,7 @@ const RegularLine = ({
       <Shape.AreaClosed<TimeValue>
         fill={getFillColor({ areaColor, transparency })}
         fillRule="nonzero"
-        key={metric_id}
+        key={metric}
         y0={Math.min(yScale(0), graphHeight)}
         yScale={yScale}
         {...props}
@@ -73,27 +73,22 @@ export default memo(RegularLine, (prevProps, nextProps) => {
     timeSeries: prevTimeSeries,
     graphHeight: prevGraphHeight,
     highlight: prevHighlight,
-    xScale: prevXScale,
-    yScale: prevYScale
+    xScale: prevXScale
   } = prevProps;
   const {
     timeSeries: nextTimeSeries,
     graphHeight: nextGraphHeight,
     highlight: nextHighlight,
-    xScale: nextXScale,
-    yScale: nextYScale
+    xScale: nextXScale
   } = nextProps;
 
   const prevXScaleRange = prevXScale.range();
   const nextXScaleRange = nextXScale.range();
-  const prevYScaleDomain = prevYScale.domain();
-  const nextYScaleDomain = nextYScale.domain();
 
   return (
     equals(prevTimeSeries, nextTimeSeries) &&
     equals(prevGraphHeight, nextGraphHeight) &&
     equals(prevHighlight, nextHighlight) &&
-    equals(prevXScaleRange, nextXScaleRange) &&
-    equals(prevYScaleDomain, nextYScaleDomain)
+    equals(prevXScaleRange, nextXScaleRange)
   );
 });

package/src/Graph/LineChart/BasicComponents/Lines/StackedLines/index.tsx

@@ -32,13 +32,11 @@ const StackLines = ({
       data={timeSeries}
       defined={(d): boolean => {
         return pipe(
-          map(prop('metric_id')) as unknown as (
-            displayedLines
-          ) => Array<string>,
-          all((metric_id) => pipe(path(['data', metric_id]), isNil, not)(d))
+          map(prop('metric')) as unknown as (displayedLines) => Array<string>,
+          all((metric) => pipe(path(['data', metric]), isNil, not)(d))
         )(lines);
       }}
-      keys={map(prop('metric_id'), lines)}
+      keys={map(prop('metric'), lines)}
       x={(d): number => xScale(getTime(d.data)) ?? 0}
       y0={(d): number => yScale(d[0]) ?? 0}
       y1={(d): number => yScale(d[1]) ?? 0}

package/src/Graph/LineChart/BasicComponents/Lines/Threshold/useScaleThreshold.ts

@@ -53,21 +53,21 @@ const useScaleThreshold = ({
   const [, secondUnit, thirdUnit] = getUnits(lines);
 
   const {
-    metric_id: metricY1,
+    metric: metricY1,
     unit: unitY1,
     invert: invertY1,
     lineColor: lineColorY1
   } = lineUpper;
 
   const {
-    metric_id: metricY0,
+    metric: metricY0,
     unit: unitY0,
     invert: invertY0,
     lineColor: lineColorY0
   } = lineLower;
 
   const {
-    metric_id: metricOrigin,
+    metric: metricOrigin,
     unit: unitYOrigin,
     invert: invertYOrigin
   } = lineOrigin;

package/src/Graph/LineChart/BasicComponents/Lines/index.tsx

@@ -129,14 +129,14 @@ const Lines = ({
       {displayAreaRegularLines
         ? regularLines.map(
             ({
+              metric,
               areaColor,
               transparency,
               lineColor,
               filled,
               unit,
               highlight,
-              invert,
-              metric_id
+              invert
             }) => {
               const [, secondUnit, thirdUnit] = getUnits(
                 regularLines as Array<Line>
@@ -151,12 +151,12 @@ const Lines = ({
               });
 
               return (
-                <g key={metric_id}>
+                <g key={metric}>
                   {displayGuidingLines && (
                     <RegularAnchorPoint
                       areaColor={areaColor}
                       lineColor={lineColor}
-                      metric_id={metric_id}
+                      metric={metric}
                       timeSeries={timeSeries}
                       transparency={transparency}
                       xScale={xScale}
@@ -170,7 +170,7 @@ const Lines = ({
                     graphHeight={height}
                     highlight={highlight}
                     lineColor={lineColor}
-                    metric_id={metric_id}
+                    metric={metric}
                     timeSeries={timeSeries}
                     transparency={transparency}
                     unit={unit}

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/RegularAnchorPoint.tsx

@@ -11,7 +11,7 @@ import AnchorPoint from '.';
 
 interface Props {
   lineColor: string;
-  metric_id: number;
+  metric: string;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
@@ -21,18 +21,18 @@ const getYAnchorPoint = ({
   timeTick,
   timeSeries,
   yScale,
-  metric_id
+  metric
 }: GetYAnchorPoint): number => {
   const index = bisectDate(getDates(timeSeries), timeTick);
   const timeValue = timeSeries[index];
 
-  return yScale(prop(metric_id, timeValue) as number);
+  return yScale(prop(metric, timeValue) as number);
 };
 
 const RegularAnchorPoint = ({
   xScale,
   yScale,
-  metric_id,
+  metric,
   timeSeries,
   lineColor
 }: Props): JSX.Element | null => {
@@ -48,7 +48,7 @@ const RegularAnchorPoint = ({
   const xAnchorPoint = xScale(timeTick);
 
   const yAnchorPoint = getYAnchorPoint({
-    metric_id,
+    metric,
     timeSeries,
     timeTick,
     yScale

package/src/Graph/LineChart/InteractiveComponents/AnchorPoint/models.ts

@@ -32,7 +32,7 @@ export interface GuidingLines {
 }
 
 export interface GetYAnchorPoint {
-  metric_id: number;
+  metric: string;
   timeSeries: Array<TimeValue>;
   timeTick: Date;
   yScale: ScaleLinear<number, number>;

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

@@ -69,25 +69,25 @@ const MainLegend = ({
       value
     }) || 'N/A';
 
-  const selectMetric = ({ event, metric_id }): void => {
+  const selectMetric = ({ event, metric }): void => {
     if (!toggable) {
       return;
     }
 
     if (event.ctrlKey || event.metaKey) {
-      toggleMetricLine(metric_id);
+      toggleMetricLine(metric);
 
       return;
     }
 
-    selectMetricLine(metric_id);
+    selectMetricLine(metric);
   };
 
   return (
     <div className={classes.legend}>
       <div className={classes.items}>
         {displayedLines.map((line) => {
-          const { color, display, highlight, metric_id } = line;
+          const { color, name, display, metric, highlight } = line;
 
           const markerColor = display
             ? color
@@ -119,9 +119,9 @@ const MainLegend = ({
                 highlight ? classes.highlight : classes.normal,
                 toggable && classes.toggable
               )}
-              key={metric_id}
-              onClick={(event): void => selectMetric({ event, metric_id })}
-              onMouseEnter={(): void => highlightLine(metric_id)}
+              key={name}
+              onClick={(event): void => selectMetric({ event, metric })}
+              onMouseEnter={(): void => highlightLine(metric)}
               onMouseLeave={(): void => clearHighlight()}
             >
               <LegendMarker color={markerColor} disabled={!display} />

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

@@ -43,34 +43,34 @@ const useInteractiveValues = ({
     equals(item.timeTick, timeValue?.timeTick)
   );
 
-  const getMetricsToDisplay = (): Array<number> => {
+  const getMetricsToDisplay = (): Array<string> => {
     if (isNil(graphTimeValue)) {
       return [];
     }
     const metricsData = getMetrics(graphTimeValue as TimeValue);
 
-    const metricsToDisplay = metricsData.filter((metric_id) => {
-      const line = getLineForMetric({ lines, metric_id: Number(metric_id) });
+    const metricsToDisplay = metricsData.filter((metric) => {
+      const line = getLineForMetric({ lines, metric });
 
-      return !isNil(graphTimeValue[metric_id]) && !isNil(line);
+      return !isNil(graphTimeValue[metric]) && !isNil(line);
     });
 
-    return metricsToDisplay.map(Number);
+    return metricsToDisplay;
   };
 
   const metrics = useMemo(() => getMetricsToDisplay(), [graphTimeValue]);
 
   const getFormattedMetricData = (
-    metric_id: number
+    metric: string
   ): FormattedMetricData | null => {
     if (isNil(graphTimeValue)) {
       return null;
     }
-    const value = graphTimeValue[metric_id] as number;
+    const value = graphTimeValue[metric] as number;
 
     const { color, name, unit } = getLineForMetric({
       lines,
-      metric_id
+      metric
     }) as Line;
 
     const formattedValue = formatMetricValue({
@@ -88,9 +88,9 @@ const useInteractiveValues = ({
   };
 
   const getFormattedValue = (line: Line): string | undefined | null => {
-    const metric_id = find(equals(line.metric_id), metrics);
+    const metric = find(equals(line.metric), metrics);
 
-    return metric_id ? getFormattedMetricData(metric_id)?.formattedValue : null;
+    return metric && getFormattedMetricData(metric)?.formattedValue;
   };
 
   return { getFormattedValue };