ydb-embedded-ui 22.3.0 → 22.4.0

package/src/components/DiskStatus/DiskStatus.tsx

@@ -0,0 +1,149 @@
+import type {IconData, LabelProps} from '@gravity-ui/uikit';
+import {Icon, Label, Tooltip} from '@gravity-ui/uikit';
+import {capitalize} from 'lodash';
+
+import {EFlag, isCapacityAlert} from '../../types/api/enums';
+import {normalizeCapacityAlert} from '../../utils/capacityAlerts';
+import {cn} from '../../utils/cn';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
+import {getDisplaySeverityColor} from '../../utils/disks/helpers';
+import {getFlagIconWithColor} from '../../utils/disks/iconCalculators';
+import {normalizeMediaType} from '../../utils/disks/normalizeMediaType';
+import {calculateSpaceSeverity} from '../../utils/disks/severityCalculators';
+import {EFlagToLabelTheme} from '../EntityStatus/EntityStatus';
+import {getFlagStatusText} from '../VDisk/getFlagStatusText';
+
+import i18n from './i18n';
+
+import './DiskStatus.scss';
+
+const b = cn('ydb-disk-status');
+
+export interface DiskStatusLabelData {
+    value: string;
+    title?: string;
+    theme?: LabelProps['theme'];
+    icon?: IconData;
+    tooltip?: string;
+    dangerHeavy?: boolean;
+}
+
+export type TitledDiskStatusLabelData = Omit<DiskStatusLabelData, 'title' | 'value'> & {
+    title: string;
+    value?: string;
+};
+
+export function DiskStatusLabel({
+    value,
+    theme = 'normal',
+    icon,
+    title,
+    tooltip,
+    dangerHeavy,
+    size = 's',
+    iconSize = 12,
+    className,
+}: (DiskStatusLabelData | TitledDiskStatusLabelData) &
+    Pick<LabelProps, 'size' | 'className'> & {iconSize?: number}) {
+    const label = (
+        <Label
+            size={size}
+            theme={theme}
+            className={b('label', {'danger-heavy': dangerHeavy}, className)}
+            icon={icon ? <Icon data={icon} size={iconSize} /> : undefined}
+            value={title ? value : undefined}
+        >
+            {title ?? value}
+        </Label>
+    );
+    return tooltip ? (
+        <Tooltip content={tooltip} placement="top">
+            <span tabIndex={0} className={b('tooltip')}>
+                {label}
+            </span>
+        </Tooltip>
+    ) : (
+        label
+    );
+}
+
+export function DiskTypeLabel({type, size}: {type?: string} & Pick<LabelProps, 'size'>) {
+    if (!type?.trim()) {
+        return null;
+    }
+    const mediaType = normalizeMediaType(type);
+    const value = formatPDiskType(mediaType) ?? mediaType;
+    let tooltip: string | undefined;
+    switch (mediaType) {
+        case 'HDD':
+            tooltip = i18n('context_hdd');
+            break;
+        case 'SSD':
+            tooltip = i18n('context_ssd');
+            break;
+        case 'NVME':
+            tooltip = i18n('context_nvme');
+            break;
+    }
+    return (
+        <DiskStatusLabel
+            value={value}
+            tooltip={tooltip}
+            size={size}
+            className={b('type', {
+                hdd: mediaType === 'HDD',
+                ssd: mediaType === 'SSD',
+                nvme: mediaType === 'NVME',
+            })}
+        />
+    );
+}
+
+export function DiskCapacityAlertLabel({
+    value,
+    emptyText = i18n('value_no-data'),
+}: {
+    value?: string;
+    emptyText?: string;
+}) {
+    const capacityAlert = normalizeCapacityAlert(value);
+    if (!capacityAlert) {
+        return <DiskStatusLabel size="xs" value={emptyText} theme="unknown" />;
+    }
+    const color = isCapacityAlert(capacityAlert)
+        ? getDisplaySeverityColor(
+              calculateSpaceSeverity({CapacityAlert: capacityAlert}),
+          ).toLowerCase()
+        : undefined;
+    return (
+        <DiskStatusLabel
+            size="xs"
+            value={capitalize(capacityAlert.replaceAll('_', ' '))}
+            className={b('capacity-alert', {color})}
+        />
+    );
+}
+
+export function DiskFlagLabel({
+    flag,
+    title,
+    icon,
+    emptyText = i18n('value_no-data'),
+}: {
+    flag?: EFlag;
+    title?: string;
+    icon?: IconData;
+    emptyText?: string;
+}) {
+    const resolvedFlag = flag || EFlag.Grey;
+    return (
+        <DiskStatusLabel
+            value={resolvedFlag === EFlag.Grey ? emptyText : getFlagStatusText(resolvedFlag)}
+            title={title}
+            theme={EFlagToLabelTheme[resolvedFlag] ?? 'normal'}
+            icon={icon ?? getFlagIconWithColor(resolvedFlag)?.icon}
+            dangerHeavy={resolvedFlag === EFlag.Red}
+            size="xs"
+        />
+    );
+}

package/src/components/DiskStatus/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "value_no-data": "Not available",
+  "context_hdd": "Hard disk drive",
+  "context_ssd": "Solid-state drive connected over SATA or SAS interface",
+  "context_nvme": "Solid-state drive connected over NVMe interface"
+}

package/src/components/DiskStatus/i18n/index.ts

@@ -0,0 +1,5 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+export default registerKeysets('ydb-disk-status', {en});

package/src/components/EntityStatus/EntityStatus.tsx

@@ -14,7 +14,7 @@ import './EntityStatus.scss';
 
 const b = cn('ydb-entity-status');
 
-const EFlagToLabelTheme: Record<EFlag, LabelProps['theme']> = {
+export const EFlagToLabelTheme: Record<EFlag, LabelProps['theme']> = {
     [EFlag.Red]: 'danger',
     [EFlag.Blue]: 'success',
     [EFlag.Green]: 'success',

package/src/components/EvictVDiskButton/i18n/en.json

@@ -3,7 +3,7 @@
   "action_evict-short": "Evict",
   "action_force-evict": "Evict anyway",
   "title_evict-dialog": "Evict VDisk?",
-  "confirm_evict": "The VDisk will be evicted from the PDisk. All data will be moved to another PDisk.",
+  "confirm_evict": "The VDisk will be evicted from the PDisk. This VDisk will be replaced by a new one in the group. Data will be replicated to the new disk. The old VDisk will serve as a donor until replication is complete, and then it will be removed.",
   "alert_evict": "This operation cannot be cancelled.",
   "alert_not-allowed": "You don't have enough rights to evict VDisk",
   "alert_donor-mode-impossible": "Evicting a donor VDisk is not possible"

package/src/components/HoverPopup/HoverPopup.tsx

@@ -8,26 +8,38 @@ import {YDB_POPOVER_CLASS_NAME} from '../../utils/constants';
 import {useEventHandler} from '../../utils/hooks/useEventHandler';
 
 import {getPopupScrollContainer} from './getPopupScrollContainer';
+import {usePopupPriority} from './usePopupPriority';
 
 const DEBOUNCE_TIMEOUT = 100;
 
-function useVisibleAnchor(anchorElement: HTMLElement | null, open: boolean) {
+function useVisibleAnchor(
+    anchorElement: HTMLElement | null,
+    open: boolean,
+    onHidden: VoidFunction,
+) {
     const [visibleAnchor, setVisibleAnchor] = React.useState<HTMLElement | null>(null);
+    // Mouse events can arrive before React renders the observer's next visibility state.
+    const visibleAnchorRef = React.useRef<HTMLElement | null>(null);
 
     React.useLayoutEffect(() => {
         setVisibleAnchor(null);
+        visibleAnchorRef.current = null;
         if (!open || !anchorElement) {
             return undefined;
         }
 
         const observer = new IntersectionObserver(([entry]) => {
-            setVisibleAnchor(entry.isIntersecting ? anchorElement : null);
+            visibleAnchorRef.current = entry.isIntersecting ? anchorElement : null;
+            setVisibleAnchor(visibleAnchorRef.current);
+            if (!entry.isIntersecting) {
+                onHidden();
+            }
         });
         observer.observe(anchorElement);
         return () => observer.disconnect();
-    }, [anchorElement, open]);
+    }, [anchorElement, open, onHidden]);
 
-    return anchorElement !== null && visibleAnchor === anchorElement;
+    return [anchorElement !== null && visibleAnchor === anchorElement, visibleAnchorRef] as const;
 }
 
 type HoverPopupProps = {
@@ -37,6 +49,7 @@ type HoverPopupProps = {
     anchorRef?: React.RefObject<HTMLElement>;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    onClosePopup?: VoidFunction;
     delayOpen?: number;
     delayClose?: number;
     contentClassName?: string;
@@ -50,6 +63,7 @@ export const HoverPopup = ({
     anchorRef,
     onShowPopup,
     onHidePopup,
+    onClosePopup,
     placement = ['top', 'bottom', 'left', 'right'],
     contentClassName,
     delayClose = DEBOUNCE_TIMEOUT,
@@ -60,6 +74,8 @@ export const HoverPopup = ({
     const [isFocused, setIsFocused] = React.useState(false);
 
     const anchor = React.useRef<HTMLSpanElement>(null);
+    const {activate, zIndex} = usePopupPriority();
+    const bringToFront = useEventHandler(() => activate(anchorRef?.current || anchor.current));
 
     const reportedOpenRef = React.useRef(false);
 
@@ -113,9 +129,33 @@ export const HoverPopup = ({
         setIsPopupContentHovered(false);
         setIsFocused(false);
         reportOpen(false, true);
-    }, [debouncedHandleHidePopup, debouncedHandleShowPopup, reportOpen]);
+        onClosePopup?.();
+    }, [debouncedHandleHidePopup, debouncedHandleShowPopup, onClosePopup, reportOpen]);
 
-    const onMouseEnter = () => {
+    const hideClippedPopup = useEventHandler(() => {
+        debouncedHandleShowPopup.cancel();
+        setIsPopupContentHovered(false);
+        setIsFocused(false);
+        debouncedHandleHidePopup();
+    });
+
+    const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
+    const open = Boolean(internalOpen || showPopup);
+
+    const anchorElement = anchorRef?.current || anchor.current;
+    // Release only this popup's hover source; a hovered peer can keep the pair open.
+    const [isAnchorVisible, visibleAnchorRef] = useVisibleAnchor(
+        anchorElement,
+        open,
+        hideClippedPopup,
+    );
+    const container = getPopupScrollContainer(anchorElement);
+
+    const onMouseEnter = (event: React.MouseEvent<HTMLSpanElement>) => {
+        if (event.buttons !== 0) {
+            return;
+        }
+        bringToFront();
         debouncedHandleHidePopup.cancel();
         debouncedHandleShowPopup();
     };
@@ -125,11 +165,21 @@ export const HoverPopup = ({
         debouncedHandleHidePopup();
     };
 
-    const onPopupMouseEnter = React.useCallback(() => {
-        debouncedHandleHidePopup.cancel();
-        setIsPopupContentHovered(true);
-        reportOpen(true);
-    }, [reportOpen, debouncedHandleHidePopup]);
+    const onPopupMouseEnter = React.useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+            // An exiting popup can still receive events during its close animation.
+            if (!open || visibleAnchorRef.current !== anchorElement) {
+                return;
+            }
+            if (event.buttons === 0) {
+                bringToFront();
+            }
+            debouncedHandleHidePopup.cancel();
+            setIsPopupContentHovered(true);
+            reportOpen(true);
+        },
+        [bringToFront, reportOpen, debouncedHandleHidePopup, open, visibleAnchorRef, anchorElement],
+    );
 
     const onPopupMouseLeave = React.useCallback(() => {
         setIsPopupContentHovered(false);
@@ -137,9 +187,13 @@ export const HoverPopup = ({
     }, [debouncedHandleHidePopup]);
 
     const onPopupContextMenu = React.useCallback(() => {
+        if (!open || visibleAnchorRef.current !== anchorElement) {
+            return;
+        }
+        bringToFront();
         setIsFocused(true);
         reportOpen(true);
-    }, [reportOpen]);
+    }, [bringToFront, reportOpen, open, visibleAnchorRef, anchorElement]);
 
     const onPopupBlur = React.useCallback(() => {
         setIsFocused(false);
@@ -149,14 +203,6 @@ export const HoverPopup = ({
         closePopup();
     }, [closePopup]);
 
-    const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
-    const open = Boolean(internalOpen || showPopup);
-
-    const anchorElement = anchorRef?.current || anchor.current;
-    // Clipping a paired disk must not clear the shared hover state via onHidePopup.
-    const isAnchorVisible = useVisibleAnchor(anchorElement, open);
-    const container = getPopupScrollContainer(anchorElement);
-
     return (
         <React.Fragment>
             <span ref={anchor} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
@@ -165,6 +211,7 @@ export const HoverPopup = ({
             {anchorElement ? (
                 <Popup
                     container={container}
+                    zIndex={zIndex}
                     // Keep portal typography when the page uses a different font.
                     floatingStyles={{fontFamily: 'var(--g-text-body-font-family)'}}
                     anchorElement={anchorElement}

package/src/components/HoverPopup/usePopupPriority.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+
+// Only the previously active popup needs updating when another one is entered.
+const activePopups = new WeakMap<Document, VoidFunction>();
+
+export function usePopupPriority() {
+    const [active, setActive] = React.useState(false);
+    const documentRef = React.useRef<Document>();
+    const deactivate = React.useCallback(() => setActive(false), []);
+    const activate = React.useCallback(
+        (element: HTMLElement | null) => {
+            if (!element) {
+                return;
+            }
+            const doc = element.ownerDocument;
+            const previous = activePopups.get(doc);
+            if (previous !== deactivate) {
+                previous?.();
+                activePopups.set(doc, deactivate);
+            }
+            documentRef.current = doc;
+            setActive(true);
+        },
+        [deactivate],
+    );
+
+    React.useEffect(
+        () => () => {
+            const doc = documentRef.current;
+            if (doc && activePopups.get(doc) === deactivate) {
+                activePopups.delete(doc);
+            }
+        },
+        [deactivate],
+    );
+
+    // Keep tooltips, menus and modal dialogs (Gravity UI's default 1000) above cards.
+    return {activate, zIndex: active ? 999 : 998};
+}

package/src/components/PDiskInfo/PDiskLogSize.scss

@@ -0,0 +1,12 @@
+.ydb-pdisk-log-size {
+    width: 100%;
+
+    white-space: nowrap;
+
+    &__progress {
+        flex: 0 0 auto;
+
+        width: var(--ydb-pdisk-log-size-progress-width, 100px);
+        margin: 0;
+    }
+}

package/src/components/PDiskInfo/PDiskLogSize.tsx

@@ -0,0 +1,37 @@
+import {Flex, Progress} from '@gravity-ui/uikit';
+
+import {cn} from '../../utils/cn';
+import {formatStorageMetricPair} from '../../utils/storageMetrics';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+
+import {pDiskInfoKeyset as i18n} from './i18n';
+
+import './PDiskLogSize.scss';
+
+const b = cn('ydb-pdisk-log-size');
+
+export function PDiskLogSize({used, total}: {used?: string; total?: string}) {
+    const usedSize = parseOptionalNonNegativeNumber(used);
+    const totalSize = parseOptionalNonNegativeNumber(total);
+    const percentage =
+        usedSize !== undefined && totalSize !== undefined && totalSize > 0
+            ? Math.min(100, (usedSize / totalSize) * 100)
+            : undefined;
+
+    if (percentage === undefined) {
+        return formatStorageMetricPair(usedSize, totalSize, 2);
+    }
+
+    return (
+        <Flex gap={1} alignItems="center" className={b()}>
+            <Progress
+                className={b('progress')}
+                value={percentage}
+                theme="success"
+                size="s"
+                aria-label={i18n('log-size')}
+            />
+            <span>{formatStorageMetricPair(usedSize, totalSize, 2)}</span>
+        </Flex>
+    );
+}

package/src/components/PDiskInfo/getPDiskDetails.tsx

@@ -0,0 +1,37 @@
+import {formatBytes} from '../../utils/bytesParsers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
+import type {PreparedPDisk} from '../../utils/disks/types';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import {DiskFlagLabel} from '../DiskStatus/DiskStatus';
+
+import {PDiskLogSize} from './PDiskLogSize';
+import {pDiskInfoKeyset as i18n} from './i18n';
+
+export function getPDiskRuntimeItems(data: PreparedPDisk): DiskDetailItem[] {
+    return [
+        {id: 'device', name: i18n('device'), content: <DiskFlagLabel flag={data.Device} />},
+        {id: 'realtime', name: i18n('realtime'), content: <DiskFlagLabel flag={data.Realtime} />},
+    ];
+}
+
+export function getPDiskLogItems(data: PreparedPDisk): DiskDetailItem[] {
+    const systemSize = parseOptionalNonNegativeNumber(data.SystemSize);
+    return [
+        {
+            id: 'log-size',
+            name: i18n('log-size'),
+            content: <PDiskLogSize used={data.LogUsedSize} total={data.LogTotalSize} />,
+            note: i18n('context_log-size'),
+        },
+        {
+            id: 'system-size',
+            name: i18n('system-size'),
+            content:
+                systemSize === undefined
+                    ? EMPTY_DATA_PLACEHOLDER
+                    : formatBytes({value: systemSize, fixedDecimalPlaces: 2}),
+            note: i18n('context_system-size'),
+        },
+    ];
+}

package/src/components/PDiskInfo/i18n/en.json

@@ -4,23 +4,79 @@
   "guid": "GUID",
   "serial-number": "Serial Number",
   "shared-with-os": "SharedWithOs",
-
   "drive-status": "Drive Status",
   "state": "State",
   "device": "Device",
   "realtime": "Realtime",
-
-  "value_no-data": "No data",
-
+  "value_no-data": "Not Available",
   "space": "Space",
   "usage": "Usage",
   "slots": "Slots",
   "log-size": "Log Size",
   "system-size": "System Size",
-
   "links": "Links",
-
   "developer-ui": "Developer UI",
-
-  "yes": "Yes"
+  "yes": "Yes",
+  "context_slots": "The number of VDisks residing on this PDisk",
+  "context_log-size": "The size of the Common Log shared by the residing VDisks",
+  "context_system-size": "The size reserved for the PDisk system components. Includes SysLog",
+  "value_unknown": "Unknown",
+  "value_ok": "Ok",
+  "value_initial": "Initial",
+  "value_initial-format-read": "Initial Format Read",
+  "value_initial-sys-log-read": "Initial Sys Log Read",
+  "value_initial-common-log-read": "Initial Common Log Read",
+  "value_open-file-error": "Open File Error",
+  "value_device-io-error": "Device Io Error",
+  "value_stopped": "Stopped",
+  "value_initial-format-read-error": "Initial Format Read Error",
+  "value_initial-sys-log-read-error": "Initial Sys Log Read Error",
+  "value_initial-sys-log-parse-error": "Initial Sys Log Parse Error",
+  "value_common-logger-init-error": "Common Logger Init Error",
+  "value_initial-common-log-read-error": "Initial Common Log Read Error",
+  "value_initial-common-log-parse-error": "Initial Common Log Parse Error",
+  "value_chunk-quota-error": "Chunk Quota Error",
+  "value_active": "Active",
+  "value_inactive": "Inactive",
+  "value_to-be-removed": "To be removed",
+  "value_faulty": "Faulty",
+  "value_broken": "Broken",
+  "value_decommit-none": "No decommission",
+  "value_decommit-pending": "Decommission pending",
+  "value_decommit-rejected": "Decommission rejected",
+  "value_decommit-imminent": "Decommission imminent",
+  "label_maintenance": "Maintenance",
+  "value_maintenance-none": "None",
+  "value_maintenance-unset": "Unset",
+  "value_maintenance-no-new-vdisks": "No new VDisks",
+  "value_maintenance-long-term": "Long term",
+  "context_unknown": "Value of status is unknown (default)",
+  "context_state-normal": "The PDisk is operating normally",
+  "context_state-initial": "The PDisk actor is starting and has not yet begun reading disk metadata",
+  "context_initial-format-read": "The PDisk is reading and validating its format record",
+  "context_initial-sys-log-read": "The PDisk is reading its system log during startup",
+  "context_initial-common-log-read": "The PDisk is reading VDisk common log during startup",
+  "context_open-file-error": "The PDisk could not open its backing device",
+  "context_device-io-error": "The PDisk encountered a fatal physical device I/O error",
+  "context_stopped": "The PDisk was explicitly stopped by a control request",
+  "context_initial-format-read-error": "The format record could not be read or validated",
+  "context_initial-sys-log-read-error": "The system log could not be read",
+  "context_initial-sys-log-parse-error": "The system log was read but could not be parsed",
+  "context_common-logger-init-error": "The PDisk failed to initialize the VDisk common log writer",
+  "context_initial-common-log-read-error": "VDisk common log could not be read",
+  "context_initial-common-log-parse-error": "VDisk common log was read but could not be parsed",
+  "context_chunk-quota-error": "The PDisk failed to calculate or initialize chunk quotas",
+  "context_active": "Working as expected",
+  "context_inactive": "New groups are not created over this drive, but existing ones continue to work as expected",
+  "context_to-be-removed": "Same as INACTIVE, but drive is counted in fault model as not working",
+  "context_faulty": "Drive is expected to become BROKEN soon, new groups are not created, old groups are asynchronously moved out from this drive",
+  "context_broken": "Drive is not working, groups are automatically moved out of this drive upon reception of this status",
+  "context_decommit-none": "The PDisk is not being decommissioned",
+  "context_decommit-pending": "Decommissioning is planned; allocation of new VDisks is blocked, existing VDisks are not moved",
+  "context_decommit-rejected": "The PDisk is operational but cannot receive VDisks moved from the other decommitted PDisks",
+  "context_decommit-imminent": "Active phase of decommissioning, existing VDisks are moved from the PDisk asynchronously",
+  "context_maintenance-none": "There is no active maintenance request for this PDisk",
+  "context_maintenance-unset": "No maintenance status has been explicitly provided",
+  "context_maintenance-no-new-vdisks": "Allocation of new VDisks is blocked, existing VDisks are not moved",
+  "context_maintenance-long-term": "Device is requested for a long-term maintenance, existing VDisks are moved from the PDisk asynchronously"
 }