@centreon/ui 25.3.3 → 25.4.0-MON-191119-npm-develop.0

package/src/api/useGraphQuery/index.ts

@@ -36,6 +36,7 @@ interface UseMetricsQueryProps {
     start?: string | null;
     timePeriodType: number;
   };
+  isEnabled?: boolean;
 }
 
 interface UseMetricsQueryState {
@@ -46,6 +47,12 @@ interface UseMetricsQueryState {
   start: string;
 }
 
+interface FormatLegend {
+  host?: string | null;
+  service?: string | null;
+  metric: string;
+}
+
 const getStartEndFromTimePeriod = (
   timePeriod: number
 ): { end: string; start: string } => {
@@ -95,7 +102,8 @@ const useGraphQuery = ({
   refreshInterval = false,
   refreshCount,
   bypassQueryParams = false,
-  prefix
+  prefix,
+  isEnabled = true
 }: UseMetricsQueryProps): UseMetricsQueryState => {
   const timePeriodToUse = equals(timePeriod?.timePeriodType, -1)
     ? {
@@ -152,7 +160,10 @@ const useGraphQuery = ({
       refreshCount || 0
     ],
     queryOptions: {
-      enabled: areResourcesFullfilled(resources) && !isEmpty(definedMetrics),
+      enabled:
+        areResourcesFullfilled(resources) &&
+        !isEmpty(definedMetrics) &&
+        isEnabled,
       refetchInterval: refreshInterval,
       suspense: false
     },
@@ -164,22 +175,107 @@ const useGraphQuery = ({
     data.current = graphData;
   }
 
+  const getCurrentMetrics = () => {
+    if (!data.current) {
+      return undefined;
+    }
+
+    return bypassMetricsExclusion
+      ? data.current.metrics
+      : data.current.metrics.filter(({ metric_id }) => {
+          return pipe(
+            pluck('excludedMetrics'),
+            flatten,
+            includes(metric_id),
+            not
+          )(metrics);
+        });
+  };
+
+  const formatLegend = ({
+    host = null,
+    service = null,
+    metric
+  }: FormatLegend) => {
+    if (!host && !service) {
+      return metric;
+    }
+
+    if (!host) {
+      return `${service}: ${metric}`;
+    }
+
+    if (!service) {
+      return `${host}: ${metric}`;
+    }
+
+    return `${host} ${service}: ${metric}`;
+  };
+
+  const getFormattedMetrics = () => {
+    const metrics = getCurrentMetrics();
+
+    if (equals(metrics?.length, 1)) {
+      return metrics?.map((line) => {
+        const formattedLegend = formatLegend({
+          host: line?.host_name,
+          service: line?.service_name,
+          metric: line?.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      });
+    }
+
+    return metrics?.map((line) => {
+      const areHostNameRedundant = metrics.every(({ host_name }) =>
+        equals(host_name, line.host_name)
+      );
+      const areServiceNameRedundant = metrics.every(({ service_name }) =>
+        equals(service_name, line.service_name)
+      );
+
+      if (areHostNameRedundant && areServiceNameRedundant) {
+        const formattedLegend = formatLegend({ metric: line.metric });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      if (areHostNameRedundant) {
+        const formattedLegend = formatLegend({
+          service: line.service_name,
+          metric: line.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      if (areServiceNameRedundant) {
+        const formattedLegend = formatLegend({
+          host: line.host_name,
+          metric: line.metric
+        });
+
+        return { ...line, legend: formattedLegend };
+      }
+
+      const formattedLegend = formatLegend({
+        host: line.host_name,
+        service: line.service_name,
+        metric: line.metric
+      });
+
+      return { ...line, legend: formattedLegend };
+    });
+  };
+
   const formattedGraphData = data.current
     ? {
         global: {
           base: data.current.base,
           title: ''
         },
-        metrics: bypassMetricsExclusion
-          ? data.current.metrics
-          : data.current.metrics.filter(({ metric_id }) => {
-              return pipe(
-                pluck('excludedMetrics'),
-                flatten,
-                includes(metric_id),
-                not
-              )(metrics);
-            }),
+        metrics: getFormattedMetrics(),
         times: data.current.times
       }
     : undefined;

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Avatar from './Avatar';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof Avatar> = {
   component: Avatar

package/src/components/Button/Button.module.css

@@ -0,0 +1,38 @@
+.button {
+  &[data-size="medium"] {
+    font-size: 16px;
+    height: unset;
+    line-height: 24px;
+  }
+
+  &[data-size="small"] {
+    &[data-variant="primary"] {
+      padding-left: var(--spacing-4);
+      padding-right: var(--spacing-4);
+    }
+
+    font-size: 14px;
+    height: unset;
+    line-height: 22px;
+  }
+
+  &[data-variant="primary"]:not(:disabled) {
+    &[data-is-danger="true"] {
+      background-color: var(--color-error-main);
+    }
+
+    background-color: var(--color-primary-main);
+  }
+
+  &[data-variant="secondary"]:not(:disabled) {
+    &[data-is-danger="true"] {
+      border-color: var(--color-error-main);
+      color: var(--color-error-main);
+    }
+
+    border-color: var(--color-primary-main);
+    color: var(--color-primary-main);
+  }
+
+  text-wrap: nowrap;
+}

package/src/components/Button/Button.stories.tsx

@@ -1,3 +1,4 @@
+import '../../ThemeProvider/tailwindcss.css';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { Add as AddIcon } from '@mui/icons-material';
@@ -32,3 +33,27 @@ export const AsDanger: Story = {
     isDanger: true
   }
 };
+
+export const small: Story = {
+  args: {
+    ...Default.args,
+    size: 'small'
+  }
+};
+
+export const smallWithIcon: Story = {
+  args: {
+    ...Default.args,
+    size: 'small',
+    icon: <AddIcon />,
+    iconVariant: 'start'
+  }
+};
+
+export const smallDanger: Story = {
+  args: {
+    ...Default.args,
+    size: 'small',
+    isDanger: true
+  }
+};

package/src/components/Button/Button.tsx

@@ -7,8 +7,7 @@ import {
 
 import { AriaLabelingAttributes } from '../../@types/aria-attributes';
 import { DataTestAttributes } from '../../@types/data-attributes';
-
-import { useStyles } from './Button.styles';
+import { button } from './Button.module.css';
 
 const muiVariantMap: Record<
   Required<ButtonProps>['variant'],
@@ -48,8 +47,6 @@ const Button = ({
   className = '',
   ...attr
 }: ButtonProps): ReactElement => {
-  const { classes, cx } = useStyles();
-
   const MuiOverrideProps = useMemo(
     () => ({
       color: 'primary' as const,
@@ -61,7 +58,7 @@ const Button = ({
 
   return (
     <MuiButton
-      className={cx(classes.button, className)}
+      className={`${button} ${className}`}
       data-icon-variant={iconVariant}
       data-is-danger={isDanger}
       data-size={size}

package/src/components/CrudPage/Actions/Actions.styles.ts

@@ -2,7 +2,21 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useActionsStyles = makeStyles()((theme) => ({
   search: {
-    maxWidth: theme.spacing(50)
+    maxWidth: theme.spacing(60),
+    minWidth: theme.spacing(20),
+    width: '100%'
+  },
+  filters: {
+    width: '100%',
+    paddingInline: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actions: {
+    display: 'grid',
+    gridTemplateColumns: 'min-content auto',
+    gap: theme.spacing(1)
   },
   clearButton: {
     alignSelf: 'flex-start'

package/src/components/CrudPage/Actions/Actions.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@mui/material';
+import { useActionsStyles } from './Actions.styles';
 import AddButton from './AddButton';
 import Search from './Search';
 
@@ -11,12 +12,14 @@ interface Props {
 }
 
 const Actions = ({ labels, filters }: Props): JSX.Element => {
+  const { classes } = useActionsStyles();
+
   return (
-    <Box
-      sx={{ display: 'grid', gridTemplateColumns: 'min-content auto', gap: 2 }}
-    >
+    <Box className={classes.actions}>
       <AddButton label={labels.add} />
-      <Search label={labels.search} filters={filters} />
+      <div className={classes.filters}>
+        <Search label={labels.search} filters={filters} />
+      </div>
     </Box>
   );
 };

package/src/components/CrudPage/Actions/Search.tsx

@@ -14,21 +14,22 @@ const Search = ({ label, filters }: Props): JSX.Element => {
   const { change } = useSearch();
 
   return (
-    <SearchField
-      className={classes.search}
-      debounced
-      fullWidth
-      dataTestId={label}
-      placeholder={label}
-      onChange={change}
-      textFieldSlotsAndSlotProps={{
-        slotProps: {
-          input: {
-            endAdornment: <Filters label="filters" filters={filters} />
+    <div className={classes.search}>
+      <SearchField
+        debounced
+        fullWidth
+        dataTestId={label}
+        placeholder={label}
+        onChange={change}
+        textFieldSlotsAndSlotProps={{
+          slotProps: {
+            input: {
+              endAdornment: <Filters label="filters" filters={filters} />
+            }
           }
-        }
-      }}
-    />
+        }}
+      />
+    </div>
   );
 };
 

package/src/components/CrudPage/CrudPage.stories.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, useEffect } from 'react';
 import { CrudPage } from '.';
 import { SnackbarProvider } from '../../';
 import { Column, ColumnType } from '../../Listing/models';
+import '../../ThemeProvider/tailwindcss.css';
 
 interface Item {
   id: number;

package/src/components/CrudPage/CrudPageRoot.tsx

@@ -97,7 +97,7 @@ export const CrudPageRoot = <
             {isDataEmpty && !isLoading ? (
               <DataTable.EmptyState
                 aria-label="create"
-                data-testid="create-agent-configuration"
+                buttonCreateTestId="create-crudpage"
                 labels={{
                   title: labels.welcome.title,
                   description: labels.welcome.description,

package/src/components/DataTable/DataTable.stories.tsx

@@ -5,6 +5,7 @@ import { Box } from '@mui/material';
 import { ColumnType } from '../../Listing/models';
 
 import { DataTable } from './index';
+import '../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTable> = {
   component: DataTable

package/src/components/DataTable/EmptyState/DataTableEmptyState.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableEmptyState } from './DataTableEmptyState';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableEmptyState> = {
   component: DataTableEmptyState

package/src/components/DataTable/EmptyState/DataTableEmptyState.styles.ts

@@ -6,6 +6,7 @@ const useStyles = makeStyles()((theme) => ({
     flexDirection: 'row'
   },
   dataTableEmptyState: {
+    marginTop: theme.spacing(3),
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
@@ -21,7 +22,8 @@ const useStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   description: {
-    maxWidth: '65%'
+    maxWidth: '65%',
+    textAlign: 'center'
   }
 }));
 

package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx

@@ -19,12 +19,14 @@ type ListEmptyStateProps = {
     description?: string;
   };
   onCreate?: () => void;
+  buttonCreateTestId?: string;
 };
 
 const DataTableEmptyState = ({
   labels,
   onCreate,
-  canCreate = true
+  canCreate = true,
+  buttonCreateTestId
 }: ListEmptyStateProps): ReactElement => {
   const { classes } = useStyles();
   const { t } = useTranslation();
@@ -47,6 +49,7 @@ const DataTableEmptyState = ({
             icon={<AddIcon />}
             iconVariant="start"
             onClick={() => onCreate?.()}
+            data-testid={buttonCreateTestId}
           >
             {t(labels.actions?.create || '')}
           </Button>

package/src/components/DataTable/Item/DataTableItem.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { DataTableItem } from './DataTableItem';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof DataTableItem> = {
   component: DataTableItem

package/src/components/Form/AccessRights/AccessRights.stories.tsx

@@ -12,6 +12,7 @@ import {
   labels,
   roles
 } from './storiesData';
+import '../../../ThemeProvider/tailwindcss.css';
 
 const meta: Meta<typeof AccessRights> = {
   component: AccessRights,

package/src/components/Form/AccessRights/ShareInput/ShareInput.tsx

@@ -8,6 +8,7 @@ import { SelectEntry, SingleConnectedAutocompleteField } from '../../../..';
 import RoleSelectField from '../common/RoleSelectField';
 import { Endpoints, Labels } from '../models';
 
+import { ReactElement } from 'react';
 import ContactSwitch from './ContactSwitch';
 import { useShareInputStyles } from './ShareInput.styles';
 import useShareInput from './useShareInput';
@@ -18,18 +19,18 @@ interface Props {
   roles: Array<SelectEntry>;
 }
 
-const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
+const ShareInput = ({ labels, endpoints, roles }: Props): ReactElement => {
   const { t } = useTranslation();
   const { classes } = useShareInputStyles();
 
   const {
-    renderOption,
     selectedContact,
     getOptionDisabled,
     getEndpoint,
     selectContact,
     isContactGroup,
     selectedRole,
+    getRenderedOptionText,
     setSelectedRole,
     add,
     changeIdValue
@@ -46,6 +47,7 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
           disableClearable={false}
           field="name"
           getEndpoint={getEndpoint}
+          getRenderedOptionText={getRenderedOptionText}
           getOptionDisabled={getOptionDisabled}
           label={t(
             isContactGroup
@@ -53,7 +55,6 @@ const ShareInput = ({ labels, endpoints, roles }: Props): JSX.Element => {
               : t(labels.autocompleteContact)
           )}
           queryKey={isContactGroup ? labels.contactGroup : labels.contact}
-          renderOption={renderOption}
           value={selectedContact}
           onChange={selectContact}
         />

package/src/components/Form/AccessRights/ShareInput/useShareInput.tsx

@@ -1,10 +1,15 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  ReactElement,
+  SetStateAction,
+  useEffect,
+  useState
+} from 'react';
 
 import { useAtomValue, useSetAtom } from 'jotai';
 import { equals, includes, isNil } from 'ramda';
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { ListItemText, MenuItem } from '@mui/material';
 
 import { SelectEntry, buildListingEndpoint } from '../../../..';
 import {
@@ -20,7 +25,7 @@ interface UseShareInputState {
   getEndpoint: (parameters) => string;
   getOptionDisabled: (option) => boolean;
   isContactGroup: boolean;
-  renderOption: (attr, option) => JSX.Element;
+  getRenderedOptionText: (option: unknown) => ReactElement | string;
   selectContact: (_, entry) => void;
   selectedContact: AccessRightInitialValues | null;
   selectedRole: string;
@@ -40,7 +45,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
 
   const selectContact = (_, entry): void => {
     setSelectedContact(entry);
-    if (equals('editor', entry.most_permissive_role)) {
+    if (equals('editor', entry?.most_permissive_role)) {
       return;
     }
     setSelectedRole('viewer');
@@ -71,14 +76,14 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
       }
     });
 
-  const renderOption = (attr, option): JSX.Element => {
+  const getRenderedOptionText = (option): ReactElement => {
     return (
-      <MenuItem {...attr}>
-        <ListItemText>{option.name}</ListItemText>
-        {includes(option.id, accessRightIds) && (
+      <>
+        {option?.name}
+        {includes(option?.id, accessRightIds) && (
           <CheckCircleIcon color="success" />
         )}
-      </MenuItem>
+      </>
     );
   };
 
@@ -102,7 +107,7 @@ const useShareInput = (endpoints: Endpoints): UseShareInputState => {
     getEndpoint,
     getOptionDisabled,
     isContactGroup,
-    renderOption,
+    getRenderedOptionText,
     selectContact,
     selectedContact,
     selectedRole,

package/src/components/Form/FormActions.tsx

@@ -12,6 +12,8 @@ export type FormActionsProps = {
   labels: FormActionsLabels;
   onCancel: () => void;
   variant: FormVariant;
+  isCancelButtonVisible?: boolean;
+  disableSubmit?: boolean;
 };
 
 export type FormActionsLabels = {
@@ -23,27 +25,34 @@ const FormActions = <TResource extends object>({
   labels,
   onCancel,
   variant,
-  enableSubmitWhenNotDirty
+  enableSubmitWhenNotDirty,
+  isCancelButtonVisible = true,
+  disableSubmit = false
 }: FormActionsProps): ReactElement => {
   const { classes } = useStyles();
   const { isSubmitting, dirty, isValid, submitForm } =
     useFormikContext<TResource>();
 
   const isSubmitDisabled =
-    isSubmitting || (!dirty && !enableSubmitWhenNotDirty) || !isValid;
+    disableSubmit ||
+    isSubmitting ||
+    (!dirty && !enableSubmitWhenNotDirty) ||
+    !isValid;
 
   return (
     <div className={classes.actions}>
-      <Button
-        aria-label={labels.cancel}
-        data-testid="cancel"
-        disabled={isSubmitting}
-        size="medium"
-        variant="secondary"
-        onClick={() => onCancel?.()}
-      >
-        {labels.cancel}
-      </Button>
+      {isCancelButtonVisible && (
+        <Button
+          aria-label={labels.cancel}
+          data-testid="cancel"
+          disabled={isSubmitting}
+          size="medium"
+          variant="secondary"
+          onClick={() => onCancel?.()}
+        >
+          {labels.cancel}
+        </Button>
+      )}
       <Button
         aria-label={labels.submit[variant]}
         data-testid="submit"

package/src/components/Header/PageHeader/PageHeader.styles.ts

@@ -25,9 +25,10 @@ const useStyles = makeStyles()((theme) => ({
   },
   pageHeader: {
     alignItems: 'center',
-    borderBottom: `1px solid ${theme.palette.header.page.border}`,
+    borderBottom: `2px solid ${theme.palette.header.page.border}`,
     display: 'flex',
-    gap: theme.spacing(4)
+    gap: theme.spacing(4),
+    paddingBottom: theme.spacing(0.5)
   },
   pageHeaderActions: {
     '& > button': {
@@ -46,8 +47,7 @@ const useStyles = makeStyles()((theme) => ({
   pageHeaderMain: {
     display: 'flex',
     flexGrow: 1,
-    gap: theme.spacing(1),
-    minHeight: theme.spacing(4.5)
+    gap: theme.spacing(1)
   },
   pageHeaderMenu: {
     alignItems: 'flex-start',
@@ -96,7 +96,7 @@ const useStyles = makeStyles()((theme) => ({
     alignSelf: 'flex-start',
     h1: {
       ...theme.typography.h5,
-      fontWeight: theme.typography.fontWeightMedium,
+      fontWeight: theme.typography.fontWeightBold,
       margin: theme.spacing(0),
       lineHeight: '1'
     }

package/src/components/Layout/AreaIndicator.tsx

@@ -1,7 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
 
-import { useStyles } from './AreaIndicator.styles';
-
 type AreaIndicatorProps = {
   children?: ReactNode | Array<ReactNode>;
   depth?: number;
@@ -17,16 +15,16 @@ const AreaIndicator = ({
   height = '100%',
   depth = 0
 }: AreaIndicatorProps): ReactElement => {
-  const { classes } = useStyles();
-
   return (
     <div
-      className={classes.areaIndicator}
+      className={'bg-secondary-main/25 min-h-8 grid grid-cols-[3fr_1fr]'}
       data-depth={depth}
       style={{ height, width }}
     >
       {/* biome-ignore lint/a11y: */}
-      <label>{name}</label>
+      <label className="left-2 rounded-sm border border-[#9747FF7F] border-dashed text-[#9747FF] text-[0.75rem] font-medium left-2 top-1.5 px-2 py-0.5">
+        {name}
+      </label>
       {children}
     </div>
   );