@centreon/ui 24.4.72 → 24.4.74

package/src/Graph/LineChart/mockedData/curvesWithSameColor.json

@@ -0,0 +1,252 @@
+{
+  "global": {
+    "title": "oracle-buffer-hit-ratio graph on srv-oracle-users",
+    "start": "2023-06-18T17:04:46+02:00",
+    "end": "2023-06-19T17:04:46+02:00",
+    "vertical-label": "Value",
+    "base": 1000,
+    "width": 550,
+    "height": 140,
+    "scaled": 0,
+    "multiple_services": false
+  },
+  "metrics": [
+    {
+      "metric_id": 1,
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE"
+      },
+      "legend": "Centreon-Server: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        0.040219730942,
+        0.03038,
+        0.02108,
+        null
+      ],
+      "last_value": 0.02,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.03
+    },
+    {
+      "metric_id": 21,
+      "metric": "Centreon-Server_1: rta",
+      "metric_legend": "Centreon-Server_1: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE"
+      },
+      "legend": "Centreon-Server_1: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        0.046261744966,
+        0.033813333333,
+        null
+      ],
+      "last_value": 0.03,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.04
+    },
+    {
+      "metric_id": 17,
+      "metric": "Centreon-Server_2: rta",
+      "metric_legend": "Centreon-Server_2: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE"
+      },
+      "legend": "Centreon-Server_2: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        0.035661073826,
+        0.03853,
+        null
+      ],
+      "last_value": 0.04,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.04
+    },
+    {
+      "metric_id": 13,
+      "metric": "Centreon-Server_3: rta",
+      "metric_legend": "Centreon-Server_3: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE"
+      },
+      "legend": "Centreon-Server_3: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        0.055875838926,
+        0.03161,
+        null
+      ],
+      "last_value": 0.03,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.04
+    },
+    {
+      "metric_id": 9,
+      "metric": "Centreon-Server_4: rta",
+      "metric_legend": "Centreon-Server_4: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE"
+      },
+      "legend": "Centreon-Server_4: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        0.02077852349,
+        0.03634,
+        null
+      ],
+      "last_value": 0.04,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.03
+    },
+    {
+      "metric_id": 5,
+      "metric": "Centreon-Server_5: rta",
+      "metric_legend": "Centreon-Server_5: rta",
+      "unit": "ms",
+      "min": 0.0,
+      "max": null,
+      "ds_data": {
+        "ds_color_line": "#29AFEE"
+      },
+      "legend": "Centreon-Server_5: Round-Trip Average Time",
+      "stack": 0,
+      "warning_high_threshold": 200.0,
+      "critical_high_threshold": 400.0,
+      "warning_low_threshold": 0.0,
+      "critical_low_threshold": 0.0,
+      "ds_order": 1,
+      "data": [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        0.042899328859,
+        0.051873333333,
+        null
+      ],
+      "last_value": 0.05,
+      "minimum_value": null,
+      "maximum_value": null,
+      "average_value": 0.05
+    }
+  ],
+  "times": [
+    "2024-05-10T09:20:00+02:00",
+    "2024-05-10T09:25:00+02:00",
+    "2024-05-10T09:30:00+02:00",
+    "2024-05-10T09:35:00+02:00",
+    "2024-05-10T09:40:00+02:00",
+    "2024-05-10T09:45:00+02:00",
+    "2024-05-10T09:50:00+02:00",
+    "2024-05-10T09:55:00+02:00",
+    "2024-05-10T10:00:00+02:00",
+    "2024-05-10T10:05:00+02:00",
+    "2024-05-10T10:10:00+02:00",
+    "2024-05-10T10:15:00+02:00",
+    "2024-05-10T10:20:00+02:00"
+  ]
+}

package/src/Graph/LineChart/useLineChartData.ts

@@ -1,8 +1,20 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
-import { compose, prop, sortBy, toLower } from 'ramda';
+import {
+  compose,
+  flatten,
+  groupBy,
+  isNil,
+  lensPath,
+  pipe,
+  prop,
+  set,
+  sortBy,
+  toLower
+} from 'ramda';
 
 import { LineChartData } from '../common/models';
+import { emphasizeCurveColor } from '../common/utils';
 
 import { adjustGraphData } from './helpers';
 import { Data } from './models';
@@ -18,32 +30,70 @@ interface Props {
 }
 
 const useGraphData = ({ data, end, start }: Props): GraphDataResult => {
-  const [adjustedData, setAdjustedData] = useState<Data>();
+  const adjustedDataRef = useRef<Data>();
 
-  const prepareData = (dataToAdjust: LineChartData): void => {
-    const { timeSeries } = adjustGraphData(dataToAdjust);
-    const baseAxis = dataToAdjust.global.base;
-    const { title } = dataToAdjust.global;
+  const getBoolean = (value): boolean => Boolean(Number(value));
 
-    const newLineData = adjustGraphData(dataToAdjust).lines;
+  const dataWithAdjustedMetricsColor = useMemo(() => {
+    if (isNil(data)) {
+      return data;
+    }
+    const metricsGroupedByColor = groupBy(
+      (metric) => metric.ds_data.ds_color_line
+    )(data?.metrics || []);
+
+    const newMetrics = Object.entries(metricsGroupedByColor).map(
+      ([color, value]) => {
+        const adjustedValue = value?.map((item) => ({
+          ...item,
+          ds_data: {
+            ...item?.ds_data,
+            ds_filled: getBoolean(item?.ds_data?.ds_filled),
+            ds_invert: getBoolean(item?.ds_data?.ds_invert)
+          }
+        }));
+
+        return adjustedValue?.map((metric, index) =>
+          set(
+            lensPath(['ds_data', 'ds_color_line']),
+            emphasizeCurveColor({ color, index }),
+            metric
+          )
+        );
+      }
+    );
+
+    const sortedMetrics = pipe(flatten, sortBy(prop('metric')))(newMetrics);
+
+    return {
+      ...data,
+      metrics: sortedMetrics
+    };
+  }, [data]);
+
+  const prepareData = useCallback((): void => {
+    if (isNil(dataWithAdjustedMetricsColor)) {
+      return;
+    }
+
+    const { timeSeries } = adjustGraphData(dataWithAdjustedMetricsColor);
+    const baseAxis = dataWithAdjustedMetricsColor.global.base;
+    const { title } = dataWithAdjustedMetricsColor.global;
+
+    const newLineData = adjustGraphData(dataWithAdjustedMetricsColor).lines;
     const sortedLines = sortBy(compose(toLower, prop('name')), newLineData);
 
-    setAdjustedData({
+    adjustedDataRef.current = {
       baseAxis,
       lines: sortedLines,
       timeSeries,
       title
-    });
-  };
+    };
+  }, [dataWithAdjustedMetricsColor, end, start]);
 
-  useEffect(() => {
-    if (!data) {
-      return;
-    }
-    prepareData(data);
-  }, [end, start, data]);
+  prepareData();
 
-  return { adjustedData };
+  return { adjustedData: adjustedDataRef.current };
 };
 
 export default useGraphData;

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -53,7 +53,8 @@ const ResponsivePie = ({
   onArcClick,
   displayValues,
   TooltipContent,
-  legendDirection = 'column'
+  legendDirection = 'column',
+  tooltipProps = {}
 }: PieProps & { height: number; width: number }): JSX.Element => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -157,6 +158,7 @@ const ResponsivePie = ({
                               title={title}
                               total={total}
                               value={arc.data.value}
+                              {...tooltipProps}
                             />
                           )
                         }

package/src/Graph/PieChart/models.ts

@@ -14,6 +14,7 @@ export interface PieProps {
   legendDirection?: 'row' | 'column';
   onArcClick?: (ardata) => void;
   title?: string;
+  tooltipProps?: object;
   unit?: 'percentage' | 'number';
   variant?: 'pie' | 'donut';
 }

package/src/Graph/Tree/DescendantNodes.tsx

@@ -65,7 +65,6 @@ const DescendantNodes = <TData extends BaseProp>({
       <Group key={key} left={left} top={top}>
         <foreignObject
           height={nodeSize.height}
-          style={{ userSelect: 'none' }}
           width={nodeSize.width}
           x={-nodeSize.width / 2}
           y={-nodeSize.height / 2}

package/src/Graph/Tree/Links.tsx

@@ -1,10 +1,5 @@
-import {
-  LinkHorizontal,
-  LinkHorizontalStep,
-  LinkHorizontalLine
-} from '@visx/shape';
+import { LinkHorizontal } from '@visx/shape';
 import { HierarchyPointLink } from '@visx/hierarchy/lib/types';
-import { always, cond, equals, T } from 'ramda';
 
 import { useTheme } from '@mui/material';
 
@@ -14,12 +9,6 @@ interface Props<TData> extends Pick<TreeProps<TData>, 'treeLink'> {
   links: Array<HierarchyPointLink<Node<TData>>>;
 }
 
-const getLinkComponent = cond([
-  [equals('line'), always(LinkHorizontalLine)],
-  [equals('step'), always(LinkHorizontalStep)],
-  [T, always(LinkHorizontal)]
-]);
-
 const Links = <TData extends BaseProp>({
   links,
   treeLink
@@ -35,12 +24,10 @@ const Links = <TData extends BaseProp>({
       .descendants()
       .map((ancestor) => ancestor.data.data.id);
 
-    const LinkComponent = getLinkComponent(treeLink?.type);
-
     const key = `${link.source.data.data.id}-${link.source.data.data.name}-${ancestorIds}_${link.target.data.data.id}-${link.target.data.data.name}-${descendantIds}`;
 
     return (
-      <LinkComponent
+      <LinkHorizontal
         data={link}
         data-testid={`${link.source.data.data.id}_to_${link.target.data.data.id}`}
         fill="none"

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

@@ -168,28 +168,4 @@ describe('Complex data tree', () => {
 
     cy.makeSnapshot();
   });
-
-  it('displays the tree with step links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'step'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the tree with line links when a prop is set', () => {
-    initializeStandaloneTree({
-      treeLink: {
-        type: 'line'
-      }
-    });
-
-    cy.contains('T').should('be.visible');
-
-    cy.makeSnapshot();
-  });
 });

package/src/Graph/Tree/Tree.stories.tsx

@@ -82,21 +82,6 @@ export const WithDefaultExpandFilter: Story = {
   render: StandaloneTreeTemplate
 };
 
-export const WithStepLink: Story = {
-  args: {
-    children: SimpleContent,
-    node: {
-      height: 90,
-      width: 90
-    },
-    tree: simpleData,
-    treeLink: {
-      type: 'step'
-    }
-  },
-  render: StandaloneTreeTemplate
-};
-
 export const WithCustomLinks: Story = {
   args: {
     children: SimpleContent,
@@ -110,8 +95,7 @@ export const WithCustomLinks: Story = {
       getStrokeDasharray: ({ target }) =>
         target.status === 'ok' ? '5,5' : '0',
       getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
-      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2),
-      type: 'line'
+      getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
     }
   },
   render: StandaloneTreeTemplate

package/src/Graph/Tree/models.ts

@@ -14,8 +14,6 @@ export interface BaseProp {
   name: string;
 }
 
-export type Link = 'curve' | 'line' | 'step';
-
 export interface ChildrenProps<TData> {
   ancestors: Array<Node<TData>>;
   depth: number;
@@ -50,6 +48,5 @@ export interface TreeProps<TData> {
     ) => string | number | undefined;
     getStrokeOpacity?: (props: LinkProps<TData>) => string | number | undefined;
     getStrokeWidth?: (props: LinkProps<TData>) => string | number | undefined;
-    type?: Link;
   };
 }

package/src/Graph/common/utils.ts

@@ -1,3 +1,4 @@
+import numeral from 'numeral';
 import {
   T,
   always,
@@ -6,14 +7,14 @@ import {
   gt,
   gte,
   head,
+  last,
   length,
   lt,
   lte,
   pluck
 } from 'ramda';
-import numeral from 'numeral';
 
-import { Theme } from '@mui/material';
+import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
 import { Thresholds } from './models';
 
@@ -92,3 +93,51 @@ export const getValueByUnit = ({
 
   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/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/Select/Autocomplete/Connected/Multi/index.test.tsx

@@ -13,11 +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}
@@ -42,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

@@ -95,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%"}}]}]}'
       );
     });
   });