@scality/core-ui 0.166.0 → 0.168.0

package/src/lib/components/button/Button.component.tsx

@@ -242,8 +242,9 @@ const Anchor = ButtonStyled.withComponent('a');
 
 /**
  * @deprecated
+ * Used only in Dropdown.component.tsx, can be removed after refactoring
  * You should use ButtonV2 with
- * import { Button } from '@scality/core-ui/dist/next';
+ * @example import { Button } from '@scality/core-ui/dist/next';
  */
 function Button({
   text = '',

package/src/lib/components/chartlegend/ChartLegend.test.tsx

@@ -214,5 +214,22 @@ describe('ChartLegend', () => {
       expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
       expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
     });
+    it('should select one item when clicking on selected item and other items are selected', () => {
+      render(
+        <ChartLegendWrapper colorSet={colorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+      userEvent.click(screen.getByText('CPU'));
+      userEvent.click(screen.getByText('Memory'), { metaKey: true });
+
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory not selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk not selected')).toBeInTheDocument();
+    });
   });
 });

package/src/lib/components/chartlegend/ChartLegend.tsx

@@ -73,9 +73,8 @@ export const ChartLegend = ({
     addSelectedResource,
     removeSelectedResource,
     selectAllResources,
-    getAllResourcesCount,
-    getSelectedCount,
     selectOnlyResource,
+    isOnlyOneSelected,
   } = useChartLegend();
 
   const resources = listResources();
@@ -89,7 +88,7 @@ export const ChartLegend = ({
 
       if (isModifierClick) {
         if (itemIsSelected) {
-          if (getSelectedCount() === 1) {
+          if (isOnlyOneSelected()) {
             selectAllResources();
           } else {
             removeSelectedResource(resource);
@@ -97,14 +96,10 @@ export const ChartLegend = ({
         } else {
           addSelectedResource(resource);
         }
+      } else if (itemIsSelected && isOnlyOneSelected()) {
+        selectAllResources();
       } else {
-        if (getSelectedCount() === getAllResourcesCount()) {
-          selectOnlyResource(resource);
-        } else if (itemIsSelected) {
-          selectAllResources();
-        } else {
-          selectOnlyResource(resource);
-        }
+        selectOnlyResource(resource);
       }
     },
     [
@@ -114,8 +109,7 @@ export const ChartLegend = ({
       removeSelectedResource,
       selectAllResources,
       selectOnlyResource,
-      getAllResourcesCount,
-      getSelectedCount,
+      isOnlyOneSelected,
     ],
   );
 

package/src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -17,8 +17,7 @@ export type ChartLegendState = {
   isSelected: (resource: string) => boolean;
   getColor: (resource: string) => string | undefined;
   listResources: () => string[];
-  getAllResourcesCount: () => number;
-  getSelectedCount: () => number;
+  isOnlyOneSelected: () => boolean;
 };
 
 const ChartLegendContext = createContext<ChartLegendState | null>(null);
@@ -54,14 +53,9 @@ export const ChartLegendWrapper = ({
     setSelectedResources([resource]);
   }, []);
 
-  const getAllResourcesCount = useCallback(() => {
-    return allResources.length;
-  }, [allResources]);
-
-  const getSelectedCount = useCallback(() => {
-    return selectedResources.length;
+  const isOnlyOneSelected = useCallback(() => {
+    return selectedResources.length === 1;
   }, [selectedResources]);
-
   const isSelected = useCallback(
     (resource: string) => {
       return selectedResources.includes(resource);
@@ -97,8 +91,7 @@ export const ChartLegendWrapper = ({
       isSelected,
       getColor,
       listResources,
-      getAllResourcesCount,
-      getSelectedCount,
+      isOnlyOneSelected,
     }),
     [
       selectedResources,
@@ -109,8 +102,7 @@ export const ChartLegendWrapper = ({
       isSelected,
       getColor,
       listResources,
-      getAllResourcesCount,
-      getSelectedCount,
+      isOnlyOneSelected,
     ],
   );
 

package/src/lib/components/date/FormattedDateTime.tsx

@@ -54,6 +54,16 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -65,7 +75,8 @@ type FormattedDateTimeProps = {
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
     | 'long-date'
-    | 'chart-date';
+    | 'chart-date'
+    | 'year-month-day';
 
   value: Date;
 };
@@ -198,6 +209,8 @@ export const FormattedDateTime = ({
       return <>{LONG_DATE_FORMATER.format(value)}</>;
     case 'chart-date':
       return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
+    case 'year-month-day':
+      return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
     default:
       return <></>;
   }

package/src/lib/components/icon/Icon.component.tsx

@@ -142,7 +142,15 @@ export const iconTable = {
   Mail: 'fas faEnvelope',
 };
 
-export const customIcons = {
+type IconProps = {
+  'aria-label'?: string;
+  color?: string;
+  size?: string;
+  icon?: string;
+  title?: string;
+};
+
+export const customIcons: Record<string, ((props: IconProps) => JSX.Element) & { displayName?: string }> = {
   'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteUser ariaLabel={ariaLabel} color={color} size={size} />
   ),
@@ -151,6 +159,9 @@ export const customIcons = {
   ),
 };
 
+customIcons['Remote-user'].displayName = 'RemoteUser';
+customIcons['Remote-group'].displayName = 'RemoteGroup';
+
 const IconStyled = styled(FontAwesomeIcon)`
   ${(props) => {
     const theme = props.theme;

package/src/lib/components/linetemporalchart/ChartUtil.test.ts

@@ -165,33 +165,33 @@ it('returns the unit label GiB/Sec', () => {
   expect(valueBase).toEqual(1024 * 1024 * 1024);
 });
 // test for addMissingDataPoint function
-const originalValue = [
-  [0, 0],
-  [1, 1],
-  [2, 2],
-  [3, 3],
-  [4, 4],
-  [5, 5],
-  [6, 6],
-  [8, 8],
-  [9, 9],
-  [10, 10],
+const originalValue: [number, number | string | null][] = [
+  [0, '0'],
+  [1, '1'],
+  [2, '2'],
+  [3, '3'],
+  [4, '4'],
+  [5, '5'],
+  [6, '6'],
+  [8, '8'],
+  [9, '9'],
+  [10, '10'],
 ];
 const startingTimeStamp = 0;
 const sampleDuration = 10;
 const sampleFrequency = 1;
 const newValues = [
-  [0, 0],
-  [1, 1],
-  [2, 2],
-  [3, 3],
-  [4, 4],
-  [5, 5],
-  [6, 6],
+  [0, '0'],
+  [1, '1'],
+  [2, '2'],
+  [3, '3'],
+  [4, '4'],
+  [5, '5'],
+  [6, '6'],
   [7, 'NAN'],
-  [8, 8],
-  [9, 9],
-  [10, 10],
+  [8, '8'],
+  [9, '9'],
+  [10, '10'],
 ];
 it('should add missing data point with null', () => {
   const result = addMissingDataPoint(
@@ -210,19 +210,7 @@ it('should return the array with string NAN when the original dataset is empty',
     sampleDuration,
     sampleFrequency,
   );
-  expect(result).toEqual([
-    [0, 'NAN'],
-    [1, 'NAN'],
-    [2, 'NAN'],
-    [3, 'NAN'],
-    [4, 'NAN'],
-    [5, 'NAN'],
-    [6, 'NAN'],
-    [7, 'NAN'],
-    [8, 'NAN'],
-    [9, 'NAN'],
-    [10, 'NAN'],
-  ]);
+  expect(result).toEqual([]);
 });
 it('should return an empty array when the starting timestamp is undefined', () => {
   const result = addMissingDataPoint(
@@ -259,4 +247,4 @@ it('should return an empty array when sample frequency is undefined', () => {
     undefined,
   );
   expect(result).toEqual([]);
-});
+});

package/src/lib/components/linetemporalchart/ChartUtil.ts

@@ -72,6 +72,12 @@ export function getUnitLabel(
   valueBase: number;
   unitLabel: string;
 } {
+  if (!unitRange || unitRange.length === 0) {
+    return {
+      valueBase: 1,
+      unitLabel: '',
+    };
+  }
   // first sort the unitRange
   unitRange.sort(
     (
@@ -109,55 +115,61 @@ export function getUnitLabel(
 
 /**
  * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
  *
  * @param {array} orginalValues - The array of the data points are already sorted according to the time series
  * @param {number} startingTimeStamp - The starting timestamp in seconds
  * @param {number} sampleDuration - The time span value in seconds
- * @param {number} sampleFrequency - The time difference between two data points in seconds
+ * @param {number} sampleInterval - The time difference between two data points in seconds
  *
  */
 export function addMissingDataPoint(
-  orginalValues: [number, string | null][],
-  startingTimeStamp: number,
-  sampleDuration: number,
-  sampleFrequency: number,
-): [number, string | null][] {
+  orginalValues: [number, number | string | null][],
+  startingTimeStamp?: number,
+  sampleDuration?: number,
+  sampleInterval?: number,
+): [number, number | string | null][] {
   if (
     !orginalValues ||
     startingTimeStamp === undefined ||
     !sampleDuration ||
-    !sampleFrequency ||
+    !sampleInterval ||
     startingTimeStamp < 0 ||
     sampleDuration <= 0 ||
-    sampleFrequency <= 0
+    sampleInterval <= 0
   ) {
     return [];
   }
 
-  const newValues = [];
-  const numberOfDataPoints = sampleDuration / sampleFrequency + 1;
-  let samplingPointTime = startingTimeStamp;
-
-  // initialize the array with all "NAN" value, in order for the tooltip to display dash(-)
-  for (let i = 0; i < numberOfDataPoints; i++) {
-    newValues.push([samplingPointTime, NAN_STRING]);
-    samplingPointTime += sampleFrequency;
+  // If there are no original values, return empty array
+  if (orginalValues.length === 0) {
+    return [];
   }
 
-  // copy the existing data points from `orginalValue` array to `newValues`
-  if (newValues.length === 0) return [];
-  let nextIndex = 0;
+  const newValues: [number, number | string | null][] = [];
 
-  for (let i = 0; i < newValues.length; i++) {
-    if (
-      orginalValues[nextIndex] &&
-      newValues[i][0] === orginalValues[nextIndex][0]
-    ) {
-      newValues[i][1] = orginalValues[nextIndex][1];
-      nextIndex++;
+  // Process all but the last element
+  for (let i = 0; i < orginalValues.length - 1; i++) {
+    // Always add the current data point
+    newValues.push(orginalValues[i]);
+
+    const currentTimestamp = orginalValues[i][0];
+    const nextTimestamp = orginalValues[i + 1][0];
+    const gap = nextTimestamp - currentTimestamp;
+
+    // Calculate how many missing points to add
+    const missingIntervals = Math.floor(gap / sampleInterval) - 1;
+
+    // Add missing data points with NAN_STRING (only executes if missingIntervals > 0)
+    for (let j = 1; j <= missingIntervals; j++) {
+      const missingTimestamp = currentTimestamp + j * sampleInterval;
+      newValues.push([missingTimestamp, NAN_STRING]);
     }
   }
 
+  // Add the last element
+  newValues.push(orginalValues[orginalValues.length - 1]);
+
   return newValues;
 }
 // get the value for the based value

package/src/lib/components/linetemporalchart/LineTemporalChart.component.tsx

@@ -165,6 +165,10 @@ const colorRange = [
 ];
 
 // Note: we need to make sure the start time and end timefor the prometheus query between the series are the same.
+/**
+ * @deprecated Use LineTimeSerieChart instead
+ * @example import { LineTimeSerieChart } from '@scality/core-ui/dist/next';
+ */
 function LineTemporalChart({
   series,
   title,
@@ -451,10 +455,10 @@ function LineTemporalChart({
               ],
             }
           : yAxisType === 'percentage'
-          ? {
-              domain: [0, 100],
-            }
-          : undefined,
+            ? {
+                domain: [0, 100],
+              }
+            : undefined,
     };
   }, [yAxisTitle, yAxisType]);
   const symmetricalColorRange =
@@ -652,15 +656,15 @@ function LineTemporalChart({
                 },
               }
             : yAxisType === 'symmetrical'
-            ? {
-                // for symmetrical chart we manually draw the line from minValue to maxValue
-                ...syncedVerticalRuler,
-                encoding: {
-                  ...syncedVerticalRuler.encoding,
-                  ...syncedVerticalRulerSymmetrical.encoding,
-                },
-              }
-            : syncedVerticalRuler,
+              ? {
+                  // for symmetrical chart we manually draw the line from minValue to maxValue
+                  ...syncedVerticalRuler,
+                  encoding: {
+                    ...syncedVerticalRuler.encoding,
+                    ...syncedVerticalRulerSymmetrical.encoding,
+                  },
+                }
+              : syncedVerticalRuler,
         ],
       },
       tooltipConfig,
@@ -698,8 +702,8 @@ function LineTemporalChart({
   const unitLabel = unitRange
     ? getUnitLabel(unitRange, maxValue).unitLabel
     : yAxisType === 'percentage'
-    ? '%'
-    : '';
+      ? '%'
+      : '';
   return (
     <LineTemporalChartWrapper>
       <ChartHeader>

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -8,7 +8,7 @@ import {
   YAxis,
   CartesianGrid,
 } from 'recharts';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
@@ -23,6 +23,7 @@ import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import {
   DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
   FormattedDateTime,
+  YEAR_MONTH_DAY_FORMATTER,
 } from '../date/FormattedDateTime';
 
 const LineTemporalChartWrapper = styled.div`
@@ -91,8 +92,8 @@ const TooltipInstanceValue = styled.div`
 export type Serie = {
   // the name of the resource
   resource: string;
-  // the original data format from prometheus
-  data: [number, string | null][];
+  // the original data format from prometheus, extend the value to include number type.
+  data: [number, number | string | null][];
   // it's mandatory to display tooltip label in the tooltip
   getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
   // the name of the metric prefix with read, write, in, out
@@ -129,6 +130,12 @@ export type LineChartProps = (
     label: string;
   }[];
   isLoading?: boolean;
+  /**
+   * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+   * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+   * This will affect the format of the tooltip as well
+   */
+  timeFormat?: 'date-time' | 'date';
   yAxisTitle?: string;
   helpText?: string;
 };
@@ -138,6 +145,7 @@ const CustomTooltip = ({
   payload,
   label,
   unitLabel,
+  timeFormat,
 }: {
   active?: boolean;
   payload?: Array<{
@@ -148,6 +156,7 @@ const CustomTooltip = ({
   }>;
   label?: string;
   unitLabel?: string;
+  timeFormat?: 'date-time' | 'date';
 }) => {
   if (!active || !payload || !payload.length || !label) return null;
   // We can't use the default itemSorter method because it's a custom tooltip.
@@ -169,7 +178,11 @@ const CustomTooltip = ({
     <TooltipContainer>
       <TooltipTime>
         <FormattedDateTime
-          format="day-month-abbreviated-hour-minute-second"
+          format={
+            timeFormat === 'date-time'
+              ? 'day-month-abbreviated-hour-minute-second'
+              : 'long-date'
+          }
           value={new Date(label)}
         />
       </TooltipTime>
@@ -205,6 +218,7 @@ export function LineTimeSerieChart({
   duration,
   unitRange,
   isLoading = false,
+  timeFormat = 'date-time',
   yAxisType = 'default',
   yAxisTitle,
   helpText,
@@ -259,7 +273,7 @@ export function LineTimeSerieChart({
     // Initialize an object to hold data points by timestamp
     const dataPointsByTime: Record<
       number,
-      { timestamp: number } & Record<string, string | number | null>
+      { timestamp: number } & Record<string, number | null>
     > = {};
     const seriesToProcess =
       yAxisType === 'symmetrical' && isSymmetricalSeries(normalizedSeries)
@@ -285,8 +299,8 @@ export function LineTimeSerieChart({
     // Convert object to array for Recharts
     return Object.values(dataPointsByTime).sort(
       (
-        a: { timestamp: number } & Record<string, string | number | null>,
-        b: { timestamp: number } & Record<string, string | number | null>,
+        a: { timestamp: number } & Record<string, number | null>,
+        b: { timestamp: number } & Record<string, number | null>,
       ) => (a.timestamp as number) - (b.timestamp as number),
     );
   }, [series, startingTimeStamp, duration, interval, yAxisType]);
@@ -393,12 +407,16 @@ export function LineTimeSerieChart({
   }, [series, getColor]);
 
   // Format time for display the tick in the x axis
-  const formatTime = useMemo(
-    () => (timestamp: number) => {
+  const formatXAxisLabel = useCallback(
+    (timestamp: number) => {
       const date = new Date(timestamp);
-      return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+      return timeFormat === 'date-time'
+        ? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
+        : timeFormat === 'date'
+          ? YEAR_MONTH_DAY_FORMATTER.format(date)
+          : '';
     },
-    [],
+    [timeFormat],
   );
 
   return (
@@ -438,7 +456,7 @@ export function LineTimeSerieChart({
             type="number"
             domain={['dataMin', 'dataMax']}
             ticks={xAxisTicks}
-            tickFormatter={formatTime}
+            tickFormatter={formatXAxisLabel}
             tickCount={5}
             tick={{
               fill: theme.textSecondary,
@@ -473,7 +491,11 @@ export function LineTimeSerieChart({
             }}
             tickFormatter={(value) => Math.round(value).toString()}
           />
-          <Tooltip content={<CustomTooltip unitLabel={unitLabel} />} />
+          <Tooltip
+            content={
+              <CustomTooltip unitLabel={unitLabel} timeFormat={timeFormat} />
+            }
+          />
           {/* Add horizontal line at y=0 for symmetrical charts */}
           {yAxisType === 'symmetrical' && (
             <ReferenceLine y={0} stroke={theme.border} />
@@ -493,6 +515,7 @@ export function LineTimeSerieChart({
                   dataKey={label}
                   stroke={colorMapping[resource]}
                   dot={false}
+                  isAnimationActive={false}
                 />
               );
             }),

package/src/lib/components/linetimeseriechart/linetimeseriechart.test.tsx

@@ -0,0 +1,68 @@
+import { render } from "@testing-library/react";
+import { LineChartProps, LineTimeSerieChart } from "./linetimeseriechart.component";
+import { ChartLegendWrapper } from "../chartlegend/ChartLegendWrapper";
+import { ThemeProvider } from "styled-components";
+import { coreUIAvailableThemes } from "../../style/theme";
+
+const TestSeries = [
+    {
+        
+        resource: "Series 1",
+        getTooltipLabel: () => `Series 1`,
+        data: [
+            [1622505600000, 10],
+            [1622509200000, 20],
+            [1622512800000, 30],
+        ] as [number, number][],
+    },
+    {
+        resource: "Series 2",
+        getTooltipLabel: () => `Series 2`,
+        data: [
+            [1622505600000, 15],
+            [1622509200000, 25],
+            [1622512800000, 35],
+        ] as [number, number][],
+    },
+];
+
+const ColorSet = {
+    "Series 1": "#FF0000",
+    "Series 2": "#00FF00",
+};
+
+const renderLineTimeSerieChart = (props: Partial<LineChartProps> = {}) => {
+    return render(
+        <ThemeProvider theme={coreUIAvailableThemes.artescaLight}>
+            <ChartLegendWrapper colorSet={ColorSet}>
+                <LineTimeSerieChart
+                    {
+                        ...{
+                            title: "Test Chart",
+                            yAxisType: "default",
+                            series: TestSeries,
+                            height: 400,
+                            startingTimeStamp: TestSeries[0].data[0][0],
+                            interval: TestSeries[0].data[1][0] - TestSeries[0].data[0][0],
+                            duration: TestSeries[0].data[TestSeries[0].data.length - 1][0] - TestSeries[0].data[0][0],
+                            unitRange: [{ label: 'units', value: 1 }],
+                            ...props
+                        } as LineChartProps
+                    }
+                />
+            </ChartLegendWrapper>
+        </ThemeProvider>
+    );
+};
+
+describe('LineTimeSerieChart', () => {
+    it('should render when with basic parameters', async () => {
+        const { container } = renderLineTimeSerieChart();
+        expect(container).toBeInTheDocument();
+    });
+
+    it('should render when no unitRange is provided', async () => {
+        const { container } = renderLineTimeSerieChart({ unitRange: undefined });
+        expect(container).toBeInTheDocument();
+    });
+});

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -69,7 +69,7 @@ describe('SelectV2', () => {
   it('should throw error if <Option/> is outside <Select/>', () => {
     // mock console.error as this is the only way to silent expected error thrown by the component
     const consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
-    expect(() => render(<Option value="Option 1" />)).toThrowError();
+    expect(() => render(<Option value="Option 1" />)).toThrow();
     consoleErrorFn.mockRestore();
   });