ydb-embedded-ui 22.3.0 → 22.5.0

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/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/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/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,

package/src/utils/disks/diskInfo/getDiskLocationItems.ts

@@ -0,0 +1,50 @@
+import {isNil} from 'lodash';
+
+import type {YDBDefinitionListItem} from '../../../components/YDBDefinitionList/YDBDefinitionList';
+import type {NodeMetadata} from '../../../types/store/nodesList';
+import {EMPTY_DATA_PLACEHOLDER} from '../../constants';
+
+import i18n from './i18n';
+
+export interface DiskDetailItem extends YDBDefinitionListItem {
+    /** Stable field identifier for ordering and grouping independently of translated names. */
+    id: string;
+}
+
+interface DiskLocationData {
+    NodeId?: number;
+    PDiskId?: number;
+    Path?: string;
+    VDiskSlotId?: number;
+}
+
+export function getDiskLocationItems(
+    data: DiskLocationData,
+    nodeData: NodeMetadata,
+    {withVDiskSlotId = false}: {withVDiskSlotId?: boolean} = {},
+): DiskDetailItem[] {
+    const entries = [
+        {id: 'fqdn', name: i18n('field_fqdn'), value: nodeData.Host},
+        {id: 'rack', name: i18n('field_rack'), value: nodeData.Rack},
+        {id: 'datacenter', name: i18n('field_datacenter'), value: nodeData.DC},
+        {id: 'pdisk-path', name: i18n('field_pdisk-path'), value: data.Path},
+        {id: 'node-id', name: i18n('field_node-id'), value: data.NodeId || undefined},
+        {id: 'pdisk-id', name: i18n('field_pdisk-id'), value: data.PDiskId},
+    ];
+    if (withVDiskSlotId) {
+        entries.push({
+            id: 'vdisk-slot-id',
+            name: i18n('field_vdisk-slot-id'),
+            value: data.VDiskSlotId,
+        });
+    }
+    return entries.map(({id, name, value}) => {
+        const missing = isNil(value) || value === '';
+        return {
+            id,
+            name,
+            content: missing ? EMPTY_DATA_PLACEHOLDER : value,
+            copyText: missing ? undefined : value,
+        };
+    });
+}

package/src/utils/disks/diskInfo/i18n/en.json

@@ -0,0 +1,9 @@
+{
+  "field_fqdn": "FQDN",
+  "field_rack": "Rack",
+  "field_datacenter": "Datacenter",
+  "field_pdisk-path": "PDisk Path",
+  "field_node-id": "Node ID",
+  "field_pdisk-id": "PDisk ID",
+  "field_vdisk-slot-id": "VDisk Slot ID"
+}

package/src/utils/disks/diskInfo/i18n/index.ts

@@ -0,0 +1,5 @@
+import {registerKeysets} from '../../../i18n';
+
+import en from './en.json';
+
+export default registerKeysets('ydb-disk-info', {en});

package/src/utils/disks/iconCalculators.ts

@@ -161,7 +161,7 @@ export function calculateFrontQueuesIcon(
  * Get icon and color for a single status flag.
  * Maps EFlag to the corresponding pair-legend icon and color.
  */
-function getFlagIconWithColor(flag: EFlag | undefined): IconWithColor | undefined {
+export function getFlagIconWithColor(flag: EFlag | undefined): IconWithColor | undefined {
     if (!flag || flag === EFlag.Grey) {
         return {
             icon: CircleQuestionFill,

package/src/utils/disks/prepareDisks.ts

@@ -1,6 +1,6 @@
 import {isNil} from 'lodash';
 
-import type {TPDiskStateInfo} from '../../types/api/pdisk';
+import type {TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
 import type {TVDiskStateInfo, TVSlotId} from '../../types/api/vdisk';
 import {stringifyVdiskId} from '../dataFormatters/dataFormatters';
 import {isNumeric, parseOptionalNonNegativeNumber} from '../utils';
@@ -8,7 +8,7 @@ import {isNumeric, parseOptionalNonNegativeNumber} from '../utils';
 import {calculatePDiskSeverity} from './calculatePDiskSeverity';
 import {calculateVDiskSeverity} from './calculateVDiskSeverity';
 import {getPDiskType} from './getPDiskType';
-import {getPDiskId, isFullVDiskData} from './helpers';
+import {getPDiskId, isFullVDiskData, makeVDiskLocationKey} from './helpers';
 import type {PreparedPDisk, PreparedVDisk} from './types';
 
 export function prepareWhiteboardVDiskData(
@@ -21,16 +21,7 @@ export function prepareWhiteboardVDiskData(
     if (!isFullVDiskData(vDiskState)) {
         const {NodeId, PDiskId, VSlotId, ...restVDiskFields} = vDiskState;
 
-        const vDiskId =
-            !isNil(VSlotId) && !isNil(PDiskId) && !isNil(NodeId)
-                ? {
-                      NodeId,
-                      PDiskId,
-                      VSlotId,
-                  }
-                : undefined;
-
-        const StringifiedId = stringifyVdiskId(vDiskId);
+        const StringifiedId = makeVDiskLocationKey(NodeId, PDiskId, VSlotId) ?? '';
 
         return {
             ...restVDiskFields,
@@ -66,13 +57,7 @@ export function prepareWhiteboardVDiskData(
         AllocatedSize: AllocatedSize,
         SlotSize: PDisk?.EnforcedDynamicSlotSize,
     });
-    const WhiteboardSize = hasWhiteboardData
-        ? prepareWhiteboardVDiskSizeFields({
-              AvailableSize,
-              AllocatedSize,
-              SlotSize: PDisk?.EnforcedDynamicSlotSize,
-          })
-        : undefined;
+    const WhiteboardSize = hasWhiteboardData ? vDiskSizeFields.DisplaySize : undefined;
 
     const Severity = calculateVDiskSeverity(vDiskState);
 
@@ -124,7 +109,7 @@ export function prepareWhiteboardVDiskData(
 }
 
 export function prepareWhiteboardPDiskData(
-    pdiskState: TPDiskStateInfo = {},
+    pdiskState: TPDiskStateInfo & Pick<TPDiskInfo, 'StatusV2'> = {},
     whiteboardSizeSource: Pick<TPDiskStateInfo, 'AvailableSize' | 'TotalSize'> | null = pdiskState,
 ): PreparedPDisk {
     const hasWhiteboardData = pdiskState.HasWhiteboardData ?? Boolean(whiteboardSizeSource);
@@ -170,33 +155,7 @@ export function prepareWhiteboardPDiskData(
         State,
         Severity,
         SlotSize: EnforcedDynamicSlotSize,
-    };
-}
-
-function prepareWhiteboardVDiskSizeFields({
-    AvailableSize,
-    AllocatedSize,
-    SlotSize,
-}: {
-    AvailableSize: unknown;
-    AllocatedSize: unknown;
-    SlotSize: unknown;
-}) {
-    const allocatedSize = parseOptionalNonNegativeNumber(AllocatedSize);
-    const availableSize = parseOptionalNonNegativeNumber(AvailableSize);
-    const slotSize = parseOptionalNonNegativeNumber(SlotSize);
-    const preparedSizeFields = prepareVDiskSizeFields({
-        AvailableSize: availableSize,
-        AllocatedSize: allocatedSize,
-        SlotSize: slotSize,
-    });
-
-    return {
-        AllocatedSize: allocatedSize === undefined ? undefined : preparedSizeFields.AllocatedSize,
-        SizeLimit:
-            availableSize === undefined && slotSize === undefined
-                ? undefined
-                : preparedSizeFields.SizeLimit,
+        DriveStatus: pdiskState.Status ?? pdiskState.StatusV2,
     };
 }
 
@@ -253,12 +212,27 @@ export function prepareVDiskSizeFields({
     });
     const allocatedPercent = sizeLimit > 0 ? Math.floor((allocated * 100) / sizeLimit) : NaN;
 
+    // Preserve missing values for display without changing the legacy calculations above.
+    const displayAllocatedSize = parseOptionalNonNegativeNumber(AllocatedSize);
+    const displayAvailableSize = parseOptionalNonNegativeNumber(AvailableSize);
+    const displaySlotSize = parseOptionalNonNegativeNumber(SlotSize);
+    let displaySizeLimit: number | undefined;
+    if (!displayAvailableSize && displaySlotSize) {
+        displaySizeLimit = displaySlotSize;
+    } else if (displayAllocatedSize !== undefined && displayAvailableSize !== undefined) {
+        displaySizeLimit = displayAllocatedSize + displayAvailableSize;
+    }
+
     return {
         AvailableSize: available,
         AllocatedSize: allocated,
         SizeLimit: sizeLimit,
         FreeSize: freeSize,
         AllocatedPercent: allocatedPercent,
+        DisplaySize: {
+            AllocatedSize: displayAllocatedSize,
+            SizeLimit: displaySizeLimit,
+        },
     };
 }
 

package/src/utils/disks/types.ts

@@ -1,6 +1,6 @@
 import type {EFlag} from '../../types/api/enums';
 import type {EDriveStatus, TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
-import type {EVDiskStatus, TVDiskStateInfo, TVSlotId} from '../../types/api/vdisk';
+import type {EVDiskStatus, TVDiskStateInfo} from '../../types/api/vdisk';
 import type {ValueOf} from '../../types/common';
 
 import type {PDISK_TYPES} from './getPDiskType';
@@ -98,6 +98,8 @@ export interface PreparedVDisk
     extends Omit<TVDiskStateInfo, 'PDisk' | 'AvailableSize' | 'AllocatedSize' | 'Donors'> {
     Status?: EVDiskStatus;
     PDisk?: PreparedPDisk;
+    PDiskType?: string;
+    PDiskPath?: string;
     Severity?: number;
     StringifiedId?: string;
 
@@ -106,6 +108,11 @@ export interface PreparedVDisk
     AllocatedPercent?: number;
     SizeLimit?: number;
     FreeSize?: number;
+    /** Size values for display, preserving missing source values independently. */
+    DisplaySize?: {
+        AllocatedSize?: number;
+        SizeLimit?: number;
+    };
     WhiteboardSize?: {
         AllocatedSize?: number;
         SizeLimit?: number;
@@ -118,7 +125,8 @@ export interface PreparedVDisk
 
 export type PDiskType = ValueOf<typeof PDISK_TYPES>;
 
-export interface UnavailableDonor extends TVSlotId {
+export interface UnavailableDonor
+    extends Pick<PreparedVDisk, 'NodeId' | 'PDiskId' | 'VDiskSlotId'> {
     DonorMode?: boolean;
     StoragePoolName?: string;
 }

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/hooks/useNodeMetadata.ts

@@ -0,0 +1,21 @@
+import {isNil} from 'lodash';
+
+import {selectNodesMap} from '../../store/reducers/nodesList';
+import type {NodeMetadata} from '../../types/store/nodesList';
+import {useTypedSelector} from '../hooks';
+
+import {useDatabaseFromQuery} from './useDatabaseFromQuery';
+
+export function useNodeMetadata(
+    nodeId: number | undefined,
+    parentNodeData?: NodeMetadata,
+): NodeMetadata {
+    const database = useDatabaseFromQuery();
+    const nodesMap = useTypedSelector((state) => selectNodesMap(state, database));
+    const storedNodeData = isNil(nodeId) ? undefined : nodesMap?.get(nodeId);
+    return {
+        Host: parentNodeData?.Host || storedNodeData?.Host,
+        DC: parentNodeData?.DC || storedNodeData?.DC,
+        Rack: parentNodeData?.Rack || storedNodeData?.Rack,
+    };
+}

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

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

package/src/utils/storageMetrics.ts

@@ -1,11 +1,7 @@
 import type {BytesSizes} from './bytesParsers';
-import {bytesSizes, getBytesSizeUnit, sizes} from './bytesParsers';
+import {bytesSizes, formatBytes, getBytesSizeUnit, sizes} from './bytesParsers';
 import {EMPTY_DATA_PLACEHOLDER, UNBREAKABLE_GAP} from './constants';
-import {
-    formatNumber,
-    formatPercent,
-    formatStorageValuesToGb,
-} from './dataFormatters/dataFormatters';
+import {formatNumber, formatPercent, roundToDecimalPlaces} from './dataFormatters/dataFormatters';
 import {parseOptionalNonNegativeNumber} from './utils';
 
 export interface FormatMetricBytesOptions {
@@ -165,27 +161,55 @@ export function formatMetricBytes(
         : EMPTY_DATA_PLACEHOLDER;
 }
 
-export function formatMetricPercent(value?: unknown) {
+export function formatMetricPercent(value?: unknown, fixedDecimalPlaces?: number) {
     const numericValue = parseOptionalNonNegativeNumber(value);
 
     if (numericValue === undefined) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 
-    const precision = Number.isInteger(numericValue) ? 0 : 1;
+    const precision = fixedDecimalPlaces ?? (Number.isInteger(numericValue) ? 0 : 1);
+    const fixed =
+        fixedDecimalPlaces !== undefined && roundToDecimalPlaces(numericValue, precision) !== 0;
 
-    return formatPercent(numericValue / 100, precision) || EMPTY_DATA_PLACEHOLDER;
+    return formatPercent(numericValue / 100, precision, {fixed}) || EMPTY_DATA_PLACEHOLDER;
 }
 
-export function formatStorageMetricPair(value?: string | number, capacity?: string | number) {
+export function formatStorageMetricPair(
+    value?: string | number,
+    capacity?: string | number,
+    fixedDecimalPlaces?: number,
+) {
     const parsedValue = parseOptionalNonNegativeNumber(value);
     const parsedCapacity = parseOptionalNonNegativeNumber(capacity);
 
-    if (parsedValue === undefined || parsedCapacity === undefined) {
+    if (parsedValue === undefined && parsedCapacity === undefined) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 
-    return formatStorageValuesToGb(parsedValue, parsedCapacity).join(' / ');
+    return [
+        formatBytes({
+            value: parsedValue,
+            size: 'gb',
+            precision: 1,
+            withSizeLabel: parsedCapacity === undefined,
+            fixedDecimalPlaces,
+        }),
+        formatBytes({value: parsedCapacity, size: 'gb', fixedDecimalPlaces}),
+    ]
+        .map((formattedValue) => formattedValue || EMPTY_DATA_PLACEHOLDER)
+        .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) {
@@ -195,7 +219,7 @@ export function formatNormalizedMetricPercent(value?: number) {
         return EMPTY_DATA_PLACEHOLDER;
     }
 
-    return formatPercent(parsedValue, 2, {fixed: true}) || EMPTY_DATA_PLACEHOLDER;
+    return formatMetricPercent(parsedValue * 100, 2);
 }
 
 export function formatMetricCount(value?: unknown) {
@@ -212,7 +236,7 @@ export function formatMetricCountPair(value?: unknown, capacity?: unknown) {
     const formattedValue = formatMetricCount(value);
     const formattedCapacity = formatMetricCount(capacity);
 
-    if (formattedValue === EMPTY_DATA_PLACEHOLDER || formattedCapacity === EMPTY_DATA_PLACEHOLDER) {
+    if (formattedValue === EMPTY_DATA_PLACEHOLDER && formattedCapacity === EMPTY_DATA_PLACEHOLDER) {
         return EMPTY_DATA_PLACEHOLDER;
     }