ydb-embedded-ui 20.2.0 → 20.3.0

package/src/components/VDiskPopup/VDiskPopup.tsx

@@ -0,0 +1,549 @@
+import React from 'react';
+
+import {Wrench} from '@gravity-ui/icons';
+import {Divider, Flex} from '@gravity-ui/uikit';
+import {isNil} from 'lodash';
+
+import {useVDiskPagePath} from '../../routes';
+import {api} from '../../store/reducers/api';
+import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
+import {selectNodesMap} from '../../store/reducers/nodesList';
+import {EFlag} from '../../types/api/enums';
+import type {TVDiskID} from '../../types/api/vdisk';
+import {EVDiskState} from '../../types/api/vdisk';
+import {cn} from '../../utils/cn';
+import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {formatDurationSeconds, parseVdiskId} from '../../utils/dataFormatters/dataFormatters';
+import {createVDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
+import {getStateSeverity} from '../../utils/disks/calculateVDiskSeverity';
+import {
+    DISK_COLOR_STATE_TO_NUMERIC_SEVERITY,
+    NUMERIC_SEVERITY_TO_LABEL_VIEW,
+    VDISK_LABEL_CONFIG,
+} from '../../utils/disks/constants';
+import {isFullVDiskData} from '../../utils/disks/helpers';
+import type {PreparedVDisk, UnavailableDonor} from '../../utils/disks/types';
+import {useTypedDispatch, useTypedSelector} from '../../utils/hooks';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {useIsViewerUser} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
+import {bytesToGB, bytesToSpeed} from '../../utils/utils';
+import {
+    getVDiskCapacityInfoItems,
+    toDefinitionListItems,
+} from '../DiskCapacityInfo/DiskCapacityInfo';
+import {EvictVDiskButton, isAllVdiskParamsDefined} from '../EvictVDiskButton/EvictVDiskButton';
+import {InternalLink} from '../InternalLink';
+import {InternalLinkButton} from '../InternalLinkButton';
+import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+import {
+    buildPDiskFooter,
+    preparePDiskData,
+    preparePDiskHeaderLabels,
+} from '../PDiskPopup/PDiskPopup';
+import {StatusIcon} from '../StatusIcon/StatusIcon';
+import type {
+    YDBDefinitionListHeaderLabel,
+    YDBDefinitionListItem,
+} from '../YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
+
+import {vDiskPopupKeyset} from './i18n';
+
+import './VDiskPopup.scss';
+
+const b = cn('vdisk-storage-popup');
+
+const prepareUnavailableVDiskData = (data: UnavailableDonor) => {
+    const {NodeId, PDiskId, VSlotId, StoragePoolName} = data;
+
+    const vdiskData: YDBDefinitionListItem[] = [];
+
+    if (StoragePoolName) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_storage-pool'),
+            content: StoragePoolName,
+            copyText: StoragePoolName,
+        });
+    }
+
+    vdiskData.push(
+        {
+            name: vDiskPopupKeyset('label_node-id'),
+            content: NodeId ?? EMPTY_DATA_PLACEHOLDER,
+            copyText: NodeId,
+        },
+        {
+            name: vDiskPopupKeyset('label_pdisk-id'),
+            content: PDiskId ?? EMPTY_DATA_PLACEHOLDER,
+            copyText: PDiskId,
+        },
+        {
+            name: vDiskPopupKeyset('label_vslot-id'),
+            content: VSlotId ?? EMPTY_DATA_PLACEHOLDER,
+            copyText: VSlotId,
+        },
+    );
+
+    return vdiskData;
+};
+
+const buildUnavailableVDiskFooter = (
+    data: UnavailableDonor,
+    withDeveloperUILink?: boolean,
+): React.ReactNode | null => {
+    const {NodeId, PDiskId, VSlotId} = data;
+
+    if (!withDeveloperUILink || isNil(NodeId) || isNil(PDiskId) || isNil(VSlotId)) {
+        return null;
+    }
+
+    const vDiskInternalViewerPath = createVDiskDeveloperUILink({
+        nodeId: NodeId,
+        pDiskId: PDiskId,
+        vDiskSlotId: VSlotId,
+    });
+
+    return (
+        <div className={b('links')}>
+            <LinkWithIcon
+                title={vDiskPopupKeyset('action_open-in-developer-ui')}
+                url={vDiskInternalViewerPath}
+                icon={Wrench}
+                hideEndIcon
+            />
+        </div>
+    );
+};
+
+interface VDiskLinkProps {
+    nodeId?: string | number;
+    stringifiedId?: string;
+    getVDiskLinkFn?: (data: {
+        nodeId: string | number | undefined;
+        vDiskId: string | undefined;
+    }) => string | undefined;
+}
+
+const VDiskLink = ({nodeId, stringifiedId, getVDiskLinkFn}: VDiskLinkProps) => {
+    if (isNil(stringifiedId)) {
+        return <span>{EMPTY_DATA_PLACEHOLDER}</span>;
+    }
+
+    const path = getVDiskLinkFn?.({nodeId, vDiskId: stringifiedId});
+
+    return path ? (
+        <InternalLink to={path}>
+            {vDiskPopupKeyset('label_vdisk')} {stringifiedId}
+        </InternalLink>
+    ) : (
+        <span>{stringifiedId}</span>
+    );
+};
+
+// eslint-disable-next-line complexity
+export const prepareVDiskData = (
+    data: PreparedVDisk,
+    getVDiskLinkFn:
+        | ((data: {
+              nodeId: string | number | undefined;
+              vDiskId: string | undefined;
+          }) => string | undefined)
+        | undefined,
+    capacityMetricsEnabled = false,
+) => {
+    const {
+        VDiskState,
+        SatisfactionRank,
+        DiskSpace,
+        FrontQueues,
+        Replicated,
+        ReplicationProgress,
+        ReplicationSecondsRemaining,
+        UnsyncedVDisks,
+        AllocatedSize,
+        AvailableSize,
+        ReadThroughput,
+        WriteThroughput,
+        StoragePoolName,
+        Donors,
+        DonorMode,
+        Recipient,
+    } = data;
+
+    const vdiskData: YDBDefinitionListItem[] = [];
+
+    if (StoragePoolName) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_storage-pool'),
+            content: StoragePoolName,
+            copyText: StoragePoolName,
+        });
+    }
+
+    // Show donors if they exist
+    if (Donors?.length) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_donor'),
+            content: (
+                <Flex direction="column" gap={1}>
+                    {Donors.map((donor) => (
+                        <VDiskLink
+                            key={donor.StringifiedId}
+                            nodeId={donor.NodeId}
+                            stringifiedId={donor.StringifiedId}
+                            getVDiskLinkFn={getVDiskLinkFn}
+                        />
+                    ))}
+                </Flex>
+            ),
+        });
+    }
+
+    if (DonorMode && Recipient) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_recipient'),
+            content: (
+                <VDiskLink
+                    nodeId={Recipient.NodeId}
+                    stringifiedId={Recipient.StringifiedId}
+                    getVDiskLinkFn={getVDiskLinkFn}
+                />
+            ),
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.FreshRank?.Flag !== EFlag.Green) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_fresh'),
+            content: SatisfactionRank.FreshRank?.Flag,
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.LevelRank?.Flag !== EFlag.Green) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_level'),
+            content: SatisfactionRank.LevelRank?.Flag,
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.FreshRank?.RankPercent) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_fresh'),
+            content: SatisfactionRank.FreshRank.RankPercent,
+        });
+    }
+
+    if (SatisfactionRank && SatisfactionRank.LevelRank?.RankPercent) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_level'),
+            content: SatisfactionRank.LevelRank.RankPercent,
+        });
+    }
+
+    if (capacityMetricsEnabled) {
+        vdiskData.push(
+            ...toDefinitionListItems(getVDiskCapacityInfoItems(data, {withRawUsage: false})),
+        );
+    } else if (DiskSpace) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_space'),
+            content: <StatusIcon mode="icons" status={DiskSpace} />,
+        });
+    }
+
+    if (FrontQueues) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_front-queues'),
+            content: <StatusIcon mode="icons" status={FrontQueues} />,
+        });
+    }
+
+    if (Replicated === false && VDiskState === EVDiskState.OK && !DonorMode) {
+        vdiskData.push({name: vDiskPopupKeyset('label_replicated'), content: 'NO'});
+
+        // Only show replication progress and time remaining when disk is not replicated and state is OK
+        if (!isNil(ReplicationProgress) && !isNaN(Number(ReplicationProgress))) {
+            const progressPercent = Math.round(ReplicationProgress * 100);
+            vdiskData.push({
+                name: vDiskPopupKeyset('label_progress'),
+                content: `${progressPercent}%`,
+            });
+        }
+
+        if (!isNil(ReplicationSecondsRemaining)) {
+            const timeRemaining = formatDurationSeconds(ReplicationSecondsRemaining);
+            if (timeRemaining) {
+                vdiskData.push({
+                    name: vDiskPopupKeyset('label_remaining'),
+                    content: timeRemaining,
+                });
+            }
+        }
+    }
+
+    if (UnsyncedVDisks) {
+        vdiskData.push({name: vDiskPopupKeyset('label_unsync-vdisks'), content: UnsyncedVDisks});
+    }
+
+    if (!capacityMetricsEnabled && Number(AllocatedSize)) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_allocated'),
+            content: bytesToGB(AllocatedSize),
+        });
+    }
+
+    if (!capacityMetricsEnabled && Number(AvailableSize)) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_available'),
+            content: bytesToGB(AvailableSize),
+        });
+    }
+
+    if (Number(ReadThroughput)) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_read'),
+            content: bytesToSpeed(ReadThroughput),
+        });
+    }
+
+    if (Number(WriteThroughput)) {
+        vdiskData.push({
+            name: vDiskPopupKeyset('label_write'),
+            content: bytesToSpeed(WriteThroughput),
+        });
+    }
+
+    return vdiskData;
+};
+
+/**
+ * Resolve VDiskId from PreparedVDisk data.
+ * Prefers the structured VDiskId when all fields are present,
+ * falls back to parsing StringifiedId (e.g. "123-1-0-0-0").
+ */
+const resolveVDiskId = (data: PreparedVDisk): Required<TVDiskID> | undefined => {
+    if (isAllVdiskParamsDefined(data.VDiskId)) {
+        return data.VDiskId;
+    }
+    const parsed = parseVdiskId(data.StringifiedId);
+    return isAllVdiskParamsDefined(parsed) ? parsed : undefined;
+};
+
+const buildVDiskFooter = (
+    data: PreparedVDisk,
+    withDeveloperUILink?: boolean,
+    getVDiskLinkFn?: (data: {
+        nodeId: string | number;
+        vDiskId: string | undefined;
+    }) => string | undefined,
+    onSuccess?: () => void,
+): React.ReactNode | null => {
+    const {NodeId, PDiskId, VDiskSlotId, StringifiedId, DonorMode} = data;
+
+    const vDiskInternalViewerPath =
+        withDeveloperUILink && !isNil(VDiskSlotId) && !isNil(NodeId) && !isNil(PDiskId)
+            ? createVDiskDeveloperUILink({
+                  nodeId: NodeId,
+                  pDiskId: PDiskId,
+                  vDiskSlotId: VDiskSlotId,
+              })
+            : undefined;
+
+    const vDiskPagePath =
+        withDeveloperUILink && !isNil(NodeId) && !isNil(StringifiedId)
+            ? getVDiskLinkFn?.({
+                  nodeId: NodeId,
+                  vDiskId: StringifiedId,
+              })
+            : undefined;
+
+    const hasLinks = vDiskPagePath || vDiskInternalViewerPath;
+
+    const resolvedVDiskId = resolveVDiskId(data);
+
+    if (!hasLinks && !resolvedVDiskId) {
+        return null;
+    }
+
+    return (
+        <Flex direction="column" gap={5}>
+            {vDiskInternalViewerPath && (
+                <LinkWithIcon
+                    title={vDiskPopupKeyset('action_open-in-developer-ui')}
+                    url={vDiskInternalViewerPath}
+                    icon={Wrench}
+                    hideEndIcon
+                />
+            )}
+            {(vDiskPagePath || resolvedVDiskId) && (
+                <Flex wrap="wrap" gap={2}>
+                    {vDiskPagePath && (
+                        <InternalLinkButton
+                            href={vDiskPagePath}
+                            view="action"
+                            size="m"
+                            className={BRAND_BUTTON_CLASS}
+                        >
+                            {vDiskPopupKeyset('action_go-to-vdisk')}
+                        </InternalLinkButton>
+                    )}
+                    {resolvedVDiskId && (
+                        <EvictVDiskButton
+                            vDiskId={resolvedVDiskId}
+                            donorMode={DonorMode}
+                            onSuccess={onSuccess}
+                        />
+                    )}
+                </Flex>
+            )}
+        </Flex>
+    );
+};
+
+const prepareHeaderLabels = (data: PreparedVDisk): YDBDefinitionListHeaderLabel[] => {
+    const labels: YDBDefinitionListHeaderLabel[] = [];
+
+    const {VDiskState, DonorMode, Severity} = data;
+
+    const isReplicatingColor = Severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue;
+
+    if (DonorMode) {
+        const donorConfig = VDISK_LABEL_CONFIG.donor;
+
+        labels.push({
+            id: 'donor',
+            value: vDiskPopupKeyset('label_donor'),
+            theme: donorConfig.theme,
+            icon: donorConfig.icon,
+        });
+    } else if (isReplicatingColor) {
+        const replicaConfig = VDISK_LABEL_CONFIG.replica;
+
+        labels.push({
+            id: 'replication',
+            value: vDiskPopupKeyset('label_replication'),
+            theme: replicaConfig.theme,
+            icon: replicaConfig.icon,
+        });
+    }
+
+    const severity = getStateSeverity(VDiskState);
+
+    const {theme: stateTheme, icon: stateIcon} = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+
+    const value = VDiskState ?? vDiskPopupKeyset('context_not-available');
+
+    labels.push({
+        id: 'state',
+        value,
+        theme: stateTheme,
+        icon: stateIcon,
+    });
+
+    return labels;
+};
+
+interface VDiskPopupProps {
+    data: PreparedVDisk | UnavailableDonor;
+    onClose?: VoidFunction;
+}
+
+export const VDiskPopup = ({data, onClose}: VDiskPopupProps) => {
+    const dispatch = useTypedDispatch();
+    const isFullData = isFullVDiskData(data);
+    const isViewerUser = useIsViewerUser();
+    const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
+
+    const hasDeveloperUi = useHasDeveloperUi();
+    const getVDiskLink = useVDiskPagePath();
+
+    const database = useDatabaseFromQuery();
+
+    const vdiskInfo = React.useMemo(
+        () =>
+            isFullData
+                ? prepareVDiskData(data, getVDiskLink, capacityMetricsEnabled)
+                : prepareUnavailableVDiskData(data),
+        [data, isFullData, getVDiskLink, capacityMetricsEnabled],
+    );
+
+    const handleAfterEvictVDisk = React.useCallback(() => {
+        // Use StringifiedId directly — it matches the cache key used by getVDiskData
+        const vDiskId = isFullData ? data.StringifiedId : undefined;
+        dispatch(
+            api.util.invalidateTags([
+                'TableData',
+                'StorageData',
+                {
+                    type: 'VDiskData',
+                    id: vDiskId,
+                },
+            ]),
+        );
+        onClose?.();
+    }, [dispatch, data, isFullData, onClose]);
+
+    const vdiskHeaderLabels: YDBDefinitionListHeaderLabel[] = React.useMemo(
+        () => (isFullData ? prepareHeaderLabels(data) : []),
+        [data, isFullData],
+    );
+
+    const vdiskFooter = React.useMemo(
+        () =>
+            isFullData
+                ? buildVDiskFooter(data, hasDeveloperUi, getVDiskLink, handleAfterEvictVDisk)
+                : buildUnavailableVDiskFooter(data, hasDeveloperUi),
+        [data, isFullData, hasDeveloperUi, getVDiskLink, handleAfterEvictVDisk],
+    );
+
+    const nodesMap = useTypedSelector((state) => selectNodesMap(state, database));
+    const nodeData = isNil(data.NodeId) ? undefined : nodesMap?.get(data.NodeId);
+    const pdiskInfo = React.useMemo(
+        () =>
+            isFullData &&
+            data.PDisk &&
+            preparePDiskData(data.PDisk, nodeData, capacityMetricsEnabled),
+        [data, nodeData, isFullData, capacityMetricsEnabled],
+    );
+    const pdiskHeaderLabels = React.useMemo(
+        () => (isFullData && data.PDisk ? preparePDiskHeaderLabels(data.PDisk) : []),
+        [data, isFullData],
+    );
+
+    const pdiskFooter = React.useMemo(
+        () => (isFullData && data.PDisk ? buildPDiskFooter(data.PDisk, hasDeveloperUi) : null),
+        [data, isFullData, hasDeveloperUi],
+    );
+
+    const vdiskId = isFullData ? data.StringifiedId : undefined;
+    const pdiskId = isFullData ? data.PDisk?.StringifiedId : undefined;
+    const nameMaxWidth = isFullData && capacityMetricsEnabled ? 220 : 100;
+
+    return (
+        <div className={b()}>
+            <YDBDefinitionList
+                compact
+                title="VDisk"
+                titleSuffix={{title: vdiskId ?? EMPTY_DATA_PLACEHOLDER, copyText: vdiskId}}
+                items={vdiskInfo}
+                headerLabels={vdiskHeaderLabels}
+                nameMaxWidth={nameMaxWidth}
+                footer={vdiskFooter}
+            />
+            {pdiskInfo && isViewerUser && (
+                <React.Fragment>
+                    <Divider className={b('custom-divider')} />
+                    <YDBDefinitionList
+                        compact
+                        title="PDisk"
+                        titleSuffix={{title: pdiskId ?? EMPTY_DATA_PLACEHOLDER, copyText: pdiskId}}
+                        items={pdiskInfo}
+                        headerLabels={pdiskHeaderLabels}
+                        footer={pdiskFooter}
+                        nameMaxWidth={nameMaxWidth}
+                    />
+                </React.Fragment>
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,26 @@
+{
+  "context_not-available": "Not available",
+  "label_storage-pool": "StoragePool",
+  "label_donor": "Donor",
+  "label_node-id": "NodeId",
+  "label_pdisk-id": "PDiskId",
+  "label_vslot-id": "VSlotId",
+  "label_links": "Links",
+  "label_vdisk": "VDisk",
+  "label_fresh": "Fresh",
+  "label_level": "Level",
+  "label_space": "Space",
+  "label_front-queues": "FrontQueues",
+  "label_replicated": "Replicated",
+  "label_progress": "Progress",
+  "label_remaining": "Remaining",
+  "label_unsync-vdisks": "UnsyncVDisks",
+  "label_allocated": "Allocated",
+  "label_available": "Available",
+  "label_read": "Read",
+  "label_write": "Write",
+  "label_replication": "Replication",
+  "label_recipient": "Recipient",
+  "action_open-in-developer-ui": "Open in Developer UI",
+  "action_go-to-vdisk": "Go to VDisk"
+}

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

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-vDisk-popup';
+
+export const vDiskPopupKeyset = registerKeysets(COMPONENT, {en});

package/src/components/VersionsBar/VersionsBar.scss

@@ -0,0 +1,86 @@
+@use '../../styles/mixins.scss';
+
+.ydb-versions-bar {
+    &__bar-wrapper {
+        gap: var(--g-spacing-2);
+
+        width: 100%;
+
+        &_size_m {
+            gap: var(--g-spacing-3);
+        }
+    }
+
+    &__bar {
+        gap: var(--g-spacing-half);
+
+        width: 100%;
+        height: 10px;
+
+        &_size_m {
+            gap: var(--g-spacing-1);
+
+            height: 20px;
+        }
+    }
+
+    &__titles-wrapper {
+        flex-direction: column;
+        gap: var(--g-spacing-half);
+
+        &_size_m {
+            flex-flow: row wrap;
+            gap: var(--g-spacing-4);
+        }
+    }
+
+    &__title {
+        gap: var(--g-spacing-1);
+
+        width: max-content;
+
+        &_size_m {
+            gap: var(--g-spacing-2);
+        }
+    }
+
+    &__title-text {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+
+        color: var(--g-color-text-primary);
+
+        @include mixins.body-1-typography();
+
+        &_size_m {
+            overflow: visible;
+
+            text-overflow: initial;
+        }
+    }
+
+    &__version {
+        min-width: 10px;
+
+        border-radius: var(--g-border-radius-xs);
+
+        &_size_m {
+            min-width: 20px;
+        }
+    }
+
+    &__button {
+        width: max-content;
+    }
+
+    &__title-text,
+    &__version,
+    &__version-icon {
+        cursor: pointer;
+
+        &_dimmed {
+            opacity: 0.5;
+        }
+    }
+}