ydb-embedded-ui 22.1.0 → 22.2.0

package/src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -60,7 +60,8 @@
 
             border: $border-width solid var(--entity-state-border-color);
 
-            &#{$block}_striped {
+            &#{$block}_striped,
+            &#{$block}_borderless {
                 border: none;
             }
 
@@ -133,6 +134,36 @@
         --entity-state-icon-color: var(--g-color-text-info);
     }
 
+    &_mode-drivetype {
+        @each $type, $theme, $intensity in (ssd misc medium, hdd utility light, nvme info light) {
+            &#{$block}_#{$type} {
+                --entity-state-background-color: var(--g-color-base-#{$theme}-#{$intensity});
+                --ydb-progress-bar-font-color: var(--g-color-text-#{$theme});
+
+                &#{$block}_highlighted {
+                    --entity-state-background-color: var(
+                        --g-color-base-#{$theme}-#{$intensity}-hover
+                    );
+                }
+            }
+        }
+        #{$block}__text-label {
+            overflow: hidden;
+            flex-shrink: 1;
+
+            min-width: 0;
+            padding-right: var(--g-spacing-1);
+
+            white-space: nowrap;
+
+            mask-image: linear-gradient(
+                to right,
+                #000 calc(100% - var(--g-spacing-1)),
+                transparent
+            );
+        }
+    }
+
     &_mode-all {
         &#{$block}_green {
             --entity-state-background-color: transparent;
@@ -358,18 +389,19 @@
 
     // Keep N/D colors independent from expert mode-specific backgrounds.
     &_grey {
-        --ydb-progress-bar-font-color: var(--g-color-text-secondary);
+        --ydb-progress-bar-font-color: var(--g-color-text-primary);
+        --entity-state-font-color: var(--g-color-text-primary);
         --entity-state-icon-color: var(--g-color-text-secondary);
         --entity-state-border-color: none;
-        --entity-state-background-color: var(--g-color-base-neutral-light);
-        --entity-state-fill-color: var(--g-color-base-neutral-light);
+        --entity-state-background-color: var(--g-color-base-neutral-medium);
+        --entity-state-fill-color: var(--g-color-base-neutral-medium);
 
-        color: var(--g-color-text-secondary);
+        color: var(--g-color-text-primary);
         border: none;
 
         &#{$block}_highlighted {
-            --entity-state-background-color: var(--g-color-base-neutral-light-hover);
-            --entity-state-fill-color: var(--g-color-base-neutral-light-hover);
+            --entity-state-background-color: var(--g-color-base-neutral-medium-hover);
+            --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
         }
     }
 
@@ -528,7 +560,7 @@
     }
 
     &__all-mode-missing-data-indicator-icon {
-        color: rgba(162, 162, 162, 1);
+        color: var(--g-color-text-hint);
     }
 
     &__all-mode-front-queues-indicator-slot {
@@ -576,6 +608,12 @@
 
         color: var(--ydb-progress-bar-font-color);
 
+        &_text,
+        &_compact {
+            color: var(--g-color-text-primary);
+            @include mixins.text-caption-2();
+        }
+
         &_text {
             margin-right: var(--g-spacing-1);
         }
@@ -621,6 +659,10 @@
 
         color: var(--entity-state-icon-color, var(--entity-state-border-color));
 
+        &_missing-data {
+            color: var(--g-color-text-hint);
+        }
+
         &_overlap-top-left {
             position: absolute;
             z-index: 3;

package/src/components/PDiskInfo/PDiskInfo.tsx

@@ -5,6 +5,7 @@ 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 type {PreparedPDisk} from '../../utils/disks/types';
 import {getPDiskCapacityInfoItems, toInfoViewerItems} from '../DiskCapacityInfo/DiskCapacityInfo';
 import type {InfoViewerItem} from '../InfoViewer';
@@ -57,7 +58,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
     const generalInfo: InfoViewerItem[] = [];
 
     if (valueIsDefined(Category)) {
-        generalInfo.push({label: pDiskInfoKeyset('type'), value: Type});
+        generalInfo.push({label: pDiskInfoKeyset('type'), value: formatPDiskType(Type)});
     }
     if (valueIsDefined(Path)) {
         generalInfo.push({label: pDiskInfoKeyset('path'), value: Path});

package/src/components/PDiskPopup/PDiskPopup.tsx

@@ -12,6 +12,7 @@ import {BRAND_BUTTON_CLASS, EMPTY_DATA_PLACEHOLDER} 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 {PreparedPDisk} from '../../utils/disks/types';
 import {useTypedSelector} from '../../utils/hooks';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
@@ -41,7 +42,10 @@ export const preparePDiskData = (
     const {AvailableSize, TotalSize, NodeId, Path, Realtime, Type, Device} = data;
 
     const pdiskData: YDBDefinitionListItem[] = [
-        {name: pDiskPopupKeyset('label_type'), content: Type || pDiskPopupKeyset('value_unknown')},
+        {
+            name: pDiskPopupKeyset('label_type'),
+            content: formatPDiskType(Type) || pDiskPopupKeyset('value_unknown'),
+        },
     ];
 
     if (NodeId) {

package/src/components/PaginatedTable/PaginatedTable.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
 import {useStore} from 'react-redux';
 
 import type {RootState} from '../../store';
@@ -78,14 +79,7 @@ export const PaginatedTable = <T, F>({
 }: PaginatedTableProps<T, F>) => {
     const store = useStore<RootState>();
     // Get state and setters from context
-    const {
-        tableState,
-        noBatching,
-        setSortParams,
-        setTotalEntities,
-        setFoundEntities,
-        setIsInitialLoad,
-    } = usePaginatedTableState();
+    const {tableState, noBatching, setSortParams, dispatchCounts} = usePaginatedTableState();
 
     const {sortParams, foundEntities} = tableState;
     const activeSortParams = isSortColumnAvailable(sortParams, columns) ? sortParams : undefined;
@@ -100,6 +94,27 @@ export const PaginatedTable = <T, F>({
         setFilters(rawFilters);
     }, [rawFilters]);
 
+    const nextCountsQuery = omit(
+        getTableChunkQueryParams({
+            offset: 0,
+            limit: chunkSize,
+            fetchData,
+            filters,
+            sortParams: activeSortParams,
+            columns,
+            tableName,
+            noBatching,
+        }),
+        'offset',
+        'fetchData',
+    );
+    const [countsQuery, setCountsQuery] = React.useState(nextCountsQuery);
+
+    // Resizing columns must not replay cached chunk responses through a new callback.
+    if (!isEqual(countsQuery, nextCountsQuery)) {
+        setCountsQuery(nextCountsQuery);
+    }
+
     const getQueryParams = (offset: number) =>
         getTableChunkQueryParams({
             offset,
@@ -186,15 +201,16 @@ export const PaginatedTable = <T, F>({
     };
 
     const handleDataFetched = React.useCallback(
-        (data?: PaginatedTableData<T>) => {
-            if (data) {
-                setTotalEntities(data.total);
-                setFoundEntities(data.found);
-                setIsInitialLoad(false);
-                onDataFetched?.(data);
-            }
+        (data: PaginatedTableData<T>) => {
+            dispatchCounts({
+                type: 'dataReceived',
+                query: countsQuery,
+                total: data.total,
+                found: data.found,
+            });
+            onDataFetched?.(data);
         },
-        [onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
+        [countsQuery, dispatchCounts, onDataFetched],
     );
 
     // Set will-change: transform on scroll container if not already set
@@ -208,15 +224,9 @@ export const PaginatedTable = <T, F>({
         }
     }, [scrollContainerRef.current]);
 
-    // Reset table on initialization and filters change
     React.useLayoutEffect(() => {
-        const defaultTotal = initialEntitiesCount || 0;
-        const defaultFound = initialEntitiesCount || 1;
-
-        setTotalEntities(defaultTotal);
-        setFoundEntities(defaultFound);
-        setIsInitialLoad(true);
-    }, [initialEntitiesCount, setTotalEntities, setFoundEntities, setIsInitialLoad]);
+        dispatchCounts({type: 'initialize', query: countsQuery, initialEntitiesCount});
+    }, [countsQuery, initialEntitiesCount, dispatchCounts]);
 
     const renderTable = () => (
         <table className={b('table')}>

package/src/components/PaginatedTable/PaginatedTableContext.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type {TableCountsAction} from './tableCounts';
+import {tableCountsReducer} from './tableCounts';
 import type {PaginatedTableState} from './types';
 
 // Default state for the table
@@ -18,18 +20,14 @@ interface PaginatedTableStateContextType {
 
     // Granular setters
     setSortParams: (params: PaginatedTableState['sortParams']) => void;
-    setTotalEntities: (total: number) => void;
-    setFoundEntities: (found: number) => void;
-    setIsInitialLoad: (isInitial: boolean) => void;
+    dispatchCounts: React.Dispatch<TableCountsAction>;
 }
 
 // Creating the context with default values
 export const PaginatedTableStateContext = React.createContext<PaginatedTableStateContextType>({
     tableState: defaultTableState,
     setSortParams: () => undefined,
-    setTotalEntities: () => undefined,
-    setFoundEntities: () => undefined,
-    setIsInitialLoad: () => undefined,
+    dispatchCounts: () => undefined,
 });
 
 // Provider component props
@@ -45,18 +43,17 @@ export const PaginatedTableProvider = ({
     initialState = {},
     noBatching,
 }: PaginatedTableStateProviderProps) => {
-    // Use individual state variables for each field
     const [sortParams, setSortParams] = React.useState<PaginatedTableState['sortParams']>(
         initialState.sortParams ?? defaultTableState.sortParams,
     );
-    const [totalEntities, setTotalEntities] = React.useState<number>(
-        initialState.totalEntities ?? defaultTableState.totalEntities,
-    );
-    const [foundEntities, setFoundEntities] = React.useState<number>(
-        initialState.foundEntities ?? defaultTableState.foundEntities,
-    );
-    const [isInitialLoad, setIsInitialLoad] = React.useState<boolean>(
-        initialState.isInitialLoad ?? defaultTableState.isInitialLoad,
+    const [{totalEntities, foundEntities, isInitialLoad}, dispatchCounts] = React.useReducer(
+        tableCountsReducer,
+        {
+            totalEntities: initialState.totalEntities ?? defaultTableState.totalEntities,
+            foundEntities: initialState.foundEntities ?? defaultTableState.foundEntities,
+            isInitialLoad: initialState.isInitialLoad ?? defaultTableState.isInitialLoad,
+            hasLoadedData: initialState.isInitialLoad === false,
+        },
     );
 
     // Construct tableState from individual state variables
@@ -70,15 +67,13 @@ export const PaginatedTableProvider = ({
         [sortParams, totalEntities, foundEntities, isInitialLoad],
     );
 
-    // Create the context value with the constructed tableState and direct setters
+    // Create the context value with the constructed tableState and its update functions
     const contextValue = React.useMemo(
         () => ({
             tableState,
             noBatching,
             setSortParams,
-            setTotalEntities,
-            setFoundEntities,
-            setIsInitialLoad,
+            dispatchCounts,
         }),
         [tableState, noBatching],
     );

package/src/components/PaginatedTable/TableChunk.tsx

@@ -42,7 +42,7 @@ interface TableChunkProps<T, F> {
     onRowClick?: OnRowClick<T>;
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
-    onDataFetched: (data?: PaginatedTableData<T>) => void;
+    onDataFetched: (data: PaginatedTableData<T>) => void;
 
     keepCache?: boolean;
 }
@@ -104,8 +104,9 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         };
     }, [shouldFetch, isTimeoutActive]);
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         if (currentData) {
+            // Consumers derive row dimensions from the response before loaded rows are painted.
             onDataFetched({
                 ...currentData,
                 data: currentData.data as T[],

package/src/components/PaginatedTable/TableChunksRenderer.tsx

@@ -30,7 +30,7 @@ export interface TableChunksRendererProps<T, F> {
     onRowClick?: OnRowClick<T>;
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
-    onDataFetched: (data?: PaginatedTableData<T>) => void;
+    onDataFetched: (data: PaginatedTableData<T>) => void;
     onActiveChunkOffsetsChange: (offsets: number[]) => void;
     keepCache: boolean;
     fetchOverscan?: number;

package/src/components/PaginatedTable/tableCounts.ts

@@ -0,0 +1,50 @@
+import isEqual from 'lodash/isEqual';
+
+import type {getTableChunkQueryParams} from './getTableChunkQueryParams';
+import type {PaginatedTableState} from './types';
+
+type TableQuery = Omit<ReturnType<typeof getTableChunkQueryParams>, 'offset' | 'fetchData'>;
+
+export interface TableCountsState
+    extends Pick<PaginatedTableState, 'totalEntities' | 'foundEntities' | 'isInitialLoad'> {
+    query?: TableQuery;
+    hasLoadedData: boolean;
+}
+
+export type TableCountsAction =
+    | {type: 'initialize'; query: TableQuery; initialEntitiesCount?: number}
+    | {type: 'dataReceived'; query: TableQuery; total: number; found: number};
+
+export function tableCountsReducer(
+    state: TableCountsState,
+    action: TableCountsAction,
+): TableCountsState {
+    // Cached chunks can report their data before the table's initialization effect.
+    if (
+        action.type === 'initialize' &&
+        isEqual(state.query, action.query) &&
+        !state.isInitialLoad
+    ) {
+        return state;
+    }
+
+    let nextState: TableCountsState;
+    if (action.type === 'dataReceived') {
+        nextState = {
+            query: action.query,
+            totalEntities: action.total,
+            foundEntities: action.found,
+            isInitialLoad: false,
+            hasLoadedData: true,
+        };
+    } else {
+        // Keep the virtualized table's size until the next query returns its actual counts.
+        nextState = {...state, query: action.query, isInitialLoad: true};
+        if (!state.hasLoadedData) {
+            nextState.totalEntities = action.initialEntitiesCount ?? 0;
+            nextState.foundEntities = action.initialEntitiesCount ?? 1;
+        }
+    }
+
+    return isEqual(state, nextState) ? state : nextState;
+}

package/src/components/VDisk/VDisk.tsx

@@ -13,6 +13,7 @@ import type {
 } from '../../utils/disks/displayState';
 import {getDefaultDiskDisplayState} from '../../utils/disks/displayState';
 import {getDiskBarTone} from '../../utils/disks/getDiskBarTone';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
 import {getVDiskStatusIcon} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
 import {isNumeric} from '../../utils/utils';
@@ -162,7 +163,10 @@ function getAllModeAccessibleName(data: PreparedVDisk, hasIssues: boolean | unde
     });
 }
 
-function getAccessibleName(data: PreparedVDisk, {mode, allMode, isNoData}: VDiskDisplayState) {
+function getAccessibleName(
+    data: PreparedVDisk,
+    {mode, allMode, isNoData, driveType}: VDiskDisplayState,
+) {
     if (!mode) {
         return undefined;
     }
@@ -176,13 +180,24 @@ function getAccessibleName(data: PreparedVDisk, {mode, allMode, isNoData}: VDisk
         nodeId: data.NodeId ?? noData,
     });
     if (isNoData) {
-        diskName = i18n('context_vdisk-no-whiteboard', {disk: diskName, noData});
+        const hasVDiskWhiteboardData = data.HasWhiteboardData ?? Boolean(data.VDiskId);
+        diskName = i18n(
+            mode === 'driveType' && hasVDiskWhiteboardData
+                ? 'context_pdisk-no-whiteboard'
+                : 'context_vdisk-no-whiteboard',
+            {disk: diskName, noData},
+        );
     }
 
     const {CapacityAlert, FrontQueues, SatisfactionRank, Replicated} = isNoData ? {} : data;
     const {FreshRank, LevelRank} = SatisfactionRank ?? {};
 
     switch (mode) {
+        case 'driveType':
+            return i18n('context_drive-type-accessible-name', {
+                disk: diskName,
+                driveType: formatPDiskType(driveType) || noData,
+            });
         case 'state':
             return i18n('context_state-accessible-name', {
                 disk: diskName,
@@ -230,6 +245,7 @@ export interface VDiskProps {
     popupOffset?: PopupProps['offset'];
     withOpaqueBackground?: boolean;
     getDisplayState?: VDiskDisplayStateGetter;
+    hidePDiskInPopup?: boolean;
 }
 
 export const VDisk = ({
@@ -252,6 +268,7 @@ export const VDisk = ({
     popupOffset = DEFAULT_POPUP_OFFSET,
     withOpaqueBackground,
     getDisplayState,
+    hidePDiskInPopup,
 }: VDiskProps) => {
     const getVDiskLink = useVDiskPagePath();
     const vDiskPath = getVDiskLink({nodeId: data.NodeId, vDiskId: data.StringifiedId});
@@ -285,7 +302,7 @@ export const VDisk = ({
         indicatorClassName,
         iconGroupSize,
         iconSize,
-        isDonor,
+        isDonor: mode !== 'driveType' && isDonor,
         placement: iconPlacement,
         severity,
         withIcon,
@@ -307,8 +324,9 @@ export const VDisk = ({
             />
         ) : null;
     const tone = getDiskBarTone({
+        driveType: displayState.driveType,
         severity,
-        isDonor,
+        isDonor: mode !== 'driveType' && isDonor,
         showIndicator,
         indicator: icon,
         isNoData,
@@ -319,7 +337,12 @@ export const VDisk = ({
             showPopup={showPopup}
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
-            renderPopupContent={({onClose}) => <VDiskPopup data={data} onClose={onClose} />}
+            renderPopupContent={({onClose}) => (
+                <VDiskPopup
+                    data={hidePDiskInPopup ? {...data, PDisk: undefined} : data}
+                    onClose={onClose}
+                />
+            )}
             offset={popupOffset}
             delayClose={delayClose}
             delayOpen={delayOpen}

package/src/components/VDisk/VDiskWithDonorsStack.tsx

@@ -8,7 +8,8 @@ import {Stack} from '../Stack/Stack';
 import type {VDiskProps} from './VDisk';
 import {VDisk} from './VDisk';
 
-interface VDiskWithDonorsStackProps extends Omit<VDiskProps, 'withOpaqueBackground'> {
+interface VDiskWithDonorsStackProps
+    extends Omit<VDiskProps, 'withOpaqueBackground' | 'hidePDiskInPopup'> {
     data?: PreparedVDisk;
     className?: string;
     stackClassName?: string;
@@ -17,6 +18,7 @@ interface VDiskWithDonorsStackProps extends Omit<VDiskProps, 'withOpaqueBackgrou
     progressBarClassName?: string;
     renderContent?: boolean;
     placeholderProps?: React.HTMLAttributes<HTMLDivElement>;
+    hideMainPDiskInPopup?: boolean;
 }
 
 const diskInStackPlacement: PopupPlacement = ['left', 'right'];
@@ -29,6 +31,7 @@ export function VDiskWithDonorsStack({
     stackClassName,
     withIcon,
     compact,
+    hideMainPDiskInPopup,
     highlightedVDisk,
     setHighlightedVDisk,
     showPopup: _showPopup,
@@ -81,6 +84,7 @@ export function VDiskWithDonorsStack({
     const mainVDiskProps: Partial<VDiskProps> = {
         ...restProps,
         compact,
+        hidePDiskInPopup: hideMainPDiskInPopup,
         withIcon,
         showPopup: isHighlighted,
         highlighted: isHighlighted,

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

@@ -3,6 +3,7 @@
   "context_vdisk": "VDisk {{vdiskId}} on node {{nodeId}}",
   "context_donor-vdisk": "Donor VDisk {{vdiskId}} on node {{nodeId}}",
   "context_vdisk-no-whiteboard": "{{disk}}. Whiteboard: {{noData}}",
+  "context_pdisk-no-whiteboard": "{{disk}}. PDisk Whiteboard: {{noData}}",
   "context_state-accessible-name": "{{disk}}. State: {{state}}. Replication: {{replication}}.",
   "context_space-accessible-name": "{{disk}}. Capacity alert: {{capacityAlert}}.",
   "context_front-queues-accessible-name": "{{disk}}. Front queues: {{frontQueues}}.",
@@ -15,5 +16,6 @@
   "context_all-mode-health-issues": "issues detected",
   "context_all-mode-replication-complete": "complete",
   "context_all-mode-replication-in-progress": "in progress",
-  "context_all-mode-accessible-name": "VDisk {{vdiskId}}. Health: {{health}}. State: {{state}}. Replication: {{replication}}. Capacity alert: {{capacityAlert}}. Front queues: {{frontQueues}}. Fresh compaction: {{freshCompaction}}. Level compaction: {{levelCompaction}}. Allocated: {{allocatedPercent}}."
+  "context_all-mode-accessible-name": "VDisk {{vdiskId}}. Health: {{health}}. State: {{state}}. Replication: {{replication}}. Capacity alert: {{capacityAlert}}. Front queues: {{frontQueues}}. Fresh compaction: {{freshCompaction}}. Level compaction: {{levelCompaction}}. Allocated: {{allocatedPercent}}.",
+  "context_drive-type-accessible-name": "{{disk}}. Drive type: {{driveType}}."
 }

package/src/containers/Storage/Disks/Disks.tsx

@@ -66,9 +66,6 @@ const VDiskItem = React.memo(function VDiskItem({
     renderContent,
     placeholderProps,
 }: DisksItemProps) {
-    // Do not show PDisk popup for VDisk
-    const vDiskToShow = React.useMemo(() => ({...vDisk, PDisk: undefined}), [vDisk]);
-
     const style: React.CSSProperties = isAllVDisksLayout
         ? {width: ALL_VDISK_WIDTH, flexBasis: ALL_VDISK_WIDTH}
         : {width: compactVDiskWidth, flexBasis: compactVDiskWidth};
@@ -92,7 +89,8 @@ const VDiskItem = React.memo(function VDiskItem({
             <VDiskWithDonorsStack
                 renderContent={renderContent}
                 placeholderProps={placeholderProps}
-                data={vDiskToShow}
+                data={vDisk}
+                hideMainPDiskInPopup
                 compact={!isAllVDisksLayout}
                 withIcon={withIcon}
                 inactive={inactive}

package/src/containers/Storage/PDisk/PDisk.tsx

@@ -20,6 +20,7 @@ import type {
 } from '../../../utils/disks/displayState';
 import {getDefaultPDiskDisplayState} from '../../../utils/disks/displayState';
 import {getDiskBarTone} from '../../../utils/disks/getDiskBarTone';
+import {formatPDiskType} from '../../../utils/disks/getPDiskType';
 import {getPDiskId, getVDiskStatusIcon} from '../../../utils/disks/helpers';
 import type {PreparedPDisk} from '../../../utils/disks/types';
 import {isNumeric} from '../../../utils/utils';
@@ -78,7 +79,9 @@ function getPDiskContent({
             type={
                 <React.Fragment>
                     {showNoDataLabel ? barContent : null}
-                    <DiskBarLabel>{data.Type || EMPTY_DATA_PLACEHOLDER}</DiskBarLabel>
+                    <DiskBarLabel>
+                        {formatPDiskType(data.Type) || EMPTY_DATA_PLACEHOLDER}
+                    </DiskBarLabel>
                 </React.Fragment>
             }
         />
@@ -191,7 +194,7 @@ function getAllModeAccessibleName(
 
 function getAccessibleName(
     data: PreparedPDisk,
-    {mode, allMode, isNoData, allocatedPercent}: PDiskDisplayState,
+    {mode, allMode, isNoData, allocatedPercent, driveType}: PDiskDisplayState,
 ) {
     if (!mode) {
         return undefined;
@@ -208,6 +211,11 @@ function getAccessibleName(
     const {State, Device, Realtime} = isNoData ? {} : data;
 
     switch (mode) {
+        case 'driveType':
+            return i18n('context_drive-type-accessible-name', {
+                disk: diskName,
+                driveType: formatPDiskType(driveType) || noData,
+            });
         case 'state':
             return i18n('context_state-accessible-name', {disk: diskName, state: State || noData});
         case 'space':
@@ -325,6 +333,7 @@ export const PDisk = ({
     });
 
     const tone = getDiskBarTone({
+        driveType: displayState.driveType,
         severity: displayState.severity,
         showIndicator,
         indicator: displayState.icon,

package/src/containers/Storage/PDisk/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "context_drive-type-accessible-name": "{{disk}}. Drive type: {{driveType}}.",
   "context_no-data": "N/D",
   "context_pdisk": "PDisk {{pdiskId}}",
   "context_pdisk-no-whiteboard": "{{disk}}. Whiteboard: {{noData}}",

package/src/containers/Storage/StorageExpertModePanel/StorageGroupsExpertModePanel.tsx

@@ -17,6 +17,7 @@ function getVDiskOptions(): ExpertModeOption<VDisksGroupByValue>[] {
         {value: VDisksGroupBy.Space, content: i18n('value_space')},
         {value: VDisksGroupBy.FrontQueues, content: i18n('value_front-queues')},
         {value: VDisksGroupBy.Compaction, content: i18n('value_compaction')},
+        {value: VDisksGroupBy.DriveType, content: i18n('value_drive-type')},
         {value: VDisksGroupBy.All, content: i18n('value_all')},
     ];
 }
@@ -29,6 +30,7 @@ function getPDiskOptions(): ExpertModeOption<PDisksGroupByValue>[] {
         {value: PDisksGroupBy.Decommit, content: i18n('value_pdisks-decommit')},
         {value: PDisksGroupBy.Maintenance, content: i18n('value_pdisks-maintenance')},
         {value: PDisksGroupBy.Device, content: i18n('value_pdisks-device')},
+        {value: PDisksGroupBy.DriveType, content: i18n('value_drive-type')},
         {value: PDisksGroupBy.All, content: i18n('value_pdisks-all')},
     ];
 }

package/src/containers/Storage/StorageExpertModePanel/components/DriveTypeLegend.tsx

@@ -0,0 +1,22 @@
+import {Flex, Label} from '@gravity-ui/uikit';
+
+import i18n from '../i18n';
+
+export function DriveTypeLegend() {
+    return (
+        <Flex gap={2} alignItems="center" wrap="wrap">
+            <Label size="xs" theme="normal">
+                {i18n('value_ssd')}
+            </Label>
+            <Label size="xs" theme="utility">
+                {i18n('value_hdd')}
+            </Label>
+            <Label size="xs" theme="info">
+                {i18n('value_nvme')}
+            </Label>
+            <Label size="xs" theme="unknown">
+                {i18n('value_no-data')}
+            </Label>
+        </Flex>
+    );
+}