ydb-embedded-ui 2.4.2 → 2.4.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.4.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.3...v2.4.4) (2022-11-22)
+
+
+### Bug Fixes
+
+* **api:** update getDescribe and getSchema requests params ([d70ba54](https://github.com/ydb-platform/ydb-embedded-ui/commit/d70ba54b90b9c86a393bd3f7845183114e5afbf1))
+* **describe:** cancel concurrent requests ([2f39ad0](https://github.com/ydb-platform/ydb-embedded-ui/commit/2f39ad0f736d44c3749d9523f5024151c51fcf6f))
+* **Describe:** render loader on path change ([baf552a](https://github.com/ydb-platform/ydb-embedded-ui/commit/baf552af8bb67046baa36e9115064b4b192cb015))
+* **QueryExplain:** fix colors on theme change ([cc0a2d6](https://github.com/ydb-platform/ydb-embedded-ui/commit/cc0a2d67139457748089c6bf1fb1045b0a6b0b93))
+* **SchemaTree:** remove unneeded fetches ([c7c0489](https://github.com/ydb-platform/ydb-embedded-ui/commit/c7c048937c5ae9e5e243d6e538aab8c2e2921df5))
+* **SchemaTree:** remove unneeded getDescribe ([1146f13](https://github.com/ydb-platform/ydb-embedded-ui/commit/1146f13a7a5a277a292b3789d45a0872dda0c487))
+* **Tenant:** make tenant fetch schema only on tenant change ([ccefbff](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccefbffea08fc8f248a3dd1135e82de6db9f0645))
+
+## [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)
 
 

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

@@ -0,0 +1,91 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+// @ts-ignore
+import JSONTree from 'react-json-inspector';
+import 'react-json-inspector/json-inspector.css';
+
+import {Loader} from '@gravity-ui/uikit';
+
+import {prepareQueryError} from '../../../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {
+    getDescribe,
+    setDataWasNotLoaded,
+    setCurrentDescribePath,
+} from '../../../../store/reducers/describe';
+
+import './Describe.scss';
+
+const b = cn('kv-describe');
+
+const expandMap = new Map();
+
+interface IDescribeProps {
+    tenant: string;
+}
+
+const Describe = ({tenant}: IDescribeProps) => {
+    const dispatch = useDispatch();
+
+    const {currentDescribe, error, loading, wasLoaded} = useTypedSelector(
+        (state) => state.describe,
+    );
+
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            const path = currentSchemaPath || tenant;
+
+            dispatch(setCurrentDescribePath(path));
+            dispatch(getDescribe({path}));
+        },
+        [currentSchemaPath, tenant, dispatch],
+    );
+
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader-container')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
+    }
+
+    if (!loading && !currentDescribe) {
+        return <div className={b('message-container')}>Empty</div>;
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('result')}>
+                <JSONTree
+                    data={currentDescribe}
+                    className={b('tree')}
+                    onClick={({path}: {path: string}) => {
+                        const newValue = !(expandMap.get(path) || false);
+                        expandMap.set(path, newValue);
+                    }}
+                    searchOptions={{
+                        debounceTime: 300,
+                    }}
+                    isExpanded={(keypath: string) => {
+                        return expandMap.get(keypath) || false;
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Describe;

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/QueryEditor/QueryExplain/QueryExplain.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
 import {Loader, RadioButton} from '@gravity-ui/uikit';
@@ -25,20 +25,6 @@ import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
 const b = cn('kv-query-explain');
 
-const DARK_COLORS = {
-    success: 'rgba(59,201,53,0.75)',
-    error: '#bf3230',
-    warning: '#cc6810',
-    mute: 'rgba(255,255,255,0.15)',
-    stroke: 'rgba(255,255,255,0.17)',
-    fill: '#313037',
-    nodeFill: '#3b3a41',
-    nodeShadow: 'rgba(0,0,0,0.2)',
-    titleColor: 'rgba(255,255,255,0.7)',
-    textColor: 'rgba(255,255,255,0.55)',
-    buttonBorderColor: 'rgba(255,255,255,0.07)',
-};
-
 const EDITOR_OPTIONS = {
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -64,9 +50,15 @@ const explainOptions = [
 function GraphRoot(props) {
     const paranoid = useRef();
 
-    const render = () => {
-        const {data, opts, shapes, version} = props;
+    const {data, opts, shapes, version, theme} = props;
+
+    const [componentTheme, updateComponentTheme] = useState(theme);
 
+    useEffect(() => {
+        updateComponentTheme(theme);
+    }, [theme]);
+
+    const render = useCallback(() => {
         if (version === explainVersions.v2) {
             paranoid.current = getTopology('graphRoot', data, opts, shapes);
             paranoid.current.render();
@@ -74,7 +66,7 @@ function GraphRoot(props) {
             paranoid.current = getCompactTopology('graphRoot', data, opts);
             paranoid.current.renderCompactTopology();
         }
-    }
+    }, [data, opts, shapes, version]);
 
     useEffect(() => {
         render();
@@ -94,7 +86,7 @@ function GraphRoot(props) {
         graphRoot.innerHTML = '';
 
         render();
-    }, [props.opts.colors]);
+    }, [componentTheme, render]);
 
     useEffect(() => {
         paranoid.current?.updateData?.(props.data);
@@ -134,11 +126,7 @@ function QueryExplain(props) {
     };
 
     const renderStub = () => {
-        return (
-            <div className={b('text-message')}>
-                There is no explanation for the request
-            </div>
-        );
+        return <div className={b('text-message')}>There is no explanation for the request</div>;
     };
 
     const hasContent = () => {
@@ -204,12 +192,12 @@ function QueryExplain(props) {
                     })}
                 >
                     <GraphRoot
+                        theme={theme}
                         version={version}
                         data={{links, nodes}}
                         opts={{
                             renderNodeTitle: renderExplainNode,
                             textOverflow: TextOverflow.Normal,
-                            colors: theme === 'dark' ? DARK_COLORS : {},
                             initialZoomFitsCanvas: true,
                         }}
                         shapes={{
@@ -237,11 +225,7 @@ function QueryExplain(props) {
             message = error;
         }
 
-        return (
-            <div className={b('text-message')}>
-                {message}
-            </div>
-        );
+        return <div className={b('text-message')}>{message}</div>;
     };
 
     const renderContent = () => {
@@ -292,7 +276,9 @@ function QueryExplain(props) {
                             )}
                         </div>
                         <div className={b('controls-left')}>
-                            <EnableFullscreenButton disabled={Boolean(props.error) || !hasContent()} />
+                            <EnableFullscreenButton
+                                disabled={Boolean(props.error) || !hasContent()}
+                            />
                             <PaneVisibilityToggleButtons
                                 onCollapse={props.onCollapseResults}
                                 onExpand={props.onExpandResults}

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

@@ -3,9 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, getSchema, preloadSchemas} from '../../../../store/reducers/schema';
-import {getDescribe} from '../../../../store/reducers/describe';
-import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
+import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
 import {mapPathTypeToNavigationTreeType} from '../../utils/schema';
@@ -30,7 +28,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                 const {PathDescription: {Children = []} = {}} = data;
 
                 const preloadedData: Record<string, TEvDescribeSchemeResult> = {
-                    [path]: data
+                    [path]: data,
                 };
 
                 const childItems = Children.map((childData) => {
@@ -55,9 +53,6 @@ export function SchemaTree(props: SchemaTreeProps) {
 
     const handleActivePathUpdate = (activePath: string) => {
         dispatch(setCurrentSchemaPath(activePath));
-        dispatch(getSchema({path: activePath}));
-        dispatch(getDescribe({path: activePath}));
-        dispatch(getSchemaAcl({path: activePath}));
     };
 
     useEffect(() => {

package/dist/containers/Tenant/Tenant.tsx

@@ -78,12 +78,15 @@ function Tenant(props: TenantProps) {
     const tenantName = name as string;
 
     useEffect(() => {
-        const schemaPath = currentSchemaPath || tenantName;
-        dispatch(resetLoadingState());
         dispatch(getSchema({path: tenantName}));
-        dispatch(getSchema({path: schemaPath}));
-        dispatch(getSchemaAcl({path: schemaPath}));
-    }, [tenantName, currentSchemaPath, dispatch]);
+        dispatch(getSchemaAcl({path: tenantName}));
+    }, [tenantName, dispatch]);
+
+    useEffect(() => {
+        dispatch(resetLoadingState());
+        dispatch(getSchema({path: currentSchemaPath}));
+        dispatch(getSchemaAcl({path: currentSchemaPath}));
+    }, [currentSchemaPath, dispatch]);
 
     useEffect(() => {
         dispatch(disableAutorefresh());

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/services/api.js

@@ -83,17 +83,26 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 path,
                 enums: true,
                 backup: false,
+                private: true,
+                partition_config: false,
                 partition_stats: false,
                 partitioning_info: false,
+                subs: 1,
             },
             {concurrentId: concurrentId || `getSchema|${path}`},
         );
     }
-    getDescribe({path}) {
-        return this.get(this.getPath('/viewer/json/describe'), {
-            path,
-            enums: true,
-        });
+    getDescribe({path}, {concurrentId} = {}) {
+        return this.get(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                partition_stats: true,
+                subs: 0,
+            },
+            {concurrentId: concurrentId || `getDescribe|${path}`},
+        );
     }
     getSchemaAcl({path}) {
         return this.get(

package/dist/store/reducers/describe.ts

@@ -2,24 +2,23 @@ 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';
+import {IDescribeRootStateSlice, IDescribeState, IDescribeAction} from '../../types/store/describe';
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+export const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+const SET_CURRENT_DESCRIBE_PATH = 'describe/SET_CURRENT_DESCRIBE_PATH';
+const SET_DATA_WAS_NOT_LOADED = 'describe/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
     data: {},
+    currentDescribe: undefined,
+    currentDescribePath: undefined,
 };
 
-const describe: Reducer<
-    IDescribeState,
-    ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, IResponseError>
-> = (state = initialState, action) => {
+const describe: Reducer<IDescribeState, IDescribeAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_DESCRIBE.REQUEST: {
             return {
@@ -28,52 +27,83 @@ const describe: Reducer<
             };
         }
         case FETCH_DESCRIBE.SUCCESS: {
-            let newData;
+            const data = action.data;
 
-            if (action.data.Path) {
+            const isCurrentDescribePath = data.Path === state.currentDescribePath;
+
+            let newData = state.data;
+
+            if (data.Path) {
                 newData = JSON.parse(JSON.stringify(state.data));
-                newData[action.data.Path] = action.data;
-            } else {
-                newData = state.data;
+                newData[data.Path] = data;
+            }
+
+            if (!isCurrentDescribePath) {
+                return {
+                    ...state,
+                    data: newData,
+                };
             }
 
             return {
                 ...state,
                 data: newData,
-                currentDescribe: action.data,
+                currentDescribe: data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
             };
         }
+
         case FETCH_DESCRIBE.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
                 loading: false,
             };
         }
+        case SET_CURRENT_DESCRIBE_PATH: {
+            return {
+                ...state,
+                currentDescribePath: action.data,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
         default:
             return state;
     }
 };
 
+export const setCurrentDescribePath = (path: string) => {
+    return {
+        type: SET_CURRENT_DESCRIBE_PATH,
+        data: path,
+    } as const;
+};
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
 // Consumers selectors
-const selectConsumersNames: Selector<IDescribeRootStateSlice, string[] | undefined, [string]> = (
-    state,
-    path,
-) => state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
-
-export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[]> = createSelector(
-    selectConsumersNames,
-    (names = []) => {
-        const consumers = names.map((name) => {
-            return {name};
-        });
-
-        return consumers;
-    },
-);
+const selectConsumersNames = (state: IDescribeRootStateSlice, path: string | undefined) =>
+    path
+        ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
+        : undefined;
+
+export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
+    createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
 
 export function getDescribe({path}: {path: string}) {
     return createApiRequest({

package/dist/types/api/error.ts

@@ -1,4 +1,6 @@
 export interface IResponseError {
-    status: number;
-    statusText: string;
+    data?: unknown;
+    status?: number;
+    statusText?: string;
+    isCancelled?: boolean;
 }

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

@@ -1,14 +1,34 @@
+import {
+    FETCH_DESCRIBE,
+    setCurrentDescribePath,
+    setDataWasNotLoaded,
+} from '../../store/reducers/describe';
+import {ApiRequestAction} from '../../store/utils';
 import {IResponseError} from '../api/error';
 import {TEvDescribeSchemeResult} from '../api/schema';
 
+export type IDescribeData = Record<string, TEvDescribeSchemeResult>;
+
 export interface IDescribeState {
     loading: boolean;
     wasLoaded: boolean;
-    data: Record<string, TEvDescribeSchemeResult>;
+    data: IDescribeData;
     currentDescribe?: TEvDescribeSchemeResult;
+    currentDescribePath?: string;
     error?: IResponseError;
 }
 
+type IDescribeApiRequestAction = ApiRequestAction<
+    typeof FETCH_DESCRIBE,
+    TEvDescribeSchemeResult,
+    IResponseError
+>;
+
+export type IDescribeAction =
+    | IDescribeApiRequestAction
+    | ReturnType<typeof setCurrentDescribePath>
+    | ReturnType<typeof setDataWasNotLoaded>;
+
 export interface IDescribeRootStateSlice {
     describe: IDescribeState;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "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",

package/dist/containers/Tenant/Diagnostics/Describe/Describe.js

@@ -1,130 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import {Loader} from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
-
-import {getDescribe} from '../../../../store/reducers/describe';
-
-import './Describe.scss';
-import 'react-json-inspector/json-inspector.css';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-const b = cn('kv-describe');
-
-const expandMap = new Map();
-
-class Describe extends React.Component {
-    static propTypes = {
-        error: PropTypes.string,
-        data: PropTypes.array,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        autorefresh: PropTypes.bool,
-        tenant: PropTypes.string,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        const {autorefresh} = this.props;
-        this.autofetcher = new AutoFetcher();
-        this.fetchData();
-        if (autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchData);
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh} = this.props;
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.fetchData();
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchData());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    fetchData() {
-        const {getDescribe, tenant, currentSchemaPath} = this.props;
-        const path = currentSchemaPath || tenant;
-        getDescribe({path});
-    }
-
-    renderDescribeJson = () => {
-        const {data} = this.props;
-
-        return (
-            <JSONTree
-                data={data}
-                className={b('tree')}
-                onClick={({path}) => {
-                    const newValue = !(expandMap.get(path) || false);
-                    expandMap.set(path, newValue);
-                }}
-                searchOptions={{
-                    debounceTime: 300,
-                }}
-                isExpanded={(keypath) => {
-                    return expandMap.get(keypath) || false;
-                }}
-            />
-        );
-    };
-
-    render() {
-        const {error, loading, data, wasLoaded} = this.props;
-
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('loader-container')}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
-
-        if (error) {
-            return <div className={b('message-container')}>{error.data || error}</div>;
-        }
-
-        if (!loading && !data) {
-            return <div className={b('message-container')}>Empty</div>;
-        }
-
-        return (
-            <div className={b()}>
-                <div className={b('result')}>{this.renderDescribeJson()}</div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {loading, error, currentDescribe, wasLoaded} = state.describe;
-    const {autorefresh, currentSchemaPath} = state.schema;
-
-    return {
-        data: currentDescribe,
-        loading,
-        error,
-        wasLoaded,
-        autorefresh,
-        currentSchemaPath,
-    };
-};
-
-const mapDispatchToProps = {
-    getDescribe,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Describe);