ydb-embedded-ui 1.10.0 → 1.10.3

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [1.10.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.2...v1.10.3) (2022-08-23)
+
+
+### Bug Fixes
+
+* **Overview:** format undefined values to empty string, not 0 ([1a37c27](https://github.com/ydb-platform/ydb-embedded-ui/commit/1a37c278328ad8eb4397d9507566829f01a9c872))
+
+## [1.10.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.1...v1.10.2) (2022-08-17)
+
+
+### Bug Fixes
+
+* convert bytes on decimal scale ([db9b0a7](https://github.com/ydb-platform/ydb-embedded-ui/commit/db9b0a71fc5334f5a40992cc6abc0688782ad5d2))
+* display HDD instead of ROT as pdisk type ([bd9e5ba](https://github.com/ydb-platform/ydb-embedded-ui/commit/bd9e5ba4e594cb3a1f6a964f619f9824e083ae7c))
+* **InfoViewer:** accept default value formatter ([e03d8cc](https://github.com/ydb-platform/ydb-embedded-ui/commit/e03d8cc5de76e4ac00b05586ae6f6522a9708fb0))
+* **InfoViewer:** allow longer labels ([89060a3](https://github.com/ydb-platform/ydb-embedded-ui/commit/89060a381858b5beaa3c3cf3402c13c917705676))
+* **Overview:** display table r/o replicas ([6dbe0b4](https://github.com/ydb-platform/ydb-embedded-ui/commit/6dbe0b45fc5e3867f9d6141d270c15508a693e35))
+* **Overview:** format & group table info in overview ([1a35cfc](https://github.com/ydb-platform/ydb-embedded-ui/commit/1a35cfcd2075454c4a1f1fc4961a4b3106b6d225))
+* **QueryEditor:** save chosen run action ([b0fb436](https://github.com/ydb-platform/ydb-embedded-ui/commit/b0fb43651e0c6d1dc5d6a25f92716703402b556d))
+* use current i18n lang for numeral formatting ([5d58fcf](https://github.com/ydb-platform/ydb-embedded-ui/commit/5d58fcffde21924f3cbe6c28946c7a9f755a8490))
+
+## [1.10.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.10.0...v1.10.1) (2022-08-10)
+
+
+### Bug Fixes
+
+* **Tenant:** fix actions set for topics ([0c75bf4](https://github.com/ydb-platform/ydb-embedded-ui/commit/0c75bf4561966dd663ab1cd7c7b81ef6b4632e50))
+
 ## [1.10.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.9.0...v1.10.0) (2022-08-10)
 
 

package/dist/components/IndexInfoViewer/IndexInfoViewer.tsx

@@ -10,13 +10,16 @@ const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
 ]);
 
 const formatItem = createInfoFormatter<TIndexDescription>({
-    Type: (value) => value?.substring(10), // trims EIndexType prefix
-    State: (value) => value?.substring(11), // trims EIndexState prefix
-    KeyColumnNames: (value) => value?.join(', '),
-    DataColumnNames: (value) => value?.join(', '),
-}, {
-    KeyColumnNames: 'Columns',
-    DataColumnNames: 'Includes',
+    values: {
+        Type: (value) => value?.substring(10), // trims EIndexType prefix
+        State: (value) => value?.substring(11), // trims EIndexState prefix
+        KeyColumnNames: (value) => value?.join(', '),
+        DataColumnNames: (value) => value?.join(', '),
+    },
+    labels: {
+        KeyColumnNames: 'Columns',
+        DataColumnNames: 'Includes',
+    },
 });
 
 interface IndexInfoViewerProps {

package/dist/components/InfoViewer/InfoViewer.scss

@@ -27,11 +27,10 @@
 
     &__label {
         display: flex;
-        flex: 1 1 auto;
+        flex: 0 1 auto;
         align-items: baseline;
 
         min-width: 200px;
-        max-width: 200px;
 
         white-space: nowrap;
 

package/dist/components/InfoViewer/utils.ts

@@ -2,7 +2,7 @@ type LabelMap<T> = {
     [label in keyof T]?: string;
 }
 
-type FieldMappers<T> = {
+type ValueFormatters<T> = {
     [label in keyof T]?: (value: T[label]) => string | undefined;
 }
 
@@ -13,20 +13,28 @@ function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
 function formatValue<Shape, Key extends keyof Shape>(
     label: Key,
     value: Shape[Key],
-    mappers: FieldMappers<Shape>,
+    formatters: ValueFormatters<Shape>,
+    defaultFormatter?: (value: Shape[Key]) => string | undefined,
 ) {
-    const mapper = mappers[label];
-    const mappedValue = mapper ? mapper(value) : value;
+    const formatter = formatters[label] || defaultFormatter;
+    const formattedValue = formatter ? formatter(value) : value;
 
-    return String(mappedValue ?? '');
+    return String(formattedValue ?? '');
 }
 
-export function createInfoFormatter<Shape extends Record<string, any>>(
-    fieldMappers?: FieldMappers<Shape>,
-    labelMap?: LabelMap<Shape>,
-) {
+interface CreateInfoFormatterOptions<Shape> {
+    values?: ValueFormatters<Shape>,
+    labels?: LabelMap<Shape>,
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => string | undefined,
+}
+
+export function createInfoFormatter<Shape extends Record<string, any>>({
+    values: valueFormatters,
+    labels: labelMap,
+    defaultValueFormatter,
+}: CreateInfoFormatterOptions<Shape>) {
     return <Key extends keyof Shape>(label: Key, value: Shape[Key]) => ({
         label: formatLabel(label, labelMap || {}),
-        value: formatValue(label, value, fieldMappers || {}),
+        value: formatValue(label, value, valueFormatters || {}, defaultValueFormatter),
     });
 }

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -60,20 +60,21 @@ function DetailedOverview(props: DetailedOverviewProps) {
         const isTenant = tenantName === currentSchemaPath;
         return (
             <div className={b()}>
-                <div className={b('section')}>
-                    {!isTenant && (
-                        <Overview type={type} tenantName={tenantName} />
-                    )}
-                    {isTenant && <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo}/>}
-                </div>
-                {isTenant && (
-                    <div className={b('section')}>
-                        <Healthcheck
-                            tenant={tenantName}
-                            preview={true}
-                            showMoreHandler={openModalHandler}
-                        />
-                    </div>
+                {isTenant ? (
+                    <>
+                        <div className={b('section')}>
+                            <TenantOverview tenantName={tenantName} additionalTenantInfo={additionalTenantInfo} />
+                        </div>
+                        <div className={b('section')}>
+                            <Healthcheck
+                                tenant={tenantName}
+                                preview={true}
+                                showMoreHandler={openModalHandler}
+                            />
+                        </div>
+                    </>
+                ) : (
+                    <Overview type={type} tenantName={tenantName} />
                 )}
             </div>
         );

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -33,6 +33,7 @@ import {
     DEFAULT_SIZE_RESULT_PANE_KEY,
     DEFAULT_TABLE_SETTINGS,
     SAVED_QUERIES_KEY,
+    QUERY_INITIAL_RUN_ACTION_KEY,
 } from '../../../utils/constants';
 import {prepareQueryResponse} from '../../../utils/index';
 
@@ -538,7 +539,13 @@ function QueryEditor(props) {
     };
 
     const renderControls = () => {
-        const {executeQuery, explainQuery, savedQueries, selectRunAction} = props;
+        const {
+            executeQuery,
+            explainQuery,
+            savedQueries,
+            selectRunAction,
+            setSettingValue,
+        } = props;
         const {runAction} = executeQuery;
         const runIsDisabled = !executeQuery.input || executeQuery.loading;
         const runText = _.find(RUN_ACTIONS, {value: runAction}).content;
@@ -546,7 +553,10 @@ function QueryEditor(props) {
         const menuItems = RUN_ACTIONS.map((action) => {
             return {
                 text: action.content,
-                action: () => selectRunAction(action.value),
+                action: () => {
+                    selectRunAction(action.value);
+                    setSettingValue(QUERY_INITIAL_RUN_ACTION_KEY, action.value);
+                },
             };
         });
 

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -3,63 +3,185 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import './SchemaInfoViewer.scss';
 
-import {formatCPU, formatBytes} from '../../../../utils';
+import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../../utils';
 
-import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
+import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
 
 const b = cn('schema-info-viewer');
 
+const formatTabletMetricsItem = createInfoFormatter({
+    values: {
+        CPU: formatCPU,
+        Memory: formatBytes,
+        Storage: formatBytes,
+        Network: formatBps,
+        ReadThroughput: formatBps,
+        WriteThroughput: formatBps,
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+const formatFollowerGroupItem = createInfoFormatter({
+    values: {
+        FollowerCount: formatNumber,
+    },
+});
+
+const formatPartitionConfigItem = createInfoFormatter({
+    values: {
+        FollowerCount: formatNumber,
+        CrossDataCenterFollowerCount: formatNumber,
+    },
+});
+
+const formatTableStatsItem = createInfoFormatter({
+    values: {
+        DataSize: formatBytes,
+        IndexSize: formatBytes,
+        LastAccessTime: formatDateTime,
+        LastUpdateTime: formatDateTime,
+    },
+    defaultValueFormatter: formatNumber,
+});
+
+const formatTableStats = (fields) => Object.entries(fields)
+    .map(([label, value]) => formatTableStatsItem(label, value))
+    .filter(({value}) => Boolean(value));
+
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
     };
-    formatTabletMetricsValue = (key, value) => {
-        if (key === 'CPU') {
-            return formatCPU(value);
-        } else if (key === 'Memory' || key === 'Storage') {
-            return formatBytes(value);
-        } else {
-            return value;
+
+    renderItem(itemData, title) {
+        if (!Array.isArray(itemData) || !itemData.length) {
+            return null;
         }
-    };
+
+        return (
+            <div className={b('item')}>
+                <InfoViewer
+                    title={title}
+                    info={itemData}
+                />
+            </div>
+        );
+    }
+
+    renderContent(data) {
+        const {PathDescription = {}} = data;
+        const {TableStats = {}, TabletMetrics = {}, Table: {PartitionConfig = {}} = {}} = PathDescription;
+        const {
+            PartCount,
+            RowCount,
+            DataSize,
+            IndexSize,
+
+            LastAccessTime,
+            LastUpdateTime,
+
+            ImmediateTxCompleted,
+            PlannedTxCompleted,
+            TxRejectedByOverload,
+            TxRejectedBySpace,
+            TxCompleteLagMsec,
+            InFlightTxCount,
+
+            RowUpdates,
+            RowDeletes,
+            RowReads,
+            RangeReads,
+            RangeReadRows,
+
+            ...restTableStats
+        } = TableStats;
+        const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
+
+        const tableStatsInfo = [
+            formatTableStats({
+                PartCount,
+                RowCount,
+                DataSize,
+                IndexSize,
+            }),
+            formatTableStats({
+                LastAccessTime,
+                LastUpdateTime,
+            }),
+            formatTableStats({
+                ImmediateTxCompleted,
+                PlannedTxCompleted,
+                TxRejectedByOverload,
+                TxRejectedBySpace,
+                TxCompleteLagMsec,
+                InFlightTxCount,
+            }),
+            formatTableStats({
+                RowUpdates,
+                RowDeletes,
+                RowReads,
+                RangeReads,
+                RangeReadRows,
+            }),
+            formatTableStats(restTableStats),
+        ];
+
+        const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
+            formatTabletMetricsItem(key, TabletMetrics[key])
+        );
+
+        const partitionConfigInfo = [];
+
+        if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
+            partitionConfigInfo.push(...Object.keys(FollowerGroups[0]).map((key) =>
+                formatFollowerGroupItem(key, FollowerGroups[0][key])
+            ));
+        } else if (FollowerCount !== undefined) {
+            partitionConfigInfo.push(
+                formatPartitionConfigItem('FollowerCount', FollowerCount)
+            );
+        } else if (CrossDataCenterFollowerCount !== undefined) {
+            partitionConfigInfo.push(
+                formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount)
+            );
+        }
+
+        if ([
+            tabletMetricsInfo,
+            partitionConfigInfo,
+            tableStatsInfo.flat(),
+        ].flat().length === 0) {
+            return (
+                <div className={b('item')}>Empty</div>
+            );
+        }
+
+        return (
+            <div className={b('row')}>
+                {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+                    <div className={b('col')}>
+                        {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
+                        {this.renderItem(partitionConfigInfo, 'Partition Config')}
+                    </div>
+                ) : null}
+                <div className={b('col')}>
+                    {tableStatsInfo.map((info, index) => (
+                        <React.Fragment key={index}>
+                            {this.renderItem(info, index === 0 ? 'Table Stats' : undefined)}
+                        </React.Fragment>
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         const {data} = this.props;
 
         if (data) {
-            const {PathDescription = {}} = data;
-            const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const {PartCount, ...restTableStats} = TableStats;
-
-            const priorityInfo = [{
-                label: 'PartCount',
-                value: PartCount,
-            }].filter(({value}) => value !== undefined);
-
-            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
-                label: key,
-                value: TableStats[key].toString(),
-            }));
-
-            const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) => ({
-                label: key,
-                value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
-            }));
-
-            const generalInfo = [
-                ...priorityInfo,
-                ...tabletMetricsInfo,
-                ...tableStatsInfo,
-            ];
- 
             return (
                 <div className={b()}>
-                    <div className={b('item')}>
-                        {generalInfo.length ? (
-                            <InfoViewer info={generalInfo}></InfoViewer>
-                        ) : (
-                            <div>Empty</div>
-                        )}
-                    </div>
+                    {this.renderContent(data)}
                 </div>
             );
         } else {

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.scss

@@ -1,6 +1,24 @@
 .schema-info-viewer {
     overflow: auto;
 
+    &__row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        & + & {
+            margin-left: 50px;
+        }
+    }
+
     &__item {
         margin-bottom: 20px;
 

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -114,11 +114,14 @@ export const getActions = (
         const nodeTypeToActions: Record<NavigationTreeNodeType, ActionsSet> = {
             database: DIR_SET,
             directory: DIR_SET,
+
             table: TABLE_SET,
             column_table: TABLE_SET,
+
             index_table: JUST_COPY,
+            topic: JUST_COPY,
+
             index: EMPTY_SET,
-            topic: DIR_SET,
         };
 
         return nodeTypeToActions[type];

package/dist/services/api.js

@@ -83,7 +83,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 enums: true,
                 backup: false,
-                partition_config: false,
                 partition_stats: false,
                 partitioning_info: false,
             },

package/dist/store/reducers/executeQuery.js

@@ -1,7 +1,8 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 import {getValueFromLS, parseJson} from '../../utils/utils';
-import {QUERIES_HISTORY_KEY} from '../../utils/constants';
+import {QUERIES_HISTORY_KEY, QUERY_INITIAL_RUN_ACTION_KEY} from '../../utils/constants';
+import {readSavedSettingsValue} from './settings';
 
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
@@ -39,7 +40,7 @@ const initialState = {
                 ? MAXIMUM_QUERIES_IN_HISTORY - 1
                 : queriesHistoryInitial.length - 1,
     },
-    runAction: RUN_ACTIONS_VALUES.script,
+    runAction: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY, RUN_ACTIONS_VALUES.script),
     monacoHotKey: null,
 };
 

package/dist/store/reducers/settings.js

@@ -1,4 +1,11 @@
-import {ALL, defaultUserSettings, SAVED_QUERIES_KEY, THEME_KEY, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
+import {
+    defaultUserSettings,
+    ALL,
+    SAVED_QUERIES_KEY,
+    THEME_KEY,
+    TENANT_INITIAL_TAB_KEY,
+    QUERY_INITIAL_RUN_ACTION_KEY,
+} from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
 
@@ -7,24 +14,24 @@ const SET_SETTING_VALUE = 'settings/SET_VALUE';
 
 const userSettings = window.userSettings || {};
 const systemSettings = window.systemSettings || {};
-const theme = window.web_version
-    ? userSettings.theme || 'light'
-    : getValueFromLS(THEME_KEY, 'light');
-const savedQueries = window.web_version
-    ? userSettings[SAVED_QUERIES_KEY]
-    : getValueFromLS(SAVED_QUERIES_KEY, '[]');
-const savedTenantGeneralTab = window.web_version
-    ? userSettings[TENANT_INITIAL_TAB_KEY]
-    : getValueFromLS(TENANT_INITIAL_TAB_KEY);
+
+export function readSavedSettingsValue(key, defaultValue) {
+    const savedValue = window.web_version
+        ? userSettings[key]
+        : getValueFromLS(key);
+
+    return savedValue ?? defaultValue;
+}
 
 export const initialState = {
     problemFilter: ALL,
     userSettings: {
         ...defaultUserSettings,
         ...userSettings,
-        theme,
-        [SAVED_QUERIES_KEY]: savedQueries,
-        [TENANT_INITIAL_TAB_KEY]: savedTenantGeneralTab,
+        theme: readSavedSettingsValue(THEME_KEY, 'light'),
+        [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
+        [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
+        [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),
     },
     systemSettings,
 };

package/dist/types/api/schema.ts

@@ -16,7 +16,7 @@ export interface TEvDescribeSchemeResult {
     PathOwnerId?: string;
 }
 
-enum EStatus  {
+enum EStatus {
     StatusSuccess = 'StatusSuccess',
     StatusAccepted = 'StatusAccepted',
     StatusPathDoesNotExist = 'StatusPathDoesNotExist',
@@ -47,8 +47,8 @@ interface TPathDescription {
     Children?: TDirEntry[];
 
     // for table
-    Table?: unknown;
-    TableStats?: unknown;
+    Table?: TTableDescription;
+    TableStats?: TTableStats;
     TabletMetrics?: unknown;
     TablePartitions?: unknown[];
 
@@ -82,6 +82,119 @@ interface TDirEntry {
     Version?: TPathVersion;
 }
 
+// incomplete
+export interface TTableDescription {
+    PartitionConfig?: TPartitionConfig;
+}
+
+// incomplete
+export interface TPartitionConfig {
+    /** uint64 */
+    FollowerCount?: string;
+    /**
+     * uint32
+     * @deprecated use FollowerGroups
+     */
+    CrossDataCenterFollowerCount?: string;
+    /** 0 or 1 items */
+    FollowerGroups?: TFollowerGroup[];
+}
+
+export interface TFollowerGroup {
+    /** uint32 */
+    FollowerCount?: string;
+    AllowLeaderPromotion?: boolean;
+    AllowClientRead?: boolean;
+    /** uint32[] */
+    AllowedNodeIDs?: string[];
+    /**
+     * uint32[]
+     * @deprecated use AllowedDataCenters
+     */
+    AllowedDataCenterNumIDs?: string[];
+    RequireAllDataCenters?: boolean;
+    LocalNodeOnly?: boolean;
+    RequireDifferentNodes?: boolean;
+    FollowerCountPerDataCenter?: boolean; // multiplies FollowerCount by number of DataCenters
+    AllowedDataCenters?: string[];
+}
+
+interface TTableStats {
+    /** uint64 */
+    DataSize?: string;
+    /** uint64 */
+    RowCount?: string;
+    /** uint64 */
+    IndexSize?: string;
+    /** uint64 */
+    InMemSize?: string;
+
+    /**
+     * uint64
+     * unix time in millisec
+     */
+    LastAccessTime?: string;
+    /**
+     * uint64
+     * unix time in millisec
+     */
+    LastUpdateTime?: string;
+
+    RowCountHistogram?: THistogram;
+    DataSizeHistogram?: THistogram;
+
+    /** uint64 */
+    ImmediateTxCompleted?: string;
+    /** uint64 */
+    PlannedTxCompleted?: string;
+    /** uint64 */
+    TxRejectedByOverload?: string;
+    /** uint64 */
+    TxRejectedBySpace?: string;
+    /** uint64 */
+    TxCompleteLagMsec?: string;
+    /** uint64 */
+    InFlightTxCount?: string;
+
+    /** uint64 */
+    RowUpdates?: string;
+    /** uint64 */
+    RowDeletes?: string;
+    /** uint64 */
+    RowReads?: string;
+    /** uint64 */
+    RangeReads?: string;
+    /** uint64 */
+    RangeReadRows?: string;
+
+    /** uint64 */
+    PartCount?: string;
+
+    KeyAccessSample?: THistogram;
+
+    /** uint64 */
+    SearchHeight?: string;
+
+    /**
+     * uint64
+     * seconds since epoch
+     */
+    LastFullCompactionTs?: string;
+
+    // i.e. this shard lent to other shards
+    HasLoanedParts?: boolean;
+}
+
+interface THistogram {
+    Buckets?: THistogramBucket[];
+}
+
+interface THistogramBucket {
+    Key?: string;
+    /** uint64 */
+    Value?: string;
+}
+
 export interface TIndexDescription {
     Name?: string;
     /** uint64 */
@@ -111,7 +224,7 @@ export enum EPathType {
 
     EPathTypeSubDomain = 'EPathTypeSubDomain',
 
-    EPathTypeTableIndex = 'EPathTypeTableIndex', 
+    EPathTypeTableIndex = 'EPathTypeTableIndex',
     EPathTypeExtSubDomain = 'EPathTypeExtSubDomain',
 
     EPathTypeColumnStore = 'EPathTypeColumnStore',

package/dist/utils/constants.js

@@ -6,6 +6,9 @@ export const GROUP_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const PDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const VDISK_AUTO_RELOAD_INTERVAL = 10 * SECOND;
 export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
+// by agreement, display all byte values in decimal scale
+// values in data are always in bytes, never in higher units,
+// therefore there is no issue arbitrary converting them in UI
 export const MEGABYTE = 1_000_000;
 export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;
@@ -139,3 +142,4 @@ export const DEFAULT_TABLE_SETTINGS = {
 };
 
 export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';
+export const QUERY_INITIAL_RUN_ACTION_KEY = 'query_initial_run_action';

package/dist/utils/index.js

@@ -1,16 +1,24 @@
 import numeral from 'numeral';
+import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
 import _ from 'lodash';
 
+import {i18n} from './i18n';
 import {MEGABYTE, TERABYTE, DAY_IN_SECONDS, GIGABYTE} from './constants';
+import {isNumeric} from './utils';
 
-import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
-numeral.locale('ru');
-numeral.localeData().delimiters.decimal = '.';
+numeral.locale(i18n.lang);
 
 export const formatBytes = (bytes) => {
-    return numeral(bytes).format('0 ib').replace('i', '');
+    if (!isNumeric(bytes)) {
+        return '';
+    }
+
+    // by agreement, display byte values in decimal scale
+    return numeral(bytes).format('0 b');
 };
 
+export const formatBps = (bytes) => formatBytes(bytes) + '/s';
+
 export const formatBytesToGigabyte = (bytes) => {
     return `${Math.floor(bytes / GIGABYTE)} GB`;
 };
@@ -49,13 +57,29 @@ export const formatThroughput = (value, total) => {
 };
 
 export const formatNumber = (number) => {
+    if (!isNumeric(number)) {
+        return '';
+    }
+
     return numeral(number).format();
 };
 
 export const formatCPU = (value) => {
+    if (!isNumeric(value)) {
+        return '';
+    }
+
     return numeral(value / 1000000).format('0.00');
 };
 
+export const formatDateTime = (value) => {
+    if (!isNumeric(value)) {
+        return '';
+    }
+
+    return value > 0 ? new Date(Number(value)).toUTCString() : 'N/A';
+};
+
 export const calcUptime = (milliseconds) => {
     const currentDate = new Date();
     return formatUptime((currentDate - Number(milliseconds)) / 1000);

package/dist/utils/pdisk.ts

@@ -28,7 +28,7 @@ export const parseBitField = <T extends Record<string, number>>(
 };
 
 export enum IPDiskType {
-    ROT = 'ROT',
+    HDD = 'HDD', // ROT (Rotation?) = HDD
     SSD = 'SSD',
     MVME = 'NVME',
 }
@@ -67,7 +67,7 @@ export const getPDiskType = (data: TPDiskStateInfo): IPDiskType | undefined => {
                 return IPDiskType.MVME;
         }
     } else if (categoryBitField.typeExt === '0') {
-        return IPDiskType.ROT;
+        return IPDiskType.HDD;
     }
 
     return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "1.10.0",
+  "version": "1.10.3",
   "files": [
     "dist"
   ],