ydb-embedded-ui 1.8.8 → 1.10.1

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -8,6 +8,8 @@ import {bytesToGB} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 //@ts-ignore
 import {getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -20,38 +22,29 @@ import './Pdisk.scss';
 const b = cn('pdisk-storage');
 
 const stateSeverity = {
-    Initial: 0,
-    Normal: 1,
-    InitialFormatRead: 3,
-    InitialSysLogRead: 3,
-    InitialCommonLogRead: 3,
-    InitialFormatReadError: 5,
-    InitialSysLogReadError: 5,
-    InitialSysLogParseError: 5,
-    InitialCommonLogReadError: 5,
-    InitialCommonLogParseError: 5,
-    CommonLoggerInitError: 5,
-    OpenFileError: 5,
-    ChunkQuotaError: 5,
-    DeviceIoError: 5,
+    [TPDiskState.Initial]: 0,
+    [TPDiskState.Normal]: 1,
+    [TPDiskState.InitialFormatRead]: 3,
+    [TPDiskState.InitialSysLogRead]: 3,
+    [TPDiskState.InitialCommonLogRead]: 3,
+    [TPDiskState.InitialFormatReadError]: 5,
+    [TPDiskState.InitialSysLogReadError]: 5,
+    [TPDiskState.InitialSysLogParseError]: 5,
+    [TPDiskState.InitialCommonLogReadError]: 5,
+    [TPDiskState.InitialCommonLogParseError]: 5,
+    [TPDiskState.CommonLoggerInitError]: 5,
+    [TPDiskState.OpenFileError]: 5,
+    [TPDiskState.ChunkQuotaError]: 5,
+    [TPDiskState.DeviceIoError]: 5,
 };
 
-type PDiskState = keyof typeof stateSeverity;
-
-interface PDiskProps {
-    NodeId: number;
-    Host?: string;
-    Path?: string;
-    Realtime?: string;
-    Device?: string;
-    AvailableSize?: string;
-    TotalSize?: string;
-    State?: PDiskState;
-    PDiskId: number;
-}
+type PDiskProps = TPDiskStateInfo;
+
+const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
+    key !== undefined && key in stateSeverity;
 
-const getStateSeverity = (pDiskState?: PDiskState) => {
-    return pDiskState ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
+const getStateSeverity = (pDiskState?: TPDiskState) => {
+    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
 function Pdisk(props: PDiskProps) {
@@ -76,8 +69,7 @@ function Pdisk(props: PDiskProps) {
     };
     /* eslint-disable */
     const preparePdiskData = () => {
-        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Host, Path, Realtime, Device} =
-            props;
+        const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = props;
         const errorColors = [
             diskProgressColors[colorSeverity.Orange as keyof typeof diskProgressColors],
             diskProgressColors[colorSeverity.Red as keyof typeof diskProgressColors],
@@ -89,9 +81,9 @@ function Pdisk(props: PDiskProps) {
         ];
 
         pdiskData.push({property: 'State', value: State || 'not available'});
+        pdiskData.push({property: 'Type', value: getPDiskType(props) || 'unknown'});
         NodeId && pdiskData.push({property: 'Node Id', value: NodeId});
 
-        Host && pdiskData.push({property: 'Host', value: Host});
         Path && pdiskData.push({property: 'Path', value: Path});
         pdiskData.push({
             property: 'Available',
@@ -151,7 +143,7 @@ function Pdisk(props: PDiskProps) {
                     href={createHref(
                         routes.node,
                         {id: props.NodeId, activeTab: STRUCTURE},
-                        {pdiskId: props.PDiskId},
+                        {pdiskId: props.PDiskId || ''},
                     )}
                 />
             </div>

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -7,6 +7,7 @@ import {Popup} from '@yandex-cloud/uikit';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
+import {getPDiskType} from '../../../utils/pdisk';
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -169,6 +170,7 @@ function Vdisk(props) {
                 property: 'State',
                 value: PDisk.State || 'not available',
             });
+            pdiskData.push({property: 'Type', value: getPDiskType(PDisk) || 'unknown'});
             PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
             PDisk.NodeId &&
                 nodes[PDisk.NodeId] &&

package/dist/containers/Tablet/Tablet.js

@@ -199,7 +199,7 @@ class Tablet extends React.Component {
                 return (
                     <CriticalActionDialog
                         visible={dialogVisible}
-                        text="The tablet will be killed. Do you want to proceed?"
+                        text="The tablet will be restarted. Do you want to proceed?"
                         onClose={this.hideDialog}
                         onConfirm={this._onKillClick}
                     />
@@ -363,7 +363,7 @@ class Tablet extends React.Component {
                                 disabled={this.isDisabledKill()}
                                 className={b('control')}
                             >
-                                Kill
+                                Restart
                             </Button>
                             {this.hasHiveId() ? (
                                 <React.Fragment>

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -13,6 +13,11 @@ export enum GeneralPagesIds {
     'graph' = 'graph',
 }
 
+type Page = {
+    id: GeneralPagesIds,
+    title: string,
+};
+
 const overview = {
     id: GeneralPagesIds.overview,
     title: 'Overview',
@@ -76,17 +81,22 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const getPagesByType = (type?: EPathType) => {
-    switch (type) {
-        case EPathType.EPathTypeColumnStore:
-        case EPathType.EPathTypeSubDomain:
-            return DATABASE_PAGES;
-        case EPathType.EPathTypeColumnTable:
-        case EPathType.EPathTypeTable:
-            return TABLE_PAGES;
-        case EPathType.EPathTypeDir:
-        case EPathType.EPathTypeTableIndex:
-        default:
-            return DIR_PAGES;
-    }
-}
+// verbose mapping to guarantee correct tabs for new path types
+// TS will error when a new type is added but not mapped here
+const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
+    [EPathType.EPathTypeInvalid]: undefined,
+
+    [EPathType.EPathTypeSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeExtSubDomain]: DATABASE_PAGES,
+    [EPathType.EPathTypeColumnStore]: DATABASE_PAGES,
+
+    [EPathType.EPathTypeTable]: TABLE_PAGES,
+    [EPathType.EPathTypeColumnTable]: TABLE_PAGES,
+
+    [EPathType.EPathTypeDir]: DIR_PAGES,
+    [EPathType.EPathTypeTableIndex]: DIR_PAGES,
+    [EPathType.EPathTypeCdcStream]: DIR_PAGES,
+};
+
+export const getPagesByType = (type?: EPathType) =>
+    (type && pathTypeToPages[type]) || DIR_PAGES;

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.js

@@ -8,9 +8,10 @@ import Icon from '../../../../components/Icon/Icon';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {EPathType} from '../../../../types/api/schema';
 import {prepareQueryError} from '../../../../utils';
 
+import {isColumnEntityType, isTableType} from '../../utils/schema';
+
 import './HotKeys.scss';
 
 const b = cn('hot-keys');
@@ -42,8 +43,7 @@ function HotKeys({
     type,
 }) {
     const fetchData = () => {
-        // ColumnTables excluded intentionally
-        if (type === EPathType.EPathTypeTable) {
+        if (isTableType(type) && !isColumnEntityType(type)) {
             getHotKeys(currentSchemaPath);
         }
     };

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

@@ -1,4 +1,4 @@
-import {useEffect, useMemo} from 'react';
+import {ReactNode, useEffect, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
@@ -6,8 +6,9 @@ import {Loader} from '@yandex-cloud/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
+import {IndexInfoViewer} from '../../../../components/IndexInfoViewer/IndexInfoViewer';
 
-import type {EPathType} from '../../../../types/api/schema';
+import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 import {AutoFetcher} from '../../../../utils/autofetcher';
 //@ts-ignore
@@ -112,11 +113,31 @@ function Overview(props: OverviewProps) {
         );
     };
 
+    const renderContent = () => {
+        // verbose mapping to guarantee a correct render for new path types
+        // TS will error when a new type is added but not mapped here
+        const pathTypeToComponent: Record<EPathType, (() => ReactNode) | undefined> = {
+            [EPathType.EPathTypeInvalid]: undefined,
+            [EPathType.EPathTypeDir]: undefined,
+            [EPathType.EPathTypeTable]: undefined,
+            [EPathType.EPathTypeSubDomain]: undefined,
+            [EPathType.EPathTypeTableIndex]: () => <IndexInfoViewer data={schemaData} />,
+            [EPathType.EPathTypeExtSubDomain]: undefined,
+            [EPathType.EPathTypeColumnStore]: undefined,
+            [EPathType.EPathTypeColumnTable]: undefined,
+            [EPathType.EPathTypeCdcStream]: undefined,
+        };
+
+        return (props.type && pathTypeToComponent[props.type]?.()) || (
+            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+        );
+    }
+
     return loading && !wasLoaded ? (
         renderLoader()
     ) : (
         <div className={props.className}>
-            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+            {renderContent()}
         </div>
     );
 }

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.js

@@ -1,4 +1,4 @@
-import {useContext, useEffect, useMemo} from 'react';
+import {useState, useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import {Loader} from '@yandex-cloud/uikit';
@@ -14,15 +14,25 @@ import HistoryContext from '../../../../contexts/HistoryContext';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
 import {prepareQueryError} from '../../../../utils';
+import {i18n} from '../../../../utils/i18n';
 
 import './TopShards.scss';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
 
+const TABLE_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRender: false, // no more than 20 rows
+    externalSort: true,
+    disableSortReset: true,
+    defaultOrder: DataTable.DESCENDING,
+};
+
 const tableColumnsNames = {
     TabletId: 'TabletId',
     CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
     Path: 'Path',
 };
 
@@ -32,6 +42,28 @@ function prepareCPUWorkloadValue(value) {
     return `${(value * 100).toFixed(2)}%`;
 }
 
+function prepareDateSizeValue(value) {
+    return new Intl.NumberFormat(i18n.lang).format(value);
+}
+
+function stringToDataTableSortOrder(value) {
+    return value && value.split(',').map((columnId) => ({
+        columnId,
+        order: DataTable.DESCENDING,
+    }));
+}
+
+function stringToQuerySortOrder(value) {
+    return value && value.split(',').map((columnId) => ({
+        columnId,
+        order: 'DESC',
+    }));
+}
+
+function dataTableToStringSortOrder(value = []) {
+    return value.map(({columnId}) => columnId).join(',');
+}
+
 function TopShards({
     sendShardQuery,
     currentSchemaPath,
@@ -46,25 +78,40 @@ function TopShards({
     setShardQueryOptions,
     type,
 }) {
+    const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
+
     useEffect(() => {
+        autofetcher.stop();
+
         if (autorefresh) {
             autofetcher.start();
-            autofetcher.fetch(() => sendShardQuery({database: path, path: currentSchemaPath}));
-        } else {
-            autofetcher.stop();
+            autofetcher.fetch(() => sendShardQuery({
+                database: path,
+                path: currentSchemaPath,
+                sortOrder: stringToQuerySortOrder(sortOrder),
+            }));
         }
+
         return () => {
             autofetcher.stop();
         };
-    }, [autorefresh]);
+    }, [autorefresh, currentSchemaPath, path, sendShardQuery, sortOrder]);
 
+    // don't show loader for requests triggered by table sort, only for path change
     useEffect(() => {
-        sendShardQuery({database: path, path: currentSchemaPath});
         setShardQueryOptions({
             wasLoaded: false,
             data: undefined,
         });
-    }, [currentSchemaPath]);
+    }, [currentSchemaPath, path, setShardQueryOptions]);
+
+    useEffect(() => {
+        sendShardQuery({
+            database: path,
+            path: currentSchemaPath,
+            sortOrder: stringToQuerySortOrder(sortOrder),
+        });
+    }, [currentSchemaPath, path, sendShardQuery, sortOrder]);
 
     const history = useContext(HistoryContext);
 
@@ -76,6 +123,13 @@ function TopShards({
         };
     };
 
+    const onSort = (newSortOrder) => {
+        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
+        // use a string (and not the DataTable default format) to prevent reference change,
+        // which would cause an excess state change, to avoid repeating requests
+        setSortOrder(dataTableToStringSortOrder(newSortOrder));
+    };
+
     const tableColumns = useMemo(() => {
         return [
             {
@@ -83,11 +137,16 @@ function TopShards({
                 // eslint-disable-next-line
                 render: ({value}) => {
                     return (
-                        <span onClick={onSchemaClick(value)} className={bLink({view: 'normal'})}>
+                        <span
+                            // tenant name is substringed out in sql query but is needed here
+                            onClick={onSchemaClick(path + value)}
+                            className={bLink({view: 'normal'})}
+                        >
                             {value}
                         </span>
                     );
                 },
+                sortable: false,
             },
             {
                 name: tableColumnsNames.CPUCores,
@@ -97,6 +156,14 @@ function TopShards({
                 },
                 align: DataTable.RIGHT,
             },
+            {
+                name: tableColumnsNames.DataSize,
+                header: 'DataSize (B)',
+                render: ({value}) => {
+                    return prepareDateSizeValue(value);
+                },
+                align: DataTable.RIGHT,
+            },
             {
                 name: tableColumnsNames.TabletId,
                 // eslint-disable-next-line
@@ -107,6 +174,7 @@ function TopShards({
                         </InternalLink>
                     );
                 },
+                sortable: false,
             },
         ];
     }, []);
@@ -123,7 +191,7 @@ function TopShards({
         if (isColumnEntityType(type)) {
             return 'No data';
         }
-        if (error) {
+        if (error && !error.isCancelled) {
             return prepareQueryError(error);
         }
 
@@ -132,9 +200,11 @@ function TopShards({
                 <DataTable
                     columns={tableColumns}
                     data={data}
-                    settings={DEFAULT_TABLE_SETTINGS}
+                    settings={TABLE_SETTINGS}
                     className={b('table')}
                     theme="yandex-cloud"
+                    onSort={onSort}
+                    sortOrder={stringToDataTableSortOrder(sortOrder)}
                 />
             </div>
         ) : (

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

@@ -28,29 +28,33 @@ class SchemaInfoViewer extends React.Component {
         if (data) {
             const {PathDescription = {}} = data;
             const {TableStats = {}, TabletMetrics = {}} = PathDescription;
-            const tableStatsInfo =
-                TableStats &&
-                Object.keys(TableStats).map((key) => ({
-                    label: key,
-                    value: TableStats[key].toString(),
-                }));
+            const {PartCount, ...restTableStats} = TableStats;
 
-            const tabletMetricsInfo =
-                TableStats &&
-                Object.keys(TabletMetrics).map((key) => ({
-                    label: key,
-                    value: this.formatTabletMetricsValue(key, TabletMetrics[key].toString()),
-                }));
+            const priorityInfo = [{
+                label: 'PartCount',
+                value: PartCount,
+            }].filter(({value}) => value !== undefined);
 
-            let generalInfo = Object.assign(tableStatsInfo, tabletMetricsInfo);
-            generalInfo = Object.assign(generalInfo);
+            const tableStatsInfo = Object.keys(restTableStats).map((key) => ({
+                label: key,
+                value: TableStats[key].toString(),
+            }));
 
-            const infoLength = Object.keys(generalInfo).length;
+            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')}>
-                        {infoLength ? (
+                        {generalInfo.length ? (
                             <InfoViewer info={generalInfo}></InfoViewer>
                         ) : (
                             <div>Empty</div>

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -61,6 +61,7 @@ export function SchemaTree(props: SchemaTreeProps) {
             activePath={currentPath}
             onActivePathUpdate={handleActivePathUpdate}
             cache={false}
+            virtualize
         />
     );
 }

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

@@ -1,43 +1,88 @@
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
 import {EPathSubType, EPathType} from '../../../types/api/schema';
 
-const mapTablePathSubTypeToNavigationTreeType = (subType?: EPathSubType) => {
-    switch (subType) {
-        case EPathSubType.EPathSubTypeSyncIndexImplTable:
-        case EPathSubType.EPathSubTypeAsyncIndexImplTable:
-            return 'index_table';
-        default:
-            return 'table';
-    }
+// this file contains verbose mappings that are typed in a way that ensures
+// correctness when a new node type or a new path type is added
+// TS will error if a new entity is added but not mapped here
+
+const pathSubTypeToNodeType: Record<EPathSubType, NavigationTreeNodeType | undefined> = {
+    [EPathSubType.EPathSubTypeSyncIndexImplTable]: 'index_table',
+    [EPathSubType.EPathSubTypeAsyncIndexImplTable]: 'index_table',
+
+    [EPathSubType.EPathSubTypeStreamImpl]: undefined,
+    [EPathSubType.EPathSubTypeEmpty]: undefined,
+};
+
+const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined> = {
+    [EPathType.EPathTypeInvalid]: undefined,
+
+    [EPathType.EPathTypeSubDomain]: 'database',
+    [EPathType.EPathTypeExtSubDomain]: 'database',
+
+    [EPathType.EPathTypeDir]: 'directory',
+    [EPathType.EPathTypeColumnStore]: 'directory',
+
+    [EPathType.EPathTypeTable]: 'table',
+
+    [EPathType.EPathTypeTableIndex]: 'index',
+
+    [EPathType.EPathTypeColumnTable]: 'column_table',
+
+    [EPathType.EPathTypeCdcStream]: 'topic',
 };
 
 export const mapPathTypeToNavigationTreeType = (
     type: EPathType = EPathType.EPathTypeDir,
     subType?: EPathSubType,
     defaultType: NavigationTreeNodeType = 'directory'
-): NavigationTreeNodeType => {
-    switch (type) {
-        case EPathType.EPathTypeSubDomain:
-            return 'database';
-        case EPathType.EPathTypeTable:
-        case EPathType.EPathTypeColumnTable:
-            return mapTablePathSubTypeToNavigationTreeType(subType);
-        case EPathType.EPathTypeDir:
-        case EPathType.EPathTypeColumnStore:
-            return 'directory';
-        case EPathType.EPathTypeTableIndex:
-            return 'index';
-        default:
-            return defaultType;
-    }
+): NavigationTreeNodeType =>
+    (subType && pathSubTypeToNodeType[subType]) || pathTypeToNodeType[type] || defaultType;
+
+// ====================
+
+const pathTypeToIsTable: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeTable]: true,
+    [EPathType.EPathTypeColumnTable]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+    [EPathType.EPathTypeColumnStore]: false,
+    [EPathType.EPathTypeCdcStream]: false,
 };
 
-export const isTableType = (type?: EPathType) =>
-    mapPathTypeToNavigationTreeType(type) === 'table';
+export const isTableType = (pathType?: EPathType) =>
+    (pathType && pathTypeToIsTable[pathType]) ?? false;
+
+// ====================
+
+const pathSubTypeToIsIndexImpl: Record<EPathSubType, boolean> = {
+    [EPathSubType.EPathSubTypeSyncIndexImplTable]: true,
+    [EPathSubType.EPathSubTypeAsyncIndexImplTable]: true,
+
+    [EPathSubType.EPathSubTypeStreamImpl]: false,
+    [EPathSubType.EPathSubTypeEmpty]: false,
+};
 
 export const isIndexTable = (subType?: EPathSubType) =>
-    mapTablePathSubTypeToNavigationTreeType(subType) === 'index_table';
+    (subType && pathSubTypeToIsIndexImpl[subType]) ?? false;
+
+// ====================
+
+const pathTypeToIsColumn: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeColumnStore]: true,
+    [EPathType.EPathTypeColumnTable]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeTable]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+    [EPathType.EPathTypeCdcStream]: false,
+};
 
 export const isColumnEntityType = (type?: EPathType) =>
-    type === EPathType.EPathTypeColumnStore ||
-    type === EPathType.EPathTypeColumnTable;
+    (type && pathTypeToIsColumn[type]) ?? false;