@centreon/ui 24.4.38 → 24.4.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.38",
+  "version": "24.4.40",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/Graph/LineChart/Legend/index.tsx

@@ -7,7 +7,6 @@ import { Box, alpha, useTheme } from '@mui/material';
 
 import { useMemoComponent } from '@centreon/ui';
 
-import { maxLinesDisplayedLegend } from '../common';
 import { formatMetricValue } from '../../common/timeSeries';
 import { Line, TimeValue } from '../../common/timeSeries/models';
 import { labelAvg, labelMax, labelMin } from '../translatedLabels';
@@ -24,7 +23,7 @@ import LegendContent from './LegendContent';
 interface Props {
   base: number;
   displayAnchor?: boolean;
-  limitLegendRows?: boolean;
+  limitLegend?: false | number;
   lines: Array<Line>;
   renderExtraComponent?: ReactNode;
   setLinesGraph: Dispatch<SetStateAction<Array<Line> | null>>;
@@ -39,14 +38,14 @@ const MainLegend = ({
   timeSeries,
   base,
   toggable = true,
-  limitLegendRows = true,
+  limitLegend = false,
   renderExtraComponent,
   displayAnchor = true,
   setLinesGraph,
   xScale,
   shouldDisplayLegendInCompactMode
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ limitLegendRows });
+  const { classes, cx } = useStyles({ limitLegendRows: Boolean(limitLegend) });
   const theme = useTheme();
 
   const { selectMetricLine, clearHighlight, highlightLine, toggleMetricLine } =
@@ -61,8 +60,8 @@ const MainLegend = ({
 
   const sortedData = sortBy(prop('metric_id'), lines);
 
-  const displayedLines = limitLegendRows
-    ? slice(0, maxLinesDisplayedLegend, sortedData)
+  const displayedLines = limitLegend
+    ? slice(0, limitLegend, sortedData)
     : sortedData;
 
   const getMetricValue = ({ value, unit }: GetMetricValueProps): string =>
@@ -174,7 +173,7 @@ const MainLegend = ({
 const Legend = (props: Props): JSX.Element => {
   const {
     toggable,
-    limitLegendRows,
+    limitLegend,
     timeSeries,
     lines,
     base,
@@ -191,7 +190,7 @@ const Legend = (props: Props): JSX.Element => {
       lines,
       base,
       toggable,
-      limitLegendRows,
+      limitLegend,
       displayAnchor,
       shouldDisplayLegendInCompactMode
     ]

package/src/Graph/LineChart/LineChart.tsx

@@ -43,6 +43,7 @@ interface Props extends LineChartProps {
   graphInterval: GraphInterval;
   graphRef: MutableRefObject<HTMLDivElement | null>;
   legend?: LegendModel;
+  limitLegend?: false | number;
   marginBottom: number;
   shapeLines?: GlobalAreaLines;
   thresholdUnit?: string;
@@ -73,7 +74,8 @@ const LineChart = ({
   curve,
   marginBottom,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element => {
   const { classes } = useStyles();
 
@@ -301,6 +303,7 @@ const LineChart = ({
           <Legend
             base={baseAxis}
             displayAnchor={displayAnchor?.displayGuidingLines ?? true}
+            limitLegend={limitLegend}
             lines={newLines}
             renderExtraComponent={legend?.renderExtraComponent}
             setLinesGraph={setLinesGraph}

package/src/Graph/LineChart/index.tsx

@@ -28,6 +28,7 @@ interface Props extends Partial<LineChartProps> {
   data?: LineChartData;
   end: string;
   legend: LegendModel;
+  limitLegend?: false | number;
   loading: boolean;
   marginBottom?: number;
   shapeLines?: GlobalAreaLines;
@@ -55,7 +56,8 @@ const WrapperLineChart = ({
   curve = Curve.curveLinear,
   marginBottom = 0,
   thresholds,
-  thresholdUnit
+  thresholdUnit,
+  limitLegend
 }: Props): JSX.Element | null => {
   const { adjustedData } = useLineChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -95,6 +97,7 @@ const WrapperLineChart = ({
               header={header}
               height={height || responsiveHeight}
               legend={legend}
+              limitLegend={limitLegend}
               loading={loading}
               marginBottom={marginBottom}
               shapeLines={shapeLines}

package/src/api/useGraphQuery/index.ts

@@ -1,11 +1,20 @@
 import { useRef } from 'react';
 
-import { equals, has, isEmpty, pluck } from 'ramda';
+import {
+  equals,
+  flatten,
+  has,
+  includes,
+  isEmpty,
+  not,
+  pipe,
+  pluck
+} from 'ramda';
 import dayjs from 'dayjs';
 
 import { LineChartData, buildListingEndpoint, useFetchQuery } from '../..';
 
-import { Resource, WidgetResourceType } from './models';
+import { Metric, Resource, WidgetResourceType } from './models';
 
 interface CustomTimePeriod {
   end: string;
@@ -14,7 +23,9 @@ interface CustomTimePeriod {
 
 interface UseMetricsQueryProps {
   baseEndpoint: string;
-  metrics: Array<string>;
+  bypassMetricsExclusion?: boolean;
+  includeAllResources?: boolean;
+  metrics: Array<Metric>;
   refreshCount?: number;
   refreshInterval?: number | false;
   resources?: Array<Resource>;
@@ -71,6 +82,7 @@ const areResourcesFullfilled = (value: Array<Resource>): boolean =>
   );
 
 const useGraphQuery = ({
+  bypassMetricsExclusion,
   metrics,
   resources = [],
   baseEndpoint,
@@ -93,7 +105,7 @@ const useGraphQuery = ({
 
   const definedMetrics = metrics.filter((metric) => metric);
   const formattedDefinedMetrics = definedMetrics.map((metric) =>
-    encodeURIComponent(metric)
+    encodeURIComponent(metric.name)
   );
 
   const {
@@ -145,7 +157,16 @@ const useGraphQuery = ({
           base: data.current.base,
           title: ''
         },
-        metrics: data.current.metrics,
+        metrics: bypassMetricsExclusion
+          ? data.current.metrics
+          : data.current.metrics.filter(({ metric_id }) => {
+              return pipe(
+                pluck('excludedMetrics'),
+                flatten,
+                includes(metric_id),
+                not
+              )(metrics);
+            }),
         times: data.current.times
       }
     : undefined;

package/src/api/useGraphQuery/models.ts

@@ -13,3 +13,8 @@ export enum WidgetResourceType {
   serviceCategory = 'service-category',
   serviceGroup = 'service-group'
 }
+
+export interface Metric {
+  excludedMetrics: Array<number>;
+  name: string;
+}

package/src/components/CollapsibleItem/CollapsibleItem.cypress.spec.tsx

@@ -0,0 +1,76 @@
+import { CollapsibleItem, Props } from './CollapsibleItem';
+
+const title = 'Title';
+
+const customizedTitle = <div>Customized title</div>;
+
+const initialize = (props: Omit<Props, 'children'>): void => {
+  cy.mount({
+    Component: <CollapsibleItem {...props}>Content</CollapsibleItem>
+  });
+};
+
+describe('CollapsibleItem', () => {
+  it('displays the component collapsed by default', () => {
+    initialize({ title });
+
+    cy.contains(title).should('be.visible');
+    cy.contains('Content').should('not.be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component expanded when the corresponding prop is set to true', () => {
+    initialize({ defaultExpanded: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.contains('Content').should('be.visible');
+    cy.get('div[aria-expanded="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a customized title', () => {
+    initialize({ title: customizedTitle });
+
+    cy.contains('Customized title').should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact', () => {
+    initialize({ compact: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('div[data-compact="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact and expanded when the icon is clicked', () => {
+    initialize({ compact: true, title });
+
+    cy.contains(title).should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+
+    cy.get('div[aria-expanded="false"]').click();
+
+    cy.get('div[aria-expanded="true"]').should('exist');
+    cy.contains('Content').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component as compact and a customized title', () => {
+    initialize({ compact: true, title: customizedTitle });
+
+    cy.contains('Customized title').should('be.visible');
+    cy.get('div[aria-expanded="false"]').should('exist');
+    cy.get('div[data-compact="true"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/components/CollapsibleItem/CollapsibleItem.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { Checkbox, Typography } from '@mui/material';
+
 import { CollapsibleItem } from './CollapsibleItem';
 
 const meta: Meta<typeof CollapsibleItem> = {
@@ -23,3 +25,27 @@ export const ExpandedByDefault: Story = {
     title: 'Title'
   }
 };
+
+export const customizedTitle: Story = {
+  args: {
+    children: 'Label',
+    defaultExpanded: false,
+    title: <Typography>Title</Typography>
+  }
+};
+
+export const customizedTitleAndCompact: Story = {
+  args: {
+    children: 'Label',
+    compact: true,
+    defaultExpanded: false,
+    title: (
+      <div
+        style={{ alignItems: 'center', display: 'flex', flexDirection: 'row' }}
+      >
+        <Checkbox size="small" />
+        <Typography>Title compact</Typography>
+      </div>
+    )
+  }
+};

package/src/components/CollapsibleItem/CollapsibleItem.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import { equals, type } from 'ramda';
+
 import {
   AccordionDetails,
   AccordionSummary,
@@ -10,36 +12,63 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 import { useCollapsibleItemStyles } from './useCollapsibleItemStyles';
 
-interface Props {
+export interface Props {
   children: ReactNode;
+  compact?: boolean;
+  dataTestId?: string;
   defaultExpanded?: boolean;
-  title: string;
+  title: string | JSX.Element;
 }
 
 export const CollapsibleItem = ({
   title,
   children,
-  defaultExpanded
+  defaultExpanded,
+  compact = false,
+  dataTestId = ''
 }: Props): JSX.Element => {
-  const { classes } = useCollapsibleItemStyles();
+  const { classes, cx } = useCollapsibleItemStyles();
+
+  const isStringTitle = equals(type(title), 'String');
 
   return (
     <Accordion
       disableGutters
       className={classes.accordion}
+      data-compact={compact}
+      data-testid={`${dataTestId}-accordion`}
       defaultExpanded={defaultExpanded}
     >
-      <AccordionSummary
-        classes={{
-          content: classes.accordionSummary
-        }}
-        expandIcon={<ExpandMoreIcon color="primary" />}
+      <div className={classes.summaryContainer}>
+        <div className={classes.customTitle}>{!isStringTitle && title}</div>
+        <AccordionSummary
+          classes={{
+            content: cx(
+              compact
+                ? classes.accordionSummaryCompactContent
+                : classes.accordionSummary
+            ),
+            root: cx(
+              compact
+                ? classes.accordionSummaryCompactRoot
+                : classes.accordionSummaryRoot
+            )
+          }}
+          data-testid={`${dataTestId}-summary`}
+          expandIcon={<ExpandMoreIcon color="primary" />}
+        >
+          {isStringTitle && (
+            <Typography color="primary" variant="h6">
+              {title}
+            </Typography>
+          )}
+        </AccordionSummary>
+      </div>
+      <AccordionDetails
+        className={cx(
+          compact ? classes.accordionDetailsCompact : classes.accordionDetails
+        )}
       >
-        <Typography color="primary" variant="h6">
-          {title}
-        </Typography>
-      </AccordionSummary>
-      <AccordionDetails className={classes.accordionDetails}>
         {children}
       </AccordionDetails>
     </Accordion>

package/src/components/CollapsibleItem/useCollapsibleItemStyles.ts

@@ -4,12 +4,35 @@ export const useCollapsibleItemStyles = makeStyles()((theme) => ({
   accordion: {
     backgroundColor: 'transparent',
     border: 'none',
-    borderBottom: `1px solid ${theme.palette.divider}`
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    width: '100%'
   },
   accordionDetails: {
     padding: theme.spacing(0, 2, 2)
   },
+  accordionDetailsCompact: {
+    padding: theme.spacing(0)
+  },
   accordionSummary: {
     margin: theme.spacing(1.5, 0)
+  },
+  accordionSummaryCompactContent: {
+    margin: theme.spacing(0, 0, 0.5)
+  },
+  accordionSummaryCompactRoot: {
+    minHeight: theme.spacing(1),
+    width: '100%'
+  },
+  accordionSummaryRoot: {
+    width: '100%'
+  },
+  customTitle: {
+    whiteSpace: 'nowrap'
+  },
+  summaryContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%'
   }
 }));

package/src/components/ItemComposition/Item.tsx

@@ -7,7 +7,7 @@ import { IconButton } from '..';
 import { useItemStyles } from './ItemComposition.styles';
 
 type Props = {
-  children: Array<ReactElement>;
+  children: ReactElement | Array<ReactElement>;
   className?: string;
   deleteButtonHidden?: boolean;
   labelDelete: string;

package/src/components/ItemComposition/ItemComposition.cypress.spec.tsx

@@ -0,0 +1,116 @@
+import { ItemComposition } from '.';
+
+interface Props {
+  addButtonHidden?: boolean;
+  addbuttonDisabled?: boolean;
+  deleteButtonHidden?: boolean;
+  secondaryLabel?: string;
+}
+
+const initialize = ({
+  addButtonHidden,
+  addbuttonDisabled,
+  secondaryLabel,
+  deleteButtonHidden
+}: Props): unknown => {
+  const addItem = cy.stub();
+  const deleteItem = cy.stub();
+
+  cy.mount({
+    Component: (
+      <ItemComposition
+        addButtonHidden={addButtonHidden}
+        addbuttonDisabled={addbuttonDisabled}
+        labelAdd="Add"
+        secondaryLabel={secondaryLabel}
+        onAddItem={addItem}
+      >
+        <ItemComposition.Item
+          deleteButtonHidden={deleteButtonHidden}
+          labelDelete="Delete"
+          onDeleteItem={deleteItem}
+        >
+          <div>Item 1</div>
+        </ItemComposition.Item>
+        <ItemComposition.Item
+          deleteButtonHidden={deleteButtonHidden}
+          labelDelete="Delete"
+          onDeleteItem={deleteItem}
+        >
+          <div>Item 2</div>
+        </ItemComposition.Item>
+      </ItemComposition>
+    )
+  });
+
+  return {
+    addItem,
+    deleteItem
+  };
+};
+
+describe('ItemComposition', () => {
+  it('displays the component', () => {
+    initialize({});
+
+    cy.contains('Item 1').should('be.visible');
+    cy.contains('Item 2').should('be.visible');
+    cy.findAllByTestId('Delete').should('have.length', 2);
+    cy.findByTestId('Add').should('be.enabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the component with a secondary label', () => {
+    initialize({ secondaryLabel: 'Secondary label' });
+
+    cy.contains('Secondary label').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays add button as hidden when the prop is set to true', () => {
+    initialize({ addbuttonDisabled: true });
+
+    cy.findByTestId('Add').should('be.disabled');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the add button when the prop is set to true', () => {
+    initialize({ addButtonHidden: true });
+
+    cy.findByTestId('Add').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the delete button when the prop is set to true', () => {
+    initialize({ deleteButtonHidden: true });
+
+    cy.findByTestId('Delete').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('calls the add function when the button is clicked', () => {
+    const { addItem } = initialize({});
+
+    cy.findByTestId('Add')
+      .click()
+      .then(() => {
+        expect(addItem).to.have.been.calledWith();
+      });
+  });
+
+  it('calls the delete function when the button is clicked', () => {
+    const { deleteItem } = initialize({});
+
+    cy.findAllByTestId('Delete')
+      .eq(1)
+      .click()
+      .then(() => {
+        expect(deleteItem).to.have.been.calledWith();
+      });
+  });
+});

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

@@ -1,6 +1,13 @@
 import { makeStyles } from 'tss-react/mui';
 
 export const useItemCompositionStyles = makeStyles()((theme) => ({
+  buttonAndSecondaryLabel: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  },
   itemCompositionContainer: {
     alignItems: 'flex-start',
     display: 'flex',
@@ -24,6 +31,6 @@ export const useItemStyles = makeStyles()((theme) => ({
     width: '100%'
   },
   visibilityHiden: {
-    visibility: 'hidden'
+    display: 'none'
   }
 }));

package/src/components/ItemComposition/ItemComposition.tsx

@@ -1,18 +1,20 @@
 import { ReactElement } from 'react';
 
 import AddIcon from '@mui/icons-material/Add';
+import { Typography } from '@mui/material';
 
 import { Button } from '..';
 
 import { useItemCompositionStyles } from './ItemComposition.styles';
 
-type Props = {
+export type Props = {
   IconAdd?;
   addButtonHidden?: boolean;
   addbuttonDisabled?: boolean;
   children: Array<ReactElement>;
   labelAdd: string;
   onAddItem: () => void;
+  secondaryLabel?: string;
 };
 
 export const ItemComposition = ({
@@ -21,27 +23,35 @@ export const ItemComposition = ({
   labelAdd,
   addbuttonDisabled,
   addButtonHidden,
-  IconAdd
+  IconAdd,
+  secondaryLabel
 }: Props): JSX.Element => {
   const { classes } = useItemCompositionStyles();
 
   return (
     <div className={classes.itemCompositionContainer}>
       {children}
-      {!addButtonHidden && (
-        <Button
-          aria-label={labelAdd}
-          data-testid={labelAdd}
-          disabled={addbuttonDisabled}
-          icon={IconAdd || <AddIcon />}
-          iconVariant="start"
-          size="small"
-          variant="ghost"
-          onClick={onAddItem}
-        >
-          {labelAdd}
-        </Button>
-      )}
+      <div className={classes.buttonAndSecondaryLabel}>
+        {!addButtonHidden && (
+          <Button
+            aria-label={labelAdd}
+            data-testid={labelAdd}
+            disabled={addbuttonDisabled}
+            icon={IconAdd || <AddIcon />}
+            iconVariant="start"
+            size="small"
+            variant="ghost"
+            onClick={onAddItem}
+          >
+            {labelAdd}
+          </Button>
+        )}
+        {secondaryLabel && (
+          <Typography sx={{ color: 'text.secondary' }}>
+            {secondaryLabel}
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };