@centreon/ui 24.10.3 → 24.10.5

package/package.json

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

package/src/Dashboard/Dashboard.styles.ts

@@ -40,7 +40,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: theme.spacing(1)
       },
       '& .react-resizable-handle.react-resizable-handle-s': {
-        bottom: 0,
+        bottom: 4,
         cursor: 'ns-resize',
         height: theme.spacing(1),
         left: 0,
@@ -49,7 +49,7 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
         width: `calc(100% - ${theme.spacing(3)})`
       },
       '& .react-resizable-handle.react-resizable-handle-se': {
-        bottom: 0,
+        bottom: 4,
         cursor: 'nwse-resize',
         height: theme.spacing(2),
         right: 0,
@@ -62,7 +62,8 @@ export const useDashboardLayoutStyles = makeStyles<boolean>()(
       '& .react-resizable-handle:hover': {
         opacity: 1
       },
-      position: 'relative'
+      position: 'relative',
+      height: '100%',
     }
   })
 );

package/src/Dashboard/Grid.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useMemo } from 'react';
+import { MutableRefObject, ReactElement, useMemo } from 'react';
 
 import { scaleLinear } from '@visx/scale';
 import { Grid as VisxGrid } from '@visx/visx';
@@ -13,9 +13,15 @@ interface Props {
   columns: number;
   height: number;
   width: number;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-const Grid = ({ width, height, columns }: Props): ReactElement => {
+const Grid = ({
+  width,
+  height,
+  columns,
+  containerRef
+}: Props): ReactElement => {
   const theme = useTheme();
 
   const xScale = useMemo(
@@ -44,19 +50,19 @@ const Grid = ({ width, height, columns }: Props): ReactElement => {
     .fill(0)
     .map((_, index) => index * tick);
 
+  const yTickValues = Array(numberOfRows)
+    .fill(0)
+    .map((_, index) => index);
+
   return useMemoComponent({
     Component: (
       <svg style={{ height, position: 'absolute', width }}>
-        <VisxGrid.GridColumns
-          height={height}
-          scale={xScale}
-          stroke={theme.palette.divider}
-          tickValues={xTickValues}
-          width={width}
-        />
-        <VisxGrid.GridRows
+        <VisxGrid.Grid
+          columnTickValues={xTickValues}
+          rowTickValues={yTickValues}
           height={height}
-          scale={yScale}
+          yScale={yScale}
+          xScale={xScale}
           stroke={theme.palette.divider}
           top={-10}
           width={width}

package/src/Dashboard/Layout.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useSetAtom } from 'jotai';
 import GridLayout, { Layout, WidthProvider } from 'react-grid-layout';
@@ -6,10 +6,10 @@ import 'react-grid-layout/css/styles.css';
 
 import {
   ParentSize,
-  Responsive as ResponsiveHeight,
   useMemoComponent
 } from '..';
 
+import { Box } from '@mui/material';
 import { useDashboardLayoutStyles } from './Dashboard.styles';
 import Grid from './Grid';
 import { isResizingItemAtom } from './atoms';
@@ -26,6 +26,18 @@ interface DashboardLayoutProps<T> {
   layout: Array<T>;
 }
 
+const bottom = (layout: Array<Layout>): number => {
+  let max = 0;
+  let bottomY = 0;
+
+  layout.forEach((panel) => {
+    bottomY = panel.y + panel.h;
+    if (bottomY > max) max = bottomY;
+  })
+
+  return max;
+}
+
 const DashboardLayout = <T extends Layout>({
   children,
   changeLayout,
@@ -34,6 +46,8 @@ const DashboardLayout = <T extends Layout>({
   isStatic = false,
   additionalMemoProps = []
 }: DashboardLayoutProps<T>): JSX.Element => {
+  const dashboardContainerRef = useRef<HTMLDivElement | null>(null);
+
   const { classes } = useDashboardLayoutStyles(isStatic);
 
   const [columns, setColumns] = useState(getColumnsFromScreenSize());
@@ -52,6 +66,16 @@ const DashboardLayout = <T extends Layout>({
     setIsResizingItem(null);
   }, []);
 
+  const containerHeight = useMemo((): number | undefined => {
+      const nbRow = bottom(getLayout(layout));
+      const containerPaddingY = 4
+      return (
+        nbRow * rowHeight +
+        (nbRow - 1) * 20 +
+        containerPaddingY * 2
+      );
+    }, [layout, rowHeight])
+
   useEffect(() => {
     window.addEventListener('resize', resize);
 
@@ -62,31 +86,36 @@ const DashboardLayout = <T extends Layout>({
 
   return useMemoComponent({
     Component: (
-      <ResponsiveHeight margin={40}>
-        <ParentSize>
-          {({ width, height }): JSX.Element => (
-            <div className={classes.container}>
-              {displayGrid && (
-                <Grid columns={columns} height={height} width={width} />
-              )}
-              <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>
-            </div>
-          )}
-        </ParentSize>
-      </ResponsiveHeight>
+      <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}
+                  width={width}
+                  onLayoutChange={changeLayout}
+                  onResizeStart={startResize}
+                  onResizeStop={stopResize}
+                >
+                  {children}
+                </ReactGridLayout>
+              </Box>
+            )}
+          </ParentSize>
+        </Box>
     ),
     memoProps: [columns, layout, displayGrid, isStatic, ...additionalMemoProps]
   });

package/src/Graph/BarChart/BarChart.tsx

@@ -38,6 +38,7 @@ export interface BarChartProps
   start: string;
   thresholdUnit?: string;
   thresholds?: Thresholds;
+  skipIntersectionObserver?: boolean;
 }
 
 const BarChart = ({
@@ -57,7 +58,8 @@ const BarChart = ({
   barStyle = {
     opacity: 1,
     radius: 0.2
-  }
+  },
+  skipIntersectionObserver
 }: BarChartProps): JSX.Element => {
   const { adjustedData } = useChartData({ data, end, start });
   const lineChartRef = useRef<HTMLDivElement | null>(null);
@@ -93,6 +95,7 @@ const BarChart = ({
               thresholds={thresholds}
               tooltip={tooltip}
               width={width}
+              skipIntersectionObserver={skipIntersectionObserver}
             />
           )}
         </ParentSize>

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -54,7 +54,8 @@ const ResponsiveBarChart = ({
   limitLegend,
   orientation,
   tooltip,
-  barStyle
+  barStyle,
+  skipIntersectionObserver
 }: Props): JSX.Element => {
   const { title, timeSeries, baseAxis, lines } = graphData;
 
@@ -149,7 +150,7 @@ const ResponsiveBarChart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport) {
+  if (!isInViewport && !skipIntersectionObserver) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}

package/src/Graph/Chart/Chart.tsx

@@ -97,7 +97,8 @@ const Chart = ({
   },
   thresholds,
   thresholdUnit,
-  limitLegend
+  limitLegend,
+  skipIntersectionObserver
 }: Props): JSX.Element => {
   const { classes } = useChartStyles();
 
@@ -219,7 +220,7 @@ const Chart = ({
     [axis?.showGridLines]
   );
 
-  if (!isInViewport) {
+  if (!isInViewport && !skipIntersectionObserver) {
     return (
       <Skeleton
         height={graphSvgRef?.current?.clientHeight ?? graphHeight}

package/src/Graph/Chart/index.tsx

@@ -120,6 +120,7 @@ const WrapperChart = ({
               tooltip={tooltip}
               width={width ?? responsiveWidth}
               zoomPreview={zoomPreview}
+              skipIntersectionObserver={rest.skipIntersectionObserver}
             />
           );
         }}

package/src/Graph/Chart/models.ts

@@ -120,6 +120,7 @@ export interface LineChartProps {
   tooltip?: Tooltip;
   width: number;
   zoomPreview?: InteractedZone;
+  skipIntersectionObserver?: boolean;
 }
 
 export interface Area {

package/src/ThemeProvider/palettes.ts

@@ -157,7 +157,7 @@ declare module '@mui/material/Badge' {
 
 export const lightPalette: PaletteOptions = {
   action: {
-    acknowledged: '#67532C',
+    acknowledged: '#745F35',
     acknowledgedBackground: '#DFD2B9',
     activatedOpacity: 0.12,
     active: '#666666',
@@ -167,7 +167,7 @@ export const lightPalette: PaletteOptions = {
     focusOpacity: 0.12,
     hover: 'rgba(0, 0, 0, 0.06)',
     hoverOpacity: 0.06,
-    inDowntime: '#4B2352',
+    inDowntime: '#512980',
     inDowntimeBackground: '#E5D8F3',
     selected: 'rgba(102, 102, 102, 0.3)',
     selectedOpacity: 0.3
@@ -297,7 +297,7 @@ export const lightPalette: PaletteOptions = {
 
 export const darkPalette: PaletteOptions = {
   action: {
-    acknowledged: '#67532C',
+    acknowledged: '#DFD2B9',
     acknowledgedBackground: '#745F35',
     activatedOpacity: 0.3,
     active: '#B5B5B5',
@@ -307,7 +307,7 @@ export const darkPalette: PaletteOptions = {
     focusOpacity: 0.3,
     hover: 'rgba(255, 255, 255, 0.16)',
     hoverOpacity: 0.16,
-    inDowntime: '#4B2352',
+    inDowntime: '#E5D8F3',
     inDowntimeBackground: '#512980',
     selected: 'rgba(255, 255, 255, 0.5)',
     selectedOpacity: 0.5

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

@@ -2,6 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles()((theme) => ({
   pageLayout: {
+    height: '100%',
     display: 'grid',
     gridTemplateRows: 'min-content',
     overflow: 'hidden'
@@ -22,8 +23,11 @@ export const useStyles = makeStyles()((theme) => ({
     '&[data-has-background="true"]': {
       backgroundColor: theme.palette.layout.body.background
     },
+    '&[data-has-actions="true"]': {
+      gridTemplateRows: 'min-content auto',
+    },
     display: 'grid',
-    gridTemplateRows: 'min-content',
+    gridTemplateRows: 'auto',
     overflow: 'hidden',
     padding: theme.spacing(1.5, 3, 5)
   },

package/src/components/Layout/PageLayout/PageLayoutBody.tsx

@@ -17,6 +17,7 @@ export const PageLayoutBody = ({
     <section
       className={classes.pageLayoutBody}
       data-has-background={hasBackground}
+      data-has-actions={!!children?.length}
       id="page-body"
     >
       {children}