ydb-embedded-ui 3.0.0 → 3.1.0

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

@@ -0,0 +1,278 @@
+import {useState, useContext, useEffect, useMemo} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import {Loader} from '@gravity-ui/uikit';
+
+import InternalLink from '../../../../components/InternalLink/InternalLink';
+
+import HistoryContext from '../../../../contexts/HistoryContext';
+
+import routes, {createHref} from '../../../../routes';
+
+import {
+    sendShardQuery,
+    setShardQueryOptions,
+    setTopShardFilters,
+} from '../../../../store/reducers/shardsWorkload';
+import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import type {IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
+
+import type {EPathType} from '../../../../types/api/schema';
+
+import {formatDateTime, formatNumber} from '../../../../utils';
+import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {prepareQueryError} from '../../../../utils/query';
+
+import {getDefaultNodePath} from '../../../Node/NodePages';
+
+import {isColumnEntityType} from '../../utils/schema';
+
+import {DateRange, DateRangeValues} from './DateRange';
+
+import i18n from './i18n';
+import './TopShards.scss';
+
+const b = cn('top-shards');
+const bLink = cn('yc-link');
+
+const TABLE_SETTINGS: 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',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+};
+
+function prepareCPUWorkloadValue(value: string) {
+    return `${(Number(value) * 100).toFixed(2)}%`;
+}
+
+function stringToDataTableSortOrder(value: string): SortOrder[] | undefined {
+    return value
+        ? value.split(',').map((columnId) => ({
+              columnId,
+              order: DataTable.DESCENDING,
+          }))
+        : undefined;
+}
+
+function stringToQuerySortOrder(value: string) {
+    return value
+        ? value.split(',').map((columnId) => ({
+              columnId,
+              order: 'DESC',
+          }))
+        : undefined;
+}
+
+function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
+    const sortOrders = Array.isArray(value) ? value : [value];
+    return sortOrders.map(({columnId}) => columnId).join(',');
+}
+
+interface TopShardsProps {
+    tenantPath: string;
+    type?: EPathType;
+}
+
+export const TopShards = ({tenantPath, type}: TopShardsProps) => {
+    const dispatch = useDispatch();
+
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        data: {result: data = undefined} = {},
+        filters: storeFilters,
+        error,
+        wasLoaded,
+    } = useTypedSelector((state) => state.shardsWorkload);
+
+    // default date range should be the last hour, but shouldn't propagate into URL until user interacts with the control
+    // redux initial value can't be used, as it synchronizes with URL
+    const [filters, setFilters] = useState<IShardsWorkloadFilters>(() => {
+        if (!storeFilters?.from && !storeFilters?.to) {
+            return {
+                from: Date.now() - HOUR_IN_SECONDS * 1000,
+                to: Date.now(),
+            };
+        }
+
+        return storeFilters;
+    });
+
+    const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
+
+    useAutofetcher(
+        () => {
+            dispatch(
+                sendShardQuery({
+                    database: tenantPath,
+                    path: currentSchemaPath,
+                    sortOrder: stringToQuerySortOrder(sortOrder),
+                    filters,
+                }),
+            );
+        },
+        [dispatch, tenantPath, currentSchemaPath, sortOrder, filters],
+        autorefresh,
+    );
+
+    // don't show loader for requests triggered by table sort, only for path change
+    useEffect(() => {
+        dispatch(
+            setShardQueryOptions({
+                wasLoaded: false,
+                data: undefined,
+            }),
+        );
+    }, [dispatch, currentSchemaPath, tenantPath, filters]);
+
+    const history = useContext(HistoryContext);
+
+    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 handleDateRangeChange = (value: DateRangeValues) => {
+        dispatch(setTopShardFilters(value));
+        setFilters(value);
+    };
+
+    const tableColumns: Column<any>[] = useMemo(() => {
+        const onSchemaClick = (schemaPath: string) => {
+            return () => {
+                dispatch(setCurrentSchemaPath(schemaPath));
+                dispatch(getSchema({path: schemaPath}));
+                history.go(0);
+            };
+        };
+
+        return [
+            {
+                name: tableColumnsNames.Path,
+                render: ({value: relativeNodePath}) => {
+                    return (
+                        <span
+                            onClick={onSchemaClick(tenantPath + relativeNodePath)}
+                            className={bLink({view: 'normal'})}
+                        >
+                            {relativeNodePath as string}
+                        </span>
+                    );
+                },
+                sortable: false,
+            },
+            {
+                name: tableColumnsNames.CPUCores,
+                render: ({value}) => {
+                    return prepareCPUWorkloadValue(value as string);
+                },
+                align: DataTable.RIGHT,
+            },
+            {
+                name: tableColumnsNames.DataSize,
+                header: 'DataSize (B)',
+                render: ({value}) => {
+                    return formatNumber(value as number);
+                },
+                align: DataTable.RIGHT,
+            },
+            {
+                name: tableColumnsNames.TabletId,
+                render: ({value}) => {
+                    return (
+                        <InternalLink to={createHref(routes.tablet, {id: value})}>
+                            {value as string}
+                        </InternalLink>
+                    );
+                },
+                sortable: false,
+            },
+            {
+                name: tableColumnsNames.NodeId,
+                render: ({value: nodeId}) => {
+                    return (
+                        <InternalLink to={getDefaultNodePath(nodeId as string)}>
+                            {nodeId as string}
+                        </InternalLink>
+                    );
+                },
+                align: DataTable.RIGHT,
+                sortable: false,
+            },
+            {
+                name: tableColumnsNames.PeakTime,
+                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                sortable: false,
+            },
+            {
+                name: tableColumnsNames.InFlightTxCount,
+                render: ({value}) => formatNumber(value as number),
+                align: DataTable.RIGHT,
+                sortable: false,
+            },
+        ];
+    }, [dispatch, history, tenantPath]);
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        if (loading && !wasLoaded) {
+            return renderLoader();
+        }
+
+        if (error && !error.isCancelled) {
+            return <div className="error">{prepareQueryError(error)}</div>;
+        }
+
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+
+        return (
+            <div className={b('table')}>
+                <DataTable
+                    columns={tableColumns}
+                    data={data}
+                    settings={TABLE_SETTINGS}
+                    theme="yandex-cloud"
+                    onSort={onSort}
+                    sortOrder={stringToDataTableSortOrder(sortOrder)}
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div className={b()}>
+            <div className={b('controls')}>
+                {i18n('description')}
+                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
+            </div>
+            {renderContent()}
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "no-data": "No data",
+  "description": "Shards with CPU load over 70% are listed"
+}

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

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-top-shards';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/TopShards/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "no-data": "Нет данных",
+  "description": "Отображаются шарды с загрузкой CPU выше 70%"
+}

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;