ydb-embedded-ui 22.3.0 → 22.4.0

package/src/components/PDiskInfo/statuses.ts

@@ -0,0 +1,209 @@
+import {Ban, Check, CircleQuestionFill, CircleXmarkFill} from '@gravity-ui/icons';
+
+import type {EDecommitStatus, EDriveStatus, EMaintenanceStatus} from '../../types/api/pdisk';
+import {TPDiskState} from '../../types/api/pdisk';
+import {NOT_AVAILABLE_SEVERITY, NUMERIC_SEVERITY_TO_LABEL_VIEW} from '../../utils/disks/constants';
+import {
+    getPDiskDecommitDisplayState,
+    getPDiskDriveDisplayState,
+    getPDiskMaintenanceDisplayState,
+    getPDiskStateDisplayState,
+} from '../../utils/disks/pdiskState';
+import type {DiskStatusLabelData} from '../DiskStatus/DiskStatus';
+
+import {pDiskInfoKeyset as i18n} from './i18n';
+
+type StatusText = Pick<DiskStatusLabelData, 'value' | 'tooltip'>;
+
+function unknownLabel(): DiskStatusLabelData {
+    return {
+        value: i18n('value_unknown'),
+        tooltip: i18n('context_unknown'),
+        theme: 'unknown',
+        icon: CircleQuestionFill,
+    };
+}
+
+function getLabelView({
+    severity,
+    icon,
+}: ReturnType<typeof getPDiskStateDisplayState>): Pick<
+    DiskStatusLabelData,
+    'theme' | 'icon' | 'dangerHeavy'
+> {
+    const labelView = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
+
+    return {
+        theme: severity === NOT_AVAILABLE_SEVERITY ? 'unknown' : labelView?.theme,
+        icon,
+        dangerHeavy: Boolean(labelView?.dangerHeavy),
+    };
+}
+
+export function getPDiskStateLabel(state?: TPDiskState): DiskStatusLabelData {
+    const labels: Partial<Record<TPDiskState, StatusText>> = {
+        [TPDiskState.Normal]: {value: i18n('value_ok'), tooltip: i18n('context_state-normal')},
+        [TPDiskState.Initial]: {
+            value: i18n('value_initial'),
+            tooltip: i18n('context_state-initial'),
+        },
+        [TPDiskState.InitialFormatRead]: {
+            value: i18n('value_initial-format-read'),
+            tooltip: i18n('context_initial-format-read'),
+        },
+        [TPDiskState.InitialSysLogRead]: {
+            value: i18n('value_initial-sys-log-read'),
+            tooltip: i18n('context_initial-sys-log-read'),
+        },
+        [TPDiskState.InitialCommonLogRead]: {
+            value: i18n('value_initial-common-log-read'),
+            tooltip: i18n('context_initial-common-log-read'),
+        },
+        [TPDiskState.OpenFileError]: {
+            value: i18n('value_open-file-error'),
+            tooltip: i18n('context_open-file-error'),
+        },
+        [TPDiskState.DeviceIoError]: {
+            value: i18n('value_device-io-error'),
+            tooltip: i18n('context_device-io-error'),
+        },
+        [TPDiskState.Stopped]: {value: i18n('value_stopped'), tooltip: i18n('context_stopped')},
+        [TPDiskState.InitialFormatReadError]: {
+            value: i18n('value_initial-format-read-error'),
+            tooltip: i18n('context_initial-format-read-error'),
+        },
+        [TPDiskState.InitialSysLogReadError]: {
+            value: i18n('value_initial-sys-log-read-error'),
+            tooltip: i18n('context_initial-sys-log-read-error'),
+        },
+        [TPDiskState.InitialSysLogParseError]: {
+            value: i18n('value_initial-sys-log-parse-error'),
+            tooltip: i18n('context_initial-sys-log-parse-error'),
+        },
+        [TPDiskState.CommonLoggerInitError]: {
+            value: i18n('value_common-logger-init-error'),
+            tooltip: i18n('context_common-logger-init-error'),
+        },
+        [TPDiskState.InitialCommonLogReadError]: {
+            value: i18n('value_initial-common-log-read-error'),
+            tooltip: i18n('context_initial-common-log-read-error'),
+        },
+        [TPDiskState.InitialCommonLogParseError]: {
+            value: i18n('value_initial-common-log-parse-error'),
+            tooltip: i18n('context_initial-common-log-parse-error'),
+        },
+        [TPDiskState.ChunkQuotaError]: {
+            value: i18n('value_chunk-quota-error'),
+            tooltip: i18n('context_chunk-quota-error'),
+        },
+    };
+    const label = state && Object.hasOwn(labels, state) ? labels[state] : undefined;
+    if (!label) {
+        return unknownLabel();
+    }
+    const {theme, icon, dangerHeavy} = getLabelView(getPDiskStateDisplayState(state));
+    return {
+        ...label,
+        theme,
+        icon: state === TPDiskState.Normal ? Check : icon,
+        dangerHeavy,
+    };
+}
+
+export function getPDiskDriveLabel(status?: EDriveStatus): DiskStatusLabelData | undefined {
+    if (!status || status === 'UNKNOWN') {
+        return undefined;
+    }
+    const labels: Record<Exclude<EDriveStatus, 'UNKNOWN'>, StatusText> = {
+        ACTIVE: {value: i18n('value_active'), tooltip: i18n('context_active')},
+        INACTIVE: {value: i18n('value_inactive'), tooltip: i18n('context_inactive')},
+        TO_BE_REMOVED: {value: i18n('value_to-be-removed'), tooltip: i18n('context_to-be-removed')},
+        FAULTY: {value: i18n('value_faulty'), tooltip: i18n('context_faulty')},
+        BROKEN: {value: i18n('value_broken'), tooltip: i18n('context_broken')},
+    };
+    if (!Object.hasOwn(labels, status)) {
+        return undefined;
+    }
+    const {theme, icon: defaultIcon} = getLabelView(getPDiskDriveDisplayState(status));
+    let icon = defaultIcon;
+    if (status === 'ACTIVE') {
+        icon = Check;
+    } else if (status === 'BROKEN') {
+        icon = CircleXmarkFill;
+    }
+    return {
+        ...labels[status],
+        theme,
+        icon,
+        dangerHeavy: status === 'BROKEN',
+    };
+}
+
+export function getPDiskDecommitLabel(status?: EDecommitStatus): DiskStatusLabelData | undefined {
+    if (!status || status === 'DECOMMIT_UNSET') {
+        return undefined;
+    }
+    const labels: Record<Exclude<EDecommitStatus, 'DECOMMIT_UNSET'>, StatusText> = {
+        DECOMMIT_NONE: {value: i18n('value_decommit-none'), tooltip: i18n('context_decommit-none')},
+        DECOMMIT_PENDING: {
+            value: i18n('value_decommit-pending'),
+            tooltip: i18n('context_decommit-pending'),
+        },
+        DECOMMIT_REJECTED: {
+            value: i18n('value_decommit-rejected'),
+            tooltip: i18n('context_decommit-rejected'),
+        },
+        DECOMMIT_IMMINENT: {
+            value: i18n('value_decommit-imminent'),
+            tooltip: i18n('context_decommit-imminent'),
+        },
+    };
+    if (!Object.hasOwn(labels, status)) {
+        return undefined;
+    }
+    const {theme, icon, dangerHeavy} = getLabelView(getPDiskDecommitDisplayState(status));
+    return {
+        ...labels[status],
+        theme,
+        icon: status === 'DECOMMIT_NONE' ? Ban : icon,
+        dangerHeavy,
+    };
+}
+
+export function getPDiskMaintenanceLabel(
+    status?: EMaintenanceStatus,
+): DiskStatusLabelData | undefined {
+    if (!status) {
+        return undefined;
+    }
+    const labels: Record<EMaintenanceStatus, StatusText> = {
+        NO_REQUEST: {
+            value: i18n('value_maintenance-none'),
+            tooltip: i18n('context_maintenance-none'),
+        },
+        NOT_SET: {
+            value: i18n('value_maintenance-unset'),
+            tooltip: i18n('context_maintenance-unset'),
+        },
+        NO_NEW_VDISKS: {
+            value: i18n('value_maintenance-no-new-vdisks'),
+            tooltip: i18n('context_maintenance-no-new-vdisks'),
+        },
+        LONG_TERM_MAINTENANCE_PLANNED: {
+            value: i18n('value_maintenance-long-term'),
+            tooltip: i18n('context_maintenance-long-term'),
+        },
+    };
+    if (!Object.hasOwn(labels, status)) {
+        return undefined;
+    }
+    const {theme, icon, dangerHeavy} = getLabelView(getPDiskMaintenanceDisplayState(status));
+    return {
+        ...labels[status],
+        title: i18n('label_maintenance'),
+        // An explicitly unset status is shown as a normal state in the popup design.
+        theme: status === 'NOT_SET' ? 'success' : theme,
+        icon: status === 'NOT_SET' ? undefined : icon,
+        dangerHeavy,
+    };
+}

package/src/components/PDiskPopup/PDiskPopup.tsx

@@ -1,137 +1,45 @@
 import React from 'react';
 
 import {Wrench} from '@gravity-ui/icons';
-import {Flex, Label} from '@gravity-ui/uikit';
+import {Divider, Flex} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {getPDiskPagePath} from '../../routes';
 import {useBlobStorageCapacityMetricsEnabled} from '../../store/reducers/capabilities/hooks';
-import {selectNodesMap} from '../../store/reducers/nodesList';
-import {EFlag} from '../../types/api/enums';
-import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {NodeMetadata} from '../../types/store/nodesList';
+import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {createPDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
-import {getStateSeverity} from '../../utils/disks/calculatePDiskSeverity';
-import {NUMERIC_SEVERITY_TO_LABEL_VIEW} from '../../utils/disks/constants';
-import {formatPDiskType} from '../../utils/disks/getPDiskType';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
+import {getDiskLocationItems} from '../../utils/disks/diskInfo/getDiskLocationItems';
 import type {PreparedPDisk} from '../../utils/disks/types';
-import {useTypedSelector} from '../../utils/hooks';
-import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
-import {bytesToGB, isNumeric} from '../../utils/utils';
+import {useNodeMetadata} from '../../utils/hooks/useNodeMetadata';
+import {getPDiskCapacityItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import {
-    getPDiskCapacityInfoItems,
-    toDefinitionListItems,
-} from '../DiskCapacityInfo/DiskCapacityInfo';
+    DiskPopup,
+    DiskPopupHeader,
+    DiskPopupLocation,
+    DiskPopupPanel,
+} from '../DiskPopup/DiskPopup';
+import {DiskStatusLabel} from '../DiskStatus/DiskStatus';
 import {InternalLinkButton} from '../InternalLinkButton';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
-import {StatusIcon} from '../StatusIcon/StatusIcon';
-import type {
-    YDBDefinitionListHeaderLabel,
-    YDBDefinitionListItem,
-} from '../YDBDefinitionList/YDBDefinitionList';
+import {getPDiskLogItems, getPDiskRuntimeItems} from '../PDiskInfo/getPDiskDetails';
+import {
+    getPDiskDecommitLabel,
+    getPDiskDriveLabel,
+    getPDiskMaintenanceLabel,
+    getPDiskStateLabel,
+} from '../PDiskInfo/statuses';
 import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 
 import {pDiskPopupKeyset} from './i18n';
 
-const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
-
-export const preparePDiskData = (
-    data: PreparedPDisk,
-    nodeData?: {Host?: string; DC?: string},
-    capacityMetricsEnabled = false,
-) => {
-    const {AvailableSize, TotalSize, NodeId, Path, Realtime, Type, Device} = data;
-
-    const pdiskData: YDBDefinitionListItem[] = [
-        {
-            name: pDiskPopupKeyset('label_type'),
-            content: formatPDiskType(Type) || pDiskPopupKeyset('value_unknown'),
-        },
-    ];
-
-    if (NodeId) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_node-id'),
-            content: NodeId,
-            copyText: NodeId,
-        });
-    }
-
-    if (nodeData?.Host) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_host'),
-            content: nodeData.Host,
-            copyText: nodeData.Host,
-        });
-    }
-
-    if (nodeData?.DC) {
-        pdiskData.push({name: pDiskPopupKeyset('label_dc'), content: <Label>{nodeData.DC}</Label>});
-    }
-
-    if (Path) {
-        pdiskData.push({name: pDiskPopupKeyset('label_path'), content: Path, copyText: Path});
-    }
-
-    if (capacityMetricsEnabled) {
-        pdiskData.push(
-            ...toDefinitionListItems(
-                getPDiskCapacityInfoItems(data, {
-                    withUsage: true,
-                    withCapacityAlert: true,
-                }),
-            ),
-        );
-    } else if (isNumeric(TotalSize) && isNumeric(AvailableSize)) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_available'),
-            content: `${bytesToGB(AvailableSize)} ${pDiskPopupKeyset('value_of')} ${bytesToGB(TotalSize)}`,
-        });
-    }
-
-    if (Realtime && errorColors.includes(Realtime)) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_realtime'),
-            content: <StatusIcon mode="icons" status={Realtime} />,
-        });
-    }
-
-    if (Device && errorColors.includes(Device)) {
-        pdiskData.push({
-            name: pDiskPopupKeyset('label_device'),
-            content: <StatusIcon mode="icons" status={Device} />,
-        });
-    }
-
-    return pdiskData;
-};
-
-export const preparePDiskHeaderLabels = (data: PreparedPDisk): YDBDefinitionListHeaderLabel[] => {
-    const labels: YDBDefinitionListHeaderLabel[] = [];
-    const {State} = data;
-
-    if (!State) {
-        labels.push({
-            id: 'state',
-            value: pDiskPopupKeyset('context_not-available'),
-        });
-
-        return labels;
-    }
-
-    if (State) {
-        const severity = getStateSeverity(State);
-        const {theme, icon} = NUMERIC_SEVERITY_TO_LABEL_VIEW[severity];
-
-        labels.push({
-            id: 'state',
-            value: State,
-            theme: theme,
-            icon: icon,
-        });
-    }
-
-    return labels;
-};
+function getStorageItems(data: PreparedPDisk, capacityMetricsEnabled: boolean): DiskDetailItem[] {
+    const items = getPDiskCapacityItems(data, {useWhiteboardSize: capacityMetricsEnabled}).filter(
+        ({id}) => capacityMetricsEnabled || id === 'space',
+    );
+    return [...items, ...getPDiskLogItems(data)];
+}
 
 export const buildPDiskFooter = (
     data: PreparedPDisk,
@@ -175,41 +83,48 @@ export const buildPDiskFooter = (
 
 interface PDiskPopupProps {
     data: PreparedPDisk;
+    nodeData?: NodeMetadata;
 }
 
-export const PDiskPopup = ({data}: PDiskPopupProps) => {
-    const database = useDatabaseFromQuery();
+export function PDiskPopupContent({data, nodeData: parentNodeData}: PDiskPopupProps) {
+    const nodeData = useNodeMetadata(data.NodeId, parentNodeData);
     const hasDeveloperUi = useHasDeveloperUi();
     const capacityMetricsEnabled = useBlobStorageCapacityMetricsEnabled();
-    const nodesMap = useTypedSelector((state) => selectNodesMap(state, database));
-    const nodeData = isNil(data.NodeId) ? undefined : nodesMap?.get(data.NodeId);
-
-    const info = React.useMemo(
-        () => preparePDiskData(data, nodeData, capacityMetricsEnabled),
-        [data, nodeData, capacityMetricsEnabled],
-    );
-
-    const headerLabels = React.useMemo<YDBDefinitionListHeaderLabel[]>(
-        () => preparePDiskHeaderLabels(data),
-        [data],
-    );
+    const storageItems = getStorageItems(data, capacityMetricsEnabled);
+    const locationItems = getDiskLocationItems(data, nodeData);
+    const statusLabels = [
+        {id: 'state', label: getPDiskStateLabel(data.State)},
+        {id: 'drive', label: getPDiskDriveLabel(data.DriveStatus)},
+        {id: 'decommit', label: getPDiskDecommitLabel(data.DecommitStatus)},
+        {id: 'maintenance', label: getPDiskMaintenanceLabel(data.MaintenanceStatus)},
+    ];
 
-    const footer = React.useMemo(
-        () => buildPDiskFooter(data, hasDeveloperUi),
-        [data, hasDeveloperUi],
+    return (
+        <DiskPopupPanel footer={buildPDiskFooter(data, hasDeveloperUi)}>
+            <DiskPopupHeader
+                title={pDiskPopupKeyset('label_pdisk')}
+                id={data.StringifiedId}
+                type={data.Type}
+                statuses={statusLabels.map(({id, label}) =>
+                    label ? <DiskStatusLabel key={id} {...label} size="xs" /> : null,
+                )}
+            />
+            <DiskPopupLocation items={locationItems} />
+            <YDBDefinitionList items={getPDiskRuntimeItems(data)} nameMaxWidth={150} />
+            {storageItems.length > 0 && (
+                <React.Fragment>
+                    <Divider />
+                    <YDBDefinitionList items={storageItems} nameMaxWidth={150} />
+                </React.Fragment>
+            )}
+        </DiskPopupPanel>
     );
+}
 
-    const pdiskId = data.StringifiedId;
-
+export function PDiskPopup(props: PDiskPopupProps) {
     return (
-        <YDBDefinitionList
-            compact
-            title="PDisk"
-            titleSuffix={{title: pdiskId ?? EMPTY_DATA_PLACEHOLDER, copyText: pdiskId}}
-            items={info}
-            headerLabels={headerLabels}
-            footer={footer}
-            nameMaxWidth={capacityMetricsEnabled ? 220 : 100}
-        />
+        <DiskPopup>
+            <PDiskPopupContent {...props} />
+        </DiskPopup>
     );
-};
+}

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

@@ -1,15 +1,5 @@
 {
-  "context_not-available": "Not available",
-  "label_type": "Type",
-  "label_node-id": "Node Id",
-  "label_host": "Host",
-  "label_dc": "DC",
-  "label_path": "Path",
-  "label_available": "Available",
-  "label_realtime": "Realtime",
-  "label_device": "Device",
-  "value_unknown": "unknown",
-  "value_of": "of",
   "action_open-in-developer-ui": "Open in Developer UI",
-  "action_go-to-pdisk": "Go to PDisk"
+  "action_go-to-pdisk": "Go to PDisk",
+  "label_pdisk": "PDisk"
 }

package/src/components/StorageGroupInfo/StorageGroupInfo.scss

@@ -0,0 +1,21 @@
+.ydb-storage-group-info {
+    gap: var(--g-spacing-4) var(--g-spacing-6);
+
+    &__configuration {
+        width: 400px;
+        max-width: 100%;
+    }
+
+    &__capacity {
+        width: 500px;
+        max-width: 100%;
+    }
+
+    .g-definition-list {
+        --g-definition-list-item-gap: var(--g-spacing-3);
+    }
+
+    .g-definition-list__definition {
+        min-width: 0;
+    }
+}