ydb-embedded-ui 22.4.0 → 22.5.0

package/src/containers/VDiskPage/VDiskStorageDetails.scss

@@ -1,129 +1,60 @@
 .ydb-vdisk-storage-details {
-    &__title {
-        margin-bottom: var(--g-spacing-4);
-    }
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--g-spacing-1);
 
-    &__cards {
+    &__card {
         display: flex;
         flex-wrap: wrap;
-        align-items: flex-start;
-        gap: var(--g-spacing-1);
-
-        width: fit-content;
-        max-width: 100%;
-    }
+        align-items: center;
+        gap: var(--g-spacing-5);
 
-    &__card {
         min-width: 0;
-        padding: var(--g-spacing-4) var(--g-spacing-5);
+        padding: var(--g-spacing-3) var(--g-spacing-5);
 
         border-radius: var(--g-border-radius-m) var(--g-border-radius-xs) var(--g-border-radius-xs)
             var(--g-border-radius-m);
         background-color: var(--g-color-base-generic);
 
-        &_metrics {
-            display: flex;
-            flex: 0 0 auto;
-            align-items: stretch;
-            gap: var(--g-spacing-5);
-
-            width: max-content;
-            max-width: 100%;
-            min-height: 74px;
-        }
-
-        &_details {
-            display: flex;
-            flex: 0 1 auto;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            align-items: center;
-            gap: var(--g-spacing-4);
-
-            width: fit-content;
-            max-width: 100%;
-            min-height: 74px;
-
+        &_ids {
             border-radius: var(--g-border-radius-xs) var(--g-border-radius-m)
                 var(--g-border-radius-m) var(--g-border-radius-xs);
         }
     }
 
-    &__details {
-        display: flex;
-        flex: 0 1 auto;
-        flex-wrap: wrap;
-        align-items: stretch;
-        gap: var(--g-spacing-4);
-
-        min-width: 0;
-        max-width: 100%;
-    }
-
-    &__metric,
     &__detail {
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        gap: var(--g-spacing-1);
+        gap: var(--g-spacing-half);
 
         min-width: 0;
-        padding-right: var(--g-spacing-4);
-    }
+        max-width: 250px;
 
-    &__detail {
-        flex: 0 1 auto;
-
-        min-width: 100px;
-        max-width: 200px;
-    }
-
-    &__value,
-    &__label {
-        display: block;
-
-        white-space: nowrap;
-    }
-
-    &__value-row &__value {
-        overflow: hidden;
-
-        text-overflow: ellipsis;
-    }
-
-    &__value-row {
-        flex-wrap: nowrap;
-
-        width: 100%;
-        min-width: 0;
-        height: 20px;
-
-        &_copyable {
-            width: auto;
-            max-width: 100%;
+        &_location {
+            min-width: 100px;
+            max-width: 200px;
         }
     }
 
     &__value-popover {
-        flex: 1 1 auto;
+        flex: 0 1 auto;
 
         min-width: 0;
-
-        &_copyable {
-            flex: 0 1 auto;
-
-            max-width: 100%;
-        }
+        max-width: 100%;
     }
 
     &__value-popover-content {
-        width: 100%;
+        width: auto;
         min-width: 0;
+        max-width: 100%;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
 
-        &_copyable {
-            width: auto;
-            max-width: 100%;
+            > span {
+                unicode-bidi: plaintext;
+            }
         }
     }
 }

package/src/containers/VDiskPage/VDiskStorageDetails.tsx

@@ -1,195 +1,87 @@
-import {Button, Divider, Flex, Text} from '@gravity-ui/uikit';
+import {Text} from '@gravity-ui/uikit';
+import {isNil} from 'lodash';
 
 import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
-import {ClipboardButton} from '../../components/ClipboardButton/ClipboardButton';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import {InternalLinkButton} from '../../components/InternalLinkButton';
+import {getVDiskLocationItems} from '../../components/VDiskInfo/getVDiskDetails';
 import {getPDiskPagePath} from '../../routes';
+import {useNewStorageViewEnabled} from '../../store/reducers/capabilities/hooks';
 import type {VDiskData} from '../../store/reducers/vdisk/types';
 import {cn} from '../../utils/cn';
-import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import type {DiskDetailItem} from '../../utils/disks/diskInfo/getDiskLocationItems';
 import {useIsViewerUser} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
-import {
-    formatMetricBytes,
-    formatMetricPercent,
-    getMetricBytesCommonSize,
-} from '../../utils/storageMetrics';
 
 import {vDiskPageKeyset} from './i18n';
 
 import './VDiskStorageDetails.scss';
 
 const b = cn('ydb-vdisk-storage-details');
+const LOCATION_IDS = ['datacenter', 'rack', 'fqdn', 'pdisk-path'];
 
 interface VDiskStorageDetailsProps {
     className?: string;
     data?: VDiskData;
 }
 
-interface MetricItemProps {
-    title: string;
-    value: string;
-}
-
-interface CopyableDetailItemProps {
-    title: string;
-    value?: string | number;
-}
-
-interface DetailItemProps {
-    title: string;
-    value?: string | number;
-}
-
-interface TruncatedDetailValueProps {
-    value?: string | number;
-}
-
-function MetricItem({title, value}: MetricItemProps) {
-    return (
-        <div className={b('metric')}>
-            <Text variant="subheader-2" className={b('value')}>
-                {value}
-            </Text>
-            <Text color="secondary" className={b('label')}>
-                {title}
-            </Text>
-        </div>
-    );
-}
-
-function DetailItem({title, value}: DetailItemProps) {
-    return (
-        <div className={b('detail')}>
-            <TruncatedDetailValue value={value} />
-            <Text color="secondary" className={b('label')}>
-                {title}
-            </Text>
-        </div>
-    );
-}
-
-function TruncatedDetailValue({value}: TruncatedDetailValueProps) {
-    const normalizedValue =
-        value === undefined || value === null || value === '' ? undefined : String(value);
-    const displayValue = normalizedValue ?? EMPTY_DATA_PLACEHOLDER;
-
+function DetailItem({item}: {item: DiskDetailItem}) {
+    const copyText = item.copyText === undefined ? undefined : String(item.copyText);
     return (
-        <CellWithPopover
-            content={normalizedValue}
-            disabled={!normalizedValue}
-            placement={['top', 'bottom']}
-            fullWidth
-            wrapperClassName={b('value-popover')}
-            className={b('value-popover-content')}
+        <div
+            className={b('detail', {location: LOCATION_IDS.includes(item.id)})}
+            data-qa={`vdisk-location-${item.id}`}
         >
-            <Text variant="subheader-2" className={b('value')}>
-                {displayValue}
-            </Text>
-        </CellWithPopover>
-    );
-}
-
-function CopyableDetailItem({title, value}: CopyableDetailItemProps) {
-    const normalizedValue =
-        value === undefined || value === null || value === '' ? undefined : String(value);
-    const displayValue = normalizedValue ?? EMPTY_DATA_PLACEHOLDER;
-
-    return (
-        <div className={b('detail')}>
-            <Flex alignItems="center" gap="1" className={b('value-row', {copyable: true})}>
+            <Text color="secondary">{item.name}</Text>
+            <CopyableValue copyText={copyText} fieldName={item.name}>
                 <CellWithPopover
-                    content={normalizedValue}
-                    disabled={!normalizedValue}
+                    content={copyText}
+                    disabled={!copyText}
                     placement={['top', 'bottom']}
                     fullWidth
-                    wrapperClassName={b('value-popover', {copyable: true})}
-                    className={b('value-popover-content', {copyable: true})}
+                    wrapperClassName={b('value-popover')}
+                    className={b('value-popover-content', {
+                        'with-left-trim': item.id === 'pdisk-path',
+                    })}
                 >
-                    <Text variant="subheader-2" className={b('value')}>
-                        {displayValue}
-                    </Text>
+                    <span tabIndex={copyText ? 0 : undefined}>{item.content}</span>
                 </CellWithPopover>
-                <ClipboardButton
-                    copyText={normalizedValue}
-                    withLabel={false}
-                    view="flat-secondary"
-                    size="s"
-                />
-            </Flex>
-            <Text color="secondary" className={b('label')}>
-                {title}
-            </Text>
+            </CopyableValue>
         </div>
     );
 }
 
-export function VDiskStorageDetails({className, data}: VDiskStorageDetailsProps) {
+export function VDiskStorageDetails({className, data = {}}: VDiskStorageDetailsProps) {
     const isViewerUser = useIsViewerUser();
-
-    const used = Number(data?.AllocatedSize);
-    const total = Number(data?.SizeLimit);
-    const usage = Number(data?.AllocatedPercent);
-    const free = Number(data?.FreeSize);
-    const metricsSize = getMetricBytesCommonSize([used, total, free]);
-
-    const {NodeDC, NodeRack, NodeHost, NodeId, PDiskId} = data || {};
-
+    const newStorageViewEnabled = useNewStorageViewEnabled();
     const pDiskPath =
-        isViewerUser && NodeId !== undefined && PDiskId !== undefined
-            ? getPDiskPagePath(PDiskId, NodeId, undefined, {withBasename: true})
+        isViewerUser && !isNil(data.NodeId) && !isNil(data.PDiskId)
+            ? getPDiskPagePath(data.PDiskId, data.NodeId)
             : undefined;
+    const items = getVDiskLocationItems(data, {
+        Host: data.NodeHost,
+        Rack: data.NodeRack,
+        DC: data.NodeDC,
+    }).filter(({id}) => newStorageViewEnabled || (id !== 'rack' && id !== 'pdisk-path'));
 
     return (
-        <div className={b(null, className)}>
-            <Flex alignItems="center" gap="1" className={b('title')}>
-                <Text variant="subheader-2">{vDiskPageKeyset('title_storage-details')}</Text>
-            </Flex>
-            <div className={b('cards')}>
-                <div className={b('card', {metrics: true})}>
-                    <MetricItem
-                        title={vDiskPageKeyset('field_storage-details-used')}
-                        value={formatMetricBytes(used, metricsSize)}
-                    />
-                    <MetricItem
-                        title={vDiskPageKeyset('field_storage-details-total')}
-                        value={formatMetricBytes(total, metricsSize)}
-                    />
-                    <MetricItem
-                        title={vDiskPageKeyset('field_storage-details-free')}
-                        value={formatMetricBytes(free, metricsSize)}
-                    />
-                    <Divider orientation="vertical" />
-                    <MetricItem
-                        title={vDiskPageKeyset('field_storage-details-usage')}
-                        value={formatMetricPercent(usage)}
-                    />
-                </div>
-                <div className={b('card', {details: true})}>
-                    <div className={b('details')}>
-                        <DetailItem title={vDiskPageKeyset('field_datacenter')} value={NodeDC} />
-                        <CopyableDetailItem
-                            title={vDiskPageKeyset('field_rack')}
-                            value={NodeRack}
-                        />
-                        <CopyableDetailItem
-                            title={vDiskPageKeyset('field_node')}
-                            value={NodeHost}
-                        />
-                        <CopyableDetailItem
-                            title={vDiskPageKeyset('field_pdisk-id')}
-                            value={PDiskId}
-                        />
-                    </div>
-                    {pDiskPath ? (
-                        <Button
-                            href={pDiskPath}
-                            view="action"
-                            size="m"
-                            className={BRAND_BUTTON_CLASS}
-                        >
-                            {vDiskPageKeyset('action_go-to-pdisk')}
-                        </Button>
-                    ) : null}
-                </div>
+        <div className={b(null, className)} data-qa="vdisk-location">
+            <div className={b('card')}>
+                {LOCATION_IDS.map((id) => {
+                    const item = items.find((entry) => entry.id === id);
+                    return item ? <DetailItem key={id} item={item} /> : null;
+                })}
+            </div>
+            <div className={b('card', {ids: true})}>
+                {items
+                    .filter(({id}) => !LOCATION_IDS.includes(id))
+                    .map((item) => (
+                        <DetailItem key={item.id} item={item} />
+                    ))}
+                {pDiskPath && (
+                    <InternalLinkButton href={pDiskPath} size="s" view="normal">
+                        {vDiskPageKeyset('action_go-to-pdisk')}
+                    </InternalLinkButton>
+                )}
             </div>
         </div>
     );

package/src/containers/VDiskPage/i18n/en.json

@@ -1,25 +1,14 @@
 {
-  "fqdn": "FQDN",
   "node": "Node",
   "pdisk": "PDisk",
   "vdisk": "VDisk",
   "storage": "Storage",
   "tablets": "Tablets",
-  "title_storage-details": "Storage details",
-  "field_storage-details-used": "Used",
-  "field_storage-details-total": "Total",
-  "field_storage-details-free": "Free",
-  "field_storage-details-usage": "Usage",
-  "field_datacenter": "Datacenter",
-  "field_rack": "Rack",
-  "field_node": "Node",
-  "field_pdisk-id": "PDisk ID",
+  "action_back": "Back",
   "action_go-to-pdisk": "Go to PDisk",
-
+  "action_open-in-developer-ui": "Open in Developer UI",
   "tablet-id": "Tablet ID",
   "channel-id": "Channel ID",
   "count": "Count",
-  "size": "Size",
-
-  "label_donor": "Donor"
+  "size": "Size"
 }

package/src/store/reducers/cluster/parseFields.ts

@@ -118,6 +118,7 @@ export function parseLoggingUrls(
 }
 
 const settingsSchema = z.object({
+    unavailable: z.boolean().optional().catch(undefined),
     use_meta_proxy: z.boolean().optional(),
     cluster_domain: z.string().optional(),
     cluster_external_name: z.string().optional(),

package/src/store/reducers/clusters/clusters.ts

@@ -8,6 +8,7 @@ import type {ClustersFilters} from './types';
 import {prepareClustersData} from './utils';
 
 const initialState: ClustersFilters = {
+    availability: ['available'],
     clusterName: '',
     status: [],
     service: [],

package/src/store/reducers/clusters/selectors.ts

@@ -9,6 +9,7 @@ export const selectStatusFilter = (state: ClustersStateSlice) => state.clusters.
 export const selectServiceFilter = (state: ClustersStateSlice) => state.clusters.service;
 export const selectVersionFilter = (state: ClustersStateSlice) => state.clusters.version;
 export const selectGalaxyFilter = (state: ClustersStateSlice) => state.clusters.galaxy;
+export const selectAvailabilityFilter = (state: ClustersStateSlice) => state.clusters.availability;
 
 // ==== Filters ====
 
@@ -85,6 +86,9 @@ const isMatchesByTextQuery = (clusterData: PreparedCluster, searchQuery = '') =>
 export function filterClusters(clusters: PreparedCluster[], filters: ClustersFilters) {
     return clusters.filter((cluster) => {
         return (
+            filters.availability.includes(
+                cluster.settings?.unavailable === true ? 'unavailable' : 'available',
+            ) &&
             isMatchesByGalaxy(cluster, filters.galaxy) &&
             isMatchesByStatus(cluster, filters.status) &&
             isMatchesByService(cluster, filters.service) &&

package/src/store/reducers/clusters/types.ts

@@ -26,7 +26,10 @@ export interface PreparedCluster extends Omit<MetaExtendedClusterInfo, 'name' |
     clusterExternalName?: string;
 }
 
+export type ClusterAvailability = 'available' | 'unavailable';
+
 export interface ClustersFilters {
+    availability: ClusterAvailability[];
     status: string[];
     service: string[];
     version: string[];

package/src/store/reducers/storage/prepareGroupsDisks.ts

@@ -137,6 +137,8 @@ export function prepareGroupsPDisk(data: TStoragePDisk & {NodeId?: number} = {})
         Type,
         Severity,
         SlotSize,
+        ExpectedSlotCount:
+            mergedPDiskData.ExpectedSlotCount ?? parseOptionalNonNegativeNumber(bscPDisk.SlotCount),
         DriveStatus,
     };
 }

package/src/store/reducers/storage/utils.ts

@@ -37,6 +37,16 @@ const normalizeMaxPercent = (value: number | string | null | undefined): number
 
 // ==== Prepare groups ====
 
+function parseLatencyUsToMs(value: unknown): number | undefined {
+    if (typeof value !== 'string' && typeof value !== 'number') {
+        return undefined;
+    }
+
+    const latency = parseOptionalNonNegativeNumber(value);
+
+    return latency === undefined ? undefined : parseUsToMs(latency);
+}
+
 function getGroupDiskSpaceStatus(group: TGroupsStorageGroupInfo): EFlag {
     const {DiskSpace, VDisks = []} = group;
 
@@ -247,9 +257,9 @@ export function prepareGroupsResponse(data: StorageGroupsResponse): PreparedStor
             Used: Number(Used),
             Limit: Number(Limit),
 
-            LatencyPutTabletLogMs: parseUsToMs(LatencyPutTabletLog),
-            LatencyPutUserDataMs: parseUsToMs(LatencyPutUserData),
-            LatencyGetFastMs: parseUsToMs(LatencyGetFast),
+            LatencyPutTabletLogMs: parseLatencyUsToMs(LatencyPutTabletLog),
+            LatencyPutUserDataMs: parseLatencyUsToMs(LatencyPutUserData),
+            LatencyGetFastMs: parseLatencyUsToMs(LatencyGetFast),
 
             Degraded: Number(MissingDisks),
             Overall,

package/src/store/reducers/vdisk/types.ts

@@ -1,9 +1,10 @@
 import type {PreparedVDisk} from '../../../utils/disks/types';
 
 export interface VDiskData extends PreparedVDisk {
+    Recipient?: PreparedVDisk;
+
     NodeId?: number;
     NodeHost?: string;
-    NodeType?: string;
     NodeDC?: string;
     NodeRack?: string;
 

package/src/store/reducers/vdisk/utils.ts

@@ -1,6 +1,5 @@
 import type {StorageGroupsResponse} from '../../../types/api/storage';
 import type {TEvSystemStateResponse} from '../../../types/api/systemState';
-import type {PreparedVDisk} from '../../../utils/disks/types';
 import {prepareNodeSystemState} from '../../../utils/nodes';
 import {prepareGroupsVDisk} from '../storage/prepareGroupsDisks';
 
@@ -20,14 +19,16 @@ export function prepareVDiskDataResponse(
 
     const preparedVDisk = prepareGroupsVDisk(rawVDisk);
 
-    let currentVDisk: PreparedVDisk = {};
+    let currentVDisk: VDiskData = {};
 
     if (preparedVDisk.StringifiedId === vDiskId) {
         currentVDisk = preparedVDisk;
     } else {
         for (const donor of preparedVDisk.Donors ?? []) {
             if (donor.StringifiedId === vDiskId) {
-                currentVDisk = donor;
+                // Keep the recipient's metrics without a back-reference to this donor.
+                const {Donors: _donors, ...recipient} = preparedVDisk;
+                currentVDisk = {...donor, Recipient: recipient};
                 break;
             }
         }
@@ -40,7 +41,6 @@ export function prepareVDiskDataResponse(
 
     const NodeId = currentVDisk.NodeId ?? preparedPDisk?.NodeId ?? preparedNode.NodeId;
     const NodeHost = preparedNode.Host;
-    const NodeType = preparedNode.Roles?.[0];
     const NodeDC = preparedNode.DC;
     const NodeRack = preparedNode.Rack;
 
@@ -52,7 +52,6 @@ export function prepareVDiskDataResponse(
 
         NodeId,
         NodeHost,
-        NodeType,
         NodeDC,
         NodeRack,
 

package/src/types/api/meta.ts

@@ -105,6 +105,7 @@ export interface MetaClusterTraceCheck {
 }
 
 export interface MetaClusterSettings {
+    unavailable?: boolean;
     use_meta_proxy?: boolean;
     auth_service?: string;
     cluster_domain?: string;

package/src/types/api/nodesList.ts

@@ -1,3 +1,5 @@
+import type {TSystemStateInfo} from './nodes';
+
 /**
  * endpoint: /viewer/json/nodesList
  *
@@ -11,6 +13,7 @@ export interface TNodeInfo {
     ResolveHost?: string;
     Address?: string;
     Port?: number;
+    Location?: TSystemStateInfo['Location'];
     PhysicalLocation?: TNodeLocation;
 }
 

package/src/utils/hooks/useDatabaseHealthcheckAvailable.ts

@@ -0,0 +1,9 @@
+import type {ETenantType} from '../../types/api/tenant';
+
+import {useIsUserAllowedToMakeChanges} from './useIsUserAllowedToMakeChanges';
+
+export function useDatabaseHealthcheckAvailable(databaseType?: ETenantType) {
+    const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
+
+    return isUserAllowedToMakeChanges && databaseType !== 'Serverless';
+}

package/src/utils/memory.ts

@@ -0,0 +1,16 @@
+import type {TSystemStateInfo} from '../types/api/nodes';
+
+import {parseOptionalNonNegativeNumber} from './utils';
+
+export function getNodeMemory(
+    node: Pick<TSystemStateInfo, 'MemoryStats' | 'MemoryUsed' | 'MemoryLimit'>,
+) {
+    // Match the backend's process usage and sorting, including its allocator fallback.
+    const memoryUsed =
+        parseOptionalNonNegativeNumber(node.MemoryUsed) ??
+        parseOptionalNonNegativeNumber(node.MemoryStats?.AnonRss) ??
+        parseOptionalNonNegativeNumber(node.MemoryStats?.AllocatedMemory);
+    const memoryLimit = parseOptionalNonNegativeNumber(node.MemoryLimit) || undefined;
+
+    return {memoryUsed, memoryLimit};
+}

package/src/utils/nodes.ts

@@ -34,11 +34,12 @@ export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
         if (valueIsDefined(node.Id)) {
             const physicalLocation = node.PhysicalLocation;
             // The legacy numeric Rack can be a hash of the actual rack name.
-            const Rack = physicalLocation?.Location?.match(/(?:^|\/)R=([^/]+)/)?.[1];
+            const Rack =
+                node.Location?.Rack || physicalLocation?.Location?.match(/(?:^|\/)R=([^/]+)/)?.[1];
 
             nodeHosts.set(node.Id, {
                 Host: node.Host,
-                DC: physicalLocation?.DataCenterId,
+                DC: node.Location?.DataCenter || physicalLocation?.DataCenterId,
                 Rack,
             });
         }

package/src/utils/storageMetrics.ts

@@ -201,6 +201,17 @@ export function formatStorageMetricPair(
         .join(' / ');
 }
 
+export function formatStorageThroughput(value?: string | number) {
+    return (
+        formatBytes({
+            value: parseOptionalNonNegativeNumber(value),
+            size: 'mb',
+            fixedDecimalPlaces: 2,
+            withSpeedLabel: true,
+        }) || EMPTY_DATA_PLACEHOLDER
+    );
+}
+
 export function formatNormalizedMetricPercent(value?: number) {
     const parsedValue = parseOptionalNonNegativeNumber(value);
 

package/dist/components/VDiskInfo/getVDiskCapacityColumns.d.ts

@@ -1,11 +0,0 @@
-import type { PreparedVDisk } from '../../utils/disks/types';
-import type { YDBDefinitionListItem } from '../YDBDefinitionList/YDBDefinitionList';
-interface GetVDiskCapacityColumnsParams {
-    data?: PreparedVDisk;
-    isViewerUser?: boolean;
-}
-export declare function getVDiskCapacityColumns({ data, isViewerUser }: GetVDiskCapacityColumnsParams): {
-    leftColumn: YDBDefinitionListItem[];
-    rightColumn: YDBDefinitionListItem[];
-};
-export {};