@centreon/ui 23.10.62 → 23.10.64

package/src/Graph/SingleBar/Thresholds.tsx

@@ -1,20 +1,13 @@
-import { useTheme } from '@mui/material';
+import { Thresholds } from '../common/models';
 
-export const margin = 40;
-
-export const barHeight = 50;
+import { ThresholdLine } from './ThresholdLine';
 
 export const groupMargin = 25;
 
-const lineMargin = 10;
-
-const thresholdLineHeight = 60 + 2 * lineMargin;
-
 interface Props {
   hideTooltip: () => void;
   showTooltip: (args) => void;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
   xScale: (value: number) => number;
 }
 
@@ -22,79 +15,32 @@ const Thresholds = ({
   xScale,
   thresholds,
   showTooltip,
-  hideTooltip,
-  thresholdTooltipLabels
-}: Props): JSX.Element => {
-  const theme = useTheme();
-
-  const warningValue = thresholds[0];
-  const criticalValue = thresholds[1];
-  const warningTooltipLabel = thresholdTooltipLabels[0];
-  const criticalTooltipLabel = thresholdTooltipLabels[1];
-
-  const bottom = barHeight + margin * 2;
-
-  const onMouseEnter =
-    ({ label, left }) =>
-    (): void =>
-      showTooltip({
-        tooltipData: label,
-        tooltipLeft: left,
-        tooltipTop: bottom
-      });
-
-  return (
-    <>
-      <line
-        data-testid="warning-line"
-        stroke={theme.palette.warning.main}
-        strokeDasharray={4}
-        strokeWidth={2}
-        x1={xScale(warningValue)}
-        x2={xScale(warningValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-      />
-      <line
-        data-testid="critical-line"
-        stroke={theme.palette.error.main}
-        strokeDasharray={4}
-        strokeWidth={2}
-        x1={xScale(criticalValue)}
-        x2={xScale(criticalValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-      />
-      <line
-        data-testid="warning-line-tooltip"
-        stroke="transparent"
-        strokeWidth={5}
-        x1={xScale(warningValue)}
-        x2={xScale(warningValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-        onMouseEnter={onMouseEnter({
-          label: warningTooltipLabel,
-          left: xScale(warningValue)
-        })}
-        onMouseLeave={hideTooltip}
+  hideTooltip
+}: Props): JSX.Element => (
+  <>
+    {thresholds.warning.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`warning-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        thresholdType="warning"
+        value={value}
+        xScale={xScale}
       />
-      <line
-        data-testid="critical-line-tooltip"
-        stroke="transparent"
-        strokeWidth={5}
-        x1={xScale(criticalValue)}
-        x2={xScale(criticalValue)}
-        y1={groupMargin + 3 * lineMargin}
-        y2={thresholdLineHeight + groupMargin + 3 * lineMargin}
-        onMouseEnter={onMouseEnter({
-          label: criticalTooltipLabel,
-          left: xScale(criticalValue)
-        })}
-        onMouseLeave={hideTooltip}
+    ))}
+    {thresholds.critical.map(({ value, label }) => (
+      <ThresholdLine
+        hideTooltip={hideTooltip}
+        key={`critical-${value.toString()}`}
+        label={label}
+        showTooltip={showTooltip}
+        thresholdType="critical"
+        value={value}
+        xScale={xScale}
       />
-    </>
-  );
-};
+    ))}
+  </>
+);
 
 export default Thresholds;

package/src/Graph/SingleBar/models.ts

@@ -1,8 +1,6 @@
-import { LineChartData } from '../common/models';
+import { LineChartData, Thresholds } from '../common/models';
 
 export interface SingleBarProps {
   data?: LineChartData;
-  disabledThresholds?: boolean;
-  thresholdTooltipLabels: Array<string>;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }

package/src/Graph/Text/Text.tsx

@@ -2,7 +2,7 @@ import { isNil } from 'ramda';
 
 import { Typography, useTheme } from '@mui/material';
 
-import { LineChartData } from '../common/models';
+import { LineChartData, Thresholds } from '../common/models';
 import {
   formatMetricValue,
   getMetricWithLatestData
@@ -13,19 +13,17 @@ import { useTextStyles } from './Text.styles';
 
 interface Props {
   data?: LineChartData;
-  disabledThresholds?: boolean;
   labels: {
     critical: string;
     warning: string;
   };
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }
 
 export const Text = ({
   thresholds,
   data,
-  labels,
-  disabledThresholds
+  labels
 }: Props): JSX.Element | null => {
   const theme = useTheme();
   const { classes } = useTextStyles();
@@ -44,6 +42,20 @@ export const Text = ({
     thresholds
   });
 
+  const warningThresholdLabels = thresholds.warning.map(({ value }) =>
+    formatMetricValue({
+      unit: metricUnit,
+      value
+    })
+  );
+
+  const criticalThresholdLabels = thresholds.critical.map(({ value }) =>
+    formatMetricValue({
+      unit: metricUnit,
+      value
+    })
+  );
+
   return (
     <div className={classes.graphText}>
       <Typography sx={{ color }} variant="h3">
@@ -53,25 +65,17 @@ export const Text = ({
         })}{' '}
         {metricUnit}
       </Typography>
-      {!disabledThresholds && (
+      {thresholds.enabled && (
         <div className={classes.thresholds}>
           <Typography sx={{ color: 'warning.main' }} variant="h5">
             {labels.warning}
             {': '}
-            {formatMetricValue({
-              unit: metricUnit,
-              value: thresholds[0]
-            })}{' '}
-            {metricUnit}
+            {warningThresholdLabels.join(' - ')} {metricUnit}
           </Typography>
           <Typography sx={{ color: 'error.main' }} variant="h5">
             {labels.critical}
             {': '}
-            {formatMetricValue({
-              unit: metricUnit,
-              value: thresholds[1]
-            })}{' '}
-            {metricUnit}
+            {criticalThresholdLabels.join(' - ')} {metricUnit}
           </Typography>
         </div>
       )}

package/src/Graph/common/models.ts

@@ -5,3 +5,15 @@ export interface LineChartData {
   metrics: Array<Metric>;
   times: Array<string>;
 }
+
+export interface Thresholds {
+  critical: Array<{
+    label: string;
+    value: number;
+  }>;
+  enabled: boolean;
+  warning: Array<{
+    label: string;
+    value: number;
+  }>;
+}

package/src/Graph/common/utils.ts

@@ -1,20 +1,73 @@
-import { T, always, cond, gt, head } from 'ramda';
+import {
+  T,
+  always,
+  cond,
+  equals,
+  gt,
+  gte,
+  head,
+  length,
+  lt,
+  lte,
+  pluck
+} from 'ramda';
 
 import { Theme } from '@mui/material';
 
+import { Thresholds } from './models';
+
 interface GetColorFromDataAndThresholdsProps {
   data: number;
   theme: Theme;
-  thresholds: Array<number>;
+  thresholds: Thresholds;
 }
 
 export const getColorFromDataAndTresholds = ({
   data,
   thresholds,
   theme
-}: GetColorFromDataAndThresholdsProps): string =>
-  cond([
-    [gt(head(thresholds) as number), always(theme.palette.success.main)],
-    [gt(thresholds[1]), always(theme.palette.warning.main)],
+}: GetColorFromDataAndThresholdsProps): string => {
+  if (!thresholds.enabled) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValues = pluck('value', thresholds.critical).sort();
+  const warningValues = pluck('value', thresholds.warning).sort();
+
+  if (
+    equals(length(criticalValues), 2) &&
+    lte(criticalValues[0], data) &&
+    gte(criticalValues[1], data)
+  ) {
+    return theme.palette.error.main;
+  }
+
+  if (
+    equals(length(warningValues), 2) &&
+    lte(warningValues[0], data) &&
+    gte(warningValues[1], data)
+  ) {
+    return theme.palette.warning.main;
+  }
+
+  if (equals(length(warningValues), 2)) {
+    return theme.palette.success.main;
+  }
+
+  const criticalValue = head(criticalValues) as number;
+  const warningValue = head(warningValues) as number;
+
+  if (gt(warningValue, criticalValue)) {
+    return cond([
+      [lt(warningValue), always(theme.palette.success.main)],
+      [lt(criticalValue), always(theme.palette.warning.main)],
+      [T, always(theme.palette.error.main)]
+    ])(data);
+  }
+
+  return cond([
+    [gt(warningValue), always(theme.palette.success.main)],
+    [gt(criticalValue), always(theme.palette.warning.main)],
     [T, always(theme.palette.error.main)]
   ])(data);
+};

package/src/Listing/ActionBar/index.tsx

@@ -86,7 +86,7 @@ type Props = Pick<
   | 'moveTablePagination'
   | 'widthToMoveTablePagination'
   | 'customPaginationClassName'
-  | 'viewMode'
+  | 'listingVariant'
   | 'viewerModeConfiguration'
 >;
 
@@ -107,7 +107,8 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  viewMode
+  listingVariant,
+  visualizationActions
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -136,6 +137,7 @@ const MemoListingActionBar = ({
         <div className={classes.actions}>
           <div>{actions}</div>
         </div>
+        {visualizationActions && <div>{visualizationActions}</div>}
         <div className={classes.subContainer}>
           {!isEmpty(viewerModeConfiguration) &&
             !isNil(viewerModeConfiguration) && (
@@ -159,7 +161,10 @@ const MemoListingActionBar = ({
                     viewerModeConfiguration?.customStyle
                       ?.customStyleViewerModeIcon,
                     {
-                      [classes.mode]: equals(viewMode, ListingVariant.extended)
+                      [classes.mode]: equals(
+                        listingVariant,
+                        ListingVariant.extended
+                      )
                     }
                   )}
                 >
@@ -210,7 +215,7 @@ const MemoListingActionBar = ({
       currentPage,
       moveTablePagination,
       widthToMoveTablePagination,
-      viewMode,
+      listingVariant,
       themeMode,
       limit,
       pick(
@@ -240,8 +245,9 @@ const ListingActionBar = ({
   moveTablePagination,
   widthToMoveTablePagination,
   customPaginationClassName,
-  viewMode,
-  viewerModeConfiguration
+  listingVariant,
+  viewerModeConfiguration,
+  visualizationActions
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -260,11 +266,12 @@ const ListingActionBar = ({
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
       limit={limit}
+      listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
       paginated={paginated}
       totalRows={totalRows}
-      viewMode={viewMode}
       viewerModeConfiguration={viewerModeConfiguration}
+      visualizationActions={visualizationActions}
       widthToMoveTablePagination={widthToMoveTablePagination}
       onLimitChange={onLimitChange}
       onPaginate={onPaginate}

package/src/Listing/Cell/DataCell.tsx

@@ -27,10 +27,10 @@ interface Props {
   isRowSelected: boolean;
   labelCollapse?: string;
   labelExpand?: string;
+  listingVariant?: ListingVariant;
   row?;
   rowColorConditions?: Array<RowColorCondition>;
   subItemsRowProperty?: string;
-  viewMode?: ListingVariant;
 }
 
 const DataCell = ({
@@ -40,14 +40,14 @@ const DataCell = ({
   isRowHovered,
   rowColorConditions,
   disableRowCondition,
-  viewMode,
+  listingVariant,
   getHighlightRowCondition,
   subItemsRowProperty,
   labelCollapse,
   labelExpand
 }: Props): JSX.Element | null => {
   const { classes } = useStyles();
-  const { dataStyle } = useStyleTable({ viewMode });
+  const { dataStyle } = useStyleTable({ listingVariant });
 
   const commonCellProps = {
     disableRowCondition,
@@ -85,10 +85,10 @@ const DataCell = ({
         <Cell
           className={classes.cell}
           isRowHighlighted={isRowHighlighted}
+          listingVariant={listingVariant}
           style={{
             gridColumn
           }}
-          viewMode={viewMode}
           {...commonCellProps}
         >
           {isTruncated && (
@@ -114,7 +114,7 @@ const DataCell = ({
         <Cell
           className={classes.cell}
           isRowHighlighted={isRowHighlighted}
-          viewMode={viewMode}
+          listingVariant={listingVariant}
           onClick={(e): void => {
             if (!clickable && !column.displaySubItemsCaret) {
               return;
@@ -222,7 +222,7 @@ const MemoizedDataCell = memo<Props>(
 
     // Explicitely prevent the component from rendering.
     if (nextRenderComponentCondition === false) {
-      return equals(prevProps.viewMode, nextProps.viewMode);
+      return equals(prevProps.listingVariant, nextProps.listingVariant);
     }
 
     const previousRowProps = previousRowMemoProps
@@ -255,7 +255,7 @@ const MemoizedDataCell = memo<Props>(
         nextProps.disableRowCondition(nextProps.row)
       ) &&
       equals(previousIsRowHighlighted, nextIsRowHighlighted) &&
-      equals(prevProps.viewMode, nextProps.viewMode) &&
+      equals(prevProps.listingVariant, nextProps.listingVariant) &&
       equals(prevProps.subItemsRowProperty, nextProps.subItemsRowProperty)
     );
   }

package/src/Listing/Cell/index.tsx

@@ -54,7 +54,7 @@ const getBackgroundColor = ({
 
 interface StylesProps extends Props {
   isRowHighlighted?: boolean;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 interface GetRowHighlightStyleProps {
@@ -81,7 +81,7 @@ const useStyles = makeStyles<StylesProps>()(
       rowColorConditions,
       disableRowCondition,
       isRowHighlighted,
-      viewMode
+      listingVariant
     }
   ) => ({
     caret: {
@@ -115,7 +115,7 @@ const useStyles = makeStyles<StylesProps>()(
       },
       height: '100%',
       overflow: 'hidden',
-      ...getTextStyleByViewMode({ theme, viewMode }),
+      ...getTextStyleByViewMode({ listingVariant, theme }),
       p: getRowHighlightStyle({ isRowHighlighted, theme }),
       padding: theme.spacing(0, 1),
       whiteSpace: 'nowrap'
@@ -133,8 +133,8 @@ interface Props
   isRowHighlighted?: boolean;
   labelCollapse?: string;
   labelExpand?: string;
+  listingVariant?: ListingVariant;
   subItemsRowProperty?: string;
-  viewMode?: ListingVariant;
 }
 
 const isPivotExistInTheList = (
@@ -193,7 +193,7 @@ const Cell = ({
           'rowColorConditions',
           'disableRowCondition',
           'isRowHighlighted',
-          'viewMode'
+          'listingVariant'
         ],
         props
       )}

package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts

@@ -7,11 +7,11 @@ import { getTextStyleByViewMode } from '../../useStyleTable';
 interface StylesProps {
   isDragging?: boolean;
   isInDragOverlay?: boolean;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 const useStyles = makeStyles<StylesProps>()(
-  (theme, { isDragging, isInDragOverlay, viewMode }) => ({
+  (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
     active: {
       '&, &:hover, &:focus': {
         color: theme.palette.common.white
@@ -54,7 +54,7 @@ const useStyles = makeStyles<StylesProps>()(
       borderBottom: 'none',
       height: 'inherit',
       padding: theme.spacing(0, 1),
-      ...getTextStyleByViewMode({ theme, viewMode }),
+      ...getTextStyleByViewMode({ listingVariant, theme }),
       '&:hover, &:focus-within, &[data-isdragging=true]': {
         '& .dragHandle': {
           opacity: 1

package/src/Listing/Header/Cell/ListingHeaderCell.tsx

@@ -38,13 +38,13 @@ const ListingHeaderCell = ({
   style,
   isInDragOverlay,
   areColumnsEditable,
-  viewMode,
+  listingVariant,
   ...props
 }: Props): JSX.Element => {
   const { classes, cx } = useStyles({
     isDragging,
     isInDragOverlay,
-    viewMode
+    listingVariant
   });
   const columnLabel = column.shortLabel || column.label;
 

package/src/Listing/Header/ListingHeader.tsx

@@ -31,9 +31,9 @@ type Props = Pick<
   | 'totalRows'
 > & {
   areColumnsEditable: boolean;
+  listingVariant?: ListingVariant;
   memoProps: Array<unknown>;
   rowCount: number;
-  viewMode?: ListingVariant;
 } & SelectActionListingHeaderCellProps;
 
 interface ContentProps extends Pick<Props, 'sortField' | 'sortOrder'> {
@@ -57,7 +57,7 @@ const ListingHeader = ({
   checkable,
   memoProps,
   areColumnsEditable,
-  viewMode,
+  listingVariant,
   onSelectAllClick,
   selectedRowCount,
   predefinedRowsSelection,
@@ -92,10 +92,10 @@ const ListingHeader = ({
           isDragging={isDragging}
           isInDragOverlay={isInDragOverlay}
           itemRef={itemRef}
+          listingVariant={listingVariant}
           sortField={sortField}
           sortOrder={sortOrder}
           style={style}
-          viewMode={viewMode}
           onSort={onSort}
           {...listeners}
           {...attributes}
@@ -160,7 +160,7 @@ const MemoizedListingHeader = React.memo<Props>(
     equals(prevProps.columnConfiguration, nextProps.columnConfiguration) &&
     equals(prevProps.memoProps, nextProps.memoProps) &&
     equals(prevProps.areColumnsEditable, nextProps.areColumnsEditable) &&
-    equals(prevProps.viewMode, nextProps.viewMode)
+    equals(prevProps.listingVariant, nextProps.listingVariant)
 );
 
 export { MemoizedListingHeader as ListingHeader };

package/src/Listing/Listing.styles.ts

@@ -10,8 +10,8 @@ interface StylesProps {
   dataStyle: TableStyle;
   getGridTemplateColumn: string;
   limit: number;
+  listingVariant: ListingVariant;
   rows: Array<unknown>;
-  viewMode: ListingVariant;
 }
 
 const useListingStyles = makeStyles<StylesProps>()(

package/src/Listing/Row/Row.tsx

@@ -46,11 +46,11 @@ type Props = {
   isShiftKeyDown: boolean;
   lastSelectionIndex: number | null;
   limit: number;
+  listingVariant?: ListingVariant;
   row;
   rowColorConditions: Array<RowColorCondition>;
   shiftKeyDownRowPivot: number | null;
   subItemsPivots: Array<number | string>;
-  viewMode?: ListingVariant;
   visibleColumns: Array<Column>;
 } & TableRowProps;
 
@@ -116,7 +116,7 @@ const Row = memo<RowProps>(
       isShiftKeyDown: prevIsShiftKeyDown,
       shiftKeyDownRowPivot: prevShiftKeyDownRowPivot,
       lastSelectionIndex: prevLastSelectionIndex,
-      viewMode: prevViewMode
+      listingVariant: prevViewMode
     } = prevProps;
     const {
       row: nextRow,
@@ -127,7 +127,7 @@ const Row = memo<RowProps>(
       shiftKeyDownRowPivot: nextShiftKeyDownRowPivot,
       lastSelectionIndex: nextLastSelectionIndex,
       limit: nextLimit,
-      viewMode: nextViewMode
+      listingVariant: nextViewMode
     } = nextProps;
 
     if (

package/src/Listing/index.stories.tsx

@@ -177,17 +177,17 @@ const StoryTemplate = ({
 export const normal = (): JSX.Element => <StoryTemplate />;
 
 export const WithSpecifiedViewMode = (): JSX.Element => {
-  const [viewMode, setViewMode] = useState(ListingVariant.extended);
-  const newViewMode = equals(viewMode, ListingVariant.compact)
+  const [listingVariant, setListingVariant] = useState(ListingVariant.extended);
+  const newListingVariant = equals(listingVariant, ListingVariant.compact)
     ? ListingVariant.extended
     : ListingVariant.compact;
 
   return (
     <StoryTemplate
-      viewMode={viewMode}
+      listingVariant={listingVariant}
       viewerModeConfiguration={{
-        onClick: () => setViewMode(newViewMode),
-        title: viewMode
+        onClick: () => setListingVariant(newListingVariant),
+        title: listingVariant
       }}
     />
   );