@centreon/ui 26.11.0 → 26.11.2

package/package.json

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

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

@@ -154,7 +154,7 @@ const checkGraphWidth = (): void => {
     .and('equal', '392');
 
   cy.findByTestId('graph-interaction-zone').then((graph) => {
-    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1167);
+    expect(Number(graph[0].attributes.width.value)).to.be.greaterThan(1149);
   });
 };
 
@@ -177,9 +177,6 @@ describe('Line chart', () => {
 
       cy.contains('06/18/2023').should('be.visible');
 
-      cy.contains('0.56 s').should('be.visible');
-      cy.contains('73.25%').should('be.visible');
-
       cy.makeSnapshot();
     });
 
@@ -291,7 +288,7 @@ describe('Line chart', () => {
 
     cy.findByTestId('graph-interaction-zone')
       .should('have.attr', 'width')
-      .and('equal', '1230');
+      .and('equal', '1220');
 
     cy.get('[data-icon="true"]')
       .eq(0)
@@ -743,12 +740,10 @@ describe('Lines and bars', () => {
 
     checkGraphWidth();
 
-    cy.get(
-      'path[d="M7.473829201101932,289.92398616599974 h56.26446280991734 h1v1 v100.07601383400026 a1,1 0 0 1 -1,1 h-56.26446280991734 a1,1 0 0 1 -1,-1 v-100.07601383400026 v-1h1z"]'
-    ).should('be.visible');
-    cy.get(
-      'path[d="M23.953168044077135,235.36727985204413 h23.305785123966935 a17.479338842975203,17.479338842975203 0 0 1 17.479338842975203,17.479338842975203 v19.598028628005196 v17.479338842975203h-17.479338842975203 h-23.305785123966935 h-17.479338842975203v-17.479338842975203 v-19.598028628005196 a17.479338842975203,17.479338842975203 0 0 1 17.479338842975203,-17.479338842975203z"]'
-    ).should('be.visible');
+    cy.get('[data-testid="stacked-bar-2-0-1243"]').should('be.visible');
+    cy.get('[data-testid="stacked-bar-10-0-8520.53622137828"]').should(
+      'be.visible'
+    );
 
     cy.makeSnapshot();
   });

package/src/Graph/common/BaseChart/useComputeYAxisMaxCharacters.ts

@@ -44,7 +44,7 @@ export const useComputeYAxisMaxCharacters = ({
     isHorizontal
   });
 
-  // Always add a character space in case the algorithm does not compute the displayed value in axis.
+  // Always add a space in case the algorithm does not compute the displayed value in axis.
   const maxLeftAxisCharacters = useMemo(() => {
     if (!leftScale) {
       return 0;
@@ -55,7 +55,7 @@ export const useComputeYAxisMaxCharacters = ({
 
     return isEmpty(formattedTicks)
       ? 2
-      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
+      : Math.max(...formattedTicks.map((value) => value.length), 2) + 3;
   }, [leftScale, axisLeft]);
 
   const maxRightAxisCharacters = useMemo(() => {
@@ -68,7 +68,7 @@ export const useComputeYAxisMaxCharacters = ({
 
     return isEmpty(formattedTicks)
       ? 2
-      : Math.max(...formattedTicks.map((value) => value.length), 2) + 1;
+      : Math.max(...formattedTicks.map((value) => value.length), 2) + 3;
   }, [rightScale, axisRight]);
 
   return {

package/src/ThemeProvider/palettes.ts

@@ -45,6 +45,7 @@ declare module '@mui/material/styles' {
       main: string;
     };
     statusBackground: StatusBackground;
+    tile: TypeTile;
   }
   interface StatusBackground {
     error: string;
@@ -64,6 +65,13 @@ declare module '@mui/material/styles' {
       main: string;
     };
     statusBackground: StatusBackground;
+    tile: TypeTile;
+  }
+
+  interface TypeTile {
+    background: string;
+    border: string;
+    borderHover: string;
   }
 
   interface TypeBackground {
@@ -294,6 +302,11 @@ export const lightPalette: PaletteOptions = {
     primary: '#000000',
     secondary: '#666666'
   },
+  tile: {
+    background: '#FFFFFF',
+    border: '#E3E3E3',
+    borderHover: '#CCCCCC'
+  },
   warning: {
     contrastText: '#000',
     dark: '#FC7E00',
@@ -436,6 +449,11 @@ export const darkPalette: PaletteOptions = {
     primary: '#FFFFFF',
     secondary: '#CCCCCC'
   },
+  tile: {
+    background: '#2E2E2E',
+    border: '#4A4A4A',
+    borderHover: '#6D6D6D'
+  },
   warning: {
     contrastText: '#fff',
     main: '#C55400'

package/src/ThemeProvider/tailwindcss.css

@@ -112,6 +112,11 @@
   --color-status-background-warning: #fd9b27;
   --color-success-main: #88b922;
 
+  /* Tile container colors */
+  --color-tile-background: #ffffff;
+  --color-tile-border: #e3e3e3;
+  --color-tile-border-hover: #cccccc;
+
   /* Text colors */
   --color-text-disabled: #999999;
   --color-text-primary: #000000;
@@ -195,6 +200,9 @@
     --color-stauts-background-unknown: #666666;
     --color-status-background-warning: #c55400;
     --color-success-main: #5f8118;
+    --color-tile-background: #2e2e2e;
+    --color-tile-border: #4a4a4a;
+    --color-tile-border-hover: #6d6d6d;
     --color-text-disabled: #666666;
     --color-text-primary: #ffffff;
     --color-text-secondary: #cccccc;

package/src/TopCounterElements/ResourceCounters.tsx

@@ -1,6 +1,5 @@
 import type { SeverityCode } from '@centreon/ui';
 
-import { Fragment } from 'react';
 import { Link } from 'react-router';
 import { makeStyles } from 'tss-react/mui';
 
@@ -8,29 +7,23 @@ import StatusCounter from './StatusCounter';
 
 const useStyles = makeStyles()((theme) => ({
   container: {
-    display: 'inline-block',
+    alignItems: 'center',
+    display: 'flex',
+    gap: theme.spacing(1),
     listStyle: 'none',
     margin: 0,
-    padding: 0,
-    [theme.breakpoints.down(1025)]: {
-      flexFlow: 'row wrap'
-    }
+    padding: 0
   },
   item: {
-    display: 'inline-block',
+    alignItems: 'center',
+    display: 'flex',
     margin: 0,
-    padding: 0,
-    paddingRight: theme.spacing(0.25)
+    padding: 0
   },
   link: {
+    alignItems: 'center',
+    display: 'flex',
     textDecoration: 'none'
-  },
-  splitter: {
-    display: 'none',
-    [theme.breakpoints.down(1025)]: {
-      display: 'block',
-      marginBottom: theme.spacing(0.25)
-    }
   }
 }));
 
@@ -38,6 +31,7 @@ export interface CounterProps {
   counters: Array<{
     ariaLabel: string;
     count: string | number;
+    detail?: string | number;
     onClick: (e: React.MouseEvent) => void;
     severityCode: SeverityCode;
     to: string;
@@ -50,20 +44,21 @@ export default ({ counters }: CounterProps): JSX.Element => {
   return (
     <ul className={classes.container}>
       {counters.map(
-        ({ to, ariaLabel, onClick, count, severityCode }, index) => (
-          <Fragment key={to.toString().replace(/\W/g, '')}>
-            {index === 2 && <li className={classes.splitter} />}
-            <li className={classes.item}>
-              <Link
-                aria-label={ariaLabel}
-                className={classes.link}
-                onClick={onClick}
-                to={to}
-              >
-                <StatusCounter count={count} severityCode={severityCode} />
-              </Link>
-            </li>
-          </Fragment>
+        ({ to, ariaLabel, onClick, count, detail, severityCode }) => (
+          <li className={classes.item} key={to.toString().replace(/\W/g, '')}>
+            <Link
+              aria-label={ariaLabel}
+              className={classes.link}
+              onClick={onClick}
+              to={to}
+            >
+              <StatusCounter
+                count={count}
+                detail={detail}
+                severityCode={severityCode}
+              />
+            </Link>
+          </li>
         )
       )}
     </ul>

package/src/TopCounterElements/StatusCounter.tsx

@@ -1,63 +1,72 @@
-import { Badge, Tooltip } from '@mui/material';
+import { Tooltip } from '@mui/material';
 
 import { getStatusColors, type SeverityCode } from '@centreon/ui';
 
 import numeral from 'numeral';
+import { isNil } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
 
 export interface StyleProps {
   severityCode?: SeverityCode | null;
 }
 
-const useStyles = makeStyles<StyleProps>()((theme, { severityCode }) => ({
-  badge: {
-    background: severityCode
-      ? getStatusColors({ severityCode, theme })?.backgroundColor
-      : 'transparent',
-    borderRadius: theme.spacing(1.25),
-    color: theme.palette.common.black,
-    cursor: 'pointer',
-    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-    height: theme.spacing(2.125),
-    lineHeight: theme.spacing(2.125),
-    minWidth: theme.spacing(2.125),
-    position: 'relative',
-    right: 0,
-    top: 0,
-    transform: 'none'
-  }
-}));
+const useStyles = makeStyles<StyleProps>()((theme, { severityCode }) => {
+  const statusColors = severityCode
+    ? getStatusColors({ severityCode, theme })
+    : null;
+
+  return {
+    container: {
+      alignItems: 'center',
+      color: theme.palette.mode === 'dark' ? '#EAEEF7' : '#1B2233',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      gap: '3px'
+    },
+    count: {
+      fontFamily: 'ui-monospace, "Roboto Mono", Menlo, monospace',
+      fontSize: '12px',
+      fontWeight: theme.typography.fontWeightMedium,
+      lineHeight: 1
+    },
+    dot: {
+      backgroundColor: statusColors?.backgroundColor ?? theme.palette.divider,
+      borderRadius: '50%',
+      flexShrink: 0,
+      height: '9px',
+      width: '9px'
+    }
+  };
+});
 
 export interface Props {
   className?: string;
   count: string | number;
+  detail?: string | number;
   severityCode?: SeverityCode | null;
 }
 
 const StatusCounter = ({
   severityCode = null,
   count,
+  detail,
   className
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({ severityCode });
-  const shouldDisableTooltip = Number(count) < 1000;
+  const hasDetail = !isNil(detail);
+  const shouldDisableTooltip = !hasDetail && Number(count) < 1000;
   const formattedCount = numeral(count).format('0.[0]a');
 
   return (
     <Tooltip
       disableHoverListener={shouldDisableTooltip}
       followCursor
-      title={count}
+      title={hasDetail ? detail : count}
     >
-      <Badge
-        badgeContent={formattedCount}
-        classes={{
-          badge: cx(classes.badge, className)
-        }}
-        max={Number.POSITIVE_INFINITY}
-        overlap="circular"
-      />
+      <span className={cx(classes.container, className)}>
+        <span className={classes.dot} />
+        <span className={classes.count}>{formattedCount}</span>
+      </span>
     </Tooltip>
   );
 };

package/src/TopCounterElements/TopCounterLayout.tsx

@@ -1,79 +1,48 @@
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import type { SvgIconProps } from '@mui/material';
-import { Badge, ClickAwayListener } from '@mui/material';
+import { ClickAwayListener, Tooltip } from '@mui/material';
 
-import { ComponentType, useEffect, useState } from 'react';
+import type { ComponentType, MouseEvent } from 'react';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router';
 import { makeStyles } from 'tss-react/mui';
 
 import useCloseOnLegacyPage from './useCloseOnLegacyPage';
 
 const useStyles = makeStyles()((theme) => ({
-  button: {
-    '& > svg': {
-      height: '0.9em',
-      margin: `-${theme.spacing(0.5)}`,
-      [theme.breakpoints.down(1025)]: {
-        margin: `-${theme.spacing(0.5)}`
-      }
-    },
-    appearance: 'none',
-    background: 'none',
-    border: 0,
-    color: theme.palette.common.white,
-    cursor: 'pointer',
-    display: 'flex',
-
-    [theme.breakpoints.up(1025)]: {
-      alignItems: 'center',
-      flexFlow: 'row no-wrap',
-      marginTop: theme.spacing(0.5)
-    },
-
-    [theme.breakpoints.down(1025)]: {
-      alignItems: 'center',
-      flexFlow: 'column wrap',
-      order: 1
-    },
-
-    padding: '0'
-  },
   container: {
+    alignItems: 'center',
+    display: 'flex',
     position: 'relative'
   },
-  header: {
-    [theme.breakpoints.down(1025)]: {
-      display: 'flex',
-      flexFlow: 'row no-wrap'
-    }
-  },
-  iconWrapper: {
-    [theme.breakpoints.up(1025)]: {
-      position: 'absolute',
-      top: '0'
-    }
+  icon: {
+    '& > svg': {
+      display: 'block',
+      height: '16px',
+      width: '16px'
+    },
+    alignItems: 'center',
+    color: 'inherit',
+    display: 'inline-flex',
+    textDecoration: 'none'
   },
   indicators: {
+    alignItems: 'center',
+    display: 'inline-flex',
     lineHeight: 1,
     [theme.breakpoints.down(600)]: {
       display: 'none'
-    },
-    [theme.breakpoints.down(1025)]: {
-      flex: 'initial',
-      marginLeft: theme.spacing(0.5),
-      order: 2
-    },
-    [theme.breakpoints.up(1025)]: {
-      height: theme.spacing(2.5),
-      marginLeft: theme.spacing(3.75)
     }
   },
   subMenu: {
     backgroundColor: theme.palette.background.default,
+    borderRadius: theme.spacing(1),
     boxShadow: theme.shadows[3],
     boxSizing: 'border-box',
     left: 0,
     minWidth: theme.spacing(20),
+    overflow: 'hidden',
     position: 'absolute',
     textAlign: 'left',
     top: `calc(100% + ${theme.spacing(1.25)})`,
@@ -83,38 +52,53 @@ const useStyles = makeStyles()((theme) => ({
   subMenuOpen: {
     visibility: 'visible'
   },
-  textWrapper: {
+  tile: {
+    '& > svg': {
+      height: '16px',
+      width: '16px'
+    },
+    '&:hover': {
+      borderColor: theme.palette.tile.borderHover
+    },
     alignItems: 'center',
+    appearance: 'none',
+    background: theme.palette.tile.background,
+    border: `1px solid ${theme.palette.tile.border}`,
+    borderRadius: theme.spacing(1),
+    color: theme.palette.text.primary,
     display: 'inline-flex',
-    flex: '100%',
-    fontSize: theme.typography.body1.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-    lineHeight: '1',
-    whiteSpace: 'nowrap',
-    [theme.breakpoints.down(1025)]: {
-      display: 'none'
-    }
+    flexFlow: 'row nowrap',
+    gap: theme.spacing(1),
+    padding: '5px 9px'
+  },
+  tileButton: {
+    cursor: 'pointer'
   }
 }));
 
 interface TopCounterLayoutProps {
   Icon: ComponentType<SvgIconProps>;
+  iconLink?: string;
+  iconOnClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
   renderIndicators: () => JSX.Element;
-  renderSubMenu: (params: { closeSubMenu: () => void }) => JSX.Element;
-  showPendingBadge?: boolean;
+  renderSubMenu?: (params: { closeSubMenu: () => void }) => JSX.Element;
   title: string;
+  tooltipDescription?: string;
 }
 
 const TopCounterLayout = ({
   Icon,
   title,
+  iconLink,
+  iconOnClick,
   renderIndicators,
   renderSubMenu,
-  showPendingBadge
+  tooltipDescription
 }: TopCounterLayoutProps): JSX.Element => {
   const { classes, cx } = useStyles();
   const [toggled, setToggled] = useState(false);
   const subMenuId = title.replace(/[^A-Za-z]/, '-');
+  const isExpandable = Boolean(renderSubMenu);
   useCloseOnLegacyPage({ setToggled });
 
   useEffect(() => {
@@ -137,6 +121,38 @@ const TopCounterLayout = ({
     };
   }, [toggled]);
 
+  const iconWithTooltip = (
+    <Tooltip
+      disableInteractive
+      enterDelay={500}
+      enterNextDelay={500}
+      placement="bottom"
+      title={tooltipDescription ?? title}
+    >
+      <Icon />
+    </Tooltip>
+  );
+
+  if (!isExpandable) {
+    return (
+      <div className={classes.tile}>
+        {iconLink ? (
+          <Link
+            aria-label={title}
+            className={classes.icon}
+            onClick={iconOnClick}
+            to={iconLink}
+          >
+            {iconWithTooltip}
+          </Link>
+        ) : (
+          <span className={classes.icon}>{iconWithTooltip}</span>
+        )}
+        <span className={classes.indicators}>{renderIndicators()}</span>
+      </div>
+    );
+  }
+
   return (
     <ClickAwayListener
       onClickAway={(): void => {
@@ -147,40 +163,27 @@ const TopCounterLayout = ({
       }}
     >
       <div className={classes.container}>
-        <div className={classes.header}>
-          <div className={classes.indicators}>{renderIndicators()}</div>
-          <button
-            aria-controls={`${subMenuId}-menu`}
-            aria-expanded={toggled}
-            aria-haspopup="true"
-            aria-label={title}
-            className={classes.button}
-            id={`${subMenuId}-button`}
-            onClick={(): void => setToggled(!toggled)}
-            type="button"
-          >
-            <span className={classes.iconWrapper}>
-              <Badge
-                anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
-                color="pending"
-                invisible={!showPendingBadge}
-                overlap="circular"
-                variant="dot"
-              >
-                <Icon />
-              </Badge>
-            </span>
-            <span className={classes.textWrapper}>{title}</span>
-            {toggled ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-          </button>
-        </div>
+        <button
+          aria-controls={`${subMenuId}-menu`}
+          aria-expanded={toggled}
+          aria-haspopup="true"
+          aria-label={title}
+          className={cx(classes.tile, classes.tileButton)}
+          id={`${subMenuId}-button`}
+          onClick={(): void => setToggled(!toggled)}
+          type="button"
+        >
+          <span className={classes.icon}>{iconWithTooltip}</span>
+          <span className={classes.indicators}>{renderIndicators()}</span>
+          {toggled ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        </button>
         <div
           aria-labelledby={`${subMenuId}-button`}
           className={cx(classes.subMenu, { [classes.subMenuOpen]: toggled })}
           id={`${subMenuId}-menu`}
           role="menu"
         >
-          {renderSubMenu({ closeSubMenu: () => setToggled(false) })}
+          {renderSubMenu?.({ closeSubMenu: () => setToggled(false) })}
         </div>
       </div>
     </ClickAwayListener>

package/src/TopCounterElements/index.tsx

@@ -1,6 +1,4 @@
 export * from './formaters';
 export type { CounterProps } from './ResourceCounters';
 export { default as TopCounterResourceCounters } from './ResourceCounters';
-export type { SubMenuProps } from './ResourceSubMenu';
-export { default as TopCounterResourceSubMenu } from './ResourceSubMenu';
 export { default as TopCounterLayout } from './TopCounterLayout';

package/src/TopCounterElements/ResourceSubMenu.tsx

@@ -1,110 +0,0 @@
-import { List, ListItem } from '@mui/material';
-
-import { getStatusColors, type SeverityCode } from '@centreon/ui';
-import { ThemeMode } from '@centreon/ui-context';
-
-import { equals } from 'ramda';
-import { Link } from 'react-router';
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  count: {
-    marginLeft: 'auto'
-  },
-  link: {
-    alignItems: 'center',
-    color: 'inherit',
-    display: 'flex',
-    flex: '100%',
-    padding: `0 ${theme.spacing(1)}`,
-    textDecoration: 'none'
-  },
-  status: {
-    alignItems: 'center',
-    display: 'flex'
-  },
-  statusCounter: {
-    borderRadius: '50%',
-    height: theme.spacing(1),
-    marginRight: theme.spacing(1),
-    width: theme.spacing(1)
-  },
-  submenu: {
-    fontSize: theme.typography.body2.fontSize,
-    padding: 0
-  },
-  submenuItem: {
-    '&:hover': {
-      background: equals(theme.palette.mode, ThemeMode.dark)
-        ? theme.palette.primary.dark
-        : theme.palette.primary.light,
-      color: equals(theme.palette.mode, ThemeMode.dark)
-        ? theme.palette.common.white
-        : theme.palette.primary.main
-    },
-    '&:not(:last-child)': {
-      borderBottom: `1px solid ${theme.palette.divider}`
-    }
-  }
-}));
-
-export interface SubMenuProps {
-  items: Array<{
-    countTestId?: string;
-    onClick: (e: React.MouseEvent) => void;
-    severityCode: SeverityCode;
-    submenuCount: string | number;
-    submenuTitle: string;
-    to: string;
-  }>;
-  onClose?: () => void;
-}
-
-const SubMenu = ({ items, onClose }: SubMenuProps): JSX.Element => {
-  const { classes, theme } = useStyles();
-
-  return (
-    <List className={classes.submenu}>
-      {items.map(
-        ({
-          onClick,
-          severityCode,
-          submenuTitle,
-          submenuCount,
-          countTestId,
-          to
-        }) => (
-          <ListItem
-            className={classes.submenuItem}
-            disableGutters
-            key={to}
-            onClick={onClose}
-          >
-            <Link
-              className={classes.link}
-              onClick={onClick}
-              role="menuitem"
-              to={to}
-            >
-              <span className={classes.status}>
-                <span
-                  className={classes.statusCounter}
-                  style={{
-                    backgroundColor: getStatusColors({ severityCode, theme })
-                      ?.backgroundColor
-                  }}
-                />
-                <span>{submenuTitle}</span>
-              </span>
-              <span className={classes.count} data-testid={countTestId}>
-                {submenuCount}
-              </span>
-            </Link>
-          </ListItem>
-        )
-      )}
-    </List>
-  );
-};
-
-export default SubMenu;