ydb-embedded-ui 4.5.2 → 4.7.0

package/dist/containers/Node/Node.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {useRouteMatch} from 'react-router';
+import {useLocation, useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import _ from 'lodash';
 
 import {Tabs} from '@gravity-ui/uikit';
@@ -16,9 +16,12 @@ import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import {setHeader} from '../../store/reducers/header';
+import routes, {createHref, parseQuery} from '../../routes';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {AutoFetcher} from '../../utils/autofetcher';
+import {useTypedSelector} from '../../utils/hooks';
+
+import {clusterTabsIds} from '../Cluster/utils';
 
 import './Node.scss';
 
@@ -26,11 +29,6 @@ const b = cn('node');
 
 export const STORAGE_ROLE = 'Storage';
 
-const headerNodes = {
-    text: CLUSTER_PAGES.nodes.title,
-    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-};
-
 const autofetcher = new AutoFetcher();
 
 interface NodeProps {
@@ -40,19 +38,16 @@ interface NodeProps {
 
 function Node(props: NodeProps) {
     const dispatch = useDispatch();
+    const location = useLocation();
 
-    const wasLoaded = useSelector((state: any) => state.node.wasLoaded);
-    const loading = useSelector((state: any) => state.node.loading);
-    const error = useSelector((state: any) => state.node.error);
-
-    const node = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
-
-    const nodeHost = node?.Host;
+    const {loading, wasLoaded, error, data} = useTypedSelector((state) => state.node);
+    const node = data?.SystemStateInfo?.[0];
 
     const match =
         useRouteMatch<{id: string; activeTab: string}>(routes.node) ?? Object.create(null);
 
     const {id: nodeId, activeTab} = match.params;
+    const {tenantName: tenantNameFromQuery} = parseQuery(location);
 
     const {activeTabVerified, nodeTabs} = React.useMemo(() => {
         const hasStorage = _.find(node?.Roles as any[], (el) => el === STORAGE_ROLE);
@@ -72,28 +67,29 @@ function Node(props: NodeProps) {
         return {activeTabVerified, nodeTabs};
     }, [activeTab, node]);
 
+    React.useEffect(() => {
+        const tenantName = node?.Tenants?.[0] || tenantNameFromQuery?.toString();
+
+        dispatch(
+            setHeaderBreadcrumbs('node', {
+                clusterTab: clusterTabsIds.nodes,
+                tenantName,
+                nodeId,
+            }),
+        );
+    }, [dispatch, node, nodeId, tenantNameFromQuery]);
+
     React.useEffect(() => {
         const fetchData = () => dispatch(getNodeInfo(nodeId));
         fetchData();
         autofetcher.start();
         autofetcher.fetch(() => fetchData());
-        dispatch(setHeader([headerNodes]));
+
         return () => {
             autofetcher.stop();
             dispatch(resetNode());
         };
-    }, [nodeId]);
-
-    React.useEffect(() => {
-        dispatch(
-            setHeader([
-                headerNodes,
-                {
-                    text: nodeHost,
-                },
-            ]),
-        );
-    }, [nodeHost]);
+    }, [dispatch, nodeId]);
 
     const renderTabs = () => {
         return (

package/dist/containers/Node/NodePages.ts

@@ -1,4 +1,4 @@
-import routes, {createHref} from '../../routes';
+import routes, {Query, createHref} from '../../routes';
 
 export const STORAGE = 'storage';
 export const TABLETS = 'tablets';
@@ -21,9 +21,13 @@ export const NODE_PAGES = [
     },
 ];
 
-export function getDefaultNodePath(nodeId: string | number) {
-    return createHref(routes.node, {
-        id: nodeId,
-        activeTab: OVERVIEW,
-    });
+export function getDefaultNodePath(nodeId: string | number, query: Query = {}) {
+    return createHref(
+        routes.node,
+        {
+            id: nodeId,
+            activeTab: OVERVIEW,
+        },
+        query,
+    );
 }

package/dist/containers/Nodes/Nodes.tsx

@@ -15,13 +15,10 @@ import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {EntitiesCount} from '../../components/EntitiesCount';
 
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
 import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
-import {setHeader} from '../../store/reducers/header';
 import {
     getNodes,
     getFilteredPreparedNodesList,
@@ -82,19 +79,6 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
 
-    useEffect(() => {
-        if (isClusterNodes) {
-            dispatch(
-                setHeader([
-                    {
-                        text: CLUSTER_PAGES.nodes.title,
-                        link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-                    },
-                ]),
-            );
-        }
-    }, [dispatch, isClusterNodes]);
-
     const handleSearchQueryChange = (value: string) => {
         dispatch(setSearchValue(value));
     };

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -13,7 +13,7 @@ import type {INodesPreparedEntity} from '../../types/store/nodes';
 
 interface GetNodesColumnsProps {
     tabletsPath?: string;
-    getNodeRef?: (node?: NodeAddress) => string;
+    getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
 export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {

package/dist/containers/Storage/Storage.js

@@ -35,8 +35,6 @@ import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {setHeader} from '../../store/reducers/header';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
 import './Storage.scss';
 
@@ -67,7 +65,6 @@ class Storage extends React.Component {
         setStorageFilter: PropTypes.func,
         setVisibleEntities: PropTypes.func,
         visibleEntities: PropTypes.string,
-        setHeader: PropTypes.func,
         tenant: PropTypes.string,
         nodeId: PropTypes.string,
         nodesUptimeFilter: PropTypes.string,
@@ -77,7 +74,7 @@ class Storage extends React.Component {
     };
 
     componentDidMount() {
-        const {tenant, nodeId, setVisibleEntities, storageType, setHeader, getNodesList} =
+        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} =
             this.props;
 
         this.autofetcher = new AutoFetcher();
@@ -89,12 +86,6 @@ class Storage extends React.Component {
                 type: storageType,
             });
         } else {
-            setHeader([
-                {
-                    text: CLUSTER_PAGES.storage.title,
-                    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
-                },
-            ]);
             this.getStorageInfo({
                 filter: FILTER_OPTIONS.Missing,
                 type: storageType,
@@ -375,7 +366,6 @@ const mapDispatchToProps = {
     setNodesUptimeFilter,
     getNodesList,
     setStorageType,
-    setHeader,
     setDataWasNotLoaded,
 };
 

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -74,8 +74,8 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     switch (visibleEntities) {
         case VisibleEntities.All: {
             return {
-                columnId: TableColumnsIds.Missing,
-                order: DataTable.DESCENDING,
+                columnId: TableColumnsIds.PoolName,
+                order: DataTable.ASCENDING,
             };
         }
         case VisibleEntities.Missing: {
@@ -87,7 +87,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
         case VisibleEntities.Space: {
             return {
                 columnId: TableColumnsIds.UsedSpaceFlag,
-                order: DataTable.ASCENDING,
+                order: DataTable.DESCENDING,
             };
         }
         default: {
@@ -295,6 +295,14 @@ function StorageGroups({
 
     let columns = allColumns;
 
+    if (visibleEntities === VisibleEntities.All) {
+        columns = allColumns.filter((col) => {
+            return (
+                col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
+            );
+        });
+    }
+
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
 

package/dist/containers/Tablet/Tablet.tsx

@@ -1,13 +1,17 @@
 import {useCallback, useEffect, useRef} from 'react';
-import {useParams} from 'react-router';
+import {useLocation, useParams} from 'react-router';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 import {Link as ExternalLink} from '@gravity-ui/uikit';
 
 import {backend} from '../../store';
-import {getTablet, getTabletDescribe} from '../../store/reducers/tablet';
+import {getTablet, getTabletDescribe, clearTabletData} from '../../store/reducers/tablet';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
+
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {DEVELOPER_UI} from '../../utils/constants';
 import '../../services/api';
+import {parseQuery} from '../../routes';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
@@ -30,6 +34,7 @@ export const Tablet = () => {
     const isFirstDataFetchRef = useRef(true);
 
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const params = useParams<{id: string}>();
     const {id} = params;
@@ -43,6 +48,25 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
+    const {
+        nodeId: queryNodeId,
+        type: queryType,
+        state: queryState,
+        tenantName: queryTenantName,
+    } = parseQuery(location);
+
+    const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
+    const tabletState = tablet.State || queryState?.toString();
+    const tabletType = tablet.Type || queryType?.toString();
+    const tenantName = tenantPath || queryTenantName?.toString();
+
+    // NOTE: should be reviewed when migrating to React 18
+    useEffect(() => {
+        return () => {
+            dispatch(clearTabletData());
+        };
+    }, [dispatch]);
+
     useEffect(() => {
         if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
             dispatch(getTabletDescribe(tablet.TenantId));
@@ -56,6 +80,18 @@ export const Tablet = () => {
 
     useAutofetcher(fetchData, [fetchData], true);
 
+    useEffect(() => {
+        dispatch(
+            setHeaderBreadcrumbs('tablet', {
+                nodeIds: nodeId ? [nodeId] : [],
+                state: tabletState,
+                type: tabletType,
+                tenantName,
+                tabletId: id,
+            }),
+        );
+    }, [dispatch, tenantName, id, nodeId, tabletState, tabletType]);
+
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (
             <li key={index} className={b('link', {external: true})}>
@@ -86,7 +122,7 @@ export const Tablet = () => {
 
     const externalLinks = [
         {
-            name: 'Internal viewer - tablet',
+            name: `${DEVELOPER_UI} - tablet`,
             path: `/tablets?TabletID=${TabletId}`,
         },
     ];
@@ -110,7 +146,7 @@ export const Tablet = () => {
                         {Leader && <Tag text="Leader" type="blue" />}
                         <span className={b('loader')}>{loading && <Loader size="s" />}</span>
                     </div>
-                    <TabletInfo tablet={tablet} tenantPath={tenantPath} />
+                    <TabletInfo tablet={tablet} tenantPath={tenantName} />
                     <TabletControls tablet={tablet} fetchData={fetchData} />
                 </div>
                 <div className={b('rigth-pane')}>

package/dist/containers/Tablet/TabletInfo/TabletInfo.tsx

@@ -12,7 +12,7 @@ import {b} from '../Tablet';
 
 interface TabletInfoProps {
     tablet: TTabletStateInfo;
-    tenantPath: string;
+    tenantPath?: string;
 }
 
 export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
@@ -30,7 +30,7 @@ export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
     const hasHiveId = HiveId && HiveId !== '0';
     const hasUptime = State === ETabletState.Active;
 
-    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath}];
+    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath || '-'}];
 
     if (hasHiveId) {
         tabletInfo.push({

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -11,6 +11,7 @@ import ReactList from 'react-list';
 import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
 import {
     getTabletsInfo,
@@ -41,6 +42,7 @@ class TabletsFilters extends React.Component {
         stateFilter: PropTypes.array,
         typeFilter: PropTypes.array,
         error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
+        setHeader: PropTypes.func,
     };
 
     static renderLoader() {
@@ -72,7 +74,7 @@ class TabletsFilters extends React.Component {
     reloadDescriptor = -1;
 
     componentDidMount() {
-        const {setStateFilter, setTypeFilter} = this.props;
+        const {setStateFilter, setTypeFilter, setHeaderBreadcrumbs} = this.props;
 
         const queryParams = qs.parse(this.props.location.search, {
             ignoreQueryPrefix: true,
@@ -87,6 +89,10 @@ class TabletsFilters extends React.Component {
         this.setState({nodeFilter: nodes, tenantPath: path}, () => {
             this.makeRequest();
         });
+
+        setHeaderBreadcrumbs('tablets', {
+            tenantName: path,
+        });
     }
 
     componentDidUpdate(prevProps) {
@@ -141,7 +147,13 @@ class TabletsFilters extends React.Component {
         const {filteredTablets, size} = this.props;
 
         return (
-            <Tablet tablet={filteredTablets[index]} key={key} size={size} className={b('tablet')} />
+            <Tablet
+                tablet={filteredTablets[index]}
+                tenantName={this.state.tenantPath}
+                key={key}
+                size={size}
+                className={b('tablet')}
+            />
         );
     };
 
@@ -326,6 +338,7 @@ const mapDispatchToProps = {
     clearWasLoadingFlag,
     setStateFilter,
     setTypeFilter,
+    setHeaderBreadcrumbs,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);

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

@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
                 <InternalLink
                     to={createHref(routes.tenant, undefined, {
                         ...queryParams,
-                        [TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
+                        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,
                     })}
                 >

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

@@ -15,7 +15,7 @@ import {
     setCurrentDescribePath,
     getDescribeBatched,
 } from '../../../../store/reducers/describe';
-import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
 import type {EPathType} from '../../../../types/api/schema';
 
 import {isEntityWithMergedImplementation} from '../../utils/schema';

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -3,12 +3,19 @@ $section-title-line-height: 24px;
 
 .kv-detailed-overview {
     display: flex;
+
+    width: 100%;
+    height: 100%;
     gap: 20px;
+
     &__section {
         display: flex;
         overflow-x: hidden;
         flex: 0 0 calc(50% - 10px);
         flex-direction: column;
+
+        min-width: 300px;
+        height: max-content;
     }
 
     &__modal {

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

@@ -12,7 +12,7 @@ import type {EPathType} from '../../../types/api/schema';
 import {useTypedSelector} from '../../../utils/hooks';
 import routes, {createHref} from '../../../routes';
 import type {TenantDiagnosticsTab, TenantGeneralTab} from '../../../store/reducers/tenant/types';
-import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema';
 import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
@@ -49,8 +49,8 @@ const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
-    const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
-    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview, wasLoaded} = useTypedSelector(
+    const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema);
+    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
         (state) => state.tenant,
     );
 
@@ -176,7 +176,7 @@ function Diagnostics(props: DiagnosticsProps) {
                         wrapTo={({id}, node) => {
                             const path = createHref(routes.tenant, undefined, {
                                 ...queryParams,
-                                [TenantTabsGroups.generalTab]: id,
+                                [TenantTabsGroups.diagnosticsTab]: id,
                             });
 
                             return (

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

@@ -3,9 +3,11 @@
 @import '@gravity-ui/uikit/styles/mixins.scss';
 
 .healthcheck {
-    // Since most of the inner containers have fixed width, we can set fixed width here as well
-    // Thus we will get rid of unneeded layout shift when scrollbar appear
-    min-width: 885px;
+    &_expanded {
+        // Since most of the inner containers have fixed width, we can set fixed width here as well
+        // Thus we will get rid of unneeded layout shift when scrollbar appear
+        min-width: 885px;
+    }
 
     &__details {
         padding: 25px 20px 20px;

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

@@ -99,5 +99,5 @@ export const Healthcheck = (props: HealthcheckProps) => {
         return <div className="error">{i18n('no-data')}</div>;
     };
 
-    return <div className={b()}>{renderContent()}</div>;
+    return <div className={b({expanded: !preview})}>{renderContent()}</div>;
 };

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

@@ -7,7 +7,6 @@ import {
 } from '../../../../../components/InfoViewer/formatters';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
-import {selectSchemaData} from '../../../../../store/reducers/schema';
 
 import {getEntityName} from '../../../utils';
 
@@ -42,27 +41,26 @@ const prepareChangefeedInfo = (
 
 interface ChangefeedProps {
     data?: TEvDescribeSchemeResult;
-    childrenPaths?: string[];
+    topic?: TEvDescribeSchemeResult;
 }
 
 /** Displays overview for CDCStream EPathType */
-export const ChangefeedInfo = ({data, childrenPaths}: ChangefeedProps) => {
+export const ChangefeedInfo = ({data, topic}: ChangefeedProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     const {error: schemaError} = useTypedSelector((state) => state.schema);
-    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
 
     if (schemaError) {
         return <div className="error">{schemaError.statusText}</div>;
     }
 
-    if (!data || !pqGroupData) {
+    if (!data || !topic) {
         return <div className="error">No {entityName} data</div>;
     }
 
     return (
         <div>
-            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, pqGroupData)} />
+            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, topic)} />
             <TopicStats />
         </div>
     );