ydb-embedded-ui 4.5.2 → 4.6.0

package/dist/containers/Versions/Versions.tsx

@@ -1,10 +1,14 @@
 import {useState} from 'react';
+import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import {Checkbox, RadioButton} from '@gravity-ui/uikit';
 
-import type {PreparedClusterNode} from '../../store/reducers/clusterNodes/types';
 import type {VersionToColorMap} from '../../types/versions';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {Loader} from '../../components/Loader';
+
 import {getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes} from './groupNodes';
 import {GroupedNodesTree} from './GroupedNodesTree/GroupedNodesTree';
 import {GroupByValue} from './types';
@@ -14,11 +18,16 @@ import './Versions.scss';
 const b = block('ydb-versions');
 
 interface VersionsProps {
-    nodes?: PreparedClusterNode[];
     versionToColor?: VersionToColorMap;
 }
 
-export const Versions = ({nodes = [], versionToColor}: VersionsProps) => {
+export const Versions = ({versionToColor}: VersionsProps) => {
+    const dispatch = useDispatch();
+
+    const {nodes = [], loading, wasLoaded} = useTypedSelector((state) => state.clusterNodes);
+
+    useAutofetcher(() => dispatch(getClusterNodes()), [dispatch], true);
+
     const [groupByValue, setGroupByValue] = useState<GroupByValue>(GroupByValue.VERSION);
     const [expanded, setExpanded] = useState(false);
 
@@ -55,67 +64,66 @@ export const Versions = ({nodes = [], versionToColor}: VersionsProps) => {
             </div>
         );
     };
-    const renderGroupedNodes = () => {
-        const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
-        const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
-        const otherNodes = getOtherNodes(nodes, versionToColor);
-        const storageNodesContent = storageNodes?.length ? (
-            <>
-                <h3>Storage nodes</h3>
-                {storageNodes.map(({title, nodes: itemNodes, items, versionColor}, index) => (
-                    <GroupedNodesTree
-                        key={`storage-nodes-${index}`}
-                        title={title}
-                        nodes={itemNodes}
-                        items={items}
-                        versionColor={versionColor}
-                    />
-                ))}
-            </>
-        ) : null;
-        const tenantNodesContent = tenantNodes?.length ? (
-            <>
-                <h3>Database nodes</h3>
-                {renderControls()}
-                {tenantNodes.map(
-                    ({title, nodes: itemNodes, items, versionColor, versionsValues}, index) => (
-                        <GroupedNodesTree
-                            key={`tenant-nodes-${index}`}
-                            title={title}
-                            nodes={itemNodes}
-                            items={items}
-                            expanded={expanded}
-                            versionColor={versionColor}
-                            versionsValues={versionsValues}
-                        />
-                    ),
-                )}
-            </>
-        ) : null;
-        const otherNodesContent = otherNodes?.length ? (
-            <>
-                <h3>Other nodes</h3>
-                {otherNodes.map(
-                    ({title, nodes: itemNodes, items, versionColor, versionsValues}, index) => (
-                        <GroupedNodesTree
-                            key={`other-nodes-${index}`}
-                            title={title}
-                            nodes={itemNodes}
-                            items={items}
-                            versionColor={versionColor}
-                            versionsValues={versionsValues}
-                        />
-                    ),
-                )}
-            </>
-        ) : null;
-        return (
-            <div className={b('versions')}>
-                {storageNodesContent}
-                {tenantNodesContent}
-                {otherNodesContent}
-            </div>
-        );
-    };
-    return <div className={b('content')}>{renderGroupedNodes()}</div>;
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    }
+
+    const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
+    const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
+    const otherNodes = getOtherNodes(nodes, versionToColor);
+    const storageNodesContent = storageNodes?.length ? (
+        <>
+            <h3>Storage nodes</h3>
+            {storageNodes.map(({title, nodes: itemNodes, items, versionColor}) => (
+                <GroupedNodesTree
+                    key={`storage-nodes-${title}`}
+                    title={title}
+                    nodes={itemNodes}
+                    items={items}
+                    versionColor={versionColor}
+                />
+            ))}
+        </>
+    ) : null;
+    const tenantNodesContent = tenantNodes?.length ? (
+        <>
+            <h3>Database nodes</h3>
+            {renderControls()}
+            {tenantNodes.map(({title, nodes: itemNodes, items, versionColor, versionsValues}) => (
+                <GroupedNodesTree
+                    key={`tenant-nodes-${title}`}
+                    title={title}
+                    nodes={itemNodes}
+                    items={items}
+                    expanded={expanded}
+                    versionColor={versionColor}
+                    versionsValues={versionsValues}
+                />
+            ))}
+        </>
+    ) : null;
+    const otherNodesContent = otherNodes?.length ? (
+        <>
+            <h3>Other nodes</h3>
+            {otherNodes.map(({title, nodes: itemNodes, items, versionColor, versionsValues}) => (
+                <GroupedNodesTree
+                    key={`other-nodes-${title}`}
+                    title={title}
+                    nodes={itemNodes}
+                    items={items}
+                    versionColor={versionColor}
+                    versionsValues={versionsValues}
+                />
+            ))}
+        </>
+    ) : null;
+
+    return (
+        <div className={b('versions')}>
+            {storageNodesContent}
+            {tenantNodesContent}
+            {otherNodesContent}
+        </div>
+    );
 };

package/dist/routes.ts

@@ -13,13 +13,6 @@ const routes = {
     auth: '/auth',
 };
 
-export const CLUSTER_PAGES = {
-    tenants: {id: 'tenants', name: 'Databases', title: 'Database list'},
-    nodes: {id: 'nodes', name: 'Nodes', title: 'Nodes'},
-    storage: {id: 'storage', name: 'Storage', title: 'Storage'},
-    cluster: {id: 'cluster', name: 'Cluster', title: 'Cluster'},
-};
-
 export function createHref(
     route: string,
     params?: Record<string, string | number>,

package/dist/services/api.ts

@@ -50,8 +50,12 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             tablets: true,
         });
     }
-    getClusterNodes() {
-        return this.get<TEvSystemStateResponse>(this.getPath('/viewer/json/sysinfo'), {});
+    getClusterNodes({concurrentId}: AxiosOptions = {}) {
+        return this.get<TEvSystemStateResponse>(
+            this.getPath('/viewer/json/sysinfo'),
+            {},
+            {concurrentId: concurrentId || `getClusterNodes`},
+        );
     }
     getNodeInfo(id?: string) {
         return this.get<TEvSystemStateResponse>(this.getPath('/viewer/json/sysinfo?enums=true'), {

package/dist/store/reducers/clusterNodes/clusterNodes.tsx

@@ -34,6 +34,10 @@ const clusterNodes: Reducer<ClusterNodesState, ClusterNodesAction> = (
             };
         }
         case FETCH_CLUSTER_NODES.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,

package/dist/store/reducers/index.ts

@@ -9,7 +9,8 @@ import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';
-import schema from './schema';
+import schema from './schema/schema';
+import overview from './overview/overview';
 import host from './host';
 import network from './network/network';
 import tenants from './tenants/tenants';
@@ -46,6 +47,7 @@ export const rootReducer = {
     tooltip,
     tablets,
     schema,
+    overview,
     olapStats,
     host,
     network,

package/dist/store/reducers/overview/overview.ts

@@ -0,0 +1,109 @@
+import type {Reducer} from 'redux';
+
+import type {OverviewState, OverviewAction, OverviewHandledResponse} from './types';
+
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+export const FETCH_OVERVIEW = createRequestActionTypes('overview', 'FETCH_OVERVIEW');
+const SET_CURRENT_OVERVIEW_PATH = 'overview/SET_CURRENT_OVERVIEW_PATH';
+const SET_DATA_WAS_NOT_LOADED = 'overview/SET_DATA_WAS_NOT_LOADED';
+
+export const initialState = {
+    loading: true,
+    wasLoaded: false,
+};
+
+const schema: Reducer<OverviewState, OverviewAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_OVERVIEW.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_OVERVIEW.SUCCESS: {
+            if (action.data.data.Path !== state.currentOverviewPath) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: undefined,
+                data: action.data.data,
+                additionalData: action.data.additionalData,
+                loading: false,
+                wasLoaded: true,
+            };
+        }
+        case FETCH_OVERVIEW.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case SET_CURRENT_OVERVIEW_PATH: {
+            return {
+                ...state,
+                currentOverviewPath: action.data,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getOverview({path}: {path: string}) {
+    const request = window.api.getDescribe({path}, {concurrentId: 'getOverview'});
+    return createApiRequest({
+        request,
+        actions: FETCH_OVERVIEW,
+        dataHandler: (data): OverviewHandledResponse => {
+            return {data};
+        },
+    });
+}
+
+export function getOverviewBatched(paths: string[]) {
+    const requestArray = paths.map((p) =>
+        window.api.getDescribe({path: p}, {concurrentId: `getOverviewBatched|${p}`}),
+    );
+    const request = Promise.all(requestArray);
+
+    return createApiRequest({
+        request,
+        actions: FETCH_OVERVIEW,
+        dataHandler: ([item, ...rest]): OverviewHandledResponse => {
+            return {
+                data: item,
+                additionalData: rest,
+            };
+        },
+    });
+}
+
+export function setDataWasNotLoaded() {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+}
+
+export const setCurrentOverviewPath = (path?: string) => {
+    return {
+        type: SET_CURRENT_OVERVIEW_PATH,
+        data: path,
+    } as const;
+};
+
+export default schema;

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

@@ -0,0 +1,24 @@
+import type {ApiRequestAction} from '../../utils';
+import type {IResponseError} from '../../../types/api/error';
+import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+
+import {FETCH_OVERVIEW, setDataWasNotLoaded, setCurrentOverviewPath} from './overview';
+
+export interface OverviewState {
+    loading: boolean;
+    wasLoaded: boolean;
+    currentOverviewPath?: string;
+    data?: TEvDescribeSchemeResult;
+    additionalData?: TEvDescribeSchemeResult[];
+    error?: IResponseError;
+}
+
+export interface OverviewHandledResponse {
+    data: TEvDescribeSchemeResult;
+    additionalData?: TEvDescribeSchemeResult[];
+}
+
+export type OverviewAction =
+    | ApiRequestAction<typeof FETCH_OVERVIEW, OverviewHandledResponse, IResponseError>
+    | ReturnType<typeof setCurrentOverviewPath>
+    | ReturnType<typeof setDataWasNotLoaded>;

package/dist/store/reducers/{schema.ts → schema/schema.ts}

@@ -1,18 +1,20 @@
-import {Reducer} from 'redux';
-import {createSelector, Selector} from 'reselect';
-
-import {
-    ISchemaAction,
-    ISchemaData,
-    ISchemaHandledResponse,
-    ISchemaRootStateSlice,
-    ISchemaState,
-} from '../../types/store/schema';
-import {EPathType} from '../../types/api/schema';
-import '../../services/api';
-import {isEntityWithMergedImplementation} from '../../containers/Tenant/utils/schema';
-
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
+import type {Selector} from 'reselect';
+
+import {createSelector} from 'reselect';
+
+import type {EPathType} from '../../../types/api/schema';
+import type {
+    SchemaAction,
+    SchemaData,
+    SchemaHandledResponse,
+    SchemaStateSlice,
+    SchemaState,
+} from './types';
+
+import '../../../services/api';
+import {isEntityWithMergedImplementation} from '../../../containers/Tenant/utils/schema';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
 
 export const FETCH_SCHEMA = createRequestActionTypes('schema', 'FETCH_SCHEMA');
 const PRELOAD_SCHEMAS = 'schema/PRELOAD_SCHEMAS';
@@ -31,7 +33,7 @@ export const initialState = {
     showPreview: false,
 };
 
-const schema: Reducer<ISchemaState, ISchemaAction> = (state = initialState, action) => {
+const schema: Reducer<SchemaState, SchemaAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_SCHEMA.REQUEST: {
             return {
@@ -87,7 +89,6 @@ const schema: Reducer<ISchemaState, ISchemaAction> = (state = initialState, acti
             return {
                 ...state,
                 currentSchemaPath: action.data,
-                wasLoaded: false,
             };
         }
         case ENABLE_AUTOREFRESH: {
@@ -124,8 +125,8 @@ export function getSchema({path}: {path: string}) {
     return createApiRequest({
         request,
         actions: FETCH_SCHEMA,
-        dataHandler: (data): ISchemaHandledResponse => {
-            const newData: ISchemaData = {};
+        dataHandler: (data): SchemaHandledResponse => {
+            const newData: SchemaData = {};
             if (data.Path) {
                 newData[data.Path] = data;
             }
@@ -138,33 +139,6 @@ export function getSchema({path}: {path: string}) {
     });
 }
 
-export function getSchemaBatched(paths: string[]) {
-    const requestArray = paths.map((p) =>
-        window.api.getSchema({path: p}, {concurrentId: `getSchemaBatched|${p}`}),
-    );
-    const request = Promise.all(requestArray);
-
-    return createApiRequest({
-        request,
-        actions: FETCH_SCHEMA,
-        dataHandler: (data): ISchemaHandledResponse => {
-            const newData: ISchemaData = {};
-
-            data.forEach((dataItem) => {
-                if (dataItem.Path) {
-                    newData[dataItem.Path] = dataItem;
-                }
-            });
-
-            return {
-                path: data[0].Path,
-                currentSchema: data[0],
-                data: newData,
-            };
-        },
-    });
-}
-
 export function setCurrentSchemaPath(currentSchemaPath: string) {
     return {
         type: SET_SCHEMA,
@@ -190,7 +164,7 @@ export function setShowPreview(value: boolean) {
 
 // only stores data for paths that are not in the store yet
 // existing paths are ignored
-export function preloadSchemas(data: ISchemaData) {
+export function preloadSchemas(data: SchemaData) {
     return {
         type: PRELOAD_SCHEMAS,
         data,
@@ -203,14 +177,14 @@ export function resetLoadingState() {
     } as const;
 }
 
-export const selectSchemaChildren = (state: ISchemaRootStateSlice, path?: string) =>
+const selectSchemaChildren = (state: SchemaStateSlice, path?: string) =>
     path ? state.schema.data[path]?.PathDescription?.Children : undefined;
 
-export const selectSchemaData = (state: ISchemaRootStateSlice, path?: string) =>
+export const selectSchemaData = (state: SchemaStateSlice, path?: string) =>
     path ? state.schema.data[path] : undefined;
 
 export const selectSchemaMergedChildrenPaths: Selector<
-    ISchemaRootStateSlice,
+    SchemaStateSlice,
     string[] | undefined,
     [string | undefined, EPathType | undefined]
 > = createSelector(

package/dist/{types/store/schema.ts → store/reducers/schema/types.ts}

@@ -1,3 +1,7 @@
+import type {ApiRequestAction} from '../../utils';
+import type {IResponseError} from '../../../types/api/error';
+import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+
 import {
     disableAutorefresh,
     enableAutorefresh,
@@ -6,17 +10,14 @@ import {
     resetLoadingState,
     setCurrentSchemaPath,
     setShowPreview,
-} from '../../store/reducers/schema';
-import {ApiRequestAction} from '../../store/utils';
-import {IResponseError} from '../api/error';
-import {TEvDescribeSchemeResult} from '../api/schema';
+} from './schema';
 
-export type ISchemaData = Record<string, TEvDescribeSchemeResult>;
+export type SchemaData = Record<string, TEvDescribeSchemeResult>;
 
-export interface ISchemaState {
+export interface SchemaState {
     loading: boolean;
     wasLoaded: boolean;
-    data: ISchemaData;
+    data: SchemaData;
     currentSchema?: TEvDescribeSchemeResult;
     currentSchemaPath?: string;
     autorefresh: boolean;
@@ -24,20 +25,20 @@ export interface ISchemaState {
     error?: IResponseError;
 }
 
-export interface ISchemaHandledResponse {
+export interface SchemaHandledResponse {
     path?: string;
     currentSchema?: TEvDescribeSchemeResult;
-    data?: ISchemaData;
+    data?: SchemaData;
 }
 
-type ISchemaApiRequestAction = ApiRequestAction<
+type SchemaApiRequestAction = ApiRequestAction<
     typeof FETCH_SCHEMA,
-    ISchemaHandledResponse,
+    SchemaHandledResponse,
     IResponseError
 >;
 
-export type ISchemaAction =
-    | ISchemaApiRequestAction
+export type SchemaAction =
+    | SchemaApiRequestAction
     | (
           | ReturnType<typeof setCurrentSchemaPath>
           | ReturnType<typeof enableAutorefresh>
@@ -47,6 +48,6 @@ export type ISchemaAction =
           | ReturnType<typeof resetLoadingState>
       );
 
-export interface ISchemaRootStateSlice {
-    schema: ISchemaState;
+export interface SchemaStateSlice {
+    schema: SchemaState;
 }

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

@@ -11,7 +11,8 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
     PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_INITIAL_MODE_KEY,
-    ENABLE_QUERY_MODES_FOR_EXPLAIN,
+    ENABLE_ADDITIONAL_QUERY_MODES,
+    CLUSTER_INFO_HIDDEN_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
@@ -52,8 +53,8 @@ export const initialState = {
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
             'false',
         ),
-        [ENABLE_QUERY_MODES_FOR_EXPLAIN]: readSavedSettingsValue(
-            ENABLE_QUERY_MODES_FOR_EXPLAIN,
+        [ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
+            ENABLE_ADDITIONAL_QUERY_MODES,
             'false',
         ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
@@ -61,6 +62,7 @@ export const initialState = {
         [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
+        [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'false'),
     },
     systemSettings,
 };