@centreon/ui 23.10.1-MON-20802-fe-implement-new-visualization.7 → 23.10.1-MON-20803-RS-add-basic-filter.4

package/src/Graph/Text/Text.tsx

@@ -4,7 +4,7 @@ import { Typography, useTheme } from '@mui/material';
 
 import { LineChartData, Thresholds } from '../common/models';
 import {
-  formatMetricValueWithUnit,
+  formatMetricValue,
   getMetricWithLatestData
 } from '../common/timeSeries';
 import { getColorFromDataAndTresholds } from '../common/utils';
@@ -12,9 +12,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 import { useTextStyles } from './Text.styles';
 
 interface Props {
-  baseColor?: string;
   data?: LineChartData;
-  displayAsRaw?: boolean;
   labels: {
     critical: string;
     warning: string;
@@ -25,9 +23,7 @@ interface Props {
 export const Text = ({
   thresholds,
   data,
-  displayAsRaw,
-  labels,
-  baseColor
+  labels
 }: Props): JSX.Element | null => {
   const theme = useTheme();
   const { classes } = useTextStyles();
@@ -41,21 +37,20 @@ export const Text = ({
   const metricUnit = metric?.unit ?? '';
 
   const color = getColorFromDataAndTresholds({
-    baseColor,
     data: metricValue,
     theme,
     thresholds
   });
 
   const warningThresholdLabels = thresholds.warning.map(({ value }) =>
-    formatMetricValueWithUnit({
+    formatMetricValue({
       unit: metricUnit,
       value
     })
   );
 
   const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
-    formatMetricValueWithUnit({
+    formatMetricValue({
       unit: metricUnit,
       value
     })
@@ -63,26 +58,24 @@ export const Text = ({
 
   return (
     <div className={classes.graphText}>
-      <Typography sx={{ color }} variant="h2">
-        <strong>
-          {formatMetricValueWithUnit({
-            isRaw: displayAsRaw,
-            unit: metricUnit,
-            value: metricValue
-          })}
-        </strong>
+      <Typography sx={{ color }} variant="h3">
+        {formatMetricValue({
+          unit: metricUnit,
+          value: metricValue
+        })}{' '}
+        {metricUnit}
       </Typography>
       {thresholds.enabled && (
         <div className={classes.thresholds}>
           <Typography sx={{ color: 'warning.main' }} variant="h5">
             {labels.warning}
             {': '}
-            {warningThresholdLabels.join(' - ')}
+            {warningThresholdLabels.join(' - ')} {metricUnit}
           </Typography>
           <Typography sx={{ color: 'error.main' }} variant="h5">
             {labels.critical}
             {': '}
-            {criticalThresholdLabels.join(' - ')}
+            {criticalThresholdLabels.join(' - ')} {metricUnit}
           </Typography>
         </div>
       )}

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

@@ -335,10 +335,10 @@ describe('timeSeries', () => {
   describe(timeSeries.formatMetricValue, () => {
     const cases: Array<TestCase> = [
       [218857269, '', 1000, '218.86m'],
-      [218857269, '', 1024, '208.72 M'],
+      [218857269, '', 1024, '208.72M'],
       [0.12232323445, '', 1000, '0.12'],
-      [1024, 'B', 1000, '1 KB'],
-      [1024, 'B', 1024, '1 KB'],
+      [1024, 'B', 1000, '1K'],
+      [1024, 'B', 1024, '1K'],
       [null, 'B', 1024, null]
     ];
 
@@ -504,106 +504,3 @@ describe('timeSeries', () => {
     });
   });
 });
-
-describe('Format value with unit', () => {
-  const units = [
-    'B',
-    'bytes',
-    'bytespersecond',
-    'B/s',
-    'B/sec',
-    'o',
-    'octets',
-    'b/s',
-    'b',
-    'ms',
-    '%',
-    ''
-  ];
-
-  const getExpectedResult = (unit): string => {
-    if (unit === '') {
-      return '324.23m';
-    }
-
-    return `309.21 M${unit}`;
-  };
-
-  const humanReadableTestCases = units.map((unit) => {
-    if (unit === '%') {
-      return {
-        expectedResult: '45.56%',
-        unit,
-        value: 45.55678
-      };
-    }
-
-    if (unit === 'ms') {
-      return {
-        expectedResult: '34.23 seconds',
-        unit,
-        value: 34232
-      };
-    }
-
-    return {
-      expectedResult: getExpectedResult(unit),
-      unit,
-      value: 324234232.34233
-    };
-  });
-
-  const rawTestCases = units.map((unit) => {
-    if (unit === '%') {
-      return {
-        expectedResult: '45.55678%',
-        unit,
-        value: 45.55678
-      };
-    }
-
-    if (unit === 'ms') {
-      return {
-        expectedResult: '34232 ms',
-        unit,
-        value: 34232
-      };
-    }
-
-    return {
-      expectedResult:
-        unit === '' ? '324234232.34233 ' : `324234232.34233 ${unit}`,
-      unit,
-      value: 324234232.34233
-    };
-  });
-
-  describe('Format the value as human readable', () => {
-    it.each(humanReadableTestCases)(
-      'formats the value with $unit',
-      ({ value, unit, expectedResult }) => {
-        expect(
-          timeSeries.formatMetricValueWithUnit({
-            unit,
-            value
-          })
-        ).toEqual(expectedResult);
-      }
-    );
-  });
-
-  describe('Format the value as raw', () => {
-    it.each(rawTestCases)(
-      'formats the value with $unit',
-      ({ value, unit, expectedResult }) => {
-        expect(
-          timeSeries.formatMetricValueWithUnit({
-            isRaw: true,
-            unit,
-            value
-          })
-        ).toEqual(expectedResult);
-      }
-    );
-  });
-});

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

@@ -28,10 +28,7 @@ import {
   lt,
   identity,
   head,
-  last,
-  cond,
-  always,
-  T
+  last
 } from 'ramda';
 
 import { margin } from '../../LineChart/common';
@@ -443,37 +440,6 @@ const getRightScale = ({
   });
 };
 
-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`;
-};
-
-const registerMsUnitToNumeral = (): null => {
-  try {
-    numeral.register('format', 'milliseconds', {
-      format: (value) => {
-        return formatTime(value);
-      },
-      regexps: {
-        format: /(ms)/,
-        unformat: /(ms)/
-      },
-      unformat: () => ''
-    });
-
-    return null;
-  } catch (_) {
-    return null;
-  }
-};
-
-registerMsUnitToNumeral();
-
 const formatMetricValue = ({
   value,
   unit,
@@ -497,14 +463,11 @@ const formatMetricValue = ({
 
   const base1024 = base2Units.includes(unit) || Number(base) === 1024;
 
-  const formatSuffix = cond([
-    [equals('ms'), always(' ms')],
-    [T, always(base1024 ? ' ib' : 'a')]
-  ])(unit);
+  const formatSuffix = base1024 ? ' ib' : 'a';
 
   const formattedMetricValue = numeral(Math.abs(value))
     .format(`0.[00]${formatSuffix}`)
-    .replace(/iB/g, unit);
+    .replace(/\s|i|B/g, '');
 
   if (lt(value, 0)) {
     return `-${formattedMetricValue}`;
@@ -513,31 +476,6 @@ const formatMetricValue = ({
   return formattedMetricValue;
 };
 
-const formatMetricValueWithUnit = ({
-  value,
-  unit,
-  base = 1000,
-  isRaw = false
-}: FormatMetricValueProps & { isRaw?: boolean }): string | null => {
-  if (isNil(value)) {
-    return null;
-  }
-
-  if (isRaw) {
-    const unitText = equals('%', unit) ? unit : ` ${unit}`;
-
-    return `${value}${unitText}`;
-  }
-
-  if (equals('%', unit)) {
-    return `${numeral(Math.abs(value)).format('0.[00]')}%`;
-  }
-
-  const formattedMetricValue = formatMetricValue({ base, unit, value });
-
-  return formattedMetricValue;
-};
-
 const getStackedYScale = ({
   leftScale,
   rightScale
@@ -619,6 +557,5 @@ export {
   getStackedYScale,
   getTimeValue,
   bisectDate,
-  getMetricWithLatestData,
-  formatMetricValueWithUnit
+  getMetricWithLatestData
 };

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

@@ -14,17 +14,14 @@ interface DsData {
 export interface Metric {
   average_value: number | null;
   crit: number | null;
-  critical_high_threshold: number | null;
-  critical_low_threshold: number | null;
-  data: Array<number | null>;
-  ds_data?: DsData;
+  data: Array<number>;
+  ds_data: DsData;
   legend: string;
   maximum_value: number | null;
   metric: string;
   minimum_value: number | null;
   unit: string;
-  warning_high_threshold: number | null;
-  warning_low_threshold: number | null;
+  warn: number | null;
 }
 
 type TimeSeries = { timeTick: string };

package/src/Graph/common/utils.ts

@@ -17,7 +17,6 @@ import { Theme } from '@mui/material';
 import { Thresholds } from './models';
 
 interface GetColorFromDataAndThresholdsProps {
-  baseColor?: string;
   data: number;
   theme: Theme;
   thresholds: Thresholds;
@@ -26,11 +25,10 @@ interface GetColorFromDataAndThresholdsProps {
 export const getColorFromDataAndTresholds = ({
   data,
   thresholds,
-  theme,
-  baseColor
+  theme
 }: GetColorFromDataAndThresholdsProps): string => {
   if (!thresholds.enabled) {
-    return baseColor || theme.palette.primary.main;
+    return theme.palette.success.main;
   }
 
   const criticalValues = pluck('value', thresholds.critical).sort();

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

@@ -1,7 +1,7 @@
 import { includes, map, prop, reject } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
-import { Chip, ChipProps } from '@mui/material';
+import { Chip } from '@mui/material';
 import { UseAutocompleteProps } from '@mui/material/useAutocomplete';
 
 import Autocomplete, { Props as AutocompleteProps } from '..';
@@ -18,6 +18,7 @@ const useStyles = makeStyles()((theme) => ({
     width: theme.spacing(1.5)
   },
   tag: {
+    backgroundColor: theme.palette.divider,
     fontSize: theme.typography.caption.fontSize
   }
 }));
@@ -32,7 +33,6 @@ export interface Props
       UseAutocompleteProps<SelectEntry, Multiple, DisableClearable, FreeSolo>,
       'multiple'
     > {
-  chipProps?: ChipProps;
   disableSortedOptions?: boolean;
   getTagLabel?: (option) => string;
   optionProperty?: string;
@@ -45,7 +45,6 @@ const MultiAutocompleteField = ({
   optionProperty = 'name',
   getOptionLabel = (option): string => option.name,
   getTagLabel = (option): string => option[optionProperty],
-  chipProps,
   ...props
 }: Props): JSX.Element => {
   const { classes } = useStyles();
@@ -61,7 +60,6 @@ const MultiAutocompleteField = ({
         label={getTagLabel(option)}
         size="medium"
         {...getTagProps({ index })}
-        {...chipProps}
       />
     ));
 

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

@@ -32,7 +32,6 @@ export type Props = {
   displayPopupIcon?: boolean;
   endAdornment?: React.ReactElement;
   error?: string;
-  getOptionItemLabel?: (option) => string;
   hideInput?: boolean;
   label: string;
   loading?: boolean;
@@ -159,7 +158,6 @@ const AutocompleteField = ({
   autoSize = false,
   autoSizeDefaultWidth = 0,
   autoSizeCustomPadding,
-  getOptionItemLabel = (option) => option.name,
   ...autocompleteProps
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ hideInput });
@@ -195,7 +193,6 @@ const AutocompleteField = ({
           </>
         ),
         style: {
-          background: 'transparent',
           paddingRight: theme.spacing(5)
         }
       }}
@@ -252,7 +249,7 @@ const AutocompleteField = ({
             <Option
               thumbnailUrl={displayOptionThumbnail ? option.url : undefined}
             >
-              {getOptionItemLabel(option)}
+              {option.name}
             </Option>
           </li>
         );

package/src/InputField/Text/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useCallback } from 'react';
 
-import { equals, isNil } from 'ramda';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 import {
@@ -9,8 +9,7 @@ import {
   TextFieldProps,
   Theme,
   Tooltip,
-  Typography,
-  Box
+  Typography
 } from '@mui/material';
 
 import { getNormalizedId } from '../../utils';
@@ -19,9 +18,8 @@ import useAutoSize from './useAutoSize';
 
 const useStyles = makeStyles<{ displayAsBlock: boolean }>()(
   (theme: Theme, { displayAsBlock }) => ({
-    autoSizeCompact: {
-      paddingRight: theme.spacing(1),
-      paddingTop: theme.spacing(0.6)
+    compact: {
+      fontSize: 'x-small'
     },
     hiddenText: {
       display: 'table',
@@ -142,7 +140,7 @@ const TextField = forwardRef(
     }, [innerValue, debounced, defaultValue]);
 
     return (
-      <Box sx={{ width: autoSize ? 'auto' : '100%' }}>
+      <>
         <Tooltip placement="top" title={tooltipTitle}>
           <MuiTextField
             data-testid={dataTestId}
@@ -164,8 +162,7 @@ const TextField = forwardRef(
               className: cx(
                 classes.inputBase,
                 {
-                  [classes.transparent]: transparent,
-                  [classes.autoSizeCompact]: autoSize && equals(size, 'compact')
+                  [classes.transparent]: transparent
                 },
                 className
               ),
@@ -198,7 +195,7 @@ const TextField = forwardRef(
             {rest.value || externalValueForAutoSize || innerValue}
           </Typography>
         )}
-      </Box>
+      </>
     );
   }
 );

package/src/Listing/Cell/DataCell.tsx

@@ -116,7 +116,7 @@ const DataCell = ({
           isRowHighlighted={isRowHighlighted}
           listingVariant={listingVariant}
           onClick={(e): void => {
-            if (!clickable) {
+            if (!clickable && !column.displaySubItemsCaret) {
               return;
             }
             e.preventDefault();

package/src/Listing/Cell/index.tsx

@@ -90,10 +90,10 @@ const useStyles = makeStyles<StylesProps>()(
       })
     },
     caretLess: {
-      transform: 'rotate3d(0,0,1,0deg)'
+      transform: 'rotate3d(0,0,1,180deg)'
     },
     caretMore: {
-      transform: 'rotate3d(0,0,1,180deg)'
+      transform: 'rotate3d(0,0,1,0deg)'
     },
     fakeCaret: {
       marginLeft: theme.spacing(3)

package/src/RichTextEditor/ContentEditable.tsx

@@ -160,6 +160,7 @@ const ContentEditable = ({
         className,
         isFocused && classes.inputFocused
       )}
+      id={namespace}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -56,7 +56,7 @@ describe('Rich Text Editor', () => {
         .should('be.visible')
         .and('have.value', '');
 
-      cy.findByLabelText('RichTextEditor').parent().contains('Type here...');
+      cy.get('#RichTextEditor').contains('Type here...');
     });
 
     it('displays changes with undo redo buttons', () => {
@@ -187,6 +187,11 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays editor when editable props is false and an initialState exist', () => {
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.attr',
+        'contenteditable',
+        'false'
+      );
       cy.findByLabelText('Undo').should('not.exist');
       cy.findByLabelText('Redo').should('not.exist');
       cy.findByLabelText('bold').should('not.exist');
@@ -211,6 +216,11 @@ describe('Rich Text Editor', () => {
     });
 
     it('displays editor when editable props is false and an initialState exist', () => {
+      cy.get('[data-testid="RichTextEditor"]').should(
+        'have.attr',
+        'contenteditable',
+        'false'
+      );
       cy.findByLabelText('Undo').should('be.disabled');
       cy.findByLabelText('Redo').should('be.disabled');
       cy.findByLabelText('bold').should('be.disabled');
@@ -235,14 +245,12 @@ describe('Rich Text Editor', () => {
       });
     });
     it('displays editor with custom namespace', () => {
-      cy.get('[data-testid="CypressComponentTest"] > p').should('be.exist');
+      cy.get('#CypressComponentTest > p').should('be.exist');
       cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
     });
 
     it('displays editor with custom placeholder', () => {
-      cy.get('[data-testid="CypressComponentTest"]')
-        .parent()
-        .contains('Type Cypress test...');
+      cy.get('#CypressComponentTest > p').contains('Type Cypress test...');
     });
 
     it('displays editor with custom minimum input height', () => {

package/src/RichTextEditor/RichTextEditor.tsx

@@ -23,7 +23,6 @@ import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
 export interface RichTextEditorProps {
   contentClassName?: string;
   disabled?: boolean;
-  displayBlockButtons?: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
   editorState?: string;
@@ -133,10 +132,9 @@ const RichTextEditor = ({
   onBlur,
   contentClassName,
   displayMacrosButton = false,
-  disabled = false,
+  disabled,
   openLinkInNewTab = true,
-  initialize,
-  displayBlockButtons = true
+  initialize
 }: RichTextEditorProps): JSX.Element => {
   const { classes } = useStyles({ toolbarPositions });
 
@@ -176,7 +174,6 @@ const RichTextEditor = ({
         <div className={classes.toolbar}>
           <ToolbarPlugin
             disabled={disabled}
-            displayBlockButtons={displayBlockButtons}
             displayMacrosButton={displayMacrosButton}
             editable={editable}
           />

package/src/RichTextEditor/plugins/AutoLinkPlugin/index.tsx

@@ -1,11 +1,7 @@
-import { useEffect, useState } from 'react';
-
 import {
   AutoLinkPlugin,
   LinkMatcher
 } from '@lexical/react/LexicalAutoLinkPlugin';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
 
 interface LinkAttributes {
   rel?: null | string;
@@ -60,42 +56,7 @@ const AutoCompleteLinkPlugin = ({
   openLinkInNewTab
 }: {
   openLinkInNewTab: boolean;
-}): JSX.Element | null => {
-  const [editor] = useLexicalComposerContext();
-  const [hasFocus, setFocus] = useState(false);
-
-  useEffect(
-    () =>
-      editor.registerCommand(
-        BLUR_COMMAND,
-        () => {
-          setFocus(false);
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-    []
-  );
-
-  useEffect(
-    () =>
-      editor.registerCommand(
-        FOCUS_COMMAND,
-        () => {
-          setFocus(true);
-
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      ),
-    []
-  );
-
-  if (!hasFocus) {
-    return null;
-  }
-
+}): JSX.Element => {
   return <AutoLinkPlugin matchers={getMatchers(openLinkInNewTab)} />;
 };