ydb-embedded-ui 22.3.0 → 22.4.0

package/src/containers/Tenant/Diagnostics/Overview/SchemaObjectInfo/prepareSchemaObjectInfo.tsx

@@ -40,6 +40,7 @@ interface PrepareSchemaObjectInfoItemsParams {
     itemsAfterType?: YDBDefinitionListItem[];
     additionalItems?: YDBDefinitionListItem[];
     showAdministrativeFields?: boolean;
+    createdContent?: YDBDefinitionListItem['content'];
 }
 
 function isPresent(value: string | number | undefined): value is string | number {
@@ -83,6 +84,7 @@ export function prepareSchemaObjectInfoItems({
     itemsAfterType = [],
     additionalItems = [],
     showAdministrativeFields = false,
+    createdContent,
 }: PrepareSchemaObjectInfoItemsParams): YDBDefinitionListItem[] {
     const self = data?.PathDescription?.Self;
     let pathId = self?.PathId;
@@ -116,21 +118,20 @@ export function prepareSchemaObjectInfoItems({
         );
     }
 
-    if (Number(createStep)) {
+    items.push({
+        name: schemaObjectInfoKeyset('field_full-path'),
+        content: isPresent(fullPath) ? fullPath : EMPTY_DATA_PLACEHOLDER,
+        copyText: isPresent(fullPath) ? fullPath : undefined,
+    });
+
+    if (createdContent || Number(createStep)) {
         items.push({
             name: tenantKeyset('field_created'),
-            content: formatDateTime(createStep),
+            content: createdContent || formatDateTime(createStep),
         });
     }
 
-    items.push(
-        {
-            name: schemaObjectInfoKeyset('field_full-path'),
-            content: isPresent(fullPath) ? fullPath : EMPTY_DATA_PLACEHOLDER,
-            copyText: isPresent(fullPath) ? fullPath : undefined,
-        },
-        ...additionalItems,
-    );
+    items.push(...additionalItems);
 
     return items.filter(({content}) => content !== undefined && content !== null && content !== '');
 }

package/src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/StreamingQueryInfo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {dateTimeParse} from '@gravity-ui/date-utils';
 import {Label} from '@gravity-ui/uikit';
 
 import {Loader} from '../../../../../components/Loader';
@@ -7,8 +8,11 @@ import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitio
 import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YQLCodePreview} from '../../../../../components/YQLCodePreview/YQLCodePreview';
 import {streamingQueriesApi} from '../../../../../store/reducers/streamingQuery/streamingQuery';
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import {EPathType} from '../../../../../types/api/schema';
 import type {IQueryResult} from '../../../../../types/store/query';
 import {cn} from '../../../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
 import {
     getStringifiedData,
     stripIndentByFirstLine,
@@ -16,6 +20,7 @@ import {
 } from '../../../../../utils/dataFormatters/dataFormatters';
 import {parseIssuesData} from '../../../../../utils/query';
 import {ResultIssuesModal} from '../../../Query/Issues/Issues';
+import {SchemaObjectInfo} from '../SchemaObjectInfo/SchemaObjectInfo';
 
 import i18n from './i18n';
 
@@ -24,26 +29,37 @@ import './StreamingQueryInfo.scss';
 interface StreamingQueryProps {
     database: string;
     path: string;
+    data?: TEvDescribeSchemeResult;
 }
 
 const b = cn('ydb-streaming-query-info');
 
-export function StreamingQueryInfo({database, path}: StreamingQueryProps) {
-    const {data: sysData, isFetching} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
+export function StreamingQueryInfo({database, path, data}: StreamingQueryProps) {
+    const {currentData: sysData, isFetching} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
         {database, path},
         {skip: !database || !path},
     );
     const loading = isFetching && sysData === undefined;
 
-    if (loading) {
-        return <Loader size="s" className={b('loader')} />;
-    }
-
-    const {items, queryText} = prepareStreamingQueryItems(sysData);
+    const {items, queryText, createdContent, stateItems} = prepareStreamingQueryInfo(
+        sysData,
+        data?.PathDescription?.Self?.CreateStep,
+    );
 
     return (
         <React.Fragment>
-            <YDBDefinitionList items={items} />
+            <SchemaObjectInfo
+                data={data}
+                fallbackType={EPathType.EPathTypeStreamingQuery}
+                path={path}
+                createdContent={createdContent}
+                itemsAfterType={stateItems}
+            />
+            {loading ? (
+                <Loader size="s" className={b('loader')} />
+            ) : items.length ? (
+                <YDBDefinitionList items={items} />
+            ) : null}
             {queryText ? (
                 <YQLCodePreview title={i18n('field_query-text')} text={queryText} />
             ) : null}
@@ -73,27 +89,40 @@ function StateLabel({state}: {state?: string}) {
     return <Label theme={theme}>{state}</Label>;
 }
 
-function prepareStreamingQueryItems(sysData?: IQueryResult) {
+export function prepareStreamingQueryInfo(sysData?: IQueryResult, createStep?: string | number) {
     if (!sysData) {
-        return {items: [], queryText: undefined};
+        return {items: [], queryText: undefined, createdContent: undefined, stateItems: []};
     }
 
-    const info: YDBDefinitionListItem[] = [];
-    const state = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.State);
-
-    const queryText = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.Text);
+    const row = sysData.resultSets?.[0]?.result?.[0];
+    const createdContent =
+        formatLifecycleValue(row?.CreatedAt, row?.CreatedBy, createStep) ??
+        (row && 'CreatedAt' in row ? EMPTY_DATA_PLACEHOLDER : undefined);
+    const lifecycleFields = [
+        {name: i18n('field_started'), timestamp: 'StartedAt', user: 'StartedBy'},
+        {name: i18n('field_modified'), timestamp: 'ModifiedAt', user: 'ModifiedBy'},
+        {name: i18n('field_stopped'), timestamp: 'FinishedAt', user: 'StoppedBy'},
+    ];
+    const info: YDBDefinitionListItem[] = lifecycleFields
+        .filter(({timestamp}) => row && timestamp in row)
+        .map(({name, timestamp, user}) => ({
+            name,
+            content: formatLifecycleValue(row?.[timestamp], row?.[user]) ?? EMPTY_DATA_PLACEHOLDER,
+        }));
+    const state = getStringifiedData(row?.Status);
+
+    const queryText = getStringifiedData(row?.Text);
     let normalizedQueryText = trimOuterEmptyLines(queryText);
     normalizedQueryText = stripIndentByFirstLine(normalizedQueryText);
 
-    const errorRaw = sysData.resultSets?.[0]?.result?.[0]?.Error;
+    const errorRaw = row?.Issues;
 
     // We use custom error check, because error type can be non-standard
     const errorData = parseIssuesData(errorRaw);
 
-    info.push({
-        name: i18n('field_query-state'),
-        content: <StateLabel state={state} />,
-    });
+    const stateItems: YDBDefinitionListItem[] = [
+        {name: i18n('field_query-state'), content: <StateLabel state={state} />},
+    ];
 
     if (errorData) {
         info.push({
@@ -102,5 +131,39 @@ function prepareStreamingQueryItems(sysData?: IQueryResult) {
         });
     }
 
-    return {items: info, queryText: normalizedQueryText};
+    return {items: info, queryText: normalizedQueryText, createdContent, stateItems};
+}
+
+function formatLifecycleValue(
+    timestamp: string | number | null | undefined,
+    user: string | number | null | undefined,
+    fallback?: string | number,
+) {
+    let milliseconds = NaN;
+    if (typeof timestamp === 'number') {
+        milliseconds = timestamp;
+    } else if (typeof timestamp === 'string') {
+        milliseconds = Date.parse(timestamp);
+    }
+    const dateMilliseconds =
+        Number.isFinite(milliseconds) && milliseconds > 0 ? milliseconds : Number(fallback);
+    const date =
+        Number.isFinite(dateMilliseconds) && dateMilliseconds > 0
+            ? dateTimeParse(dateMilliseconds)?.format('YYYY-MM-DD HH:mm:ss')
+            : undefined;
+
+    if (!date && !user) {
+        return undefined;
+    }
+
+    if (!user) {
+        return date;
+    }
+
+    return (
+        <React.Fragment>
+            {i18n('value_date-by-user', {date: date || EMPTY_DATA_PLACEHOLDER})}{' '}
+            <Label theme="normal">{String(user)}</Label>
+        </React.Fragment>
+    );
 }

package/src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/i18n/en.json

@@ -1,5 +1,9 @@
 {
   "field_query-state": "State",
   "field_query-error": "Error",
-  "field_query-text": "Text"
+  "field_query-text": "Text",
+  "field_started": "Started",
+  "field_modified": "Modified",
+  "field_stopped": "Stopped",
+  "value_date-by-user": "{{date}} by"
 }

package/src/containers/Tenant/Healthcheck/components/HealthcheckDrawer.tsx

@@ -9,10 +9,12 @@ import {EnableFullscreenButton} from '../../../../components/EnableFullscreenBut
 import type {SelfCheckResult} from '../../../../types/api/healthcheck';
 import {uiFactory} from '../../../../uiFactory/uiFactory';
 import {createAndDownloadJsonFile} from '../../../../utils/downloadFile';
+import type {HealthcheckAssistantTarget} from '../types';
 
 import {HealthcheckDrawerTitle} from './HealthcheckDrawerTitle';
 
 interface HealthcheckDrawerProps {
+    target?: HealthcheckAssistantTarget;
     children: React.ReactNode;
     isDrawerVisible: boolean;
     onCloseDrawer: () => void;
@@ -29,6 +31,7 @@ interface HealthcheckDrawerProps {
 }
 
 export function HealthcheckDrawer({
+    target,
     children,
     isDrawerVisible,
     onCloseDrawer,
@@ -51,11 +54,11 @@ export function HealthcheckDrawer({
 
         return (
             <React.Fragment>
-                {renderDrawerExtension()}
+                {renderDrawerExtension({target})}
                 {renderDrawerContent()}
             </React.Fragment>
         );
-    }, [renderDrawerContent, renderDrawerExtension]);
+    }, [renderDrawerContent, renderDrawerExtension, target]);
 
     const handleDownload = React.useCallback(
         (event: React.MouseEvent<HTMLButtonElement>) => {

package/src/containers/Tenant/TenantDrawerHealthcheck.tsx

@@ -8,6 +8,7 @@ import {useTypedSelector} from '../../utils/hooks';
 
 import {Healthcheck} from './Healthcheck/Healthcheck';
 import {HealthcheckDrawer} from './Healthcheck/components/HealthcheckDrawer';
+import {getDatabaseHealthcheckAssistantTarget} from './Healthcheck/utils';
 import {useCurrentSchema} from './TenantContext';
 import i18n from './i18n';
 import {useTenantQueryParams} from './useTenantQueryParams';
@@ -46,6 +47,15 @@ export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHea
 
     return (
         <HealthcheckDrawer
+            target={
+                database
+                    ? getDatabaseHealthcheckAssistantTarget({
+                          database,
+                          clusterName,
+                          scope: 'database',
+                      })
+                    : undefined
+            }
             isDrawerVisible={Boolean(showHealthcheck)}
             onCloseDrawer={handleCloseDrawer}
             renderDrawerContent={renderDrawerContent}

package/src/containers/Tenants/DatabaseDrawerHealthcheck.tsx

@@ -8,6 +8,7 @@ import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import {useTypedSelector} from '../../utils/hooks';
 import {Healthcheck} from '../Tenant/Healthcheck/Healthcheck';
 import {HealthcheckDrawer} from '../Tenant/Healthcheck/components/HealthcheckDrawer';
+import {getDatabaseHealthcheckAssistantTarget} from '../Tenant/Healthcheck/utils';
 import tenantI18n from '../Tenant/i18n';
 import {useTenantQueryParams} from '../Tenant/useTenantQueryParams';
 
@@ -78,6 +79,15 @@ export function DatabaseDrawerHealthcheck({children, clusterName}: DatabaseDrawe
 
     return (
         <HealthcheckDrawer
+            target={
+                database
+                    ? getDatabaseHealthcheckAssistantTarget({
+                          database,
+                          clusterName: selectedClusterName,
+                          scope: 'database',
+                      })
+                    : undefined
+            }
             isDrawerVisible={Boolean(database)}
             onCloseDrawer={handleCloseDrawer}
             renderDrawerContent={renderDrawerContent}

package/src/lib.ts

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

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,

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

@@ -88,10 +88,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,
         };
     });
 

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/styles/mixins.scss

@@ -9,6 +9,28 @@
     }
 }
 
+@mixin capacity-alert-label-colors($color) {
+    background-color: var(--ydb-capacity-alert-label-background);
+
+    @if $color == 'green' {
+        --ydb-capacity-alert-label-background: var(--g-color-base-positive-light);
+
+        color: var(--g-color-text-positive-heavy);
+    } @else if $color == 'yellow' {
+        --ydb-capacity-alert-label-background: var(--g-color-base-warning-light);
+
+        color: var(--g-color-text-warning-heavy);
+    } @else if $color == 'red' {
+        --ydb-capacity-alert-label-background: var(--g-color-base-danger-light);
+
+        color: var(--g-color-base-danger-heavy);
+    } @else {
+        --ydb-capacity-alert-label-background: var(--ydb-space-#{$color}-bg);
+
+        color: var(--ydb-space-#{$color}-text);
+    }
+}
+
 @mixin container() {
     max-width: 1170px;
     margin: 0 auto;

package/src/types/api/pdisk.ts

@@ -56,6 +56,10 @@ export interface TPDiskStateInfo {
     /** float; percent in the 0..100 scale. */
     PDiskUsage?: number;
     PDiskCapacityAlert?: ECapacityAlert | string;
+    /** Added by viewer from the BlobStorage controller system view. */
+    Status?: EDriveStatus;
+    DecommitStatus?: EDecommitStatus;
+    MaintenanceStatus?: EMaintenanceStatus;
 }
 
 export enum TPDiskState {

package/src/types/api/vdisk.ts

@@ -41,6 +41,8 @@ export interface TVDiskStateInfo {
     SatisfactionRank?: TVDiskSatisfactionRank;
     /** Is VDisk replicated? (i.e. contains all blobs it must have) */
     Replicated?: boolean;
+    /** Detailed Whiteboard replication status. May be absent on older nodes. */
+    DetailedReplicationStatus?: EVDiskDetailedReplicationStatus;
     /** Does this VDisk has any yet unreplicated phantom-like blobs? */
     UnreplicatedPhantoms?: boolean;
     /** The same for the non-phantom-like blobs. */
@@ -138,6 +140,13 @@ export enum EVDiskState {
     PDiskError = 'PDiskError',
 }
 
+export enum EVDiskDetailedReplicationStatus {
+    Replicated = 'Replicated',
+    WaitingForToken = 'WaitingForToken',
+    InProgress = 'InProgress',
+    PhantomsOnly = 'PhantomsOnly',
+}
+
 /**
  * BSC VDisk data
  *

package/src/types/store/nodesList.ts

@@ -1,7 +1,7 @@
-export type NodesMap = Map<
-    number,
-    {
-        Host?: string;
-        DC?: string;
-    }
->;
+export interface NodeMetadata {
+    Host?: string;
+    DC?: string;
+    Rack?: string;
+}
+
+export type NodesMap = Map<number, NodeMetadata>;

package/src/uiFactory/types.ts

@@ -7,7 +7,10 @@ import type {
     GetHealthcheckViewTitles,
     GetHealthcheckViewsOrder,
 } from '../containers/Tenant/Healthcheck/shared';
-import type {HealthcheckAssistantActionProps} from '../containers/Tenant/Healthcheck/types';
+import type {
+    HealthcheckAssistantActionProps,
+    HealthcheckAssistantTarget,
+} from '../containers/Tenant/Healthcheck/types';
 import type {ClusterInfo} from '../store/reducers/cluster/cluster';
 import type {PreparedStorageNode} from '../store/reducers/storage/types';
 import type {PreparedTenant} from '../store/reducers/tenants/types';
@@ -70,7 +73,7 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
          * Renders after the drawer header and before Healthcheck content.
          * Stays mounted while the drawer is open, independent of loading, error or issue state.
          */
-        renderDrawerExtension?: () => React.ReactNode;
+        renderDrawerExtension?: (props: HealthcheckDrawerExtensionProps) => React.ReactNode;
     };
     hasAccess: HasAccess;
     hideGrantAccess?: boolean;
@@ -211,6 +214,10 @@ export type RenderNodeTooltipActions = (props: {data?: PreparedStorageNode}) =>
 
 export type RenderChatPanel = () => React.ReactNode;
 
+export interface HealthcheckDrawerExtensionProps {
+    target?: HealthcheckAssistantTarget;
+}
+
 export type RenderHealthcheckAssistantAction = (
     props: HealthcheckAssistantActionProps,
 ) => React.ReactNode;

package/src/utils/bytesParsers/formatBytes.ts

@@ -1,6 +1,11 @@
 import {GIGABYTE, KILOBYTE, MEGABYTE, PETABYTE, TERABYTE, UNBREAKABLE_GAP} from '../constants';
 import type {FormatToSizeArgs, FormatValuesArgs} from '../dataFormatters/common';
-import {formatNumber, roundToPrecision} from '../dataFormatters/dataFormatters';
+import {
+    formatNumber,
+    roundToDecimalPlaces,
+    roundToPrecision,
+} from '../dataFormatters/dataFormatters';
+import {configuredNumeral} from '../numeral';
 import {isNumeric} from '../utils';
 
 import i18n from './i18n';
@@ -57,8 +62,22 @@ export const getBytesSizeUnit = (value: number) => {
     return size;
 };
 
-const formatToSize = ({value, size = 'mb', precision = 0}: FormatToSizeArgs<BytesSizes>) => {
-    const result = roundToPrecision(Number(value) / sizes[size].value, precision);
+const formatToSize = ({
+    value,
+    size = 'mb',
+    precision = 0,
+    fixedDecimalPlaces,
+}: FormatToSizeArgs<BytesSizes> & {fixedDecimalPlaces?: number}) => {
+    const convertedValue = Number(value) / sizes[size].value;
+    if (fixedDecimalPlaces !== undefined) {
+        const roundedValue = roundToDecimalPlaces(convertedValue, fixedDecimalPlaces);
+        const pattern =
+            roundedValue !== 0 && fixedDecimalPlaces > 0
+                ? `0,0.${'0'.repeat(fixedDecimalPlaces)}`
+                : '0,0';
+        return configuredNumeral(roundedValue).format(pattern);
+    }
+    const result = roundToPrecision(convertedValue, precision);
 
     return formatNumber(result);
 };
@@ -78,7 +97,7 @@ export const formatBytes = ({
     withSizeLabel = true,
     delimiter,
     ...params
-}: FormatValuesArgs<BytesSizes>) => {
+}: FormatValuesArgs<BytesSizes> & {fixedDecimalPlaces?: number}) => {
     if (!isNumeric(value)) {
         return '';
     }

package/src/utils/disks/constants.ts

@@ -142,6 +142,7 @@ export const PDISK_STATE_SEVERITY = {
 export interface LabelVisualConfig {
     theme: LabelProps['theme'];
     icon?: IconData;
+    dangerHeavy?: boolean;
 }
 
 export const NUMERIC_SEVERITY_TO_LABEL_VIEW: Record<number, LabelVisualConfig> = {
@@ -157,6 +158,10 @@ export const NUMERIC_SEVERITY_TO_LABEL_VIEW: Record<number, LabelVisualConfig> =
         theme: 'danger',
         icon: CircleExclamation,
     },
+    [SOLID_RED_SEVERITY]: {
+        theme: 'danger',
+        dangerHeavy: true,
+    },
     [DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue]: {
         theme: 'info',
         icon: ArrowsRotateLeft,