ydb-embedded-ui 22.2.0 → 22.4.0

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,44 @@ 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 formatNormalizedMetricPercent(value?: number) {
@@ -195,7 +208,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 +225,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;
     }
 

package/src/utils/timeParsers/formatDuration.ts

@@ -7,10 +7,15 @@ import i18n from './i18n';
  * Process time difference in ms and returns formated time.
  * By default only two major values are returned (days & hours, hours & minutes, minutes & seconds, etc.).
  * It can be altered with valuesCount arg
+ * Compact format omits milliseconds and spaces between numbers and unit labels.
  *
  * value - duration in ms
  */
-export const formatDurationToShortTimeFormat = (value: number, valuesCount: 1 | 2 = 2) => {
+export const formatDurationToShortTimeFormat = (
+    value: number,
+    valuesCount: 1 | 2 = 2,
+    {compact = false}: {compact?: boolean} = {},
+) => {
     const ms = value % 1000;
     let remain = Math.floor(value / 1000);
 
@@ -33,6 +38,22 @@ export const formatDurationToShortTimeFormat = (value: number, valuesCount: 1 |
         ms,
     };
 
+    if (compact) {
+        const units = [
+            {value: days, key: 'value_compact-days'},
+            {value: hours, key: 'value_compact-hours'},
+            {value: minutes, key: 'value_compact-minutes'},
+            {value: seconds, key: 'value_compact-seconds'},
+        ] as const;
+        const firstNonZeroUnit = units.findIndex((unit) => unit.value > 0);
+
+        return units
+            .slice(firstNonZeroUnit < 0 ? -1 : firstNonZeroUnit)
+            .slice(0, valuesCount)
+            .map(({key}) => i18n(key, duration))
+            .join(' ');
+    }
+
     if (valuesCount === 2) {
         if (days > 0) {
             return i18n('daysHours', duration);

package/src/utils/timeParsers/i18n/en.json

@@ -7,5 +7,9 @@
   "hours": "{{hours}}\u00a0h",
   "min": "{{minutes}}\u00a0m",
   "sec": "{{seconds}}\u00a0s",
-  "ms": "{{ms}}\u00a0ms"
+  "ms": "{{ms}}\u00a0ms",
+  "value_compact-days": "{{days}}d",
+  "value_compact-hours": "{{hours}}h",
+  "value_compact-minutes": "{{minutes}}min",
+  "value_compact-seconds": "{{seconds}}s"
 }

package/src/utils/timeParsers/i18n/ru.json

@@ -7,5 +7,9 @@
   "hours": "{{hours}}\u00a0ч",
   "min": "{{minutes}}\u00a0м",
   "sec": "{{seconds}}\u00a0с",
-  "ms": "{{ms}}\u00a0мс"
+  "ms": "{{ms}}\u00a0мс",
+  "value_compact-days": "{{days}}д",
+  "value_compact-hours": "{{hours}}ч",
+  "value_compact-minutes": "{{minutes}}мин",
+  "value_compact-seconds": "{{seconds}}с"
 }