@scality/core-ui 0.192.0 → 0.194.0

package/src/lib/components/error-pages/ErrorPage404.component.tsx

@@ -36,7 +36,7 @@ function ErrorPage404({ locale = 'en', onReturnHomeClick, ...rest }: Props) {
   return (
     <ErrorPageContainer className="sc-error-page404" {...rest}>
       <Row>
-        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Icon name="Exclamation-circle" size="2x" color="statusWarning" />
         <Title>{translations[locale].not_exist}</Title>
       </Row>
       <Row>

package/src/lib/components/error-pages/ErrorPage500.component.tsx

@@ -49,7 +49,7 @@ function ErrorPage500({
   return (
     <ErrorPageContainer className="sc-error-page500" {...rest}>
       <Row>
-        <Icon name="Exclamation-triangle" size="2x" color="statusWarning" />
+        <Icon name="Exclamation-circle" size="2x" color="statusWarning" />
         <Title>{translations[locale].unexpected_error}</Title>
       </Row>
       <Row>

package/src/lib/components/icon/CustomsIcons.tsx

@@ -50,3 +50,39 @@ export const RemoteGroup = ({ ariaLabel, color, size }) => {
     </svg>
   );
 };
+
+export const Bucket = ({ ariaLabel, color, size }) => {
+  const getColor = useGetColor(color);
+  return (
+    <svg
+      viewBox="0 0 32 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M30.0239 0C31.2114 0 32.1489 1.125 31.9614 2.3125L28.5239 24.5625C28.2114 26.5625 26.5239 28 24.5239 28H7.46143C5.46143 28 3.77393 26.5625 3.52393 24.5625L0.0239303 2.3125C-0.16357 1.125 0.77393 0 2.02393 0H30.0239ZM27.6489 4H4.33643L6.21143 16H25.7739L27.6489 4Z"
+        fill={getColor}
+      />
+    </svg>
+  );
+};
+
+export const Buckets = ({ ariaLabel, color, size }) => {
+  const getColor = useGetColor(color);
+  return (
+    <svg
+      viewBox="0 0 37 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={'svg-inline--fa ' + (size ? `fa-${size}` : '')}
+      aria-label={ariaLabel}
+    >
+      <path
+        d="M35.1063 9.33301C35.9032 9.33313 36.5329 10.0834 36.4071 10.875L34.0995 25.708C33.8897 27.0412 32.7571 27.9999 31.4149 28H24.1278C26.417 27.5019 28.221 25.649 28.5985 23.2334V23.2305L29.0975 20H32.2538L33.5126 12H30.3329L30.745 9.33301H35.1063ZM28.0223 0C29.1305 0.000168028 30.0049 1.04998 29.8299 2.1582L26.6219 22.9248C26.3303 24.7915 24.7552 26.1338 22.8885 26.1338H6.96373C5.09707 26.1338 3.52226 24.7915 3.28893 22.9248L0.0223272 2.1582C-0.152604 1.04996 0.721996 0.000113715 1.88854 0H28.0223ZM4.04674 3.7334L5.79674 14.9336H24.0555L25.8055 3.7334H4.04674ZM22.4901 12H17.8671L18.0135 12.9336H15.2987L14.9725 10.875C14.8467 10.0834 15.4756 9.33323 16.3143 9.33301H22.9071L22.4901 12Z"
+        fill={getColor}
+      />
+    </svg>
+  );
+};

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

@@ -10,7 +10,7 @@ import {
 import styled, { css } from 'styled-components';
 import { CoreUITheme } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
-import { RemoteGroup, RemoteUser } from './CustomsIcons';
+import { Bucket, Buckets, RemoteGroup, RemoteUser } from './CustomsIcons';
 
 // Module-level cache for imported icons
 const iconCache: Record<string, any> = {};
@@ -24,7 +24,6 @@ export const iconTable = {
   'Node-pdf': 'fas faDatabase',
   'Volume-pdf': 'fas faCompactDisc',
   Network: 'fas faProjectDiagram',
-  Bucket: 'fas faGlassWhiskey',
   'Cloud-backend': 'fas faCloud',
   Datacenter: 'fas faWarehouse',
   'Simple-user': 'fas faUser',
@@ -164,10 +163,18 @@ export const customIcons: Record<
   'Remote-group': ({ 'aria-label': ariaLabel, color, size }) => (
     <RemoteGroup ariaLabel={ariaLabel} color={color} size={size} />
   ),
+  Bucket: ({ 'aria-label': ariaLabel, color, size }) => (
+    <Bucket ariaLabel={ariaLabel} color={color} size={size} />
+  ),
+  Buckets: ({ 'aria-label': ariaLabel, color, size }) => (
+    <Buckets ariaLabel={ariaLabel} color={color} size={size} />
+  ),
 };
 
 customIcons['Remote-user'].displayName = 'RemoteUser';
 customIcons['Remote-group'].displayName = 'RemoteGroup';
+customIcons['Bucket'].displayName = 'Bucket';
+customIcons['Buckets'].displayName = 'Buckets';
 
 const IconStyled = styled(FontAwesomeIcon)`
   ${(props) => {

package/src/lib/components/infomessage/InfoMessage.component.tsx

@@ -32,7 +32,7 @@ export const InfoMessage = ({ title, content, link, linkText }: Props) => {
     >
       <Stack>
         <Icon name="Info-circle" color={theme.infoPrimary} size="lg" />
-        {typeof title === 'string' ? <Text isEmphazed>{title}</Text> : title}
+        {typeof title === 'string' ? <Text color="textPrimary" isEmphazed>{title}</Text> : title}
       </Stack>
       <Text color="textSecondary" isGentleEmphazed>
         {content}

package/src/lib/components/tablev2/Tablestyle.tsx

@@ -8,7 +8,6 @@ import { HeaderGroup } from 'react-table';
 import { Icon } from '../icon/Icon.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 import { spacing } from '../../spacing';
-import { Box } from '../box/Box';
 
 const borderSize = '4px';
 export const SortIncentive = styled.span`
@@ -65,7 +64,6 @@ export const HeadRow = styled.div<HeadRowType>`
   overflow: hidden;
   border-bottom: 1px solid
     ${(props) => props.theme[props.separationLineVariant]};
-  padding-right: ${borderSize};
   padding-left: ${spacing.r16};
 `;
 
@@ -105,7 +103,7 @@ export const TableRow = styled.div<TableRowType>`
     if (props.selectedId && props.isSelected) {
       return css`
         background-color: ${props.theme.highlight};
-        border-right: ${borderSize} solid ${props.theme.selectedActive};
+        box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
       `;
     }
   }}
@@ -124,7 +122,7 @@ export const TableRowMultiSelectable = styled.div<TableRowMultiSelectableType>`
     if (props.isSelected) {
       return css`
         background-color: ${(props) => props.theme.highlight};
-        border-right: ${borderSize} solid ${props.theme.selectedActive};
+        box-shadow: inset -${borderSize} 0 0 ${props.theme.selectedActive};
       `;
     }
   }}

package/src/lib/components/tooltip/Tooltip.component.tsx

@@ -58,7 +58,7 @@ const TooltipOverLayContainer = styled.div<{
     (props && props.style && props.style.fontSize) || fontSize.small};
   vertical-align: middle;
   padding: ${spacing.r4} ${spacing.r8};
-  max-width: 40rem;
+  max-width: 20rem;
 `;
 
 const TooltipText = styled.div`

package/src/lib/index.ts

@@ -79,3 +79,4 @@ export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
 export { CoreUITheme } from './style/theme';
+export { formatISONumber } from './utils';

package/src/lib/utils.ts

@@ -55,3 +55,41 @@ export const convertRemToPixels = (rem: number): number => {
 
   return 0;
 };
+
+type FormatISONumberOptions = {
+  decimals?: number;
+  compact?: boolean;
+  fixedDecimals?: boolean;
+};
+
+/**
+ * Formats a number to ISO 80000-1 format:
+ * - Space as thousands separator
+ * - Dot as decimal separator
+ * - Optional compact notation (10K, 1M, etc.)
+ * - Very small values (< 0.001): scientific notation
+ */
+export const formatISONumber = (
+  value: number,
+  options: FormatISONumberOptions = {},
+): string => {
+  const { decimals = 2, compact = false, fixedDecimals = false } = options;
+
+  if (value === 0) return '0';
+
+  const absValue = Math.abs(value);
+
+  if (absValue < 0.001) {
+    return value.toExponential();
+  }
+
+  // ISO format: space as thousands separator, dot as decimal separator
+  // With optional compact notation (10K, 1M, etc.)
+  return new Intl.NumberFormat('fr-FR', {
+    minimumFractionDigits: fixedDecimals ? decimals : undefined,
+    maximumFractionDigits: decimals,
+    notation: compact ? 'compact' : 'standard',
+  })
+    .format(value)
+    .replace(',', '.');
+};

package/stories/GlobalHealthBar/globalhealthbar.stories.tsx

@@ -9,7 +9,7 @@ import {
 type Story = StoryObj<GlobalHealthProps>;
 
 const meta: Meta<GlobalHealthProps> = {
-  title: 'Components/DataDisplay/Charts/GlobalHealthBar',
+  title: 'Components/Data Display/Charts/GlobalHealthBar',
   component: GlobalHealthBar,
 };
 export default meta;

package/stories/banner.stories.tsx

@@ -9,7 +9,7 @@ export default {
   component: Banner,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
-    icon: 'Exclamation-triangle',
+    icon: 'Exclamation-circle',
   },
   argTypes: {
     icon: iconArgType,

package/stories/linetimeseriechart.stories.tsx

@@ -11,10 +11,13 @@ import {
 import { lineTimeSeriesColorRange } from '../src/lib/style/theme';
 import { useEffect } from 'react';
 import {
+  SAMPLE_DURATION_LAST_ONE_HOUR,
   SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+  SAMPLE_FREQUENCY_LAST_ONE_HOUR,
   SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
 } from '../src/lib/components/constants';
 import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { useTheme } from 'styled-components';
 
 const ChartWithProviders = (props) => {
   return (
@@ -71,10 +74,6 @@ const meta: Meta<typeof LineTimeSerieChart> = {
       options: ['default', 'percentage', 'symmetrical'],
     },
     yAxisTitle: { control: 'text' },
-    timeFormat: {
-      control: 'select',
-      options: ['date-time', 'date'],
-    },
   },
 };
 
@@ -638,7 +637,6 @@ export const DateFormatExample: Story = {
     duration:
       longTermPrometheusData[longTermPrometheusData.length - 1][0] -
       longTermPrometheusData[0][0],
-    timeFormat: 'date',
   },
 };
 
@@ -719,6 +717,51 @@ export const SyncIdExample: Story = {
           interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
           duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
         />
+
+        <LineTimeSerieChart
+          syncId="sync-id"
+          series={[
+            {
+              data: prometheusData as [number, string | number | null][],
+              resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+              metricPrefix: 'cpu',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+          ]}
+          title="CPU Usage"
+          height={200}
+          startingTimeStamp={Number(prometheusData[0][0])}
+          isLoading={false}
+          yAxisType={'percentage'}
+          interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+          duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+        />
+
+        <LineTimeSerieChart
+          syncId="sync-id"
+          series={[
+            {
+              data: prometheusData3 as [number, string | number | null][],
+              resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+              metricPrefix: 'memory',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+            {
+              data: prometheusData4 as [number, string | number | null][],
+              resource: 'ip-10-160-122-207.eu-north-2.compute.internal',
+              metricPrefix: 'memory',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+          ]}
+          title="Memory Usage"
+          height={200}
+          startingTimeStamp={Number(prometheusData3[0][0])}
+          isLoading={false}
+          yAxisType={'percentage'}
+          interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+          duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+        />
+
         <ChartLegend shape="line" direction="vertical" />
       </ChartLegendWrapper>
     );
@@ -744,7 +787,6 @@ export const CustomTooltipExample: Story = {
     yAxisTitle: '',
     interval: SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
     duration: SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
-    timeFormat: 'date-time',
     renderTooltip: (props) => {
       return <div>Custom Tooltip</div>;
     },
@@ -849,3 +891,280 @@ export const DynamicColorSetExample: Story = {
     );
   },
 };
+
+export const EmptyDataExample: Story = {
+  render: () => {
+    const theme = useTheme();
+    const now = Date.now() / 1000;
+
+    return (
+      <ChartLegendWrapper
+        // @ts-ignore
+        colorSet={{ Success: theme.statusHealthy, Failed: theme.statusCritical }}
+        sortOrder="status"
+      >
+        <LineTimeSerieChart
+          series={[]}
+          title="Empty Data - Last Hour"
+          height={150}
+          duration={60 * 60} // 1 hour
+          interval={60} // 1 minute
+          startingTimeStamp={now - 60 * 60}
+          isLoading={false}
+          yAxisType="default"
+        />
+        <ChartLegend shape="line" direction="vertical" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+
+// Generate 1-hour data with 30s intervals, all zeros
+const generateAllZeroValuesData = (): [number, string][] => {
+  const baseTimestamp = 1740405600;
+  const points: [number, string][] = [];
+  for (let i = 0; i <= 120; i++) {
+    const timestamp = baseTimestamp + i * 30;
+    points.push([timestamp, '0']);
+  }
+  return points;
+};
+
+const allZeroValuesData = generateAllZeroValuesData();
+
+export const AllZeroValuesExample: Story = {
+  render: () => {
+    return (
+      <ChartLegendWrapper colorSet={{ 'server-1': lineTimeSeriesColorRange[0] }}>
+        <LineTimeSerieChart yAxisType='default' startingTimeStamp={allZeroValuesData[0][0]} interval={SAMPLE_FREQUENCY_LAST_ONE_HOUR} duration={SAMPLE_DURATION_LAST_ONE_HOUR}
+          series={[{ data: allZeroValuesData, resource: 'server-1', metricPrefix: 'bandwidth', getTooltipLabel: (prefix, resource) => `${resource}-${prefix}` }]} title="All Zero Values" height={200} />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+// Data with small values (below 1)
+const smallValuesData: [number, string][] = [
+  [1740405600, '0.047'],
+  [1740406320, '0.053'],
+  [1740407760, '0.040'],
+  [1740408480, '0.059'],
+  [1740409200, '0.062'],
+  [1740409920, '0.057'],
+  [1740410640, '0.045'],
+  [1740411360, '0.058'],
+  [1740412080, '0.053'],
+  [1740412800, '0.064'],
+  [1740413520, '0.081'],
+  [1740414240, '0.064'],
+  [1740415680, '0.097'],
+  [1740416400, '0.055'],
+  [1740417120, '0.047'],
+  [1740417840, '0.072'],
+  [1740418560, '0.061'],
+  [1740419280, '0.051'],
+  [1740420000, '0.039'],
+  [1740420720, '0.046'],
+  [1740421440, '0.035'],
+  [1740422160, '0.046'],
+  [1740422880, '0.043'],
+  [1740423600, '0.036'],
+  [1740467520, '0.042'],
+  [1740468240, '0.053'],
+  [1740468960, '0.055'],
+  [1740469680, '0.046'],
+  [1740470400, '0.043'],
+  [1740471120, '0.055'],
+  [1740471840, '0.046'],
+  [1740472560, '0.047'],
+  [1740473280, '0.044'],
+  [1740474000, '0.055'],
+  [1740474720, '0.042'],
+  [1740475440, '0.061'],
+  [1740476160, '0.042'],
+  [1740476880, '0.038'],
+  [1740477600, '0.041'],
+  [1740478320, '0.052'],
+  [1740479040, '0.042'],
+  [1740479760, '0.034'],
+  [1740480480, '0.036'],
+  [1740481200, '0.037'],
+  [1740481920, '0.049'],
+  [1740482640, '0.041'],
+  [1740483360, '0.037'],
+  [1740484080, '0.035'],
+  [1740484800, '0.039'],
+  [1740485520, '0.047'],
+  [1740486240, '0.046'],
+  [1740486960, '0.042'],
+  [1740487680, '0.035'],
+  [1740488400, '0.034'],
+  [1740489120, '0.041'],
+  [1740489840, '0.058'],
+  [1740490560, '0.040'],
+  [1740491280, '0.045'],
+  [1740492000, '0.045'],
+];
+
+const verySmallValuesData: [number, string][] = [
+  [1740405600, '0.00000475'],
+  [1740406320, '0.00000530'],
+  [1740407760, '0.00000401'],
+  [1740408480, '0.00000591'],
+  [1740409200, '0.00000624'],
+  [1740409920, '0.00000574'],
+  [1740410640, '0.00000451'],
+  [1740411360, '0.00000586'],
+  [1740412080, '0.00000530'],
+  [1740412800, '0.00000649'],
+  [1740413520, '0.00000812'],
+  [1740414240, '0.00000648'],
+  [1740415680, '0.00000671'],
+  [1740416400, '0.00000552'],
+  [1740417120, '0.00000479'],
+  [1740417840, '0.00000721'],
+  [1740418560, '0.00000619'],
+  [1740419280, '0.00000510'],
+  [1740420000, '0.00000395'],
+  [1740420720, '0.00000469'],
+  [1740421440, '0.00000350'],
+  [1740422160, '0.00000466'],
+  [1740422880, '0.00000435'],
+  [1740423600, '0.00000367'],
+];
+
+
+
+export const SmallValuesExample: Story = {
+  render: () => {
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          'server-1': lineTimeSeriesColorRange[0],
+          'server-2': lineTimeSeriesColorRange[1],
+        }}
+      >
+        <LineTimeSerieChart
+          series={[
+            {
+              data: smallValuesData,
+              resource: 'server-1',
+              metricPrefix: 'rate',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+          ]}
+          title="Small Values (0.003 - 0.008 range)"
+          height={200}
+          startingTimeStamp={smallValuesData[0][0]}
+          isLoading={false}
+          yAxisType={'default'}
+          interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+          duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+        />
+
+        <LineTimeSerieChart
+          series={[
+            {
+              data: verySmallValuesData,
+              resource: 'server-2',
+              metricPrefix: 'rate',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+          ]}
+          title="Very Small Values (0.000003 - 0.000008 range)"
+          height={200}
+          startingTimeStamp={verySmallValuesData[0][0]}
+          isLoading={false}
+          yAxisType={'default'}
+          interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+          duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+        />
+        <ChartLegend shape="line" direction="vertical" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+// Generate 1-hour data with 30s intervals (120 points)
+const generateBigValuesData = (): [number, string][] => {
+  const baseTimestamp = 1740405600;
+  const points: [number, string][] = [];
+  for (let i = 0; i <= 120; i++) {
+    const timestamp = baseTimestamp + i * 30;
+    // Exponential growth from 1000 to ~100M
+    const value = Math.floor(1000 * Math.pow(1.1, i));
+    points.push([timestamp, value.toString()]);
+  }
+  return points;
+};
+
+const generateBigValuesData2 = (): [number, string][] => {
+  const baseTimestamp = 1740405600;
+  const points: [number, string][] = [];
+  for (let i = 0; i <= 120; i++) {
+    const timestamp = baseTimestamp + i * 30;
+    // Fluctuating between 10000 and 15000 with random variation
+    const value = 12500 + Math.sin(i * 0.2) * 2500 + Math.random() * 500;
+    points.push([timestamp, value.toFixed(2)]);
+  }
+  return points;
+};
+
+const bigValuesData = generateBigValuesData();
+const bigValuesData2 = generateBigValuesData2();
+export const BigValuesExample: Story = {
+  render: () => {
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          'server-1': lineTimeSeriesColorRange[0],
+          'server-2': lineTimeSeriesColorRange[1],
+        }}
+      >
+        <LineTimeSerieChart
+          series={[
+            {
+              data: bigValuesData2,
+              resource: 'server-2',
+              metricPrefix: 'bandwidth',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+          ]}
+          title="Big Values"
+          height={200}
+          yAxisTitle='Big Number Example '
+          startingTimeStamp={bigValuesData2[0][0]}
+          isLoading={false}
+          yAxisType={'default'}
+          interval={SAMPLE_FREQUENCY_LAST_ONE_HOUR}
+          duration={SAMPLE_DURATION_LAST_ONE_HOUR}
+        />
+        <LineTimeSerieChart
+          series={[
+            {
+              data: bigValuesData2,
+              resource: 'server-2',
+              metricPrefix: 'bandwidth',
+              getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+            },
+          ]}
+          title="Big Values"
+          height={200}
+          yAxisTitle='Big Number Example '
+          startingTimeStamp={bigValuesData2[0][0]}
+          isLoading={false}
+          unitRange={UNIT_RANGE_BS}
+          yAxisType={'default'}
+          interval={SAMPLE_FREQUENCY_LAST_ONE_HOUR}
+          duration={SAMPLE_DURATION_LAST_ONE_HOUR}
+        />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+
+
+
+
+