@centreon/ui 24.4.59 → 24.4.61

package/src/Graph/SingleBar/SingleBar.cypress.spec.tsx

@@ -0,0 +1,121 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import SingleBar from './SingleBar';
+import { SingleBarProps } from './models';
+
+const initialize = (
+  args: Omit<SingleBarProps, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <SingleBar
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Single bar', () => {
+  it('displays the single bar as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(136, 185, 34)');
+    cy.findByTestId('warning-line-0.5').should('be.visible');
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-1.5').should('be.visible');
+    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the single bar as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(253, 155, 39)');
+    cy.findByTestId('warning-line-0.4').should('be.visible');
+    cy.findByTestId('warning-line-0.4-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-1.5').should('be.visible');
+    cy.findByTestId('critical-line-1.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the single bar as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'fill', 'rgb(255, 74, 74)');
+    cy.findByTestId('warning-line-0.2').should('be.visible');
+    cy.findByTestId('warning-line-0.2-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.3').should('be.visible');
+    cy.findByTestId('critical-line-0.3-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.findByTestId('warning-line-0.13').should('be.visible');
+    cy.findByTestId('warning-line-0.13-tooltip').should('be.visible');
+    cy.findByTestId('warning-line-0.5').should('be.visible');
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.55').should('be.visible');
+    cy.findByTestId('critical-line-0.55-tooltip').should('be.visible');
+    cy.findByTestId('critical-line-0.65').should('be.visible');
+    cy.findByTestId('critical-line-0.65-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the threshold tooltip when a threshold is hovered', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.findByTestId('warning-line-0.5-tooltip').trigger('mouseover');
+
+    cy.contains('Warning').should('be.visible');
+
+    cy.findByTestId('critical-line-1.5-tooltip').trigger('mouseover');
+
+    cy.contains('Critical').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays single bar as small when the props is set', () => {
+    initialize({ size: 'small', thresholds: successThresholds });
+
+    cy.findByTestId('warning-line-0.5-tooltip').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the value when the prop is set', () => {
+    initialize({ showLabels: false, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,4 +1,4 @@
-import { Thresholds } from '../common/models';
+import { Thresholds as ThresholdsModel } from '../common/models';
 
 import { ThresholdLine } from './ThresholdLine';
 
@@ -8,7 +8,7 @@ interface Props {
   hideTooltip: () => void;
   showTooltip: (args) => void;
   size: 'small' | 'medium';
-  thresholds: Thresholds;
+  thresholds: ThresholdsModel;
   xScale: (value: number) => number;
 }
 

package/src/Graph/Text/Text.cypress.spec.tsx

@@ -0,0 +1,101 @@
+import dataLastWeek from '../LineChart/mockedData/lastWeek.json';
+import {
+  criticalThresholds,
+  rangedThresholds,
+  successThresholds,
+  warningThresholds
+} from '../common/testUtils';
+
+import { Text, Props } from './Text';
+
+const initialize = (
+  args: Omit<Props, 'data' | 'labels' | 'baseColor'>
+): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '100vh', width: '100vw' }}>
+        <Text
+          baseColor="#000"
+          data={dataLastWeek}
+          labels={{
+            critical: 'Critical',
+            warning: 'Warning'
+          }}
+          {...args}
+        />
+      </div>
+    )
+  });
+};
+
+describe('Text', () => {
+  it('displays the text as success when corresponding thresholds are set', () => {
+    initialize({ thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(136, 185, 34)');
+    cy.contains('Warning: 0.5 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as warning when corresponding thresholds are set', () => {
+    initialize({ thresholds: warningThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(253, 155, 39)');
+    cy.contains('Warning: 0.4 s').should('be.visible');
+    cy.contains('Critical: 1.5 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the text as critical when corresponding thresholds are set', () => {
+    initialize({ thresholds: criticalThresholds });
+
+    cy.contains('0.41 s').should('have.css', 'color', 'rgb(255, 74, 74)');
+    cy.contains('Warning: 0.2 s').should('be.visible');
+    cy.contains('Critical: 0.3 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays ranged thresholds', () => {
+    initialize({ thresholds: rangedThresholds });
+
+    cy.contains('Warning: 0.13 s - 0.5 s').should('be.visible');
+    cy.contains('Critical: 0.55 s - 0.65 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the value as raw when the prop is set', () => {
+    initialize({ displayAsRaw: true, thresholds: successThresholds });
+
+    cy.contains('0.40663333333 s').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the text', () => {
+    initialize({ data: undefined, thresholds: successThresholds });
+
+    cy.contains('0.41 s').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays text with default values when the data is empty', () => {
+    initialize({
+      data: {
+        global: {},
+        metrics: [],
+        times: []
+      },
+      thresholds: successThresholds
+    });
+
+    cy.contains('0').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/Text/Text.stories.tsx

@@ -24,7 +24,21 @@ export const success: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -36,7 +50,21 @@ export const warning: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.2, 0.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.4
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -48,7 +76,21 @@ export const critical: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.13, 0.35]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 0.3
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.2
+        }
+      ]
+    }
   },
   render: Template
 };
@@ -61,7 +103,21 @@ export const rawValue: Story = {
       critical: 'Critical',
       warning: 'Warning'
     },
-    thresholds: [0.5, 1.5]
+    thresholds: {
+      critical: [
+        {
+          label: 'Critical',
+          value: 1.5
+        }
+      ],
+      enabled: true,
+      warning: [
+        {
+          label: 'Warning',
+          value: 0.5
+        }
+      ]
+    }
   },
   render: Template
 };

package/src/Graph/Text/Text.tsx

@@ -11,7 +11,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 
 import { useTextStyles } from './Text.styles';
 
-interface Props {
+export interface Props {
   baseColor?: string;
   data?: LineChartData;
   displayAsRaw?: boolean;

package/src/Graph/common/testUtils.ts

@@ -0,0 +1,71 @@
+export const successThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};
+
+export const warningThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 1.5
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.4
+    }
+  ]
+};
+
+export const criticalThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.3
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.2
+    }
+  ]
+};
+
+export const rangedThresholds = {
+  critical: [
+    {
+      label: 'Critical',
+      value: 0.55
+    },
+    {
+      label: 'Critical',
+      value: 0.65
+    }
+  ],
+  enabled: true,
+  warning: [
+    {
+      label: 'Warning',
+      value: 0.13
+    },
+    {
+      label: 'Warning',
+      value: 0.5
+    }
+  ]
+};

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

@@ -179,7 +179,7 @@ const getMetricValuesForUnit = ({
     ) as Array<number>;
 
   return pipe(
-    filter(propEq('unit', unit)) as (line) => Array<Line>,
+    filter(propEq(unit, 'unit')) as (line) => Array<Line>,
     map(prop('metric_id')),
     map(getTimeSeriesValuesForMetric),
     flatten,
@@ -203,7 +203,7 @@ const getLineForMetric = ({
   lines,
   metric_id
 }: LineForMetricProps): Line | undefined =>
-  find(propEq('metric_id', metric_id), lines);
+  find(propEq(metric_id, 'metric_id'), lines);
 
 interface LinesTimeSeries {
   lines: Array<Line>;
@@ -275,7 +275,7 @@ interface HasStackedLines {
 }
 
 const hasUnitStackedLines = ({ lines, unit }: HasStackedLines): boolean =>
-  pipe(getSortedStackedLines, any(propEq('unit', unit)))(lines);
+  pipe(getSortedStackedLines, any(propEq(unit, 'unit')))(lines);
 
 const getTimeSeriesForLines = ({
   lines,
@@ -476,15 +476,7 @@ const registerMsUnitToNumeral = (): null => {
 
 registerMsUnitToNumeral();
 
-const formatMetricValue = ({
-  value,
-  unit,
-  base = 1000
-}: FormatMetricValueProps): string | null => {
-  if (isNil(value)) {
-    return null;
-  }
-
+const getBase1024 = ({ unit, base }): boolean => {
   const base2Units = [
     'B',
     'bytes',
@@ -497,7 +489,19 @@ const formatMetricValue = ({
     'b'
   ];
 
-  const base1024 = base2Units.includes(unit) || Number(base) === 1024;
+  return base2Units.includes(unit) || Number(base) === 1024;
+};
+
+const formatMetricValue = ({
+  value,
+  unit,
+  base = 1000
+}: FormatMetricValueProps): string | null => {
+  if (isNil(value)) {
+    return null;
+  }
+
+  const base1024 = getBase1024({ base, unit });
 
   const formatSuffix = cond([
     [equals('ms'), always(' ms')],
@@ -525,6 +529,8 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
+  const base1024 = getBase1024({ base, unit });
+
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -537,7 +543,9 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return formattedMetricValue;
+  return base1024 || !unit || equals(unit, 'ms')
+    ? formattedMetricValue
+    : `${formattedMetricValue} ${unit}`;
 };
 
 const getStackedYScale = ({

package/src/Graph/common/utils.ts

@@ -11,6 +11,7 @@ import {
   lte,
   pluck
 } from 'ramda';
+import numeral from 'numeral';
 
 import { Theme } from '@mui/material';
 
@@ -73,3 +74,21 @@ export const getColorFromDataAndTresholds = ({
     [T, always(theme.palette.error.main)]
   ])(data);
 };
+
+interface ValueByUnitProps {
+  total: number;
+  unit: 'percentage' | 'number';
+  value: number;
+}
+
+export const getValueByUnit = ({
+  unit,
+  value,
+  total
+}: ValueByUnitProps): string => {
+  if (equals(unit, 'number')) {
+    return numeral(value).format('0a').toUpperCase();
+  }
+
+  return `${((value * 100) / total).toFixed(1)}%`;
+};

package/src/Graph/index.ts

@@ -2,4 +2,7 @@ export { default as LineChart } from './LineChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+
 export { HeatMap } from './HeatMap';
+export { BarStack } from './BarStack';
+export { PieChart } from './PieChart';

package/src/Graph/translatedLabels.ts

@@ -0,0 +1 @@
+export const labelNoDataFound = 'No Data Available';

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -292,13 +292,16 @@ const ConnectedAutocompleteField = (
       }
     }, [optionsOpen]);
 
-    useEffect(() => {
-      setSearchParameter(
-        !isEmpty(searchConditions)
-          ? { conditions: searchConditions }
-          : undefined
-      );
-    }, useDeepCompare([searchConditions]));
+    useEffect(
+      () => {
+        setSearchParameter(
+          !isEmpty(searchConditions)
+            ? { conditions: searchConditions }
+            : undefined
+        );
+      },
+      useDeepCompare([searchConditions])
+    );
 
     useEffect(() => {
       if (!autocompleteChangedValue && !props?.value) {

package/src/InputField/Select/Autocomplete/Draggable/SortableList.tsx

@@ -49,7 +49,7 @@ const SortableList = ({
   const dragEnd = ({ items: newItems }): void =>
     changeItemsOrder(
       map(
-        (item) => find(propEq('id', item), items),
+        (item) => find(propEq(item, 'id'), items),
         newItems
       ) as Array<DraggableSelectEntry>
     );

package/src/InputField/Select/Autocomplete/Draggable/SortableListContent.tsx

@@ -49,7 +49,7 @@ const SortableListContent = ({
         return;
       }
 
-      const itemIndex = findIndex(propEq('id', id), items);
+      const itemIndex = findIndex(propEq(id, 'id'), items);
 
       itemHover?.(null);
       itemClick?.({ index: itemIndex, item: { createOption, id, name } });

package/src/InputField/Select/Autocomplete/Draggable/index.tsx

@@ -77,7 +77,7 @@ const DraggableAutocomplete = (
     const deleteValue = (id): void => {
       itemHover?.(null);
       setSelectedValues((values: Array<DraggableSelectEntry>) => {
-        const index = findIndex(propEq('id', id), values);
+        const index = findIndex(propEq(id, 'id'), values);
 
         const newSelectedValues = remove(index, 1, values);
 

package/src/InputField/Select/Autocomplete/Multi/index.tsx

@@ -1,4 +1,4 @@
-import { includes, map, prop, reject } from 'ramda';
+import { includes, map, prop, reject, sortBy, toLower, compose } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import { Chip, ChipProps, Tooltip } from '@mui/material';
@@ -85,9 +85,11 @@ const MultiAutocompleteField = ({
     return includes(id, valueIds);
   };
 
+  const sortByName = sortBy(compose(toLower, prop(optionProperty)));
+
   const autocompleteOptions = disableSortedOptions
     ? options
-    : [...values, ...reject(isOptionSelected, options)];
+    : sortByName([...values, ...reject(isOptionSelected, options)]);
 
   return (
     <Autocomplete