ydb-embedded-ui 22.3.0 → 22.5.0

package/src/components/DiskCapacityInfo/DiskCapacityInfo.tsx

@@ -1,11 +1,7 @@
-import React from 'react';
-
-import {Label} from '@gravity-ui/uikit';
-
 import type {PreparedStorageGroup} from '../../store/reducers/storage/types';
-import {isCapacityAlert} from '../../types/api/enums';
-import {getCapacityAlertTheme, normalizeCapacityAlert} from '../../utils/capacityAlerts';
+import {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,9 +9,9 @@ import {
     formatNormalizedMetricPercent,
     formatStorageMetricPair,
 } from '../../utils/storageMetrics';
-import type {InfoViewerItem} from '../InfoViewer';
-import {TitleWithHelpMark} from '../TitleWithHelpmark/TitleWithHelpmark';
-import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
+import {DiskCapacityAlertLabel} from '../DiskStatus/DiskStatus';
+import {pDiskInfoKeyset} from '../PDiskInfo/i18n';
+import {vDiskInfoKeyset} from '../VDiskInfo/i18n';
 import {
     CAPACITY_CONFIGURATION_HELP_TEXT,
     CAPACITY_METRICS_COLUMN_TITLES,
@@ -25,160 +21,110 @@ import {formatCapacityUnitCount} from '../capacityMetricsColumns/formatters';
 
 import i18n from './i18n';
 
-export interface DiskCapacityInfoItem {
-    id: string;
-    title: string;
-    value: React.ReactNode;
-    note?: string;
-}
-
-function getCapacityAlertValue(value: unknown): React.ReactNode {
-    return normalizeCapacityAlert(value) ?? EMPTY_DATA_PLACEHOLDER;
-}
-
-function getAlertAwareUsageValue(value: string, capacityAlertValue: unknown): React.ReactNode {
-    if (value === EMPTY_DATA_PLACEHOLDER) {
-        return value;
-    }
-
-    const capacityAlert = normalizeCapacityAlert(capacityAlertValue);
-    const theme = isCapacityAlert(capacityAlert) ? getCapacityAlertTheme(capacityAlert) : 'normal';
-
-    return <Label theme={theme}>{value}</Label>;
-}
-
-export function getVDiskCapacityInfoItems(
-    data: PreparedVDisk | undefined,
-    {withRawUsage}: {withRawUsage: boolean},
-): DiskCapacityInfoItem[] {
-    const sizeData = data?.WhiteboardSize ?? data;
-    const items: DiskCapacityInfoItem[] = [
+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',
-            title: i18n('field_size'),
-            value: formatStorageMetricPair(sizeData?.AllocatedSize, sizeData?.SizeLimit),
+            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',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
-            value: getAlertAwareUsageValue(
-                formatMetricPercent(data?.VDiskSlotUsage),
-                data?.CapacityAlert,
-            ),
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
+            content: formatMetricPercent(data.VDiskSlotUsage, 2),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
         },
-    ];
-
-    if (withRawUsage) {
-        items.push({
+        {
             id: 'vdisk-raw-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
-            value: formatMetricPercent(data?.VDiskRawUsage),
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
+            content: formatMetricPercent(data.VDiskRawUsage, 2),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskRawUsage,
-        });
-    }
+        },
+    ];
+    return items.filter(({id}) => capacityMetricsEnabled || id === 'size');
+}
 
-    items.push(
+export function getPDiskCapacityItems(
+    data: PreparedPDisk,
+    {useWhiteboardSize = true}: {useWhiteboardSize?: boolean} = {},
+): DiskDetailItem[] {
+    const size = useWhiteboardSize ? (data.WhiteboardSize ?? data) : data;
+    return [
         {
-            id: 'group-size-in-units',
-            title: i18n('field_group-size-in-units'),
-            value: formatCapacityUnitCount(data?.GroupSizeInUnits),
-            note: CAPACITY_CONFIGURATION_HELP_TEXT.GroupSizeInUnits,
+            id: 'slot-size-in-units',
+            name: i18n('field_slot-size-in-units'),
+            content: formatCapacityUnitCount(data.SlotSizeInUnits),
+            note: CAPACITY_CONFIGURATION_HELP_TEXT.SlotSizeInUnits,
+        },
+        {
+            id: 'space',
+            name: i18n('field_space'),
+            content: formatStorageMetricPair(size.AllocatedSize, size.TotalSize, 2),
         },
         {
             id: 'capacity-alert',
-            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
-            value: getCapacityAlertValue(data?.CapacityAlert),
+            name: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
+            content: <DiskCapacityAlertLabel value={data.PDiskCapacityAlert} />,
             note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
         },
-    );
-
-    return items;
-}
-
-export function getPDiskCapacityInfoItems(
-    data: PreparedPDisk | undefined,
-    {withUsage, withCapacityAlert}: {withUsage: boolean; withCapacityAlert: boolean},
-): DiskCapacityInfoItem[] {
-    const sizeData = data?.WhiteboardSize ?? data;
-    const items: DiskCapacityInfoItem[] = [
         {
-            id: 'space',
-            title: i18n('field_space'),
-            value: formatStorageMetricPair(sizeData?.AllocatedSize, sizeData?.TotalSize),
-        },
-    ];
-
-    if (withUsage) {
-        items.push({
             id: 'pdisk-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxPDiskUsage,
-            value: formatMetricPercent(data?.PDiskUsage),
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxPDiskUsage,
+            content: formatMetricPercent(data.PDiskUsage, 2),
             note: CAPACITY_METRICS_HELP_TEXT.MaxPDiskUsage,
-        });
-    }
-
-    items.push(
-        {
-            id: 'slots',
-            title: i18n('field_slots'),
-            value: formatMetricCountPair(data?.NumActiveSlots, data?.ExpectedSlotCount),
         },
         {
-            id: 'slot-size-in-units',
-            title: i18n('field_slot-size-in-units'),
-            value: formatCapacityUnitCount(data?.SlotSizeInUnits),
-            note: CAPACITY_CONFIGURATION_HELP_TEXT.SlotSizeInUnits,
+            id: 'slots',
+            name: i18n('field_slots'),
+            content: formatMetricCountPair(data.NumActiveSlots, data.ExpectedSlotCount),
+            note: pDiskInfoKeyset('context_slots'),
         },
-    );
-
-    if (withCapacityAlert) {
-        items.push({
-            id: 'capacity-alert',
-            title: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
-            value: getCapacityAlertValue(data?.PDiskCapacityAlert),
-            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
-        });
-    }
-
-    return items;
+    ];
 }
 
 export function getStorageGroupCapacityInfoItems(
     data: PreparedStorageGroup | undefined,
-): DiskCapacityInfoItem[] {
+): DiskDetailItem[] {
+    const capacityAlert = normalizeCapacityAlert(data?.CapacityAlert);
     return [
         {
-            id: 'vdisk-slot-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
-            value: getAlertAwareUsageValue(
-                formatNormalizedMetricPercent(data?.MaxVDiskSlotUsage),
-                data?.CapacityAlert,
+            id: 'capacity-alert',
+            name: CAPACITY_METRICS_COLUMN_TITLES.CapacityAlert,
+            content: capacityAlert ? (
+                <DiskCapacityAlertLabel value={capacityAlert} />
+            ) : (
+                EMPTY_DATA_PLACEHOLDER
             ),
+            note: CAPACITY_METRICS_HELP_TEXT.CapacityAlert,
+        },
+        {
+            id: 'vdisk-slot-usage',
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskSlotUsage,
+            content: formatNormalizedMetricPercent(data?.MaxVDiskSlotUsage),
             note: CAPACITY_METRICS_HELP_TEXT.MaxVDiskSlotUsage,
         },
         {
             id: 'vdisk-raw-usage',
-            title: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
-            value: formatNormalizedMetricPercent(data?.MaxVDiskRawUsage),
+            name: CAPACITY_METRICS_COLUMN_TITLES.MaxVDiskRawUsage,
+            content: 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,
-        },
     ];
 }
-
-export function toDefinitionListItems(items: DiskCapacityInfoItem[]): YDBDefinitionListItem[] {
-    return items.map(({title, value, note}) => ({name: title, content: value, note}));
-}
-
-export function toInfoViewerItems(items: DiskCapacityInfoItem[]): InfoViewerItem[] {
-    return items.map(({title, value, note}) => ({
-        label: note ? <TitleWithHelpMark header={title} note={note} /> : title,
-        value,
-    }));
-}

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

@@ -1,5 +1,4 @@
 {
-  "field_size": "Size",
   "field_space": "Space",
   "field_slots": "Slots",
   "field_group-size-in-units": "Group Size In Units",

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