@centreon/ui 24.10.29 → 24.10.31

package/package.json

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

package/src/Graph/Gauge/PieData.tsx

@@ -9,7 +9,7 @@ import { getColorFromDataAndTresholds } from '../common/utils';
 import AnimatedPie from './AnimatedPie';
 import { thresholdThickness } from './Thresholds';
 import { GaugeProps } from './models';
-import { angles } from './utils';
+import { getAngles } from './utils';
 
 const dataThickness = 45;
 
@@ -43,7 +43,7 @@ const PieData = ({
 
   return (
     <Pie
-      {...angles}
+      {...getAngles()}
       data={pieData}
       innerRadius={radius - dataThickness * dataThicknessFactor}
       outerRadius={

package/src/Graph/Gauge/Thresholds.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '@mui/material';
 
 import AnimatedPie from './AnimatedPie';
 import { GaugeProps } from './models';
-import { angles } from './utils';
+import { getAngles } from './utils';
 
 export const thresholdThickness = 12;
 
@@ -90,7 +90,7 @@ const Thresholds = ({
     <>
       {arcs.map(({ thresholdArc, thresholdScaleOrdinal }) => (
         <Pie
-          {...angles}
+          {...getAngles()}
           data={thresholdArc}
           innerRadius={radius - thresholdThickness * thresholdThicknessFactor}
           key={`arc-${thresholdArc[0].name}`}

package/src/Graph/Gauge/utils.ts

@@ -1,4 +1,12 @@
-export const angles = {
-  endAngle: -(2 * Math.PI) / 3,
-  startAngle: (2 * Math.PI) / 3
-};
+import { includes } from 'ramda';
+
+export const getAngles = () =>
+  includes('Firefox', window.navigator.userAgent)
+    ? {
+        endAngle: (2 * Math.PI) / 3,
+        startAngle: -(2 * Math.PI) / 3
+      }
+    : {
+        endAngle: -(2 * Math.PI) / 3,
+        startAngle: (2 * Math.PI) / 3
+      };

package/src/Listing/ActionBar/Pagination.tsx

@@ -35,7 +35,8 @@ const MemoizedPagination = memo(
     equals(prevProps.page, nextProps.page) &&
     equals(prevProps.count, nextProps.count) &&
     equals(prevProps.labelRowsPerPage, nextProps.labelRowsPerPage) &&
-    equals(prevProps.className, nextProps.className)
+    equals(prevProps.className, nextProps.className) &&
+    prevProps.labelDisplayedRows === nextProps.labelDisplayedRows
 );
 
 export default MemoizedPagination;

package/src/Listing/ActionBar/index.tsx

@@ -5,13 +5,28 @@ import { makeStyles } from 'tss-react/mui';
 
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
+import Tooltip from '@mui/material/Tooltip';
 
 import { ListingVariant, userAtom } from '@centreon/ui-context';
 
-import { IconButton, ListingProps } from '../..';
+import {
+  type ChangeEvent,
+  type MouseEvent,
+  type ReactNode,
+  useCallback
+} from 'react';
+
+import { IconButton, type ListingProps } from '../..';
 import { useMemoComponent } from '../../utils';
-import { labelOf, labelRowsPerPage } from '../translatedLabels';
+import {
+  labelApproximateCount,
+  labelApproximateCountTooltip,
+  labelComputingExactCount,
+  labelOf,
+  labelRowsPerPage
+} from '../translatedLabels';
 
 import ColumnMultiSelect from './ColumnMultiSelect';
 import StyledPagination from './Pagination';
@@ -88,6 +103,9 @@ type Props = Pick<
   | 'customPaginationClassName'
   | 'listingVariant'
   | 'viewerModeConfiguration'
+  | 'approximateTotalRows'
+  | 'onApproximateCountClick'
+  | 'isApproximateCountLoading'
 >;
 
 const MemoListingActionBar = ({
@@ -107,7 +125,10 @@ const MemoListingActionBar = ({
   widthToMoveTablePagination = 550,
   actionsBarMemoProps = [],
   viewerModeConfiguration,
-  listingVariant
+  listingVariant,
+  approximateTotalRows = false,
+  onApproximateCountClick,
+  isApproximateCountLoading = false
 }: Props): JSX.Element => {
   const marginWidthTableListing = 30;
   const { classes, cx } = useStyles({
@@ -118,17 +139,89 @@ const MemoListingActionBar = ({
 
   const { themeMode } = useAtomValue(userAtom);
 
-  const changeRowPerPage = (event): void => {
+  const changeRowPerPage = (
+    event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+  ): void => {
     onLimitChange?.(event.target.value);
     onPaginate?.(0);
   };
 
-  const changePage = (_, value: number): void => {
+  const changePage = (
+    _: MouseEvent<HTMLButtonElement> | null,
+    value: number
+  ): void => {
     onPaginate?.(value);
   };
 
-  const labelDisplayedRows = ({ from, to, count }): string =>
-    `${from}-${to} ${t(labelOf)} ${count}`;
+  const labelDisplayedRows = useCallback(
+    ({
+      from,
+      to,
+      count
+    }: {
+      count: number;
+      from: number;
+      to: number;
+    }): ReactNode => {
+      const range = `${from}-${to} ${t(labelOf)} `;
+
+      if (!approximateTotalRows) {
+        return `${range}${count}`;
+      }
+
+      if (isApproximateCountLoading) {
+        return (
+          <span
+            style={{ alignItems: 'center', display: 'inline-flex', gap: 4 }}
+          >
+            {range}
+            <CircularProgress size={10} />
+            <span>{t(labelComputingExactCount)}</span>
+          </span>
+        );
+      }
+
+      const approximateLabel = (
+        <button
+          onClick={onApproximateCountClick}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: 'inherit',
+            cursor: onApproximateCountClick ? 'pointer' : 'default',
+            font: 'inherit',
+            fontWeight: 600,
+            padding: 0,
+            textDecoration: onApproximateCountClick
+              ? 'underline dotted'
+              : 'none'
+          }}
+          type="button"
+        >
+          {t(labelApproximateCount)}
+        </button>
+      );
+
+      return (
+        <span>
+          {range}
+          {onApproximateCountClick ? (
+            <Tooltip title={t(labelApproximateCountTooltip)}>
+              {approximateLabel}
+            </Tooltip>
+          ) : (
+            approximateLabel
+          )}
+        </span>
+      );
+    },
+    [
+      approximateTotalRows,
+      isApproximateCountLoading,
+      onApproximateCountClick,
+      t
+    ]
+  );
 
   return useMemoComponent({
     Component: (
@@ -223,6 +316,8 @@ const MemoListingActionBar = ({
       ),
       columnConfiguration,
       customPaginationClassName,
+      approximateTotalRows,
+      isApproximateCountLoading,
       ...actionsBarMemoProps
     ]
   });
@@ -245,7 +340,10 @@ const ListingActionBar = ({
   widthToMoveTablePagination,
   customPaginationClassName,
   listingVariant,
-  viewerModeConfiguration
+  viewerModeConfiguration,
+  approximateTotalRows,
+  onApproximateCountClick,
+  isApproximateCountLoading
 }: Props): JSX.Element | null => {
   if (
     not(paginated) &&
@@ -259,13 +357,16 @@ const ListingActionBar = ({
     <MemoListingActionBar
       actions={actions}
       actionsBarMemoProps={actionsBarMemoProps}
+      approximateTotalRows={approximateTotalRows}
       columnConfiguration={columnConfiguration}
       columns={columns}
       currentPage={currentPage}
       customPaginationClassName={customPaginationClassName}
+      isApproximateCountLoading={isApproximateCountLoading}
       limit={limit}
       listingVariant={listingVariant}
       moveTablePagination={moveTablePagination}
+      onApproximateCountClick={onApproximateCountClick}
       paginated={paginated}
       totalRows={totalRows}
       viewerModeConfiguration={viewerModeConfiguration}

package/src/Listing/index.tsx

@@ -137,6 +137,9 @@ export interface Props<TRow> {
     labelExpand: string;
   };
   totalRows?: number;
+  approximateTotalRows?: boolean;
+  onApproximateCountClick?: () => void;
+  isApproximateCountLoading?: boolean;
   viewerModeConfiguration?: ViewerModeConfiguration;
   widthToMoveTablePagination?: number;
 }
@@ -197,7 +200,10 @@ const Listing = <
     getRowProperty: () => '',
     labelCollapse: 'Collapse',
     labelExpand: 'Expand'
-  }
+  },
+  approximateTotalRows = false,
+  onApproximateCountClick,
+  isApproximateCountLoading = false
 }: Props<TRow>): JSX.Element => {
   const currentVisibleColumns = getVisibleColumns({
     columnConfiguration,
@@ -533,13 +539,16 @@ const Listing = <
           <ListingActionBar
             actions={actions}
             actionsBarMemoProps={actionsBarMemoProps}
+              approximateTotalRows={approximateTotalRows}
             columnConfiguration={columnConfiguration}
             columns={columns}
             currentPage={currentPage}
             customPaginationClassName={customPaginationClassName}
+              isApproximateCountLoading={isApproximateCountLoading}
             limit={limit}
             listingVariant={listingVariant}
             moveTablePagination={moveTablePagination}
+              onApproximateCountClick={onApproximateCountClick}
             paginated={paginated}
             totalRows={totalRows}
             viewerModeConfiguration={viewerModeConfiguration}
@@ -743,20 +752,26 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   moveTablePagination,
   widthToMoveTablePagination,
   listingVariant,
+  approximateTotalRows,
+  onApproximateCountClick,
+  isApproximateCountLoading,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
     Component: (
       <Listing
+        approximateTotalRows={approximateTotalRows}
         checkable={checkable}
         columnConfiguration={columnConfiguration}
         columns={columns}
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
+        isApproximateCountLoading={isApproximateCountLoading}
         limit={limit}
         listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
+        onApproximateCountClick={onApproximateCountClick}
         paginated={paginated}
         rowColorConditions={rowColorConditions}
         rows={rows}
@@ -787,7 +802,9 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      listingVariant
+      listingVariant,
+      approximateTotalRows,
+      isApproximateCountLoading
     ]
   });
 

package/src/Listing/translatedLabels.ts

@@ -1,6 +1,10 @@
 export const labelTo = 'to';
 export const labelNoResultFound = 'No result found';
 export const labelOf = 'of';
+export const labelApproximateCount = '1,000+';
+export const labelApproximateCountTooltip =
+  'More than 1,000 resources match your search. Click to continue.';
+export const labelComputingExactCount = 'Loading...';
 export const labelRowsPerPage = 'Rows per page';
 export const labelFirstPage = 'First page';
 export const labelLastPage = 'Last page';