ydb-embedded-ui 2.4.1 → 2.4.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.4.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.2...v2.4.3) (2022-11-14)
+
+
+### Bug Fixes
+
+* fix app crash on ColumnTable path type ([a1aefa8](https://github.com/ydb-platform/ydb-embedded-ui/commit/a1aefa876600b1b459bf3024f0704883431df5a2))
+* **schema:** add types for ColumnTable and ColumnStore ([dc13307](https://github.com/ydb-platform/ydb-embedded-ui/commit/dc13307dcea801c05863b7dd5ee19f01aa074c85))
+
+## [2.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.1...v2.4.2) (2022-11-09)
+
+
+### Bug Fixes
+
+* **QueryExplain:** apply all node types ([06d26de](https://github.com/ydb-platform/ydb-embedded-ui/commit/06d26def15496f8e2de00d941b39bf6a68382f14))
+
 ## [2.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.0...v2.4.1) (2022-11-01)
 
 

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

@@ -1,11 +1,11 @@
 import {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useAutofetcher} from '../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {Search} from '../../../../components/Search';
 import {getDescribe, selectConsumers} from '../../../../store/reducers/describe';
 
@@ -28,7 +28,7 @@ export const Consumers = ({path}: ConsumersProps) => {
 
     useAutofetcher(fetchData, [path]);
 
-    const consumers = useSelector((state) => selectConsumers(state, path));
+    const consumers = useTypedSelector((state) => selectConsumers(state, path));
 
     const [consumersToRender, setConsumersToRender] = useState(consumers);
 

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

@@ -1,16 +1,16 @@
 import {useCallback} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {Loader} from '@gravity-ui/uikit';
 
 import {SelfCheckResult} from '../../../../types/api/healthcheck';
+import {useTypedSelector, useAutofetcher} from '../../../../utils/hooks';
 import {
     getHealthcheckInfo,
     selectIssuesTreeById,
     selectIssuesTreesRoots,
 } from '../../../../store/reducers/healthcheckInfo';
-import {useAutofetcher} from '../../../../utils/hooks';
 
 import {Details} from './Details';
 import {Preview} from './Preview';
@@ -33,13 +33,15 @@ export const Healthcheck = (props: HealthcheckProps) => {
 
     const dispatch = useDispatch();
 
-    const {data, loading, wasLoaded, error} = useSelector((state: any) => state.healthcheckInfo);
+    const {data, loading, wasLoaded, error} = useTypedSelector((state) => state.healthcheckInfo);
     const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
 
-    const issuesTreesRoots = useSelector(selectIssuesTreesRoots);
-    const expandedIssueTree = useSelector((state) => selectIssuesTreeById(state, expandedIssueId));
+    const issuesTreesRoots = useTypedSelector(selectIssuesTreesRoots);
+    const expandedIssueTree = useTypedSelector((state) =>
+        selectIssuesTreeById(state, expandedIssueId),
+    );
 
-    const {autorefresh} = useSelector((state: any) => state.schema);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
         dispatch(getHealthcheckInfo(tenant));

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

@@ -12,7 +12,7 @@ import {
     PersQueueGroupInfo,
 } from '../../../../components/InfoViewer/schemaInfo';
 
-import {EPathType} from '../../../../types/api/schema';
+import {EPathType, TColumnTableDescription} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 //@ts-ignore
 import {getSchema, resetLoadingState} from '../../../../store/reducers/schema';
@@ -25,7 +25,7 @@ import {useAutofetcher} from '../../../../utils/hooks';
 
 import './Overview.scss';
 
-function prepareOlapTableGeneral(tableData: any, olapStats?: any[]) {
+function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapStats?: any[]) {
     const {ColumnShardCount} = tableData;
     const Bytes = olapStats?.reduce((acc, el) => {
         acc += parseInt(el.Bytes) || 0;
@@ -103,7 +103,8 @@ function Overview(props: OverviewProps) {
 
     const schemaData = useMemo(() => {
         return isTableType(type) && isColumnEntityType(type)
-            ? prepareOlapTableGeneral(tableSchema, olapStats)
+            ? // process data for ColumnTable
+              prepareOlapTableGeneral(tableSchema, olapStats)
             : currentItem;
     }, [type, tableSchema, olapStats, currentItem]);
 

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -20,7 +20,12 @@ import {
 } from '../../../components/InfoViewer/schemaOverview';
 import Icon from '../../../components/Icon/Icon';
 
-import {EPathSubType, EPathType, TDirEntry} from '../../../types/api/schema';
+import {
+    EPathSubType,
+    EPathType,
+    TColumnTableDescription,
+    TDirEntry,
+} from '../../../types/api/schema';
 import {isColumnEntityType, isIndexTable, isTableType} from '../utils/schema';
 
 import {
@@ -57,19 +62,26 @@ const initialTenantCommonInfoState = {
     collapsed: getInitialIsSummaryCollapsed(),
 };
 
-function prepareOlapTableSchema(tableSchema: any) {
-    const {Name, Schema = {}} = tableSchema;
-    const {Columns, KeyColumnNames} = Schema;
-    const KeyColumnIds = KeyColumnNames?.map((name: string) => {
-        const column = Columns?.find((el: any) => el.Name === name);
-        return column.Id;
-    });
+function prepareOlapTableSchema(tableSchema: TColumnTableDescription = {}) {
+    const {Name, Schema} = tableSchema;
+
+    if (Schema) {
+        const {Columns, KeyColumnNames} = Schema;
+        const KeyColumnIds = KeyColumnNames?.map((name: string) => {
+            const column = Columns?.find((el) => el.Name === name);
+            return column?.Id;
+        });
+
+        return {
+            Columns,
+            KeyColumnNames,
+            Name,
+            KeyColumnIds,
+        };
+    }
 
     return {
-        Columns,
-        KeyColumnNames,
         Name,
-        KeyColumnIds,
     };
 }
 
@@ -104,15 +116,23 @@ function ObjectSummary(props: ObjectSummaryProps) {
     });
 
     const {name: tenantName, info: infoTab} = queryParams;
-    const pathData: TDirEntry | undefined = _.get(data[tenantName as string], 'PathDescription.Self');
-    const currentSchemaData: TDirEntry | undefined = _.get(data[currentSchemaPath], 'PathDescription.Self');
+    const pathData: TDirEntry | undefined = _.get(
+        data[tenantName as string],
+        'PathDescription.Self',
+    );
+    const currentSchemaData: TDirEntry | undefined = _.get(
+        data[currentSchemaPath],
+        'PathDescription.Self',
+    );
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
 
-    const schema = isTableType(props.type) && isColumnEntityType(props.type)
-        ? prepareOlapTableSchema(tableSchema)
-        : tableSchema;
+    const schema =
+        isTableType(props.type) && isColumnEntityType(props.type)
+            ? // process data for ColumnTable
+              prepareOlapTableSchema(tableSchema)
+            : tableSchema;
 
     useEffect(() => {
         const {type} = props;
@@ -166,11 +186,16 @@ function ObjectSummary(props: ObjectSummaryProps) {
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
-            [EPathType.EPathTypeCdcStream]: () => <CDCStreamOverview data={data[currentSchemaPath]} />,
-            [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupOverview data={data[currentSchemaPath]} />,
+            [EPathType.EPathTypeCdcStream]: () => (
+                <CDCStreamOverview data={data[currentSchemaPath]} />
+            ),
+            [EPathType.EPathTypePersQueueGroup]: () => (
+                <PersQueueGroupOverview data={data[currentSchemaPath]} />
+            ),
         };
 
-        let component = currentSchemaData?.PathType && pathTypeToComponent[currentSchemaData.PathType]?.();
+        let component =
+            currentSchemaData?.PathType && pathTypeToComponent[currentSchemaData.PathType]?.();
 
         if (!component) {
             const startTimeInMilliseconds = Number(currentSchemaData?.CreateStep);
@@ -182,11 +207,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
             component = <InfoViewer info={[{label: 'Create time', value: createTime}]} />;
         }
 
-        return (
-            <div className={b('overview-wrapper')}>
-                {component}
-            </div>
-        );
+        return <div className={b('overview-wrapper')}>{component}</div>;
     };
 
     const renderTabContent = () => {

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

@@ -35,7 +35,7 @@ const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined>
 export const mapPathTypeToNavigationTreeType = (
     type: EPathType = EPathType.EPathTypeDir,
     subType?: EPathSubType,
-    defaultType: NavigationTreeNodeType = 'directory'
+    defaultType: NavigationTreeNodeType = 'directory',
 ): NavigationTreeNodeType =>
     (subType && pathSubTypeToNodeType[subType]) || pathTypeToNodeType[type] || defaultType;
 
@@ -87,5 +87,4 @@ const pathTypeToIsColumn: Record<EPathType, boolean> = {
     [EPathType.EPathTypePersQueueGroup]: false,
 };
 
-export const isColumnEntityType = (type?: EPathType) =>
-    (type && pathTypeToIsColumn[type]) ?? false;
+export const isColumnEntityType = (type?: EPathType) => (type && pathTypeToIsColumn[type]) ?? false;

package/dist/store/getUrlData.ts

@@ -0,0 +1,27 @@
+import url from 'url';
+
+export const getUrlData = (href: string, singleClusterMode: boolean) => {
+    if (!singleClusterMode) {
+        const {backend, clusterName} = url.parse(href, true).query;
+        return {
+            basename: '/',
+            backend,
+            clusterName,
+        };
+    } else if (window.custom_backend) {
+        const {backend} = url.parse(href, true).query;
+        return {
+            basename: '/',
+            backend: backend || window.custom_backend,
+        };
+    } else {
+        const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];
+        const basenamePrefix = Boolean(parsedPrefix.length) && parsedPrefix[0];
+        const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/');
+
+        return {
+            basename,
+            backend: basenamePrefix || '',
+        };
+    }
+};

package/dist/store/index.js

@@ -1,47 +1,16 @@
 import {createStore, applyMiddleware, compose} from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import getLocationMiddleware from './state-url-mapping';
 import {createBrowserHistory} from 'history';
 import {listenForHistoryChange} from 'redux-location-state';
 
+import {getUrlData} from './getUrlData';
+import getLocationMiddleware from './state-url-mapping';
 import rootReducer from './reducers';
 
-import url from 'url';
-
-export const webVersion = window.web_version;
-
-export const customBackend = window.custom_backend;
-
-export const getUrlData = (href, singleClusterMode) => {
-    if (!singleClusterMode) {
-        const {backend, clusterName} = url.parse(href, true).query;
-        return {
-            basename: '/',
-            backend,
-            clusterName,
-        };
-    } else if (customBackend) {
-        const {backend} = url.parse(href, true).query;
-        return {
-            basename: '/',
-            backend: backend || window.custom_backend,
-        };
-    } else {
-        const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];
-        const basenamePrefix = Boolean(parsedPrefix.length) && parsedPrefix[0];
-        const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/');
-
-        return {
-            basename,
-            backend: basenamePrefix || '',
-        };
-    }
-};
+export let backend, basename, clusterName;
 
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-export let backend, basename, clusterName;
-
 function _configureStore(aRootReducer, history, singleClusterMode) {
     const {locationMiddleware, reducersWithLocation} = getLocationMiddleware(history, aRootReducer);
     const middlewares = applyMiddleware(thunkMiddleware, locationMiddleware);
@@ -51,7 +20,7 @@ function _configureStore(aRootReducer, history, singleClusterMode) {
     });
 }
 
-export default function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
+function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
     ({backend, basename, clusterName} = getUrlData(window.location.href, singleClusterMode));
     const history = createBrowserHistory({basename});
 
@@ -59,3 +28,10 @@ export default function configureStore(aRootReducer = rootReducer, singleCluster
     listenForHistoryChange(store, history);
     return {history, store};
 }
+
+export const webVersion = window.web_version;
+export const customBackend = window.custom_backend;
+
+export * from "./reducers"
+
+export default configureStore;

package/dist/store/reducers/describe.ts

@@ -1,16 +1,25 @@
-import {createSelector} from 'reselect';
+import {createSelector, Selector} from 'reselect';
+import {Reducer} from 'redux';
 
 import '../../services/api';
 import {TEvDescribeSchemeResult} from '../../types/api/schema';
 import {IConsumer} from '../../types/api/consumers';
+import {IDescribeRootStateSlice, IDescribeState} from '../../types/store/describe';
+import {IResponseError} from '../../types/api/error';
 import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
 
 const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
 
-const describe = (
-    state = {loading: false, wasLoaded: false, data: {}},
-    action: ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, unknown>,
-) => {
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+    data: {},
+};
+
+const describe: Reducer<
+    IDescribeState,
+    ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, IResponseError>
+> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_DESCRIBE.REQUEST: {
             return {
@@ -50,16 +59,21 @@ const describe = (
 };
 
 // Consumers selectors
-const selectConsumersNames = (state: any, path: string): string[] | undefined =>
-    state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
+const selectConsumersNames: Selector<IDescribeRootStateSlice, string[] | undefined, [string]> = (
+    state,
+    path,
+) => state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
 
-export const selectConsumers = createSelector(selectConsumersNames, (names = []): IConsumer[] => {
-    const consumers = names.map((name) => {
-        return {name};
-    });
+export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[]> = createSelector(
+    selectConsumersNames,
+    (names = []) => {
+        const consumers = names.map((name) => {
+            return {name};
+        });
 
-    return consumers;
-});
+        return consumers;
+    },
+);
 
 export function getDescribe({path}: {path: string}) {
     return createApiRequest({

package/dist/store/reducers/header.ts

@@ -1,10 +1,13 @@
+import {Reducer} from 'redux';
+
 const SET_HEADER = 'SET_HEADER';
 
+type IHeaderAction = ReturnType<typeof setHeader>;
 export type HeaderItemType = {text: string; link?: string};
 
 const initialState: HeaderItemType[] = [];
 
-const header = function (state = initialState, action: ReturnType<typeof setHeader>) {
+const header: Reducer<HeaderItemType[], IHeaderAction> = function (state = initialState, action) {
     switch (action.type) {
         case SET_HEADER:
             return action.data;

package/dist/store/reducers/healthcheckInfo.ts

@@ -2,10 +2,16 @@ import _flow from 'lodash/fp/flow';
 import _sortBy from 'lodash/fp/sortBy';
 import _uniqBy from 'lodash/fp/uniqBy';
 import _omit from 'lodash/omit';
-import {createSelector} from 'reselect';
-
-import {IIssuesTree} from '../../types/store/healthcheck';
+import {createSelector, Selector} from 'reselect';
+import {Reducer} from 'redux';
+
+import {
+    IHealthcheckInfoState,
+    IHealthcheckInfoRootStateSlice,
+    IIssuesTree,
+} from '../../types/store/healthcheck';
 import {HealthCheckAPIResponse, IssueLog, StatusFlag} from '../../types/api/healthcheck';
+import {IResponseError} from '../../types/api/error';
 
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
@@ -14,10 +20,10 @@ const FETCH_HEALTHCHECK = createRequestActionTypes('cluster', 'FETCH_HEALTHCHECK
 
 const initialState = {loading: false, wasLoaded: false};
 
-const healthcheckInfo = function (
-    state = initialState,
-    action: ApiRequestAction<typeof FETCH_HEALTHCHECK, HealthCheckAPIResponse, unknown>,
-) {
+const healthcheckInfo: Reducer<
+    IHealthcheckInfoState,
+    ApiRequestAction<typeof FETCH_HEALTHCHECK, HealthCheckAPIResponse, IResponseError>
+> = function (state = initialState, action) {
     switch (action.type) {
         case FETCH_HEALTHCHECK.REQUEST: {
             return {
@@ -60,7 +66,7 @@ const getReasonsForIssue = ({issue, data}: {issue: IssueLog; data: IssueLog[]})
     return data.filter((item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
 };
 
-const getRoots = (data: IssueLog[]) => {
+const getRoots = (data: IssueLog[]): IssueLog[] => {
     let roots = data.filter((item) => {
         return !data.find((issue) => issue.reason && issue.reason.indexOf(item.id) !== -1);
     });
@@ -95,22 +101,23 @@ const getInvertedConsequencesTree = ({
         : [];
 };
 
-const getIssuesLog = (state: any): IssueLog[] | undefined => state.healthcheckInfo.data?.issue_log;
+const getIssuesLog = (state: IHealthcheckInfoRootStateSlice) =>
+    state.healthcheckInfo.data?.issue_log;
 
-export const selectIssuesTreesRoots = createSelector(getIssuesLog, (issues = []) =>
-    getRoots(issues),
-);
+export const selectIssuesTreesRoots: Selector<IHealthcheckInfoRootStateSlice, IssueLog[]> =
+    createSelector(getIssuesLog, (issues = []) => getRoots(issues));
 
-export const selectIssuesTrees = createSelector(
-    [getIssuesLog, selectIssuesTreesRoots],
-    (data = [], roots = []) => {
+export const selectIssuesTrees: Selector<IHealthcheckInfoRootStateSlice, IIssuesTree[]> =
+    createSelector([getIssuesLog, selectIssuesTreesRoots], (data = [], roots = []) => {
         return getInvertedConsequencesTree({data, roots});
-    },
-);
+    });
 
-export const selectIssuesTreeById = createSelector(
-    [selectIssuesTrees, (_: any, id: string | undefined) => id],
-    (issuesTrees = [], id) => issuesTrees.find((issuesTree: IIssuesTree) => issuesTree.id === id),
+export const selectIssuesTreeById: Selector<
+    IHealthcheckInfoRootStateSlice,
+    IIssuesTree | undefined,
+    [string | undefined]
+> = createSelector([selectIssuesTrees, (_, id: string | undefined) => id], (issuesTrees = [], id) =>
+    issuesTrees.find((issuesTree) => issuesTree.id === id),
 );
 
 export function getHealthcheckInfo(database: string) {

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

@@ -34,10 +34,7 @@ import authentication from './authentication';
 import header from './header';
 import saveQuery from './saveQuery';
 import fullscreen from './fullscreen';
-
-function singleClusterMode(state = true) {
-    return state;
-}
+import singleClusterMode from './singleClusterMode';
 
 export const rootReducer = {
     singleClusterMode,
@@ -77,6 +74,11 @@ export const rootReducer = {
     fullscreen,
 };
 
-export default combineReducers({
+const combinedReducer = combineReducers({
     ...rootReducer,
 });
+
+export type IRootReducer = typeof combinedReducer;
+export type IRootState = ReturnType<IRootReducer>;
+
+export default combinedReducer;

package/dist/store/reducers/preview.ts

@@ -1,6 +1,6 @@
 import '../../services/api';
 
-import type {ErrorRepsonse, ExecuteActions} from '../../types/api/query';
+import type {ErrorResponse, ExecuteActions} from '../../types/api/query';
 import type {IQueryResult} from '../../types/store/query';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
@@ -16,7 +16,7 @@ const initialState = {
 
 const preview = (
     state = initialState,
-    action: ApiRequestAction<typeof SEND_QUERY, IQueryResult, ErrorRepsonse> | ReturnType<typeof setQueryOptions>,
+    action: ApiRequestAction<typeof SEND_QUERY, IQueryResult, ErrorResponse> | ReturnType<typeof setQueryOptions>,
 ) => {
     switch (action.type) {
         case SEND_QUERY.REQUEST: {

package/dist/store/reducers/saveQuery.ts

@@ -1,12 +1,14 @@
+import {Reducer} from 'redux';
+
 const SET_QUERY_NAME_TO_EDIT = 'SET_QUERY_NAME_TO_EDIT';
 const CLEAR_QUERY_NAME_TO_EDIT = 'CLEAR_QUERY_NAME_TO_EDIT';
 
+type IAction = ReturnType<typeof setQueryNameToEdit> | ReturnType<typeof clearQueryNameToEdit>;
+type ISaveQueryState = string | null;
+
 const initialState = null;
 
-const saveQuery = function (
-    state = initialState,
-    action: ReturnType<typeof setQueryNameToEdit> | ReturnType<typeof clearQueryNameToEdit>,
-) {
+const saveQuery: Reducer<ISaveQueryState, IAction> = function (state = initialState, action) {
     switch (action.type) {
         case SET_QUERY_NAME_TO_EDIT:
             return action.data;

package/dist/store/reducers/singleClusterMode.ts

@@ -0,0 +1,5 @@
+function singleClusterMode(state = true) {
+    return state;
+}
+
+export default singleClusterMode;

package/dist/types/api/error.ts

@@ -0,0 +1,4 @@
+export interface IResponseError {
+    status: number;
+    statusText: string;
+}

package/dist/types/api/query.ts

@@ -8,16 +8,16 @@ export interface CommonFields {
     ast?: AST;
     plan?: Plan;
     stats?: Stats;
-};
+}
 
 interface DeprecatedCommonFields {
     stats?: Stats;
 }
 
-export interface ErrorRepsonse {
+export interface ErrorResponse {
     error?: any;
     issues?: any;
-};
+}
 
 export type ExecuteActions = 'execute-script' | 'execute' | 'execute-scan' | undefined;
 export type ExplainActions = 'explain' | 'explain-ast';
@@ -34,7 +34,7 @@ type CellValue = string | number | null | undefined;
 
 export type KeyValueRow<T = CellValue> = {
     [key: string]: T;
-}
+};
 
 export type ArrayRow<T = CellValue> = Array<T>;
 
@@ -63,17 +63,15 @@ export type ExecuteYdbResponse = {
     result: KeyValueRow[];
 } & CommonFields;
 
-type ExecuteResponse<Schema extends Schemas> = 
+type ExecuteResponse<Schema extends Schemas> =
     | CommonFields // result can be undefined for queries like `insert into`
-    | (
-        Schema extends 'modern'
-            ? ExecuteModernResponse
-            : Schema extends 'ydb'
-                ? ExecuteYdbResponse
-                : Schema extends 'classic' | undefined
-                    ? ExecuteClassicResponse
-                    : unknown
-    );
+    | (Schema extends 'modern'
+          ? ExecuteModernResponse
+          : Schema extends 'ydb'
+            ? ExecuteYdbResponse
+            : Schema extends 'classic' | undefined
+                ? ExecuteClassicResponse
+                : unknown);
 
 // deprecated response from older versions, backward compatibility
 
@@ -92,8 +90,9 @@ export type DeprecatedExecuteResponseDeep = {
 // can be undefined for queries like `insert into`
 export type DeprecatedExecuteResponsePlain = DeprecatedExecuteResponseValue | undefined;
 
-export type DeprecatedExecuteResponse = DeprecatedExecuteResponseDeep | DeprecatedExecuteResponsePlain;
-
+export type DeprecatedExecuteResponse =
+    | DeprecatedExecuteResponseDeep
+    | DeprecatedExecuteResponsePlain;
 
 // ==== EXPLAIN ====
 
@@ -103,14 +102,12 @@ type ExplainResponse = CommonFields;
 
 // deprecated response from older versions, backward compatibility
 
-type DeprecatedExplainResponse<Action extends ExplainActions> = (
+type DeprecatedExplainResponse<Action extends ExplainActions> = 
     Action extends 'explain-ast'
         ? ({result: {ast: AST}} & Required<DeprecatedCommonFields>) | {ast: AST}
         : Action extends 'explain'
             ? ({result: Plan} & Required<DeprecatedCommonFields>) | Plan
-            : unknown
-);
-
+            : unknown;
 
 // ==== COMBINED API RESPONSE ====
 
@@ -124,15 +121,14 @@ export type QueryAPIExplainResponse<Action extends ExplainActions> =
     | DeprecatedExplainResponse<Action>
     | null;
 
-export type QueryAPIResponse<Action extends Actions, Schema extends Schemas = undefined> = (
+export type QueryAPIResponse<Action extends Actions, Schema extends Schemas = undefined> = 
     Action extends ExecuteActions
         ? QueryAPIExecuteResponse<Schema>
         : Action extends ExplainActions
             ? QueryAPIExplainResponse<Action>
-            : unknown
-);
+            : unknown;
 
-export type AnyExecuteResponse = 
+export type AnyExecuteResponse =
     | ExecuteModernResponse
     | ExecuteClassicResponse
     | ExecuteYdbResponse
@@ -146,13 +142,11 @@ export type DeepExecuteResponse =
     | ExecuteYdbResponse
     | DeprecatedExecuteResponseDeep;
 
-export type AnyExplainResponse = 
+export type AnyExplainResponse =
     | ExplainResponse
     | CommonFields
     | DeprecatedExplainResponse<'explain'>
     | DeprecatedExplainResponse<'explain-ast'>
     | null;
 
-export type AnyResponse =
-    | AnyExecuteResponse
-    | AnyExplainResponse;
+export type AnyResponse = AnyExecuteResponse | AnyExplainResponse;

package/dist/types/api/schema.ts

@@ -52,8 +52,8 @@ interface TPathDescription {
     TabletMetrics?: unknown;
     TablePartitions?: unknown[];
 
-    ColumnStoreDescription?: unknown;
-    ColumnTableDescription?: unknown;
+    ColumnStoreDescription?: TColumnStoreDescription;
+    ColumnTableDescription?: TColumnTableDescription;
 
     TableIndex?: TIndexDescription;
 
@@ -85,12 +85,12 @@ export interface TDirEntry {
     Version?: TPathVersion;
 }
 
-// incomplete
+// FIXME: incomplete
 export interface TTableDescription {
     PartitionConfig?: TPartitionConfig;
 }
 
-// incomplete
+// FIXME: incomplete
 export interface TPartitionConfig {
     /** uint64 */
     FollowerCount?: string;
@@ -263,7 +263,6 @@ export enum EPathType {
     EPathTypeColumnStore = 'EPathTypeColumnStore',
     EPathTypeColumnTable = 'EPathTypeColumnTable',
     EPathTypeCdcStream = 'EPathTypeCdcStream',
-
 }
 
 export enum EPathSubType {
@@ -414,7 +413,7 @@ interface TPQPartitionConfig {
     ExplicitChannelProfiles?: TChannelProfile[];
 
     MirrorFrom?: TMirrorPartitionConfig;
-};
+}
 
 interface TPQTabletConfig {
     /** uint64 */
@@ -437,7 +436,7 @@ interface TPQTabletConfig {
     ReadFromTimestampsMs?: number[];
     /** uint64[] */
     ConsumerFormatVersions?: number[];
-    
+
     ConsumerCodecs?: TCodecs[];
     ReadRuleServiceTypes?: string;
 
@@ -461,7 +460,7 @@ interface TPQTabletConfig {
     PartitionKeySchema?: TKeyComponentSchema[];
 
     Partitions?: TPartition[];
-    
+
     MeteringMode?: EMeteringMode;
 }
 
@@ -481,7 +480,7 @@ export interface TPersQueueGroupDescription {
     /** uint64 */
     PathId?: string;
     TotalGroupCount: number;
-    
+
     PartitionsToAdd?: TPartitionToAdd[];
     PartitionsToDelete?: number[];
     NextPartitionId?: number;
@@ -497,3 +496,158 @@ export interface TPersQueueGroupDescription {
 
     BootstrapConfig?: TBootstrapConfig;
 }
+
+export interface TColumnTableDescription {
+    Name?: string;
+
+    Schema?: TColumnTableSchema;
+    TtlSettings?: TColumnDataLifeCycle;
+
+    SchemaPresetId?: number;
+    SchemaPresetName?: string;
+
+    ColumnStorePathId?: TPathID;
+
+    ColumnShardCount?: number;
+    Sharding?: TColumnTableSharding;
+
+    /** uint64 */
+    SchemaPresetVersionAdj?: string;
+    /** uint64 */
+    TtlSettingsPresetVersionAdj?: string;
+
+    StorageConfig?: TColumnStorageConfig;
+}
+
+interface TColumnTableSchema {
+    Columns: TOlapColumnDescription[];
+    KeyColumnNames: string[];
+    Engine?: EColumnTableEngine;
+    NextColumnId?: number;
+
+    /** uint64 */
+    Version?: string;
+
+    DefaultCompression?: TCompressionOptions;
+    EnableTiering?: boolean;
+}
+
+interface TOlapColumnDescription {
+    Id?: number;
+    Name?: string;
+    Type?: string;
+    TypeId?: number;
+    TypeInfo?: TTypeInfo;
+}
+
+interface TTypeInfo {
+    PgTypeId?: number;
+}
+
+enum EColumnTableEngine {
+    COLUMN_ENGINE_NONE = 'COLUMN_ENGINE_NONE',
+    COLUMN_ENGINE_REPLACING_TIMESERIES = 'COLUMN_ENGINE_REPLACING_TIMESERIES',
+}
+
+interface TCompressionOptions {
+    CompressionCodec?: EColumnCodec;
+    CompressionLevel?: number;
+}
+
+enum EColumnCodec {
+    ColumnCodecPlain = 'ColumnCodecPlain',
+    ColumnCodecLZ4 = 'ColumnCodecLZ4',
+    ColumnCodecZSTD = 'ColumnCodecZSTD',
+}
+
+interface TColumnDataLifeCycle {
+    Enabled?: TTtl;
+    Disabled?: {};
+    Tiering?: TStorageTiering;
+
+    /** uint64 */
+    Version?: string;
+}
+
+interface TTtl {
+    ColumnName?: string;
+
+    ExpireAfterSeconds?: number;
+
+    /** uint64 */
+    ExpireAfterBytes?: string;
+
+    ColumnUnit?: EUnit;
+}
+
+interface TStorageTier {
+    Name?: string;
+    Eviction?: TTtl;
+}
+interface TStorageTiering {
+    Tiers: TStorageTier[];
+}
+
+enum EUnit {
+    UNIT_AUTO = 'UNIT_AUTO',
+    UNIT_SECONDS = 'UNIT_SECONDS',
+    UNIT_MILLISECONDS = 'UNIT_MILLISECONDS',
+    UNIT_MICROSECONDS = 'UNIT_MICROSECONDS',
+    UNIT_NANOSECONDS = 'UNIT_NANOSECONDS',
+}
+
+interface TColumnTableSharding {
+    /** uint64 */
+    Version?: string;
+
+    /** uint64 */
+    ColumnShards: string[];
+
+    /** uint64 */
+    AdditionalColumnShards: string[];
+
+    UniquePrimaryKey?: boolean;
+
+    RandomSharding?: {};
+    HashSharding?: THashSharding;
+}
+
+interface THashSharding {
+    Function?: EHashFunction;
+    Columns: string[];
+    UniqueShardKey?: boolean;
+    ActiveShardsCount?: number;
+}
+enum EHashFunction {
+    HASH_FUNCTION_MODULO_N = 'HASH_FUNCTION_MODULO_N',
+    HASH_FUNCTION_CLOUD_LOGS = 'HASH_FUNCTION_CLOUD_LOGS',
+}
+interface TColumnStorageConfig {
+    SysLog?: TStorageSettings;
+    Log?: TStorageSettings;
+    Data?: TStorageSettings;
+    DataChannelCount?: number;
+}
+interface TStorageSettings {
+    PreferredPoolKind?: string;
+    AllowOtherKinds?: boolean;
+}
+export interface TColumnStoreDescription {
+    Name?: string;
+    ColumnShardCount?: number;
+
+    /** uint64 */
+    ColumnShards: string[];
+
+    SchemaPresets: TColumnTableSchemaPreset[];
+    StorageConfig?: TColumnStorageConfig;
+
+    NextSchemaPresetId?: number;
+    NextTtlSettingsPresetId?: number;
+}
+
+interface TColumnTableSchemaPreset {
+    Id?: number;
+    Name?: string;
+    Schema?: TColumnTableSchema;
+}

package/dist/types/store/describe.ts

@@ -0,0 +1,14 @@
+import {IResponseError} from '../api/error';
+import {TEvDescribeSchemeResult} from '../api/schema';
+
+export interface IDescribeState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data: Record<string, TEvDescribeSchemeResult>;
+    currentDescribe?: TEvDescribeSchemeResult;
+    error?: IResponseError;
+}
+
+export interface IDescribeRootStateSlice {
+    describe: IDescribeState;
+}

package/dist/types/store/healthcheck.ts

@@ -1,3 +1,4 @@
+import {IResponseError} from '../api/error';
 import type {HealthCheckAPIResponse, IssueLog} from '../api/healthcheck';
 
 export interface IIssuesTree extends IssueLog {
@@ -5,3 +6,14 @@ export interface IIssuesTree extends IssueLog {
 }
 
 export type IHealthCheck = HealthCheckAPIResponse;
+
+export interface IHealthcheckInfoState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: HealthCheckAPIResponse;
+    error?: IResponseError;
+}
+
+export interface IHealthcheckInfoRootStateSlice {
+    healthcheckInfo: IHealthcheckInfoState;
+}

package/dist/types/window.d.ts

@@ -30,4 +30,11 @@ interface Window {
     Ya?: {
         Rum?: RumCounter;
     };
+
+    // eslint-disable-next-line
+    web_version?: boolean;
+    // eslint-disable-next-line
+    custom_backend?: string;
+
+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof import('redux').compose;
 }

package/dist/utils/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useAutofetcher';
+export * from './useTypedSelector';

package/dist/utils/hooks/useTypedSelector.ts

@@ -0,0 +1,5 @@
+import {TypedUseSelectorHook, useSelector} from 'react-redux';
+
+import {IRootState} from '../../store';
+
+export const useTypedSelector: TypedUseSelectorHook<IRootState> = useSelector;

package/dist/utils/prepareQueryExplain.ts

@@ -4,6 +4,7 @@ import {
     TopologyNodeDataStats,
     TopologyNodeDataStatsSection,
     ExplainPlanNodeData,
+    TopologyNodeDataStatsItem,
 } from '@yandex-cloud/paranoid';
 
 interface PlanOperator {
@@ -25,6 +26,8 @@ export interface RootPlan {
     Plan: Plan;
 }
 
+const CONNECTION_NODE_META_FIELDS = new Set(['PlanNodeId', 'PlanNodeType', 'Node Type', 'Plans']);
+
 function prepareStats(plan: Plan) {
     const stats: TopologyNodeDataStats[] = [];
 
@@ -52,21 +55,52 @@ function prepareStats(plan: Plan) {
         });
     }
 
+    if (plan.PlanNodeType === 'Connection') {
+        const attrStats: TopologyNodeDataStatsItem[] = [];
+
+        for (const [key, value] of Object.entries(plan)) {
+            if (CONNECTION_NODE_META_FIELDS.has(key)) {
+                continue;
+            }
+
+            attrStats.push({name: key, value: String(value)});
+        }
+
+        if (attrStats.length > 0) {
+            stats.push({
+                group: 'Attributes',
+                stats: attrStats,
+            });
+        }
+    }
+
     return stats;
 }
 
+function getNodeType(plan: Plan) {
+    switch (plan.PlanNodeType) {
+        case 'Connection':
+            return 'connection';
+        case 'ResultSet':
+            return 'result';
+        case 'Query':
+            return 'query';
+        default:
+            return 'stage';
+    }
+}
+
 export function preparePlan(plan: Plan) {
     const nodes: GraphNode[] = [];
     const links: Link[] = [];
 
-    function parsePlans(plans: Plan[] = [], from: string, curDepth: number) {
-        const depth = curDepth + 1;
+    function parsePlans(plans: Plan[] = [], from: string) {
         plans.forEach((p) => {
             const node: GraphNode<ExplainPlanNodeData> = {
                 name: String(p.PlanNodeId),
                 data: {
                     id: p.PlanNodeId,
-                    type: p.PlanNodeType === 'Connection' ? 'connection' : 'stage',
+                    type: getNodeType(p),
                     name: p['Node Type'],
                     operators: p.Operators?.map((o) => o.Name),
                     stats: prepareStats(p),
@@ -75,7 +109,7 @@ export function preparePlan(plan: Plan) {
             };
             nodes.push(node);
             links.push({from, to: node.name});
-            parsePlans(p.Plans, node.name, depth);
+            parsePlans(p.Plans, node.name);
         });
     }
 
@@ -84,12 +118,13 @@ export function preparePlan(plan: Plan) {
         name: String(rootPlan.PlanNodeId),
         data: {
             id: rootPlan.PlanNodeId,
-            type: 'stage',
+            type: getNodeType(rootPlan),
             name: rootPlan['Node Type'],
         },
     };
     nodes.push(rootNode);
-    parsePlans(rootPlan.Plans, rootNode.name, 0);
+    parsePlans(rootPlan.Plans, rootNode.name);
+
     return {
         nodes,
         links,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "files": [
     "dist"
   ],
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@gravity-ui/i18n": "^1.0.0",
-    "@yandex-cloud/paranoid": "^1.2.1",
+    "@yandex-cloud/paranoid": "^1.3.0",
     "@yandex-cloud/react-data-table": "0.2.1",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
@@ -33,7 +33,7 @@
     "redux": "4.0.1",
     "redux-location-state": "2.6.0",
     "redux-thunk": "2.3.0",
-    "reselect": "4.0.0",
+    "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
     "ydb-ui-components": "3.0.1"