@centreon/ui 25.2.3 → 25.2.5

package/src/Graph/common/utils.ts

@@ -17,7 +17,9 @@ import {
 
 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/mockedData/lastDayWithNullValues.json

@@ -329,7 +329,20 @@
         0.32339333333,
         null
       ],
-      "prints": [["Last:0.32"], ["Min:0.03"], ["Max:0.97"], ["Average:0.51"]],
+      "prints": [
+        [
+          "Last:0.32"
+        ],
+        [
+          "Min:0.03"
+        ],
+        [
+          "Max:0.97"
+        ],
+        [
+          "Average:0.51"
+        ]
+      ],
       "last_value": 0.32,
       "minimum_value": 0.03,
       "maximum_value": 0.97,
@@ -654,10 +667,18 @@
         null
       ],
       "prints": [
-        ["Last:87.27"],
-        ["Min:70.31"],
-        ["Max:88.03"],
-        ["Average:78.07"]
+        [
+          "Last:87.27"
+        ],
+        [
+          "Min:70.31"
+        ],
+        [
+          "Max:88.03"
+        ],
+        [
+          "Average:78.07"
+        ]
       ],
       "last_value": 87.27,
       "minimum_value": 70.31,
@@ -974,15 +995,28 @@
         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"]],
+      "prints": [
+        [
+          "Last:0.65"
+        ],
+        [
+          "Min:0.03"
+        ],
+        [
+          "Max:0.98"
+        ],
+        [
+          "Average:0.50"
+        ]
+      ],
       "last_value": 0.65,
       "minimum_value": 0.03,
       "maximum_value": 0.98,

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

@@ -13,7 +13,7 @@ import { baseEndpoint, getEndpoint, label, optionsData } from './utils';
 
 import MultiConnectedAutocompleteField from '.';
 
-const renderMultiAutocompleteField = (): RenderResult =>
+const renderMultiAutocompleteField = (customRenderTags?): RenderResult =>
   render(
     <TestQueryProvider>
       <MultiConnectedAutocompleteField
@@ -23,6 +23,7 @@ const renderMultiAutocompleteField = (): RenderResult =>
         label={label}
         placeholder="Type here..."
         value={[optionsData.result[0]]}
+        customRenderTags={customRenderTags}
       />
     </TestQueryProvider>
   );
@@ -42,4 +43,22 @@ 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/Multi/index.stories.tsx

@@ -58,3 +58,22 @@ export const popoverWithoutInput = (): JSX.Element => {
     />
   );
 };
+
+export const customRenderedTags = (): JSX.Element => {
+  const customRender = (tags: React.ReactNode): React.ReactNode => (
+    <div style={{ display: 'flex' }}>
+      {tags}
+      <span style={{ color: '#999' }}>Custom wrapper</span>
+    </div>
+  );
+
+  return (
+    <MultiAutocompleteField
+      label="Custom Tags Render"
+      options={options}
+      placeholder="Type here..."
+      value={[options[0], options[1]]}
+      customRenderTags={customRender}
+    />
+  );
+};

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

@@ -9,10 +9,6 @@ import { SelectEntry } from '../..';
 import Option from '../../Option';
 
 const useStyles = makeStyles()((theme) => ({
-  checkbox: {
-    marginRight: theme.spacing(1),
-    padding: 0
-  },
   deleteIcon: {
     height: theme.spacing(1.5),
     width: theme.spacing(1.5)
@@ -37,6 +33,7 @@ export interface Props
   getOptionTooltipLabel?: (option) => string;
   getTagLabel?: (option) => string;
   optionProperty?: string;
+  customRenderTags?: (tags: React.ReactNode) => React.ReactNode;
 }
 
 const MultiAutocompleteField = ({
@@ -48,6 +45,7 @@ const MultiAutocompleteField = ({
   getTagLabel = (option): string => option[optionProperty],
   getOptionTooltipLabel,
   chipProps,
+  customRenderTags,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -65,6 +63,7 @@ const MultiAutocompleteField = ({
               deleteIcon: classes.deleteIcon,
               root: classes.tag
             }}
+            data-testid={`tag-option-chip-${option.id}`}
             label={getTagLabel(option)}
             size="medium"
             {...getTagProps({ index })}
@@ -106,7 +105,11 @@ const MultiAutocompleteField = ({
           <Option checkboxSelected={selected}>{getOptionLabel(option)}</Option>
         </li>
       )}
-      renderTags={renderTags}
+      renderTags={(renderedValue, getTagProps): React.ReactNode =>
+        customRenderTags
+          ? customRenderTags(renderTags(renderedValue, getTagProps))
+          : renderTags(renderedValue, getTagProps)
+      }
       value={value}
       {...props}
     />

package/src/Listing/index.tsx

@@ -707,7 +707,9 @@ const Listing = <
                       ) : (
                         <EmptyResult
                           label={
-                            labelNoResultFound ? t(labelNoResultFound) : t(defaultLabelNoResultFound)
+                            labelNoResultFound
+                              ? t(labelNoResultFound)
+                              : t(defaultLabelNoResultFound)
                           }
                         />
                       ))}