ydb-embedded-ui 2.4.3 → 2.5.0

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

@@ -0,0 +1,87 @@
+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 '../../../../components/Loader';
+
+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 <Loader size="m" />;
+    }
+
+    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/Diagnostics.scss

@@ -5,13 +5,6 @@
 
     height: 100%;
 
-    &__loader {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__header-wrapper {
         padding: 13px 20px 16px;
 

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

@@ -5,7 +5,9 @@ import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
 import {useLocation} from 'react-router';
 
-import {Loader, Switch, Tabs} from '@gravity-ui/uikit';
+import {Switch, Tabs} from '@gravity-ui/uikit';
+
+import {Loader} from '../../../components/Loader';
 
 //@ts-ignore
 import TopQueries from './TopQueries/TopQueries';
@@ -153,7 +155,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Heatmap path={currentItem.Path} />;
             }
             case GeneralPagesIds.consumers: {
-                return <Consumers path={currentItem.Path} />;
+                return <Consumers path={currentSchemaPath} />;
             }
             default: {
                 return <div>No data...</div>;
@@ -196,11 +198,7 @@ function Diagnostics(props: DiagnosticsProps) {
     // After tabs are initially loaded it is no longer needed
     // Thus there is no also "loading" check as in other parts of the project
     if (!wasLoaded) {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
+        return <Loader size="l" />;
     }
 
     return (

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

@@ -47,17 +47,23 @@ function prepareDateSizeValue(value) {
 }
 
 function stringToDataTableSortOrder(value) {
-    return value && value.split(',').map((columnId) => ({
-        columnId,
-        order: DataTable.DESCENDING,
-    }));
+    return (
+        value &&
+        value.split(',').map((columnId) => ({
+            columnId,
+            order: DataTable.DESCENDING,
+        }))
+    );
 }
 
 function stringToQuerySortOrder(value) {
-    return value && value.split(',').map((columnId) => ({
-        columnId,
-        order: 'DESC',
-    }));
+    return (
+        value &&
+        value.split(',').map((columnId) => ({
+            columnId,
+            order: 'DESC',
+        }))
+    );
 }
 
 function dataTableToStringSortOrder(value = []) {
@@ -85,11 +91,13 @@ function TopShards({
 
         if (autorefresh) {
             autofetcher.start();
-            autofetcher.fetch(() => sendShardQuery({
-                database: path,
-                path: currentSchemaPath,
-                sortOrder: stringToQuerySortOrder(sortOrder),
-            }));
+            autofetcher.fetch(() =>
+                sendShardQuery({
+                    database: path,
+                    path: currentSchemaPath,
+                    sortOrder: stringToQuerySortOrder(sortOrder),
+                }),
+            );
         }
 
         return () => {

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -54,11 +54,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         if (!tenantName) {
             return null;
         }
-        return (
-            <div className={b()}>
-                {renderTabContent()}
-            </div>
-        );
+        return <div className={b()}>{renderTabContent()}</div>;
     };
 
     return renderContent();

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -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 = () => {
         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();
         }
-    }
+    };
 
     useEffect(() => {
         render();
@@ -94,7 +86,7 @@ function GraphRoot(props) {
         graphRoot.innerHTML = '';
 
         render();
-    }, [props.opts.colors]);
+    }, [componentTheme]);
 
     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/QueryEditor/SaveQuery/SaveQuery.js

@@ -73,10 +73,7 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
                         </div>
                     )}
                     <div className={b('dialog-row')}>
-                        <label
-                            htmlFor="queryName"
-                            className={b('field-title', 'required')}
-                        >
+                        <label htmlFor="queryName" className={b('field-title', 'required')}>
                             Query name
                         </label>
                         <div className={b('control-wrapper')}>

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -44,9 +44,10 @@ const formatTableStatsItem = createInfoFormatter({
     defaultValueFormatter: formatNumber,
 });
 
-const formatTableStats = (fields) => Object.entries(fields)
-    .map(([label, value]) => formatTableStatsItem(label, value))
-    .filter(({value}) => Boolean(value));
+const formatTableStats = (fields) =>
+    Object.entries(fields)
+        .map(([label, value]) => formatTableStatsItem(label, value))
+        .filter(({value}) => Boolean(value));
 
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
@@ -60,17 +61,18 @@ class SchemaInfoViewer extends React.Component {
 
         return (
             <div className={b('item')}>
-                <InfoViewer
-                    title={title}
-                    info={itemData}
-                />
+                <InfoViewer title={title} info={itemData} />
             </div>
         );
     }
 
     renderContent(data) {
         const {PathDescription = {}} = data;
-        const {TableStats = {}, TabletMetrics = {}, Table: {PartitionConfig = {}} = {}} = PathDescription;
+        const {
+            TableStats = {},
+            TabletMetrics = {},
+            Table: {PartitionConfig = {}} = {},
+        } = PathDescription;
         const {
             PartCount,
             RowCount,
@@ -127,33 +129,30 @@ class SchemaInfoViewer extends React.Component {
         ];
 
         const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
-            formatTabletMetricsItem(key, TabletMetrics[key])
+            formatTabletMetricsItem(key, TabletMetrics[key]),
         );
 
         const partitionConfigInfo = [];
 
         if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
-            partitionConfigInfo.push(...Object.keys(FollowerGroups[0]).map((key) =>
-                formatFollowerGroupItem(key, FollowerGroups[0][key])
-            ));
-        } else if (FollowerCount !== undefined) {
             partitionConfigInfo.push(
-                formatPartitionConfigItem('FollowerCount', FollowerCount)
+                ...Object.keys(FollowerGroups[0]).map((key) =>
+                    formatFollowerGroupItem(key, FollowerGroups[0][key]),
+                ),
             );
+        } else if (FollowerCount !== undefined) {
+            partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
         } else if (CrossDataCenterFollowerCount !== undefined) {
             partitionConfigInfo.push(
-                formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount)
+                formatPartitionConfigItem(
+                    'CrossDataCenterFollowerCount',
+                    CrossDataCenterFollowerCount,
+                ),
             );
         }
 
-        if ([
-            tabletMetricsInfo,
-            partitionConfigInfo,
-            tableStatsInfo.flat(),
-        ].flat().length === 0) {
-            return (
-                <div className={b('item')}>Empty</div>
-            );
+        if ([tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat().length === 0) {
+            return <div className={b('item')}>Empty</div>;
         }
 
         return (
@@ -179,11 +178,7 @@ class SchemaInfoViewer extends React.Component {
         const {data} = this.props;
 
         if (data) {
-            return (
-                <div className={b()}>
-                    {this.renderContent(data)}
-                </div>
-            );
+            return <div className={b()}>{this.renderContent(data)}</div>;
         } else {
             return <div className="error">no schema data</div>;
         }

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/TenantPages.tsx

@@ -14,7 +14,7 @@ export enum TenantInfoTabsIds {
 export enum TenantTabsGroups {
     info = 'info',
     general = 'general',
-    generalTab = 'generalTab'
+    generalTab = 'generalTab',
 }
 
 export const TENANT_GENERAL_TABS = [

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

@@ -37,9 +37,9 @@ const bindActions = (
 ) => {
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTopLevelTab(TenantGeneralTabsIds.query))
+        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
         setActivePath(path);
-    }
+    };
 
     return {
         createTable: inputQuery(createTableTemplate),
@@ -66,7 +66,7 @@ const bindActions = (
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
-            dispatch(setTopLevelTab(TenantGeneralTabsIds.query))
+            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
             setActivePath(path);
         },
     };
@@ -74,27 +74,18 @@ const bindActions = (
 
 type ActionsSet = ReturnType<Required<NavigationTreeProps>['getActions']>;
 
-export const getActions = (
-    dispatch: Dispatch<any>,
-    setActivePath: (path: string) => void,
-) =>
+export const getActions =
+    (dispatch: Dispatch<any>, setActivePath: (path: string) => void) =>
     (path: string, type: NavigationTreeNodeType) => {
         const actions = bindActions(path, dispatch, setActivePath);
         const copyItem = {text: 'Copy path', action: actions.copyPath};
 
         const DIR_SET: ActionsSet = [
-            [
-                copyItem,
-            ],
-            [
-                {text: 'Create table...', action: actions.createTable},
-            ],
+            [copyItem],
+            [{text: 'Create table...', action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
-            [
-                {text: 'Open preview', action: actions.openPreview},
-                copyItem,
-            ],
+            [{text: 'Open preview', action: actions.openPreview}, copyItem],
             [
                 {text: 'Alter table...', action: actions.alterTable},
                 {text: 'Select query...', action: actions.selectQuery},
@@ -102,9 +93,7 @@ export const getActions = (
             ],
         ];
 
-        const JUST_COPY: ActionsSet = [
-            copyItem,
-        ];
+        const JUST_COPY: ActionsSet = [copyItem];
 
         const EMPTY_SET: ActionsSet = [];
 

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/clusterNodes.js

@@ -1,7 +1,11 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 import {createSelector} from 'reselect';
+
 import '../../services/api';
 import {ALL} from '../../utils/constants';
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+import {filterByUptime} from './storage';
+import {getNodesUptimeFilter} from './nodes';
 
 const FETCH_NODES_LIST = createRequestActionTypes('tenants', 'FETCH_NODES_LIST');
 
@@ -47,23 +51,38 @@ export function getNodesList() {
     });
 }
 
+const filterByProblemsStatus = (nodes = [], problemFilter) => {
+    if (problemFilter === ALL) {
+        return nodes;
+    }
+
+    return nodes.filter(({Overall}) => {
+        return Overall && Overall !== 'Green';
+    });
+};
+
+export const filterNodesByStatusAndUptime = (nodes = [], problemFilter, uptimeFilter) => {
+    let result = filterByProblemsStatus(nodes, problemFilter);
+    result = filterByUptime(result, uptimeFilter);
+
+    return result;
+};
+
 export const getFilteredNodes = createSelector(
-    (state) => state.nodes.data?.Tenants,
-    (state) => state.settings.problemFilter,
-    (tenants, filter) => {
+    [
+        (state) => state.nodes.data?.Tenants,
+        (state) => state.settings.problemFilter,
+        getNodesUptimeFilter,
+    ],
+    (tenants, problemFilter, uptimeFilter) => {
         const nodes = tenants?.reduce((acc, item) => {
             if (Array.isArray(item.Nodes)) {
                 return [...acc, ...item.Nodes.map((node) => ({...node, TenantName: item.Name}))];
             }
             return acc;
         }, []);
-        if (filter === ALL) {
-            return nodes;
-        }
 
-        return nodes?.filter(({Overall}) => {
-            return Overall && Overall !== 'Green';
-        });
+        return filterNodesByStatusAndUptime(nodes, problemFilter, uptimeFilter);
     },
 );