@centreon/ui 23.10.1-MON-20803-RS-add-basic-filter.11 → 23.10.1-MON-22310-text-alignment-description.0

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -69,7 +69,11 @@ 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%'
     },
     widgetContent: {
@@ -79,12 +83,17 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       },
-      cursor: 'move',
+      '&[data-canMove="false"]': {
+        cursor: 'default'
+      },
+      '&[data-canMove="true"]': {
+        cursor: 'move'
+      },
       padding: theme.spacing(0.5, 2)
     },
     widgetPadding: {
       overflowX: 'auto',
-      padding: hasHeader ? theme.spacing(1, 2, 2) : theme.spacing(1, 2)
+      padding: hasHeader ? theme.spacing(1, 2, 0) : theme.spacing(1, 2)
     }
   })
 );

package/src/Dashboard/Item.tsx

@@ -8,13 +8,14 @@ import {
 
 import { isNil } from 'ramda';
 
-import { Card } from '@mui/material';
+import { Card, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '../utils';
 
 import { useDashboardItemStyles } from './Dashboard.styles';
 
 interface DashboardItemProps {
+  canMove?: boolean;
   children: ReactElement;
   className?: string;
   disablePadding?: boolean;
@@ -37,13 +38,15 @@ const Item = forwardRef(
       onMouseUp,
       onTouchEnd,
       id,
-      disablePadding = false
+      disablePadding = false,
+      canMove = false
     }: DashboardItemProps,
     ref: ForwardedRef<HTMLDivElement>
   ): ReactElement => {
     const hasHeader = !isNil(header);
 
     const { classes, cx } = useDashboardItemStyles({ hasHeader });
+    const theme = useTheme();
 
     const listeners = {
       onMouseDown,
@@ -66,6 +69,7 @@ const Item = forwardRef(
               <div
                 {...listeners}
                 className={classes.widgetHeader}
+                data-canMove={canMove}
                 data-testid={`${id}_move_panel`}
               >
                 {header}
@@ -82,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';
@@ -45,8 +48,8 @@ const Layout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <ResponsiveHeight>
-        <Responsive.ParentSize>
+      <ResponsiveHeight margin={40}>
+        <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/Form/Inputs/Radio.tsx

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

package/src/Form/Inputs/models.ts

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

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

@@ -134,3 +134,13 @@ 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

@@ -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';
@@ -7,11 +6,18 @@ 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 }: Props): JSX.Element | null => {
+export const Gauge = ({
+  thresholds,
+  data,
+  displayAsRaw,
+  baseColor
+}: Props): JSX.Element | null => {
   if (!data) {
     return null;
   }
@@ -19,15 +25,17 @@ export const Gauge = ({ thresholds, data }: Props): JSX.Element | null => {
   const metric = getMetricWithLatestData(data) as Metric;
 
   return (
-    <Responsive.ParentSize>
+    <ParentSize>
       {({ width, height }) => (
         <ResponsiveGauge
+          baseColor={baseColor}
+          displayAsRaw={displayAsRaw}
           height={height}
           metric={metric}
           thresholds={thresholds}
           width={width}
         />
       )}
-    </Responsive.ParentSize>
+    </ParentSize>
   );
 };

package/src/Graph/Gauge/PieData.tsx

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

package/src/Graph/Gauge/Thresholds.tsx

@@ -16,7 +16,7 @@ const Thresholds = ({
   showTooltip,
   hideTooltip,
   metric
-}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element => {
+}: Omit<GaugeProps, 'width' | 'height'>): JSX.Element | null => {
   const theme = useTheme();
 
   const criticalThresholdValues = pluck('value', thresholds.critical);
@@ -65,30 +65,7 @@ const Thresholds = ({
   });
 
   if (!thresholds.enabled) {
-    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>
-    );
+    return null;
   }
 
   const arcs = [

package/src/Graph/Gauge/models.ts

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

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

@@ -32,11 +32,13 @@ const StackLines = ({
       data={timeSeries}
       defined={(d): boolean => {
         return pipe(
-          map(prop('metric')) as unknown as (displayedLines) => Array<string>,
-          all((metric) => pipe(path(['data', metric]), isNil, not)(d))
+          map(prop('metric_id')) as unknown as (
+            displayedLines
+          ) => Array<string>,
+          all((metric_id) => pipe(path(['data', metric_id]), isNil, not)(d))
         )(lines);
       }}
-      keys={map(prop('metric'), lines)}
+      keys={map(prop('metric_id'), 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: metricY1,
+    metric_id: metricY1,
     unit: unitY1,
     invert: invertY1,
     lineColor: lineColorY1
   } = lineUpper;
 
   const {
-    metric: metricY0,
+    metric_id: metricY0,
     unit: unitY0,
     invert: invertY0,
     lineColor: lineColorY0
   } = lineLower;
 
   const {
-    metric: metricOrigin,
+    metric_id: 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
+              invert,
+              metric_id
             }) => {
               const [, secondUnit, thirdUnit] = getUnits(
                 regularLines as Array<Line>
@@ -151,12 +151,12 @@ const Lines = ({
               });
 
               return (
-                <g key={metric}>
+                <g key={metric_id}>
                   {displayGuidingLines && (
                     <RegularAnchorPoint
                       areaColor={areaColor}
                       lineColor={lineColor}
-                      metric={metric}
+                      metric_id={metric_id}
                       timeSeries={timeSeries}
                       transparency={transparency}
                       xScale={xScale}
@@ -170,7 +170,7 @@ const Lines = ({
                     graphHeight={height}
                     highlight={highlight}
                     lineColor={lineColor}
-                    metric={metric}
+                    metric_id={metric_id}
                     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: string;
+  metric_id: number;
   timeSeries: Array<TimeValue>;
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
@@ -21,18 +21,18 @@ const getYAnchorPoint = ({
   timeTick,
   timeSeries,
   yScale,
-  metric
+  metric_id
 }: GetYAnchorPoint): number => {
   const index = bisectDate(getDates(timeSeries), timeTick);
   const timeValue = timeSeries[index];
 
-  return yScale(prop(metric, timeValue) as number);
+  return yScale(prop(metric_id, timeValue) as number);
 };
 
 const RegularAnchorPoint = ({
   xScale,
   yScale,
-  metric,
+  metric_id,
   timeSeries,
   lineColor
 }: Props): JSX.Element | null => {
@@ -48,7 +48,7 @@ const RegularAnchorPoint = ({
   const xAnchorPoint = xScale(timeTick);
 
   const yAnchorPoint = getYAnchorPoint({
-    metric,
+    metric_id,
     timeSeries,
     timeTick,
     yScale

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

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