ydb-embedded-ui 22.3.0 → 22.4.0

package/dist/utils/timeParsers/i18n/ru.json

@@ -7,5 +7,9 @@
     "hours": "{{hours}}\u00a0ч",
     "min": "{{minutes}}\u00a0м",
     "sec": "{{seconds}}\u00a0с",
-    "ms": "{{ms}}\u00a0мс"
+    "ms": "{{ms}}\u00a0мс",
+    "value_compact-days": "{{days}}д",
+    "value_compact-hours": "{{hours}}ч",
+    "value_compact-minutes": "{{minutes}}мин",
+    "value_compact-seconds": "{{seconds}}с"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "22.3.0",
+  "version": "22.4.0",
   "files": [
     "dist",
     "src"
@@ -38,7 +38,7 @@
     "@reduxjs/toolkit": "^2.8.2",
     "@tanstack/react-table": "^8.20.6",
     "@ydb-platform/monaco-ghost": "^0.6.1",
-    "axios": "^1.18.0",
+    "axios": "^1.20.0",
     "axios-retry": "^4.5.0",
     "colord": "^2.10.0",
     "copy-to-clipboard": "^3.3.3",

package/src/components/DiskCapacityInfo/DiskCapacityInfo.tsx

@@ -6,6 +6,7 @@ import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
 import {isCapacityAlert} from '../../types/api/enums';
 import {getCapacityAlertTheme, normalizeCapacityAlert} from '../../utils/capacityAlerts';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
 import type {PreparedPDisk, PreparedVDisk} from '../../utils/disks/types';
 import {
     formatMetricCountPair,
@@ -13,8 +14,11 @@ import {
     formatNormalizedMetricPercent,
     formatStorageMetricPair,
 } from '../../utils/storageMetrics';
+import {DiskCapacityAlertLabel} from '../DiskStatus/DiskStatus';
 import type {InfoViewerItem} from '../InfoViewer';
+import {pDiskInfoKeyset} from '../PDiskInfo/i18n';
 import {TitleWithHelpMark} from '../TitleWithHelpmark/TitleWithHelpmark';
+import {vDiskInfoKeyset} from '../VDiskInfo/i18n';
 import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
 import {
     CAPACITY_CONFIGURATION_HELP_TEXT,
@@ -51,7 +55,7 @@ export function getVDiskCapacityInfoItems(
     data: PreparedVDisk | undefined,
     {withRawUsage}: {withRawUsage: boolean},
 ): DiskCapacityInfoItem[] {
-    const sizeData = data?.WhiteboardSize ?? data;
+    const sizeData = data?.WhiteboardSize ?? data?.DisplaySize ?? data;
     const items: DiskCapacityInfoItem[] = [
         {
             id: 'size',
@@ -98,14 +102,28 @@ export function getVDiskCapacityInfoItems(
 
 export function getPDiskCapacityInfoItems(
     data: PreparedPDisk | undefined,
-    {withUsage, withCapacityAlert}: {withUsage: boolean; withCapacityAlert: boolean},
+    {
+        withUsage,
+        withCapacityAlert,
+        fixedDecimalPlaces,
+        useWhiteboardSize = true,
+    }: {
+        withUsage: boolean;
+        withCapacityAlert: boolean;
+        fixedDecimalPlaces?: number;
+        useWhiteboardSize?: boolean;
+    },
 ): DiskCapacityInfoItem[] {
-    const sizeData = data?.WhiteboardSize ?? data;
+    const sizeData = useWhiteboardSize ? (data?.WhiteboardSize ?? data) : data;
     const items: DiskCapacityInfoItem[] = [
         {
             id: 'space',
             title: i18n('field_space'),
-            value: formatStorageMetricPair(sizeData?.AllocatedSize, sizeData?.TotalSize),
+            value: formatStorageMetricPair(
+                sizeData?.AllocatedSize,
+                sizeData?.TotalSize,
+                fixedDecimalPlaces,
+            ),
         },
     ];
 
@@ -113,7 +131,7 @@ export function getPDiskCapacityInfoItems(
         items.push({
             id: 'pdisk-usage',
             title: CAPACITY_METRICS_COLUMN_TITLES.MaxPDiskUsage,
-            value: formatMetricPercent(data?.PDiskUsage),
+            value: formatMetricPercent(data?.PDiskUsage, fixedDecimalPlaces),
             note: CAPACITY_METRICS_HELP_TEXT.MaxPDiskUsage,
         });
     }
@@ -144,17 +162,96 @@ export function getPDiskCapacityInfoItems(
     return items;
 }
 
+export function getVDiskCapacityItems(
+    data: PreparedVDisk,
+    {capacityMetricsEnabled}: {capacityMetricsEnabled: boolean},
+): DiskDetailItem[] {
+    const size =
+        (capacityMetricsEnabled ? data.WhiteboardSize : undefined) ?? data.DisplaySize ?? data;
+    const items: DiskDetailItem[] = [
+        {
+            id: 'group-size-in-units',
+            name: vDiskInfoKeyset('field_group-size-in-units'),
+            content: formatCapacityUnitCount(data.GroupSizeInUnits),
+            note: CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits,
+        },
+        {
+            id: 'size',
+            name: vDiskInfoKeyset('size'),
+            content: formatStorageMetricPair(size.AllocatedSize, size.SizeLimit, 2),
+        },
+        {
+            id: 'capacity-alert',
+            name: vDiskInfoKeyset('field_capacity-alert'),
+            content: <DiskCapacityAlertLabel value={data.CapacityAlert} />,
+            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
+        },
+        {
+            id: 'vdisk-slot-usage',
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
+            content: formatMetricPercent(data.VDiskSlotUsage, 2),
+            note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
+        },
+        {
+            id: 'vdisk-raw-usage',
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
+            content: formatMetricPercent(data.VDiskRawUsage, 2),
+            note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskRawUsage,
+        },
+    ];
+    return items.filter(({id}) => capacityMetricsEnabled || id === 'size');
+}
+
+export function getPDiskCapacityItems(
+    data: PreparedPDisk,
+    {useWhiteboardSize = true}: {useWhiteboardSize?: boolean} = {},
+): DiskDetailItem[] {
+    const fieldOrder = ['slot-size-in-units', 'space', 'capacity-alert', 'pdisk-usage', 'slots'];
+    const capacityItems = getPDiskCapacityInfoItems(data, {
+        withUsage: true,
+        withCapacityAlert: true,
+        fixedDecimalPlaces: 2,
+        useWhiteboardSize,
+    });
+    const items: DiskDetailItem[] = [];
+    for (const id of fieldOrder) {
+        const field = capacityItems.find((item) => item.id === id);
+        if (field) {
+            items.push({
+                id,
+                name: field.title,
+                content:
+                    id === 'capacity-alert' ? (
+                        <DiskCapacityAlertLabel value={data.PDiskCapacityAlert} />
+                    ) : (
+                        field.value
+                    ),
+                note: id === 'slots' ? pDiskInfoKeyset('context_slots') : field.note,
+            });
+        }
+    }
+    return items;
+}
+
 export function getStorageGroupCapacityInfoItems(
     data: PreparedStorageGroup | undefined,
 ): DiskCapacityInfoItem[] {
+    const capacityAlert = normalizeCapacityAlert(data?.CapacityAlert);
     return [
+        {
+            id: 'capacity-alert',
+            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
+            value: capacityAlert ? (
+                <DiskCapacityAlertLabel value={capacityAlert} />
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
+            ),
+            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
+        },
         {
             id: 'vdisk-slot-usage',
             title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
-            value: getAlertAwareUsageValue(
-                formatNormalizedMetricPercent(data?.MaxVDiskSlotUsage),
-                data?.CapacityAlert,
-            ),
+            value: formatNormalizedMetricPercent(data?.MaxVDiskSlotUsage),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
         },
         {
@@ -163,12 +260,6 @@ export function getStorageGroupCapacityInfoItems(
             value: formatNormalizedMetricPercent(data?.MaxVDiskRawUsage),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskRawUsage,
         },
-        {
-            id: 'capacity-alert',
-            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
-            value: getCapacityAlertValue(data?.CapacityAlert),
-            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
-        },
     ];
 }
 

package/src/components/DiskPopup/DiskPopup.scss

@@ -0,0 +1,203 @@
+.ydb-disk-popup {
+    --ydb-disk-popup-base-width: 368px;
+    --ydb-disk-popup-width-growth: 50px;
+
+    width: max-content;
+    min-width: min(var(--ydb-disk-popup-base-width), calc(100vw - 64px));
+    max-width: min(
+        calc(var(--ydb-disk-popup-base-width) + var(--ydb-disk-popup-width-growth)),
+        calc(100vw - 64px)
+    );
+
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+    overflow-wrap: anywhere;
+
+    &_combined {
+        --ydb-disk-popup-base-width: 593px;
+        --ydb-disk-popup-width-growth: 120px;
+        --ydb-pdisk-log-size-progress-width: 50px;
+
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    &__panel {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+
+        min-width: 0;
+    }
+
+    &_combined &__panel:first-child {
+        padding-right: var(--g-spacing-3);
+
+        border-right: 1px solid var(--g-color-line-generic);
+    }
+
+    &_combined &__panel + &__panel {
+        padding-left: var(--g-spacing-3);
+    }
+
+    &__body,
+    &__footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+    }
+
+    // Only Compaction contributes to the intrinsic width; other sections fit the card.
+    &__body > :not(:has(.ydb-vdisk-popup__compaction)),
+    &__footer,
+    .g-definition-list__item:not(:has(.ydb-vdisk-popup__compaction)) {
+        contain: inline-size;
+    }
+
+    .ydb-vdisk-popup__compaction {
+        width: max-content;
+        max-width: 100%;
+    }
+
+    .g-definition-list__item:has(.ydb-vdisk-popup__compaction) {
+        .g-definition-list__term-container {
+            flex-shrink: 1;
+        }
+
+        .g-definition-list__definition {
+            flex-shrink: 0;
+        }
+    }
+
+    &__footer {
+        margin-top: auto;
+    }
+
+    &__id {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    .g-definition-list {
+        --g-definition-list-item-gap: var(--g-spacing-1);
+    }
+
+    .g-definition-list__definition {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    .g-definition-list__copy-container {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .g-definition-list__dots {
+        flex-basis: 0;
+
+        min-width: 0;
+    }
+
+    .ydb-disk-status__tooltip {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .ydb-disk-status__label {
+        min-width: 0;
+        max-width: 100%;
+        height: auto;
+        min-height: var(--_--height);
+
+        .g-label__text {
+            display: block;
+            overflow: visible;
+
+            min-width: 0;
+
+            text-align: start;
+            white-space: nowrap;
+        }
+
+        .g-label__content,
+        .g-label__value,
+        .g-label__key,
+        .g-label__separator {
+            display: inline;
+            overflow: visible;
+
+            text-overflow: clip;
+        }
+    }
+
+    .ydb-pdisk-log-size,
+    .ydb-vdisk-status__replication-progress {
+        flex-wrap: wrap;
+
+        max-width: 100%;
+
+        white-space: normal;
+    }
+
+    &__location {
+        contain: inline-size;
+
+        padding: var(--g-spacing-1) var(--g-spacing-2);
+
+        border-radius: var(--g-border-radius-m);
+        background-color: var(--g-color-base-generic);
+
+        .g-definition-list__dots {
+            display: none;
+        }
+
+        .g-definition-list__definition {
+            flex: 1;
+        }
+    }
+
+    &__text {
+        overflow: hidden;
+
+        min-width: 0;
+
+        cursor: default;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
+
+            > span {
+                unicode-bidi: plaintext;
+            }
+        }
+    }
+
+    &__text-tooltip {
+        overflow-wrap: anywhere;
+    }
+
+    @media (max-width: 700px) {
+        &_combined {
+            --ydb-disk-popup-base-width: 368px;
+
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        &_combined &__panel:first-child {
+            padding-right: 0;
+            padding-bottom: var(--g-spacing-3);
+
+            border-right: none;
+            border-bottom: 1px solid var(--g-color-line-generic);
+        }
+
+        &_combined &__panel + &__panel {
+            padding-top: var(--g-spacing-3);
+            padding-left: 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;
+        }
+    }
+}