ydb-embedded-ui 4.6.0 → 4.8.0

package/dist/containers/Header/breadcrumbs.ts

@@ -0,0 +1,146 @@
+import nodesRightIcon from '@gravity-ui/icons/svgs/nodes-right.svg';
+import databaseIcon from '@gravity-ui/icons/svgs/database.svg';
+
+import type {
+    BreadcrumbsOptions,
+    ClusterBreadcrumbsOptions,
+    NodeBreadcrumbsOptions,
+    Page,
+    TabletBreadcrumbsOptions,
+    TabletsBreadcrumbsOptions,
+    TenantBreadcrumbsOptions,
+} from '../../store/reducers/header/types';
+import routes, {createHref} from '../../routes';
+
+import {getClusterPath} from '../Cluster/utils';
+import {getTenantPath} from '../Tenant/TenantPages';
+import {getDefaultNodePath} from '../Node/NodePages';
+
+const prepareTenantName = (tenantName: string) => {
+    return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
+};
+
+export interface RawBreadcrumbItem {
+    text: string;
+    link?: string;
+    icon?: SVGIconData;
+}
+
+const getClusterBreadcrumbs = (
+    options: ClusterBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {clusterName, clusterTab} = options;
+
+    return [
+        {
+            text: clusterName || 'Cluster',
+            link: getClusterPath(clusterTab, query),
+            icon: nodesRightIcon,
+        },
+    ];
+};
+
+const getTenantBreadcrumbs = (
+    options: TenantBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tenantName} = options;
+
+    const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
+    const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
+
+    return [...getClusterBreadcrumbs(options, query), {text, link, icon: databaseIcon}];
+};
+
+const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
+    const {tenantName, nodeId} = options;
+
+    let breadcrumbs: RawBreadcrumbItem[];
+
+    // Compute nodes have tenantName, storage nodes doesn't
+    const isStorageNode = !tenantName;
+
+    if (isStorageNode) {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    } else {
+        breadcrumbs = getTenantBreadcrumbs(options, query);
+    }
+
+    const text = nodeId ? `Node ${nodeId}` : 'Node';
+    const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
+
+    breadcrumbs.push({text, link});
+
+    return breadcrumbs;
+};
+
+const getTabletsBreadcrubms = (
+    options: TabletsBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tenantName, nodeIds, state, type} = options;
+
+    let breadcrumbs: RawBreadcrumbItem[];
+
+    // Cluster system tablets don't have tenantName
+    if (tenantName) {
+        breadcrumbs = getTenantBreadcrumbs(options, query);
+    } else {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    }
+
+    const link = createHref(routes.tabletsFilters, undefined, {
+        nodeIds,
+        state,
+        type,
+        path: tenantName,
+    });
+
+    breadcrumbs.push({text: 'Tablets', link});
+
+    return breadcrumbs;
+};
+
+const getTabletBreadcrubms = (
+    options: TabletBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tabletId} = options;
+
+    const breadcrumbs = getTabletsBreadcrubms(options, query);
+
+    breadcrumbs.push({
+        text: tabletId || 'Tablet',
+    });
+
+    return breadcrumbs;
+};
+
+export const getBreadcrumbs = (
+    page: Page,
+    options: BreadcrumbsOptions,
+    rawBreadcrumbs: RawBreadcrumbItem[] = [],
+    query = {},
+) => {
+    switch (page) {
+        case 'cluster': {
+            return [...rawBreadcrumbs, ...getClusterBreadcrumbs(options, query)];
+        }
+        case 'tenant': {
+            return [...rawBreadcrumbs, ...getTenantBreadcrumbs(options, query)];
+        }
+        case 'node': {
+            return [...rawBreadcrumbs, ...getNodeBreadcrumbs(options, query)];
+        }
+        case 'tablets': {
+            return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
+        }
+        case 'tablet': {
+            return [...rawBreadcrumbs, ...getTabletBreadcrubms(options, query)];
+        }
+        default: {
+            return rawBreadcrumbs;
+        }
+    }
+};

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,10 +16,12 @@ import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
-import routes, {createHref} from '../../routes';
-import {HeaderItemType, setHeader} from '../../store/reducers/header';
+import routes, {createHref, parseQuery} from '../../routes';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {AutoFetcher} from '../../utils/autofetcher';
-import {clusterTabsIds, getClusterPath} from '../Cluster/utils';
+import {useTypedSelector} from '../../utils/hooks';
+
+import {clusterTabsIds} from '../Cluster/utils';
 
 import './Node.scss';
 
@@ -36,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);
@@ -69,21 +68,16 @@ function Node(props: NodeProps) {
     }, [activeTab, node]);
 
     React.useEffect(() => {
-        const headerItems: HeaderItemType[] = [
-            {
-                text: 'Cluster',
-                link: getClusterPath(clusterTabsIds.nodes),
-            },
-        ];
-
-        if (nodeHost) {
-            headerItems.push({
-                text: nodeHost,
-            });
-        }
-
-        dispatch(setHeader(headerItems));
-    }, [dispatch, nodeHost]);
+        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));

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/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,16 +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 {setHeader} from '../../store/reducers/header';
-import routes, {createHref} from '../../routes';
+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';
@@ -19,8 +20,6 @@ import {Icon} from '../../components/Icon';
 import {EmptyState} from '../../components/EmptyState';
 import {Loader} from '../../components/Loader';
 
-import {getClusterPath} from '../Cluster/utils';
-
 import {TabletTable} from './TabletTable';
 import {TabletInfo} from './TabletInfo';
 import {TabletControls} from './TabletControls';
@@ -35,6 +34,7 @@ export const Tablet = () => {
     const isFirstDataFetchRef = useRef(true);
 
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const params = useParams<{id: string}>();
     const {id} = params;
@@ -48,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));
@@ -63,26 +82,15 @@ export const Tablet = () => {
 
     useEffect(() => {
         dispatch(
-            setHeader([
-                {
-                    text: 'Cluster',
-                    link: getClusterPath(),
-                },
-                {
-                    text: 'Tablets',
-                    link: createHref(routes.tabletsFilters, undefined, {
-                        nodeIds: tablet.NodeId ? [tablet.NodeId] : [],
-                        state: tablet.State,
-                        type: tablet.Type,
-                        tenantPath,
-                    }),
-                },
-                {
-                    text: tablet.TabletId ?? 'Tablet',
-                },
-            ]),
+            setHeaderBreadcrumbs('tablet', {
+                nodeIds: nodeId ? [nodeId] : [],
+                state: tabletState,
+                type: tabletType,
+                tenantName,
+                tabletId: id,
+            }),
         );
-    }, [dispatch, tenantPath, tablet]);
+    }, [dispatch, tenantName, id, nodeId, tabletState, tabletType]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (
@@ -114,7 +122,7 @@ export const Tablet = () => {
 
     const externalLinks = [
         {
-            name: 'Internal viewer - tablet',
+            name: `${DEVELOPER_UI} - tablet`,
             path: `/tablets?TabletID=${TabletId}`,
         },
     ];
@@ -138,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,7 +11,7 @@ import ReactList from 'react-list';
 import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
-import {setHeader} from '../../store/reducers/header';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
 import {
     getTabletsInfo,
@@ -22,8 +22,6 @@ import {
     getTablets,
 } from '../../store/reducers/tabletsFilters';
 
-import {getClusterPath} from '../Cluster/utils';
-
 import './TabletsFilters.scss';
 
 const b = cn('tablets-filters');
@@ -76,7 +74,7 @@ class TabletsFilters extends React.Component {
     reloadDescriptor = -1;
 
     componentDidMount() {
-        const {setStateFilter, setTypeFilter, setHeader} = this.props;
+        const {setStateFilter, setTypeFilter, setHeaderBreadcrumbs} = this.props;
 
         const queryParams = qs.parse(this.props.location.search, {
             ignoreQueryPrefix: true,
@@ -92,15 +90,9 @@ class TabletsFilters extends React.Component {
             this.makeRequest();
         });
 
-        setHeader([
-            {
-                text: 'Cluster',
-                link: getClusterPath(),
-            },
-            {
-                text: 'Tablets'
-            }
-        ]);
+        setHeaderBreadcrumbs('tablets', {
+            tenantName: path,
+        });
     }
 
     componentDidUpdate(prevProps) {
@@ -155,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')}
+            />
         );
     };
 
@@ -340,7 +338,7 @@ const mapDispatchToProps = {
     clearWasLoadingFlag,
     setStateFilter,
     setTypeFilter,
-    setHeader,
+    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/DetailedOverview/DetailedOverview.scss

@@ -3,15 +3,19 @@ $section-title-line-height: 24px;
 
 .kv-detailed-overview {
     display: flex;
-    gap: 20px;
 
+    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

@@ -11,9 +11,9 @@ 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 type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema';
-import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import { setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import {Loader} from '../../../components/Loader';
@@ -96,10 +96,6 @@ function Diagnostics(props: DiagnosticsProps) {
         }
     };
 
-    const forwardToGeneralTab = (tab: TenantGeneralTab) => {
-        dispatch(setTopLevelTab(tab));
-    };
-
     const renderTabContent = () => {
         const {type} = props;
 
@@ -116,13 +112,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topQueries: {
-                return (
-                    <TopQueries
-                        path={tenantNameString}
-                        changeSchemaTab={forwardToGeneralTab}
-                        type={type}
-                    />
-                );
+                return <TopQueries path={tenantNameString} type={type} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.topShards: {
                 return <TopShards tenantPath={tenantNameString} type={type} />;
@@ -176,7 +166,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/TenantOverview/TenantOverview.js

@@ -105,6 +105,7 @@ class TenantOverview extends React.Component {
             PoolStats,
             StateStats = [],
             MemoryUsed,
+            Name,
             CoresUsed,
             StorageGroups,
             StorageAllocatedSize,
@@ -159,7 +160,7 @@ class TenantOverview extends React.Component {
                 <div className={b('system-tablets')}>
                     {SystemTablets &&
                         SystemTablets.map((tablet, tabletIndex) => (
-                            <Tablet key={tabletIndex} tablet={tablet} />
+                            <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
                         ))}
                 </div>
                 <div className={b('common-info')}>