ydb-embedded-ui 4.16.2 → 4.18.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## [4.18.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.17.0...v4.18.0) (2023-09-25)
+
+
+### Features
+
+* **ProgressViewer:** add custom threasholds to ProgressViewer ([#540](https://github.com/ydb-platform/ydb-embedded-ui/issues/540)) ([3553065](https://github.com/ydb-platform/ydb-embedded-ui/commit/35530655581357f4a79c277a5bf9846b3befb784))
+
+
+### Bug Fixes
+
+* **Authentication:** enable page redirect ([#539](https://github.com/ydb-platform/ydb-embedded-ui/issues/539)) ([721883c](https://github.com/ydb-platform/ydb-embedded-ui/commit/721883cc7f4ca60e64d4a5f77b939dbb8e960855))
+* **Healthcheck:** add merge_records request param ([#538](https://github.com/ydb-platform/ydb-embedded-ui/issues/538)) ([6a47481](https://github.com/ydb-platform/ydb-embedded-ui/commit/6a474814f71c3318715a8ce638fd522a770d8038))
+* **Nodes:** use nodes endpoint by default ([#535](https://github.com/ydb-platform/ydb-embedded-ui/issues/535)) ([12d4fef](https://github.com/ydb-platform/ydb-embedded-ui/commit/12d4fefde7a6663bb1a11f46b4e94fb24b23e966))
+* rename flag for display metrics cards for database diagnostics ([#536](https://github.com/ydb-platform/ydb-embedded-ui/issues/536)) ([957e1fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/957e1fafbbc43928498ae9e8d0bc119bcda5288d))
+
+## [4.17.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.16.2...v4.17.0) (2023-09-18)
+
+
+### Features
+
+* add sorting of issues in issues tree ([#532](https://github.com/ydb-platform/ydb-embedded-ui/issues/532)) ([9f7837c](https://github.com/ydb-platform/ydb-embedded-ui/commit/9f7837c95bd1132dd287011e1aadc96c0819b40d))
+* move healthcheck to tabs ([#531](https://github.com/ydb-platform/ydb-embedded-ui/issues/531)) ([1879d3d](https://github.com/ydb-platform/ydb-embedded-ui/commit/1879d3d8f717a0baaec0d506ad354d81a226fa62))
+* update TenantOverview design ([#527](https://github.com/ydb-platform/ydb-embedded-ui/issues/527)) ([8a752e0](https://github.com/ydb-platform/ydb-embedded-ui/commit/8a752e0def3dc4317fd18519aed210bdc23fefa2))
+
+
+### Bug Fixes
+
+* fix Healthcheck blinking ([#528](https://github.com/ydb-platform/ydb-embedded-ui/issues/528)) ([0fc6c46](https://github.com/ydb-platform/ydb-embedded-ui/commit/0fc6c46eb15aeb73a984ba2c2cbe18ef7116382e))
+* **Tenants:** use blob storage ([#530](https://github.com/ydb-platform/ydb-embedded-ui/issues/530)) ([8a546a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/8a546a1ab2f812acc1523c1c35738f4c605c32a5))
+
 ## [4.16.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.16.1...v4.16.2) (2023-08-28)
 
 

package/dist/components/CircularProgressBar/CircularProgressBar.scss

@@ -0,0 +1,42 @@
+.ydb-circular-progress-bar {
+    display: block;
+
+    max-width: 100%;
+
+    transform: rotate(90deg);
+
+    &__wrapper {
+        position: relative;
+    }
+    &__content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        overflow: hidden;
+
+        max-width: 100%;
+
+        transform: translate(-50%, -50%);
+    }
+
+    &__circle-bg {
+        stroke: var(--yc-color-base-simple-hover);
+
+        fill: none;
+    }
+
+    &__circle {
+        fill: none;
+
+        &_status_good {
+            stroke: var(--yc-color-private-green-550);
+        }
+        &_status_warning {
+            stroke: var(--yc-color-private-yellow-550);
+        }
+        &_status_danger {
+            stroke: var(--yc-color-private-red-550);
+        }
+    }
+}

package/dist/components/CircularProgressBar/CircularProgressBar.tsx

@@ -0,0 +1,59 @@
+import cn from 'bem-cn-lite';
+import type {ReactNode} from 'react';
+
+import type {MetricStatus} from '../../store/reducers/tenants/types';
+import {normalizeProgress} from '../../store/reducers/tenants/utils';
+
+import './CircularProgressBar.scss';
+
+const b = cn('ydb-circular-progress-bar');
+
+interface CircularProgressBarProps {
+    size?: number;
+    progress?: number;
+    strokeWidth?: number;
+    content?: ReactNode;
+    status?: MetricStatus;
+    circleBgClassName?: string;
+}
+
+export function CircularProgressBar({
+    size = 100,
+    progress = 0,
+    strokeWidth = 10,
+    content,
+    status,
+    circleBgClassName,
+}: CircularProgressBarProps) {
+    const center = size / 2;
+
+    const radius = size / 2 - strokeWidth / 2;
+    const circumference = 2 * Math.PI * radius;
+
+    const normalizedProgress = normalizeProgress(progress);
+
+    const offset = ((100 - normalizedProgress) / 100) * circumference;
+    return (
+        <div className={b('wrapper')}>
+            {content && <div className={b('content')}>{content}</div>}
+            <svg className={b()} width={size} height={size}>
+                <circle
+                    className={b('circle-bg', circleBgClassName)}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                />
+                <circle
+                    className={b('circle', {status: status?.toLocaleLowerCase()})}
+                    cx={center}
+                    cy={center}
+                    r={radius}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={circumference}
+                    strokeDashoffset={offset}
+                />
+            </svg>
+        </div>
+    );
+}

package/dist/components/DiagnosticCard/DiagnosticCard.scss

@@ -1,5 +1,22 @@
-.diagnostic-card {
-    min-width: 200px;
-    max-width: 350px;
+.ydb-diagnostic-card {
+    flex-shrink: 0;
+
+    width: 206px;
     padding: 16px;
+    padding-bottom: 28px;
+
+    border: 1px solid var(--yc-color-line-generic);
+    border-radius: 8px;
+    background-color: transparent;
+
+    &_active {
+        border-color: var(--yc-color-base-info-heavy);
+        background-color: var(--yc-color-base-selection);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow);
+    }
 }

package/dist/components/DiagnosticCard/DiagnosticCard.tsx

@@ -1,17 +1,16 @@
-import {ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Card} from '@gravity-ui/uikit';
-
 import './DiagnosticCard.scss';
 
-const b = cn('diagnostic-card');
+const b = cn('ydb-diagnostic-card');
 
 interface DiagnosticCardProps {
     children?: ReactNode;
     className?: string;
+    active?: boolean;
 }
 
-export function DiagnosticCard({children, className}: DiagnosticCardProps) {
-    return <Card className={b(null, className)}>{children}</Card>;
+export function DiagnosticCard({children, className, active}: DiagnosticCardProps) {
+    return <div className={b({active}, className)}>{children}</div>;
 }

package/dist/components/FullNodeViewer/FullNodeViewer.tsx

@@ -3,10 +3,10 @@ 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 {calcUptime} from '../../utils/dataFormatters/dataFormatters';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import './FullNodeViewer.scss';

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

@@ -1,5 +1,5 @@
 import type {TDirEntry} from '../../../types/api/schema';
-import {formatDateTime} from '../../../utils';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
 
 import {createInfoFormatter} from '../utils';
 

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

@@ -4,7 +4,7 @@ import {
     TPQPartitionConfig,
     TPQTabletConfig,
 } from '../../../types/api/schema';
-import {formatBps, formatBytes, formatNumber} from '../../../utils';
+import {formatBps, formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 
 import {createInfoFormatter} from '../utils';

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

@@ -1,6 +1,11 @@
 import type {TFollowerGroup, TPartitionConfig, TTableStats} from '../../../types/api/schema';
 import type {TMetrics} from '../../../types/api/tenant';
-import {formatCPU, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {
+    formatBps,
+    formatCPU,
+    formatDateTime,
+    formatNumber,
+} from '../../../utils/dataFormatters/dataFormatters';
 import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';

package/dist/components/ProgressViewer/ProgressViewer.tsx

@@ -0,0 +1,99 @@
+import cn from 'bem-cn-lite';
+
+import type {ValueOf} from '../../types/common';
+
+import './ProgressViewer.scss';
+
+const b = cn('progress-viewer');
+
+export const PROGRESS_VIEWER_SIZE_IDS = {
+    xs: 'xs',
+    s: 's',
+    ns: 'ns',
+    m: 'm',
+    n: 'n',
+    l: 'l',
+    head: 'head',
+} as const;
+
+type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
+
+/*
+
+Props description:
+1) value - the amount of progress
+2) capacity - maximum possible progress value
+3) formatValues - function for formatting the value and capacity
+4) percents - display progress in percents
+5) colorizeProgress - change the color of the progress bar depending on its value
+6) inverseColorize - invert the colors of the progress bar
+7) warningThreshold - the percentage of fullness at which the color of the progress bar changes to yellow
+8) dangerThreshold - the percentage of fullness at which the color of the progress bar changes to red
+*/
+
+interface ProgressViewerProps {
+    value?: number | string;
+    capacity?: number | string;
+    formatValues?: (value?: number, capacity?: number) => (string | undefined)[];
+    percents?: boolean;
+    className?: string;
+    size?: ProgressViewerSize;
+    colorizeProgress?: boolean;
+    inverseColorize?: boolean;
+    warningThreshold?: number;
+    dangerThreshold?: number;
+}
+
+export function ProgressViewer({
+    value,
+    capacity = 100,
+    formatValues,
+    percents,
+    className,
+    size = PROGRESS_VIEWER_SIZE_IDS.xs,
+    colorizeProgress,
+    inverseColorize,
+    warningThreshold = 60,
+    dangerThreshold = 80,
+}: ProgressViewerProps) {
+    let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100);
+    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+    let valueText: number | string | undefined = Math.round(Number(value)),
+        capacityText: number | string | undefined = capacity,
+        divider = '/';
+    if (formatValues) {
+        [valueText, capacityText] = formatValues(Number(value), Number(capacity));
+    } else if (percents) {
+        valueText = fillWidth + '%';
+        capacityText = '';
+        divider = '';
+    }
+
+    let bg = inverseColorize ? 'scarlet' : 'apple';
+    if (colorizeProgress) {
+        if (fillWidth > warningThreshold && fillWidth <= dangerThreshold) {
+            bg = 'saffron';
+        } else if (fillWidth > dangerThreshold) {
+            bg = inverseColorize ? 'apple' : 'scarlet';
+        }
+    }
+
+    const lineStyle = {
+        width: fillWidth + '%',
+    };
+
+    const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
+
+    if (!isNaN(fillWidth)) {
+        return (
+            <div className={b({size}, className)}>
+                <div className={b('line', {bg})} style={lineStyle}></div>
+                <span
+                    className={b('text', {text})}
+                >{`${valueText} ${divider} ${capacityText}`}</span>
+            </div>
+        );
+    }
+
+    return <div className={`${b({size})} ${className} error`}>no data</div>;
+}

package/dist/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx

@@ -1,6 +1,6 @@
 import type {TTabletStateInfo} from '../../../types/api/tablet';
 
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
 
 const formatTablet = createInfoFormatter<TTabletStateInfo>({

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -50,7 +50,9 @@ function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
     const history = useHistory();
 
     const handleLoginClick = () => {
-        history.push(createHref(routes.auth, undefined, {returnUrl: encodeURI(location.href)}));
+        history.push(
+            createHref(routes.auth, undefined, {returnUrl: encodeURIComponent(location.href)}),
+        );
     };
 
     return (

package/dist/containers/Authentication/Authentication.tsx

@@ -1,12 +1,13 @@
 import {KeyboardEvent, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useHistory, useLocation} from 'react-router';
 import cn from 'bem-cn-lite';
 
 import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
 
 import {authenticate} from '../../store/reducers/authentication/authentication';
 import {useTypedSelector} from '../../utils/hooks';
+import {parseQuery} from '../../routes';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import showIcon from '../../assets/icons/show.svg';
@@ -18,13 +19,15 @@ import './Authentication.scss';
 const b = cn('authentication');
 
 interface AuthenticationProps {
-    returnUrl?: string;
     closable?: boolean;
 }
 
-function Authentication({returnUrl, closable = false}: AuthenticationProps) {
+function Authentication({closable = false}: AuthenticationProps) {
     const dispatch = useDispatch();
     const history = useHistory();
+    const location = useLocation();
+
+    const {returnUrl} = parseQuery(location);
 
     const {error} = useTypedSelector((state) => state.authentication);
 
@@ -58,7 +61,14 @@ function Authentication({returnUrl, closable = false}: AuthenticationProps) {
         // typed dispatch required, remove error expectation after adding it
         dispatch(authenticate(login, pass)).then(() => {
             if (returnUrl) {
-                history.replace(decodeURI(returnUrl));
+                const decodedUrl = decodeURIComponent(returnUrl.toString());
+
+                // to prevent page reload we use router history
+                // history navigates relative to origin
+                // so we remove origin to make it work properly
+                const url = new URL(decodedUrl);
+                const path = url.pathname + url.search;
+                history.replace(path);
             }
         });
     };

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

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 import {Skeleton} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import InfoViewer, {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {Tags} from '../../../components/Tags';
 import {Tablet} from '../../../components/Tablet';
@@ -16,7 +16,7 @@ import type {AdditionalClusterProps, ClusterLink} from '../../../types/additiona
 import type {VersionValue} from '../../../types/versions';
 import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
-import {formatStorageValues} from '../../../utils';
+import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
 import {
     CLUSTER_DEFAULT_TITLE,

package/dist/containers/Heatmap/Heatmap.tsx

@@ -7,7 +7,7 @@ import {Checkbox, Select} from '@gravity-ui/uikit';
 import type {IHeatmapMetricValue} from '../../types/store/heatmap';
 import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
-import {formatNumber} from '../../utils';
+import {formatNumber} from '../../utils/dataFormatters/dataFormatters';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 import {Loader} from '../../components/Loader';

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
 import {getColorRange, getCurrentMetricLimits} from '../util';
-import {formatNumber} from '../../../utils';
+import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
 
 import './Histogram.scss';
 

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -8,12 +8,12 @@ import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
 
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {Icon} from '../../../components/Icon';
 import {Vdisk} from './Vdisk';
 
 import {bytesToGB, pad9} from '../../../utils/utils';
-import {formatStorageValuesToGb} from '../../../utils';
+import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';

package/dist/containers/Node/NodeStructure/Vdisk.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
-import {formatStorageValuesToGb, stringifyVdiskId} from '../../../utils';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import {
+    formatStorageValuesToGb,
+    stringifyVdiskId,
+} from '../../../utils/dataFormatters/dataFormatters';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {valueIsDefined} from './NodeStructure';

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -2,12 +2,12 @@ import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Popover} from '@gravity-ui/uikit';
 
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
-import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
 
 import {isSortableNodesProperty} from '../../utils/nodes';
-import {formatBytesToGigabyte} from '../../utils/index';
+import {formatBytesToGigabyte} from '../../utils/dataFormatters/dataFormatters';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -7,7 +7,7 @@ import {Stack} from '../../../components/Stack/Stack';
 import routes, {createHref} from '../../../routes';
 import {selectVDisksForPDisk} from '../../../store/reducers/storage/selectors';
 import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
 import {isFullVDiskData} from '../../../utils/storage';

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -9,7 +9,7 @@ import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
 import {TPDiskStateInfo} from '../../../types/api/pdisk';
-import {getPDiskId} from '../../../utils';
+import {getPDiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 import {bytesToGB} from '../../../utils/utils';
 

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

@@ -10,7 +10,7 @@ import type {HandleSort} from '../../../utils/hooks/useTableSort';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {getUsage, isFullVDiskData, isSortableStorageProperty} from '../../../utils/storage';
 
 import shieldIcon from '../../../assets/icons/shield.svg';

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -8,7 +8,7 @@ import {InternalLink} from '../../../components/InternalLink';
 import routes, {createHref} from '../../../routes';
 import {EFlag} from '../../../types/api/enums';
 import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {isFullVDiskData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -9,7 +9,7 @@ import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
 import type {TVDiskStateInfo} from '../../../types/api/vdisk';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {isFullVDiskData} from '../../../utils/storage';
 

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

@@ -5,7 +5,7 @@ import {Link as UIKitLink} from '@gravity-ui/uikit';
 import {ETabletState, TTabletStateInfo} from '../../../types/api/tablet';
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 import routes, {createHref} from '../../../routes';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
 import {b} from '../Tablet';

package/dist/containers/Tablet/TabletTable/TabletTable.tsx

@@ -4,7 +4,7 @@ import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../components/InternalLink/InternalLink';
 
 import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
 import {b} from '../Tablet';

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import type {IPreparedTopicStats} from '../../../../../types/store/topic';
-import {formatMsToUptime} from '../../../../../utils';
+import {formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 
 import './ConsumersTopicStats.scss';

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

@@ -6,7 +6,7 @@ import type {IPreparedConsumerData} from '../../../../../types/store/topic';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {InternalLink} from '../../../../../components/InternalLink';
-import {formatMsToUptime} from '../../../../../utils';
+import {formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
 import routes, {createHref} from '../../../../../routes';
 
 import {TenantTabsGroups} from '../../../TenantPages';

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

@@ -1,6 +1,3 @@
-$section-title-margin: 20px;
-$section-title-line-height: 24px;
-
 .kv-detailed-overview {
     display: flex;
 
@@ -10,8 +7,7 @@ $section-title-line-height: 24px;
 
     &__section {
         display: flex;
-        overflow-x: hidden;
-        flex: 0 0 calc(50% - 10px);
+        flex: 1 0 calc(50% - 10px);
         flex-direction: column;
 
         min-width: 300px;