ydb-embedded-ui 2.6.0 → 3.0.1

package/dist/containers/Tenant/Diagnostics/TopShards/{TopShards.js → TopShards.tsx}

@@ -1,27 +1,34 @@
 import {useState, useContext, useEffect, useMemo} from 'react';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
+
+import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
-import DataTable from '@yandex-cloud/react-data-table';
 
 import InternalLink from '../../../../components/InternalLink/InternalLink';
 
+import HistoryContext from '../../../../contexts/HistoryContext';
+
 import routes, {createHref} from '../../../../routes';
+
 import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-import HistoryContext from '../../../../contexts/HistoryContext';
+
+import type {EPathType} from '../../../../types/api/schema';
+
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {isColumnEntityType} from '../../utils/schema';
-import {prepareQueryError} from '../../../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {i18n} from '../../../../utils/i18n';
+import {prepareQueryError} from '../../../../utils/query';
+
+import {isColumnEntityType} from '../../utils/schema';
 
 import './TopShards.scss';
 
 const b = cn('top-shards');
 const bLink = cn('yc-link');
 
-const TABLE_SETTINGS = {
+const TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
     dynamicRender: false, // no more than 20 rows
     externalSort: true,
@@ -36,121 +43,108 @@ const tableColumnsNames = {
     Path: 'Path',
 };
 
-const autofetcher = new AutoFetcher();
-
-function prepareCPUWorkloadValue(value) {
-    return `${(value * 100).toFixed(2)}%`;
+function prepareCPUWorkloadValue(value: string) {
+    return `${(Number(value) * 100).toFixed(2)}%`;
 }
 
-function prepareDateSizeValue(value) {
+function prepareDateSizeValue(value: number) {
     return new Intl.NumberFormat(i18n.lang).format(value);
 }
 
-function stringToDataTableSortOrder(value) {
-    return (
-        value &&
-        value.split(',').map((columnId) => ({
-            columnId,
-            order: DataTable.DESCENDING,
-        }))
-    );
+function stringToDataTableSortOrder(value: string): SortOrder[] | undefined {
+    return value
+        ? value.split(',').map((columnId) => ({
+              columnId,
+              order: DataTable.DESCENDING,
+          }))
+        : undefined;
 }
 
-function stringToQuerySortOrder(value) {
-    return (
-        value &&
-        value.split(',').map((columnId) => ({
-            columnId,
-            order: 'DESC',
-        }))
-    );
+function stringToQuerySortOrder(value: string) {
+    return value
+        ? value.split(',').map((columnId) => ({
+              columnId,
+              order: 'DESC',
+          }))
+        : undefined;
 }
 
-function dataTableToStringSortOrder(value = []) {
-    return value.map(({columnId}) => columnId).join(',');
+function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
+    const sortOrders = Array.isArray(value) ? value : [value];
+    return sortOrders.map(({columnId}) => columnId).join(',');
 }
 
-function TopShards({
-    sendShardQuery,
-    currentSchemaPath,
-    path,
-    loading,
-    data,
-    error,
-    setCurrentSchemaPath,
-    getSchema,
-    autorefresh,
-    wasLoaded,
-    setShardQueryOptions,
-    type,
-}) {
-    const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
+interface TopShardsProps {
+    tenantPath: string;
+    type?: EPathType;
+}
 
-    useEffect(() => {
-        autofetcher.stop();
+export const TopShards = ({tenantPath, type}: TopShardsProps) => {
+    const dispatch = useDispatch();
+
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        data: {result: data = undefined} = {},
+        error,
+        wasLoaded,
+    } = useTypedSelector((state) => state.shardsWorkload);
 
-        if (autorefresh) {
-            autofetcher.start();
-            autofetcher.fetch(() =>
+    const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
+
+    useAutofetcher(
+        () => {
+            dispatch(
                 sendShardQuery({
-                    database: path,
+                    database: tenantPath,
                     path: currentSchemaPath,
                     sortOrder: stringToQuerySortOrder(sortOrder),
                 }),
             );
-        }
-
-        return () => {
-            autofetcher.stop();
-        };
-    }, [autorefresh, currentSchemaPath, path, sendShardQuery, sortOrder]);
+        },
+        [dispatch, currentSchemaPath, tenantPath, sortOrder],
+        autorefresh,
+    );
 
     // don't show loader for requests triggered by table sort, only for path change
     useEffect(() => {
-        setShardQueryOptions({
-            wasLoaded: false,
-            data: undefined,
-        });
-    }, [currentSchemaPath, path, setShardQueryOptions]);
-
-    useEffect(() => {
-        sendShardQuery({
-            database: path,
-            path: currentSchemaPath,
-            sortOrder: stringToQuerySortOrder(sortOrder),
-        });
-    }, [currentSchemaPath, path, sendShardQuery, sortOrder]);
+        dispatch(
+            setShardQueryOptions({
+                wasLoaded: false,
+                data: undefined,
+            }),
+        );
+    }, [dispatch, currentSchemaPath, tenantPath]);
 
     const history = useContext(HistoryContext);
 
-    const onSchemaClick = (schemaPath) => {
-        return () => {
-            setCurrentSchemaPath(schemaPath);
-            getSchema({path: schemaPath});
-            history.go(0);
-        };
-    };
-
-    const onSort = (newSortOrder) => {
+    const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
         // 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(() => {
+    const tableColumns: Column<any>[] = useMemo(() => {
+        const onSchemaClick = (schemaPath: string) => {
+            return () => {
+                dispatch(setCurrentSchemaPath(schemaPath));
+                dispatch(getSchema({path: schemaPath}));
+                history.go(0);
+            };
+        };
+
         return [
             {
                 name: tableColumnsNames.Path,
-                // eslint-disable-next-line
-                render: ({value}) => {
+                render: ({value: relativeNodePath}) => {
                     return (
                         <span
-                            // tenant name is substringed out in sql query but is needed here
-                            onClick={onSchemaClick(path + value)}
+                            onClick={onSchemaClick(tenantPath + relativeNodePath)}
                             className={bLink({view: 'normal'})}
                         >
-                            {value}
+                            {relativeNodePath as string}
                         </span>
                     );
                 },
@@ -158,9 +152,8 @@ function TopShards({
             },
             {
                 name: tableColumnsNames.CPUCores,
-                // eslint-disable-next-line
                 render: ({value}) => {
-                    return prepareCPUWorkloadValue(value);
+                    return prepareCPUWorkloadValue(value as string);
                 },
                 align: DataTable.RIGHT,
             },
@@ -168,24 +161,23 @@ function TopShards({
                 name: tableColumnsNames.DataSize,
                 header: 'DataSize (B)',
                 render: ({value}) => {
-                    return prepareDateSizeValue(value);
+                    return prepareDateSizeValue(value as number);
                 },
                 align: DataTable.RIGHT,
             },
             {
                 name: tableColumnsNames.TabletId,
-                // eslint-disable-next-line
                 render: ({value}) => {
                     return (
                         <InternalLink to={createHref(routes.tablet, {id: value})}>
-                            {value}
+                            {value as string}
                         </InternalLink>
                     );
                 },
                 sortable: false,
             },
         ];
-    }, []);
+    }, [dispatch, history, tenantPath]);
 
     const renderLoader = () => {
         return (
@@ -196,51 +188,35 @@ function TopShards({
     };
 
     const renderContent = () => {
-        if (isColumnEntityType(type)) {
+        if (loading && !wasLoaded) {
+            return renderLoader();
+        }
+
+        if (!data || data.length === 0 || isColumnEntityType(type)) {
             return 'No data';
         }
+
         if (error && !error.isCancelled) {
             return prepareQueryError(error);
         }
 
-        return data && data.length > 0 ? (
+        return (
             <div className={b('table')}>
                 <DataTable
                     columns={tableColumns}
                     data={data}
                     settings={TABLE_SETTINGS}
-                    className={b('table')}
                     theme="yandex-cloud"
                     onSort={onSort}
                     sortOrder={stringToDataTableSortOrder(sortOrder)}
                 />
             </div>
-        ) : (
-            data
         );
     };
 
-    return loading && !wasLoaded ? renderLoader() : <div className={b()}>{renderContent()}</div>;
-}
-
-const mapStateToProps = (state) => {
-    const {loading, data = {}, error, wasLoaded} = state.shardsWorkload;
-    const {autorefresh} = state.schema;
-    return {
-        loading,
-        data: data.result,
-        error,
-        currentSchemaPath: state.schema?.currentSchema?.Path,
-        autorefresh,
-        wasLoaded,
-    };
-};
-
-const mapDispatchToProps = {
-    sendShardQuery,
-    setCurrentSchemaPath,
-    getSchema,
-    setShardQueryOptions,
+    return (
+        <div className={b()}>
+            {renderContent()}
+        </div>
+    );
 };
-
-export default connect(mapStateToProps, mapDispatchToProps)(TopShards);

package/dist/containers/Tenant/Diagnostics/TopShards/index.ts

@@ -0,0 +1 @@
+export * from './TopShards';

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import './SchemaInfoViewer.scss';
 
 import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../../utils';
 
 import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
 
+import {getEntityName} from '../../utils';
+
+import './SchemaInfoViewer.scss';
+
 const b = cn('schema-info-viewer');
 
 const formatTabletMetricsItem = createInfoFormatter({
@@ -68,6 +71,8 @@ class SchemaInfoViewer extends React.Component {
 
     renderContent(data) {
         const {PathDescription = {}} = data;
+        const entityName = getEntityName(PathDescription);
+
         const {
             TableStats = {},
             TabletMetrics = {},
@@ -99,13 +104,15 @@ class SchemaInfoViewer extends React.Component {
         } = TableStats;
         const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
 
+        const generalTableInfo = formatTableStats({
+            PartCount,
+            RowCount,
+            DataSize,
+            IndexSize,
+            ...restTableStats,
+        });
+
         const tableStatsInfo = [
-            formatTableStats({
-                PartCount,
-                RowCount,
-                DataSize,
-                IndexSize,
-            }),
             formatTableStats({
                 LastAccessTime,
                 LastUpdateTime,
@@ -125,7 +132,6 @@ class SchemaInfoViewer extends React.Component {
                 RangeReads,
                 RangeReadRows,
             }),
-            formatTableStats(restTableStats),
         ];
 
         const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
@@ -151,24 +157,30 @@ class SchemaInfoViewer extends React.Component {
             );
         }
 
-        if ([tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat().length === 0) {
-            return <div className={b('item')}>Empty</div>;
+        if (
+            [generalTableInfo, tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat()
+                .length === 0
+        ) {
+            return <div className={b('title')}>{entityName}</div>;
         }
 
         return (
-            <div className={b('row')}>
-                {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
+            <div>
+                <div>{this.renderItem(generalTableInfo, entityName)}</div>
+                <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')}>
-                        {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
-                        {this.renderItem(partitionConfigInfo, 'Partition Config')}
+                        {tableStatsInfo.map((info, index) => (
+                            <React.Fragment key={index}>
+                                {this.renderItem(info, index === 0 ? 'Table Stats' : undefined)}
+                            </React.Fragment>
+                        ))}
                     </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>
         );
@@ -176,11 +188,12 @@ class SchemaInfoViewer extends React.Component {
 
     render() {
         const {data} = this.props;
+        const entityName = getEntityName(data?.PathDescription);
 
         if (data) {
             return <div className={b()}>{this.renderContent(data)}</div>;
         } else {
-            return <div className="error">no schema data</div>;
+            return <div className="error">No {entityName} data</div>;
         }
     }
 }

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

@@ -26,4 +26,12 @@
             grid-template-columns: minmax(max-content, 280px);
         }
     }
+
+    &__title {
+        margin: 15px 0 10px;
+
+        font-size: var(--yc-text-body-2-font-size);
+        font-weight: 600;
+        line-height: var(--yc-text-body-2-line-height);
+    }
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -90,7 +90,7 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         dispatch(disableAutorefresh());
-    }, [currentSchemaPath, tenantName]);
+    }, [currentSchemaPath, tenantName, dispatch]);
 
     useEffect(() => {
         if (tenantName) {

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

@@ -0,0 +1,8 @@
+import {TPathDescription} from '../../../types/api/schema';
+import {mapPathTypeToEntityName} from './schema';
+
+export const getEntityName = (pathDescription?: TPathDescription) => {
+    const {PathType, PathSubType} = pathDescription?.Self || {};
+
+    return mapPathTypeToEntityName(PathType, PathSubType);
+};

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

@@ -1,5 +1,7 @@
 import type {NavigationTreeNodeType} from 'ydb-ui-components';
+
 import {EPathSubType, EPathType} from '../../../types/api/schema';
+import {ETenantType} from '../../../types/api/tenant';
 
 // 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
@@ -41,6 +43,49 @@ export const mapPathTypeToNavigationTreeType = (
 
 // ====================
 
+const pathSubTypeToEntityName: Record<EPathSubType, string | undefined> = {
+    [EPathSubType.EPathSubTypeSyncIndexImplTable]: 'Secondary Index Table',
+    [EPathSubType.EPathSubTypeAsyncIndexImplTable]: 'Secondary Index Table',
+
+    [EPathSubType.EPathSubTypeStreamImpl]: undefined,
+    [EPathSubType.EPathSubTypeEmpty]: undefined,
+};
+
+const pathTypeToEntityName: Record<EPathType, string | undefined> = {
+    [EPathType.EPathTypeInvalid]: undefined,
+
+    [EPathType.EPathTypeSubDomain]: 'Database',
+    [EPathType.EPathTypeExtSubDomain]: 'Database',
+
+    [EPathType.EPathTypeDir]: 'Directory',
+    [EPathType.EPathTypeTable]: 'Table',
+    [EPathType.EPathTypeTableIndex]: 'Secondary Index',
+    [EPathType.EPathTypeColumnStore]: 'Tablestore',
+    [EPathType.EPathTypeColumnTable]: 'Columntable',
+    [EPathType.EPathTypeCdcStream]: 'Changefeed',
+    [EPathType.EPathTypePersQueueGroup]: 'Topic',
+};
+
+export const mapPathTypeToEntityName = (
+    type?: EPathType,
+    subType?: EPathSubType,
+): string | undefined =>
+    (subType && pathSubTypeToEntityName[subType]) || (type && pathTypeToEntityName[type]);
+
+// ====================
+
+const databaseTypeToDBName: Record<ETenantType, string | undefined> = {
+    [ETenantType.UnknownTenantType]: 'Database',
+    [ETenantType.Domain]: 'Cluster Root',
+    [ETenantType.Dedicated]: 'Dedicated Database',
+    [ETenantType.Shared]: 'Shared Database',
+    [ETenantType.Serverless]: 'Serverless Database',
+};
+
+export const mapDatabaseTypeToDBName = (type?: ETenantType) => type && databaseTypeToDBName[type];
+
+// ====================
+
 const pathTypeToIsTable: Record<EPathType, boolean> = {
     [EPathType.EPathTypeTable]: true,
     [EPathType.EPathTypeColumnTable]: true,

package/dist/containers/Tenants/Tenants.js

@@ -10,7 +10,7 @@ import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';
 
@@ -50,7 +50,7 @@ class Tenants extends React.Component {
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
         setHeader: PropTypes.func,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
         cluster: PropTypes.object,
         singleClusterMode: PropTypes.bool,

package/dist/services/api.d.ts

@@ -45,6 +45,9 @@ interface Window {
         getHealthcheckInfo: (
             database: string,
         ) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>;
+        getTenantInfo: (params: {
+            path: string;
+        }) => Promise<import('../types/api/tenant').TTenantInfo>;
         [method: string]: Function;
     };
 }

package/dist/services/api.js

@@ -1,4 +1,4 @@
-import AxiosWrapper from '@yandex-cloud/axios-wrapper';
+import AxiosWrapper from '@gravity-ui/axios-wrapper';
 
 import {backend as BACKEND} from '../store';
 import {StorageTypes} from '../store/reducers/storage';

package/dist/store/reducers/{nodes.js → nodes.ts}

@@ -1,8 +1,12 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
+
 import '../../services/api';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {INodesAction, INodesRootStateSlice, INodesState} from '../../types/store/nodes';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
+export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
 const CLEAR_NODES = 'nodes/CLEAR_NODES';
 const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
@@ -14,13 +18,12 @@ const initialState = {
     nodesUptimeFilter: NodesUptimeFilterValues.All,
 };
 
-const nodes = (state = initialState, action) => {
+const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES.REQUEST: {
             return {
                 ...state,
                 loading: true,
-                requestTime: new Date().getTime(),
             };
         }
         case FETCH_NODES.SUCCESS: {
@@ -45,13 +48,15 @@ const nodes = (state = initialState, action) => {
                 loading: true,
                 data: undefined,
                 wasLoaded: false,
-                requestTime: new Date().getTime(),
                 error: undefined,
             };
         }
 
         case SET_NODES_UPTIME_FILTER: {
-            return {...state, nodesUptimeFilter: action.data};
+            return {
+                ...state,
+                nodesUptimeFilter: action.data,
+            };
         }
         case SET_DATA_WAS_NOT_LOADED: {
             return {
@@ -64,26 +69,27 @@ const nodes = (state = initialState, action) => {
     }
 };
 
-export function getNodes(path) {
+export function getNodes(path: string) {
     return createApiRequest({
         request: window.api.getNodes(path),
         actions: FETCH_NODES,
     });
 }
 
-export const clearNodes = () => ({type: CLEAR_NODES});
+export const clearNodes = () => ({type: CLEAR_NODES} as const);
 
-export const setNodesUptimeFilter = (value) => ({
-    type: SET_NODES_UPTIME_FILTER,
-    data: value,
-});
+export const setNodesUptimeFilter = (value: NodesUptimeFilterValues) =>
+    ({
+        type: SET_NODES_UPTIME_FILTER,
+        data: value,
+    } as const);
 
 export const setDataWasNotLoaded = () => {
     return {
         type: SET_DATA_WAS_NOT_LOADED,
-    };
+    } as const;
 };
 
-export const getNodesUptimeFilter = (state) => state.nodes.nodesUptimeFilter;
+export const getNodesUptimeFilter = (state: INodesRootStateSlice) => state.nodes.nodesUptimeFilter;
 
 export default nodes;