@centreon/ui 25.10.28 → 25.10.30

package/src/Graph/Chart/models.ts

@@ -175,11 +175,6 @@ export interface LegendModel {
   mode: 'grid' | 'list';
   placement: 'bottom' | 'left' | 'right';
   renderExtraComponent?: ReactNode;
-  secondaryClick?: (props: {
-    element: EventTarget | null;
-    metricId: number | string;
-    position: [number, number];
-  }) => void;
 }
 
 export interface GetDate {
@@ -198,4 +193,4 @@ export interface GraphTooltipData {
     unit: string;
     value: number;
   }>;
-}
+}

package/src/Graph/Chart/translatedLabels.ts

@@ -7,3 +7,4 @@ export const labelDowntime = 'Downtime';
 export const labelMin = 'Min';
 export const labelMax = 'Max';
 export const labelAvg = 'Avg';
+export const labelNoDataForThisPeriod = 'No data available for this period';

package/src/Graph/Chart/useChartData.ts

@@ -31,6 +31,15 @@ interface Props {
 }
 
 const getBoolean = (value) => Boolean(Number(value));
+const defaultDsData = {
+  ds_color_line: '#000000',
+  ds_filled: false,
+  ds_invert: false,
+  ds_legend: '',
+  ds_order: '0',
+  ds_stack: '0',
+  ds_transparency: 80
+};
 
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
   const adjustedDataRef = useRef<Data>();
@@ -40,13 +49,25 @@ const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
       return data;
     }
 
-    if (isEmpty(data.metrics)) {
+    if (isEmpty(data.metrics) || isEmpty(data.times)) {
       return undefined;
     }
 
+    const metricsWithValidDsData = (data?.metrics || []).map((metric) => ({
+      ...metric,
+      ds_data: {
+        ...defaultDsData,
+        ...(metric?.ds_data || {}),
+        ds_color_area:
+          metric?.ds_data?.ds_color_area ??
+          metric?.ds_data?.ds_color_line ??
+          defaultDsData.ds_color_line
+      }
+    }));
+
     const metricsGroupedByColor = groupBy(
-      (metric) => metric.ds_data.ds_color_line
-    )(data?.metrics || []);
+      (metric) => metric.ds_data?.ds_color_line || '#000000'
+    )(metricsWithValidDsData);
 
     const newMetrics = Object.entries(metricsGroupedByColor).map(
       ([color, value]) => {

package/src/Graph/common/Axes/index.tsx

@@ -59,7 +59,7 @@ const Axes = ({
   const formatAxisTick = (tick): string =>
     format({ date: new Date(tick), formatString: tickFormat });
 
-  const displayAxisRight = !isNil(secondUnit);
+  const displayAxisRight = !isNil(secondUnit) && !isNil(rightScale);
 
   const AxisBottom = isHorizontal ? Axis.AxisBottom : Axis.AxisLeft;
   const AxisLeft = isHorizontal ? Axis.AxisLeft : Axis.AxisTop;

package/src/Graph/common/BaseChart/BaseChart.tsx

@@ -19,10 +19,7 @@ interface Props {
   header?: LineChartHeader;
   height: number | null;
   isHorizontal?: boolean;
-  legend: Pick<
-    LegendModel,
-    'renderExtraComponent' | 'placement' | 'mode' | 'secondaryClick'
-  > & {
+  legend: Pick<LegendModel, 'renderExtraComponent' | 'placement' | 'mode'> & {
     displayLegend: boolean;
     legendHeight?: number;
   };
@@ -104,7 +101,6 @@ const BaseChart = ({
                   shouldDisplayLegendInCompactMode={
                     shouldDisplayLegendInCompactMode
                   }
-                  secondaryClick={legend?.secondaryClick}
                 />
               </div>
             )}
@@ -126,7 +122,6 @@ const BaseChart = ({
             renderExtraComponent={legend.renderExtraComponent}
             setLinesGraph={setLines}
             shouldDisplayLegendInCompactMode={shouldDisplayLegendInCompactMode}
-            secondaryClick={legend?.secondaryClick}
           />
         </div>
       )}

package/src/Graph/common/BaseChart/ChartSvgWrapper.tsx

@@ -50,6 +50,11 @@ const ChartSvgWrapper = ({
   hasSecondUnit
 }: Props): JSX.Element => {
   const isHorizontal = equals(orientation, 'horizontal');
+  const hasValidLeftScale = Boolean(leftScale);
+  const hasValidXScale = Boolean(xScale);
+  const canRenderAxes = hasValidLeftScale && hasValidXScale;
+  const canRenderGridRows = Boolean(isHorizontal ? leftScale : xScale);
+  const canRenderGridColumns = Boolean(isHorizontal ? xScale : leftScale);
 
   return (
     <svg
@@ -65,7 +70,7 @@ const ChartSvgWrapper = ({
         })}
         top={margin.top}
       >
-        {showGridLines && (
+        {showGridLines && (canRenderGridRows || canRenderGridColumns) && (
           <Grids
             gridLinesType={gridLinesType}
             height={graphHeight - margin.top}
@@ -74,21 +79,23 @@ const ChartSvgWrapper = ({
             xScale={isHorizontal ? xScale : leftScale}
           />
         )}
-        <Axes
-          allUnits={allUnits}
-          data={{
-            baseAxis: base,
-            lines: displayedLines,
-            timeSeries,
-            ...axis
-          }}
-          height={graphHeight}
-          leftScale={leftScale}
-          orientation={orientation}
-          rightScale={rightScale}
-          width={graphWidth}
-          xScale={xScale}
-        />
+        {canRenderAxes && (
+          <Axes
+            allUnits={allUnits}
+            data={{
+              baseAxis: base,
+              lines: displayedLines,
+              timeSeries,
+              ...axis
+            }}
+            height={graphHeight}
+            leftScale={leftScale}
+            orientation={orientation}
+            rightScale={rightScale}
+            width={graphWidth}
+            xScale={xScale}
+          />
+        )}
         {children}
       </Group.Group>
     </svg>

package/src/Graph/common/Error/NoData.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material';
+
+import { useTranslation } from 'react-i18next';
+
+import { labelNoDataForThisPeriod } from '../../Chart/translatedLabels';
+
+const NoData = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={'flex items-center justify-center h-full'}>
+      <Typography align="center" variant="body1">
+        {t(labelNoDataForThisPeriod)}
+      </Typography>
+    </div>
+  );
+};
+
+export default NoData;

package/src/Graph/common/Grids/index.tsx

@@ -8,9 +8,9 @@ import { ChartAxis } from '../../Chart/models';
 
 interface Props extends Pick<ChartAxis, 'gridLinesType'> {
   height: number;
-  leftScale: ScaleLinear<number, number>;
+  leftScale?: ScaleLinear<number, number>;
   width: number;
-  xScale: ScaleLinear<number, number>;
+  xScale?: ScaleLinear<number, number>;
 }
 
 const Grids = ({
@@ -31,10 +31,10 @@ const Grids = ({
 
   return (
     <g>
-      {displayRows && (
+      {displayRows && leftScale && (
         <Grid.GridRows height={height} scale={leftScale} width={width} />
       )}
-      {displayColumns && (
+      {displayColumns && xScale && (
         <Grid.GridColumns height={height} scale={xScale} width={width} />
       )}
     </g>

package/src/Graph/common/timeSeries/index.test.ts

@@ -185,7 +185,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'black',
           display: true,
-          displayAs: undefined,
           filled: false,
           highlight: undefined,
           invert: null,
@@ -196,7 +195,6 @@ describe('timeSeries', () => {
           metric_id: 1,
           minimum_value: 0.5,
           name: 'Round-Trip-Time Average (ms)',
-          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -206,7 +204,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'blue',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -217,7 +214,6 @@ describe('timeSeries', () => {
           metric_id: 2,
           minimum_value: 0.5,
           name: 'Time (ms)',
-          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: 'ms'
@@ -227,7 +223,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -238,7 +233,6 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
-          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -248,7 +242,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -259,7 +252,6 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
-          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -269,7 +261,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -280,7 +271,6 @@ describe('timeSeries', () => {
           metric_id: 5,
           minimum_value: 0.5,
           name: 'Packet Loss (%)',
-          stackKey: null,
           stackOrder: null,
           transparency: 80,
           unit: '%'
@@ -341,7 +331,6 @@ describe('timeSeries', () => {
         average_value: 1,
         color: 'black',
         display: true,
-        displayAs: undefined,
         filled: false,
         highlight: undefined,
         invert: null,
@@ -352,7 +341,6 @@ describe('timeSeries', () => {
         metric_id: 1,
         minimum_value: 0.5,
         name: 'Round-Trip-Time Average (ms)',
-        stackKey: null,
         stackOrder: null,
         transparency: 80,
         unit: 'ms'
@@ -374,10 +362,10 @@ describe('timeSeries', () => {
   describe(formatMetricValue, () => {
     const cases: Array<TestCase> = [
       [218857269, '', 1000, '218.86m'],
-      [218857269, '', 1024, '208.72 M'],
+      [218857269, '', 1024, '208.72 Mi'],
       [0.12232323445, '', 1000, '0.12'],
-      [1024, 'B', 1000, '1 KB'],
-      [1024, 'B', 1024, '1 KB'],
+      [1024, 'B', 1000, '1 KiB'],
+      [1024, 'B', 1024, '1 KiB'],
       [null, 'B', 1024, null]
     ];
 
@@ -401,7 +389,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -412,7 +399,6 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
-          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -422,7 +408,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -433,7 +418,6 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
-          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -491,7 +475,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'yellow',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: '1',
@@ -502,7 +485,6 @@ describe('timeSeries', () => {
           metric_id: 4,
           minimum_value: 0.5,
           name: 'Duration (ms)',
-          stackKey: null,
           stackOrder: 1,
           transparency: 80,
           unit: 'ms'
@@ -521,7 +503,6 @@ describe('timeSeries', () => {
           average_value: 1,
           color: 'red',
           display: true,
-          displayAs: undefined,
           filled: true,
           highlight: undefined,
           invert: null,
@@ -532,7 +513,6 @@ describe('timeSeries', () => {
           metric_id: 3,
           minimum_value: 0.5,
           name: 'Average duration (ms)',
-          stackKey: null,
           stackOrder: 2,
           transparency: 80,
           unit: 'ms'
@@ -573,7 +553,7 @@ describe('Format value with unit', () => {
       return '324.23m';
     }
 
-    return `309.21 M${unit}`;
+    return `309.21 Mi${unit}`;
   };
 
   const humanReadableTestCases = units.map((unit) => {