ydb-embedded-ui 4.22.0 → 4.24.0

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,14 +1,20 @@
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutofetcher, useSearchQuery, useTypedSelector} from '../../../../../utils/hooks';
 import {
     setDataWasNotLoaded,
     getTopStorageGroups,
     selectTopStorageGroups,
 } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 interface TopGroupsProps {
     tenant?: string;
@@ -17,6 +23,8 @@ interface TopGroupsProps {
 export function TopGroups({tenant}: TopGroupsProps) {
     const dispatch = useDispatch();
 
+    const query = useSearchQuery();
+
     const {autorefresh} = useTypedSelector((state) => state.schema);
     const {loading, wasLoaded, error} = useTypedSelector((state) => state.topStorageGroups);
     const topGroups = useTypedSelector(selectTopStorageGroups);
@@ -36,11 +44,20 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
+    const title = getSectionTitle({
+        entity: i18n('groups'),
+        postfix: i18n('by-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+        }),
+    });
+
     return (
         <TenantOverviewTableLayout
             data={topGroups || []}
             columns={columns}
-            title="Top groups by usage"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -12,7 +12,10 @@ import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
 import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+import {getSectionTitle} from '../getSectionTitle';
+import i18n from '../i18n';
 
 import '../TenantOverview.scss';
 
@@ -72,12 +75,16 @@ export function TopTables({path}: TopTablesProps) {
                 ) : null,
         },
     ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
 
     return (
         <TenantOverviewTableLayout
             data={data || []}
             columns={columns}
-            title="Top tables by size"
+            title={title}
             loading={loading}
             wasLoaded={wasLoaded}
             error={error}

package/dist/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.tsx

@@ -0,0 +1,28 @@
+import {InternalLink} from '../../../../components/InternalLink/InternalLink';
+
+import i18n from './i18n';
+
+interface GetSectionTitleParams {
+    entity: string;
+    postfix: string;
+    prefix?: string;
+    link?: string;
+}
+
+// Titles are formed by the principle "Top entities by parameter"
+export const getSectionTitle = ({
+    prefix = i18n('top'),
+    entity,
+    postfix,
+    link,
+}: GetSectionTitleParams) => {
+    if (link) {
+        return (
+            <>
+                {prefix} <InternalLink to={link}>{entity}</InternalLink> {postfix}
+            </>
+        );
+    }
+
+    return `${prefix} ${entity} ${postfix}`;
+};

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

@@ -7,5 +7,21 @@
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
-  "top-groups.empty-data": "No such groups"
+  "top-groups.empty-data": "No such groups",
+
+  "top": "Top",
+
+  "nodes": "nodes",
+  "shards": "shards",
+  "groups": "groups",
+  "queries": "queries",
+  "tables": "tables",
+
+  "by-pools-usage": "by pools usage",
+  "by-cpu-time": "by cpu time",
+  "by-cpu-usage": "by cpu usage",
+  "by-load": "by load",
+  "by-memory": "by memory",
+  "by-usage": "by usage",
+  "by-size": "by size"
 }

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

@@ -7,5 +7,21 @@
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
-  "top-groups.empty-data": "Нет групп"
+  "top-groups.empty-data": "Нет групп",
+
+  "top": "Топ",
+
+  "nodes": "узлов",
+  "shards": "шардов",
+  "groups": "групп",
+  "queries": "запросов",
+  "tables": "таблиц",
+
+  "by-pools-usage": "по использованию пулов",
+  "by-cpu-time": "по времени cpu",
+  "by-cpu-usage": "по использованию cpu",
+  "by-load": "по нагрузке",
+  "by-memory": "по памяти",
+  "by-usage": "по потреблению",
+  "by-size": "по размеру"
 }

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

@@ -1,3 +1,4 @@
+import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
@@ -28,6 +29,16 @@ interface SchemaViewerProps {
 }
 
 export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaViewerProps) => {
+    // Keys should be displayd by their order in keyColumnIds (Primary Key)
+    const keyColumnsOrderValues = useMemo(() => {
+        return keyColumnIds.reduce<Record<number, number>>((result, keyColumnId, index) => {
+            // Put columns with negative values, so they will be the first with ascending sort
+            // Minus keyColumnIds.length for the first key, -1 for the last
+            result[keyColumnId] = index - keyColumnIds.length;
+            return result;
+        }, {});
+    }, [keyColumnIds]);
+
     let dataTableColumns: Column<TColumnDescription>[] = [
         {
             name: SchemaViewerColumns.id,
@@ -36,8 +47,11 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         {
             name: SchemaViewerColumns.key,
             width: 40,
+            // Table should start with key columns on sort click
+            defaultOrder: DataTable.ASCENDING,
             sortAccessor: (row) => {
-                return row.Id && keyColumnIds.includes(row.Id) ? 1 : 0;
+                // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns
+                return (row.Id && keyColumnsOrderValues[row.Id]) || 1;
             },
             render: ({row}) => {
                 return row.Id && keyColumnIds.includes(row.Id) ? (
@@ -58,6 +72,8 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         {
             name: SchemaViewerColumns.notNull,
             width: 100,
+            // Table should start with notNull columns on sort click
+            defaultOrder: DataTable.DESCENDING,
             render: ({row}) => {
                 if (row.NotNull) {
                     return '\u2713';
@@ -75,22 +91,14 @@ export const SchemaViewer = ({keyColumnIds = [], columns = [], type}: SchemaView
         );
     }
 
-    // Display key columns first
-    const tableData = columns.sort((column) => {
-        if (column.Id && keyColumnIds.includes(column.Id)) {
-            return 1;
-        }
-        return -1;
-    });
-
     return (
         <div className={b()}>
             <DataTable
                 theme="yandex-cloud"
-                data={tableData}
+                data={columns}
                 columns={dataTableColumns}
                 settings={DEFAULT_TABLE_SETTINGS}
-                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
+                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.ASCENDING}}
             />
         </div>
     );

package/dist/services/api.ts

@@ -34,11 +34,10 @@ import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
 import {prepareSortValue} from '../utils/filters';
+import {settingsApi} from '../utils/settings';
 
 const config = {withCredentials: !window.custom_backend};
 
-const settingsApi = window.web_version ? window.systemSettings?.settingsApi : undefined;
-
 type AxiosOptions = {
     concurrentId?: string;
 };

package/dist/store/reducers/cluster/__test__/parseGroupsStatsQueryResponse.test.ts

@@ -0,0 +1,121 @@
+import {parseGroupsStatsQueryResponse} from '../utils';
+
+describe('parseGroupsStatsQueryResponse', () => {
+    const columns = [
+        {
+            name: 'PDiskFilter',
+            type: 'Utf8?',
+        },
+        {
+            name: 'ErasureSpecies',
+            type: 'Utf8?',
+        },
+        {
+            name: 'CurrentAvailableSize',
+            type: 'Uint64?',
+        },
+        {
+            name: 'CurrentAllocatedSize',
+            type: 'Uint64?',
+        },
+        {
+            name: 'CurrentGroupsCreated',
+            type: 'Uint32?',
+        },
+        {
+            name: 'AvailableGroupsToCreate',
+            type: 'Uint32?',
+        },
+    ];
+
+    // 2 disk types and 2 erasure types
+    const dataSet1 = {
+        columns,
+        result: [
+            ['Type:SSD', 'block-4-2', '1000', '2000', 100, 50],
+            ['Type:ROT', 'block-4-2', '2000', '1000', 50, 0],
+            ['Type:ROT', 'mirror-3of4', '1000', '0', 15, 0],
+            ['Type:SSD', 'mirror-3of4', '1000', '0', 5, 50],
+            ['Type:ROT', 'mirror-3-dc', null, null, null, 0],
+            ['Type:SSD', 'mirror-3-dc', null, null, null, 0],
+        ],
+    };
+
+    // 2 disk types and 1 erasure types, but with additional disks params
+    const dataSet2 = {
+        columns,
+        result: [
+            ['Type:ROT,SharedWithOs:0,ReadCentric:0,Kind:0', 'mirror-3-dc', '1000', '500', 16, 16],
+            ['Type:ROT,SharedWithOs:1,ReadCentric:0,Kind:0', 'mirror-3-dc', '2000', '1000', 8, 24],
+            ['Type:SSD', 'mirror-3-dc', '3000', '400', 2, 10],
+            ['Type:ROT', 'mirror-3-dc', null, null, null, 32],
+            ['Type:ROT', 'block-4-2', null, null, null, 20],
+            ['Type:SSD', 'block-4-2', null, null, null, 0],
+        ],
+    };
+    const parsedDataSet1 = {
+        SSD: {
+            'block-4-2': {
+                diskType: 'SSD',
+                erasure: 'block-4-2',
+                createdGroups: 100,
+                totalGroups: 150,
+                allocatedSize: 2000,
+                availableSize: 1000,
+            },
+            'mirror-3of4': {
+                diskType: 'SSD',
+                erasure: 'mirror-3of4',
+                createdGroups: 5,
+                totalGroups: 55,
+                allocatedSize: 0,
+                availableSize: 1000,
+            },
+        },
+        HDD: {
+            'block-4-2': {
+                diskType: 'HDD',
+                erasure: 'block-4-2',
+                createdGroups: 50,
+                totalGroups: 50,
+                allocatedSize: 1000,
+                availableSize: 2000,
+            },
+            'mirror-3of4': {
+                diskType: 'HDD',
+                erasure: 'mirror-3of4',
+                createdGroups: 15,
+                totalGroups: 15,
+                allocatedSize: 0,
+                availableSize: 1000,
+            },
+        },
+    };
+
+    const parsedDataSet2 = {
+        HDD: {
+            'mirror-3-dc': {
+                diskType: 'HDD',
+                erasure: 'mirror-3-dc',
+                createdGroups: 24,
+                totalGroups: 64,
+                allocatedSize: 1500,
+                availableSize: 3000,
+            },
+        },
+        SSD: {
+            'mirror-3-dc': {
+                diskType: 'SSD',
+                erasure: 'mirror-3-dc',
+                createdGroups: 2,
+                totalGroups: 12,
+                allocatedSize: 400,
+                availableSize: 3000,
+            },
+        },
+    };
+    it('should correctly parse data', () => {
+        expect(parseGroupsStatsQueryResponse(dataSet1)).toEqual(parsedDataSet1);
+        expect(parseGroupsStatsQueryResponse(dataSet2)).toEqual(parsedDataSet2);
+    });
+});

package/dist/store/reducers/cluster/cluster.ts

@@ -3,6 +3,7 @@ import type {Reducer} from 'redux';
 import '../../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../../utils';
 import type {ClusterAction, ClusterState} from './types';
+import {createSelectClusterGroupsQuery, parseGroupsStatsQueryResponse} from './utils';
 
 export const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
 
@@ -17,9 +18,12 @@ const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, act
             };
         }
         case FETCH_CLUSTER.SUCCESS: {
+            const {clusterData, groupsStats} = action.data;
+
             return {
                 ...state,
-                data: action.data,
+                data: clusterData,
+                groupsStats,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -42,8 +46,48 @@ const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, act
 };
 
 export function getClusterInfo(clusterName?: string) {
+    async function requestClusterData() {
+        // Error here is handled by createApiRequest
+        const clusterData = await window.api.getClusterInfo(clusterName);
+
+        try {
+            const clusterRoot = clusterData.Domain;
+
+            // Without domain we cannot get stats from system tables
+            if (!clusterRoot) {
+                return {
+                    clusterData,
+                };
+            }
+
+            const query = createSelectClusterGroupsQuery(clusterRoot);
+
+            // Normally query request should be fulfilled within 300-400ms even on very big clusters
+            // Table with stats is supposed to be very small (less than 10 rows)
+            // So we batch this request with cluster request to prevent possible layout shifts, if data is missing
+            const groupsStatsResponse = await window.api.sendQuery({
+                schema: 'modern',
+                query: query,
+                database: clusterRoot,
+                action: 'execute-scan',
+            });
+
+            return {
+                clusterData,
+                groupsStats: parseGroupsStatsQueryResponse(groupsStatsResponse),
+            };
+        } catch {
+            // Doesn't return groups stats on error
+            // It could happen if user doesn't have access rights
+            // Or there are no system tables in cluster root
+            return {
+                clusterData,
+            };
+        }
+    }
+
     return createApiRequest({
-        request: window.api.getClusterInfo(clusterName),
+        request: requestClusterData(),
         actions: FETCH_CLUSTER,
     });
 }

package/dist/store/reducers/cluster/types.ts

@@ -1,14 +1,39 @@
-import {FETCH_CLUSTER} from './cluster';
-
 import type {TClusterInfo} from '../../../types/api/cluster';
-import type {ApiRequestAction} from '../../utils';
 import type {IResponseError} from '../../../types/api/error';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_CLUSTER} from './cluster';
+
+export interface DiskErasureGroupsStats {
+    diskType: string;
+    erasure: string;
+    createdGroups: number;
+    totalGroups: number;
+    allocatedSize: number;
+    availableSize: number;
+}
+
+/** Keys - erasure types */
+export type DiskGroupsStats = Record<string, DiskErasureGroupsStats>;
+
+/** Keys - PDisks types */
+export type ClusterGroupsStats = Record<string, DiskGroupsStats>;
 
 export interface ClusterState {
     loading: boolean;
     wasLoaded: boolean;
     data?: TClusterInfo;
     error?: IResponseError;
+    groupsStats?: ClusterGroupsStats;
+}
+
+export interface HandledClusterResponse {
+    clusterData: TClusterInfo;
+    groupsStats: ClusterGroupsStats;
 }
 
-export type ClusterAction = ApiRequestAction<typeof FETCH_CLUSTER, TClusterInfo, IResponseError>;
+export type ClusterAction = ApiRequestAction<
+    typeof FETCH_CLUSTER,
+    HandledClusterResponse,
+    IResponseError
+>;

package/dist/store/reducers/cluster/utils.ts

@@ -0,0 +1,88 @@
+import type {ExecuteQueryResponse} from '../../../types/api/query';
+import {parseQueryAPIExecuteResponse} from '../../../utils/query';
+
+import type {ClusterGroupsStats} from './types';
+
+export const createSelectClusterGroupsQuery = (clusterRoot: string) => {
+    return `
+SELECT 
+    PDiskFilter,
+    ErasureSpecies,
+    CurrentAvailableSize,
+    CurrentAllocatedSize,
+    CurrentGroupsCreated,
+    AvailableGroupsToCreate
+    FROM \`${clusterRoot}/.sys/ds_storage_stats\`
+    ORDER BY CurrentGroupsCreated DESC;
+`;
+};
+
+const getDiskType = (rawTypeString: string) => {
+    // Check if value math regexp and put disk type in type group
+    const diskTypeRe = /^Type:(?<type>[A-Za-z]+)/;
+
+    const diskType = rawTypeString.match(diskTypeRe)?.groups?.['type'];
+
+    if (diskType === 'ROT') {
+        // Display ROT as HDD
+        return 'HDD';
+    }
+
+    return diskType;
+};
+
+export const parseGroupsStatsQueryResponse = (
+    data: ExecuteQueryResponse<'modern'>,
+): ClusterGroupsStats => {
+    const parsedData = parseQueryAPIExecuteResponse(data).result;
+    const result: ClusterGroupsStats = {};
+
+    parsedData?.forEach((stats) => {
+        const {
+            PDiskFilter,
+            ErasureSpecies: erasure,
+            CurrentAvailableSize,
+            CurrentAllocatedSize,
+            CurrentGroupsCreated,
+            AvailableGroupsToCreate,
+        } = stats;
+
+        const createdGroups = Number(CurrentGroupsCreated) || 0;
+        const availableGroupsToCreate = Number(AvailableGroupsToCreate) || 0;
+        const totalGroups = createdGroups + availableGroupsToCreate;
+        const allocatedSize = Number(CurrentAllocatedSize) || 0;
+        const availableSize = Number(CurrentAvailableSize) || 0;
+        const diskType = PDiskFilter && typeof PDiskFilter === 'string' && getDiskType(PDiskFilter);
+
+        if (diskType && erasure && typeof erasure === 'string' && createdGroups) {
+            const preparedStats = {
+                diskType,
+                erasure,
+                createdGroups,
+                totalGroups,
+                allocatedSize,
+                availableSize,
+            };
+
+            if (result[diskType]) {
+                if (result[diskType][erasure]) {
+                    const currentValue = {...result[diskType][erasure]};
+                    result[diskType][erasure] = {
+                        diskType,
+                        erasure,
+                        createdGroups: currentValue.createdGroups + createdGroups,
+                        totalGroups: currentValue.totalGroups + totalGroups,
+                        allocatedSize: currentValue.allocatedSize + allocatedSize,
+                        availableSize: currentValue.availableSize + availableSize,
+                    };
+                } else {
+                    result[diskType][erasure] = preparedStats;
+                }
+            } else {
+                result[diskType] = {[erasure]: preparedStats};
+            }
+        }
+    });
+
+    return result;
+};

package/dist/store/reducers/settings/settings.ts

@@ -21,7 +21,12 @@ import {
 import '../../../services/api';
 import {parseJson} from '../../../utils/utils';
 import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
-import {readSavedSettingsValue, systemSettings, userSettings} from '../../../utils/settings';
+import {
+    readSavedSettingsValue,
+    settingsApi,
+    systemSettings,
+    userSettings,
+} from '../../../utils/settings';
 
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
@@ -115,13 +120,16 @@ export const setSettingValue = (
     name: string,
     value: string,
 ): ThunkAction<void, RootState, unknown, SetSettingValueAction> => {
-    return (dispatch, getState) => {
+    return (dispatch) => {
         dispatch({type: SET_SETTING_VALUE, data: {name, value}});
-        const {singleClusterMode} = getState();
-        if (singleClusterMode) {
-            localStorage.setItem(name, value);
-        } else {
+
+        // If there is no settingsApi, use localStorage
+        if (settingsApi) {
             window.api.postSetting(name, value);
+        } else {
+            try {
+                localStorage.setItem(name, value);
+            } catch {}
         }
     };
 };

package/dist/types/api/cluster.ts

@@ -32,6 +32,9 @@ export interface TClusterInfo {
     /** uint64 */
     Tablets?: string;
 
+    /** Cluster root database */
+    Domain?: string;
+
     Balancer?: string; // additional
     Solomon?: string; // additional
 }

package/dist/utils/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './useTypedSelector';
 export * from './useSetting';
 export * from './useQueryModes';
 export * from './useTableSort';
+export * from './useSearchQuery';
 
 export * from './useNodesRequestParams';
 export * from './useStorageRequestParams';

package/dist/utils/hooks/useSearchQuery.ts

@@ -0,0 +1,9 @@
+import {useLocation} from 'react-router';
+
+import {parseQuery} from '../../routes';
+
+export const useSearchQuery = () => {
+    const location = useLocation();
+
+    return parseQuery(location);
+};

package/dist/utils/settings.ts

@@ -3,8 +3,11 @@ import {getValueFromLS} from './utils';
 export const userSettings = window.userSettings || {};
 export const systemSettings = window.systemSettings || {};
 
+export const settingsApi = window.web_version ? systemSettings.settingsApi : undefined;
+
 export function readSavedSettingsValue(key: string, defaultValue?: string) {
-    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
+    // If there is no settingsApi, use localStorage
+    const savedValue = settingsApi ? userSettings[key] : getValueFromLS(key);
 
     return savedValue ?? defaultValue;
 }

package/package.json

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