ydb-embedded-ui 4.5.2 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [4.7.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.6.0...v4.7.0) (2023-06-23)
+
+
+### Features
+
+* **QueryEditor:** transform history and saved to tabs ([#427](https://github.com/ydb-platform/ydb-embedded-ui/issues/427)) ([6378ca7](https://github.com/ydb-platform/ydb-embedded-ui/commit/6378ca7013239b33e55c1f88fdde7cab3a102df6))
+* update breadcrumbs ([#432](https://github.com/ydb-platform/ydb-embedded-ui/issues/432)) ([e583a03](https://github.com/ydb-platform/ydb-embedded-ui/commit/e583a03fe0d77698f29c924e611133f015c3f7ad))
+
+
+### Bug Fixes
+
+* **Cluster:** add icons to tabs ([#430](https://github.com/ydb-platform/ydb-embedded-ui/issues/430)) ([e9e649f](https://github.com/ydb-platform/ydb-embedded-ui/commit/e9e649f614691e44172c9b93dd3119066c145413))
+* **ClusterInfo:** hide by default ([#435](https://github.com/ydb-platform/ydb-embedded-ui/issues/435)) ([ef2b353](https://github.com/ydb-platform/ydb-embedded-ui/commit/ef2b3535f2c6324a34c4386680f5050655a04eb4))
+* **Cluster:** use counter from uikit for tabs ([#428](https://github.com/ydb-platform/ydb-embedded-ui/issues/428)) ([19ca3bd](https://github.com/ydb-platform/ydb-embedded-ui/commit/19ca3bd14b15bdab1a9621939ddceee6d23b08ac))
+* **DetailedOverview:** prevent tenant info scroll on overflow ([#434](https://github.com/ydb-platform/ydb-embedded-ui/issues/434)) ([8ed6076](https://github.com/ydb-platform/ydb-embedded-ui/commit/8ed60760d54913d05f39d35d00a34c8b1d7d9738))
+* rename Internal Viewer to Developer UI ([#423](https://github.com/ydb-platform/ydb-embedded-ui/issues/423)) ([3eb21f3](https://github.com/ydb-platform/ydb-embedded-ui/commit/3eb21f35a230cc591f02ef9b195f99031f832e8a))
+* **Storage:** update columns ([#437](https://github.com/ydb-platform/ydb-embedded-ui/issues/437)) ([264fbc9](https://github.com/ydb-platform/ydb-embedded-ui/commit/264fbc984cd9ef1467110d3e2f5ed9b29a526c2b))
+* **Tablet:** clear tablet data on unmount ([#425](https://github.com/ydb-platform/ydb-embedded-ui/issues/425)) ([5d308cd](https://github.com/ydb-platform/ydb-embedded-ui/commit/5d308cdded342d7a40cbc6a91431d3f286c39b8a))
+* **TabletsStatistic:** use tenant backend ([#429](https://github.com/ydb-platform/ydb-embedded-ui/issues/429)) ([d290684](https://github.com/ydb-platform/ydb-embedded-ui/commit/d290684ba08aec8b66c0492ba571a5337b5b896c))
+
+## [4.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.2...v4.6.0) (2023-06-13)
+
+
+### Features
+
+* **QueryEditor:** add data and query modes ([#422](https://github.com/ydb-platform/ydb-embedded-ui/issues/422)) ([c142f03](https://github.com/ydb-platform/ydb-embedded-ui/commit/c142f03e9caeab4dcf1d34b3988e949a94213932))
+* rework navigation, update breadcrumbs ([#418](https://github.com/ydb-platform/ydb-embedded-ui/issues/418)) ([2d807d6](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d807d6a52e13edcf2a7e1591672224339d91949))
+
+
+### Bug Fixes
+
+* **Diagnostics:** remove unneded tenantInfo fetch ([#420](https://github.com/ydb-platform/ydb-embedded-ui/issues/420)) ([ccaafe4](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccaafe4ec9346ee1ec2ebd2a62600274f2175bfb))
+
 ## [4.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.1...v4.5.2) (2023-06-06)
 
 

package/dist/assets/icons/versions.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.625 13.0156C8.625 13.2695 8.47266 13.498 8.24414 13.5742C8.04102 13.6758 7.76172 13.6504 7.58398 13.4727L5.55273 11.6445C5.42578 11.543 5.375 11.3652 5.375 11.1875C5.375 11.0352 5.42578 10.8574 5.55273 10.7559L7.58398 8.92773C7.76172 8.75 8.04102 8.72461 8.24414 8.82617C8.47266 8.90234 8.625 9.13086 8.625 9.35938V10.5781H9.03125C10.0215 10.5781 10.8594 9.76562 10.8594 8.75V4.61133C10.0215 4.35742 9.4375 3.57031 9.4375 2.65625C9.4375 1.53906 10.3262 0.625 11.4688 0.625C12.5859 0.625 13.5 1.53906 13.5 2.65625C13.5 3.57031 12.8906 4.35742 12.0781 4.61133V8.75C12.0781 10.4512 10.707 11.7969 9.03125 11.7969H8.625V13.0156ZM12.2812 2.65625C12.2812 2.22461 11.9004 1.84375 11.4688 1.84375C11.0117 1.84375 10.6562 2.22461 10.6562 2.65625C10.6562 3.11328 11.0117 3.46875 11.4688 3.46875C11.9004 3.46875 12.2812 3.11328 12.2812 2.65625ZM5.375 1.23438C5.375 1.00586 5.50195 0.777344 5.73047 0.701172C5.93359 0.599609 6.21289 0.625 6.39062 0.802734L8.42188 2.63086C8.54883 2.73242 8.625 2.91016 8.625 3.0625C8.625 3.24023 8.54883 3.41797 8.42188 3.51953L6.39062 5.34766C6.21289 5.52539 5.93359 5.55078 5.73047 5.44922C5.50195 5.37305 5.375 5.14453 5.375 4.89062V3.67188H4.96875C3.95312 3.67188 3.14062 4.50977 3.14062 5.5V9.66406C3.95312 9.91797 4.5625 10.7051 4.5625 11.5938C4.5625 12.7363 3.64844 13.625 2.53125 13.625C1.38867 13.625 0.5 12.7363 0.5 11.5938C0.5 10.7051 1.08398 9.91797 1.92188 9.66406V5.5C1.92188 3.82422 3.26758 2.45312 4.96875 2.45312H5.375V1.23438ZM1.71875 11.5938C1.71875 12.0508 2.07422 12.4062 2.53125 12.4062C2.96289 12.4062 3.34375 12.0508 3.34375 11.5938C3.34375 11.1621 2.96289 10.7812 2.53125 10.7812C2.07422 10.7812 1.71875 11.1621 1.71875 11.5938Z"/>
+</svg>

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -16,7 +16,7 @@ const b = block('ydb-node-host-wrapper');
 
 interface NodeHostWrapperProps {
     node: INodesPreparedEntity;
-    getNodeRef?: (node?: NodeAddress) => string;
+    getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
 export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
@@ -26,6 +26,11 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
 
     const isNodeAvailable = !isUnavailableNode(node);
     const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
+    const nodePath = isNodeAvailable
+        ? getDefaultNodePath(node.NodeId, {
+              tenantName: node.TenantName,
+          })
+        : undefined;
 
     return (
         <div className={b()}>
@@ -39,7 +44,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
                     <EntityStatus
                         name={node.Host}
                         status={node.SystemState}
-                        path={isNodeAvailable ? getDefaultNodePath(node.NodeId) : undefined}
+                        path={nodePath}
                         hasClipboardButton
                         className={b('host')}
                     />

package/dist/components/Tablet/Tablet.tsx

@@ -14,18 +14,32 @@ const b = cn('tablet');
 
 interface TabletProps {
     tablet?: TTabletStateInfo;
+    tenantName?: string;
 }
 
-export const Tablet = ({tablet = {}}: TabletProps) => {
-    const {TabletId: id} = tablet;
+export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
+    const {TabletId: id, NodeId, Type, State} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
+    const tabletPath =
+        id &&
+        createHref(
+            routes.tablet,
+            {id},
+            {
+                nodeId: NodeId,
+                type: Type,
+                state: State,
+                tenantName,
+            },
+        );
+
     return (
         <ContentWithPopup
             className={b('wrapper')}
             content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
-            <InternalLink to={id && createHref(routes.tablet, {id})}>
+            <InternalLink to={tabletPath}>
                 <div className={b({status})}>
                     <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
                 </div>

package/dist/components/TabletsStatistic/TabletsStatistic.tsx

@@ -12,9 +12,9 @@ import './TabletsStatistic.scss';
 
 const b = cn('tablets-statistic');
 
-type ITablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
+type Tablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
 
-const prepareTablets = (tablets: ITablets) => {
+const prepareTablets = (tablets: Tablets) => {
     const res = tablets.map((tablet) => {
         return {
             label: getTabletLabel(tablet.Type),
@@ -28,25 +28,32 @@ const prepareTablets = (tablets: ITablets) => {
 };
 
 interface TabletsStatisticProps {
-    tablets: ITablets;
+    tablets: Tablets;
     path: string | undefined;
     nodeIds: string[] | number[];
+    backend?: string;
 }
 
-export const TabletsStatistic = ({tablets = [], path, nodeIds}: TabletsStatisticProps) => {
+export const TabletsStatistic = ({tablets = [], path, nodeIds, backend}: TabletsStatisticProps) => {
     const renderTabletInfo = (item: ReturnType<typeof prepareTablets>[number], index: number) => {
-        return (
-            <Link
-                to={createHref(routes.tabletsFilters, undefined, {
-                    nodeIds,
-                    state: item.state,
-                    type: item.type,
-                    path,
-                })}
-                key={index}
-                className={b('tablet', {state: item.state?.toLowerCase()})}
-            >
-                {item.label}: {item.count}
+        const tabletsPath = createHref(routes.tabletsFilters, undefined, {
+            nodeIds,
+            state: item.state,
+            type: item.type,
+            path,
+            backend,
+        });
+
+        const label = `${item.label}: ${item.count}`;
+        const className = b('tablet', {state: item.state?.toLowerCase()});
+
+        return backend ? (
+            <a href={tabletsPath} key={index} className={className}>
+                {label}
+            </a>
+        ) : (
+            <Link to={tabletsPath} key={index} className={className}>
+                {label}
             </Link>
         );
     };

package/dist/containers/App/Content.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import {Switch, Route, Redirect, Router} from 'react-router-dom';
+import {Switch, Route, Redirect, Router, useLocation} from 'react-router-dom';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 
 import {ThemeProvider} from '@gravity-ui/uikit';
 
-import routes, {createHref, CLUSTER_PAGES} from '../../routes';
+import routes, {createHref} from '../../routes';
 
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
@@ -23,10 +23,13 @@ import './App.scss';
 import PropTypes from 'prop-types';
 import HistoryContext from '../../contexts/HistoryContext';
 import Authentication from '../Authentication/Authentication';
+import {clusterTabsIds} from '../Cluster/utils';
 
 const b = cn('app');
 
 export function Content(props) {
+    const location = useLocation();
+
     const {singleClusterMode} = props;
     const isClustersPage =
         location.pathname.includes('/clusters') ||
@@ -44,7 +47,7 @@ export function Content(props) {
                     <Route path={routes.tabletsFilters} component={TabletsFilters} />
                     <Redirect
                         to={createHref(routes.cluster, {
-                            activeTab: CLUSTER_PAGES.tenants.id,
+                            activeTab: clusterTabsIds.tenants,
                         })}
                     />
                 </Switch>
@@ -53,7 +56,7 @@ export function Content(props) {
     };
     return (
         <React.Fragment>
-            {!isClustersPage && <Header clusterName={props.clusterName} />}
+            {!isClustersPage && <Header mainPage={props.mainPage} />}
             <main className={b('main')}>{renderRoute()}</main>
             <ReduxTooltip />
             <AppIcons />
@@ -65,6 +68,7 @@ Content.propTypes = {
     singleClusterMode: PropTypes.bool,
     children: PropTypes.node,
     clusterName: PropTypes.string,
+    mainPage: PropTypes.object,
 };
 
 function ContentWrapper(props) {

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -9,11 +9,7 @@ import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity
 
 import signOutIcon from '../../assets/icons/signOut.svg';
 import signInIcon from '../../assets/icons/signIn.svg';
-import databaseIcon from '../../assets/icons/server.svg';
-import storageIcon from '../../assets/icons/storage.svg';
-import clusterIcon from '../../assets/icons/cluster.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import databasesIcon from '../../assets/icons/databases.svg';
 import userSecret from '../../assets/icons/user-secret.svg';
 import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
@@ -21,7 +17,7 @@ import supportIcon from '../../assets/icons/support.svg';
 
 import {UserSettings} from '../UserSettings/UserSettings';
 
-import routes, {createHref, CLUSTER_PAGES} from '../../routes';
+import routes, {createHref} from '../../routes';
 
 import {logout} from '../../store/reducers/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
@@ -115,46 +111,8 @@ interface AsideNavigationProps {
     setSettingValue: (name: string, value: string) => void;
 }
 
-const items: MenuItem[] = [
-    {
-        id: CLUSTER_PAGES.tenants.id,
-        title: 'Databases',
-        icon: databasesIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.tenants.id,
-        }),
-        locationKeys: ['/tenant'],
-    },
-    {
-        id: CLUSTER_PAGES.nodes.id,
-        title: 'Nodes',
-        icon: databaseIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-        locationKeys: ['/node'],
-    },
-    {
-        id: CLUSTER_PAGES.storage.id,
-        title: 'Storage',
-        icon: storageIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.storage.id,
-        }),
-        locationKeys: ['/storage'],
-    },
-    {
-        id: CLUSTER_PAGES.cluster.id,
-        title: 'Cluster',
-        icon: clusterIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.cluster.id,
-        }),
-        locationKeys: ['/cluster/cluster'],
-    },
-];
+// FIXME: add items or delete
+const items: MenuItem[] = [];
 
 enum Panel {
     UserSettings = 'UserSettings',
@@ -172,17 +130,13 @@ function AsideNavigation(props: AsideNavigationProps) {
 
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
         const {pathname} = location;
-        const isClusterPage = pathname === '/cluster';
         const menuItems: AsideHeaderMenuItem[] = items.map((item) => {
             const locationKeysCoincidence = item.locationKeys?.filter((key) =>
                 pathname.startsWith(key),
             );
-            let current =
+            const current =
                 (locationKeysCoincidence && locationKeysCoincidence.length > 0) ||
                 item.location.startsWith(pathname);
-            if (isClusterPage && item.id !== CLUSTER_PAGES.tenants.id) {
-                current = false;
-            }
             return {
                 id: item.id,
                 title: item.title,

package/dist/containers/Cluster/Cluster.scss

@@ -2,57 +2,16 @@
 
 .cluster {
     overflow: auto;
+    flex-grow: 1;
 
-    padding: 0 20px;
-    @include flex-container();
-
-    &_tab_cluster {
-        padding: 0px;
-    }
-
-    &__tab {
-        text-decoration: none;
-
-        &:first-letter {
-            text-transform: uppercase;
-        }
-    }
-
-    &__format-label {
-        margin-right: 15px;
-    }
-
-    &__title {
-        text-align: center;
-    }
+    height: 100%;
+    padding: 20px 20px 0px;
 
-    &__tooltip {
-        animation: none !important;
-    }
-
-    &__search {
-        width: 255px;
-        margin: 0 15px 0 0;
-    }
-
-    &__tablets {
-        padding: 0 !important;
-
-        .tablets-viewer__grid {
-            grid-template-columns: 125px;
-        }
-    }
-
-    &__controls {
-        display: flex;
-        justify-content: space-between;
+    @include flex-container();
 
-        margin: 17px 0;
-    }
+    &__content {
+        overflow: auto;
 
-    &__table-wrapper {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
+        height: 100%;
     }
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -1,51 +1,112 @@
-import {useRouteMatch} from 'react-router';
+import {useEffect, useMemo} from 'react';
+import {useLocation, useRouteMatch} from 'react-router';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
+import qs from 'qs';
+
+import {Tabs} from '@gravity-ui/uikit';
 
 import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/additionalProps';
-import routes, {CLUSTER_PAGES} from '../../routes';
+import type {AdditionalNodesInfo} from '../../utils/nodes';
+import routes from '../../routes';
 
-import {ClusterInfo} from './ClusterInfo/ClusterInfo';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
+import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+
+import {InternalLink} from '../../components/InternalLink';
 import Tenants from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
 import Storage from '../Storage/Storage';
+import {Versions} from '../Versions/Versions';
+
+import {ClusterInfo} from './ClusterInfo/ClusterInfo';
+import {ClusterTab, clusterTabs, clusterTabsIds, getClusterPath} from './utils';
 
 import './Cluster.scss';
 
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalTenantsInfo?: any;
-    additionalNodesInfo?: any;
+    additionalTenantsInfo?: unknown;
+    additionalNodesInfo?: AdditionalNodesInfo;
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
 function Cluster({
+    additionalClusterProps,
     additionalTenantsInfo,
     additionalNodesInfo,
-    additionalClusterProps,
     additionalVersionsProps,
 }: ClusterProps) {
-    const match = useRouteMatch<{activeTab?: string}>(routes.cluster);
-    const activeTab = match?.params?.activeTab ?? CLUSTER_PAGES.tenants.id;
-    const renderRoutes = () => {
+    const dispatch = useDispatch();
+
+    const match = useRouteMatch<{activeTab: string}>(routes.cluster);
+    const {activeTab = clusterTabsIds.tenants} = match?.params || {};
+
+    const location = useLocation();
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+    const {clusterName} = queryParams;
+
+    const {
+        data: cluster = {},
+        loading: clusterLoading,
+        wasLoaded: clusterWasLoaded,
+        error: clusterError,
+    } = useTypedSelector((state) => state.cluster);
+    const {
+        nodes,
+        loading: nodesLoading,
+        wasLoaded: nodesWasLoaded,
+    } = useTypedSelector((state) => state.clusterNodes);
+
+    const {Name} = cluster;
+
+    const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
+
+    useEffect(() => {
+        dispatch(getClusterNodes());
+    }, [dispatch]);
+
+    useAutofetcher(
+        () => dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined)),
+        [dispatch, clusterName],
+        true,
+    );
+
+    useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('cluster', {}));
+    }, [dispatch, Name]);
+
+    const versionToColor = useMemo(() => {
+        if (additionalVersionsProps?.getVersionToColorMap) {
+            return additionalVersionsProps?.getVersionToColorMap();
+        }
+        return parseVersionsToVersionToColorMap(cluster?.Versions);
+    }, [additionalVersionsProps, cluster]);
+
+    const versionsValues = useMemo(() => {
+        return parseNodesToVersionsValues(nodes, versionToColor);
+    }, [nodes, versionToColor]);
+
+    const renderTab = () => {
         switch (activeTab) {
-            case CLUSTER_PAGES.tenants.id: {
+            case clusterTabsIds.tenants: {
                 return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
             }
-            case CLUSTER_PAGES.nodes.id: {
+            case clusterTabsIds.nodes: {
                 return <Nodes additionalNodesInfo={additionalNodesInfo} />;
             }
-            case CLUSTER_PAGES.storage.id: {
+            case clusterTabsIds.storage: {
                 return <Storage additionalNodesInfo={additionalNodesInfo} />;
             }
-            case CLUSTER_PAGES.cluster.id: {
-                return (
-                    <ClusterInfo
-                        additionalClusterProps={additionalClusterProps}
-                        additionalVersionsProps={additionalVersionsProps}
-                    />
-                );
+            case clusterTabsIds.versions: {
+                return <Versions versionToColor={versionToColor} />;
             }
             default: {
                 return null;
@@ -53,7 +114,55 @@ function Cluster({
         }
     };
 
-    return <div className={b({tab: activeTab})}>{renderRoutes()}</div>;
+    const getTabEntityCount = (tabId: ClusterTab) => {
+        switch (tabId) {
+            case clusterTabsIds.tenants: {
+                return cluster?.Tenants ? Number(cluster.Tenants) : undefined;
+            }
+            case clusterTabsIds.nodes: {
+                return cluster?.NodesTotal ? Number(cluster.NodesTotal) : undefined;
+            }
+            default: {
+                return undefined;
+            }
+        }
+    };
+
+    return (
+        <div className={b()}>
+            <ClusterInfo
+                cluster={cluster}
+                versionsValues={versionsValues}
+                loading={infoLoading}
+                error={clusterError}
+                additionalClusterProps={additionalClusterProps}
+            />
+
+            <div>
+                <Tabs
+                    size="l"
+                    allowNotSelected={true}
+                    activeTab={activeTab as string}
+                    items={clusterTabs.map((item) => {
+                        return {
+                            ...item,
+                            counter: getTabEntityCount(item.id),
+                        };
+                    })}
+                    wrapTo={({id}, node) => {
+                        const path = getClusterPath(id as ClusterTab, queryParams);
+                        return (
+                            <InternalLink to={path} key={id}>
+                                {node}
+                            </InternalLink>
+                        );
+                    }}
+                />
+            </div>
+
+            <div className={b('content')}>{renderTab()}</div>
+        </div>
+    );
 }
 
 export default Cluster;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,31 +1,48 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
-    $_: &;
-    $progress_width: 100%;
+    width: 100%;
 
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
+    &__header {
+        display: flex;
 
-    width: 100%;
+        width: fit-content;
+        margin-bottom: 20px;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+        cursor: pointer;
 
-    &__header {
-        padding: 20px;
+        &__expand-button {
+            margin-left: 6px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background: var(--yc-color-base-background);
+            &_rotate {
+                transform: rotate(180deg);
+            }
+        }
     }
 
-    &__title {
-        display: flex;
-        align-items: center;
+    &__title .entity-status__name {
+        font-size: var(--yc-text-header-1-font-size);
+        font-weight: var(--yc-text-header-font-weight);
+        line-height: var(--yc-text-header-1-line-height);
+    }
+
+    &__title-skeleton {
+        width: 20%;
+        min-width: 200px;
+        height: var(--yc-text-header-1-line-height);
+    }
 
-        margin-top: 16px;
+    &__error {
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
+    }
+
+    &__info {
         margin-bottom: 20px;
+
+        &_hidden {
+            display: none;
+        }
     }
 
     &__metric-field {
@@ -38,7 +55,7 @@
         align-items: center;
 
         & .tablet {
-            margin-bottom: 2px;
+            margin-top: 2px;
         }
     }