ydb-embedded-ui 22.3.0 → 22.5.0

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

@@ -1,26 +1,8 @@
 {
-  "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",
   "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} iconSize={size === 'xs' ? 12 : 14} />}
+            {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,36 @@
+@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_s {
+            border-radius: var(--g-border-radius-s);
+        }
+
+        &_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,49 @@
+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}
+            iconSize={size === 'xs' ? 12 : 14}
+        />
+    );
+}
+
+export function VDiskDonorLabel({
+    donorMode,
+    size,
+}: {donorMode?: boolean} & Pick<LabelProps, 'size'>) {
+    return donorMode ? (
+        <DiskStatusLabel
+            value={i18n('label_donor')}
+            {...VDISK_LABEL_CONFIG.donor}
+            size={size}
+            iconSize={size === 'xs' ? 12 : 14}
+        />
+    ) : 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,
+    CircleQuestionFill,
+    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: CircleQuestionFill,
+            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/components/nodesColumns/columns.tsx

@@ -13,6 +13,7 @@ import {
     formatStorageValuesToGb,
 } from '../../utils/dataFormatters/dataFormatters';
 import {getUsageSeverity} from '../../utils/generateEvaluator';
+import {getNodeMemory} from '../../utils/memory';
 import type {Column} from '../../utils/tableUtils/types';
 import {formatToMs, parseUsToMs} from '../../utils/timeParsers';
 import {bytesToSpeed, isNumeric} from '../../utils/utils';
@@ -169,22 +170,26 @@ export function getUptimeColumn<
     };
 }
 
-export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: string}>(): Column<T> {
+export function getRAMColumn<
+    T extends {MemoryStats?: TMemoryStats; MemoryUsed?: string; MemoryLimit?: string},
+>(): Column<T> {
     return {
         name: NODES_COLUMNS_IDS.RAM,
         header: NODES_COLUMNS_TITLES.RAM,
-        sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
+        sortAccessor: (row) => getNodeMemory(row).memoryUsed ?? 0,
         defaultOrder: DataTable.DESCENDING,
         render: ({row}) => {
+            const {memoryUsed: used, memoryLimit: limit} = getNodeMemory(row);
             const [memoryUsed, memoryLimit] = formatStorageValues(
-                isNumeric(row.MemoryUsed) ? Number(row.MemoryUsed) : undefined,
-                isNumeric(row.MemoryLimit) ? Number(row.MemoryLimit) : undefined,
+                used,
+                limit,
                 'gb',
                 undefined,
                 true,
             );
 
             const hasData = memoryUsed || memoryLimit;
+            const memoryContent = used === undefined ? EMPTY_DATA_PLACEHOLDER : memoryUsed;
 
             return (
                 <CellWithPopover
@@ -206,10 +211,10 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                         </DefinitionList>
                     }
                 >
-                    {isNumeric(row.MemoryUsed) ? (
+                    {used !== undefined && limit !== undefined ? (
                         <ProgressViewer
-                            value={row.MemoryUsed}
-                            capacity={row.MemoryLimit}
+                            value={used}
+                            capacity={limit}
                             formatValues={(value, total) =>
                                 formatStorageValues(value, total, 'gb', undefined, true)
                             }
@@ -218,7 +223,7 @@ export function getRAMColumn<T extends {MemoryUsed?: string; MemoryLimit?: strin
                             hideCapacity
                         />
                     ) : (
-                        EMPTY_DATA_PLACEHOLDER
+                        memoryContent
                     )}
                 </CellWithPopover>
             );
@@ -238,18 +243,27 @@ export function getMemoryColumn<
         render: ({row}) => {
             if (row.MemoryStats) {
                 return (
-                    <MemoryViewer formatValues={formatStorageValuesToGb} stats={row.MemoryStats} />
+                    <MemoryViewer
+                        formatValues={formatStorageValuesToGb}
+                        stats={row.MemoryStats}
+                        memoryUsed={row.MemoryUsed}
+                        memoryLimit={row.MemoryLimit}
+                    />
                 );
             }
 
-            if (!isNumeric(row.MemoryUsed)) {
+            const {memoryUsed, memoryLimit} = getNodeMemory(row);
+            if (memoryUsed === undefined) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
+            if (memoryLimit === undefined) {
+                return formatStorageValuesToGb(memoryUsed)[0];
+            }
 
             return (
                 <ProgressViewer
-                    value={row.MemoryUsed}
-                    capacity={row.MemoryLimit}
+                    value={memoryUsed}
+                    capacity={memoryLimit}
                     formatValues={formatStorageValuesToGb}
                     colorizeProgress={true}
                 />

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/Clusters/Clusters.scss

@@ -3,19 +3,37 @@
 .ydb-clusters {
     @include mixins.body-2-typography();
 
-    &__controls {
+    &__clusters-count {
         padding-bottom: var(--g-spacing-2);
     }
 
-    &__clusters-count {
-        padding-bottom: var(--g-spacing-2);
+    &__availability-popup .g-select-list__option {
+        align-items: flex-start;
+
+        padding-block: var(--g-spacing-2);
+    }
+
+    &__cluster-name-wrapper {
+        min-width: 0;
     }
 
     &__cluster-name {
-        white-space: normal;
-        text-decoration: none;
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__unavailable-label {
+        display: inline-flex;
+        flex-shrink: 0;
+
+        border-radius: var(--g-focus-border-radius);
 
-        color: var(--g-color-text-link);
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: 2px;
+        }
     }
     &__cluster-versions {
         text-decoration: none;