@centreon/ui 24.11.11 → 24.11.13

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -63,7 +63,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         opacity: 1
       },
       position: 'relative',
-      height: '100%',
+      height: '100%'
     }
   })
 );

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, ReactElement, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
@@ -13,15 +13,9 @@ interface Props {
   columns: number;
   height: number;
   width: number;
-  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-const Grid = ({
-  width,
-  height,
-  columns,
-  containerRef
-}: Props): ReactElement => {
+const Grid = ({ width, height, columns }: Props): ReactElement => {
   const theme = useTheme();
 
   const xScale = useMemo(

package/src/Dashboard/Layout.tsx

@@ -4,10 +4,7 @@ import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 
-import {
-  ParentSize,
-  useMemoComponent
-} from '..';
+import { ParentSize, useMemoComponent } from '..';
 
 import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
@@ -33,10 +30,10 @@ const bottom = (layout: Array<Layout>): number => {
   layout.forEach((panel) => {
     bottomY = panel.y + panel.h;
     if (bottomY > max) max = bottomY;
-  })
+  });
 
   return max;
-}
+};
 
 const DashboardLayout = <T extends Layout>({
   children,
@@ -67,14 +64,10 @@ const DashboardLayout = <T extends Layout>({
   }, []);
 
   const containerHeight = useMemo((): number | undefined => {
-      const nbRow = bottom(getLayout(layout));
-      const containerPaddingY = 4
-      return (
-        nbRow * rowHeight +
-        (nbRow - 1) * 20 +
-        containerPaddingY * 2
-      );
-    }, [layout, rowHeight])
+    const nbRow = bottom(getLayout(layout));
+    const containerPaddingY = 4;
+    return nbRow * rowHeight + (nbRow - 1) * 20 + containerPaddingY * 2;
+  }, [layout, rowHeight]) ?? 0;
 
   useEffect(() => {
     window.addEventListener('resize', resize);
@@ -86,36 +79,40 @@ const DashboardLayout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <Box ref={dashboardContainerRef} sx={{ overflowY: 'auto', overflowX: 'hidden' }}>
-          <ParentSize>
-            {({ width, height }): JSX.Element => (
-              <Box className={classes.container}>
-                {displayGrid && (
-                  <Grid
-                    columns={columns}
-                    height={(containerHeight || 0) > height ? containerHeight : height}
-                    width={width}
-                    containerRef={dashboardContainerRef}
-                  />
-                )}
-                <ReactGridLayout
-                  cols={columns}
-                  containerPadding={[4, 0]}
-                  layout={getLayout(layout)}
-                  margin={[20, 20]}
-                  resizeHandles={['s', 'e', 'se']}
-                  rowHeight={rowHeight}
+      <Box
+        ref={dashboardContainerRef}
+        sx={{ overflowY: 'auto', overflowX: 'hidden' }}
+      >
+        <ParentSize>
+          {({ width, height }): JSX.Element => (
+            <Box className={classes.container}>
+              {displayGrid && (
+                <Grid
+                  columns={columns}
+                  height={
+                    containerHeight > height ? containerHeight : height
+                  }
                   width={width}
-                  onLayoutChange={changeLayout}
-                  onResizeStart={startResize}
-                  onResizeStop={stopResize}
-                >
-                  {children}
-                </ReactGridLayout>
-              </Box>
-            )}
-          </ParentSize>
-        </Box>
+                />
+              )}
+              <ReactGridLayout
+                cols={columns}
+                containerPadding={[4, 0]}
+                layout={getLayout(layout)}
+                margin={[20, 20]}
+                resizeHandles={['s', 'e', 'se']}
+                rowHeight={rowHeight}
+                width={width}
+                onLayoutChange={changeLayout}
+                onResizeStart={startResize}
+                onResizeStop={stopResize}
+              >
+                {children}
+              </ReactGridLayout>
+            </Box>
+          )}
+        </ParentSize>
+      </Box>
     ),
     memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
   });

package/src/Form/Inputs/Autocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isNil, map, not, path, prop, type } from 'ramda';
+import { path, equals, isNil, map, not, prop, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import { FormHelperText, Stack } from '@mui/material';
@@ -188,7 +188,9 @@ const Autocomplete = ({
           value={getValues() ?? null}
           onChange={changeValues}
           onTextChange={textChange}
-          style={{ width: autocomplete?.fullWidth ?? true ? 'auto' : '180px' }}
+          style={{
+            width: (autocomplete?.fullWidth ?? true) ? 'auto' : '180px'
+          }}
         />
         {inputErrors && (
           <Stack>

package/src/Form/Inputs/ConnectedAutocomplete.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, isEmpty, path, propEq, reject, split } from 'ramda';
+import { path, equals, isEmpty, propEq, reject, split } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {

package/src/Form/Inputs/Radio.tsx

@@ -1,5 +1,5 @@
 import { FormikValues, useFormikContext } from 'formik';
-import { equals, includes, path, split, type } from 'ramda';
+import { path, equals, includes, split, type } from 'ramda';
 import { useTranslation } from 'react-i18next';
 
 import {

package/src/Form/Inputs/Text.tsx

@@ -2,11 +2,11 @@ import { ChangeEvent, useCallback, useState } from 'react';
 
 import { FormikValues, useFormikContext } from 'formik';
 import {
+  path,
   equals,
   gt,
   isEmpty,
   not,
-  path,
   split,
   type as variableType
 } from 'ramda';

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

@@ -30,7 +30,7 @@ const initialize = ({
   tooltip,
   axis,
   orientation,
-  barStyle,
+  barStyle
 }: Pick<
   BarChartProps,
   'data' | 'legend' | 'axis' | 'barStyle' | 'orientation' | 'tooltip' | 'start'

package/src/Graph/Chart/Chart.tsx

@@ -62,14 +62,17 @@ interface Props extends LineChartProps {
   };
 }
 
-const filterLines = (lines: Array<Line>, displayThreshold: boolean): Array<Line> => {
+const filterLines = (
+  lines: Array<Line>,
+  displayThreshold: boolean
+): Array<Line> => {
   if (!displayThreshold) {
     return lines;
   }
   const lineOriginMetric = findLineOfOriginMetricThreshold(lines);
 
   if (isEmpty(lineOriginMetric)) {
-      return lines;
+    return lines;
   }
 
   const findLinesUpperLower = lines.map((line) =>

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -79,7 +79,7 @@ interface Props {
   transformMatrix?: {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
-  }
+  };
 }
 
 const InteractionWithGraph = ({

package/src/Graph/Chart/index.tsx

@@ -37,7 +37,7 @@ interface Props extends Partial<LineChartProps> {
   transformMatrix?: {
     fx?: (pointX: number) => number;
     fy?: (pointY: number) => number;
-  }
+  };
 }
 
 const WrapperChart = ({

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/common/utils.ts

@@ -8,11 +8,11 @@ import {
   gte,
   head,
   isNil,
+  last,
   length,
   lt,
   lte,
-  pluck,
-  last
+  pluck
 } from 'ramda';
 
 import { Theme, darken, getLuminance, lighten } from '@mui/material';

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/Icon/BusinessActivityIcon.tsx

@@ -0,0 +1,12 @@
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const BusinessActivityIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    Icon={AccountTreeIcon}
+    dataTestId="BusinessActivityIcon"
+    {...props}
+  />
+);

package/src/Icon/ContainerIcon.tsx

@@ -0,0 +1,20 @@
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+const icon = (
+  <g>
+    <path d="M301 745.9L28 662.4c-7.4-2.3-12.5-9.2-12.5-16.9V270.4c0-5.7 2.7-10.9 7.3-14.3 4.6-3.3 10.4-4.2 15.8-2.5l273.1 88.5c7.3 2.4 12.2 9.1 12.2 16.8V729c0 5.6-2.7 10.9-7.2 14.2-3.1 2.3-6.8 3.5-10.5 3.5-1.8-.1-3.5-.3-5.2-.8zm5.2-16.9l5.2-16.9-5.2 16.9zM50.8 632.4l237.8 72.7V371.7l-237.8-77v337.7z" />
+    <path d="M295.7 743.2c-4.5-3.3-7.2-8.6-7.2-14.2V358.8c0-7.6 4.9-14.4 12.2-16.8l273.1-88.5c5.4-1.8 11.3-.8 15.8 2.5 4.6 3.4 7.3 8.7 7.3 14.3v375.1c0 7.8-5 14.6-12.5 16.9l-273.1 83.4-5.2-16.9 5.2 16.9c-1.7.5-3.4.8-5.2.8-3.6.1-7.3-1-10.4-3.3zm28.2-371.5V705l237.8-72.7V294.7l-237.8 77zM16.3 275.9c-3-9.3 2.1-19.3 11.4-22.3L300.8 165c9.2-3 19.2 2.1 22.2 11.3 3 9.3-2.1 19.3-11.3 22.2L38.6 287.2c-1.8.6-3.7.9-5.5.9-7.4-.1-14.3-4.8-16.8-12.2z" />
+    <path d="M573.9 287.2l-273-88.5c-9.3-3-14.4-13-11.4-22.2 3-9.3 13-14.4 22.2-11.3l273.1 88.5c9.3 3 14.4 13 11.4 22.3-2.4 7.4-9.4 12.2-16.8 12.2-1.9-.1-3.7-.5-5.5-1zm-131.3 42.5l-273.1-88.5c-9.3-3-14.4-13-11.4-22.2 3-9.3 12.9-14.4 22.3-11.4l273 88.5c9.3 3 14.4 13 11.4 22.3-2.4 7.4-9.3 12.2-16.8 12.2-1.7 0-3.5-.3-5.4-.9z" />
+  </g>
+);
+
+export const ContainerIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    {...props}
+    dataTestId="ContainerIcon"
+    Icon={icon}
+    viewBox="6 156 600 600"
+  />
+);

package/src/Icon/DowntimeIcon.tsx

@@ -10,5 +10,12 @@ const icon = (
 );
 
 export const DowntimeIcon = (props: SvgIconProps): JSX.Element => (
-  <BaseIcon {...props} Icon={icon} height="24" viewBox="0 0 24 24" width="24" />
+  <BaseIcon
+    {...props}
+    dataTestId="DowntimeIcon"
+    Icon={icon}
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  />
 );

package/src/Icon/HostGroupIcon.tsx

@@ -0,0 +1,8 @@
+import BusinessIcon from '@mui/icons-material/Business';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const HostGroupIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={BusinessIcon} dataTestId="HostGroupIcon" {...props} />
+);

package/src/Icon/MetaServiceIcon.tsx

@@ -0,0 +1,12 @@
+import SettingsInputSvideoIcon from '@mui/icons-material/SettingsInputSvideo';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const MetaServiceIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon
+    Icon={SettingsInputSvideoIcon}
+    dataTestId="MetaServiceIcon"
+    {...props}
+  />
+);

package/src/Icon/ServiceGroupIcon.tsx

@@ -0,0 +1,8 @@
+import LinearScaleIcon from '@mui/icons-material/LinearScale';
+import { SvgIconProps } from '@mui/material';
+
+import BaseIcon from './BaseIcon';
+
+export const ServiceGroupIcon = (props: SvgIconProps): JSX.Element => (
+  <BaseIcon Icon={LinearScaleIcon} dataTestId="ServiceGroupIcon" {...props} />
+);

package/src/Icon/index.ts

@@ -1,4 +1,9 @@
+export { DowntimeIcon } from './DowntimeIcon';
+export { AcknowledgementIcon } from './AcknowledgementIcon';
 export { HostIcon } from './HostIcon';
 export { ServiceIcon } from './ServiceIcon';
-export { DowntimeIcon } from './DowntimeIcon';
-export { AcknowledgementIcon } from './AcnowledgementIcon';
+export { BusinessActivityIcon } from './BusinessActivityIcon';
+export { HostGroupIcon } from './HostGroupIcon';
+export { ServiceGroupIcon } from './ServiceGroupIcon';
+export { MetaServiceIcon } from './MetaServiceIcon';
+export { ContainerIcon } from './ContainerIcon';

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,
@@ -526,33 +528,32 @@ const Listing = <
         className={classes.container}
         ref={containerRef as RefObject<HTMLDivElement>}
       >
-        {
-          isActionBarVisible && 
-            <div
-              className={classes.actionBar}
-              ref={actionBarRef as RefObject<HTMLDivElement>}
-            >
-              <ListingActionBar
-                actions={actions}
-                actionsBarMemoProps={actionsBarMemoProps}
-                columnConfiguration={columnConfiguration}
-                columns={columns}
-                currentPage={currentPage}
-                customPaginationClassName={customPaginationClassName}
-                limit={limit}
-                listingVariant={listingVariant}
-                moveTablePagination={moveTablePagination}
-                paginated={paginated}
-                totalRows={totalRows}
-                viewerModeConfiguration={viewerModeConfiguration}
-                widthToMoveTablePagination={widthToMoveTablePagination}
-                onLimitChange={changeLimit}
-                onPaginate={onPaginate}
-                onResetColumns={onResetColumns}
-                onSelectColumns={onSelectColumns}
-              />
-            </div>
-        }
+        {isActionBarVisible && (
+          <div
+            className={classes.actionBar}
+            ref={actionBarRef as RefObject<HTMLDivElement>}
+          >
+            <ListingActionBar
+              actions={actions}
+              actionsBarMemoProps={actionsBarMemoProps}
+              columnConfiguration={columnConfiguration}
+              columns={columns}
+              currentPage={currentPage}
+              customPaginationClassName={customPaginationClassName}
+              limit={limit}
+              listingVariant={listingVariant}
+              moveTablePagination={moveTablePagination}
+              paginated={paginated}
+              totalRows={totalRows}
+              viewerModeConfiguration={viewerModeConfiguration}
+              widthToMoveTablePagination={widthToMoveTablePagination}
+              onLimitChange={changeLimit}
+              onPaginate={onPaginate}
+              onResetColumns={onResetColumns}
+              onSelectColumns={onSelectColumns}
+            />
+          </div>
+        )}
 
         <ParentSize
           parentSizeStyles={{
@@ -704,7 +705,11 @@ const Listing = <
                       (loading ? (
                         <SkeletonLoader rows={limit} />
                       ) : (
-                        <EmptyResult label={t(labelNoResultFound)} />
+                        <EmptyResult
+                          label={
+                            labelNoResultFound || t(defaultLabelNoResultFound)
+                          }
+                        />
                       ))}
                   </TableBody>
                 </Table>
@@ -740,6 +745,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   moveTablePagination,
   widthToMoveTablePagination,
   listingVariant,
+  labelNoResultFound,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
@@ -762,6 +768,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortOrder={sortOrder}
         totalRows={totalRows}
         widthToMoveTablePagination={widthToMoveTablePagination}
+        labelNoResultFound={labelNoResultFound}
         {...props}
       />
     ),
@@ -784,7 +791,8 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      listingVariant
+      listingVariant,
+      labelNoResultFound
     ]
   });
 

package/src/Typography/EllipsisTypography.tsx

@@ -1,11 +1,15 @@
-import { forwardRef, type ForwardedRef } from 'react';
+import { type ForwardedRef, forwardRef } from 'react';
 
 import { Box, Typography, type TypographyProps } from '@mui/material';
 
 const EllipsisTypography = forwardRef(
   (
-    { containerClassname, ...props }: TypographyProps & { containerClassname?: string },
-    ref?: ForwardedRef<HTMLSpanElement>) => {
+    {
+      containerClassname,
+      ...props
+    }: TypographyProps & { containerClassname?: string },
+    ref?: ForwardedRef<HTMLSpanElement>
+  ) => {
     return (
       <Box className={containerClassname} sx={{ width: '100%' }}>
         <Typography

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': {
@@ -24,7 +24,7 @@ export const useStyles = makeStyles()((theme) => ({
       backgroundColor: theme.palette.layout.body.background
     },
     '&[data-has-actions="true"]': {
-      gridTemplateRows: 'min-content auto',
+      gridTemplateRows: 'min-content auto'
     },
     display: 'grid',
     gridTemplateRows: 'auto',