@scality/core-ui 0.165.0 → 0.167.0

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

@@ -109,55 +109,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][] = [];
+
+  // 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]);
 
-  for (let i = 0; i < newValues.length; i++) {
-    if (
-      orginalValues[nextIndex] &&
-      newValues[i][0] === orginalValues[nextIndex][0]
-    ) {
-      newValues[i][1] = orginalValues[nextIndex][1];
-      nextIndex++;
+    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

@@ -10,7 +10,6 @@ import {
 } from 'recharts';
 import { useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
-import { useMetricsTimeSpan } from '../linetemporalchart/MetricTimespanProvider';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -92,8 +91,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
@@ -123,6 +122,8 @@ export type LineChartProps = (
   title: string;
   height: number;
   startingTimeStamp: number;
+  interval: number;
+  duration: number;
   unitRange?: {
     threshold: number;
     label: string;
@@ -200,6 +201,8 @@ export function LineTimeSerieChart({
   title,
   height,
   startingTimeStamp,
+  interval,
+  duration,
   unitRange,
   isLoading = false,
   yAxisType = 'default',
@@ -208,7 +211,6 @@ export function LineTimeSerieChart({
   ...rest
 }: LineChartProps) {
   const theme = useTheme();
-  const { frequency, duration } = useMetricsTimeSpan();
   const { getColor } = useChartLegend();
   const chartRef = useRef(null);
 
@@ -223,7 +225,7 @@ export function LineTimeSerieChart({
                 line.data,
                 startingTimeStamp,
                 duration,
-                frequency,
+                interval,
               ),
             })),
             // Convert positive values to negative values
@@ -233,7 +235,7 @@ export function LineTimeSerieChart({
                 line.data,
                 startingTimeStamp,
                 duration,
-                frequency,
+                interval,
               ).map(
                 ([timestamp, value]) =>
                   [timestamp, value === null ? null : `-${Number(value)}`] as [
@@ -249,7 +251,7 @@ export function LineTimeSerieChart({
               line.data,
               startingTimeStamp,
               duration,
-              frequency,
+              interval,
             ),
           }));
 
@@ -257,7 +259,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)
@@ -283,11 +285,11 @@ 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, frequency, yAxisType]);
+  }, [series, startingTimeStamp, duration, interval, yAxisType]);
 
   // Calculate 5 perfectly evenly spaced ticks
   const xAxisTicks = useMemo(() => {

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();
   });
 

package/src/lib/components/text/Text.component.tsx

@@ -133,7 +133,7 @@ export const Text = styled.span<{
   isEmphazed?: boolean;
   isGentleEmphazed?: boolean;
 }>`
-  color: ${(props) => props.theme[props.color || 'textPrimary']};
+  ${(props) => props.color && `color: ${props.theme[props.color]};`}
   ${(props) =>
     props.variant === 'Larger'
       ? `

package/src/lib/components/toast/Toast.component.tsx

@@ -1,4 +1,3 @@
-import { motion } from 'framer-motion';
 import { ReactNode, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
@@ -99,6 +98,31 @@ const ContentContainer = styled.div`
   position: relative;
 `;
 
+const FadingToast = styled.div`
+  align-items: flex-end;
+  background-color: ${props => props.theme.backgroundLevel1};
+  border: 1px solid ${props => props.theme.border};
+  box-shadow: 0px 4px 10px 4px #000;
+  display: flex;
+  border-radius: 4px;
+  position: relative;
+
+  @keyframes toastEnter {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+
+const ToastEnter = styled(FadingToast)`
+  animation: toastEnter 0.3s ease forwards;
+`;
+
 function Toast({
   open,
   message,
@@ -123,7 +147,6 @@ function Toast({
 
   const bgColor = useGetBackgroundColor(status);
   const rgbBgColor = useGetRgbBackgroundColor(status);
-  const theme = useTheme();
 
   if (!open) {
     return null;
@@ -141,22 +164,7 @@ function Toast({
         width,
       }}
     >
-      <motion.div
-        key="toast"
-        initial={{ opacity: 0, y: -20 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: 20 }}
-        transition={{ duration: 0.3 }}
-        style={{
-          alignItems: 'flex-end',
-          backgroundColor: theme.backgroundLevel1,
-          border: `1px solid ${theme.border}`,
-          boxShadow: '0px 4px 10px 4px #000',
-          display: 'flex',
-          borderRadius: '4px',
-          position: 'relative',
-        }}
-      >
+      <ToastEnter>
         <IconContainer bgColor={rgbBgColor}>{icon}</IconContainer>
         <ContentContainer>
           <BasicText>{message}</BasicText>
@@ -169,7 +177,7 @@ function Toast({
             tooltip={{ overlay: 'Close', placement: 'top' }}
           />
         </Box>
-      </motion.div>
+      </ToastEnter>
       {withProgressBar && (
         <DurationBasedProgressBar
           duration={autoDismiss ? duration : null}

package/src/lib/components/toast/useMutationsHandler.test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import { useToast } from './ToastProvider';
 import { useMutationsHandler } from './useMutationsHandler';
 
@@ -68,7 +68,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations,
@@ -77,10 +77,8 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(onMainMutationSuccess).toHaveBeenCalled();
-      });
+    await waitFor(() => {
+      expect(onMainMutationSuccess).toHaveBeenCalled();
     });
   });
 
@@ -91,7 +89,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations,
@@ -99,13 +97,11 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(showToast).toHaveBeenCalledWith({
-          open: true,
-          status: 'success',
-          message: 'message',
-        });
+    await waitFor(() => {
+      expect(showToast).toHaveBeenCalledWith({
+        open: true,
+        status: 'success',
+        message: 'message',
       });
     });
   });
@@ -131,7 +127,7 @@ describe('useMutationsHandler', () => {
       },
     ] as const;
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations: mutationsWithError,
@@ -139,13 +135,11 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(showToast).toHaveBeenCalledWith({
-          open: true,
-          status: 'error',
-          message: 'message',
-        });
+    await waitFor(() => {
+      expect(showToast).toHaveBeenCalledWith({
+        open: true,
+        status: 'error',
+        message: 'message',
       });
     });
   });
@@ -171,7 +165,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation,
         dependantMutations: otherMutations,
@@ -180,10 +174,8 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(onAllMutationsSuccess).toHaveBeenCalled();
-      });
+    await waitFor(() => {
+      expect(onAllMutationsSuccess).toHaveBeenCalled();
     });
   });
 
@@ -220,7 +212,7 @@ describe('useMutationsHandler', () => {
       showToast,
     }));
 
-    const { waitFor } = renderHook(() =>
+    renderHook(() =>
       useMutationsHandler({
         mainMutation: firstMutation,
         dependantMutations: otherMutations,
@@ -229,10 +221,8 @@ describe('useMutationsHandler', () => {
       }),
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(onAllMutationsSuccess).not.toHaveBeenCalled();
-      });
+    await waitFor(() => {
+      expect(onAllMutationsSuccess).not.toHaveBeenCalled();
     });
   });
 });

package/src/lib/index.ts

@@ -1,8 +1,6 @@
 export { Banner } from './components/banner/Banner.component';
 export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
-export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
-export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
 export {
   LOADER_SIZE,
@@ -21,22 +19,18 @@ export { Modal } from './components/modal/Modal.component';
 export { Navbar } from './components/navbar/Navbar.component';
 export { Notifications } from './components/notifications/Notifications.component';
 export { SearchInput } from './components/searchinput/SearchInput.component';
-export { Select } from './components/select/Select.component';
+
 export { Sidebar } from './components/sidebar/Sidebar.component';
 export { Steppers } from './components/steppers/Steppers.component';
 export { Toggle } from './components/toggle/Toggle.component';
 export { Tooltip } from './components/tooltip/Tooltip.component';
-export { MultiSelect } from './components/multiselect/MultiSelect.component';
-export { VegaChart } from './components/vegachart/VegaChart.component';
-export { LineChart } from './components/linechart/LineChart.component';
+
 export { ProgressBar } from './components/progressbar/ProgressBar.component';
 export { TextArea } from './components/textarea/TextArea.component';
-export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
-export { Sparkline } from './components/sparkline/SparkLine.component';
+
 export { BarChart } from './components/barchart/BarChart.component';
 export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
-export { AreaChart } from './components/areachart/AreaChart.component';
-export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
+
 export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
 export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
 export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
@@ -48,7 +42,7 @@ export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
 export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
 export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
 export { TextBadge } from './components/textbadge/TextBadge.component';
-export { SpacedBox } from './components/spacedbox/SpacedBox';
+
 export { Layout as Layout2 } from './components/layout/v2';
 export { TwoPanelLayout } from './components/layout/v2/panels';
 export { AppContainer } from './components/layout/v2/AppContainer';
@@ -82,3 +76,4 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
+export { CoreUITheme } from './style/theme';

package/src/lib/next.ts

@@ -21,6 +21,8 @@ export {
   BarchartSortFn,
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
+export { ChartTooltip } from './components/barchartv2/ChartTooltip';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { CoreUITheme } from './style/theme';

package/stories/barchart.stories.tsx

@@ -111,7 +111,7 @@ const horizontalBarChartArgs = {
 };
 
 export default {
-  title: 'Components/Data Display/Charts/BarChart',
+  title: 'Components/Deprecated/Charts/BarChart',
   component: BarChart,
   decorators: [
     (story: Component) => <SyncedCursorCharts>{story()}</SyncedCursorCharts>,

package/stories/card.stories.tsx

@@ -7,12 +7,14 @@ import {
   CardBodyContainer,
 } from '../src/lib/components/card/Card.component';
 import { CircularProgressBar } from '../src/lib/components/circularprogressbar/CircularProgressBar.component';
-import { Text, Wrapper } from './common';
-import { brand } from '../src/lib/style/theme';
+import { Text } from './common';
+import { coreUIAvailableThemes } from '../src/lib/style/theme';
 import { action } from '@storybook/addon-actions';
 
 // RGB color in theme provoke an error, excludes from control options
-const colors = Object.keys(brand).filter((color) => !/RGB/.test(color));
+const colors = Object.keys(coreUIAvailableThemes.darkRebrand).filter(
+  (color) => !/RGB/.test(color),
+);
 
 export default {
   title: 'Components/Data Display/Card',
@@ -43,8 +45,8 @@ const Row = styled.div`
 `;
 const defaultBody = (
   <CircularProgressBar
-    color={brand.buttonSecondary}
-    backgroundColor={brand.textPrimary}
+    color={coreUIAvailableThemes.darkRebrand.buttonSecondary}
+    backgroundColor={coreUIAvailableThemes.darkRebrand.textPrimary}
     radius={30}
     strokeWidth={5}
     percent={60}

package/stories/constrainedtext.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ConstrainedText } from '../src/lib/components/constrainedtext/Constrainedtext.component';
 import { Wrapper } from './common';
 import { placementOptions } from './controls';
+import { Text } from '../src/lib/components/text/Text.component';
 export default {
   title: 'Components/Constrained Text',
   component: ConstrainedText,
@@ -34,10 +35,12 @@ export const Default = {
 };
 
 export const CustomizedTooltip = {
+  ...Default,
   args: {
-    text: 'This is a long phrase',
+    text: <Text>This is a long long phrase</Text>,
     tooltipStyle: { width: '100px', color: 'lightblue' },
     tooltipPlacement: 'right',
+    color: 'statusCritical',
   },
 };
 

package/stories/controls.ts

@@ -1,23 +1,23 @@
-import { iconTable } from "../src/lib/components/icon/Icon.component";
+import { iconTable } from '../src/lib/components/icon/Icon.component';
 
 export const iconOptions = Object.keys(iconTable);
 
 export const sizesOptions = ['smaller', 'small', 'base', 'large', 'larger'];
 
 export const placementOptions = [
-    'top',
-    'bottom',
-    'left',
-    'top-start',
-    'top-end',
-    'right',
-    'right-start',
-    'right-end',
-    'bottom-end',
-    'bottom-start',
-    'left-start',
-    'left-end',
-  ];
+  'top',
+  'bottom',
+  'left',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom-end',
+  'bottom-start',
+  'left-start',
+  'left-end',
+];
 export const localeArgtype = {
   control: { type: 'radio' },
   options: ['en', 'fr'],
@@ -40,9 +40,8 @@ export const variantsOptions = [
   'backgroundLevel1',
 ];
 
-
-export const tooltipArgTypes =  {
-    tooltip: {
+export const tooltipArgTypes = {
+  tooltip: {
     description:
       "Object with 'overlay','placement' and 'overlayStyle' properties",
     control: false,
@@ -53,7 +52,7 @@ export const tooltipArgTypes =  {
     options: placementOptions,
   },
   tooltipOverlayStyle: {
-    control:'object',
+    control: 'object',
     description: 'Object of CSS properties',
-  }}
-
+  },
+};

package/stories/linecharttemporal.stories.tsx

@@ -10,7 +10,7 @@ import { Wrapper } from './common';
 import { dataLineChartV2, dataLineChartV2_readwrite } from './data/linechart';
 import { defaultRenderTooltipSerie } from '../src/lib/components/linetemporalchart/tooltip';
 export default {
-  title: 'Components/Data Display/Charts/LineTemporalChart',
+  title: 'Components/Deprecated/Charts/LineTemporalChart',
   component: LineTemporalChart,
   decorators: [
     (story) => (