ydb-embedded-ui 4.20.0 → 4.20.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [4.20.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.20.1...v4.20.2) (2023-10-25)
+
+
+### Bug Fixes
+
+* fix diagnostics top queries width ([#574](https://github.com/ydb-platform/ydb-embedded-ui/issues/574)) ([afa17f2](https://github.com/ydb-platform/ydb-embedded-ui/commit/afa17f236331692167a0a37936b090a8baa772df))
+* fix sticky storage info ([#573](https://github.com/ydb-platform/ydb-embedded-ui/issues/573)) ([4b923d1](https://github.com/ydb-platform/ydb-embedded-ui/commit/4b923d1db73c53c63e95f43487127b4c2c1e4cac))
+* use UsageLabel in top groups by usage table ([#572](https://github.com/ydb-platform/ydb-embedded-ui/issues/572)) ([752888d](https://github.com/ydb-platform/ydb-embedded-ui/commit/752888d26ac2cab75307011fb1354830b1cb6db6))
+
+## [4.20.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.20.0...v4.20.1) (2023-10-24)
+
+
+### Bug Fixes
+
+* fix createExternalUILink ([#571](https://github.com/ydb-platform/ydb-embedded-ui/issues/571)) ([52546f1](https://github.com/ydb-platform/ydb-embedded-ui/commit/52546f17dbfdb255b2429836e880d6812b19d66a))
+* fix incorrect truncate strings with popover ([#567](https://github.com/ydb-platform/ydb-embedded-ui/issues/567)) ([d82e65b](https://github.com/ydb-platform/ydb-embedded-ui/commit/d82e65b925b76dc539a76520eccf601951654e94))
+* fix top queries table row height ([#565](https://github.com/ydb-platform/ydb-embedded-ui/issues/565)) ([b12dceb](https://github.com/ydb-platform/ydb-embedded-ui/commit/b12dcebdb0167fd5852c247bca48844ef6ab35af))
+* refactor metrics storage section ([#568](https://github.com/ydb-platform/ydb-embedded-ui/issues/568)) ([db5d922](https://github.com/ydb-platform/ydb-embedded-ui/commit/db5d922d06b88c9d8a792220d2a178c81806c09e))
+* update @types/react ([#570](https://github.com/ydb-platform/ydb-embedded-ui/issues/570)) ([1e38c5b](https://github.com/ydb-platform/ydb-embedded-ui/commit/1e38c5bb3b4b2139b2141636d6434c2a2ec65772))
+
 ## [4.20.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.3...v4.20.0) (2023-10-19)
 
 

package/dist/components/CellWithPopover/CellWithPopover.scss

@@ -0,0 +1,13 @@
+.ydb-cell-with-popover {
+    display: flex;
+
+    &__popover {
+        display: inline-block;
+        overflow: hidden;
+
+        max-width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}

package/dist/components/CellWithPopover/CellWithPopover.tsx

@@ -0,0 +1,26 @@
+import cn from 'bem-cn-lite';
+
+import {Popover, type PopoverProps} from '@gravity-ui/uikit';
+
+import './CellWithPopover.scss';
+
+const b = cn('ydb-cell-with-popover');
+
+interface CellWithPopoverProps extends PopoverProps {
+    wrapperClassName?: string;
+}
+
+export function CellWithPopover({
+    children,
+    className,
+    wrapperClassName,
+    ...props
+}: CellWithPopoverProps) {
+    return (
+        <div className={b(null, wrapperClassName)}>
+            <Popover className={b('popover', className)} {...props}>
+                {children}
+            </Popover>
+        </div>
+    );
+}

package/dist/components/NodeHostWrapper/NodeHostWrapper.scss

@@ -1,6 +1,4 @@
 .ydb-node-host-wrapper {
-    display: flex;
-
     &__host-wrapper {
         display: flex;
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -1,6 +1,6 @@
 import block from 'bem-cn-lite';
 
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Button, PopoverBehavior} from '@gravity-ui/uikit';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {NodeAddress} from '../../types/additionalProps';
@@ -10,6 +10,7 @@ import {isUnavailableNode} from '../../utils/nodes';
 import EntityStatus from '../EntityStatus/EntityStatus';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 import {IconWrapper} from '../Icon';
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
 
 import './NodeHostWrapper.scss';
 
@@ -34,33 +35,31 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
         : undefined;
 
     return (
-        <div className={b()}>
-            <Popover
-                disabled={!isNodeAvailable}
-                content={<NodeEndpointsTooltipContent data={node} />}
-                placement={['top', 'bottom']}
-                behavior={PopoverBehavior.Immediate}
-            >
-                <div className={b('host-wrapper')}>
-                    <EntityStatus
-                        name={node.Host}
-                        status={node.SystemState}
-                        path={nodePath}
-                        hasClipboardButton
-                        className={b('host')}
-                    />
-                    {nodeRef && (
-                        <Button
-                            size="s"
-                            href={nodeRef}
-                            className={b('external-button')}
-                            target="_blank"
-                        >
-                            <IconWrapper name="external" />
-                        </Button>
-                    )}
-                </div>
-            </Popover>
-        </div>
+        <CellWithPopover
+            disabled={!isNodeAvailable}
+            content={<NodeEndpointsTooltipContent data={node} />}
+            placement={['top', 'bottom']}
+            behavior={PopoverBehavior.Immediate}
+        >
+            <div className={b('host-wrapper')}>
+                <EntityStatus
+                    name={node.Host}
+                    status={node.SystemState}
+                    path={nodePath}
+                    hasClipboardButton
+                    className={b('host')}
+                />
+                {nodeRef && (
+                    <Button
+                        size="s"
+                        href={nodeRef}
+                        className={b('external-button')}
+                        target="_blank"
+                    >
+                        <IconWrapper name="external" />
+                    </Button>
+                )}
+            </div>
+        </CellWithPopover>
     );
 };

package/dist/components/TruncatedQuery/TruncatedQuery.scss

@@ -14,4 +14,12 @@
             }
         }
     }
+
+    &__popover-content {
+        overflow: hidden;
+
+        max-width: 600px;
+
+        white-space: pre;
+    }
 }

package/dist/components/TruncatedQuery/TruncatedQuery.tsx

@@ -1,11 +1,13 @@
 import cn from 'bem-cn-lite';
 
+import {CellWithPopover} from '../CellWithPopover/CellWithPopover';
+
 import './TruncatedQuery.scss';
 
 const b = cn('kv-truncated-query');
 
 interface TruncatedQueryProps {
-    value: string | undefined;
+    value?: string;
     maxQueryHeight?: number;
 }
 
@@ -26,3 +28,15 @@ export const TruncatedQuery = ({value = '', maxQueryHeight = 6}: TruncatedQueryP
     }
     return <>{value}</>;
 };
+
+interface OneLineQueryWithPopoverProps {
+    value?: string;
+}
+
+export const OneLineQueryWithPopover = ({value = ''}: OneLineQueryWithPopoverProps) => {
+    return (
+        <CellWithPopover contentClassName={b('popover-content')} content={value}>
+            {value}
+        </CellWithPopover>
+    );
+};

package/dist/components/UsageLabel/UsageLabel.tsx

@@ -2,6 +2,8 @@ import cn from 'bem-cn-lite';
 
 import {Label, type LabelProps} from '@gravity-ui/uikit';
 
+import './UsageLabel.scss';
+
 const b = cn('ydb-usage-label');
 
 interface UsageLabelProps extends LabelProps {

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,5 +1,4 @@
 import DataTable, {type 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';
@@ -13,6 +12,7 @@ import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {GetNodeRefFunc} from '../../types/additionalProps';
 import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
 import {UsageLabel} from '../../components/UsageLabel/UsageLabel';
+import {CellWithPopover} from '../../components/CellWithPopover/CellWithPopover';
 
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
@@ -76,7 +76,7 @@ const versionColumn: Column<NodesPreparedEntity> = {
     width: '200px',
     align: DataTable.LEFT,
     render: ({row}) => {
-        return <Popover content={row.Version}>{row.Version}</Popover>;
+        return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
     },
     sortable: false,
 };

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -28,26 +28,9 @@
         }
     }
     &__pool-name-wrapper {
-        display: flex;
-        align-items: flex-end;
-
         width: 230px;
     }
-    &__pool-name {
-        display: inline-block;
-        overflow: hidden;
-
-        max-width: 230px;
 
-        vertical-align: top;
-        text-overflow: ellipsis;
-    }
-    &__usage-label {
-        &_overload {
-            color: var(--yc-color-text-light-primary);
-            background-color: var(--yc-color-base-danger-heavy);
-        }
-    }
     &__group-id {
         font-weight: 500;
     }

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

@@ -12,6 +12,8 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {Stack} from '../../../components/Stack/Stack';
+import {CellWithPopover} from '../../../components/CellWithPopover/CellWithPopover';
+import {UsageLabel} from '../../../components/UsageLabel/UsageLabel';
 import {VDisk} from '../VDisk';
 import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
 import i18n from './i18n';
@@ -58,17 +60,16 @@ const poolNameColumn: Column<PreparedStorageGroup> = {
     render: ({row}) => {
         const splitted = row.PoolName?.split('/');
         return (
-            <div className={b('pool-name-wrapper')}>
-                {splitted && (
-                    <Popover
-                        content={row.PoolName}
-                        placement={['right']}
-                        behavior={PopoverBehavior.Immediate}
-                    >
-                        <span className={b('pool-name')}>{splitted[splitted.length - 1]}</span>
-                    </Popover>
-                )}
-            </div>
+            splitted && (
+                <CellWithPopover
+                    wrapperClassName={b('pool-name-wrapper')}
+                    content={row.PoolName}
+                    placement={['right']}
+                    behavior={PopoverBehavior.Immediate}
+                >
+                    {splitted[splitted.length - 1]}
+                </CellWithPopover>
+            )
         );
     },
     align: DataTable.LEFT,
@@ -128,12 +129,7 @@ const usageColumn: Column<PreparedStorageGroup> = {
         // without a limit the usage can be evaluated as 0,
         // but the absence of a value is more clear
         return row.Limit ? (
-            <Label
-                theme={getUsageSeverityForStorageGroup(row.Usage)}
-                className={b('usage-label', {overload: row.Usage >= 90})}
-            >
-                {row.Usage}%
-            </Label>
+            <UsageLabel value={row.Usage} theme={getUsageSeverityForStorageGroup(row.Usage)} />
         ) : (
             '-'
         );

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.tsx

@@ -1,4 +1,3 @@
-import qs from 'qs';
 import {useDispatch} from 'react-redux';
 import {useHistory, useLocation} from 'react-router';
 import {useCallback} from 'react';
@@ -14,6 +13,7 @@ import {
 } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
 import {changeUserInput} from '../../../../../store/reducers/executeQuery';
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {parseQuery} from '../../../../../routes';
 import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {getTenantOverviewTopQueriesColumns} from '../../TopQueries/getTopQueriesColumns';
 import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -55,9 +55,7 @@ export function TopQueries({path}: TopQueriesProps) {
 
             dispatch(changeUserInput({input}));
 
-            const queryParams = qs.parse(location.search, {
-                ignoreQueryPrefix: true,
-            });
+            const queryParams = parseQuery(location);
 
             const queryPath = getTenantPath({
                 ...queryParams,

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

@@ -118,4 +118,8 @@
             cursor: pointer;
         }
     }
+
+    &__storage-info {
+        margin-bottom: 36px;
+    }
 }

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

@@ -4,11 +4,13 @@ import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
 import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
+
+import '../TenantOverview.scss';
+
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
-import './TenantStorage.scss';
 
-const b = cn('tenant-overview-storage');
+const b = cn('tenant-overview');
 
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
@@ -60,7 +62,7 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
     ];
     return (
         <>
-            <InfoViewer className={b('info')} title="Storage details" info={info} />
+            <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
             <TopTables path={tenantName} />
             <TopGroups tenant={tenantName} />
         </>

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -1,25 +1,14 @@
-import cn from 'bem-cn-lite';
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
-import DataTable from '@gravity-ui/react-data-table';
-
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
-import {
-    TENANT_OVERVIEW_TABLES_LIMIT,
-    TENANT_OVERVIEW_TABLES_SETTINGS,
-} from '../../../../../utils/constants';
 import {
     setDataWasNotLoaded,
     getTopStorageGroups,
     selectTopStorageGroups,
 } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
-import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
 import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
-import i18n from '../i18n';
-
-const b = cn('tenant-overview-storage');
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
 interface TopGroupsProps {
     tenant?: string;
@@ -47,30 +36,14 @@ export function TopGroups({tenant}: TopGroupsProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} />;
-        }
-
-        if (loading && !wasLoaded) {
-            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
-        }
-
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                data={topGroups || []}
-                columns={columns}
-                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
-                emptyDataMessage={i18n('top-groups.empty-data')}
-            />
-        );
-    };
-
     return (
-        <>
-            <div className={b('title')}>Top groups by usage</div>
-            <div className={b('table')}>{renderContent()}</div>
-        </>
+        <TenantOverviewTableLayout
+            data={topGroups || []}
+            columns={columns}
+            title="Top groups by usage"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+        />
     );
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -1,28 +1,20 @@
 import {useDispatch} from 'react-redux';
 import {useLocation} from 'react-router';
-import cn from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Popover} from '@gravity-ui/uikit';
 
 import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
 import {
     fetchTopTables,
     setDataWasNotLoaded,
 } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
-import {
-    TENANT_OVERVIEW_TABLES_LIMIT,
-    TENANT_OVERVIEW_TABLES_SETTINGS,
-} from '../../../../../utils/constants';
 import type {KeyValueRow} from '../../../../../types/api/query';
 import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
-import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
-import {ResponseError} from '../../../../../components/Errors/ResponseError';
 import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWithPopover';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
 
-import './TenantStorage.scss';
-
-const b = cn('tenant-overview-storage');
+import '../TenantOverview.scss';
 
 interface TopTablesProps {
     path: string;
@@ -72,42 +64,23 @@ export function TopTables({path}: TopTablesProps) {
             sortable: false,
             render: ({row}) =>
                 row.Path ? (
-                    <LinkToSchemaObject
-                        className={b('cell-with-popover-wrapper')}
-                        path={String(row.Path)}
-                        location={location}
-                    >
-                        <Popover className={b('cell-with-popover')} content={row.Path}>
+                    <CellWithPopover content={row.Path}>
+                        <LinkToSchemaObject path={String(row.Path)} location={location}>
                             {row.Path}
-                        </Popover>
-                    </LinkToSchemaObject>
+                        </LinkToSchemaObject>
+                    </CellWithPopover>
                 ) : null,
         },
     ];
 
-    const renderContent = () => {
-        if (error) {
-            return <ResponseError error={error} />;
-        }
-
-        if (loading && !wasLoaded) {
-            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
-        }
-
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                columns={columns}
-                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
-                data={data || []}
-            />
-        );
-    };
-
     return (
-        <>
-            <div className={b('title')}>Top tables by size</div>
-            <div className={b('table')}>{renderContent()}</div>
-        </>
+        <TenantOverviewTableLayout
+            data={data || []}
+            columns={columns}
+            title="Top tables by size"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+        />
     );
 }

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

@@ -39,6 +39,8 @@
     &__query {
         overflow: hidden;
 
+        width: 500px;
+
         vertical-align: top;
         white-space: pre-wrap;
         text-overflow: ellipsis;

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

@@ -30,6 +30,7 @@ import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
 import {parseQuery} from '../../../../routes';
 import {QUERY_TABLE_SETTINGS} from '../../utils/constants';
+import {isSortableTopQueriesProperty} from '../../../../utils/diagnostics';
 import {isColumnEntityType} from '../../utils/schema';
 import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 import {getTopQueriesColumns} from './getTopQueriesColumns';
@@ -58,7 +59,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         data: {result: data = undefined} = {},
         filters: storeFilters,
     } = useTypedSelector((state) => state.executeTopQueries);
-    const columns = getTopQueriesColumns();
+    const rawColumns = getTopQueriesColumns();
 
     const preventFetch = useRef(false);
 
@@ -71,6 +72,11 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
         dispatch(setTopQueriesFilters(filters));
     }, [dispatch, filters]);
 
+    const columns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableTopQueriesProperty(column.name),
+    }));
+
     const setDefaultFiltersFromResponse = (responseData?: IQueryResult) => {
         const intervalEnd = responseData?.result?.[0]?.IntervalEnd;
 

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

@@ -4,7 +4,11 @@ import DataTable, {type Column} from '@gravity-ui/react-data-table';
 
 import type {KeyValueRow} from '../../../../types/api/query';
 import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
-import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {generateHash} from '../../../../utils/generateHash';
+import {
+    TruncatedQuery,
+    OneLineQueryWithPopover,
+} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {MAX_QUERY_HEIGHT} from '../../utils/constants';
 
 import './TopQueries.scss';
@@ -18,6 +22,8 @@ const TOP_QUERIES_COLUMNS_IDS = {
     ReadRows: 'ReadRows',
     ReadBytes: 'ReadBytes',
     UserSID: 'UserSID',
+    OneLineQueryText: 'OneLineQueryText',
+    QueryHash: 'QueryHash',
 };
 
 const cpuTimeUsColumn: Column<KeyValueRow> = {
@@ -66,6 +72,20 @@ const userSIDColumn: Column<KeyValueRow> = {
     align: DataTable.LEFT,
 };
 
+const oneLineQueryTextColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.OneLineQueryText,
+    header: 'QueryText',
+    render: ({row}) => <OneLineQueryWithPopover value={row.QueryText?.toString()} />,
+    sortable: false,
+};
+
+const queryHashColumn: Column<KeyValueRow> = {
+    name: TOP_QUERIES_COLUMNS_IDS.QueryHash,
+    render: ({row}) => generateHash(String(row.QueryText)),
+    width: 130,
+    sortable: false,
+};
+
 export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
     return [
         cpuTimeUsColumn,
@@ -78,5 +98,5 @@ export const getTopQueriesColumns = (): Column<KeyValueRow>[] => {
 };
 
 export const getTenantOverviewTopQueriesColumns = (): Column<KeyValueRow>[] => {
-    return [queryTextColumn, cpuTimeUsColumn];
+    return [queryHashColumn, oneLineQueryTextColumn, cpuTimeUsColumn];
 };

package/dist/routes.ts

@@ -25,6 +25,23 @@ export const parseQuery = (location: Location) => {
     });
 };
 
+const prepareRoute = (route: string) => {
+    let preparedRoute = route;
+    const portRegExp = /:\d{3, 5}/g;
+    const portMatch = route.match(portRegExp);
+
+    // if port exists in route we escape port to avoid errors in function compile()
+    // compile(preparedRoute) parses prepared root by symbol ":"
+    // if we pass raw route and there is a port in route, compile()
+    // will try to parse the port and throw an error
+    if (portMatch) {
+        const port = portMatch[0];
+        preparedRoute = route.replace(portRegExp, ':\\' + port.slice(1));
+    }
+
+    return preparedRoute;
+};
+
 export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
 
 export function createHref(
@@ -46,7 +63,9 @@ export function createHref(
 
     const search = isEmpty(extendedQuery) ? '' : `?${qs.stringify(extendedQuery, {encode: false})}`;
 
-    return `${compile(route)(params)}${search}`;
+    const preparedRoute = prepareRoute(route);
+
+    return `${compile(preparedRoute)(params)}${search}`;
 }
 
 // embedded version could be located in some folder (e.g. host/some_folder/app_router_path)

package/dist/utils/diagnostics.ts

@@ -1,11 +1,23 @@
 import {ValueOf} from '../types/common';
 
-export const TOP_SHARDS_SORT_VALUES = {
+const TOP_SHARDS_SORT_VALUES = {
     CPUCores: 'CPUCores',
     DataSize: 'DataSize',
 } as const;
 
-export type TopShardsSortValue = ValueOf<typeof TOP_SHARDS_SORT_VALUES>;
+const TOP_QUERIES_SORT_VALUES = {
+    CPUTimeUs: 'CPUTimeUs',
+    EndTime: 'EndTime',
+    ReadRows: 'ReadRows',
+    ReadBytes: 'ReadBytes',
+    UserSID: 'UserSID',
+} as const;
+
+type TopShardsSortValue = ValueOf<typeof TOP_SHARDS_SORT_VALUES>;
+type TopQueriesSortValue = ValueOf<typeof TOP_QUERIES_SORT_VALUES>;
 
 export const isSortableTopShardsProperty = (value: string): value is TopShardsSortValue =>
     Object.values(TOP_SHARDS_SORT_VALUES).includes(value as TopShardsSortValue);
+
+export const isSortableTopQueriesProperty = (value: string): value is TopQueriesSortValue =>
+    Object.values(TOP_QUERIES_SORT_VALUES).includes(value as TopQueriesSortValue);

package/dist/utils/generateHash.ts

@@ -0,0 +1,11 @@
+import crc32 from 'crc-32';
+
+export const generateHash = (value: string) => {
+    // 1. crc32.str(value) - generate crc32 hash
+    // 2. (>>>) - use unsigned right shift operator (>>>) to avoid negative values
+    // 3. toString(16) - convert hash to hex format
+    // 4. toUpperCase() - convert hash to uppercase
+    // 5. padStart(8, '0') - fill hash with leading zeros if hash length < 8
+    // eslint-disable-next-line no-bitwise
+    return (crc32.str(value) >>> 0).toString(16).toUpperCase().padStart(8, '0');
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.20.0",
+  "version": "4.20.2",
   "files": [
     "dist"
   ],
@@ -15,9 +15,11 @@
     "@gravity-ui/navigation": "^0.4.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
+    "@types/react": "^17.0.58",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
     "copy-to-clipboard": "^3.3.3",
+    "crc-32": "^1.2.2",
     "history": "4.10.1",
     "js-cookie": "2.2.1",
     "lodash": "4.17.11",
@@ -117,7 +119,6 @@
     "@types/lodash": "^4.14.178",
     "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.7",
-    "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss

@@ -1,41 +0,0 @@
-@import '../../../../../styles/mixins.scss';
-
-.tenant-overview-storage {
-    &__info {
-        margin-bottom: 36px;
-    }
-
-    &__title {
-        margin-bottom: 10px;
-
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 700;
-        line-height: var(--yc-text-body-2-line-height);
-    }
-
-    &__table {
-        width: var(--diagnostics-section-table-width);
-        @include table-styles;
-
-        &:not(:last-child) {
-            margin-bottom: var(--diagnostics-section-margin);
-        }
-
-        th {
-            height: 40px;
-
-            vertical-align: middle;
-        }
-    }
-
-    &__cell-with-popover-wrapper {
-        display: flex;
-    }
-
-    &__cell-with-popover {
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-}