@centreon/ui 24.10.12 → 24.10.13

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

@@ -14,12 +14,12 @@ import {
   filter,
   find,
   flatten,
+  gt,
   head,
   identity,
   includes,
   isEmpty,
   isNil,
-  isNotNil,
   keys,
   last,
   lt,
@@ -298,13 +298,17 @@ const getTimeSeriesForLines = ({
   return map(
     ({ timeTick, ...metricsValue }): TimeValue => ({
       ...reduce(
-        (acc, metric_id): Omit<TimeValue, 'timePick'> => ({
-          ...acc,
-          [metric_id]:
-            invert && metricsValue[metric_id]
-              ? negate(metricsValue[metric_id])
-              : metricsValue[metric_id]
-        }),
+        (acc, metric_id): Omit<TimeValue, 'timePick'> => {
+          return {
+            ...acc,
+            [metric_id]:
+              invert &&
+              metricsValue[metric_id] &&
+              gt(metricsValue[metric_id], 0)
+                ? negate(metricsValue[metric_id])
+                : metricsValue[metric_id]
+          };
+        },
         {},
         metrics
       ),
@@ -348,6 +352,19 @@ const getScaleType = (
 const hasOnlyZeroesHasValue = (graphValues: Array<number>): boolean =>
   graphValues.every((value) => equals(value, 0) || equals(value, null));
 
+const getSanitizedValues = reject(
+  (
+    value:
+      | number
+      | false
+      | typeof Number.POSITIVE_INFINITY
+      | typeof Number.NEGATIVE_INFINITY
+  ) =>
+    equals(value, false) ||
+    equals(value, Number.POSITIVE_INFINITY) ||
+    equals(value, Number.NEGATIVE_INFINITY)
+);
+
 const getScale = ({
   graphValues,
   height,
@@ -358,21 +375,33 @@ const getScale = ({
   scaleLogarithmicBase,
   isHorizontal,
   invert,
-  hasDisplayAsBar
+  hasDisplayAsBar,
+  hasLineFilled
 }): ScaleLinear<number, number> => {
   const isLogScale = equals(scale, 'logarithmic');
-  const minValue = Math.min(
-    hasDisplayAsBar && 0,
-    invert ? negate(getMax(graphValues)) : getMin(graphValues),
-    getMin(stackedValues),
+  const sanitizedValuesFormMinimum = getSanitizedValues([
+    invert && graphValues.every(lt(0))
+      ? negate(getMax(graphValues))
+      : getMin(graphValues),
+    !isEmpty(stackedValues) &&
+      !equals(stackedValues, [0]) &&
+      getMin(stackedValues),
     Math.min(...thresholds)
-  );
-  const maxValue = Math.max(
+  ]);
+  const minValue = Math.min(...sanitizedValuesFormMinimum);
+  const minValueWithMargin =
+    (hasDisplayAsBar || hasLineFilled) && minValue > 0
+      ? 0
+      : minValue - Math.abs(minValue) * 0.05;
+
+  const sanitizedValuesForMaximum = getSanitizedValues([
     getMax(graphValues),
     getMax(stackedValues),
     hasOnlyZeroesHasValue(graphValues) ? 1 : 0,
     Math.max(...thresholds)
-  );
+  ]);
+  const maxValue = Math.max(...sanitizedValuesForMaximum);
+  const maxValueWithMargin = maxValue + Math.abs(maxValue) * 0.05;
 
   const scaleType = getScaleType(scale);
 
@@ -380,7 +409,10 @@ const getScale = ({
   const range = [height, upperRangeValue];
 
   if (isCenteredZero) {
-    const greatestValue = Math.max(Math.abs(maxValue), Math.abs(minValue));
+    const greatestValue = Math.max(
+      Math.abs(maxValueWithMargin),
+      Math.abs(minValueWithMargin)
+    );
 
     return scaleType<number>({
       base: scaleLogarithmicBase || 2,
@@ -389,7 +421,7 @@ const getScale = ({
     });
   }
 
-  const domain = [isLogScale ? 0.001 : minValue, maxValue];
+  const domain = [isLogScale ? 0.001 : minValueWithMargin, maxValueWithMargin];
 
   return scaleType<number>({
     base: scaleLogarithmicBase || 2,
@@ -462,10 +494,11 @@ const getYScaleUnit = ({
   return getScale({
     graphValues,
     hasDisplayAsBar: dataLines.some(
-      ({ displayAs, unit: lineUnit, stackOrder }) =>
-        equals(unit, lineUnit) &&
-        equals(displayAs, 'bar') &&
-        isNotNil(stackOrder)
+      ({ displayAs, unit: lineUnit }) =>
+        equals(unit, lineUnit) && equals(displayAs, 'bar')
+    ),
+    hasLineFilled: dataLines.some(
+      ({ unit: lineUnit, filled }) => equals(unit, lineUnit) && filled
     ),
     height: valueGraphHeight,
     invert,
@@ -516,13 +549,7 @@ const getYScalePerUnit = ({
 };
 
 const formatTime = (value: number): string => {
-  if (value < 1000) {
-    return `${numeral(value).format('0.[00]a')} ms`;
-  }
-
-  const t = numeral(value / 1000).format('0.[00]a');
-
-  return `${t} seconds`;
+  return `${numeral(value).format('0.[00]a')} ms`;
 };
 
 const registerMsUnitToNumeral = (): null => {

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

@@ -29,6 +29,8 @@ export interface Metric {
   unit: string;
   warning_high_threshold: number | null;
   warning_low_threshold: number | null;
+  service_name: string | null;
+  host_name: string | null;
 }
 
 type TimeSeries = { timeTick: string };

package/src/Graph/common/utils.ts

@@ -8,16 +8,18 @@ import {
   gte,
   head,
   isNil,
+  last,
   length,
   lt,
   lte,
-  pluck,
-  last
+  pluck
 } from 'ramda';
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';
 
-import { Thresholds } from './models';
+import { Threshold, Thresholds } from './models';
+import { formatMetricValue } from './timeSeries';
+import { Line, TimeValue } from './timeSeries/models';
 
 interface GetColorFromDataAndThresholdsProps {
   baseColor?: string;
@@ -179,3 +181,49 @@ export const commonTickLabelProps = {
   fontSize: 10,
   textAnchor: 'middle'
 };
+
+interface GetFormattedAxisValuesProps {
+  thresholdUnit?: string;
+  axisUnit: string;
+  base?: number;
+  timeSeries: Array<TimeValue>;
+  threshold: Array<Threshold>;
+  lines: Array<Line>;
+}
+
+export const getFormattedAxisValues = ({
+  thresholdUnit,
+  axisUnit,
+  timeSeries,
+  base = 1000,
+  lines,
+  threshold
+}: GetFormattedAxisValuesProps): Array<string> => {
+  const metricId = (lines.find(({ unit }) => equals(unit, axisUnit)) as Line)
+    ?.metric_id;
+
+  if (isNil(metricId)) {
+    return [];
+  }
+  const formattedData = timeSeries.map((data) =>
+    formatMetricValue({
+      value: data[metricId],
+      unit: axisUnit,
+      base
+    })
+  );
+
+  const formattedThresholdValues = equals(thresholdUnit, axisUnit)
+    ? threshold.map(({ value }) =>
+        formatMetricValue({
+          value,
+          unit: axisUnit,
+          base
+        })
+      ) || []
+    : [];
+
+  return formattedData
+    .concat(formattedThresholdValues)
+    .filter((v) => v) as Array<string>;
+};

package/src/Graph/index.ts

@@ -1,3 +1,4 @@
+export type { ParentSizeProps } from '@visx/responsive/lib/components/ParentSize';
 export { default as LineChart } from './Chart';
 export { default as ThresholdLines } from './Chart/BasicComponents/Lines/Threshold';
 export { default as useLineChartData } from './Chart/useChartData';
@@ -5,12 +6,14 @@ export { default as BarChart } from './BarChart/BarChart';
 export { Gauge } from './Gauge';
 export { SingleBar } from './SingleBar';
 export { Text as GraphText } from './Text';
+export { default as Header } from './common/BaseChart/Header';
 
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
+export { Timeline } from './Timeline';
 export * from './Tree';
-export type { LineChartData } from './common/models';
+export type { LineChartData, Threshold, Thresholds } from './common/models';
 export * from './common/timeSeries';
 export type { Metric } from './common/timeSeries/models';
 export * from './Chart/models';

package/src/Graph/mockedData/lastDayWithNullValues.json

@@ -974,12 +974,12 @@
         0.32092,
         0.23609333333,
         0.45102333333,
-        0.75873,
-        0.23588666667,
-        0.41906666667,
-        0.357,
-        0.32246333333,
-        0.64624666667,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
         null
       ],
       "prints": [["Last:0.65"], ["Min:0.03"], ["Max:0.98"], ["Average:0.50"]],

package/src/Graph/mockedData/pingServiceLinesBars.json

@@ -1,19 +1,19 @@
 {
   "global": {
     "base": 1000,
-    "title": "ping service"
+    "title": "Ping service"
   },
   "metrics": [
     {
       "metric_id": 2,
-      "metric": "centreon-server: pl",
-      "metric_legend": "centreon-server: pl",
-      "unit": "%",
+      "metric": "Centreon-Server: pl",
+      "metric_legend": "Centreon-Server: pl",
+      "unit": "B",
       "min": 0.0,
       "max": 100.0,
       "ds_data": {
-        "ds_color_line": "#f30b23",
-        "ds_color_area": "#f30b23",
+        "ds_color_line": "#F30B23",
+        "ds_color_area": "#F30B23",
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
@@ -23,7 +23,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "bar",
-      "legend": "centreon-server: packet loss",
+      "legend": "Centreon-Server: Packet Loss",
       "stack": 0,
       "warning_high_threshold": 20.0,
       "critical_high_threshold": 50.0,
@@ -31,17 +31,17 @@
       "critical_low_threshold": 0.0,
       "ds_order": 1,
       "data": [
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        0.0,
-        10.0,
-        20.0,
+        1243.0,
+        3562.0,
+        3532.0,
+        9843.0,
+        3332.0,
+        6576.0,
+        5647.0,
+        8763.0,
+        7487.0,
+        4783.0,
+        6835.0,
         null,
         null
       ],
@@ -52,9 +52,9 @@
     },
     {
       "metric_id": 10,
-      "metric": "space used",
-      "metric_legend": "space used",
-      "unit": "b",
+      "metric": "Space used",
+      "metric_legend": "Space used",
+      "unit": "B",
       "min": 0.0,
       "max": 100.0,
       "ds_data": {
@@ -69,7 +69,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "bar",
-      "legend": "space used",
+      "legend": "Space used",
       "stack": 0,
       "warning_high_threshold": 20.0,
       "critical_high_threshold": 50.0,
@@ -90,14 +90,14 @@
     },
     {
       "metric_id": 1,
-      "metric": "centreon-server: rta",
-      "metric_legend": "centreon-server: rta",
+      "metric": "Centreon-Server: rta",
+      "metric_legend": "Centreon-Server: rta",
       "unit": "ms",
       "min": 0.0,
       "max": null,
       "ds_data": {
-        "ds_color_line": "#29afee",
-        "ds_color_area": "#29afee",
+        "ds_color_line": "#29AFEE",
+        "ds_color_area": "#29AFEE",
         "ds_filled": true,
         "ds_invert": false,
         "ds_legend": null,
@@ -107,7 +107,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip average time",
+      "legend": "Centreon-Server: Round-Trip Average Time",
       "stack": 0,
       "warning_high_threshold": 200.0,
       "critical_high_threshold": 400.0,
@@ -136,8 +136,8 @@
     },
     {
       "metric_id": 3,
-      "metric": "centreon-server: rtmax",
-      "metric_legend": "centreon-server: rtmax",
+      "metric": "Centreon-Server: rtmax",
+      "metric_legend": "Centreon-Server: rtmax",
       "unit": "ms",
       "min": null,
       "max": null,
@@ -145,7 +145,7 @@
         "ds_color_line": "#525256",
         "ds_color_area": "#525256",
         "ds_filled": false,
-        "ds_invert": false,
+        "ds_invert": true,
         "ds_legend": null,
         "ds_stack": false,
         "ds_order": 2,
@@ -153,7 +153,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip maximum time",
+      "legend": "Centreon-Server: Round-Trip Maximum Time",
       "stack": 0,
       "warning_high_threshold": null,
       "critical_high_threshold": null,
@@ -182,8 +182,8 @@
     },
     {
       "metric_id": 4,
-      "metric": "centreon-server: rtmin",
-      "metric_legend": "centreon-server: rtmin",
+      "metric": "Centreon-Server: rtmin",
+      "metric_legend": "Centreon-Server: rtmin",
       "unit": "ms",
       "min": null,
       "max": null,
@@ -199,7 +199,7 @@
         "ds_color_line_mode": 0
       },
       "displayAs": "line",
-      "legend": "centreon-server: round-trip minimum time",
+      "legend": "Centreon-Server: Round-Trip Minimum Time",
       "stack": 0,
       "warning_high_threshold": null,
       "critical_high_threshold": null,
@@ -228,18 +228,18 @@
     }
   ],
   "times": [
-    "2024-06-19t10:50:00+02:00",
-    "2024-06-19t10:55:00+02:00",
-    "2024-06-19t11:00:00+02:00",
-    "2024-06-19t11:05:00+02:00",
-    "2024-06-19t11:10:00+02:00",
-    "2024-06-19t11:15:00+02:00",
-    "2024-06-19t11:20:00+02:00",
-    "2024-06-19t11:25:00+02:00",
-    "2024-06-19t11:30:00+02:00",
-    "2024-06-19t11:35:00+02:00",
-    "2024-06-19t11:40:00+02:00",
-    "2024-06-19t11:45:00+02:00",
-    "2024-06-19t11:50:00+02:00"
+    "2024-06-19T10:50:00+02:00",
+    "2024-06-19T10:55:00+02:00",
+    "2024-06-19T11:00:00+02:00",
+    "2024-06-19T11:05:00+02:00",
+    "2024-06-19T11:10:00+02:00",
+    "2024-06-19T11:15:00+02:00",
+    "2024-06-19T11:20:00+02:00",
+    "2024-06-19T11:25:00+02:00",
+    "2024-06-19T11:30:00+02:00",
+    "2024-06-19T11:35:00+02:00",
+    "2024-06-19T11:40:00+02:00",
+    "2024-06-19T11:45:00+02:00",
+    "2024-06-19T11:50:00+02:00"
   ]
 }

package/src/Icon/DowntimeIcon.tsx

@@ -10,5 +10,12 @@ const icon = (
 );
 
 export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
-  <BaseIcon {...props} Icon={icon} height="24" viewBox="0 0 24 24" width="24" />
+  <BaseIcon
+    {...props}
+    Icon={icon}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    dataTestId="DowntimeIcon"
+  />
 );

package/src/Icon/FlappingIcon.tsx

@@ -0,0 +1,22 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M22 10.07c-2.24 0-4.01-1.04-5.72-2.04-1.61-.94-3.13-1.83-4.96-1.83s-3.18.92-4.57 1.9c-1.33 1.16-3 1.85-4.76 1.97v-.83c1.7 0 2.95-.88 4.28-1.82 1.41-1.22 3.19-2.05 5.05-2.05 1.95 0 3.8.82 5.38 1.95 1.56 1.11 3.39 1.78 5.3 1.92v.83Z" />
+    <path d="M22 14.07c-2.24 0-4.01-1.04-5.72-2.04-1.61-.94-3.13-1.83-4.96-1.83s-3.18.92-4.57 1.9c-1.33 1.16-3 1.85-4.76 1.97v-.83c1.7 0 2.95-.88 4.28-1.82 1.41-1.22 3.18-2.05 5.05-2.05 1.87 0 3.8.82 5.38 1.95 1.56 1.11 3.39 1.78 5.3 1.92v.83Z" />
+    <path d="M22 18.07c-2.24 0-4.01-1.04-5.72-2.04-1.61-.94-3.13-1.83-4.96-1.83s-3.18.92-4.57 1.9c-1.33 1.16-3 1.85-4.76 1.97v-.83c1.7 0 2.95-.88 4.28-1.82 1.41-1.22 3.18-2.07 5.05-2.05 1.87.02 3.8.82 5.38 1.95 1.56 1.11 3.39 1.78 5.3 1.92v.83Z" />
+  </g>
+);
+
+export const FlappingIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    {...props}
+    dataTestId="FlappingIcon"
+    Icon={icon}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  />
+);

package/src/Icon/index.ts

@@ -1,3 +1,4 @@
+export { FlappingIcon } from './FlappingIcon';
 export { HostIcon } from './HostIcon';
 export { ServiceIcon } from './ServiceIcon';
 export { DowntimeIcon } from './DowntimeIcon';

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