ydb-embedded-ui 4.9.0 → 4.10.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [4.10.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.10.0...v4.10.1) (2023-07-14)
+
+
+### Bug Fixes
+
+* apply design fixes ([#475](https://github.com/ydb-platform/ydb-embedded-ui/issues/475)) ([5e7c9ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/5e7c9caa9f54094a3eb6448d92d43242d3e738dd))
+* **AsideNavigation:** replace query icon ([#466](https://github.com/ydb-platform/ydb-embedded-ui/issues/466)) ([4495eb2](https://github.com/ydb-platform/ydb-embedded-ui/commit/4495eb2634e48feda677c03591b92393ad28981e))
+* **ClusterInfo:** add Databases field ([#474](https://github.com/ydb-platform/ydb-embedded-ui/issues/474)) ([28a9936](https://github.com/ydb-platform/ydb-embedded-ui/commit/28a99364bf5e916381a54a59d4d3f979b35f6eff))
+* **Cluster:** make global scroll ([#470](https://github.com/ydb-platform/ydb-embedded-ui/issues/470)) ([30f8bc5](https://github.com/ydb-platform/ydb-embedded-ui/commit/30f8bc5ce52fceda076d278b1464d413e899ae21))
+* **Cluster:** remove tabs icons and numbers ([#473](https://github.com/ydb-platform/ydb-embedded-ui/issues/473)) ([d2e43d4](https://github.com/ydb-platform/ydb-embedded-ui/commit/d2e43d41759b085f34b7f29f52f3aba60cd0588f))
+* **Query:** rename New Query tab to Query ([#467](https://github.com/ydb-platform/ydb-embedded-ui/issues/467)) ([c3f5585](https://github.com/ydb-platform/ydb-embedded-ui/commit/c3f5585562a204ef0831d0c45766b17c3dc72f82))
+* **TableIndexInfo:** format DataSize ([#468](https://github.com/ydb-platform/ydb-embedded-ui/issues/468)) ([a189b8c](https://github.com/ydb-platform/ydb-embedded-ui/commit/a189b8cf9610f6b1b7b5f4c01896eda5f8347ebf))
+
+## [4.10.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.9.0...v4.10.0) (2023-07-07)
+
+
+### Bug Fixes
+
+* **AsideNavigation:** swap icons ([#465](https://github.com/ydb-platform/ydb-embedded-ui/issues/465)) ([13bc92a](https://github.com/ydb-platform/ydb-embedded-ui/commit/13bc92a0150ee8d809b3811b528f5d31f4999815))
+* move sendQuery timeout to request query ([#464](https://github.com/ydb-platform/ydb-embedded-ui/issues/464)) ([6323038](https://github.com/ydb-platform/ydb-embedded-ui/commit/6323038b9e327a9e348812b43514008e9d07640c))
+* **QueryEditor:** do not reset input on empty savedPath ([#451](https://github.com/ydb-platform/ydb-embedded-ui/issues/451)) ([7f98e44](https://github.com/ydb-platform/ydb-embedded-ui/commit/7f98e44834b54bfc1398bb418909fae21e22a3dc))
+* show 5 digits size in table info ([#461](https://github.com/ydb-platform/ydb-embedded-ui/issues/461)) ([8c4ecc4](https://github.com/ydb-platform/ydb-embedded-ui/commit/8c4ecc41ed41cad34debaa6ff7f39f1f10f8d974))
+* **TenantOverview:** add copy button to tenant name ([#459](https://github.com/ydb-platform/ydb-embedded-ui/issues/459)) ([2d8b380](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d8b38049a038fb889e82d0135c026462107a124))
+* **UsageFilter:** fix bar flashes ([#457](https://github.com/ydb-platform/ydb-embedded-ui/issues/457)) ([ae1965e](https://github.com/ydb-platform/ydb-embedded-ui/commit/ae1965ec894c7d012f0ebfc5949b73d4499b390e))
+
 ## [4.9.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.8.2...v4.9.0) (2023-06-30)
 
 

package/dist/components/BasicNodeViewer/BasicNodeViewer.tsx

@@ -1,5 +1,8 @@
 import cn from 'bem-cn-lite';
 
+import type {TSystemStateInfo} from '../../types/api/nodes';
+import type {AdditionalNodesInfo} from '../../utils/nodes';
+
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {Tags} from '../Tags';
 import {Icon} from '../Icon';
@@ -9,8 +12,8 @@ import './BasicNodeViewer.scss';
 const b = cn('basic-node-viewer');
 
 interface BasicNodeViewerProps {
-    node: any;
-    additionalNodesInfo?: any;
+    node: TSystemStateInfo;
+    additionalNodesInfo?: AdditionalNodesInfo;
     className?: string;
 }
 
@@ -41,8 +44,8 @@ export const BasicNodeViewer = ({node, additionalNodesInfo, className}: BasicNod
                         <label>{node.NodeId}</label>
                     </div>
 
-                    <Tags tags={[node.DataCenter]} />
-                    <Tags tags={node.Roles} tagsType="blue" />
+                    {node.DataCenter && <Tags tags={[node.DataCenter]} />}
+                    {node.Roles && <Tags tags={node.Roles} tagsType="blue" />}
                 </>
             ) : (
                 <div className="error">no data</div>

package/dist/components/EntityStatus/EntityStatus.js

@@ -31,6 +31,7 @@ class EntityStatus extends React.Component {
         label: PropTypes.string,
         iconPath: PropTypes.string,
         hasClipboardButton: PropTypes.bool,
+        clipboardButtonAlwaysVisible: PropTypes.bool,
         showStatus: PropTypes.bool,
         externalLink: PropTypes.bool,
         className: PropTypes.string,
@@ -47,6 +48,7 @@ class EntityStatus extends React.Component {
         externalLink: false,
         mode: 'color',
         withLeftTrim: false,
+        clipboardButtonAlwaysVisible: false,
     };
     renderIcon() {
         const {status, size, showStatus, mode} = this.props;
@@ -123,7 +125,7 @@ class EntityStatus extends React.Component {
                         component="span"
                         size="s"
                         className={b('clipboard-button', {
-                            visible: false,
+                            visible: this.props.clipboardButtonAlwaysVisible,
                         })}
                     >
                         <ClipboardButton text={name} size={16} />

package/dist/components/FormattedBytes/FormattedBytes.tsx

@@ -0,0 +1,10 @@
+import {FormatBytesArgs, formatBytes} from '../../utils/bytesParsers';
+
+type FormattedBytesProps = FormatBytesArgs;
+
+export const FormattedBytes = ({value, withSpeedLabel, ...params}: FormattedBytesProps) => {
+    const formatted = formatBytes({value, withSpeedLabel, ...params});
+    const bytes = formatBytes({value, withSpeedLabel, size: 'b'});
+
+    return <span title={bytes}>{formatted}</span>;
+};

package/dist/components/FormattedBytes/utils.tsx

@@ -0,0 +1,13 @@
+import type {FormatBytesArgs} from '../../utils/bytesParsers';
+import {FormattedBytes} from './FormattedBytes';
+
+export const toFormattedSize = (
+    value: number | string | undefined,
+    params?: Omit<FormatBytesArgs, 'value'>,
+) => {
+    if (!value) {
+        return null;
+    }
+
+    return <FormattedBytes value={value} significantDigits={2} {...params} />;
+};

package/dist/components/FullNodeViewer/FullNodeViewer.tsx

@@ -0,0 +1,73 @@
+import cn from 'bem-cn-lite';
+
+import type {TSystemStateInfo} from '../../types/api/nodes';
+
+import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
+import {calcUptime} from '../../utils';
+
+import InfoViewer from '../InfoViewer/InfoViewer';
+import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
+
+import './FullNodeViewer.scss';
+
+const b = cn('full-node-viewer');
+
+interface FullNodeViewerProps {
+    node: TSystemStateInfo | undefined;
+    className?: string;
+}
+
+export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
+    const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
+        label: Name,
+        value: Address,
+    }));
+
+    const commonInfo = [
+        {label: 'Version', value: node?.Version},
+        {label: 'Uptime', value: calcUptime(node?.StartTime)},
+        {label: 'DC', value: node?.DataCenterDescription},
+        {label: 'Rack', value: node?.Rack},
+    ];
+
+    const averageInfo = node?.LoadAverage?.map((load, loadIndex) => ({
+        label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
+        value: <ProgressViewer value={load} percents={true} colorizeProgress={true} />,
+    }));
+
+    return (
+        <div className={`${b()} ${className}`}>
+            {node ? (
+                <div className={b('common-info')}>
+                    <div>
+                        <div className={b('section-title')}>Pools</div>
+                        <div className={b('section', {pools: true})}>
+                            {node?.PoolStats?.map((pool, poolIndex) => (
+                                <PoolUsage key={poolIndex} data={pool} />
+                            ))}
+                        </div>
+                    </div>
+
+                    {endpointsInfo && endpointsInfo.length && (
+                        <InfoViewer
+                            title="Endpoints"
+                            className={b('section')}
+                            info={endpointsInfo}
+                        />
+                    )}
+
+                    <InfoViewer title="Common info" className={b('section')} info={commonInfo} />
+
+                    <InfoViewer
+                        title="Load average"
+                        className={b('section', {average: true})}
+                        info={averageInfo}
+                    />
+                </div>
+            ) : (
+                <div className="error">no data</div>
+            )}
+        </div>
+    );
+};

package/dist/components/InfoViewer/formatters/schema.ts

@@ -1,4 +1,5 @@
-import {TIndexDescription} from '../../../types/api/schema';
+import type {TIndexDescription} from '../../../types/api/schema';
+import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';
 
@@ -8,6 +9,7 @@ export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
         State: (value) => value?.substring(11), // trims EIndexState prefix
         KeyColumnNames: (value) => value?.join(', '),
         DataColumnNames: (value) => value?.join(', '),
+        DataSize: toFormattedSize,
     },
     labels: {
         KeyColumnNames: 'Columns',

package/dist/components/InfoViewer/formatters/table.ts

@@ -1,14 +1,15 @@
 import type {TFollowerGroup, TPartitionConfig, TTableStats} from '../../../types/api/schema';
 import type {TMetrics} from '../../../types/api/tenant';
-import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {formatCPU, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';
 
 export const formatTabletMetricsItem = createInfoFormatter<TMetrics>({
     values: {
         CPU: formatCPU,
-        Memory: formatBytes,
-        Storage: formatBytes,
+        Memory: toFormattedSize,
+        Storage: toFormattedSize,
         Network: formatBps,
         ReadThroughput: formatBps,
         WriteThroughput: formatBps,
@@ -37,8 +38,8 @@ export const formatPartitionConfigItem = createInfoFormatter<TPartitionConfig>({
 
 export const formatTableStatsItem = createInfoFormatter<TTableStats>({
     values: {
-        DataSize: formatBytes,
-        IndexSize: formatBytes,
+        DataSize: toFormattedSize,
+        IndexSize: toFormattedSize,
         LastAccessTime: formatDateTime,
         LastUpdateTime: formatDateTime,
     },

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -1,10 +1,10 @@
 import {RadioButton} from '@gravity-ui/uikit';
 
-import type {ValueOf} from '../../types/common';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
 interface ProblemFilterProps {
-    value: ValueOf<typeof ProblemFilterValues>;
+    value: ProblemFilterValue;
     onChange: (value: string) => void;
     className?: string;
 }

package/dist/components/SpeedMultiMeter/SpeedMultiMeter.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import cn from 'bem-cn-lite';
 import {Popover} from '@gravity-ui/uikit';
 
-import {formatBytesCustom, IBytesSizes, IProcessSpeedStats} from '../../utils/bytesParsers';
+import {formatBytes, BytesSizes, ProcessSpeedStats} from '../../utils/bytesParsers';
 
 import './SpeedMultiMeter.scss';
 
@@ -11,8 +11,8 @@ import i18n from './i18n';
 const b = cn('speed-multimeter');
 
 interface SpeedMultiMeterProps {
-    data?: IProcessSpeedStats;
-    speedSize?: IBytesSizes;
+    data?: ProcessSpeedStats;
+    speedSize?: BytesSizes;
     withValue?: boolean;
     withPopover?: boolean;
 }
@@ -27,7 +27,7 @@ export const SpeedMultiMeter = ({
     const rawValues = [perMinute, perHour, perDay];
 
     const formatValue = (value: number) =>
-        formatBytesCustom({value: value, size: speedSize, isSpeed: true});
+        formatBytes({value: value, size: speedSize, withSpeedLabel: true});
 
     const formattedValues = [
         {value: formatValue(perMinute), label: i18n('perMinute')},

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.scss

@@ -0,0 +1,32 @@
+@import '../../styles/mixins.scss';
+
+.ydb-table-with-controls-layout {
+    display: inline-block;
+
+    box-sizing: border-box;
+    min-width: 100%;
+
+    &__controls-wrapper {
+        z-index: 3;
+
+        box-sizing: border-box;
+        width: 100%;
+
+        @include sticky-top();
+    }
+
+    &__controls {
+        z-index: 3;
+
+        width: max-content;
+        height: 62px;
+
+        @include controls();
+        @include sticky-top();
+    }
+
+    .data-table__sticky_moving {
+        // Place table head right after controls
+        top: 62px !important;
+    }
+}

package/dist/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -0,0 +1,43 @@
+import type {ReactNode} from 'react';
+import block from 'bem-cn-lite';
+
+import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
+
+import './TableWithControlsLayout.scss';
+
+const b = block('ydb-table-with-controls-layout');
+
+interface TableWithControlsLayoutItemProps {
+    children: ReactNode;
+    className?: string;
+}
+
+interface TableProps extends TableWithControlsLayoutItemProps {
+    loading?: boolean;
+}
+
+export const TableWithControlsLayout = ({
+    children,
+    className,
+}: TableWithControlsLayoutItemProps) => {
+    return <div className={b(null, className)}>{children}</div>;
+};
+
+TableWithControlsLayout.Controls = function TableControls({
+    children,
+    className,
+}: TableWithControlsLayoutItemProps) {
+    return (
+        <div className={b('controls-wrapper')}>
+            <div className={b('controls', className)}>{children}</div>
+        </div>
+    );
+};
+
+TableWithControlsLayout.Table = function Table({children, loading, className}: TableProps) {
+    if (loading) {
+        return <TableSkeleton className={b('loader')} />;
+    }
+
+    return <div className={b('table', className)}>{children}</div>;
+};

package/dist/components/TruncatedQuery/{TruncatedQuery.js → TruncatedQuery.tsx}

@@ -1,11 +1,15 @@
-import React from 'react';
 import cn from 'bem-cn-lite';
 
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
-function TruncatedQuery({value, maxQueryHeight}) {
+interface TruncatedQueryProps {
+    value: string | undefined;
+    maxQueryHeight?: number;
+}
+
+export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryProps) => {
     const lines = value.split('\n');
     const truncated = lines.length > maxQueryHeight;
 
@@ -14,13 +18,11 @@ function TruncatedQuery({value, maxQueryHeight}) {
         const message =
             '\n...\nThe request was truncated. Click on the line to show the full query on the query tab';
         return (
-            <React.Fragment>
+            <>
                 <span className={b()}>{content}</span>
                 <span className={b('message', {color: 'secondary'})}>{message}</span>
-            </React.Fragment>
+            </>
         );
     }
-    return value;
-}
-
-export default TruncatedQuery;
+    return <>{value}</>;
+};

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -7,7 +7,7 @@ import cn from 'bem-cn-lite';
 import {Icon, Button} from '@gravity-ui/uikit';
 import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity-ui/navigation';
 
-import squareChartBarIcon from '@gravity-ui/icons/svgs/square-chart-bar.svg';
+import terminalIcon from '@gravity-ui/icons/svgs/terminal.svg';
 import pulseIcon from '@gravity-ui/icons/svgs/pulse.svg';
 
 import signOutIcon from '../../assets/icons/signOut.svg';
@@ -139,23 +139,23 @@ export const useGetLeftNavigationItems = () => {
 
         const items: MenuItem[] = [
             {
-                id: TENANT_PAGES_IDS.diagnostics,
-                title: 'Diagnostics',
-                icon: squareChartBarIcon,
+                id: TENANT_PAGES_IDS.query,
+                title: 'Query',
+                icon: terminalIcon,
                 iconSize: 20,
                 location: getTenantPath({
                     ...queryParams,
-                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
                 }),
             },
             {
-                id: TENANT_PAGES_IDS.query,
-                title: 'Query',
+                id: TENANT_PAGES_IDS.diagnostics,
+                title: 'Diagnostics',
                 icon: pulseIcon,
                 iconSize: 20,
                 location: getTenantPath({
                     ...queryParams,
-                    [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+                    [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
                 }),
             },
         ];

package/dist/containers/Cluster/Cluster.scss

@@ -5,13 +5,12 @@
     flex-grow: 1;
 
     height: 100%;
-    padding: 20px 20px 0px;
+    padding: 0 20px;
 
     @include flex-container();
 
-    &__content {
-        overflow: auto;
-
-        height: 100%;
+    &__tabs {
+        position: sticky;
+        left: 0;
     }
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -6,7 +6,11 @@ import qs from 'qs';
 
 import {Tabs} from '@gravity-ui/uikit';
 
-import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/additionalProps';
+import type {
+    AdditionalClusterProps,
+    AdditionalTenantsProps,
+    AdditionalVersionsProps,
+} from '../../types/additionalProps';
 import type {AdditionalNodesInfo} from '../../utils/nodes';
 import routes from '../../routes';
 
@@ -17,9 +21,9 @@ import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../.
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 import {InternalLink} from '../../components/InternalLink';
-import Tenants from '../Tenants/Tenants';
+import {Tenants} from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
-import Storage from '../Storage/Storage';
+import {Storage} from '../Storage/Storage';
 import {Versions} from '../Versions/Versions';
 
 import {ClusterInfo} from './ClusterInfo/ClusterInfo';
@@ -30,7 +34,7 @@ import './Cluster.scss';
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalTenantsInfo?: unknown;
+    additionalTenantsProps?: AdditionalTenantsProps;
     additionalNodesInfo?: AdditionalNodesInfo;
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
@@ -38,7 +42,7 @@ interface ClusterProps {
 
 function Cluster({
     additionalClusterProps,
-    additionalTenantsInfo,
+    additionalTenantsProps,
     additionalNodesInfo,
     additionalVersionsProps,
 }: ClusterProps) {
@@ -97,7 +101,7 @@ function Cluster({
     const renderTab = () => {
         switch (activeTab) {
             case clusterTabsIds.tenants: {
-                return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
+                return <Tenants additionalTenantsProps={additionalTenantsProps} />;
             }
             case clusterTabsIds.nodes: {
                 return <Nodes additionalNodesInfo={additionalNodesInfo} />;
@@ -114,20 +118,6 @@ function Cluster({
         }
     };
 
-    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
@@ -138,17 +128,12 @@ function Cluster({
                 additionalClusterProps={additionalClusterProps}
             />
 
-            <div>
+            <div className={b('tabs')}>
                 <Tabs
                     size="l"
                     allowNotSelected={true}
                     activeTab={activeTab as string}
-                    items={clusterTabs.map((item) => {
-                        return {
-                            ...item,
-                            counter: getTabEntityCount(item.id),
-                        };
-                    })}
+                    items={clusterTabs}
                     wrapTo={({id}, node) => {
                         const path = getClusterPath(id as ClusterTab, queryParams);
                         return (
@@ -160,7 +145,7 @@ function Cluster({
                 />
             </div>
 
-            <div className={b('content')}>{renderTab()}</div>
+            <div>{renderTab()}</div>
         </div>
     );
 }

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

@@ -1,7 +1,11 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
+    position: sticky;
+    left: 0;
+
     width: 100%;
+    padding-top: 20px;
 
     &__header {
         display: flex;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -57,6 +57,13 @@ const getInfo = (
         });
     }
 
+    if (cluster.Tenants) {
+        info.push({
+            label: 'Databases',
+            value: cluster.Tenants,
+        });
+    }
+
     info.push(
         {
             label: 'Nodes',

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.tsx

@@ -18,7 +18,7 @@ interface ClusterInfoSkeletonProps {
     rows?: number;
 }
 
-export const ClusterInfoSkeleton = ({rows = 6, className}: ClusterInfoSkeletonProps) => (
+export const ClusterInfoSkeleton = ({rows = 7, className}: ClusterInfoSkeletonProps) => (
     <div className={b(null, className)}>
         {[...new Array(rows)].map((_, index) => (
             <div className={b('row')} key={`skeleton-row-${index}`}>

package/dist/containers/Cluster/utils.tsx

@@ -1,10 +1,3 @@
-import {Icon} from '@gravity-ui/uikit';
-import cubes3Icon from '@gravity-ui/icons/svgs/cubes-3.svg';
-import databasesIcon from '@gravity-ui/icons/svgs/databases.svg';
-import hardDriveIcon from '@gravity-ui/icons/svgs/hard-drive.svg';
-
-import versionsIcon from '../../assets/icons/versions.svg';
-
 import type {ValueOf} from '../../types/common';
 import routes, {createHref} from '../../routes';
 
@@ -20,22 +13,18 @@ export type ClusterTab = ValueOf<typeof clusterTabsIds>;
 const tenants = {
     id: clusterTabsIds.tenants,
     title: 'Databases',
-    icon: <Icon data={databasesIcon} />,
 };
 const nodes = {
     id: clusterTabsIds.nodes,
     title: 'Nodes',
-    icon: <Icon data={cubes3Icon} />,
 };
 const storage = {
     id: clusterTabsIds.storage,
     title: 'Storage',
-    icon: <Icon data={hardDriveIcon} />,
 };
 const versions = {
     id: clusterTabsIds.versions,
     title: 'Versions',
-    icon: <Icon data={versionsIcon} />,
 };
 
 export const clusterTabs = [tenants, nodes, storage, versions];

package/dist/containers/Header/Header.scss

@@ -6,14 +6,10 @@
     justify-content: space-between;
     align-items: center;
 
-    padding: 0 20px 0 18px;
-
-    font-weight: 600;
+    padding: 0 20px 0 12px;
 
     border-bottom: 1px solid var(--yc-color-line-generic);
 
-    @include body2-typography;
-
     &__breadcrumb {
         display: flex;
         align-items: center;

package/dist/containers/Node/Node.tsx

@@ -9,11 +9,11 @@ import {Link} from 'react-router-dom';
 
 import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
 import {Tablets} from '../Tablets';
-import Storage from '../Storage/Storage';
-import NodeOverview from './NodeOverview/NodeOverview';
+import {Storage} from '../Storage/Storage';
 import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
+import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
 import routes, {createHref, parseQuery} from '../../routes';
@@ -128,7 +128,7 @@ function Node(props: NodeProps) {
             }
 
             case OVERVIEW: {
-                return <NodeOverview node={node} className={b('overview-wrapper')} />;
+                return <FullNodeViewer node={node} className={b('overview-wrapper')} />;
             }
 
             case STRUCTURE: {