@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-test-code-coverage.1

package/src/Graph/Tree/stories/datas.ts

@@ -0,0 +1,305 @@
+import { Node } from '../models';
+
+export interface SimpleData {
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export interface ComplexData {
+  count?: number;
+  id: number;
+  name: string;
+  status: 'critical' | 'warning' | 'ok';
+}
+
+export const simpleData: Node<SimpleData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'A1', status: 'ok' } },
+        { data: { id: 3, name: 'A2', status: 'ok' } },
+        { data: { id: 4, name: 'A3', status: 'critical' } },
+        {
+          children: [
+            {
+              data: { id: 10, name: 'C1', status: 'warning' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 11, name: 'D1', status: 'ok' }
+                },
+                {
+                  data: { id: 12, name: 'D2', status: 'ok' }
+                },
+                {
+                  data: { id: 13, name: 'D3', status: 'ok' }
+                }
+              ],
+              data: { id: 14, name: 'D', status: 'ok' }
+            },
+            {
+              children: [
+                {
+                  data: { id: 21, name: 'E1', status: 'critical' }
+                }
+              ],
+              data: { id: 20, name: 'E', status: 'critical' }
+            }
+          ],
+          data: { id: 3, name: 'C', status: 'critical' }
+        }
+      ],
+      data: { id: 6273286320, name: 'A', status: 'critical' }
+    },
+    { data: { id: 1, name: 'Z', status: 'ok' } },
+    {
+      children: [{ data: { id: 50, name: 'B1', status: 'warning' } }],
+      data: { id: 2, name: 'B', status: 'warning' }
+    }
+  ],
+  data: {
+    id: 0,
+    name: 'T',
+    status: 'critical'
+  }
+};
+
+export const complexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        { data: { id: 6, name: 'Indicator 2', status: 'ok' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 2', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 4', status: 'ok' }
+        }
+      ],
+      data: { count: 2, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};
+
+export const moreComplexData: Node<ComplexData> = {
+  children: [
+    {
+      children: [
+        { data: { id: 2, name: 'Indicator 1', status: 'critical' } },
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 6, name: 'Indicator 6', status: 'critical' } },
+                { data: { id: 7, name: 'Indicator 7', status: 'ok' } }
+              ],
+              data: { count: 2, id: 0, name: 'critical', status: 'critical' }
+            },
+            {
+              children: [
+                {
+                  children: [
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 8,
+                            name: 'Indicator 8',
+                            status: 'warning'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 4,
+                        name: 'warning',
+                        status: 'warning'
+                      }
+                    },
+                    {
+                      children: [
+                        {
+                          data: {
+                            id: 10,
+                            name: 'Indicator 10',
+                            status: 'ok'
+                          }
+                        }
+                      ],
+                      data: {
+                        count: 1,
+                        id: 0,
+                        name: 'ok',
+                        status: 'ok'
+                      }
+                    }
+                  ],
+                  data: {
+                    id: 6,
+                    name: 'BA 3',
+                    status: 'warning'
+                  }
+                }
+              ],
+              data: {
+                count: 1,
+                id: 4,
+                name: 'warning',
+                status: 'warning'
+              }
+            },
+            {
+              children: [
+                { data: { id: 9, name: 'Indicator 9', status: 'ok' } }
+              ],
+              data: { count: 1, id: 0, name: 'ok', status: 'ok' }
+            }
+          ],
+          data: { id: 3, name: 'BA 2', status: 'critical' }
+        }
+      ],
+      data: { count: 2, id: 6, name: 'critical', status: 'critical' }
+    },
+    {
+      children: [
+        { data: { id: 4, name: 'Indicator 4', status: 'warning' } },
+        { data: { id: 5, name: 'Indicator 5', status: 'warning' } }
+      ],
+      data: { count: 2, id: 4, name: 'warning', status: 'warning' }
+    },
+    {
+      children: [
+        {
+          children: [
+            {
+              children: [
+                { data: { id: 11, name: 'Indicator 11', status: 'ok' } }
+              ],
+              data: {
+                count: 1,
+                name: 'ok',
+                status: 'ok'
+              }
+            }
+          ],
+          data: { id: 0, name: 'BA 3', status: 'ok' }
+        },
+        { data: { id: 30, name: 'Indicator 30', status: 'ok' } },
+        { data: { id: 31, name: 'Indicator 31', status: 'ok' } },
+        { data: { id: 32, name: 'Indicator 32', status: 'ok' } },
+        { data: { id: 33, name: 'Indicator 33', status: 'ok' } },
+        { data: { id: 34, name: 'Indicator 34', status: 'ok' } },
+        { data: { id: 35, name: 'Indicator 35', status: 'ok' } },
+        { data: { id: 36, name: 'Indicator 36', status: 'ok' } },
+        { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
+        { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
+      ],
+      data: { count: 9, id: 0, name: 'ok', status: 'ok' }
+    }
+  ],
+  data: {
+    id: 1,
+    name: 'BA 1',
+    status: 'critical'
+  }
+};

package/src/Graph/Tree/utils.ts

@@ -0,0 +1,49 @@
+import { equals, omit } from 'ramda';
+
+import { BaseProp, Node } from './models';
+
+interface UpdateNodeFromTreeProps<TData> {
+  callback: (tree: Node<TData>) => Partial<Node<TData>>;
+  targetNode: Node<TData>;
+  tree: Node<TData>;
+}
+
+export const updateNodeFromTree = <TData extends BaseProp>({
+  tree,
+  targetNode,
+  callback
+}: UpdateNodeFromTreeProps<TData>): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  if (
+    equals(tree.data, targetNode.data) &&
+    equals(tree.children, targetNode.children)
+  ) {
+    return {
+      ...tree,
+      ...callback(tree)
+    };
+  }
+
+  return {
+    ...tree,
+    children: tree.children?.map((child) =>
+      updateNodeFromTree({ callback, targetNode, tree: child })
+    )
+  };
+};
+
+export const cleanUpTree = <TData extends BaseProp>(
+  tree: Node<TData>
+): Node<TData> => {
+  if (!tree.children) {
+    return tree;
+  }
+
+  return {
+    ...omit(['isExpanded'], tree),
+    children: tree.children?.map((child) => cleanUpTree(child))
+  };
+};

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

@@ -31,7 +31,9 @@ import {
   last,
   cond,
   always,
-  T
+  T,
+  includes,
+  split
 } from 'ramda';
 
 import { margin } from '../../LineChart/common';
@@ -205,6 +207,17 @@ const getLineForMetric = ({
 }: LineForMetricProps): Line | undefined =>
   find(propEq(metric_id, 'metric_id'), lines);
 
+interface LinesForMetricsProps {
+  lines: Array<Line>;
+  metricIds: Array<number>;
+}
+
+export const getLinesForMetrics = ({
+  lines,
+  metricIds
+}: LinesForMetricsProps): Array<Line> =>
+  filter(({ metric_id }) => metricIds.includes(metric_id), lines);
+
 interface LinesTimeSeries {
   lines: Array<Line>;
   timeSeries: Array<TimeValue>;
@@ -476,15 +489,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 +502,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 +542,8 @@ const formatMetricValueWithUnit = ({
     return null;
   }
 
+  const base1024 = getBase1024({ base, unit });
+
   if (isRaw) {
     const unitText = equals('%', unit) ? unit : ` ${unit}`;
 
@@ -537,7 +556,9 @@ const formatMetricValueWithUnit = ({
 
   const formattedMetricValue = formatMetricValue({ base, unit, value });
 
-  return formattedMetricValue;
+  return base1024 || !unit || equals(unit, 'ms')
+    ? formattedMetricValue
+    : `${formattedMetricValue} ${unit}`;
 };
 
 const getStackedYScale = ({
@@ -593,6 +614,23 @@ const getMetricWithLatestData = (
   };
 };
 
+interface FormatMetricNameProps {
+  legend: string | null;
+  name: string;
+}
+
+export const formatMetricName = ({
+  legend,
+  name
+}: FormatMetricNameProps): string => {
+  const legendName = legend || name;
+  const metricName = includes('#', legendName)
+    ? split('#')(legendName)[1]
+    : legendName;
+
+  return metricName;
+};
+
 export {
   getTimeSeries,
   getLineData,

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,8 @@ 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';
+export * from './Tree';

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -0,0 +1,85 @@
+import NumberField, { NumberProps } from './Number';
+
+const initialize = (props: NumberProps): void => {
+  cy.mount({
+    Component: <NumberField {...props} />
+  });
+};
+
+describe('Number field', () => {
+  it('displays the placeholder when the field has no default or fallback values', () => {
+    initialize({ dataTestId: 'test', onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '0');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value as placeholder when the field as no default value', () => {
+    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default value as placeholder when the field as default value', () => {
+    initialize({ dataTestId: 'test', defaultValue: 25, onChange: cy.stub() });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the fallback value when the field is cleared out', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      fallbackValue: 10,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+    cy.get('input').clear();
+    cy.get('input').should('have.value', '');
+    cy.get('input').should('have.attr', 'placeholder', '10');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the field using auto size', () => {
+    initialize({
+      autoSize: true,
+      dataTestId: 'test',
+      defaultValue: 25,
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').type('0');
+
+    cy.makeSnapshot();
+  });
+
+  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', () => {
+    initialize({
+      dataTestId: 'test',
+      defaultValue: 25,
+      inputProps: {
+        min: 2
+      },
+      onChange: cy.stub()
+    });
+
+    cy.get('input').should('have.value', '25');
+
+    cy.get('input').clear().type('-1');
+
+    cy.get('input').should('have.value', '2');
+
+    cy.makeSnapshot();
+  });
+});