ydb-embedded-ui 1.10.1 → 1.11.0

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/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/setupTests.js

@@ -3,3 +3,11 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+
+import {configure as configureUiKit} from '@yandex-cloud/uikit';
+import {configure as configureYdbUiComponents} from 'ydb-ui-components';
+import {i18n, Lang} from '../src/utils/i18n';
+
+i18n.setLang(Lang.En);
+configureYdbUiComponents({lang: Lang.En});
+configureUiKit({lang: Lang.En});

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/types/api/storage.ts

@@ -52,3 +52,124 @@ export interface TPDiskStateInfo {
     Overall?: EFlag;
     SerialNumber?: string;
 }
+
+export enum EVDiskState {
+    Initial = 'Initial',
+    LocalRecoveryError = 'LocalRecoveryError',
+    SyncGuidRecovery = 'SyncGuidRecovery',
+    SyncGuidRecoveryError = 'SyncGuidRecoveryError',
+    OK = 'OK',
+    PDiskError = 'PDiskError',
+}
+
+interface TRank {
+    /**
+     * uint32
+     * Rank in percents; 0-100% is good; >100% is bad.
+     * Formula for rank calculation is the following:
+     * Rank = actual_value / max_allowed_value * 100
+     */
+    RankPercent?: string;
+
+    /**
+     * Flag is the Rank transformed to something simple
+     * to understand: Green, Yellow or Red
+     */
+    Flag?: EFlag;
+}
+
+interface TVDiskSatisfactionRank {
+    FreshRank?: TRank;
+    LevelRank?: TRank;
+}
+
+interface TVDiskID {
+    /** uint32 */
+    GroupID?: string;
+    /** uint32 */
+    GroupGeneration?: string;
+    /** uint32 */
+    Ring?: string;
+    /** uint32 */
+    Domain?: string;
+    /** uint32 */
+    VDisk?: string;
+}
+
+export interface TVDiskStateInfo {
+    VDiskId?: TVDiskID;
+    /** uint64 */
+    CreateTime?: string;
+    /** uint64 */
+    ChangeTime?: string;
+    /** uint32 */
+    PDiskId?: string;
+    /** uint32 */
+    VDiskSlotId?: string;
+    /** uint64 */
+    Guid?: string;
+    /** uint64 */
+    Kind?: string;
+    /** uint32 */
+    NodeId?: string;
+    /** uint32 */
+    Count?: string;
+
+    Overall?: EFlag;
+
+    /** Current state of VDisk */
+    VDiskState?: EVDiskState;
+    /** Disk space flags */
+    DiskSpace?: EFlag;
+    /** Compaction satisfaction rank */
+    SatisfactionRank?: TVDiskSatisfactionRank;
+    /** Is VDisk replicated? (i.e. contains all blobs it must have) */
+    Replicated?: boolean;
+    /** Does this VDisk has any yet unreplicated phantom-like blobs? */
+    UnreplicatedPhantoms?: boolean;
+    /** The same for the non-phantom-like blobs. */
+    UnreplicatedNonPhantoms?: boolean;
+    /**
+     * uint64
+     * How many unsynced VDisks from current BlobStorage group we see
+     */
+    UnsyncedVDisks?: string;
+    /**
+     * uint64
+     * How much this VDisk have allocated on corresponding PDisk
+     */
+    AllocatedSize?: string;
+    /**
+     * uint64
+     * How much space is available for VDisk corresponding to PDisk's hard space limits
+     */
+    AvailableSize?: string;
+    /** Does this disk has some unreadable but not yet restored blobs? */
+    HasUnreadableBlobs?: boolean;
+    /** fixed64 */
+    IncarnationGuid?: string;
+    DonorMode?: boolean;
+    /**
+     * fixed64
+     * VDisk actor instance guid
+     */
+    InstanceGuid?: string;
+    Donors?: TVDiskStateInfo[];
+
+    /** VDisk (Skeleton) Front Queue Status */
+    FrontQueues?: EFlag;
+
+    /** VDisk storage pool label */
+    StoragePoolName?: string;
+
+    /**
+     * uint64
+     * Read bytes per second from PDisk for TEvVGet blobs only
+     */
+    ReadThroughput?: string;
+    /**
+     * uint64
+     * Write bytes per second to PDisk for TEvVPut blobs and replication bytes only
+     */
+    WriteThroughput?: string;
+}

package/dist/types/index.ts

@@ -0,0 +1 @@
+export type RequiredField<Src, Fields extends keyof Src> = Src & Required<Pick<Src, Fields>>;

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);