@centreon/ui 26.11.12 → 26.11.14

package/package.json

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

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

@@ -3,6 +3,7 @@ import { userAtom } from '@centreon/ui-context';
 import { renderHook } from '@testing-library/react';
 import dayjs from 'dayjs';
 import { useAtomValue } from 'jotai';
+import { equals, update } from 'ramda';
 
 import { labelAvg, labelMax, labelMin } from '../Chart/translatedLabels';
 import dataMissingPoint from '../mockedData/dataWithMissingPoint.json';
@@ -19,6 +20,29 @@ const defaultStart = new Date(
 
 const defaultEnd = new Date(Date.now()).toISOString();
 
+const hoveredStackedBarIndex = 6;
+
+const dataPingServiceStackedWithUndefinedValues = {
+  ...dataPingServiceStacked,
+  metrics: dataPingServiceStacked.metrics.map((metric) => {
+    if (equals(metric.metric_id, 3)) {
+      return {
+        ...metric,
+        data: update(hoveredStackedBarIndex, null, metric.data)
+      };
+    }
+
+    if (equals(metric.metric_id, 4)) {
+      return {
+        ...metric,
+        data: update(hoveredStackedBarIndex, 0, metric.data)
+      };
+    }
+
+    return metric;
+  })
+};
+
 const defaultArgs = {
   end: defaultEnd,
   height: 500,
@@ -229,6 +253,63 @@ describe('Bar chart', () => {
     });
   });
 
+  it('displays only metrics with a defined value in the tooltip when the mode is set to defined', () => {
+    initialize({
+      data: dataPingServiceStackedWithUndefinedValues,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'defined',
+        sortOrder: 'name'
+      }
+    });
+
+    checkWidth();
+    cy.contains('0 ms').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.get('body').realMouseMove(0, 0);
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+
+    cy.get('[data-metric="Centreon-Server: Round-Trip Average Time"]').should(
+      'be.visible'
+    );
+    cy.get('[data-metric="Centreon-Server: Round-Trip Maximum Time"]').should(
+      'not.exist'
+    );
+    cy.get('[data-metric="Centreon-Server: Round-Trip Minimum Time"]').should(
+      'not.exist'
+    );
+  });
+
+  it('displays metrics with an undefined value in the tooltip when the mode is set to all', () => {
+    initialize({
+      data: dataPingServiceStackedWithUndefinedValues,
+      orientation: 'horizontal',
+      tooltip: {
+        mode: 'all',
+        sortOrder: 'name'
+      }
+    });
+
+    checkWidth();
+    cy.contains('0 ms').should('be.visible');
+    cy.contains(':40 AM').should('be.visible');
+
+    cy.get('body').realMouseMove(0, 0);
+    cy.findByTestId('stacked-bar-1-0-0.05296').realHover();
+
+    cy.contains('06/19/2024').should('be.visible');
+
+    cy.get('[data-metric="Centreon-Server: Round-Trip Maximum Time"]').should(
+      'be.visible'
+    );
+    cy.get('[data-metric="Centreon-Server: Round-Trip Minimum Time"]').should(
+      'be.visible'
+    );
+  });
+
   it('does not display a tooltip when a bar is hovered and a props is set', () => {
     initialize({
       data: dataPingServiceStacked,

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -5,7 +5,6 @@ import {
   always,
   cond,
   equals,
-  filter,
   gt,
   has,
   isNil,
@@ -20,6 +19,7 @@ import { useLocaleDateTimeFormat } from '../../../utils';
 import type { Tooltip } from '../../Chart/models';
 import { formatMetricValueWithUnit } from '../../common/timeSeries';
 import type { TimeValue } from '../../common/timeSeries/models';
+import { isMetricDisplayedInTooltip } from '../../common/utils';
 import { tooltipDataAtom } from '../atoms';
 import { useBarChartTooltipStyles } from './useBarChartTooltipStyles';
 
@@ -49,14 +49,13 @@ const BarChartTooltip = ({
   const date = timeSeries[tooltipData.index].timeTick;
   const formattedDateTime = format({ date, formatString: 'L LTS' });
 
-  const isSingleMode = equals(mode, 'single');
-
-  const filteredMetrics = isSingleMode
-    ? filter(
-        ({ metric }) => equals(metric.metric_id, tooltipData.highlightedMetric),
-        tooltipData.data
-      )
-    : tooltipData.data;
+  const filteredMetrics = tooltipData.data.filter(({ metric, value }) =>
+    isMetricDisplayedInTooltip({
+      isHighlighted: equals(metric.metric_id, tooltipData.highlightedMetric),
+      mode,
+      value
+    })
+  );
 
   const displayHighLightedMetric = gt(filteredMetrics.length, 1);
 

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

@@ -1,6 +1,7 @@
 import { userAtom } from '@centreon/ui-context';
 
 import { createStore, Provider } from 'jotai';
+import { always, equals } from 'ramda';
 import { useState } from 'react';
 
 import type { LineChartData } from '../common/models';
@@ -17,6 +18,15 @@ import { args as argumentsData } from './helpers/doc';
 import type { LineChartProps } from './models';
 import { labelAvg, labelMin } from './translatedLabels';
 
+const dataLastDayWithZeroConnTime = {
+  ...dataLastDay,
+  metrics: dataLastDay.metrics.map((metric) =>
+    equals(metric.metric, 'connTime')
+      ? { ...metric, data: metric.data.map(always(0)) }
+      : metric
+  )
+};
+
 interface Props
   extends Pick<
     LineChartProps,
@@ -281,6 +291,38 @@ describe('Line chart', () => {
 
       cy.makeSnapshot();
     });
+
+    it('displays only metrics with a defined value when the mode is set to defined', () => {
+      initialize({
+        data: dataLastDayWithZeroConnTime,
+        tooltip: { mode: 'defined', sortOrder: 'name' }
+      });
+
+      checkGraphWidth();
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="connTime"]').should('not.exist');
+    });
+
+    it('displays metrics with a zero value when the mode is set to all', () => {
+      initialize({
+        data: dataLastDayWithZeroConnTime,
+        tooltip: { mode: 'all', sortOrder: 'name' }
+      });
+
+      checkGraphWidth();
+
+      cy.contains('Min: 70.31').should('be.visible');
+
+      cy.findByTestId('graph-interaction-zone').realMouseMove(452, 26);
+
+      cy.get('[data-metric="querytime"]').should('be.visible');
+      cy.get('[data-metric="connTime"]').should('be.visible');
+    });
   });
 
   it('displays the curves with different shades when curves have same color', () => {

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

@@ -48,7 +48,7 @@ const GraphValueTooltip = ({
         equals('hidden', tooltip?.mode) ? null : (
           <GraphValueTooltipContent
             base={baseAxis}
-            isSingleMode={equals('single', tooltip?.mode)}
+            mode={tooltip?.mode}
             // @ts-expect-error - suppressing pre-existing type mismatch
             sortOrder={tooltip?.sortOrder}
           />

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/GraphValueTooltipContent.tsx

@@ -9,20 +9,21 @@ import { mousePositionAtom } from '../interactionWithGraphAtoms';
 import { useGraphValueTooltip } from './useGraphValueTooltip';
 import { useGraphValueTooltipStyles } from './useGraphValueTooltipStyles';
 
-interface Props extends Pick<Tooltip, 'sortOrder'> {
+interface Props
+  extends Pick<Tooltip, 'sortOrder'>,
+    Partial<Pick<Tooltip, 'mode'>> {
   base: number;
-  isSingleMode: boolean;
 }
 
 const GraphValueTooltipContent = ({
   base,
-  isSingleMode,
+  mode,
   sortOrder
 }: Props): JSX.Element | null => {
   const { classes } = useGraphValueTooltipStyles();
   const mousePosition = useAtomValue(mousePositionAtom);
 
-  const graphValue = useGraphValueTooltip({ isSingleMode, sortOrder });
+  const graphValue = useGraphValueTooltip({ mode, sortOrder });
 
   if (isNil(graphValue) || isNil(mousePosition)) {
     return null;

package/src/Graph/Chart/InteractiveComponents/GraphValueTooltip/useGraphValueTooltip.ts

@@ -1,17 +1,8 @@
 import { useAtomValue } from 'jotai';
-import {
-  always,
-  cond,
-  equals,
-  filter,
-  isNil,
-  prop,
-  reverse,
-  sortBy,
-  T
-} from 'ramda';
+import { always, cond, equals, isNil, prop, reverse, sortBy, T } from 'ramda';
 
 import { useLocaleDateTimeFormat } from '../../../../utils';
+import { isMetricDisplayedInTooltip } from '../../../common/utils';
 import type { GraphTooltipData, Tooltip } from '../../models';
 import { graphTooltipDataAtom } from '../interactionWithGraphAtoms';
 
@@ -19,12 +10,12 @@ interface UseGraphValueTooltipState extends Omit<GraphTooltipData, 'date'> {
   dateTime: string;
 }
 
-interface UseGraphValueTooltipProps extends Pick<Tooltip, 'sortOrder'> {
-  isSingleMode: boolean;
-}
+interface UseGraphValueTooltipProps
+  extends Pick<Tooltip, 'sortOrder'>,
+    Partial<Pick<Tooltip, 'mode'>> {}
 
 export const useGraphValueTooltip = ({
-  isSingleMode,
+  mode,
   sortOrder
 }: UseGraphValueTooltipProps): UseGraphValueTooltipState | null => {
   const { format } = useLocaleDateTimeFormat();
@@ -34,12 +25,13 @@ export const useGraphValueTooltip = ({
     return null;
   }
 
-  const filteredMetrics = isSingleMode
-    ? filter(
-        ({ id }) => equals(id, graphTooltipData.highlightedMetricId),
-        graphTooltipData.metrics
-      )
-    : graphTooltipData.metrics;
+  const filteredMetrics = graphTooltipData.metrics.filter(({ id, value }) =>
+    isMetricDisplayedInTooltip({
+      isHighlighted: equals(id, graphTooltipData.highlightedMetricId),
+      mode,
+      value
+    })
+  );
 
   const sortedMetrics = cond([
     [equals('name'), always(sortBy(prop('name'), filteredMetrics))],

package/src/Graph/Chart/models.ts

@@ -74,7 +74,7 @@ export interface ThresholdTooltip {
   thresholdLabel?: string;
 }
 export interface Tooltip {
-  mode: 'all' | 'single' | 'hidden';
+  mode: 'all' | 'single' | 'hidden' | 'defined';
   renderComponent?: (args: TooltipData) => ReactNode;
   sortOrder: 'name' | 'ascending' | 'descending';
 }

package/src/Graph/common/utils.ts

@@ -22,7 +22,7 @@ import {
 } from 'ramda';
 
 import type { BarStyle } from '../BarChart/models';
-import type { LineStyle } from '../Chart/models';
+import type { LineStyle, Tooltip } from '../Chart/models';
 import type { Threshold, Thresholds } from './models';
 import { formatMetricValueWithUnit } from './timeSeries';
 import type { Line, TimeValue } from './timeSeries/models';
@@ -278,3 +278,25 @@ export const computPixelsToShiftMouse = (
 
   return Math.round(8 / hoursDiffInGraph);
 };
+
+interface IsMetricDisplayedInTooltipProps
+  extends Partial<Pick<Tooltip, 'mode'>> {
+  isHighlighted: boolean;
+  value?: number | null;
+}
+
+export const isMetricDisplayedInTooltip = ({
+  mode,
+  isHighlighted,
+  value
+}: IsMetricDisplayedInTooltipProps): boolean => {
+  if (equals(mode, 'single')) {
+    return isHighlighted;
+  }
+
+  if (equals(mode, 'defined')) {
+    return Boolean(value);
+  }
+
+  return true;
+};

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

@@ -1,9 +1,11 @@
 import AddIcon from '@mui/icons-material/Add';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { CircularProgress } from '@mui/material';
 
 import { useTranslation } from 'react-i18next';
 
 import { Button, Menu } from '../..';
+import { labelLoading } from './translatedLabels';
 
 interface NamedEntity {
   id: number | string;
@@ -16,10 +18,13 @@ type Props = {
   goBack: () => void;
   isActive: (id: number | string) => boolean;
   isDisabled?: (id: number | string) => boolean;
+  isLoading?: boolean;
   labels: {
     create: string;
     goBack: string;
   };
+  // Observed at the bottom of the list to load the next page when it is reached
+  loadMoreRef?: (node: Element | null) => void;
   navigateToElement: (id: number | string) => () => void;
 };
 
@@ -27,6 +32,8 @@ export const PageQuickAccess = ({
   elements,
   isActive,
   isDisabled,
+  isLoading,
+  loadMoreRef,
   navigateToElement,
   goBack,
   create,
@@ -38,16 +45,27 @@ export const PageQuickAccess = ({
     <Menu>
       <Menu.Button data-testid="quickaccess" />
       <Menu.Items>
-        {elements?.map((element) => (
-          <Menu.Item
-            isActive={isActive(element.id)}
-            isDisabled={isDisabled?.(element.id)}
-            key={`${element.id}`}
-            onClick={navigateToElement(element.id)}
-          >
-            {element.name}
-          </Menu.Item>
-        ))}
+        <div
+          className="max-h-[50vh] overflow-y-auto"
+          data-testid="quickaccess-elements"
+        >
+          {elements?.map((element) => (
+            <Menu.Item
+              isActive={isActive(element.id)}
+              isDisabled={isDisabled?.(element.id)}
+              key={`${element.id}`}
+              onClick={navigateToElement(element.id)}
+            >
+              {element.name}
+            </Menu.Item>
+          ))}
+          {loadMoreRef && <div className="h-px" ref={loadMoreRef} />}
+          {isLoading && (
+            <div className="flex justify-center py-2">
+              <CircularProgress aria-label={t(labelLoading)} size={20} />
+            </div>
+          )}
+        </div>
         <Menu.Divider key="divider" />
         <div className="px-2 pb-2 flex gap-4">
           <Button

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

@@ -0,0 +1 @@
+export const labelLoading = 'Loading...';

package/src/utils/useInfiniteScrollListing.ts

@@ -49,6 +49,15 @@ export const useInfiniteScrollListing = <T>({
 
   const [page, setPage] = useAtom(pageAtom);
 
+  // Shared by the active query and the next page prefetch, so that the
+  // prefetched page is reused instead of being requested again
+  const getQueryKey = (queryPage: number): Array<string | number> => [
+    queryKeyName,
+    queryPage,
+    JSON.stringify(parameters),
+    JSON.stringify(customQueryParameters)
+  ];
+
   const { data, isLoading, prefetchNextPage, fetchStatus } = useFetchQuery<
     Listing<T>
   >({
@@ -59,12 +68,7 @@ export const useInfiniteScrollListing = <T>({
         customQueryParameters,
         parameters: { limit, page: params?.page || page, ...parameters }
       }),
-    getQueryKey: () => [
-      queryKeyName,
-      page,
-      JSON.stringify(parameters),
-      JSON.stringify(customQueryParameters)
-    ],
+    getQueryKey: () => getQueryKey(page),
     isPaginated: true,
     queryOptions: {
       enabled,
@@ -110,7 +114,7 @@ export const useInfiniteScrollListing = <T>({
     }
 
     prefetchNextPage({
-      getPrefetchQueryKey: (newPage: number) => ['dashboards', newPage],
+      getPrefetchQueryKey: getQueryKey,
       page
     });
   }, [data, limit, page, prefetchNextPage]);