ydb-embedded-ui 22.4.0 → 22.6.0

package/src/components/PDiskInfo/PDiskInfo.tsx

@@ -1,263 +1,71 @@
 import {Flex} from '@gravity-ui/uikit';
 
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
-import {valueIsDefined} from '../../utils';
-import {formatBytes} from '../../utils/bytesParsers';
-import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
-import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
-import {formatPDiskType} from '../../utils/disks/getPDiskType';
+import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import type {PreparedPDisk} from '../../utils/disks/types';
-import {getPDiskCapacityInfoItems, toInfoViewerItems} from '../DiskCapacityInfo/DiskCapacityInfo';
-import type {InfoViewerItem} from '../InfoViewer';
-import {InfoViewer} from '../InfoViewer/InfoViewer';
-import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
-import {PDiskPageLink} from '../PDiskPageLink/PDiskPageLink';
-import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
-import {StatusIcon} from '../StatusIcon/StatusIcon';
+import {formatMetricPercent} from '../../utils/storageMetrics';
+import {CopyableValue} from '../CopyableValue/CopyableValue';
+import {getPDiskCapacityItems} from '../DiskCapacityInfo/DiskCapacityInfo';
+import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 
+import {getPDiskLogItems, getPDiskRuntimeItems} from './getPDiskDetails';
 import {pDiskInfoKeyset} from './i18n';
 
-interface GetPDiskInfoOptions<T extends PreparedPDisk> {
-    pDisk?: T;
-    nodeId?: number | string | null;
-    withPDiskPageLink?: boolean;
-    hasDeveloperUi?: boolean;
-    capacityMetricsEnabled?: boolean;
-}
-
-// eslint-disable-next-line complexity
-function getPDiskInfo<T extends PreparedPDisk>({
-    pDisk,
-    nodeId,
-    withPDiskPageLink,
-    hasDeveloperUi,
-    capacityMetricsEnabled,
-}: GetPDiskInfoOptions<T>) {
-    const {
-        PDiskId,
-        Path,
-        Guid,
-        Category,
-        Type,
-        Device,
-        Realtime,
-        State,
-        SerialNumber,
-        TotalSize,
-        AllocatedSize,
-        AllocatedPercent,
-        StatusV2,
-        NumActiveSlots,
-        ExpectedSlotCount,
-        LogUsedSize,
-        LogTotalSize,
-        SystemSize,
-        SharedWithOs,
-    } = pDisk || {};
+import './PDiskInfo.scss';
 
-    const generalInfo: InfoViewerItem[] = [];
-
-    if (valueIsDefined(Category)) {
-        generalInfo.push({label: pDiskInfoKeyset('type'), value: formatPDiskType(Type)});
-    }
-    if (valueIsDefined(Path)) {
-        generalInfo.push({label: pDiskInfoKeyset('path'), value: Path});
-    }
-    if (valueIsDefined(Guid)) {
-        generalInfo.push({label: pDiskInfoKeyset('guid'), value: Guid});
-    }
-    // SerialNumber could be an empty string ""
-    if (SerialNumber) {
-        generalInfo.push({
-            label: pDiskInfoKeyset('serial-number'),
-            value: SerialNumber,
-        });
-    }
-    if (SharedWithOs) {
-        generalInfo.push({
-            label: pDiskInfoKeyset('shared-with-os'),
-            value: pDiskInfoKeyset('yes'),
-        });
-    }
-
-    const statusInfo: InfoViewerItem[] = [];
-
-    if (valueIsDefined(StatusV2)) {
-        statusInfo.push({label: pDiskInfoKeyset('drive-status'), value: StatusV2});
-    }
-    if (valueIsDefined(State)) {
-        statusInfo.push({label: pDiskInfoKeyset('state'), value: State});
-    }
-    if (valueIsDefined(Device)) {
-        statusInfo.push({
-            label: pDiskInfoKeyset('device'),
-            value: <StatusIcon status={Device} />,
-        });
-    }
-    if (valueIsDefined(Realtime)) {
-        statusInfo.push({
-            label: pDiskInfoKeyset('realtime'),
-            value: <StatusIcon status={Realtime} />,
-        });
-    }
-
-    const additionalInfo: InfoViewerItem[] = [];
-
-    const shouldDisplayLinks =
-        (withPDiskPageLink || hasDeveloperUi) && valueIsDefined(PDiskId) && valueIsDefined(nodeId);
-
-    if (shouldDisplayLinks) {
-        const pDiskInternalViewerPath = createPDiskDeveloperUILink({
-            nodeId,
-            pDiskId: PDiskId,
-        });
-
-        additionalInfo.push({
-            label: pDiskInfoKeyset('links'),
-            value: (
-                <Flex wrap="wrap" gap={2}>
-                    {withPDiskPageLink && <PDiskPageLink pDiskId={PDiskId} nodeId={nodeId} />}
-                    {hasDeveloperUi && (
-                        <LinkWithIcon
-                            title={pDiskInfoKeyset('developer-ui')}
-                            url={pDiskInternalViewerPath}
-                        />
-                    )}
-                </Flex>
-            ),
-        });
-    }
+const b = cn('ydb-pdisk-info');
 
-    if (capacityMetricsEnabled) {
-        const configurationInfo = [...generalInfo];
-        const runtimeInfo = [...statusInfo];
-        const capacityItems = getPDiskCapacityInfoItems(pDisk, {
-            withUsage: true,
-            withCapacityAlert: false,
-        });
-        const slotSizeItem = capacityItems.find(({id}) => id === 'slot-size-in-units');
-        const runtimeCapacityItems = capacityItems.filter(({id}) => id !== 'slot-size-in-units');
-
-        if (slotSizeItem) {
-            configurationInfo.push(...toInfoViewerItems([slotSizeItem]));
-        }
-        configurationInfo.push(...additionalInfo);
-        runtimeInfo.push(...toInfoViewerItems(runtimeCapacityItems));
-
-        if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
-            runtimeInfo.push({
-                label: pDiskInfoKeyset('log-size'),
-                value: (
-                    <ProgressViewer
-                        value={LogUsedSize}
-                        capacity={LogTotalSize}
-                        formatValues={formatStorageValuesToGb}
-                    />
-                ),
-            });
-        }
-        if (valueIsDefined(SystemSize)) {
-            runtimeInfo.push({
-                label: pDiskInfoKeyset('system-size'),
-                value: formatBytes({value: SystemSize}),
-            });
-        }
-
-        return [configurationInfo, runtimeInfo];
-    }
-
-    const spaceInfo: InfoViewerItem[] = [];
+interface PDiskInfoProps {
+    pDisk?: PreparedPDisk;
+    className?: string;
+}
 
-    const hasSpaceData =
-        Number.isFinite(Number(AllocatedSize)) && Number.isFinite(Number(TotalSize));
-    spaceInfo.push({
-        label: pDiskInfoKeyset('space'),
-        value: hasSpaceData
-            ? formatStorageValuesToGb(Number(AllocatedSize), Number(TotalSize)).join(' / ')
-            : pDiskInfoKeyset('value_no-data'),
-    });
-    if (!isNaN(Number(AllocatedPercent))) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('usage'),
-            value: `${AllocatedPercent}%`,
-        });
-    }
-    if (valueIsDefined(NumActiveSlots) && valueIsDefined(ExpectedSlotCount)) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('slots'),
-            value: <ProgressViewer value={NumActiveSlots} capacity={ExpectedSlotCount} />,
-        });
-    }
-    if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('log-size'),
-            value: (
-                <ProgressViewer
-                    value={LogUsedSize}
-                    capacity={LogTotalSize}
-                    formatValues={formatStorageValuesToGb}
-                />
-            ),
-        });
-    }
-    if (valueIsDefined(SystemSize)) {
-        spaceInfo.push({
-            label: pDiskInfoKeyset('system-size'),
-            value: formatBytes({value: SystemSize}),
+function getPageCapacityItems(data: PreparedPDisk, capacityMetricsEnabled: boolean) {
+    const items = getPDiskCapacityItems(data, {useWhiteboardSize: capacityMetricsEnabled}).filter(
+        ({id}) => capacityMetricsEnabled || id === 'space' || id === 'slots',
+    );
+    if (!capacityMetricsEnabled) {
+        items.splice(1, 0, {
+            id: 'usage',
+            name: pDiskInfoKeyset('usage'),
+            content: formatMetricPercent(data.AllocatedPercent, 2),
         });
     }
-
-    return [generalInfo, statusInfo, spaceInfo, additionalInfo];
-}
-
-interface PDiskInfoProps<T extends PreparedPDisk> extends GetPDiskInfoOptions<T> {
-    className?: string;
+    return [...items, ...getPDiskLogItems(data)];
 }
 
-export function PDiskInfo<T extends PreparedPDisk>({
-    pDisk,
-    nodeId,
-    withPDiskPageLink,
-    className,
-}: PDiskInfoProps<T>) {
-    const hasDeveloperUi = useHasDeveloperUi();
+export function PDiskInfo({pDisk = {}, className}: PDiskInfoProps) {
     const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
-
-    const infoGroups = getPDiskInfo({
-        pDisk,
-        nodeId,
-        withPDiskPageLink,
-        hasDeveloperUi,
-        capacityMetricsEnabled,
-    });
-
-    if (capacityMetricsEnabled) {
-        const [configurationInfo, runtimeInfo] = infoGroups;
-
-        return (
-            <Flex className={className} gap={2} direction="row" wrap>
-                <Flex direction="column" gap={2} width={500}>
-                    <InfoViewer info={configurationInfo} renderEmptyState={() => null} />
-                </Flex>
-                <Flex direction="column" gap={2} width={500}>
-                    <InfoViewer info={runtimeInfo} renderEmptyState={() => null} />
-                </Flex>
-            </Flex>
-        );
-    }
-
-    const [generalInfo, statusInfo, spaceInfo, additionalInfo] = infoGroups;
+    const identityItems = [
+        {name: pDiskInfoKeyset('guid'), value: pDisk.Guid},
+        {name: pDiskInfoKeyset('serial-number'), value: pDisk.SerialNumber},
+    ].map(({name, value}) => ({
+        name,
+        content: (
+            <CopyableValue copyText={value || undefined} fieldName={name}>
+                <span className={b('identity-value')}>{value || EMPTY_DATA_PLACEHOLDER}</span>
+            </CopyableValue>
+        ),
+    }));
+    const runtimeItems: YDBDefinitionListItem[] = [
+        ...getPDiskRuntimeItems(pDisk),
+        ...identityItems,
+    ];
 
     return (
-        <Flex className={className} gap={2} direction="row" wrap>
-            <Flex direction="column" gap={2} width={500}>
-                <InfoViewer info={generalInfo} renderEmptyState={() => null} />
-                <InfoViewer info={spaceInfo} renderEmptyState={() => null} />
-            </Flex>
-            <Flex direction="column" gap={2} width={500}>
-                <InfoViewer info={statusInfo} renderEmptyState={() => null} />
-                <InfoViewer info={additionalInfo} renderEmptyState={() => null} />
-            </Flex>
+        <Flex className={b(null, className)} gap={6} gapRow={3} wrap="wrap" qa="pdisk-page-info">
+            <YDBDefinitionList
+                items={runtimeItems}
+                nameMaxWidth={200}
+                wrapperClassName={b('column')}
+            />
+            <YDBDefinitionList
+                items={getPageCapacityItems(pDisk, capacityMetricsEnabled)}
+                nameMaxWidth={200}
+                wrapperClassName={b('column')}
+            />
         </Flex>
     );
 }

package/src/components/PDiskInfo/PDiskLogSize.tsx

@@ -23,14 +23,18 @@ export function PDiskLogSize({used, total}: {used?: string; total?: string}) {
     }
 
     return (
-        <Flex gap={1} alignItems="center" className={b()}>
-            <Progress
-                className={b('progress')}
-                value={percentage}
-                theme="success"
-                size="s"
-                aria-label={i18n('log-size')}
-            />
+        <Flex
+            gap={1}
+            alignItems="center"
+            className={b()}
+            role="meter"
+            aria-label={i18n('log-size')}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={percentage}
+            aria-valuetext={formatStorageMetricPair(usedSize, totalSize, 2)}
+        >
+            <Progress className={b('progress')} value={percentage} theme="success" size="s" />
             <span>{formatStorageMetricPair(usedSize, totalSize, 2)}</span>
         </Flex>
     );

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

@@ -3,7 +3,6 @@
   "path": "Path",
   "guid": "GUID",
   "serial-number": "Serial Number",
-  "shared-with-os": "SharedWithOs",
   "drive-status": "Drive Status",
   "state": "State",
   "device": "Device",
@@ -14,12 +13,16 @@
   "slots": "Slots",
   "log-size": "Log Size",
   "system-size": "System Size",
-  "links": "Links",
   "developer-ui": "Developer UI",
-  "yes": "Yes",
   "context_slots": "The number of VDisks residing on this PDisk",
   "context_log-size": "The size of the Common Log shared by the residing VDisks",
   "context_system-size": "The size reserved for the PDisk system components. Includes SysLog",
+  "field_drive": "Drive status",
+  "field_decommit": "Decommission",
+  "value_not-available": "N/A",
+  "context_drive-not-available": "Drive is not available",
+  "context_decommit-not-available": "Decommission status is not available",
+  "context_maintenance-not-available": "Maintenance status is not available",
   "value_unknown": "Unknown",
   "value_ok": "Ok",
   "value_initial": "Initial",

package/src/components/PDiskInfo/statuses.ts

@@ -24,6 +24,16 @@ function unknownLabel(): DiskStatusLabelData {
     };
 }
 
+function unavailableLabel(title: string, tooltip: string): DiskStatusLabelData {
+    return {
+        title,
+        value: i18n('value_not-available'),
+        tooltip,
+        theme: 'unknown',
+        icon: CircleQuestionFill,
+    };
+}
+
 function getLabelView({
     severity,
     icon,
@@ -112,7 +122,7 @@ export function getPDiskStateLabel(state?: TPDiskState): DiskStatusLabelData {
 
 export function getPDiskDriveLabel(status?: EDriveStatus): DiskStatusLabelData | undefined {
     if (!status || status === 'UNKNOWN') {
-        return undefined;
+        return unavailableLabel(i18n('field_drive'), i18n('context_drive-not-available'));
     }
     const labels: Record<Exclude<EDriveStatus, 'UNKNOWN'>, StatusText> = {
         ACTIVE: {value: i18n('value_active'), tooltip: i18n('context_active')},
@@ -141,7 +151,7 @@ export function getPDiskDriveLabel(status?: EDriveStatus): DiskStatusLabelData |
 
 export function getPDiskDecommitLabel(status?: EDecommitStatus): DiskStatusLabelData | undefined {
     if (!status || status === 'DECOMMIT_UNSET') {
-        return undefined;
+        return unavailableLabel(i18n('field_decommit'), i18n('context_decommit-not-available'));
     }
     const labels: Record<Exclude<EDecommitStatus, 'DECOMMIT_UNSET'>, StatusText> = {
         DECOMMIT_NONE: {value: i18n('value_decommit-none'), tooltip: i18n('context_decommit-none')},
@@ -174,7 +184,10 @@ export function getPDiskMaintenanceLabel(
     status?: EMaintenanceStatus,
 ): DiskStatusLabelData | undefined {
     if (!status) {
-        return undefined;
+        return unavailableLabel(
+            i18n('label_maintenance'),
+            i18n('context_maintenance-not-available'),
+        );
     }
     const labels: Record<EMaintenanceStatus, StatusText> = {
         NO_REQUEST: {

package/src/components/PageMeta/PageMeta.tsx

@@ -1,7 +1,4 @@
-import {Flex} from '@gravity-ui/uikit';
-
 import {cn} from '../../utils/cn';
-import {AutoRefreshControl} from '../AutoRefreshControl/AutoRefreshControl';
 import {Skeleton} from '../Skeleton/Skeleton';
 
 import './PageMeta.scss';
@@ -10,7 +7,6 @@ const b = cn('ydb-page-meta');
 
 interface PageMetaProps {
     items: (string | undefined)[];
-    className?: string;
     loading?: boolean;
 }
 
@@ -27,17 +23,3 @@ export function PageMeta({items, loading}: PageMetaProps) {
 
     return <div className={b('info')}>{renderContent()}</div>;
 }
-
-export function PageMetaWithAutorefresh({className, ...rest}: PageMetaProps) {
-    return (
-        <Flex
-            gap={1}
-            alignItems="center"
-            justifyContent="space-between"
-            className={b(null, className)}
-        >
-            <PageMeta {...rest} />
-            <AutoRefreshControl />
-        </Flex>
-    );
-}

package/src/components/Search/Search.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import type {TextInputProps} from '@gravity-ui/uikit';
+import {TextInput} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput';
@@ -40,9 +41,11 @@ export const Search = ({
         [onChange],
     );
 
+    const Input = debounce === 0 ? TextInput : DebouncedTextInput;
+
     return (
-        <DebouncedTextInput
-            debounce={debounce}
+        <Input
+            {...(debounce === 0 ? {} : {debounce})}
             hasClear
             autoFocus
             controlRef={controlRef}

package/src/components/StorageGroupInfo/StorageGroupInfo.tsx

@@ -6,13 +6,14 @@ import {isNonEmptyValue} from '../../utils';
 import {formatBytes} from '../../utils/bytesParsers';
 import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
-import {formatMetricPercent, formatStorageMetricPair} from '../../utils/storageMetrics';
+import {
+    formatMetricPercent,
+    formatStorageMetricPair,
+    formatStorageThroughput,
+} from '../../utils/storageMetrics';
 import {formatToMs} from '../../utils/timeParsers';
 import {parseOptionalNonNegativeNumber} from '../../utils/utils';
-import {
-    getStorageGroupCapacityInfoItems,
-    toDefinitionListItems,
-} from '../DiskCapacityInfo/DiskCapacityInfo';
+import {getStorageGroupCapacityInfoItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import diskCapacityInfoKeyset from '../DiskCapacityInfo/i18n';
 import {StatusIcon} from '../StatusIcon/StatusIcon';
 import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
@@ -94,13 +95,7 @@ export function StorageGroupInfo({data, className}: StorageGroupInfoProps) {
         ] as const
     ).map(([name, value]) => ({
         name,
-        content:
-            formatBytes({
-                value: parseOptionalNonNegativeNumber(value),
-                size: 'mb',
-                fixedDecimalPlaces: 2,
-                withSpeedLabel: true,
-            }) || EMPTY_DATA_PLACEHOLDER,
+        content: formatStorageThroughput(value),
     }));
     const capacityItems: YDBDefinitionListItem[] = [];
 
@@ -127,7 +122,7 @@ export function StorageGroupInfo({data, className}: StorageGroupInfoProps) {
         },
     );
     if (capacityMetricsEnabled) {
-        capacityItems.push(...toDefinitionListItems(getStorageGroupCapacityInfoItems(data)));
+        capacityItems.push(...getStorageGroupCapacityInfoItems(data));
     } else {
         capacityItems.push(
             {

package/src/components/VDisk/VDisk.tsx

@@ -175,7 +175,7 @@ function getAccessibleName(
     {mode, allMode, isNoData, driveType}: VDiskDisplayState,
 ) {
     if (!mode) {
-        return undefined;
+        return getAccessibleDiskName(data, {mode, isNoData});
     }
     if (mode === 'all') {
         return getAllModeAccessibleName(data, allMode?.hasIssues);
@@ -334,10 +334,11 @@ export const VDisk = ({
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
             onClosePopup={onClosePopup}
-            renderPopupContent={({onClose}) => (
+            renderPopupContent={({onClose, holdOpen}) => (
                 <VDiskPopup
                     data={hidePDiskInPopup ? {...data, PDisk: undefined} : data}
                     onClose={onClose}
+                    onDialogOpen={holdOpen}
                 />
             )}
             offset={popupOffset}

package/src/components/VDiskInfo/VDiskInfo.scss

@@ -1,7 +1,23 @@
 .ydb-vdisk-info {
-    &__info {
-        flex: unset;
+    --g-definition-list-item-gap: var(--g-spacing-3);
 
-        width: 500px;
+    &__metrics {
+        width: 100%;
+    }
+
+    &__column {
+        flex: 1 1 400px;
+
+        min-width: 0;
+        max-width: 500px;
+    }
+
+    &__identity {
+        width: 100%;
+        max-width: 500px;
+    }
+
+    &__disk {
+        width: 55px;
     }
 }