@centreon/ui 23.10.51 → 23.10.53

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import {
+  $isListNode,
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  ListNode,
+  REMOVE_LIST_COMMAND
+} from '@lexical/list';
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_CRITICAL,
+  SELECTION_CHANGE_COMMAND
+} from 'lexical';
+import {
+  $createHeadingNode,
+  $isHeadingNode,
+  HeadingTagType
+} from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { T, always, cond, equals, isNil } from 'ramda';
+import {
+  $findMatchingParent,
+  $getNearestNodeOfType,
+  mergeRegister
+} from '@lexical/utils';
+
+import { SingleAutocompleteField } from '../../..';
+
+import { useBlockButtonsStyles } from './ToolbarPlugin.styles';
+
+interface Props {
+  disabled: boolean;
+}
+
+const blockTypeToBlockName = {
+  bullet: 'Bullet List',
+  h1: 'Heading 1',
+  h2: 'Heading 2',
+  h3: 'Heading 3',
+  h4: 'Heading 4',
+  h5: 'Heading 5',
+  h6: 'Heading 6',
+  number: 'Number List',
+  paragraph: 'Normal'
+};
+
+const blockTypes = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'bullet',
+  'number',
+  'paragraph'
+];
+
+const blockTypeOptions = blockTypes.map((blockType) => ({
+  id: blockType,
+  name: blockTypeToBlockName[blockType]
+}));
+
+const BlockButtons = ({ disabled }: Props): JSX.Element => {
+  const { classes } = useBlockButtonsStyles();
+
+  const [blockType, setBlockType] =
+    useState<keyof typeof blockTypeToBlockName>('paragraph');
+
+  const [editor] = useLexicalComposerContext();
+
+  const formatParagraph = (): void => {
+    editor.update(() => {
+      const selection = $getSelection();
+      $setBlocksType(selection, () => $createParagraphNode());
+    });
+  };
+
+  const formatBulletList = (): void => {
+    if (blockType !== 'bullet') {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatNumberedList = (): void => {
+    if (blockType !== 'number') {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+  };
+
+  const formatHeading = (headingSize: HeadingTagType): void => {
+    if (blockType !== headingSize) {
+      editor.update(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+          $setBlocksType(selection, () => $createHeadingNode(headingSize));
+        }
+      });
+    }
+  };
+
+  const changeBlockType = (_, newBlockType): void => {
+    const formatFunction = cond<Array<string>, (value?) => void>([
+      [equals('bullet'), always(formatBulletList)],
+      [equals('number'), always(formatNumberedList)],
+      [equals('h1'), always(() => formatHeading('h1'))],
+      [equals('h2'), always(() => formatHeading('h2'))],
+      [equals('h3'), always(() => formatHeading('h3'))],
+      [equals('h4'), always(() => formatHeading('h4'))],
+      [equals('h5'), always(() => formatHeading('h5'))],
+      [equals('h6'), always(() => formatHeading('h6'))],
+      [T, always(formatParagraph)]
+    ])(newBlockType?.id || '');
+
+    formatFunction();
+  };
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    const anchorNode = selection?.anchor.getNode();
+    const element = equals(anchorNode?.getKey(), 'root')
+      ? anchorNode
+      : $findMatchingParent(anchorNode, (e) => {
+          const parent = e.getParent();
+
+          return parent !== null && $isRootOrShadowRoot(parent);
+        }) || anchorNode?.getTopLevelElementOrThrow();
+
+    const elementKey = element?.getKey();
+    const elementDOM = editor.getElementByKey(elementKey);
+
+    if (isNil(elementDOM)) {
+      return;
+    }
+
+    if ($isListNode(element)) {
+      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+      const type = parentList
+        ? parentList.getListType()
+        : element.getListType();
+      setBlockType(type);
+
+      return;
+    }
+    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+    if (type in blockTypeToBlockName) {
+      setBlockType(type as keyof typeof blockTypeToBlockName);
+    }
+  }, [editor]);
+
+  const value = blockTypeOptions.find((option) => option.id === blockType);
+
+  useEffect(() => {
+    return editor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      () => {
+        updateToolbar();
+
+        return false;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+  }, [editor, updateToolbar]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      })
+    );
+  }, [editor, updateToolbar]);
+
+  return (
+    <SingleAutocompleteField
+      className={classes.autocomplete}
+      dataTestId="Block type"
+      disabled={disabled}
+      label=""
+      options={blockTypeOptions}
+      value={value}
+      onChange={changeBlockType}
+    />
+  );
+};
+
+export default BlockButtons;

package/src/RichTextEditor/plugins/ToolbarPlugin/FormatButtons.tsx

@@ -5,7 +5,6 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import {
   $getSelection,
   $isRangeSelection,
-  EditorState,
   FORMAT_TEXT_COMMAND,
   RangeSelection,
   SELECTION_CHANGE_COMMAND,
@@ -61,10 +60,10 @@ const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
 };
 
 interface Props {
-  getEditorState?: (editorState: EditorState) => void;
+  disabled: boolean;
 }
 
-const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
+const FormatButtons = ({ disabled }: Props): JSX.Element => {
   const { classes, cx } = useStyles();
 
   const [isBold, setIsBold] = useState(false);
@@ -104,13 +103,6 @@ const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-
-        getEditorState?.(editorState);
-      }),
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
         () => {
@@ -169,6 +161,7 @@ const FormatButtons = ({ getEditorState }: Props): JSX.Element => {
         <IconButton
           ariaLabel={type}
           className={cx(isSelected && classes.buttonSelected)}
+          disabled={disabled}
           key={type}
           size="medium"
           title={type}

package/src/RichTextEditor/plugins/ToolbarPlugin/MacrosButton.tsx

@@ -11,6 +11,10 @@ import { useStyles } from '.';
 
 const LowPriority = 1;
 
+interface Props {
+  disabled: boolean;
+}
+
 export const standardMacros = [
   '{{SHORTDATETIME}}',
   '{{LONGDATETIME}}',
@@ -22,7 +26,7 @@ export const standardMacros = [
   '{{STATETYPE}}'
 ];
 
-const MacrosButton = (): JSX.Element => {
+const MacrosButton = ({ disabled }: Props): JSX.Element => {
   const { classes } = useStyles();
   const [arMacrosDiplayed, setAreMacrosDiplayed] = useState(false);
 
@@ -65,6 +69,7 @@ const MacrosButton = (): JSX.Element => {
         <IconButton
           ariaLabel="Macros"
           className={classes.macrosButton}
+          disabled={disabled}
           title="Macros"
           tooltipPlacement="top"
           onClick={displayMacros}

package/src/RichTextEditor/plugins/ToolbarPlugin/ToolbarPlugin.styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBlockButtonsStyles = makeStyles()((theme) => ({
+  autocomplete: {
+    width: theme.spacing(17)
+  }
+}));

package/src/RichTextEditor/plugins/ToolbarPlugin/UndoRedoButtons.tsx

@@ -18,7 +18,11 @@ import { labelRedo, labelUndo } from '../../translatedLabels';
 
 const LowPriority = 1;
 
-const UndoRedoButtons = (): JSX.Element => {
+interface Props {
+  disabled: boolean;
+}
+
+const UndoRedoButtons = ({ disabled }: Props): JSX.Element => {
   const { t } = useTranslation();
 
   const [canUndo, setCanUndo] = useState(false);
@@ -64,7 +68,7 @@ const UndoRedoButtons = (): JSX.Element => {
     <>
       <IconButton
         ariaLabel={translatedUndo}
-        disabled={!canUndo}
+        disabled={!canUndo || disabled}
         title={translatedUndo}
         tooltipPlacement="top"
         onClick={undo}
@@ -73,7 +77,7 @@ const UndoRedoButtons = (): JSX.Element => {
       </IconButton>
       <IconButton
         ariaLabel={translatedRedo}
-        disabled={!canRedo}
+        disabled={!canRedo || disabled}
         title={translatedRedo}
         tooltipPlacement="top"
         onClick={redo}

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

@@ -1,4 +1,3 @@
-import { EditorState } from 'lexical';
 import { makeStyles } from 'tss-react/mui';
 
 import { Divider } from '@mui/material';
@@ -6,11 +5,12 @@ import { Divider } from '@mui/material';
 import FormatButtons from './FormatButtons';
 import UndoRedoButtons from './UndoRedoButtons';
 import MacrosButton from './MacrosButton';
+import BlockButtons from './BlockButtons';
 
 interface Props {
+  disabled: boolean;
   displayMacrosButton?: boolean;
   editable: boolean;
-  getEditorState?: (editorState: EditorState) => void;
 }
 
 export const useStyles = makeStyles()((theme) => ({
@@ -31,21 +31,23 @@ export const useStyles = makeStyles()((theme) => ({
 }));
 
 const ToolbarPlugin = ({
-  getEditorState,
   editable,
-  displayMacrosButton
+  displayMacrosButton,
+  disabled
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
 
   return editable ? (
     <div className={classes.container}>
-      <UndoRedoButtons />
+      <UndoRedoButtons disabled={disabled} />
       <Divider flexItem orientation="vertical" />
-      <FormatButtons getEditorState={getEditorState} />
+      <BlockButtons disabled={disabled} />
+      <Divider flexItem orientation="vertical" />
+      <FormatButtons disabled={disabled} />
       {displayMacrosButton && (
         <>
           <Divider flexItem orientation="vertical" />
-          <MacrosButton />
+          <MacrosButton disabled={disabled} />
         </>
       )}
     </div>

package/src/api/useGraphQuery/index.ts

@@ -0,0 +1,92 @@
+import { T, always, cond, flatten, isEmpty, join, pipe, pluck } from 'ramda';
+import dayjs from 'dayjs';
+
+import { GraphData, useFetchQuery } from '../..';
+
+import { ServiceMetric } from './models';
+
+interface UseMetricsQueryProps {
+  baseEndpoint: string;
+  metrics: Array<ServiceMetric>;
+  timePeriod?: TimePeriod;
+}
+
+interface UseMetricsQueryState {
+  end: string;
+  graphData: GraphData | undefined;
+  isGraphLoading: boolean;
+  isMetricIdsEmpty: boolean;
+  start: string;
+}
+
+enum TimePeriod {
+  lastDay = 'last_day'
+}
+
+const getStartEndFromTimePeriod = (
+  timePeriod: TimePeriod
+): { end: string; start: string } => {
+  return cond([
+    [
+      T,
+      always({
+        end: dayjs().toISOString(),
+        start: dayjs().subtract(1, 'day').toISOString()
+      })
+    ]
+  ])(timePeriod);
+};
+
+interface PerformanceGraphData extends Omit<GraphData, 'global'> {
+  base: number;
+}
+
+const useGraphQuery = ({
+  metrics,
+  baseEndpoint,
+  timePeriod = TimePeriod.lastDay
+}: UseMetricsQueryProps): UseMetricsQueryState => {
+  const metricIds = pipe(
+    pluck('metrics'),
+    flatten,
+    pluck('id'),
+    join(',')
+  )(metrics);
+
+  const { end, start } = getStartEndFromTimePeriod(timePeriod);
+
+  const {
+    data: graphData,
+    isFetching,
+    isLoading
+  } = useFetchQuery<PerformanceGraphData>({
+    getEndpoint: () =>
+      `${baseEndpoint}?metricIds=[${metricIds}]&start=${start}&end=${end}`,
+    getQueryKey: () => ['graph', metricIds],
+    queryOptions: {
+      enabled: !isEmpty(metricIds),
+      suspense: false
+    }
+  });
+
+  const formattedGraphData = graphData
+    ? {
+        global: {
+          base: graphData.base,
+          title: ''
+        },
+        metrics: graphData.metrics,
+        times: graphData.times
+      }
+    : undefined;
+
+  return {
+    end,
+    graphData: formattedGraphData,
+    isGraphLoading: isFetching || (isLoading && !isEmpty(metricIds)),
+    isMetricIdsEmpty: isEmpty(metricIds),
+    start
+  };
+};
+
+export default useGraphQuery;

package/src/api/useGraphQuery/models.ts

@@ -0,0 +1,12 @@
+interface NamedEntity {
+  id: number;
+  name: string;
+}
+
+interface Metric extends NamedEntity {
+  unit: string;
+}
+
+export interface ServiceMetric extends NamedEntity {
+  metrics: Array<Metric>;
+}

package/src/components/ItemComposition/Item.tsx

@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+
+import { IconButton } from '..';
+
+import { useItemStyles } from './ItemComposition.styles';
+
+type Props = {
+  children: Array<ReactElement>;
+  className?: string;
+  labelDelete: string;
+  onDeleteItem: () => void;
+};
+
+export const Item = ({
+  onDeleteItem,
+  children,
+  labelDelete,
+  className
+}: Props): JSX.Element => {
+  const { classes, cx } = useItemStyles();
+
+  return (
+    <div className={classes.itemContainer}>
+      <div className={cx(classes.itemContent, className)}>{children}</div>
+      <IconButton
+        aria-label={labelDelete}
+        data-testid={labelDelete}
+        icon={<CloseIcon />}
+        size="small"
+        variant="ghost"
+        onClick={onDeleteItem}
+      />
+    </div>
+  );
+};

package/src/components/ItemComposition/ItemComposition.stories.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react/no-array-index-key */
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '@mui/material';
+
+import { SelectField } from '../..';
+
+import { ItemComposition } from '.';
+
+const meta: Meta<typeof ItemComposition> = {
+  component: ItemComposition
+};
+
+export default meta;
+type Story = StoryObj<typeof ItemComposition>;
+
+const stub = (): void => undefined;
+
+export const Default: Story = {
+  args: {
+    children: [...Array(5)].map((_, i) => (
+      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+        <Typography>Item 1</Typography>
+        <Typography>Item 2</Typography>
+      </ItemComposition.Item>
+    )),
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    children: [],
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};
+
+const options = [
+  {
+    id: 1,
+    name: 'Test select 1'
+  },
+  {
+    id: 2,
+    name: 'Test select 2'
+  },
+  {
+    id: 3,
+    name: 'Test select 3'
+  }
+];
+
+export const WithSelectInputs: Story = {
+  args: {
+    children: [...Array(5)].map((_, i) => (
+      <ItemComposition.Item key={i} labelDelete="Delete" onDeleteItem={stub}>
+        <SelectField
+          dataTestId="select 1"
+          label="select 1"
+          options={options}
+          selectedOptionId={1}
+          onChange={stub}
+        />
+        <SelectField
+          dataTestId="select 2"
+          label="select 2"
+          options={options}
+          selectedOptionId={2}
+          onChange={stub}
+        />
+      </ItemComposition.Item>
+    )),
+    labelAdd: 'Add',
+    onAddItem: stub
+  }
+};

package/src/components/ItemComposition/ItemComposition.styles.ts

@@ -0,0 +1,26 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useItemCompositionStyles = makeStyles()((theme) => ({
+  itemCompositionContainer: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    width: '100%'
+  }
+}));
+
+export const useItemStyles = makeStyles()((theme) => ({
+  itemContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1),
+    width: '100%'
+  },
+  itemContent: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%'
+  }
+}));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -0,0 +1,41 @@
+import { ReactElement } from 'react';
+
+import AddIcon from '@mui/icons-material/Add';
+
+import { Button } from '..';
+
+import { useItemCompositionStyles } from './ItemComposition.styles';
+
+type Props = {
+  addbuttonDisabled?: boolean;
+  children: Array<ReactElement>;
+  labelAdd: string;
+  onAddItem: () => void;
+};
+
+export const ItemComposition = ({
+  onAddItem,
+  children,
+  labelAdd,
+  addbuttonDisabled
+}: Props): JSX.Element => {
+  const { classes } = useItemCompositionStyles();
+
+  return (
+    <div className={classes.itemCompositionContainer}>
+      {children}
+      <Button
+        aria-label={labelAdd}
+        data-testid={labelAdd}
+        disabled={addbuttonDisabled}
+        icon={<AddIcon />}
+        iconVariant="start"
+        size="small"
+        variant="ghost"
+        onClick={onAddItem}
+      >
+        {labelAdd}
+      </Button>
+    </div>
+  );
+};

package/src/components/ItemComposition/index.ts

@@ -0,0 +1,6 @@
+import { ItemComposition as ItemCompositionRoot } from './ItemComposition';
+import { Item } from './Item';
+
+export const ItemComposition = Object.assign(ItemCompositionRoot, {
+  Item
+});

package/src/components/Modal/Modal.styles.ts

@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme) => ({
       width: '400px'
     },
     '&[data-size="xlarge"] .MuiDialog-paper': {
-      maxWidth: '1200px',
+      maxWidth: '1400px',
       width: 'calc(100% - 64px)'
     }
   },

package/src/components/index.ts

@@ -7,3 +7,4 @@ export * from './Layout';
 export * from './Tooltip';
 export * from './Menu';
 export * from './List';
+export * from './ItemComposition';

package/src/index.ts

@@ -123,6 +123,7 @@ export type {
 export { default as Responsive } from './Responsive';
 export { default as useFetchQuery } from './api/useFetchQuery';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
+export { default as useGraphQuery } from './api/useGraphQuery';
 export { default as QueryProvider } from './api/QueryProvider';
 export {
   default as FileDropZone,
@@ -143,3 +144,5 @@ export type { ResponseError, CatchErrorProps } from './api/customFetch';
 export * from './utils';
 export { default as FluidTypography } from './Typography/FluidTypography';
 export * from './Dashboard';
+export { default as Graph } from './Graph';
+export type { GraphData } from './Graph/models';