ydb-embedded-ui 4.17.0 → 4.19.0

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

@@ -27,7 +27,7 @@ export interface TenantMetrics {
     memoryUsed?: number;
     memoryLimit?: number;
     cpuUsed?: number;
-    cpuLimit?: number;
+    cpuUsage?: number;
     storageUsed?: number;
     storageLimit?: number;
 }
@@ -51,11 +51,10 @@ export function MetricsCards({
 }: MetricsCardsProps) {
     const location = useLocation();
 
-    const {memoryUsed, memoryLimit, cpuUsed, cpuLimit, storageUsed, storageLimit} = metrics || {};
+    const {memoryUsed, memoryLimit, cpuUsed, cpuUsage, storageUsed, storageLimit} = metrics || {};
 
     const {metricsTab} = useTypedSelector((state) => state.tenant);
 
-    const cpuUsage = calculateUsage(cpuUsed, cpuLimit);
     const storageUsage = calculateUsage(storageUsed, storageLimit);
     const memoryUsage = calculateUsage(memoryUsed, memoryLimit);
 

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

@@ -8,7 +8,7 @@ import {InfoViewer} from '../../../../components/InfoViewer';
 import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
-import {formatCPU} from '../../../../utils';
+import {formatCPU} from '../../../../utils/dataFormatters/dataFormatters';
 import {TABLET_STATES, TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {bytesToGB} from '../../../../utils/utils';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';

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

@@ -14,6 +14,7 @@ import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/ten
 import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
 import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
+import {TenantStorage} from './TenantStorage/TenantStorage';
 import {useHealthcheck} from './useHealthcheck';
 
 import i18n from './i18n';
@@ -70,16 +71,31 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
 
     const tenantType = mapDatabaseTypeToDBName(Type);
 
-    const {cpu, storage, memory, cpuLimit, storageLimit, memoryLimit} =
-        calculateTenantMetrics(tenant);
+    const {
+        cpu,
+        blobStorage,
+        tableStorage,
+        memory,
+        cpuUsage,
+        blobStorageLimit,
+        tableStorageLimit,
+        memoryLimit,
+    } = calculateTenantMetrics(tenant);
 
     const calculatedMetrics: TenantMetrics = {
         memoryUsed: memory,
         memoryLimit,
         cpuUsed: cpu,
-        cpuLimit,
-        storageUsed: storage,
-        storageLimit,
+        cpuUsage,
+        storageUsed: blobStorage,
+        storageLimit: blobStorageLimit,
+    };
+
+    const storageMetrics = {
+        blobStorageUsed: blobStorage,
+        blobStorageLimit,
+        tableStorageUsed: tableStorage,
+        tableStorageLimit,
     };
 
     const renderName = () => {
@@ -102,7 +118,7 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
                 return i18n('label.under-development');
             }
             case TENANT_METRICS_TABS_IDS.storage: {
-                return i18n('label.under-development');
+                return <TenantStorage tenantName={tenantName} metrics={storageMetrics} />;
             }
             case TENANT_METRICS_TABS_IDS.memory: {
                 return i18n('label.under-development');

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

@@ -0,0 +1,41 @@
+@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;
+    }
+}

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

@@ -0,0 +1,68 @@
+import cn from 'bem-cn-lite';
+
+import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
+import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
+import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
+import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
+import {TopTables} from './TopTables';
+import {TopGroups} from './TopGroups';
+import './TenantStorage.scss';
+
+const b = cn('tenant-overview-storage');
+
+export interface TenantStorageMetrics {
+    blobStorageUsed?: number;
+    blobStorageLimit?: number;
+    tableStorageUsed?: number;
+    tableStorageLimit?: number;
+}
+
+interface TenantStorageProps {
+    tenantName: string;
+    metrics: TenantStorageMetrics;
+}
+
+export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
+    const {blobStorageUsed, tableStorageUsed, blobStorageLimit, tableStorageLimit} = metrics;
+    const formatValues = (value?: number, total?: number) => {
+        const size = getSizeWithSignificantDigits(Number(blobStorageLimit || blobStorageUsed), 0);
+
+        return formatStorageValues(value, total, size);
+    };
+
+    const info = [
+        {
+            label: 'Database storage',
+            value: (
+                <ProgressViewer
+                    value={blobStorageUsed}
+                    capacity={blobStorageLimit}
+                    formatValues={formatValues}
+                    colorizeProgress={true}
+                    warningThreshold={75}
+                    dangerThreshold={85}
+                />
+            ),
+        },
+        {
+            label: 'Table storage',
+            value: (
+                <ProgressViewer
+                    value={tableStorageUsed}
+                    capacity={tableStorageLimit}
+                    formatValues={formatValues}
+                    colorizeProgress={true}
+                    warningThreshold={75}
+                    dangerThreshold={85}
+                />
+            ),
+        },
+    ];
+    return (
+        <>
+            <InfoViewer className={b('info')} title="Storage details" info={info} />
+            <TopTables path={tenantName} />
+            <TopGroups tenant={tenantName} />
+        </>
+    );
+}

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

@@ -0,0 +1,76 @@
+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');
+
+interface TopGroupsProps {
+    tenant?: string;
+}
+
+export function TopGroups({tenant}: TopGroupsProps) {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {loading, wasLoaded, error} = useTypedSelector((state) => state.topStorageGroups);
+    const topGroups = useTypedSelector(selectTopStorageGroups);
+
+    const columns = getStorageTopGroupsColumns();
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getTopStorageGroups({tenant}));
+        },
+        [dispatch, tenant],
+    );
+
+    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>
+        </>
+    );
+}

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

@@ -0,0 +1,105 @@
+import {useDispatch} from 'react-redux';
+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 './TenantStorage.scss';
+
+const b = cn('tenant-overview-storage');
+
+interface TopTablesProps {
+    path: string;
+}
+
+export function TopTables({path}: TopTablesProps) {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        wasLoaded,
+        error,
+        data: {result: data = undefined} = {},
+    } = useTypedSelector((state) => state.executeTopTables);
+
+    useAutofetcher(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(fetchTopTables(path));
+        },
+        [dispatch, path],
+        autorefresh,
+    );
+
+    const formatSize = (value?: number) => {
+        const size = getSizeWithSignificantDigits(data?.length ? Number(data[0].Size) : 0, 0);
+
+        return formatBytes({value, size, precision: 1});
+    };
+
+    const columns: Column<KeyValueRow>[] = [
+        {
+            name: 'Size',
+            width: 80,
+            sortable: false,
+            render: ({row}) => formatSize(Number(row.Size)),
+            align: DataTable.RIGHT,
+        },
+        {
+            name: 'Path',
+            sortable: false,
+            render: ({row}) => (
+                <div className={b('cell-with-popover-wrapper')}>
+                    <Popover className={b('cell-with-popover')} content={row.Path}>
+                        {row.Path}
+                    </Popover>
+                </div>
+            ),
+        },
+    ];
+
+    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>
+        </>
+    );
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -5,5 +5,7 @@
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
+  "top-groups.empty-data": "No such groups",
+
   "label.under-development": "This section is under development"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -5,5 +5,7 @@
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
+  "top-groups.empty-data": "Нет групп",
+
   "label.under-development": "Этот раздел находится в разработке"
 }

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

@@ -28,7 +28,7 @@ import {
     TENANT_PAGES_IDS,
     TENANT_QUERY_TABS_ID,
 } from '../../../../store/reducers/tenant/constants';
-import {formatDateTime, formatNumber} from '../../../../utils';
+import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';

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

@@ -22,7 +22,7 @@ import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/sto
 import type {EPathType} from '../../../../types/api/schema';
 import type {CellValue, KeyValueRow} from '../../../../types/api/query';
 
-import {formatDateTime, formatNumber} from '../../../../utils';
+import {formatDateTime, formatNumber} from '../../../../utils/dataFormatters/dataFormatters';
 import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -24,7 +24,7 @@ import {
     TColumnTableDescription,
 } from '../../../types/api/schema';
 import routes, {createHref} from '../../../routes';
-import {formatDateTime} from '../../../utils';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
 import {useTypedSelector} from '../../../utils/hooks';
 import {
     DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,

package/dist/containers/Tenants/Tenants.tsx

@@ -26,7 +26,11 @@ import {
     ProblemFilterValues,
     selectProblemFilter,
 } from '../../store/reducers/settings/settings';
-import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
+import {
+    formatBytesToGigabyte,
+    formatCPU,
+    formatNumber,
+} from '../../utils/dataFormatters/dataFormatters';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import {clusterName} from '../../store';

package/dist/containers/UserSettings/i18n/en.json

@@ -25,6 +25,6 @@
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
   "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",
 
-  "settings.tenantDiagnostics.title": "Enable new database diagnostics design",
+  "settings.tenantDiagnostics.title": "Display metrics cards for database diagnostics",
   "settings.tenantDiagnostics.popover": "Adds indicators of database resources usage. Incomplete data may be displayed for some databases"
 }

package/dist/containers/UserSettings/i18n/ru.json

@@ -25,6 +25,6 @@
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
   "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",
 
-  "settings.tenantDiagnostics.title": "Включить новый дизайн для диагностики баз данных",
+  "settings.tenantDiagnostics.title": "Показывать карточки с метриками в диагностике базы данных",
   "settings.tenantDiagnostics.popover": "Добавляет индикаторы использования ресурсов базы данных. Для некоторых баз могут отображаться неполные данные"
 }

package/dist/containers/UserSettings/settings.ts

@@ -5,7 +5,7 @@ import flaskIcon from '../../assets/icons/flask.svg';
 
 import {
     ENABLE_ADDITIONAL_QUERY_MODES,
-    ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     INVERTED_DISKS_KEY,
     LANGUAGE_KEY,
     THEME_KEY,
@@ -96,7 +96,7 @@ export const enableQueryModesForExplainSetting: SettingProps = {
     helpPopoverContent: i18n('settings.enableAdditionalQueryModes.popover'),
 };
 export const enableNewTenantDiagnosticsDesign: SettingProps = {
-    settingKey: ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+    settingKey: DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
     title: i18n('settings.tenantDiagnostics.title'),
     helpPopoverContent: i18n('settings.tenantDiagnostics.popover'),
 };

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -3,10 +3,10 @@ import DataTable, {Column} from '@gravity-ui/react-data-table';
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
 import {isUnavailableNode} from '../../../utils/nodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
-import {formatBytes} from '../../../utils';
+import {formatBytes} from '../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 
@@ -94,6 +94,7 @@ const columns: Column<PreparedClusterNode>[] = [
                 <ProgressViewer
                     value={row.LoadAverage[0]}
                     percents={true}
+                    capacity={100}
                     colorizeProgress={true}
                 />
             ) : (

package/dist/services/api.ts

@@ -352,7 +352,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     }
     getHealthcheckInfo(database: string, {concurrentId}: AxiosOptions = {}) {
         return this.get<HealthCheckAPIResponse>(
-            this.getPath('/viewer/json/healthcheck'),
+            this.getPath('/viewer/json/healthcheck?merge_records=true'),
             {tenant: database},
             {concurrentId},
         );

package/dist/store/reducers/clusterNodes/clusterNodes.tsx

@@ -5,7 +5,7 @@ import {createRequestActionTypes, createApiRequest} from '../../utils';
 import type {ClusterNodesAction, ClusterNodesState, PreparedClusterNode} from './types';
 
 import '../../../services/api';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 
 export const FETCH_CLUSTER_NODES = createRequestActionTypes('cluster', 'FETCH_CLUSTER_NODES');
 

package/dist/store/reducers/index.ts

@@ -5,6 +5,7 @@ import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
 import storage from './storage/storage';
+import topStorageGroups from './tenantOverview/topStorageGroups/topStorageGroups';
 import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';
@@ -26,6 +27,7 @@ import nodesList from './nodesList';
 import describe from './describe';
 import schemaAcl from './schemaAcl/schemaAcl';
 import executeTopQueries from './executeTopQueries';
+import executeTopTables from './tenantOverview/executeTopTables/executeTopTables';
 import healthcheckInfo from './healthcheckInfo';
 import shardsWorkload from './shardsWorkload';
 import hotKeys from './hotKeys';
@@ -43,6 +45,7 @@ export const rootReducer = {
     clusterNodes,
     tenant,
     storage,
+    topStorageGroups,
     node,
     tooltip,
     tablets,
@@ -65,6 +68,7 @@ export const rootReducer = {
     describe,
     schemaAcl,
     executeTopQueries,
+    executeTopTables,
     healthcheckInfo,
     shardsWorkload,
     hotKeys,

package/dist/store/reducers/node/selectors.ts

@@ -1,7 +1,7 @@
 import type {Selector} from 'reselect';
 import {createSelector} from 'reselect';
 
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 
 import type {
     NodeStateSlice,

package/dist/store/reducers/nodes/selectors.ts

@@ -1,7 +1,7 @@
 import {Selector, createSelector} from 'reselect';
 
 import {EFlag} from '../../../types/api/enums';
-import {calcUptimeInSeconds} from '../../../utils';
+import {calcUptimeInSeconds} from '../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {prepareSearchValue} from '../../../utils/filters';

package/dist/store/reducers/nodes/types.ts

@@ -64,7 +64,7 @@ export interface NodesGeneralRequestParams extends NodesSortParams {
     uptime?: number; // return nodes with less uptime in seconds
     problems_only?: boolean; // return nodes with SystemState !== EFlag.Green
 
-    offser?: number;
+    offset?: number;
     limit?: number;
 }
 

package/dist/store/reducers/nodes/utils.ts

@@ -1,6 +1,6 @@
 import type {TComputeInfo, TComputeNodeInfo} from '../../../types/api/compute';
 import type {TNodesInfo} from '../../../types/api/nodes';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 
 import type {NodesHandledResponse, NodesPreparedEntity} from './types';
 

package/dist/store/reducers/settings/settings.ts

@@ -15,7 +15,7 @@ import {
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     LANGUAGE_KEY,
-    ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+    DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
 } from '../../../utils/constants';
 import '../../../services/api';
 import {parseJson} from '../../../utils/utils';
@@ -50,14 +50,14 @@ export const initialState = {
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-            'false',
+            'true',
         ),
         [ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
             ENABLE_ADDITIONAL_QUERY_MODES,
             'false',
         ),
-        [ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN]: readSavedSettingsValue(
-            ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN,
+        [DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS]: readSavedSettingsValue(
+            DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
             'false',
         ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),

package/dist/store/reducers/storage/types.ts

@@ -63,7 +63,7 @@ export interface StorageSortParams {
 export interface StorageSortAndFilterParams extends StorageSortParams {
     filter?: string; // PoolName or GroupId
 
-    offser?: number;
+    offset?: number;
     limit?: number;
 }