@scality/core-ui 0.175.0 → 0.177.0

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

@@ -133,7 +133,7 @@ export const ChartLegendWrapper = ({
   );
 
   const listResources = useCallback(() => {
-    return Object.keys(internalColorSet);
+    return Object.keys(internalColorSet).sort();
   }, [internalColorSet]);
 
   const chartLegendState = useMemo(

package/src/lib/components/charttooltip/ChartTooltip.tsx

@@ -1,7 +1,18 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
+import { useEffect, useState, useRef } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  Middleware,
+} from '@floating-ui/react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 
 export const ChartTooltipContainer = styled.div`
   border: 1px solid ${({ theme }) => theme.border};
@@ -11,7 +22,8 @@ export const ChartTooltipContainer = styled.div`
   font-size: ${fontSize.small};
   padding: ${spacing.r8};
   min-width: 10rem;
-  max-width: 250px;
+  max-width: 40rem;
+
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
 
@@ -81,3 +93,164 @@ export const ChartTooltipItemsContainer = styled.div`
   gap: ${spacing.r8};
   width: 100%;
 `;
+
+export const ChartTooltipSeparator = styled.div`
+  height: 1px;
+  background-color: ${({ theme }) => theme.border};
+  margin: ${spacing.r4} 0;
+  width: 100%;
+`;
+
+export type TooltipDateFormat =
+  | 'day-month-abbreviated-year-hour-minute'
+  | 'day-month-abbreviated-hour-minute-second'
+  | 'day-month-abbreviated-hour-minute';
+
+const getTooltipDateFormat: (duration: number) => TooltipDateFormat = (
+  duration: number,
+) => {
+  if (duration <= 60 * 60 * 1000) {
+    return 'day-month-abbreviated-hour-minute-second';
+  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+    return 'day-month-abbreviated-hour-minute';
+  } else {
+    return 'day-month-abbreviated-year-hour-minute';
+  }
+};
+
+export const TooltipHeader = ({
+  duration,
+  value,
+}: {
+  duration: number;
+  value: string | number;
+}) => {
+  const timeFormat = getTooltipDateFormat(duration);
+  return (
+    <ChartTooltipHeader>
+      <FormattedDateTime format={timeFormat} value={new Date(value)} />
+    </ChartTooltipHeader>
+  );
+};
+
+export interface ChartTooltipPortalProps {
+  children: React.ReactNode;
+  coordinate?: { x: number; y: number };
+  chartContainerRef: React.RefObject<HTMLDivElement>;
+  isVisible?: boolean;
+  middleware?: Middleware[];
+  offset?: number | (({ placement }: { placement: string }) => number);
+  customPosition?: (
+    chartRect: DOMRect,
+    coordinate?: { x: number; y: number },
+  ) => { x: number; y: number };
+  containerComponent?: React.ComponentType<any>;
+}
+
+export const ChartTooltipPortal: React.FC<ChartTooltipPortalProps> = ({
+  children,
+  coordinate,
+  chartContainerRef,
+  isVisible = true,
+  middleware,
+  offset: customOffset,
+  customPosition,
+  containerComponent: ContainerComponent = ChartTooltipContainer,
+}) => {
+  const [virtualElement, setVirtualElement] = useState<any>(null);
+  const previousPositionRef = useRef<{ x: number; y: number } | null>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    null,
+  );
+
+  // Default middleware configuration
+  const defaultMiddleware = [
+    offset(customOffset || 20),
+    flip(),
+    shift({ padding: 10 }),
+  ];
+
+  const { refs, floatingStyles } = useFloating({
+    elements: {
+      reference: virtualElement,
+    },
+    placement: 'top',
+    middleware: middleware || defaultMiddleware,
+    whileElementsMounted: autoUpdate,
+  });
+
+  // Create portal container once
+  useEffect(() => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    return () => {
+      document.body.removeChild(container);
+    };
+  }, []);
+
+  // Create virtual element from coordinate or custom position
+  useEffect(() => {
+    if (chartContainerRef.current) {
+      const chartRect = chartContainerRef.current.getBoundingClientRect();
+
+      let tooltipX: number;
+      let tooltipY: number;
+
+      if (customPosition) {
+        // Use custom positioning function
+        const position = customPosition(chartRect, coordinate);
+        tooltipX = position.x;
+        tooltipY = position.y;
+      } else if (coordinate) {
+        // Use default coordinate-based positioning
+        tooltipX = chartRect.left + coordinate.x;
+        tooltipY = chartRect.top + coordinate.y;
+      } else {
+        return; // No positioning method available
+      }
+
+      // Check if position has changed significantly
+      const hasPositionChanged =
+        !previousPositionRef.current ||
+        Math.abs(previousPositionRef.current.x - tooltipX) > 5 ||
+        Math.abs(previousPositionRef.current.y - tooltipY) > 5;
+
+      if (hasPositionChanged) {
+        previousPositionRef.current = { x: tooltipX, y: tooltipY };
+      }
+
+      setVirtualElement({
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: tooltipX,
+            y: tooltipY,
+            left: tooltipX,
+            top: tooltipY,
+            right: tooltipX,
+            bottom: tooltipY,
+          };
+        },
+      });
+    }
+  }, [coordinate, chartContainerRef, customPosition]);
+
+  if (!isVisible || !virtualElement || !portalContainer) return null;
+
+  const tooltipContent = (
+    <ContainerComponent
+      ref={refs.setFloating}
+      style={{
+        ...floatingStyles,
+        opacity: isVisible ? 1 : 0,
+      }}
+    >
+      {children}
+    </ContainerComponent>
+  );
+
+  return createPortal(tooltipContent, portalContainer);
+};

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

@@ -3,7 +3,7 @@ import { Tooltip } from '../tooltip/Tooltip.component';
 
 /**
  * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
- * @example Wednesday 6 October 2025
+ * @example Wednesday 06 October 2025
  */
 export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'long',
@@ -35,7 +35,7 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
 
 /**
  * @description Day month formatter, with weekday, day and month. Used for describing long term date.
- * @example Wed 6 Oct
+ * @example Wed 06 Oct
  */
 export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'short',
@@ -64,9 +64,30 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   minute: '2-digit',
 });
 
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct
+ */
+export const DAY_MONTH_ABBREVIATED = Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  hour12: false,
+});
+
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct 25
+ */
+export const DAY_MONTH_ABBREVIATED_YEAR = Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  year: '2-digit',
+  hour12: false,
+});
+
 /**
  * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
- * @example 6 Oct 18:33:00
+ * @example 06 Oct 18:33:00
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   'en-GB',
@@ -82,7 +103,7 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
 
 /**
  * @description Day month abbreviated hour minute formatter. Used for describing long term date.
- * @example 6 Oct 18:33
+ * @example 06 Oct 18:33
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   day: '2-digit',
@@ -92,6 +113,22 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Day month abbreviated year hour minute formatter. Used for describing long term date.
+ * @example 06 Oct 2025 18:33
+ */
+export const DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE = Intl.DateTimeFormat(
+  'en-GB',
+  {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  },
+);
+
 /**
  * @description Year month day formatter, without time. Used for describing long term date.
  * @example 2025-01-01
@@ -121,11 +158,14 @@ type FormattedDateTimeProps = {
     | 'relative'
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
+    | 'day-month-abbreviated-year-hour-minute'
     | 'long-date'
     | 'long-date-without-weekday'
     | 'chart-date'
     | 'year-month-day'
-    | 'month-day';
+    | 'month-day'
+    | 'day-month-abbreviated'
+    | 'chart-long-term-date';
 
   value: Date;
 };
@@ -150,10 +190,10 @@ const isItFutureOrIsItPast = (
  * time: '00:00'
  * 'time-second': '00:00:00'
  * relative: '1 month ago'
- * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
- * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'day-month-abbreviated-hour-minute': '06 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '06 Oct 18:33:00'
  * 'long-date': 'Wednesday 6 October 2025'
- * 'chart-date': '6 Oct'
+ * 'chart-date': '06 Oct'
  * 'year-month-day': '2025-10-06'
  */
 export const FormattedDateTime = ({
@@ -290,6 +330,31 @@ export const FormattedDateTime = ({
       return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
     case 'month-day':
       return <>{MONTH_DAY_FORMATTER.format(value)}</>;
+    case 'day-month-abbreviated-year-hour-minute':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE.format(value)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
+    case 'day-month-abbreviated':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED.format(value)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
+    case 'chart-long-term-date':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_YEAR.format(value)
+            .replace(/[ ,]/g, '')
+            // replace Sept with Sep to keep 3 letter month
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
     default:
       return <></>;
   }

package/src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx

@@ -26,12 +26,17 @@ export interface GlobalHealthProps {
 
 const ChartInteractiveContainer = styled.div`
   position: relative;
+  outline: none;
+  .recharts-surface {
+    outline: none;
+  }
 `;
 
 export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
   const [tooltipData, setTooltipData] = useState<Alert | null>(null);
   const [focusedAlertIndex, setFocusedAlertIndex] = useState<number>(-1);
   const [keyboardActive, setKeyboardActive] = useState<boolean>(false);
+  const [activeBarKey, setActiveBarKey] = useState<string | null>(null);
   const chartContainerRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
   const startTimestamp = new Date(start).getTime();
@@ -47,6 +52,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
   const handlePointerEnter = useCallback(
     (key: string) => {
       setTooltipData(alertsMap[key]);
+      setActiveBarKey(key);
     },
     [alertsMap],
   );
@@ -54,6 +60,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
   const handlePointerLeave = useCallback(() => {
     if (!keyboardActive) {
       setTooltipData(null);
+      setActiveBarKey(null);
     }
   }, [keyboardActive]);
 
@@ -83,6 +90,11 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
       setFocusedAlertIndex(update.newIndex);
       setTooltipData(update.selectedAlert);
       setKeyboardActive(update.shouldActivateKeyboard);
+
+      // Set active bar key for keyboard navigation
+      if (update.selectedAlert) {
+        setActiveBarKey(update.selectedAlert.key);
+      }
     },
     [allAlertKeys, focusedAlertIndex],
   );
@@ -93,6 +105,9 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
       setFocusedAlertIndex(0);
       setTooltipData(allAlertKeys[0]);
       setKeyboardActive(true);
+
+      // Set active bar key for initial focus
+      setActiveBarKey(allAlertKeys[0].key);
     }
   }, [allAlertKeys, focusedAlertIndex]);
 
@@ -100,6 +115,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
     setKeyboardActive(false);
     setFocusedAlertIndex(-1);
     setTooltipData(null);
+    setActiveBarKey(null);
   }, []);
 
   // Handle mouse enter to disable keyboard mode
@@ -182,17 +198,46 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
             isAnimationActive={false}
           />
 
-          {/* Alert bars */}
-          {allAlertBars.map(({ key, fill }) => (
-            <Bar
-              dataKey={key}
-              yAxisId={key}
-              fill={fill}
-              onPointerEnter={() => handlePointerEnter(key)}
-              onPointerLeave={() => handlePointerLeave()}
-              isAnimationActive={false}
-            />
-          ))}
+          {/* Alert bars - render non-active bars first */}
+          {allAlertBars.map(({ key, fill }) => {
+            const isActive = key === activeBarKey;
+            // Skip active bar here - it will be rendered last
+            if (isActive) return null;
+
+            return (
+              <Bar
+                key={key}
+                dataKey={key}
+                yAxisId={key}
+                fill={fill}
+                onPointerEnter={() => handlePointerEnter(key)}
+                onPointerLeave={() => handlePointerLeave()}
+                isAnimationActive={false}
+              />
+            );
+          })}
+
+          {/* Render active bar last to ensure it's on top */}
+          {activeBarKey &&
+            (() => {
+              const activeBar = allAlertBars.find(
+                (bar) => bar.key === activeBarKey,
+              );
+              if (!activeBar) return null;
+
+              return (
+                <Bar
+                  key={`${activeBar.key}-active`}
+                  dataKey={activeBar.key}
+                  yAxisId={activeBar.key}
+                  fill={activeBar.fill}
+                  stroke={theme.selectedActive}
+                  onPointerEnter={() => handlePointerEnter(activeBar.key)}
+                  onPointerLeave={() => handlePointerLeave()}
+                  isAnimationActive={false}
+                />
+              );
+            })()}
         </BarChart>
       </ResponsiveContainer>
     </ChartInteractiveContainer>

package/src/lib/components/globalhealthbar/components/GlobalHealthBarTooltip.tsx

@@ -1,19 +1,11 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
-import { useEffect, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-} from '@floating-ui/react';
 import { FormattedDateTime, Stack, Text, Wrap, spacing } from '../../../index';
 import { Alert } from '../GlobalHealthBarRecharts.component';
 import { TooltipContentProps } from 'recharts';
 import { zIndex } from '../../../style/theme';
 import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
+import { ChartTooltipPortal } from '../../charttooltip/ChartTooltip';
 
 interface GlobalHealthBarTooltipProps {
   tooltipData: Alert | null;
@@ -53,121 +45,87 @@ export const GlobalHealthBarTooltip = (props: GlobalHealthBarTooltipProps) => {
     endTimestamp = 0,
   } = props;
   const { coordinate } = tooltipProps;
-  const [virtualElement, setVirtualElement] = useState<any>(null);
 
-  const { refs, floatingStyles } = useFloating({
-    elements: {
-      reference: virtualElement,
-    },
-    middleware: [
-      offset(({ placement }) => {
-        // Use larger offset when tooltip is on top
-        // to avoid tooltip over bar
-        return placement.includes('top') ? 20 : 30;
-      }),
-      flip(),
-      shift({ padding: 10 }),
-    ],
-    whileElementsMounted: autoUpdate,
-  });
-
-  // Create virtual element from coordinate
-  useEffect(() => {
-    if (chartContainerRef.current) {
-      const chartRect = chartContainerRef.current.getBoundingClientRect();
+  if (!tooltipData) return null;
 
-      let tooltipX: number;
-      let tooltipY: number;
+  const { description, startsAt, endsAt, severity } = tooltipData;
 
-      if (isKeyboardActive && tooltipData && startTimestamp && endTimestamp) {
-        // Calculate the chart's usable width (excluding margins)
-        const chartUsableWidth =
-          chartRect.width -
-          CHART_CONFIG.MARGINS.left -
-          CHART_CONFIG.MARGINS.right;
+  const tooltipContent = (
+    <Stack direction="vertical" gap="r8">
+      <Wrap>
+        <Text variant="Smaller">Severity</Text>
+        <Text color="textPrimary" variant="Smaller">
+          {severity}
+        </Text>
+      </Wrap>
+      <Wrap>
+        <Text variant="Smaller">Start</Text>
+        <Text color="textPrimary" variant="Smaller">
+          <FormattedDateTime format="date-time" value={new Date(startsAt)} />
+        </Text>
+      </Wrap>
+      <Wrap>
+        <Text variant="Smaller">End</Text>
+        <Text color="textPrimary" variant="Smaller">
+          <FormattedDateTime format="date-time" value={new Date(endsAt)} />
+        </Text>
+      </Wrap>
+      <Wrap>
+        <Text variant="Smaller" style={{ paddingRight: spacing.r32 }}>
+          Description
+        </Text>
+        <Text
+          color="textPrimary"
+          variant="Smaller"
+          style={{ whiteSpace: 'wrap', textAlign: 'justify' }}
+        >
+          {description}
+        </Text>
+      </Wrap>
+    </Stack>
+  );
 
-        // Use the same positioning logic as alert bars
-        const alertCenterX = getTooltipPosition(
-          tooltipData,
-          startTimestamp,
-          endTimestamp,
-          chartUsableWidth,
-        );
+  return (
+    <ChartTooltipPortal
+      coordinate={coordinate}
+      chartContainerRef={chartContainerRef}
+      isVisible={!!tooltipData}
+      customPosition={(chartRect, coordinate) => {
+        if (isKeyboardActive && tooltipData && startTimestamp && endTimestamp) {
+          // Calculate the chart's usable width (excluding margins)
+          const chartUsableWidth =
+            chartRect.width -
+            CHART_CONFIG.MARGINS.left -
+            CHART_CONFIG.MARGINS.right;
 
-        // Position tooltip at the center of the alert's time span
-        // alertCenterX already includes the margin offset, so just add chartRect.left
-        tooltipX = chartRect.left + alertCenterX;
-        tooltipY = chartRect.top + CHART_CONFIG.BAR_SIZE;
-      } else {
-        // For mouse navigation, use the provided coordinate
-        tooltipX = chartRect.left + coordinate?.x;
-        tooltipY = chartRect.top + coordinate?.y;
-      }
+          // Use the same positioning logic as alert bars
+          const alertCenterX = getTooltipPosition(
+            tooltipData,
+            startTimestamp,
+            endTimestamp,
+            chartUsableWidth,
+          );
 
-      setVirtualElement({
-        getBoundingClientRect() {
           return {
-            width: 0,
-            height: 0,
-            x: tooltipX,
-            y: tooltipY,
-            left: tooltipX,
-            top: tooltipY,
-            right: tooltipX,
-            bottom: tooltipY,
+            x: chartRect.left + alertCenterX,
+            y: chartRect.top + CHART_CONFIG.BAR_SIZE,
           };
-        },
-      });
-    }
-  }, [
-    coordinate,
-    chartContainerRef,
-    isKeyboardActive,
-    tooltipData,
-    startTimestamp,
-    endTimestamp,
-  ]);
-
-  if (!tooltipData) return null;
-
-  const { description, startsAt, endsAt, severity } = tooltipData;
-
-  const tooltipContent = (
-    <TooltipContainer ref={refs.setFloating} style={floatingStyles}>
-      <Stack direction="vertical" gap="r8">
-        <Wrap>
-          <Text variant="Smaller">Severity</Text>
-          <Text color="textPrimary" variant="Smaller">
-            {severity}
-          </Text>
-        </Wrap>
-        <Wrap>
-          <Text variant="Smaller">Start</Text>
-          <Text color="textPrimary" variant="Smaller">
-            <FormattedDateTime format="date-time" value={new Date(startsAt)} />
-          </Text>
-        </Wrap>
-        <Wrap>
-          <Text variant="Smaller">End</Text>
-          <Text color="textPrimary" variant="Smaller">
-            <FormattedDateTime format="date-time" value={new Date(endsAt)} />
-          </Text>
-        </Wrap>
-        <Wrap>
-          <Text variant="Smaller" style={{ paddingRight: spacing.r32 }}>
-            Description
-          </Text>
-          <Text
-            color="textPrimary"
-            variant="Smaller"
-            style={{ whiteSpace: 'wrap', textAlign: 'justify' }}
-          >
-            {description}
-          </Text>
-        </Wrap>
-      </Stack>
-    </TooltipContainer>
+        } else {
+          // For mouse navigation, use the provided coordinate
+          return {
+            x: chartRect.left + (coordinate?.x || 0),
+            y: chartRect.top + (coordinate?.y || 0),
+          };
+        }
+      }}
+      containerComponent={TooltipContainer}
+      offset={({ placement }) => {
+        // Use larger offset when tooltip is on top
+        // to avoid tooltip over bar
+        return placement.includes('top') ? 20 : 30;
+      }}
+    >
+      {tooltipContent}
+    </ChartTooltipPortal>
   );
-
-  return createPortal(tooltipContent, document.body);
 };

package/src/lib/components/globalhealthbar/components/HealthBarXAxis.tsx

@@ -47,7 +47,7 @@ const CustomTick = ({
           fontSize={fontSize.smaller}
           fill={theme.textSecondary}
         >
-          {is7DaySpan || isDaySpan ? (
+          {is7DaySpan ? (
             <FormattedDateTime
               format="day-month-abbreviated-hour-minute"
               value={new Date(payload.value)}