ydb-embedded-ui 22.3.0 → 22.4.0

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

@@ -1,26 +1,10 @@
 {
-  "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_storage-pool": "Storage Pool Name",
   "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",
+  "label_front-queues": "Front Queues",
+  "label_read": "Read Throughput",
+  "label_write": "Write Throughput",
   "action_open-in-developer-ui": "Open in Developer UI",
-  "action_go-to-vdisk": "Go to VDisk"
+  "action_go-to-vdisk": "Go to VDisk",
+  "label_compaction": "Compaction"
 }

package/src/components/VDiskStatus/VDiskReplicationStatus.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import type {LabelProps} from '@gravity-ui/uikit';
+import {Flex, Progress} from '@gravity-ui/uikit';
+
+import {EVDiskDetailedReplicationStatus} from '../../types/api/vdisk';
+import {cn} from '../../utils/cn';
+import {formatPercent} from '../../utils/dataFormatters/dataFormatters';
+import type {PreparedVDisk} from '../../utils/disks/types';
+import {formatDurationToShortTimeFormat} from '../../utils/timeParsers';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import {DiskStatusLabel} from '../DiskStatus/DiskStatus';
+
+import {vDiskStatusKeyset as i18n} from './i18n';
+import {getVDiskReplicationLabel} from './statuses';
+
+import './VDiskStatus.scss';
+
+const b = cn('ydb-vdisk-status');
+
+interface VDiskReplicationStatusProps extends Pick<LabelProps, 'size'> {
+    data: Pick<
+        PreparedVDisk,
+        | 'DetailedReplicationStatus'
+        | 'Replicated'
+        | 'ReplicationProgress'
+        | 'ReplicationSecondsRemaining'
+    >;
+}
+
+export function VDiskReplicationStatus({data, size}: VDiskReplicationStatusProps) {
+    const label = getVDiskReplicationLabel(data);
+    const showProgress =
+        data.DetailedReplicationStatus === EVDiskDetailedReplicationStatus.InProgress ||
+        (!data.DetailedReplicationStatus && data.Replicated === false);
+
+    return (
+        <React.Fragment>
+            {label && <DiskStatusLabel {...label} size={size} />}
+            {showProgress && <ReplicationProgress data={data} size={size} />}
+        </React.Fragment>
+    );
+}
+
+function ReplicationProgress({data, size}: VDiskReplicationStatusProps) {
+    const progress = parseOptionalNonNegativeNumber(data.ReplicationProgress);
+    const percentage =
+        progress !== undefined && progress <= 1 ? Math.round(progress * 100) : undefined;
+    const seconds = parseOptionalNonNegativeNumber(data.ReplicationSecondsRemaining);
+    const remaining =
+        seconds === undefined
+            ? undefined
+            : formatDurationToShortTimeFormat(Math.ceil(seconds) * 1000, 2, {compact: true});
+    if (percentage === undefined && !remaining) {
+        return null;
+    }
+    return (
+        <Flex alignItems="center" gap={2} className={b('replication-progress', {size})}>
+            {percentage !== undefined && (
+                <React.Fragment>
+                    <span>{formatPercent(percentage / 100, 0)}</span>
+                    <div
+                        role="progressbar"
+                        aria-label={i18n('label_replication-progress')}
+                        aria-valuemin={0}
+                        aria-valuemax={100}
+                        aria-valuenow={percentage}
+                        className={b('progress-bar')}
+                    >
+                        <Progress value={percentage} theme="info" size="xs" />
+                    </div>
+                </React.Fragment>
+            )}
+            {remaining && <span>{i18n('context_remaining', {duration: remaining})}</span>}
+        </Flex>
+    );
+}

package/src/components/VDiskStatus/VDiskStatus.scss

@@ -0,0 +1,32 @@
+@use '../../styles/mixins';
+
+.ydb-vdisk-status {
+    &__replication-progress {
+        box-sizing: border-box;
+        min-height: 24px;
+        padding: 0 10px;
+
+        color: var(--g-color-text-info-heavy);
+        border-radius: var(--g-border-radius-xs);
+        background-color: var(--g-color-base-selection);
+        @include mixins.text-body-short();
+
+        &_size_xs {
+            min-height: 20px;
+            padding: 2px 6px;
+        }
+
+        > span {
+            white-space: nowrap;
+        }
+    }
+
+    &__progress-bar {
+        --g-progress-empty-background-color: var(--g-color-base-info-light);
+        --g-progress-filled-background-color: var(--g-color-base-info-heavy);
+
+        flex-shrink: 0;
+
+        width: 103px;
+    }
+}

package/src/components/VDiskStatus/VDiskStatus.tsx

@@ -0,0 +1,38 @@
+import type {LabelProps} from '@gravity-ui/uikit';
+
+import {EFlag} from '../../types/api/enums';
+import type {EVDiskState} from '../../types/api/vdisk';
+import {VDISK_LABEL_CONFIG} from '../../utils/disks/constants';
+import {calculateFrontQueuesIcon} from '../../utils/disks/iconCalculators';
+import {DiskFlagLabel, DiskStatusLabel} from '../DiskStatus/DiskStatus';
+
+import {vDiskStatusKeyset as i18n} from './i18n';
+import {getVDiskStateLabel} from './statuses';
+
+export function VDiskStateLabel({state, size}: {state?: EVDiskState} & Pick<LabelProps, 'size'>) {
+    return <DiskStatusLabel {...getVDiskStateLabel({VDiskState: state})} size={size} />;
+}
+
+export function VDiskDonorLabel({
+    donorMode,
+    size,
+}: {donorMode?: boolean} & Pick<LabelProps, 'size'>) {
+    return donorMode ? (
+        <DiskStatusLabel value={i18n('label_donor')} {...VDISK_LABEL_CONFIG.donor} size={size} />
+    ) : null;
+}
+
+export function VDiskFrontQueuesLabel({flag}: {flag?: EFlag}) {
+    return (
+        <DiskFlagLabel
+            flag={flag}
+            icon={calculateFrontQueuesIcon({FrontQueues: flag || EFlag.Grey})}
+        />
+    );
+}
+
+export function VDiskCompactionRankLabel({flag, rank}: {flag?: EFlag; rank: 'fresh' | 'level'}) {
+    return (
+        <DiskFlagLabel flag={flag} title={i18n(rank === 'fresh' ? 'label_fresh' : 'label_level')} />
+    );
+}

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

@@ -0,0 +1,33 @@
+{
+  "label_donor": "Donor",
+  "label_fresh": "Fresh Rank",
+  "label_level": "Level Rank",
+  "label_replicated": "Replicated",
+  "label_replication": "Replication",
+  "label_replication-progress": "Replication progress",
+  "value_ok": "Ok",
+  "value_in-progress": "In progress",
+  "value_initial": "Initial",
+  "value_sync-guid-recovery": "Sync Guid Recovery",
+  "value_pdisk-error": "PDisk Error",
+  "value_local-recovery-error": "Local Recovery Error",
+  "value_sync-guid-recovery-error": "Sync Guid Recovery Error",
+  "value_no-data": "No data",
+  "value_waiting-for-token": "Waiting for token",
+  "value_phantoms-only": "Phantoms only",
+  "label_not-replicated": "Not replicated",
+  "value_no-detailed-status": "No detailed status",
+  "context_state-ok": "The VDisk is operating normally",
+  "context_state-initial": "The VDisk is starting",
+  "context_state-sync-guid-recovery": "The VDisk is synchronizing with other VDisks of the group",
+  "context_state-pdisk-error": "The VDisk cannot operate because its underlying PDisk reported an error",
+  "context_state-local-recovery-error": "The VDisk failed to restore its state from the PDisk",
+  "context_state-sync-guid-recovery-error": "The VDisk failed to complete synchronization identity with other VDisks in the group",
+  "context_state-no-data": "The VDisk state is unknown",
+  "context_replicated": "The VDisk is fully replicated",
+  "context_not-replicated": "The VDisk isn't replicated",
+  "context_replication-in-progress": "Replication is in progress, data is being transferred to VDisk",
+  "context_replication-waiting-for-token": "Replication is waiting for a token from the broker",
+  "context_replication-phantoms-only": "Replication cannot finish due to phantom blobs",
+  "context_remaining": "{{duration}} left"
+}

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

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

package/src/components/VDiskStatus/index.ts

@@ -0,0 +1,7 @@
+export {
+    VDiskCompactionRankLabel,
+    VDiskDonorLabel,
+    VDiskFrontQueuesLabel,
+    VDiskStateLabel,
+} from './VDiskStatus';
+export {VDiskReplicationStatus} from './VDiskReplicationStatus';

package/src/components/VDiskStatus/statuses.ts

@@ -0,0 +1,139 @@
+import {
+    ArrowsRotateLeft,
+    ArrowsRotateLeftSlash,
+    Check,
+    CirclePause,
+    CircleQuestion,
+    CircleStop,
+} from '@gravity-ui/icons';
+
+import {EVDiskDetailedReplicationStatus, EVDiskState} from '../../types/api/vdisk';
+import {
+    NOT_AVAILABLE_SEVERITY,
+    NUMERIC_SEVERITY_TO_LABEL_VIEW,
+    VDISK_STATE_SEVERITY_FOR_STATE_MODE,
+} from '../../utils/disks/constants';
+import {calculateStateIcon} from '../../utils/disks/iconCalculators';
+import type {PreparedVDisk} from '../../utils/disks/types';
+import {parseOptionalNonNegativeNumber} from '../../utils/utils';
+import type {DiskStatusLabelData} from '../DiskStatus/DiskStatus';
+
+import {vDiskStatusKeyset as i18n} from './i18n';
+
+export function getVDiskStateLabel(data: PreparedVDisk): DiskStatusLabelData {
+    const state = data.VDiskState;
+    const severity = state
+        ? (VDISK_STATE_SEVERITY_FOR_STATE_MODE[state] ?? NOT_AVAILABLE_SEVERITY)
+        : NOT_AVAILABLE_SEVERITY;
+    if (!state || severity === NOT_AVAILABLE_SEVERITY) {
+        return {
+            value: i18n('value_no-data'),
+            theme: 'unknown',
+            icon: CircleQuestion,
+            tooltip: i18n('context_state-no-data'),
+        };
+    }
+
+    const labels: Record<EVDiskState, Pick<DiskStatusLabelData, 'value' | 'tooltip'>> = {
+        [EVDiskState.OK]: {
+            value: i18n('value_ok'),
+            tooltip: i18n('context_state-ok'),
+        },
+        [EVDiskState.Initial]: {
+            value: i18n('value_initial'),
+            tooltip: i18n('context_state-initial'),
+        },
+        [EVDiskState.SyncGuidRecovery]: {
+            value: i18n('value_sync-guid-recovery'),
+            tooltip: i18n('context_state-sync-guid-recovery'),
+        },
+        [EVDiskState.PDiskError]: {
+            value: i18n('value_pdisk-error'),
+            tooltip: i18n('context_state-pdisk-error'),
+        },
+        [EVDiskState.LocalRecoveryError]: {
+            value: i18n('value_local-recovery-error'),
+            tooltip: i18n('context_state-local-recovery-error'),
+        },
+        [EVDiskState.SyncGuidRecoveryError]: {
+            value: i18n('value_sync-guid-recovery-error'),
+            tooltip: i18n('context_state-sync-guid-recovery-error'),
+        },
+    };
+
+    const labelView = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+
+    return {
+        ...labels[state],
+        theme: labelView.theme,
+        icon: state === EVDiskState.OK ? Check : calculateStateIcon(data),
+        dangerHeavy: Boolean(labelView.dangerHeavy),
+    };
+}
+
+export function getVDiskReplicationLabel(data: PreparedVDisk): DiskStatusLabelData | undefined {
+    switch (data.DetailedReplicationStatus) {
+        case EVDiskDetailedReplicationStatus.Replicated:
+            return replicatedLabel();
+        case EVDiskDetailedReplicationStatus.InProgress:
+            return {
+                title: i18n('label_replication'),
+                value: i18n('value_in-progress'),
+                theme: 'info',
+                icon: ArrowsRotateLeft,
+                tooltip: i18n('context_replication-in-progress'),
+            };
+        case EVDiskDetailedReplicationStatus.WaitingForToken:
+            return {
+                title: i18n('label_replication'),
+                value: i18n('value_waiting-for-token'),
+                theme: 'info',
+                icon: CirclePause,
+                tooltip: i18n('context_replication-waiting-for-token'),
+            };
+        case EVDiskDetailedReplicationStatus.PhantomsOnly:
+            return {
+                title: i18n('label_replication'),
+                value: i18n('value_phantoms-only'),
+                theme: 'info',
+                icon: CircleStop,
+                tooltip: i18n('context_replication-phantoms-only'),
+            };
+        default:
+            if (data.DetailedReplicationStatus) {
+                return undefined;
+            }
+            if (data.Replicated === true) {
+                return replicatedLabel();
+            }
+            if (data.Replicated === false) {
+                const progress = parseOptionalNonNegativeNumber(data.ReplicationProgress);
+                const seconds = parseOptionalNonNegativeNumber(data.ReplicationSecondsRemaining);
+                if ((progress !== undefined && progress <= 1) || seconds !== undefined) {
+                    return {
+                        title: i18n('label_replication'),
+                        value: i18n('value_no-detailed-status'),
+                        theme: 'info',
+                        icon: ArrowsRotateLeft,
+                        tooltip: i18n('context_not-replicated'),
+                    };
+                }
+                return {
+                    value: i18n('label_not-replicated'),
+                    theme: 'normal',
+                    icon: ArrowsRotateLeftSlash,
+                    tooltip: i18n('context_not-replicated'),
+                };
+            }
+            return undefined;
+    }
+}
+
+function replicatedLabel(): DiskStatusLabelData {
+    return {
+        value: i18n('label_replicated'),
+        theme: 'success',
+        icon: Check,
+        tooltip: i18n('context_replicated'),
+    };
+}

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

@@ -5,11 +5,11 @@
   "field_normalized-occupancy": "Normalized Occupancy",
   "field_capacity-alert": "Capacity Alert",
   "value_implicit-unit-count": "1 (implicit)",
-  "context_pdisk-usage": "Share of PDisk space used by VDisks. System and log reserves are not included.",
-  "context_vdisk-slot-usage": "Percentage of VDisk space used relative to the first low-space warning. Can exceed 100%.",
-  "context_vdisk-raw-usage": "Percentage of VDisk space used relative to its fair share on the PDisk. Can exceed 100%.",
+  "context_pdisk-usage": "The share of PDisk chunk space used by the residing VDisks. Doesn't include SysLog and CommonLog usage",
+  "context_vdisk-slot-usage": "Percentage of used VDisk space relative to the first low-space warning. Can exceed 100%.",
+  "context_vdisk-raw-usage": "Percentage of used VDisk space relative to its fair share on the PDisk. Can exceed 100%.",
   "context_normalized-occupancy": "Internal score used for gently handling low-space cases.",
-  "context_capacity-alert": "Named status used for gently handling low-space cases.",
+  "context_capacity-alert": "The named status used for the graceful low space handling.",
   "context_group-size-in-units": "Relative capacity of this group (1 = single, 2 = double, …). Affects VDisk space quota on the PDisk.",
   "context_slot-size-in-units": "Relative size of this PDisk in the cluster (1 = single, 2 = double, …). Same units as Group Size In Units."
 }

package/src/containers/Cluster/ClusterDrawerHealthcheck.tsx

@@ -9,6 +9,7 @@ import {
 import {useTypedSelector} from '../../utils/hooks';
 import {Healthcheck} from '../Tenant/Healthcheck/Healthcheck';
 import {HealthcheckDrawer} from '../Tenant/Healthcheck/components/HealthcheckDrawer';
+import {getDatabaseHealthcheckAssistantTarget} from '../Tenant/Healthcheck/utils';
 
 import i18n from './i18n';
 
@@ -184,6 +185,11 @@ export function ClusterDrawerHealthcheck({
 
     return (
         <HealthcheckDrawer
+            target={getDatabaseHealthcheckAssistantTarget({
+                database,
+                clusterName,
+                scope: 'cluster',
+            })}
             isDrawerVisible={Boolean(showHealthcheck) && Boolean(database)}
             onCloseDrawer={handleCloseDrawer}
             onTransitionInComplete={

package/src/containers/Clusters/ClusterDrawerHealthcheck.tsx

@@ -48,6 +48,7 @@ export function ClusterDrawerHealthcheck({
 
     return (
         <HealthcheckDrawer
+            target={clusterName ? {scope: 'cluster', request: {clusterName}} : undefined}
             isDrawerVisible={isVisible && Boolean(clusterName)}
             onCloseDrawer={handleCloseDrawer}
             renderDrawerContent={renderDrawerContent}

package/src/containers/Header/Header.tsx

@@ -1,6 +1,7 @@
 import {HeaderBreadcrumbs} from './HeaderBreadcrumbs';
 import {HeaderLeftControls} from './HeaderLeftControls';
 import {HeaderRightControls} from './HeaderRightControls';
+import {StorageGroupLeftControls} from './StorageGroupLeftControls';
 import {b} from './constants';
 import {useHeaderBreadcrumbs} from './hooks/useHeaderBreadcrumbs';
 import {useHeaderData} from './hooks/useHeaderData';
@@ -66,18 +67,25 @@ export function Header() {
         return null;
     }
 
-    const leftControls =
-        database && isDatabasePage && isV2NavigationEnabled ? (
+    const renderLeftControls = () => {
+        if (page === 'storageGroup') {
+            return <StorageGroupLeftControls />;
+        }
+        return database && isDatabasePage && isV2NavigationEnabled ? (
             <HeaderLeftControls
                 database={database}
                 databaseData={databaseData}
                 isDatabaseDataLoading={isDatabaseDataLoading}
             />
         ) : null;
+    };
 
     return (
         <header className={b()}>
-            <HeaderBreadcrumbs breadcrumbItems={breadcrumbItems} endContent={leftControls} />
+            <HeaderBreadcrumbs
+                breadcrumbItems={breadcrumbItems}
+                endContent={renderLeftControls()}
+            />
 
             <HeaderRightControls
                 clusterName={clusterName}

package/src/containers/Header/StorageGroupLeftControls.tsx

@@ -0,0 +1,38 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {storageApi} from '../../store/reducers/storage/storage';
+import {valueIsDefined} from '../../utils';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {StorageGroupStateLabel} from '../Storage/StorageGroupStateLabel';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function StorageGroupLeftControls() {
+    const [{groupId}] = useQueryParams({groupId: StringParam});
+    const database = useDatabaseFromQuery();
+    const {currentData} = storageApi.endpoints.getStorageGroupsInfo.useQueryState(
+        valueIsDefined(groupId)
+            ? {groupId, with: 'all', fieldsRequired: 'all', database}
+            : skipToken,
+    );
+
+    if (!groupId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={groupId}
+                view="flat-secondary"
+                size="s"
+                aria-label={headerKeyset('action_copy-group-id-from-breadcrumb')}
+                tooltipInitialText={headerKeyset('action_copy-group-id')}
+            />
+            <StorageGroupStateLabel state={currentData?.groups?.[0]?.State} size="xs" />
+        </Flex>
+    );
+}

package/src/containers/Header/i18n/en.json

@@ -24,5 +24,7 @@
   "description_connect-to-db": "Connect to database",
 
   "title_monitoring": "Open in {{system}}",
-  "action_copy-path": "Copy path"
+  "action_copy-path": "Copy path",
+  "action_copy-group-id": "Copy Storage Group ID",
+  "action_copy-group-id-from-breadcrumb": "Copy Storage Group ID from breadcrumb"
 }

package/src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx

@@ -4,7 +4,7 @@ import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/Dis
 import {HoverPopup} from '../../../components/HoverPopup/HoverPopup';
 import {InternalLink} from '../../../components/InternalLink';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
+import {VDiskPopup} from '../../../components/VDiskPopup/VDiskPopup';
 import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YDBDefinitionList} from '../../../components/YDBDefinitionList/YDBDefinitionList';
 import {useVDiskPagePath} from '../../../routes';
@@ -15,6 +15,7 @@ import type {
     SlotItem,
     SlotItemType,
 } from '../../../store/reducers/pdisk/types';
+import type {NodeMetadata} from '../../../types/store/nodesList';
 import {valueIsDefined} from '../../../utils';
 import {formatBytes} from '../../../utils/bytesParsers';
 import {cn} from '../../../utils/cn';
@@ -80,6 +81,7 @@ export function PDiskSpaceDistribution({data}: PDiskSpaceDistributionProps) {
                     minNonLogTotal={minNonLogTotal}
                     pDiskId={PDiskId}
                     nodeId={NodeId}
+                    nodeData={{Host: data.NodeHost, DC: data.NodeDC, Rack: data.NodeRack}}
                     getVDiskPagePath={getVDiskPagePath}
                     key={index}
                 />
@@ -110,6 +112,7 @@ interface SlotProps<T extends SlotItemType> {
 
     pDiskId?: string | number;
     nodeId?: string | number;
+    nodeData?: NodeMetadata;
     getVDiskPagePath?: (
         params: {nodeId: string | number | undefined; vDiskId: string | undefined},
         query?: {activeTab?: string},
@@ -138,6 +141,7 @@ function Slot<T extends SlotItemType>({
     item,
     minNonLogTotal,
     nodeId,
+    nodeData,
     getVDiskPagePath,
 }: SlotProps<T>) {
     const renderContent = () => {
@@ -152,7 +156,14 @@ function Slot<T extends SlotItemType>({
 
             return (
                 <HoverPopup
-                    renderPopupContent={() => <VDiskInfo data={item.SlotData} withTitle />}
+                    renderPopupContent={({onClose}) => (
+                        <VDiskPopup
+                            data={item.SlotData}
+                            nodeData={nodeData}
+                            onClose={onClose}
+                            view="space-distribution"
+                        />
+                    )}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >