ydb-embedded-ui 4.5.1 → 4.6.0

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

@@ -3,7 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema/schema';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
 import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';

package/dist/containers/Tenant/Tenant.tsx

@@ -8,15 +8,16 @@ import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
 import {useTypedSelector} from '../../utils/hooks';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import routes, {createHref} from '../../routes';
 import {setHeader} from '../../store/reducers/header';
-import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema';
-import {getSchemaAcl} from '../../store/reducers/schemaAcl';
-import {getTenantInfo, clearTenant} from '../../store/reducers/tenant/tenant';
+import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
+import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
 
+import {getClusterPath} from '../Cluster/utils';
+
 import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
 import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
@@ -62,7 +63,6 @@ function Tenant(props: TenantProps) {
     const {PathType: currentPathType, PathSubType: currentPathSubType} =
         (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
 
-    const {error: {status: tenantStatus = 200} = {}} = useTypedSelector((state) => state.tenant);
     const {error: {status: schemaStatus = 200} = {}} = useTypedSelector((state) => state.schema);
 
     const dispatch = useDispatch();
@@ -82,7 +82,6 @@ function Tenant(props: TenantProps) {
     }, [tenantName, dispatch]);
 
     useEffect(() => {
-        dispatch(resetLoadingState());
         dispatch(getSchema({path: currentSchemaPath}));
         dispatch(getSchemaAcl({path: currentSchemaPath}));
     }, [currentSchemaPath, dispatch]);
@@ -93,12 +92,11 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         if (tenantName) {
-            dispatch(getTenantInfo({path: tenantName}));
             dispatch(
                 setHeader([
                     {
-                        text: CLUSTER_PAGES.tenants.title,
-                        link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.tenants.id}),
+                        text: 'Cluster',
+                        link: getClusterPath(),
                     },
                     {
                         text: tenantName.startsWith('/') ? tenantName.slice(1) : tenantName,
@@ -109,9 +107,6 @@ function Tenant(props: TenantProps) {
                 ]),
             );
         }
-        return () => {
-            dispatch(clearTenant());
-        };
     }, [tenantName, dispatch]);
 
     const onCollapseSummaryHandler = () => {
@@ -125,7 +120,7 @@ function Tenant(props: TenantProps) {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
     };
 
-    const showBlockingError = tenantStatus === 403 || schemaStatus === 403;
+    const showBlockingError = schemaStatus === 403;
 
     return (
         <div className={b()}>

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

@@ -2,7 +2,7 @@ import {Dispatch} from 'react';
 import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-components';
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
-import {setShowPreview} from '../../../store/reducers/schema';
+import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';

package/dist/containers/Tenants/Tenants.js

@@ -15,7 +15,7 @@ import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';
 
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import routes, {createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {withSearch} from '../../HOCS';
 import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
@@ -25,7 +25,6 @@ import {
     getSettingValue,
     ProblemFilterValues,
 } from '../../store/reducers/settings/settings';
-import {setHeader} from '../../store/reducers/header';
 
 import {clusterName} from '../../store';
 import {TenantTabsGroups, TENANT_GENERAL_TABS, TENANT_INFO_TABS} from '../Tenant/TenantPages';
@@ -51,7 +50,6 @@ class Tenants extends React.Component {
         tenants: PropTypes.array,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        setHeader: PropTypes.func,
         filter: PropTypes.string,
         changeFilter: PropTypes.func,
         cluster: PropTypes.object,
@@ -77,12 +75,6 @@ class Tenants extends React.Component {
         this.autofetcher = new AutoFetcher();
         this.props.getTenantsInfo(clusterName);
         this.autofetcher.fetch(() => this.props.getTenantsInfo(clusterName));
-        this.props.setHeader([
-            {
-                text: CLUSTER_PAGES.tenants.title,
-                link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.tenants.id}),
-            },
-        ]);
     }
 
     componentWillUnmount() {
@@ -94,14 +86,15 @@ class Tenants extends React.Component {
 
         return (
             <div className={b('controls')}>
-                <TextInput
-                    className={b('search')}
-                    placeholder="Database name"
-                    value={searchQuery}
-                    onUpdate={handleSearchQuery}
-                    hasClear
-                    autoFocus
-                />
+                <div className={b('search')}>
+                    <TextInput
+                        placeholder="Database name"
+                        value={searchQuery}
+                        onUpdate={handleSearchQuery}
+                        hasClear
+                        autoFocus
+                    />
+                </div>
                 <ProblemFilter value={filter} onChange={changeFilter} />
             </div>
         );
@@ -309,16 +302,14 @@ class Tenants extends React.Component {
 
         return (
             <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    <DataTable
-                        theme="yandex-cloud"
-                        data={filteredTenants}
-                        columns={columns}
-                        settings={DEFAULT_TABLE_SETTINGS}
-                        dynamicRender={true}
-                        emptyDataMessage="No such tenants"
-                    />
-                </div>
+                <DataTable
+                    theme="yandex-cloud"
+                    data={filteredTenants}
+                    columns={columns}
+                    settings={DEFAULT_TABLE_SETTINGS}
+                    dynamicRender={true}
+                    emptyDataMessage="No such tenants"
+                />
             </div>
         );
     };
@@ -363,7 +354,6 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = {
     getTenantsInfo,
     changeFilter,
-    setHeader,
 };
 
 export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Tenants));

package/dist/containers/Tenants/Tenants.scss

@@ -1,7 +1,7 @@
 @import '../../styles/mixins.scss';
 
 .tenants {
-    overflow: auto;
+    height: 100%;
     @include flex-container();
 
     &__format-label {
@@ -34,10 +34,8 @@
 
     &__table-wrapper {
         overflow: auto;
-        @include flex-container();
-    }
+        flex-grow: 1;
 
-    &__table-content {
         @include freeze-nth-column(1);
 
         @include table-styles;

package/dist/containers/UserSettings/i18n/en.json

@@ -15,6 +15,6 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
-  "settings.enableQueryModesForExplain.title": "Enable query modes for explain",
-  "settings.enableQueryModesForExplain.popover": "Enable script | scan query mode selector for both run and explain. May not work on versions before 23-2"
+  "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
+  "settings.enableAdditionalQueryModes.popover": "Adds 'data' and 'query' modes for run. Enables query modes for explain. May not work on some versions"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -15,6 +15,6 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
-  "settings.enableQueryModesForExplain.title": "Включить режимы выполнения запроса для explain",
-  "settings.enableQueryModesForExplain.popover": "Включить общий переключатель script | scan для run и explain. Может работать некорректно на версиях до 23-2"
+  "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'data' и 'query' для run. Включает возможность выбрать режим выполнения запроса для explain. Может работать некорректно на некоторых версиях"
 }

package/dist/containers/UserSettings/settings.ts

@@ -4,7 +4,7 @@ import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
-    ENABLE_QUERY_MODES_FOR_EXPLAIN,
+    ENABLE_ADDITIONAL_QUERY_MODES,
     INVERTED_DISKS_KEY,
     THEME_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -59,9 +59,9 @@ export const useNodesEndpointSetting: SettingProps = {
     helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
 };
 export const enableQueryModesForExplainSetting: SettingProps = {
-    settingKey: ENABLE_QUERY_MODES_FOR_EXPLAIN,
-    title: i18n('settings.enableQueryModesForExplain.title'),
-    helpPopoverContent: i18n('settings.enableQueryModesForExplain.popover'),
+    settingKey: ENABLE_ADDITIONAL_QUERY_MODES,
+    title: i18n('settings.enableAdditionalQueryModes.title'),
+    helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
 };
 
 export const generalSection: SettingsSection = {

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -17,6 +17,7 @@
         z-index: 0;
 
         overflow-x: auto;
+        overflow-y: hidden;
 
         margin-right: $margin-size;
         margin-left: $margin-size;

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -2,6 +2,7 @@ import DataTable, {Column} from '@gravity-ui/react-data-table';
 
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
 import {isUnavailableNode} from '../../../utils/nodes';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 import {formatBytes} from '../../../utils';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
@@ -112,9 +113,7 @@ export const NodesTable = ({nodes}: NodesTableProps) => {
             theme="yandex-cloud"
             data={nodes}
             columns={columns}
-            settings={{
-                displayIndices: false,
-            }}
+            settings={DEFAULT_TABLE_SETTINGS}
         />
     );
 };

package/dist/containers/Versions/Versions.scss

@@ -3,10 +3,6 @@
 .ydb-versions {
     $_: &;
 
-    &__content {
-        padding: 20px;
-    }
-
     &__controls {
         display: flex;
         align-items: center;

package/dist/containers/Versions/Versions.tsx

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

package/dist/routes.ts

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

package/dist/services/api.ts

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

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

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

package/dist/store/reducers/index.ts

@@ -5,13 +5,14 @@ import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
 import storage from './storage';
-import node from './node';
+import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';
 import heatmap from './heatmap';
-import schema from './schema';
+import schema from './schema/schema';
+import overview from './overview/overview';
 import host from './host';
-import network from './network';
+import network from './network/network';
 import tenants from './tenants/tenants';
 import tablet from './tablet';
 import topic from './topic';
@@ -23,7 +24,7 @@ import settings from './settings/settings';
 import preview from './preview';
 import nodesList from './nodesList';
 import describe from './describe';
-import schemaAcl from './schemaAcl';
+import schemaAcl from './schemaAcl/schemaAcl';
 import executeTopQueries from './executeTopQueries';
 import healthcheckInfo from './healthcheckInfo';
 import shardsWorkload from './shardsWorkload';
@@ -46,6 +47,7 @@ export const rootReducer = {
     tooltip,
     tablets,
     schema,
+    overview,
     olapStats,
     host,
     network,

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

@@ -1,20 +1,23 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import {Reducer} from 'redux';
 
-const FETCH_ALL_NODES_NETWORK = createRequestActionTypes(
-    'ALL_NODES_NETWORK',
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {NetworkAction, NetworkState} from './types';
+
+export const FETCH_ALL_NODES_NETWORK = createRequestActionTypes(
+    'network',
     'FETCH_ALL_NODES_NETWORK',
 );
 
 const SET_DATA_WAS_NOT_LOADED = 'network/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {
-    data: {},
     loading: false,
     wasLoaded: false,
 };
 
-const network = (state = initialState, action) => {
+const network: Reducer<NetworkState, NetworkAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_ALL_NODES_NETWORK.REQUEST: {
             return {
@@ -53,10 +56,10 @@ const network = (state = initialState, action) => {
 export const setDataWasNotLoaded = () => {
     return {
         type: SET_DATA_WAS_NOT_LOADED,
-    };
+    } as const;
 };
 
-export const getNetworkInfo = (tenant) => {
+export const getNetworkInfo = (tenant: string) => {
     return createApiRequest({
         request: window.api.getNetwork(tenant),
         actions: FETCH_ALL_NODES_NETWORK,

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

@@ -0,0 +1,16 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {TNetInfo} from '../../../types/api/netInfo';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_ALL_NODES_NETWORK, setDataWasNotLoaded} from './network';
+
+export interface NetworkState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: TNetInfo;
+    error?: IResponseError;
+}
+
+export type NetworkAction =
+    | ApiRequestAction<typeof FETCH_ALL_NODES_NETWORK, TNetInfo, IResponseError>
+    | ReturnType<typeof setDataWasNotLoaded>;