@scality/core-ui 0.170.0 → 0.172.0

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

@@ -3,6 +3,14 @@ import { spacing } from '../../spacing';
 import { CoreUITheme } from '../../style/theme';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
+export type TextVariant =
+  | 'ChartTitle'
+  | 'Basic'
+  | 'Smaller'
+  | 'Larger'
+  | 'Large'
+  | 'Small';
+
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
   children: React.ReactNode | string;
@@ -128,7 +136,7 @@ export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
 `;
 
 export const Text = styled.span<{
-  variant?: 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large';
+  variant?: TextVariant;
   color?: keyof CoreUITheme;
   isEmphazed?: boolean;
   isGentleEmphazed?: boolean;
@@ -151,7 +159,12 @@ export const Text = styled.span<{
   line-height: 1.4;
   letter-spacing: 2%;// to be defined, percentage value is not valid
       `
-          : `
+          : props.variant === 'Small'
+            ? `
+  font-size: 0.85rem;
+  line-height: 1.4;
+      `
+            : `
   font-size: 1rem;
   line-height: ${spacing.r24};
       `}

package/src/lib/next.ts

@@ -21,8 +21,18 @@ export {
   BarchartSortFn,
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
-export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
+export {
+  ChartLegendWrapper,
+  useChartId,
+} from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+} from './components/charttooltip/ChartTooltip';
 export { CoreUITheme } from './style/theme';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';

package/stories/BarChart/barchart.stories.tsx

@@ -987,7 +987,13 @@ export const StackedHistogram: Story = {
     ] as const;
     const theme = useTheme() as CoreUITheme;
     return (
-      <div style={{ width: '50%', padding: spacing.r16 }}>
+      <div
+        style={{
+          width: '50%',
+          padding: spacing.r16,
+          backgroundColor: theme.backgroundLevel2,
+        }}
+      >
         <ChartLegendWrapper
           colorSet={{
             'Test 1': theme.statusHealthy,

package/stories/GlobalHealthBar/globalhealthbarRecharts.stories.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Alert,
+  GlobalHealthBar,
+  GlobalHealthProps,
+} from '../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
+
+import {
+  DATE_FORMATER,
+  TIME_SECOND_FORMATER,
+} from '../../src/lib/components/date/FormattedDateTime';
+import {
+  MetricsTimeSpanProvider,
+  useMetricsTimeSpan,
+} from '../../src/lib/next';
+import { Dropdown, Icon, Stack } from '../../src/lib';
+import {
+  LAST_ONE_HOUR,
+  LAST_SEVEN_DAYS,
+  LAST_TWENTY_FOUR_HOURS,
+  SAMPLE_DURATION_LAST_ONE_HOUR,
+  SAMPLE_DURATION_LAST_SEVEN_DAYS,
+  SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+} from '../../src/lib/components/constants';
+
+type Story = StoryObj<GlobalHealthProps>;
+
+const meta: Meta<GlobalHealthProps> = {
+  title: 'Components/GlobalHealthBarRecharts',
+  component: GlobalHealthBar,
+};
+export default meta;
+
+const start = '2021-01-30T23:00:00Z'; // UTC time
+const end = '2021-02-06T23:00:00Z';
+const start2 = '2021-01-29T14:00:00Z';
+const end2 = '2021-02-05T14:00:00Z';
+const startLast24h = '2021-02-01T00:00:00Z';
+const endLast24h = '2021-02-02T00:00:00Z';
+const startLastHour = '2021-02-01T00:00:00Z';
+const endLastHour = '2021-02-01T01:00:00Z';
+
+const alerts = [
+  {
+    id: '0',
+    severity: 'unavailable',
+    startsAt: '2021-02-01T00:00:00Z',
+    endsAt: '2021-02-01T01:00:00Z',
+    description: 'Global health unavailable',
+  },
+  {
+    id: '1',
+    severity: 'critical',
+    startsAt: '2021-02-01T11:00:00Z',
+    endsAt: '2021-02-02T11:00:00Z',
+    description: 'Global health critical',
+  },
+  {
+    id: '2',
+    severity: 'warning',
+    startsAt: '2021-02-01T23:00:00Z',
+    endsAt: '2021-02-02T22:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    severity: 'critical',
+    startsAt: '2021-02-03T00:00:00Z',
+    endsAt: '2021-02-04T00:00:00Z',
+    description:
+      'Global health critical Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '4',
+    severity: 'warning',
+    startsAt: '2021-02-04T10:00:00Z',
+    endsAt: '2021-02-06T00:00:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '5',
+    severity: 'warning',
+    startsAt: '2021-02-06T12:00:00Z',
+    endsAt: '2021-02-07T00:00:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '6',
+    severity: 'warning',
+    startsAt: '2021-01-30T22:00:00Z',
+    endsAt: '2021-01-30T23:00:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '7',
+    severity: 'warning',
+    startsAt: '2021-02-01T00:47:30Z',
+    endsAt: '2021-02-01T01:30:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+];
+
+export const Default: Story = {
+  args: {
+    start: new Date(start),
+    end: new Date(end),
+    alerts: alerts as Alert[],
+  },
+};
+
+export const Last24Hours: Story = {
+  render: () => {
+    return (
+      <div style={{ width: '350px', height: '1000px', overflow: 'hidden' }}>
+        <div style={{ width: '500px', height: '400px' }} />
+        <GlobalHealthBar
+          start={new Date(startLast24h)}
+          end={new Date(endLast24h)}
+          alerts={alerts as Alert[]}
+          id="1"
+        />
+      </div>
+    );
+  },
+};
+
+export const LastHour: Story = {
+  render: () => {
+    return (
+      <div style={{ width: '250px', height: '1000px', overflow: 'hidden' }}>
+        <div style={{ width: '400px', height: '400px' }} />
+        <GlobalHealthBar
+          start={new Date(startLastHour)}
+          end={new Date(endLastHour)}
+          alerts={alerts as Alert[]}
+          id="1"
+        />
+      </div>
+    );
+  },
+};

package/stories/GlobalHealthBar/globalheathbarrecharts.guideline.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks';
+import { GlobalHealthBar } from '../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
+import * as GlobalHealthBarStories from './globalhealthbarRecharts.stories';
+
+<Meta name="Guideline" of={GlobalHealthBarStories} />

package/stories/InlineInput/InlineInput.stories.tsx

@@ -26,7 +26,13 @@ export default {
         });
       },
     });
-    return <InlineInput {...args} changeMutation={changeMutation} />;
+    return (
+      <InlineInput
+        id="inline-input-story"
+        {...args}
+        changeMutation={changeMutation}
+      />
+    );
   },
 };
 

package/stories/globalhealthbar.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
+import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
+import { GlobalHealthBar as VegaGlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
 import { Wrapper } from './common';
+import { Stack } from '../src/lib/spacing';
 const alerts = [
   {
     id: '1',
@@ -34,10 +36,17 @@ const alerts = [
   {
     id: '5',
     severity: 'warning',
-    startsAt: '2021-02-06T12:00:00Z',
+    startsAt: '2021-02-06T10:00:00Z',
     endsAt: '2021-02-06T20:00:00Z',
     description: 'Global health warning',
   },
+  {
+    id: '6',
+    severity: 'warning',
+    startsAt: '2021-02-06T12:00:00Z',
+    endsAt: '2021-02-06T22:30:00Z',
+    description: 'Global health warning',
+  },
 ];
 const alertsLast24h = [
   {
@@ -75,7 +84,7 @@ const alertRetrieveBefore = [
     id: '2',
     severity: 'critical',
     startsAt: '2021-02-05T23:00:00Z',
-    endsAt: '2021-02-06T21:00:00Z',
+    endsAt: '2021-02-07T00:00:00Z',
     description: 'Global health warning',
   },
 ];
@@ -105,13 +114,18 @@ const endNotFirstDay = '2021-03-01T23:00:00Z';
 
 export default {
   title: 'Components/Data Display/Charts/GlobalHealthBar',
-  component: GlobalHealthBar,
+  component: (props) => (
+    <Stack direction="vertical">
+      <GlobalHealthBar {...props} />
+      <VegaGlobalHealthBar {...props} />
+    </Stack>
+  ),
   decorators: [
     (story) => (
       <Wrapper
         style={{ minHeight: '50vh', display: 'flex', alignItems: 'center' }}
       >
-        <div style={{ width: '500px' }}>
+        <div style={{ width: '500px', height: '400px' }}>
           <SyncedCursorCharts>{story()}</SyncedCursorCharts>
         </div>
       </Wrapper>
@@ -120,6 +134,7 @@ export default {
   args: {
     start,
     end,
+    width: 500,
   },
   argTypes: {
     start: {
@@ -135,6 +150,7 @@ export const GlobalHealthComponentDemo = {
   args: {
     id: 'vis_globalhealth',
     alerts,
+    width: 500,
   },
 };
 
@@ -144,12 +160,14 @@ export const GlobalHealthLast24Hours = {
     alerts: alertsLast24h,
     start: startLast24h,
     end: endLast24h,
+    width: 500,
   },
 };
 export const GlobalHealthEmpty = {
   args: {
     id: 'vis_globalhealth_empty',
     alerts: emptyAlert,
+    width: 500,
   },
 };
 
@@ -157,6 +175,7 @@ export const AlertTriggeredEarlierThanTheStartingTime = {
   args: {
     id: 'vis_globalhealth_alert_retrieve_before',
     alerts: alertRetrieveBefore,
+    width: 500,
   },
 };
 
@@ -167,5 +186,6 @@ export const FirstLabel = {
     alerts: alertTriggerNotFirstDay,
     start: startNotFirstDay,
     end: endNotFirstDay,
+    width: 500,
   },
 };

package/stories/linetimeseriechart.stories.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { LineTimeSerieChart } from '../src/lib/components/linetimeseriechart/linetimeseriechart.component';
+import {
+  LineTimeSerieChart,
+  Serie,
+} from '../src/lib/components/linetimeseriechart/linetimeseriechart.component';
 import { ChartLegendWrapper } from '../src/lib/components/chartlegend/ChartLegendWrapper';
 import { lineTimeSeriesColorRange } from '../src/lib/style/theme';
 import { ChartLegend } from '../src/lib/components/chartlegend/ChartLegend';
+import {
+  useChartId,
+  useChartLegend,
+} from '../src/lib/components/chartlegend/ChartLegendWrapper';
+import { useEffect } from 'react';
 import {
   SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
   SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS,
 } from '../src/lib/components/constants';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
 
 const ChartWithProviders = (props) => {
   return (
@@ -634,3 +643,210 @@ export const DateFormatExample: Story = {
     timeFormat: 'date',
   },
 };
+
+export const SyncIdExample: Story = {
+  render: () => {
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          'ip-10-160-122-207.eu-north-1.compute.internal':
+            lineTimeSeriesColorRange[0],
+          'ip-10-160-122-207.eu-north-2.compute.internal':
+            lineTimeSeriesColorRange[1],
+        }}
+      >
+        <LineTimeSerieChart
+          syncId="sync-id"
+          series={{
+            above: [
+              {
+                data: prometheusData as [number, string | number | null][],
+                resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+                metricPrefix: 'in',
+                getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+              },
+              {
+                data: prometheusData2 as [number, string | number | null][],
+                resource: 'ip-10-160-122-207.eu-north-2.compute.internal',
+                metricPrefix: 'in',
+                getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+              },
+            ],
+            below: [
+              {
+                data: prometheusData3 as [number, string | number | null][],
+                resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+                metricPrefix: 'out',
+                getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+              },
+              {
+                data: prometheusData4 as [number, string | number | null][],
+                resource: 'ip-10-160-122-207.eu-north-2.compute.internal',
+                metricPrefix: 'out',
+                getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+              },
+            ],
+          }}
+          title="ControlPlane Bandwidth"
+          height={200}
+          startingTimeStamp={Number(prometheusData[0][0])}
+          unitRange={UNIT_RANGE_BS}
+          isLoading={false}
+          yAxisType={'symmetrical'}
+          yAxisTitle={'in(+)/out(-)'}
+          interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+          duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+        />
+
+        <LineTimeSerieChart
+          syncId="sync-id"
+          series={{
+            above: [
+              {
+                data: prometheusData2 as [number, string | number | null][],
+                resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+                metricPrefix: 'in',
+                getTooltipLabel: (prefix, resource) => `${resource}-${prefix}`,
+              },
+            ],
+            below: [],
+          }}
+          title="ControlPlane Bandwidth 2"
+          height={200}
+          startingTimeStamp={Number(prometheusData2[0][0])}
+          unitRange={UNIT_RANGE_BS}
+          isLoading={false}
+          yAxisType={'symmetrical'}
+          yAxisTitle={'in(+)/out(-)'}
+          interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+          duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+        />
+        <ChartLegend shape="line" direction="vertical" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+export const CustomTooltipExample: Story = {
+  args: {
+    series: [
+      {
+        data: prometheusData,
+        resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+        metricPrefix: 'instance:10.160.122.207:9100',
+        getTooltipLabel: (prefix, resource) => `${resource}`,
+      },
+    ],
+    title: 'CPU Usage',
+    height: 200,
+    startingTimeStamp: prometheusData[0][0],
+    isLoading: false,
+    isLegendHidden: false,
+    helpText: 'This is the help text',
+    yAxisType: 'percentage',
+    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>;
+    },
+  },
+};
+
+// Dynamic colorSet example components
+const DynamicChart1 = (props) => {
+  const chartId = useChartId();
+  const { register } = useChartLegend();
+
+  useEffect(() => {
+    register(chartId, [
+      'ip-10-160-122-207.eu-north-1.compute.internal',
+      'ip-10-160-122-207.eu-north-2.compute.internal',
+    ]);
+  }, [chartId, register]);
+
+  return <LineTimeSerieChart {...props} />;
+};
+
+const DynamicChart2 = (props) => {
+  const chartId = useChartId();
+  const { register } = useChartLegend();
+
+  useEffect(() => {
+    register(chartId, ['ip-10-160-122-207.eu-north-1.compute.internal']);
+  }, [chartId, register]);
+
+  return <LineTimeSerieChart {...props} />;
+};
+
+const generateColors = (seriesNames: string[]) => {
+  const colors: Record<string, string> = {};
+  seriesNames.forEach((name, index) => {
+    colors[name] =
+      lineTimeSeriesColorRange[index % lineTimeSeriesColorRange.length];
+  });
+  return colors;
+};
+
+export const DynamicColorSetExample: Story = {
+  render: () => {
+    return (
+      <ChartLegendWrapper colorSet={generateColors}>
+        <div style={{ marginBottom: '20px' }}>
+          <h3>Chart 1 - Multiple Series</h3>
+          <DynamicChart1
+            series={{
+              above: [
+                {
+                  data: prometheusData as [number, string | number | null][],
+                  resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+                  metricPrefix: 'in',
+                  getTooltipLabel: (prefix, resource) =>
+                    `${resource}-${prefix}`,
+                },
+                {
+                  data: prometheusData2 as [number, string | number | null][],
+                  resource: 'ip-10-160-122-207.eu-north-2.compute.internal',
+                  metricPrefix: 'in',
+                  getTooltipLabel: (prefix, resource) =>
+                    `${resource}-${prefix}`,
+                },
+              ],
+              below: [],
+            }}
+            title="Dynamic Chart 1"
+            height={200}
+            startingTimeStamp={Number(prometheusData[0][0])}
+            isLoading={false}
+            yAxisType={'symmetrical'}
+            interval={SAMPLE_FREQUENCY_LAST_TWENTY_FOUR_HOURS}
+            duration={SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS}
+          />
+        </div>
+
+        <div style={{ marginBottom: '20px' }}>
+          <h3>Chart 2 - Single Series (Overlapping with Chart 1)</h3>
+          <DynamicChart2
+            series={[
+              {
+                data: prometheusData3 as [number, string | number | null][],
+                resource: 'ip-10-160-122-207.eu-north-1.compute.internal',
+                metricPrefix: 'instance:10.160.122.207:9100',
+                getTooltipLabel: (prefix, resource) => `${resource}`,
+              },
+            ]}
+            title="Dynamic Chart 2"
+            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}
+          />
+        </div>
+
+        <ChartLegend shape="line" direction="vertical" />
+      </ChartLegendWrapper>
+    );
+  },
+};