ydb-embedded-ui 22.3.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/lib.ts

@@ -46,6 +46,7 @@ export type {
     IllustrationComponent,
     IllustrationName,
     RenderHealthcheckAssistantAction,
+    HealthcheckDrawerExtensionProps,
 } from './uiFactory/types';
 export type {
     HealthcheckAssistantActionProps,

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/header/types.ts

@@ -76,7 +76,9 @@ export type PageBreadcrumbsOptions<T extends Page = undefined> = T extends 'home
           ? NodeBreadcrumbsOptions
           : T extends 'tablet'
             ? TabletBreadcrumbsOptions
-            : {};
+            : T extends 'storageGroup'
+              ? StorageGroupBreadcrumbsOptions
+              : {};
 
 export interface HeaderState {
     page?: Page;

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

@@ -5,6 +5,7 @@ export interface PDiskData extends PreparedPDisk {
     NodeHost?: string;
     NodeType?: string;
     NodeDC?: string;
+    NodeRack?: string;
     SlotItems?: (SlotItem<'vDisk'> | SlotItem<'log'> | SlotItem<'empty'>)[];
 }
 

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

@@ -62,9 +62,11 @@ export function preparePDiskDataResponse([pdiskResponse = {}, nodeResponse]: [
         };
     }
 
-    const preparedVDisks = WhiteboardVDisksData.map((disk) =>
-        prepareWhiteboardVDiskData({...disk, NodeId}),
-    );
+    const preparedVDisks = WhiteboardVDisksData.map((disk) => ({
+        ...prepareWhiteboardVDiskData({...disk, NodeId}),
+        PDiskType: preparedPDisk.Type,
+        PDiskPath: preparedPDisk.Path,
+    }));
 
     setDonorRecipientReferences((cb) => {
         for (const vDisk of preparedVDisks) {
@@ -145,6 +147,7 @@ export function preparePDiskDataResponse([pdiskResponse = {}, nodeResponse]: [
         NodeHost: preparedNode.Host,
         NodeType: preparedNode.Roles?.[0],
         NodeDC: preparedNode.DC,
+        NodeRack: preparedNode.Rack,
         SlotItems: diskSlots,
     };
 }

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

@@ -32,31 +32,14 @@ export function prepareGroupsVDisk(data: TStorageVDisk = {}): PreparedVDisk {
         SlotSize: PDisk?.SlotSize,
     });
 
-    const whiteboardAllocatedSize = parseOptionalNonNegativeNumber(whiteboardVDisk.AllocatedSize);
-    const whiteboardAvailableSize = parseOptionalNonNegativeNumber(whiteboardVDisk.AvailableSize);
-    const whiteboardSlotSize = parseOptionalNonNegativeNumber(
-        PDisk?.Whiteboard?.EnforcedDynamicSlotSize,
-    );
-    const whiteboardSizeFields =
+    const WhiteboardSize =
         hasWhiteboardData && data.Whiteboard
             ? prepareVDiskSizeFields({
-                  AvailableSize: whiteboardAvailableSize,
-                  AllocatedSize: whiteboardAllocatedSize,
-                  SlotSize: whiteboardSlotSize,
-              })
+                  AvailableSize: whiteboardVDisk.AvailableSize,
+                  AllocatedSize: whiteboardVDisk.AllocatedSize,
+                  SlotSize: PDisk?.Whiteboard?.EnforcedDynamicSlotSize,
+              }).DisplaySize
             : undefined;
-    const WhiteboardSize = whiteboardSizeFields
-        ? {
-              AllocatedSize:
-                  whiteboardAllocatedSize === undefined
-                      ? undefined
-                      : whiteboardSizeFields.AllocatedSize,
-              SizeLimit:
-                  whiteboardAvailableSize === undefined && whiteboardSlotSize === undefined
-                      ? undefined
-                      : whiteboardSizeFields.SizeLimit,
-          }
-        : undefined;
 
     const preparedDonors = bscVDisk.Donors?.map((donor) => {
         const preparedDonor = prepareGroupsVDisk(donor);
@@ -77,6 +60,8 @@ export function prepareGroupsVDisk(data: TStorageVDisk = {}): PreparedVDisk {
         HasWhiteboardData: hasWhiteboardData,
         ...(WhiteboardSize ? {WhiteboardSize} : {}),
         PDisk: preparedPDisk,
+        PDiskType: preparedPDisk.Type,
+        PDiskPath: preparedPDisk.Path,
         Donors: preparedDonors,
         PDiskId,
         StringifiedId,
@@ -152,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;
 
@@ -88,10 +98,14 @@ const prepareStorageNodeData = (
                 pDisk.Realtime !== undefined);
         return prepareWhiteboardPDiskData({...pDisk, NodeId}, hasWhiteboardData ? pDisk : null);
     });
+    const pDisksById = new Map(pDisks?.map((pDisk) => [pDisk.PDiskId, pDisk]));
     const vDisks = VDisks?.map((vDisk) => {
+        const pDisk = vDisk.PDiskId === undefined ? undefined : pDisksById.get(vDisk.PDiskId);
         return {
             ...prepareWhiteboardVDiskData({...vDisk, VDiskId: vDisk.VDiskId}),
             NodeId,
+            PDiskType: pDisk?.Type,
+            PDiskPath: pDisk?.Path,
         };
     });
 
@@ -243,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/streamingQuery/streamingQuery.ts

@@ -3,12 +3,10 @@ import {isQueryErrorResponse, parseQueryAPIResponse} from '../../../utils/query'
 import {api} from '../api';
 
 function getStreamingQueryInfoSQL(path: string) {
+    // Select available columns so older backends without lifecycle fields remain supported.
     const safePath = path.replace(/'/g, "''");
     return `${QUERY_TECHNICAL_MARK}
-SELECT
-    Status AS State,
-    Issues AS Error,
-    Text
+SELECT * WITHOUT Plan, Ast
 FROM \`.sys/streaming_queries\`
 WHERE Path = '${safePath}'
 LIMIT 1`;

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;