ydb-embedded-ui 22.2.0 → 22.4.0

package/src/components/DiskPopup/DiskPopup.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import {ClipboardButton, Flex, Text, Tooltip} from '@gravity-ui/uikit';
+import {isNil} from 'lodash';
+
+import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
+import {DiskTypeLabel} from '../DiskStatus/DiskStatus';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
+
+import i18n from './i18n';
+
+import './DiskPopup.scss';
+
+const b = cn('ydb-disk-popup');
+
+export function DiskPopup({
+    children,
+    combined = false,
+    className,
+}: {
+    children: React.ReactNode;
+    combined?: boolean;
+    className?: string;
+}) {
+    return <div className={b({combined}, className)}>{children}</div>;
+}
+
+export function DiskPopupPanel({
+    children,
+    footer,
+}: {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}) {
+    return (
+        <div className={b('panel')}>
+            <div className={b('body')}>{children}</div>
+            {footer && <div className={b('footer')}>{footer}</div>}
+        </div>
+    );
+}
+
+export function DiskPopupHeader({
+    title,
+    id,
+    type,
+    statuses,
+}: {
+    title: string;
+    id?: string;
+    type?: string;
+    statuses: React.ReactNode;
+}) {
+    return (
+        <React.Fragment>
+            <Flex gap={1} alignItems="center" wrap="wrap">
+                <Text variant="subheader-2">{title}</Text>
+                <Text color="secondary">•</Text>
+                <Text variant="body-2" color="secondary" className={b('id')}>
+                    {id || EMPTY_DATA_PLACEHOLDER}
+                </Text>
+                {id && (
+                    <ClipboardButton
+                        text={id}
+                        size="s"
+                        view="flat-secondary"
+                        aria-label={i18n('action_copy-field', {field: title})}
+                    />
+                )}
+                <DiskTypeLabel type={type} size="xs" />
+            </Flex>
+            <Flex gap={1} wrap="wrap" alignItems="center">
+                {statuses}
+            </Flex>
+        </React.Fragment>
+    );
+}
+
+export function DiskPopupText({
+    value,
+    withLeftTrim = false,
+}: {
+    value?: string | number;
+    withLeftTrim?: boolean;
+}) {
+    const hasValue = !isNil(value) && value !== '';
+    const text = hasValue ? value : EMPTY_DATA_PLACEHOLDER;
+    return (
+        <Tooltip content={text} disabled={!hasValue} className={b('text-tooltip')}>
+            <span
+                className={b('text', {'with-left-trim': withLeftTrim})}
+                tabIndex={hasValue ? 0 : undefined}
+            >
+                {withLeftTrim ? <span>{text}</span> : text}
+            </span>
+        </Tooltip>
+    );
+}
+
+export function DiskPopupLocation({items}: {items: DiskDetailItem[]}) {
+    if (!items.length) {
+        return null;
+    }
+    const locationItems = items.map((item) => {
+        if (['fqdn', 'rack', 'datacenter'].includes(item.id)) {
+            return {...item, content: <DiskPopupText value={item.copyText} />};
+        }
+        if (item.id === 'pdisk-path' && typeof item.copyText === 'string') {
+            return {
+                ...item,
+                content: <DiskPopupText value={item.copyText} withLeftTrim />,
+            };
+        }
+        return item;
+    });
+    return (
+        <div className={b('location')}>
+            <YDBDefinitionList items={locationItems} nameMaxWidth={100} />
+        </div>
+    );
+}

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

@@ -0,0 +1,3 @@
+{
+  "action_copy-field": "Copy {{field}}"
+}

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

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

package/src/components/DiskStatus/DiskStatus.scss

@@ -0,0 +1,59 @@
+@use '../../styles/mixins';
+
+.ydb-disk-status {
+    &__type_hdd {
+        color: var(--g-color-text-utility);
+        background-color: var(--g-color-base-utility-light);
+    }
+
+    &__type_ssd {
+        color: var(--g-color-text-misc);
+        background-color: var(--g-color-base-misc-medium);
+    }
+
+    &__type_nvme {
+        color: var(--g-color-text-info);
+        background-color: var(--g-color-base-info-light);
+    }
+
+    &__capacity-alert {
+        $space-colors: (
+            'green': 'green',
+            'yellow': 'yellow',
+            'red': 'red',
+            'spacecyan': 'cyan',
+            'spacelightyellow': 'light-yellow',
+            'spacelightorange': 'light-orange',
+            'spacepreorange': 'pre-orange',
+            'spaceorange': 'orange',
+            'spaceblack': 'black',
+        );
+
+        @each $color, $token in $space-colors {
+            &_color_#{$color} {
+                @include mixins.capacity-alert-label-colors($token);
+            }
+        }
+    }
+
+    &__label,
+    &__tooltip {
+        cursor: default;
+    }
+
+    &__label_danger-heavy {
+        color: var(--g-color-text-light-primary);
+        background-color: var(--g-color-base-danger-heavy);
+    }
+
+    &__tooltip {
+        display: inline-flex;
+
+        border-radius: var(--g-border-radius-s);
+
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: 2px;
+        }
+    }
+}

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/Graph/GravityGraph.tsx

@@ -21,7 +21,7 @@ import {NonSelectableConnection} from './NonSelectableConnection';
 import {graphColorsConfig} from './colorsConfig';
 import {runTreeLayout} from './runTreeLayout';
 import type {Data} from './types';
-import {parseCustomPropertyValue} from './utils';
+import {getLayoutSignature, parseCustomPropertyValue} from './utils';
 
 import './GravityGraph.scss';
 
@@ -81,6 +81,7 @@ export function GravityGraph<T>({data, onError, theme}: Props<T>) {
     const {graph, start} = useGraph(config);
     const cameraSizeRef = React.useRef({width: 0, height: 0});
     const graphBlockIdsRef = React.useRef<TBlockId[]>([]);
+    const layoutSignatureRef = React.useRef<string>();
     const fitFrameRef = React.useRef<number>();
     const fitGraphToViewport = React.useCallback(() => {
         const {width, height} = graph.cameraService.getCameraState();
@@ -125,11 +126,17 @@ export function GravityGraph<T>({data, onError, theme}: Props<T>) {
             createWorker: createGraphLayoutWorker,
             onResult: ({layout, edges}) => {
                 graphBlockIdsRef.current = layout.map(({id}) => id);
+                // Statistics-only updates keep the layout, so the camera stays where the user put it.
+                const signature = getLayoutSignature(layout, edges);
+                const sameLayout = layoutSignatureRef.current === signature;
+                layoutSignatureRef.current = signature;
                 graph.setEntities({
                     blocks: layout,
                     connections: edges,
                 });
-                scheduleGraphFit();
+                if (!sameLayout) {
+                    scheduleGraphFit();
+                }
             },
             onError,
         });

package/src/components/Graph/utils.ts

@@ -3,7 +3,7 @@ import type {TBlock} from '@gravity-ui/graph';
 import type {ExplainPlanNodeData} from '../../store/reducers/query/types';
 
 import type {AbstractGraphColorsConfig} from './colorsConfig';
-import type {Data, TreeConnection} from './types';
+import type {Data, EdgeResult, TreeConnection} from './types';
 
 const BLOCK_TOP_PADDING = 8;
 const BLOCK_LINE_HEIGHT = 16;
@@ -110,3 +110,11 @@ export function parseCustomPropertyValue<T extends AbstractGraphColorsConfig>(
 
     return parsed as T;
 }
+
+// Identifies the geometry the camera is aimed at: block placement and the edges between them.
+export function getLayoutSignature(blocks: TBlock[], edges: EdgeResult[]) {
+    return JSON.stringify([
+        blocks.map(({id, x, y, width, height}) => [id, x, y, width, height]),
+        edges.map(({sourceBlockId, targetBlockId}) => [sourceBlockId, targetBlockId]),
+    ]);
+}

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;
+    }
+}