@centreon/ui 24.4.48 → 24.4.49

package/src/Form/Inputs/List/List.tsx

@@ -0,0 +1,58 @@
+import { ComponentType } from 'react';
+
+import { closestCenter } from '@dnd-kit/core';
+import { verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { useTranslation } from 'react-i18next';
+
+import { InputPropsWithoutGroup } from '../models';
+import { SortableItems, Subtitle } from '../../..';
+
+import { useList } from './useList';
+import { useListStyles } from './List.styles';
+import Content, { ContentProps } from './Content';
+
+const List = ({
+  list,
+  fieldName
+}: InputPropsWithoutGroup): JSX.Element | null => {
+  const { t } = useTranslation();
+  const { classes } = useListStyles();
+
+  const { addItem, sortList, sortedList, deleteItem } = useList({ fieldName });
+
+  const { AddItem, addItemLabel, sortLabel, SortContent, itemProps } = list as {
+    AddItem: ComponentType<{ addItem }>;
+    SortContent: ComponentType;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
+
+  return (
+    <div className={classes.list}>
+      {addItemLabel && <Subtitle>{t(addItemLabel)}</Subtitle>}
+      <AddItem addItem={addItem} />
+      {sortLabel && <Subtitle>{t(sortLabel)}</Subtitle>}
+      <div className={classes.items}>
+        <SortableItems
+          updateSortableItemsOnItemsChange
+          // eslint-disable-next-line react/no-unstable-nested-components
+          Content={(props: Omit<ContentProps, 'children' | 'deleteItem'>) => (
+            <Content {...props} deleteItem={deleteItem}>
+              <SortContent {...props} />
+            </Content>
+          )}
+          collisionDetection={closestCenter}
+          itemProps={itemProps}
+          items={sortedList}
+          sortingStrategy={verticalListSortingStrategy}
+          onDragEnd={({ items }): void => {
+            sortList(items);
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default List;

package/src/Form/Inputs/List/useList.ts

@@ -0,0 +1,81 @@
+import { useMemo, useRef } from 'react';
+
+import { FormikValues, useFormikContext } from 'formik';
+import {
+  append,
+  equals,
+  inc,
+  isEmpty,
+  pluck,
+  prop,
+  reject,
+  sortBy
+} from 'ramda';
+
+import { SelectEntry } from '../../..';
+
+interface UseListState {
+  addItem: (newItem: SelectEntry) => void;
+  deleteItem: (id: string) => () => void;
+  sortList: (items: Array<string>) => void;
+  sortedList: Array<unknown>;
+}
+
+export const useList = ({ fieldName }): UseListState => {
+  const { values, setFieldValue } = useFormikContext<FormikValues>();
+  const maxOrder = useRef(0);
+
+  const list = values[fieldName];
+
+  const sortedList = useMemo(
+    () =>
+      sortBy(prop('order'), list).map(({ id, ...props }) => ({
+        id: `${id}`,
+        ...props
+      })),
+    [list]
+  );
+
+  const addItem = (newItem: SelectEntry): void => {
+    setFieldValue(
+      fieldName,
+      append(
+        {
+          ...newItem,
+          id: (newItem as SelectEntry).id as number,
+          order: inc(maxOrder.current)
+        },
+        list
+      )
+    );
+  };
+
+  const deleteItem = (id: string) => (): void => {
+    const newItems = reject((item) => equals(Number(id), item.id))(list);
+
+    setFieldValue(fieldName, newItems);
+  };
+
+  const sortList = (items: Array<string>): void => {
+    const newOrderedList = items.map((itemId, idx) => {
+      const item = sortedList.find(({ id }) => equals(id, itemId));
+
+      return {
+        ...item,
+        id: Number(item?.id),
+        order: inc(idx)
+      };
+    });
+
+    setFieldValue(fieldName, newOrderedList);
+  };
+
+  maxOrder.current = isEmpty(list) ? 0 : Math.max(...pluck('order', list));
+
+  return {
+    addItem,
+    deleteItem,
+    sortList,
+    sortedList
+  };
+};

package/src/Form/Inputs/index.tsx

@@ -21,6 +21,7 @@ import CheckboxGroup from './CheckboxGroup';
 import Checkbox from './Checkbox';
 import Custom from './Custom';
 import LoadingSkeleton from './LoadingSkeleton';
+import List from './List/List';
 
 export const getInput = R.cond<
   Array<InputType>,
@@ -66,6 +67,7 @@ export const getInput = R.cond<
     R.equals(InputType.CheckboxGroup) as (b: InputType) => boolean,
     R.always(CheckboxGroup)
   ],
+  [R.equals(InputType.List) as (b: InputType) => boolean, R.always(List)],
   [R.T, R.always(TextInput)]
 ]);
 
@@ -185,7 +187,7 @@ const Inputs = ({
         const hasGroupTitle = R.not(R.isNil(groupName));
 
         const groupProps = hasGroupTitle
-          ? R.find(R.propEq('name', groupName), groups)
+          ? R.find(R.propEq(groupName, 'name'), groups)
           : ({} as Group);
 
         const isFirstElement = areGroupsOpen || R.equals(index, 0);

package/src/Form/Inputs/models.ts

@@ -18,7 +18,8 @@ export enum InputType {
   Grid,
   Custom,
   Checkbox,
-  CheckboxGroup
+  CheckboxGroup,
+  List
 }
 
 interface FieldsTableGetRequiredProps {
@@ -76,6 +77,13 @@ export interface InputProps {
   hideInput?: (values: FormikValues) => boolean;
   inputClassName?: string;
   label: string;
+  list?: {
+    AddItem: React.ComponentType<{ addItem }>;
+    SortContent: React.ComponentType<object>;
+    addItemLabel?: string;
+    itemProps: Array<string>;
+    sortLabel?: string;
+  };
   radio?: {
     options?: Array<{
       label: string | JSX.Element;

package/src/Graph/BarStack/BarStack.cypress.spec.tsx

@@ -0,0 +1,154 @@
+import numeral from 'numeral';
+
+import BarStack from './BarStack';
+import { BarType, BarStackProps } from './models';
+
+const defaultData = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 13 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 62 }
+];
+
+const dataWithNullValues = [
+  { color: '#88B922', label: 'Ok', value: 0 },
+  { color: '#999999', label: 'Unknown', value: 0 },
+  { color: '#F7931A', label: 'Warning', value: 0 },
+  { color: '#FF6666', label: 'Down', value: 0 }
+];
+
+const total = Math.floor(
+  defaultData.reduce((acc, { value }) => acc + value, 0)
+);
+
+const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
+  return (
+    <div data-testid={`tooltip-${label}`} style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const initialize = ({
+  width = '400px',
+  height = '400px',
+  data = defaultData,
+  ...args
+}: Omit<BarStackProps, 'data'> & {
+  data?;
+  height?: string;
+  width?: string;
+}): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height, width }}>
+        <BarStack {...args} data={data} />
+      </div>
+    )
+  });
+};
+
+describe('Bar stack', () => {
+  it('renders Bar stack correctly with provided data', () => {
+    initialize({});
+
+    defaultData.forEach(({ label }) => {
+      cy.findByTestId(label).should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('adjusts size based on the provided width and height', () => {
+    initialize({ displayLegend: false, height: '300px', width: '300px' });
+
+    cy.findByTestId('barStack').should('have.css', 'height', '300px');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a horizontal bar when variant is set to "horizontal"', () => {
+    initialize({ variant: 'horizontal' });
+    cy.get('[data-variant="horizontal"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('renders as a vertical bar when variant is set to "vertical"', () => {
+    initialize({ variant: 'vertical' });
+    cy.get('[data-variant="vertical"]').should('exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays tooltip with correct information on hover', () => {
+    initialize({ TooltipContent });
+
+    defaultData.forEach(({ label, value }) => {
+      cy.findByTestId(label).trigger('mouseover', { force: true });
+
+      cy.findByTestId(`tooltip-${label}`)
+        .should('contain', label)
+        .and('contain', numeral(value).format('0a').toUpperCase());
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('conditionally displays values on rects based on displayValues prop', () => {
+    initialize({ displayValues: true });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', value);
+    });
+
+    initialize({ displayValues: false });
+    cy.findAllByTestId('value').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays values on rects in percentage unit when displayValues is set to true and unit to percentage', () => {
+    initialize({ displayValues: true, unit: 'percentage' });
+    defaultData.forEach(({ value }, index) => {
+      cy.findAllByTestId('value')
+        .eq(index)
+        .children()
+        .eq(0)
+        .should('have.text', `${((value * 100) / total).toFixed(1)}%`);
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays Legend component based on displayLegend prop', () => {
+    initialize({ displayLegend: true });
+    cy.findByTestId('Legend').should('be.visible');
+
+    initialize({ displayLegend: false });
+    cy.findByTestId('Legend').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the title when the title is giving', () => {
+    initialize({ title: 'host' });
+    cy.findByTestId('Title').should('be.visible');
+
+    initialize({});
+    cy.findByTestId('Title').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays a message "No Data Available" when all values are null', () => {
+    initialize({ data: dataWithNullValues, title: 'host' });
+
+    cy.contains('No Data Available');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -0,0 +1,123 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BarType } from './models';
+
+import { BarStack } from '.';
+
+const data = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 63 },
+  { color: '#F7931A', label: 'Warning', value: 16 },
+  { color: '#FF6666', label: 'Down', value: 13 }
+];
+
+const dataWithBigNumbers = [
+  { color: '#88B922', label: 'Ok', value: 260000 },
+  { color: '#999999', label: 'Unknown', value: 1010900 },
+  { color: '#F7931A', label: 'Warning', value: 63114 },
+  { color: '#FF6666', label: 'Down', value: 122222 }
+];
+
+const dataWithSmallNumber = [
+  { color: '#88B922', label: 'Ok', value: 148 },
+  { color: '#999999', label: 'Unknown', value: 42 },
+  { color: '#F7931A', label: 'Warning', value: 7 },
+  { color: '#FF6666', label: 'Down', value: 5 }
+];
+
+const meta: Meta<typeof BarStack> = {
+  component: BarStack
+};
+
+export default meta;
+type Story = StoryObj<typeof BarStack>;
+
+const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
+  return (
+    <div style={{ color }}>
+      {label} : {value}
+    </div>
+  );
+};
+
+const Template = (args): JSX.Element => {
+  return (
+    <div style={{ height: '300px', width: '500px' }}>
+      <BarStack {...args} />
+    </div>
+  );
+};
+
+export const Vertical: Story = {
+  args: { data, title: 'hosts' },
+  render: Template
+};
+
+export const WithoutTitle: Story = {
+  args: { data },
+  render: Template
+};
+
+export const WithPencentage: Story = {
+  args: { data, title: 'hosts', unit: 'percentage' },
+  render: Template
+};
+
+export const WithoutLegend: Story = {
+  args: { data, displayLegend: false, title: 'hosts' },
+
+  render: Template
+};
+
+export const withDisplayedValues: Story = {
+  args: { data, displayValues: true, title: 'hosts' },
+  render: Template
+};
+
+export const WithTooltip: Story = {
+  args: { TooltipContent, data, title: 'hosts' },
+  render: Template
+};
+
+export const WithBigNumbers: Story = {
+  args: {
+    TooltipContent,
+    data: dataWithBigNumbers,
+    displayValues: true,
+    title: 'hosts'
+  },
+  render: Template
+};
+
+export const WithSmallNumbers: Story = {
+  args: {
+    TooltipContent,
+    data: dataWithSmallNumber,
+    displayValues: true,
+    title: 'hosts'
+  },
+  render: Template
+};
+
+export const Horizontal: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayValues: true,
+    title: 'hosts',
+    variant: 'horizontal'
+  },
+  render: Template
+};
+
+export const HorizontalWithoutLegend: Story = {
+  args: {
+    TooltipContent,
+    data,
+    displayLegend: false,
+    displayValues: true,
+    title: 'hosts',
+    variant: 'horizontal'
+  },
+  render: Template
+};

package/src/Graph/BarStack/BarStack.styles.ts

@@ -0,0 +1,36 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useBarStackStyles = makeStyles()((theme) => ({
+  barStackTooltip: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    padding: 0,
+    position: 'relative'
+  },
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1.5),
+    justifyContent: 'center'
+  },
+  svgContainer: {
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.panelGroups,
+    borderRadius: theme.shape.borderRadius,
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  svgWrapper: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(1),
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: theme.typography.h6.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    margin: 0,
+    padding: 0
+  }
+}));

package/src/Graph/BarStack/BarStack.tsx

@@ -0,0 +1,14 @@
+import { ParentSize } from '../..';
+
+import ResponsiveBarStack from './ResponsiveBarStack';
+import { BarStackProps } from './models';
+
+const Bar = (props: BarStackProps): JSX.Element => (
+  <ParentSize>
+    {({ width, height }) => (
+      <ResponsiveBarStack {...props} height={height} width={width} />
+    )}
+  </ParentSize>
+);
+
+export default Bar;