@centreon/ui 24.11.12 → 24.11.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.11.12",
+  "version": "24.11.13",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Timeline/ResponsiveTimeline.tsx

@@ -0,0 +1,147 @@
+import {
+  dateTimeFormat,
+  getXAxisTickFormat,
+  useLocaleDateTimeFormat
+} from '@centreon/ui';
+
+import { Typography, useTheme } from '@mui/material';
+
+import dayjs from 'dayjs';
+
+import { userAtom } from '@centreon/ui-context';
+import { Axis } from '@visx/visx';
+
+import { scaleTime } from '@visx/scale';
+import { BarRounded } from '@visx/shape';
+import { useAtomValue } from 'jotai';
+import { equals } from 'ramda';
+import { useCallback } from 'react';
+import { Tooltip } from '../../components';
+import { margins } from '../common/margins';
+import type { TimelineProps } from './models';
+import { useStyles } from './timeline.styles';
+import { useTimeline } from './useTimeline';
+
+interface Props extends TimelineProps {
+  width: number;
+  height: number;
+}
+
+const axisPadding = 4;
+
+const Timeline = ({
+  data,
+  startDate,
+  endDate,
+  width,
+  height,
+  TooltipContent,
+  tooltipClassName
+}: Props) => {
+  const { classes, cx } = useStyles();
+  const { format } = useLocaleDateTimeFormat();
+  const { timezone } = useAtomValue(userAtom);
+
+  const theme = useTheme();
+
+  const xScale = scaleTime({
+    domain: [new Date(startDate), new Date(endDate)],
+    range: [margins.left, width - margins.right],
+    clamp: true
+  });
+
+  const numTicks = Math.min(Math.ceil(width / 82), 12);
+
+  const { getTimeDifference } = useTimeline();
+
+  const getFormattedStart = useCallback(
+    (start) =>
+      format({
+        date: dayjs(start).tz(timezone).toDate(),
+        formatString: dateTimeFormat
+      }),
+    [dateTimeFormat, timezone]
+  );
+
+  const getFormattedEnd = useCallback(
+    (end) =>
+      format({
+        date: dayjs(end).tz(timezone).toDate(),
+        formatString: dateTimeFormat
+      }),
+    [dateTimeFormat, timezone]
+  );
+
+  return (
+    <svg width={width} height={height + axisPadding}>
+      {data.map(({ start, end, color }, idx) => (
+        <Tooltip
+          hasCaret
+          classes={{
+            tooltip: cx(classes.tooltip, tooltipClassName)
+          }}
+          followCursor={false}
+          key={`rect-${start}--${end}`}
+          label={
+            TooltipContent ? (
+              <TooltipContent
+                start={getFormattedStart(start)}
+                end={getFormattedEnd(end)}
+                color={color}
+                duration={getTimeDifference({
+                  start: dayjs(start),
+                  end: dayjs(end)
+                })}
+              />
+            ) : (
+              <div style={{ color }}>
+                <Typography variant="body2">
+                  {getTimeDifference({ start: dayjs(start), end: dayjs(end) })}
+                </Typography>
+                <Typography variant="body2">{`${format({ date: start, formatString: 'L LT' })} - ${format({ date: end, formatString: 'L LT' })}`}</Typography>
+              </div>
+            )
+          }
+          position="top"
+        >
+          <g>
+            <BarRounded
+              x={xScale(dayjs(start).tz(timezone))}
+              y={0}
+              width={
+                xScale(dayjs(end).tz(timezone)) -
+                xScale(dayjs(start).tz(timezone))
+              }
+              height={height - margins.bottom}
+              fill={color}
+              left={equals(idx, 0)}
+              radius={4}
+              right={equals(idx, data.length - 1)}
+            />
+          </g>
+        </Tooltip>
+      ))}
+
+      <Axis.AxisBottom
+        top={height - margins.bottom + axisPadding}
+        scale={xScale}
+        numTicks={numTicks}
+        tickFormat={(value) =>
+          format({
+            date: new Date(value),
+            formatString: getXAxisTickFormat({ end: endDate, start: startDate })
+          })
+        }
+        stroke={theme.palette.text.primary}
+        tickStroke={theme.palette.text.primary}
+        tickLabelProps={() => ({
+          fill: theme.palette.text.primary,
+          fontSize: theme.typography.caption.fontSize,
+          textAnchor: 'middle'
+        })}
+      />
+    </svg>
+  );
+};
+
+export default Timeline;

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

@@ -0,0 +1,148 @@
+import { userAtom } from '@centreon/ui-context';
+import { Provider, createStore } from 'jotai';
+import Timeline from './Timeline';
+import { Tooltip } from './models';
+
+const data = [
+  {
+    start: '2024-09-09T10:57:42+02:00',
+    end: '2024-09-09T11:15:00+02:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-09T11:15:00+02:00',
+    end: '2024-09-09T11:30:00+02:00',
+    color: 'red'
+  },
+  {
+    start: '2024-09-09T11:30:00+02:00',
+    end: '2024-09-09T11:45:00+02:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-09T11:45:00+02:00',
+    end: '2024-09-09T12:00:00+02:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-09T12:00:00+02:00',
+    end: '2024-09-09T12:20:00+02:00',
+    color: 'red'
+  },
+  {
+    start: '2024-09-09T12:20:00+02:00',
+    end: '2024-09-09T12:40:00+02:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-09T12:40:00+02:00',
+    end: '2024-09-09T12:57:42+02:00',
+    color: 'green'
+  }
+];
+
+const startDate = '2024-09-09T10:57:42+02:00';
+const endDate = '2024-09-09T12:57:42+02:00';
+
+const TooltipContent = ({ start, end, color, duration }: Tooltip) => (
+  <div
+    data-testid="tooltip-content"
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '10px',
+      padding: '5px'
+    }}
+  >
+    <span>{start}</span>
+    <span>{end}</span>
+    <span>{color}</span>
+    <span>{duration}</span>
+  </div>
+);
+
+const store = createStore();
+store.set(userAtom, { timezone: 'Europe/Paris', locale: 'en' });
+
+const initialize = (displayDefaultTooltip = true): void => {
+  cy.mount({
+    Component: (
+      <Provider store={store}>
+        <div
+          style={{
+            height: '100px',
+            width: '70%'
+          }}
+        >
+          <Timeline
+            data={data}
+            startDate={startDate}
+            endDate={endDate}
+            TooltipContent={displayDefaultTooltip ? undefined : TooltipContent}
+          />
+        </div>
+      </Provider>
+    )
+  });
+};
+
+describe('Timeline', () => {
+  it('checks that the correct number of bars are rendered', () => {
+    initialize();
+
+    cy.get('path').should('have.length', data.length);
+
+    cy.makeSnapshot();
+  });
+
+  it('checks that each bar has the correct color', () => {
+    initialize();
+
+    data.forEach(({ color }, index) => {
+      cy.get('path').eq(index).should('have.attr', 'fill', color);
+    });
+  });
+
+  it('displays tooltip with correct information when hovered over a bar', () => {
+    initialize(false);
+
+    cy.get('path').first().trigger('mouseover');
+
+    cy.get('[data-testid="tooltip-content"]').within(() => {
+      cy.contains('09/09/2024 10:57 AM').should('be.visible');
+      cy.contains('09/09/2024 11:15 AM').should('be.visible');
+      cy.contains('green').should('be.visible');
+      cy.contains('17 minutes').should('be.visible');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays the default tooltip with correct information when hovered over a bar', () => {
+    initialize();
+
+    cy.get('path').first().trigger('mouseover');
+
+    cy.get('[role="tooltip"]').within(() => {
+      cy.contains('09/09/2024 10:57 AM')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+      cy.contains('09/09/2024 11:15 AM')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+      cy.contains('17 minutes')
+        .should('be.visible')
+        .and('have.css', 'color', 'rgb(0, 128, 0)');
+    });
+
+    cy.makeSnapshot();
+  });
+
+  it('displays correct tick labels on the x-axis', () => {
+    initialize();
+
+    cy.get('.visx-axis-bottom .visx-axis-tick').first().contains('11:00');
+  });
+});

package/src/Graph/Timeline/Timeline.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Typography } from '@mui/material';
+import Timeline from './Timeline';
+
+const data = [
+  {
+    start: '2024-09-25T21:00:42+01:00',
+    end: '2024-09-25T21:15:00+01:00',
+    color: 'gray'
+  },
+  {
+    start: '2024-09-25T21:15:00+01:00',
+    end: '2024-09-25T21:54:00+01:00',
+    color: 'green'
+  },
+  {
+    start: '2024-09-25T21:54:00+01:00',
+    end: '2024-09-25T22:30:00+01:00',
+    color: 'red'
+  }
+];
+
+const startDate = '2024-09-25T21:00:42+01:00';
+const endDate = '2024-09-25T22:30:00+01:00';
+
+const Template = (args): JSX.Element => {
+  return (
+    <div style={{ width: '700px', height: '100px' }}>
+      <Timeline {...args} />
+    </div>
+  );
+};
+
+const meta: Meta<typeof Timeline> = {
+  component: Timeline,
+  parameters: {
+    chromatic: {
+      delay: 1000
+    }
+  },
+  render: Template
+};
+
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+
+export const Normal: Story = {
+  args: {
+    data,
+    startDate,
+    endDate
+  }
+};
+
+export const WithoutData: Story = {
+  args: {
+    data: [],
+    startDate,
+    endDate
+  }
+};
+
+export const WithSmallerTimeRangeThanData: Story = {
+  args: {
+    data,
+    startDate,
+    endDate: '2024-09-25T22:00:00+01:00'
+  }
+};
+
+export const WithCustomTooltip: Story = {
+  args: {
+    data,
+    startDate,
+    endDate,
+    TooltipContent: ({ duration, color }) => (
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
+        <div
+          style={{
+            backgroundColor: color,
+            width: '20px',
+            height: '20px',
+            borderRadius: '4px'
+          }}
+        />
+        <Typography>{duration}</Typography>
+      </div>
+    )
+  }
+};

package/src/Graph/Timeline/Timeline.tsx

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

package/src/Graph/Timeline/index.ts

@@ -0,0 +1 @@
+export { default as Timeline } from './Timeline';

package/src/Graph/Timeline/models.ts

@@ -0,0 +1,20 @@
+export interface Data {
+  start: string;
+  end: string;
+  color: string;
+}
+
+export interface Tooltip {
+  start: string;
+  end: string;
+  color: string;
+  duration: string;
+}
+
+export interface TimelineProps {
+  data: Array<Data>;
+  startDate: string;
+  endDate: string;
+  TooltipContent?: (props: Tooltip) => JSX.Element;
+  tooltipClassName?: string;
+}

package/src/Graph/Timeline/timeline.styles.ts

@@ -0,0 +1,11 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()((theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    padding: theme.spacing(1),
+    boxShadow: theme.shadows[3],
+    maxWidth: 'none'
+  }
+}));

package/src/Graph/Timeline/translatedLabel.ts

@@ -0,0 +1,6 @@
+export const labelYear = 'year';
+export const labelMonth = 'month';
+export const labelDay = 'day';
+export const labelHour = 'hour';
+export const labelMinutes = 'minutes';
+export const labelMinute = 'minute';

package/src/Graph/Timeline/useTimeline.ts

@@ -0,0 +1,90 @@
+import dayjs, { Dayjs } from 'dayjs';
+
+import { usePluralizedTranslation } from '@centreon/ui';
+import { lt } from 'ramda';
+import { useCallback } from 'react';
+import {
+  labelDay,
+  labelHour,
+  labelMinute,
+  labelMonth,
+  labelYear
+} from './translatedLabel';
+
+interface StartEndProps {
+  start: Dayjs;
+  end: Dayjs;
+}
+
+interface GetWidthProps extends StartEndProps {
+  timezone: string;
+  xScale;
+}
+
+interface UseTimelineState {
+  getTimeDifference: (props: StartEndProps) => string;
+  getWidth: (props: GetWidthProps) => number;
+}
+
+export const useTimeline = (): UseTimelineState => {
+  const { pluralizedT } = usePluralizedTranslation();
+
+  const getTimeDifference = useCallback(
+    ({ start, end }: StartEndProps): string => {
+      const diffInMilliseconds = end.diff(start);
+      const diffDuration = dayjs.duration(diffInMilliseconds);
+
+      const timeUnits = [
+        {
+          value: diffDuration.years(),
+          unit: pluralizedT({ label: labelYear, count: diffDuration.years() })
+        },
+        {
+          value: diffDuration.months(),
+          unit: pluralizedT({ label: labelMonth, count: diffDuration.months() })
+        },
+        {
+          value: diffDuration.days(),
+          unit: pluralizedT({ label: labelDay, count: diffDuration.days() })
+        },
+        {
+          value: diffDuration.hours(),
+          unit: pluralizedT({ label: labelHour, count: diffDuration.hours() })
+        },
+        {
+          value: diffDuration.minutes(),
+          unit: pluralizedT({
+            label: labelMinute,
+            count: diffDuration.minutes()
+          })
+        }
+      ];
+
+      const readableUnits = timeUnits
+        .filter((unit) => unit.value > 0)
+        .map((unit) => `${unit.value} ${unit.unit}`);
+
+      return readableUnits.slice(0, 2).join(', ');
+    },
+    []
+  );
+
+  const getWidth = useCallback(
+    ({ start, end, timezone, xScale }: GetWidthProps): number => {
+      const baseWidth =
+        xScale(dayjs(end).tz(timezone)) - xScale(dayjs(start).tz(timezone));
+
+      if (Number.isNaN(baseWidth) || lt(baseWidth, 0)) {
+        return 0;
+      }
+
+      return baseWidth;
+    },
+    []
+  );
+
+  return {
+    getTimeDifference,
+    getWidth
+  };
+};

package/src/Graph/index.ts

@@ -9,6 +9,7 @@ export { Text as GraphText } from './Text';
 export { HeatMap } from './HeatMap';
 export { BarStack } from './BarStack';
 export { PieChart } from './PieChart';
+export { Timeline } from './Timeline';
 export * from './Tree';
 export type { LineChartData } from './common/models';
 export * from './common/timeSeries';

package/src/Listing/EmptyResult/EmptyResult.tsx

@@ -1,7 +1,7 @@
 import { EmptyRow } from '../Row/EmptyRow';
 
 interface EmptyResultProps {
-  label: string;
+  label: string | JSX.Element;
 }
 
 const EmptyResult = ({ label }: EmptyResultProps): JSX.Element => (

package/src/Listing/index.tsx

@@ -61,7 +61,7 @@ import {
   SortOrder
 } from './models';
 import { subItemsPivotsAtom } from './tableAtoms';
-import { labelNoResultFound } from './translatedLabels';
+import { labelNoResultFound as defaultLabelNoResultFound } from './translatedLabels';
 import useStyleTable from './useStyleTable';
 
 const subItemPrefixKey = 'listing';
@@ -140,6 +140,7 @@ export interface Props<TRow> {
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
   isActionBarVisible: boolean;
+  labelNoResultFound?: string | JSX.Element;
 }
 
 const defaultColumnConfiguration = {
@@ -199,7 +200,8 @@ const Listing = <
     labelCollapse: 'Collapse',
     labelExpand: 'Expand'
   },
-  isActionBarVisible = true
+  isActionBarVisible = true,
+  labelNoResultFound = defaultLabelNoResultFound
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -703,7 +705,11 @@ const Listing = <
                       (loading ? (
                         <SkeletonLoader rows={limit} />
                       ) : (
-                        <EmptyResult label={t(labelNoResultFound)} />
+                        <EmptyResult
+                          label={
+                            labelNoResultFound || t(defaultLabelNoResultFound)
+                          }
+                        />
                       ))}
                   </TableBody>
                 </Table>
@@ -739,6 +745,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   moveTablePagination,
   widthToMoveTablePagination,
   listingVariant,
+  labelNoResultFound,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
@@ -761,6 +768,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortOrder={sortOrder}
         totalRows={totalRows}
         widthToMoveTablePagination={widthToMoveTablePagination}
+        labelNoResultFound={labelNoResultFound}
         {...props}
       />
     ),
@@ -783,7 +791,8 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      listingVariant
+      listingVariant,
+      labelNoResultFound
     ]
   });
 

package/src/components/Layout/PageLayout/PageLayout.styles.ts

@@ -4,8 +4,8 @@ export const useStyles = makeStyles()((theme) => ({
   pageLayout: {
     display: 'grid',
     gridTemplateRows: 'auto 1fr',
-    height: '100%',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    height: '100%'
   },
   pageLayoutActions: {
     '& > span': {