@centreon/ui 23.10.122 → 24.4.0

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';
@@ -179,7 +181,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 +205,18 @@ const getLineForMetric = ({
   lines,
   metric_id
 }: LineForMetricProps): Line | undefined =>
-  find(propEq('metric_id', metric_id), lines);
+  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>;
@@ -275,7 +288,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 +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

@@ -1,3 +1,4 @@
+import numeral from 'numeral';
 import {
   T,
   always,
@@ -6,13 +7,14 @@ import {
   gt,
   gte,
   head,
+  last,
   length,
   lt,
   lte,
   pluck
 } from 'ramda';
 
-import { Theme } from '@mui/material';
+import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
 import { Thresholds } from './models';
 
@@ -73,3 +75,69 @@ 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)}%`;
+};
+
+interface NormalizeLevelProps {
+  factor: number;
+  level: number;
+}
+
+const normalizeLevel = ({ level, factor }: NormalizeLevelProps): number =>
+  (level * factor) / 10;
+
+interface EmphasizeCurveColorProps {
+  color: string;
+  index: number;
+}
+
+export const emphasizeCurveColor = ({
+  color,
+  index
+}: EmphasizeCurveColorProps): string => {
+  const totalLevels = 5;
+  const levels = [...Array(totalLevels).keys()];
+  const factor = 10 / totalLevels;
+
+  if (gte(getLuminance(color), 0.5)) {
+    if (gte(index, totalLevels * 2)) {
+      return darken(color, normalizeLevel({ factor, level: last(levels) }));
+    }
+    if (gte(index, totalLevels)) {
+      return darken(
+        color,
+        normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
+      );
+    }
+
+    return lighten(color, normalizeLevel({ factor, level: levels[index] }));
+  }
+
+  if (gte(index, totalLevels * 2)) {
+    return lighten(color, normalizeLevel({ factor, level: last(levels) }));
+  }
+  if (gte(index, totalLevels)) {
+    return lighten(
+      color,
+      normalizeLevel({ factor, level: levels[totalLevels + 1 - index] })
+    );
+  }
+
+  return darken(color, normalizeLevel({ factor, level: levels[index] }));
+};

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/Icon/BaseIcon.tsx

@@ -0,0 +1,32 @@
+import { has } from 'ramda';
+
+import { SvgIcon, SvgIconProps, SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+interface Props extends SvgIconProps {
+  Icon: JSX.Element | OverridableComponent<SvgIconTypeMap>;
+  dataTestId?: string;
+}
+
+const BaseIcon = ({ Icon, dataTestId, ...props }: Props): JSX.Element => {
+  if (!has('key', Icon)) {
+    const Component = Icon as (props: SvgIconProps) => JSX.Element;
+
+    return (
+      <SvgIcon
+        data-testid={dataTestId || (Icon as () => JSX.Element).name}
+        {...props}
+      >
+        <Component />
+      </SvgIcon>
+    );
+  }
+
+  return (
+    <SvgIcon data-testid={dataTestId} {...props}>
+      {Icon as JSX.Element}
+    </SvgIcon>
+  );
+};
+
+export default BaseIcon;

package/src/Icon/DowntimeIcon.tsx

@@ -0,0 +1,14 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M7.6215 5.243C7.9422 5.243 8.2557 5.1479 8.52236 4.96972C8.78901 4.79155 8.99685 4.53831 9.11958 4.24202C9.2423 3.94573 9.27441 3.6197 9.21185 3.30516C9.14928 2.99062 8.99485 2.70169 8.76808 2.47492C8.54131 2.24815 8.25238 2.09372 7.93784 2.03116C7.6233 1.96859 7.29727 2.0007 7.00098 2.12343C6.70469 2.24616 6.45145 2.45399 6.27327 2.72065C6.0951 2.9873 6 3.30079 6 3.6215C6 4.05155 6.17084 4.46398 6.47493 4.76807C6.77902 5.07216 7.19145 5.243 7.6215 5.243Z" />
+    <path d="M17.8192 12.3739C17.743 12.1905 17.6143 12.0338 17.4492 11.9235C17.2841 11.8132 17.0901 11.7541 16.8915 11.7538C16.8915 11.7538 14.9107 11.4903 14.3232 11.8736C14.0659 12.083 13.8556 12.3442 13.706 12.6403L10.396 12.1161C10.142 11.2785 9.05429 8.10738 9.05429 8.10738L8.24354 6.81076C8.09994 6.57117 7.89855 6.37142 7.6578 6.22979C7.41705 6.08815 7.14463 6.00914 6.86545 6C6.64749 6.01064 6.43062 6.03754 6.21666 6.0805L2 7.86971V11.68H2.23096L4.36037 12.0174L2.81746 19.7866H4.52041L5.979 13.3006L7.68196 14.9221V19.7866H9.30345V13.706L8.16304 12.6183L13.3649 13.4415L10.4094 19.9725L20.928 19.8671L17.8192 12.3739ZM8.03845 9.87167C8.03845 9.87167 8.59142 11.1712 8.88179 11.8736L7.67525 11.682L8.03845 9.87167ZM3.62437 11.0408V8.921L5.08295 8.35368L4.52137 11.1827L3.62437 11.0408Z" />
+  </g>
+);
+
+export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon {...props} Icon={icon} height="24" viewBox="0 0 24 24" width="24" />
+);

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();
+  });
+});

package/src/InputField/Number/Number.stories.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable no-console */
+import { Meta, StoryObj } from '@storybook/react';
+
+import NumberField from './Number';
+
+const meta: Meta<typeof NumberField> = {
+  argTypes: {
+    defaultValue: {
+      defaultValue: 0,
+      description:
+        'The initial value which will be used by the input for the first render',
+      type: 'number'
+    },
+    fallbackValue: {
+      defaultValue: 0,
+      description: 'This value will be used when the input is cleared',
+      type: 'number'
+    },
+    onChange: {
+      description:
+        'The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out',
+      type: 'function'
+    }
+  },
+  component: NumberField
+};
+
+export default meta;
+type Story = StoryObj<typeof NumberField>;
+
+export const Default: Story = {
+  args: {
+    onChange: console.log
+  }
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    defaultValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValue: Story = {
+  args: {
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValue: Story = {
+  args: {
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};
+
+export const WithFallbackValueAndDefaultValueAutoSize: Story = {
+  args: {
+    autoSize: true,
+    defaultValue: 10,
+    fallbackValue: 25,
+    onChange: console.log
+  }
+};

package/src/InputField/Number/Number.tsx

@@ -0,0 +1,74 @@
+import { ChangeEvent, useState } from 'react';
+
+import { T, always, cond, isEmpty, isNil } from 'ramda';
+
+import TextField, { TextProps } from '../Text';
+
+export interface NumberProps
+  extends Omit<TextProps, 'defaultValue' | 'onChange'> {
+  /**
+   * The initial value which will be used by the input for the first render
+   */
+  defaultValue?: number;
+  /**
+   *  This value will be used when the input is cleared
+   */
+  fallbackValue?: number;
+  /**
+   * The change function with the actual value as parameter. This parameter will be the value when the input is filled but it will be the fallbackValue when the input is cleared out
+   */
+  onChange: (actualValue: number) => void;
+}
+
+const NumberField = ({
+  fallbackValue = 0,
+  defaultValue,
+  onChange,
+  ...props
+}: NumberProps): JSX.Element => {
+  const [placeholder, setPlaceholder] = useState<string | undefined>();
+  const [actualValue, setActualValue] = useState(
+    defaultValue ? `${defaultValue}` : ''
+  );
+
+  const { inputProps } = props;
+
+  const changeValue = (event: ChangeEvent<HTMLInputElement>): void => {
+    const inputValue = event.target.value;
+
+    const number = Number(inputValue);
+    const campledNumber = cond([
+      [() => isEmpty(inputValue), always(fallbackValue)],
+      [() => Number.isNaN(number), always(number)],
+      [
+        T,
+        always(
+          Math.max(
+            !isNil(inputProps?.min) ? inputProps?.min : -Infinity,
+            number
+          )
+        )
+      ]
+    ])();
+
+    onChange(campledNumber);
+    setPlaceholder(isEmpty(inputValue) ? `${fallbackValue}` : undefined);
+    setActualValue(isEmpty(inputValue) ? inputValue : `${campledNumber}`);
+  };
+
+  return (
+    <TextField
+      defaultValue={defaultValue}
+      type="number"
+      value={actualValue}
+      onChange={changeValue}
+      {...props}
+      inputProps={inputProps}
+      placeholder={
+        placeholder || (!defaultValue ? `${fallbackValue}` : undefined)
+      }
+    />
+  );
+};
+
+export default NumberField;

package/src/InputField/Search/index.tsx

@@ -1,8 +1,8 @@
 import IconSearch from '@mui/icons-material/Search';
 
-import TextField, { Props as TextFieldProps } from '../Text';
+import TextField, { TextProps } from '../Text';
 
-type Props = Omit<TextFieldProps, 'StartAdornment'>;
+type Props = Omit<TextProps, 'StartAdornment'>;
 
 const SearchAdornment = (): JSX.Element => <IconSearch />;
 

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

@@ -13,10 +13,12 @@ import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
 import MultiConnectedAutocompleteField from '.';
 
-const renderMultiAutocompleteField = (): RenderResult =>
+const renderMultiAutocompleteField = (customRenderTags?): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
+        baseEndpoint=""
+        customRenderTags={customRenderTags}
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}
@@ -41,4 +43,23 @@ describe(MultiConnectedAutocompleteField, () => {
       expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
     });
   });
+
+  it('display tags when customTagsRender is defined', async () => {
+    const customRender = (tags: React.ReactNode): React.ReactNode => (
+      <div data-testid="custom-tags-wrapper">{tags}</div>
+    );
+
+    const { getByLabelText, getByTestId } =
+      renderMultiAutocompleteField(customRender);
+
+    fireEvent.click(getByLabelText('Open'));
+
+    await waitFor(() => {
+      const tagChip = getByTestId(
+        `tag-option-chip-${optionsData.result[0].id}`
+      );
+      expect(tagChip).toBeVisible();
+      expect(tagChip).toHaveTextContent(optionsData.result[0].name);
+    });
+  });
 });

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

@@ -45,6 +45,7 @@ const renderSingleConnectedAutocompleteField = (
   render(
     <TestQueryProvider>
       <SingleConnectedAutocompleteField
+        baseEndpoint=""
         field="host.name"
         getEndpoint={getEndpoint}
         label={label}
@@ -94,8 +95,8 @@ describe(SingleConnectedAutocompleteField, () => {
     });
 
     await waitFor(() => {
-      expect(getFetchCall(2)).toEqual(
-        `${baseEndpoint}?page=1&search=%7B%22%24and%22%3A%5B%7B%22%24or%22%3A%5B%7B%22host.name%22%3A%7B%22%24lk%22%3A%22%25My%20Option%202%25%22%7D%7D%5D%7D%5D%7D`
+      expect(decodeURIComponent(getFetchCall(2))).toEqual(
+        'endpoint?page=1&search={"$and":[{"$and":[{"host.name":{"$lk":"%My Option 2%"}}]}]}'
       );
     });
   });