ydb-embedded-ui 6.8.0 → 6.9.0

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, useLocation } from 'react-router-dom';
+import { parseQuery } from '../../../../../routes';
+import { TENANT_METRICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { METRIC_STATUS, MetricStatusToSeverity, } from '../../../../../store/reducers/tenants/contants';
+import { TENANT_CPU_DANGER_TRESHOLD, TENANT_CPU_WARNING_TRESHOLD, TENANT_MEMORY_DANGER_TRESHOLD, TENANT_MEMORY_WARNING_TRESHOLD, TENANT_STORAGE_DANGER_TRESHOLD, TENANT_STORAGE_WARNING_TRESHOLD, cpuUsageToStatus, memoryUsageToStatus, storageUsageToStatus, } from '../../../../../store/reducers/tenants/utils';
+import { cn } from '../../../../../utils/cn';
+import { formatStorageValues } from '../../../../../utils/dataFormatters/dataFormatters';
+import { useTypedSelector } from '../../../../../utils/hooks';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { HealthcheckPreview } from '../Healthcheck/HealthcheckPreview';
+import i18n from '../i18n';
+import { MetricCard } from './MetricCard/MetricCard';
+import './MetricsCards.scss';
+const b = cn('metrics-cards');
+export function MetricsCards({ poolsCpuStats, memoryStats, blobStorageStats, tabletStorageStats, tenantName, }) {
+    const location = useLocation();
+    const { metricsTab } = useTypedSelector((state) => state.tenant);
+    const queryParams = parseQuery(location);
+    // Allow tabs untoggle behaviour
+    const getTabIfNotActive = (tab) => {
+        if (tab === metricsTab) {
+            return '';
+        }
+        return tab;
+    };
+    const tabLinks = {
+        [TENANT_METRICS_TABS_IDS.cpu]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.cpu),
+        }),
+        [TENANT_METRICS_TABS_IDS.storage]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.storage),
+        }),
+        [TENANT_METRICS_TABS_IDS.memory]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.memory),
+        }),
+        [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath({
+            ...queryParams,
+            [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.healthcheck),
+        }),
+    };
+    return (_jsxs("div", { className: b(), children: [_jsx(Link, { to: tabLinks.cpu, className: b('tab'), children: _jsx(CPUCard, { poolsCpuStats: poolsCpuStats, active: metricsTab === TENANT_METRICS_TABS_IDS.cpu }) }), _jsx(Link, { to: tabLinks.storage, className: b('tab'), children: _jsx(StorageCard, { blobStorageStats: blobStorageStats, tabletStorageStats: tabletStorageStats, active: metricsTab === TENANT_METRICS_TABS_IDS.storage }) }), _jsx(Link, { to: tabLinks.memory, className: b('tab'), children: _jsx(MemoryCard, { memoryStats: memoryStats, active: metricsTab === TENANT_METRICS_TABS_IDS.memory }) }), _jsx(Link, { to: tabLinks.healthcheck, className: b('tab'), children: _jsx(HealthcheckPreview, { tenantName: tenantName, active: metricsTab === TENANT_METRICS_TABS_IDS.healthcheck }) })] }));
+}
+function CPUCard({ poolsCpuStats = [], active }) {
+    let status = METRIC_STATUS.Unspecified;
+    const metrics = poolsCpuStats
+        // Use only pools that directly indicate resources available to perform user queries
+        .filter((pool) => !(pool.name === 'Batch' || pool.name === 'IO'))
+        .map((pool) => {
+        const { name, usage, limit, used } = pool;
+        const poolStatus = cpuUsageToStatus(usage);
+        if (MetricStatusToSeverity[poolStatus] > MetricStatusToSeverity[status]) {
+            status = poolStatus;
+        }
+        return {
+            title: name,
+            value: used,
+            capacity: limit,
+            warningThreshold: TENANT_CPU_WARNING_TRESHOLD,
+            dangerThreshold: TENANT_CPU_DANGER_TRESHOLD,
+        };
+    });
+    return (_jsx(MetricCard, { label: i18n('cards.cpu-label'), active: active, metrics: metrics, status: status }));
+}
+function StorageCard({ blobStorageStats = [], tabletStorageStats, active }) {
+    let status = METRIC_STATUS.Unspecified;
+    // Display tablet storage stats if limits are set and blob storage stats otherwise
+    const storageStats = tabletStorageStats || blobStorageStats;
+    const metrics = storageStats.map((metric) => {
+        const { name, used, limit, usage } = metric;
+        const metircStatus = storageUsageToStatus(usage);
+        if (MetricStatusToSeverity[metircStatus] > MetricStatusToSeverity[status]) {
+            status = metircStatus;
+        }
+        return {
+            title: name,
+            value: used,
+            capacity: limit,
+            warningThreshold: TENANT_STORAGE_WARNING_TRESHOLD,
+            dangerThreshold: TENANT_STORAGE_DANGER_TRESHOLD,
+            formatValues: formatStorageValues,
+        };
+    });
+    return (_jsx(MetricCard, { label: i18n('cards.storage-label'), active: active, metrics: metrics, status: status }));
+}
+function MemoryCard({ active, memoryStats = [] }) {
+    let status = METRIC_STATUS.Unspecified;
+    const metrics = memoryStats.map((metric) => {
+        const { name, used, limit, usage } = metric;
+        const metircStatus = memoryUsageToStatus(usage);
+        if (MetricStatusToSeverity[metircStatus] > MetricStatusToSeverity[status]) {
+            status = metircStatus;
+        }
+        return {
+            title: name,
+            value: used,
+            capacity: limit,
+            warningThreshold: TENANT_MEMORY_WARNING_TRESHOLD,
+            dangerThreshold: TENANT_MEMORY_DANGER_TRESHOLD,
+            formatValues: formatStorageValues,
+        };
+    });
+    return (_jsx(MetricCard, { label: i18n('cards.memory-label'), active: active, metrics: metrics, status: status }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
+import { useAutoRefreshInterval, useSearchQuery } from '../../../../../utils/hooks';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getTopNodesByCpuColumns, } from '../../../../Nodes/getNodesColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopNodesByCpu({ tenantName, additionalNodesProps }) {
+    const query = useSearchQuery();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const columns = getTopNodesByCpuColumns(additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef);
+    const { currentData, isFetching, error } = topNodesApi.useGetTopNodesQuery({ tenant: tenantName, sortValue: 'CPU' }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const topNodes = currentData;
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-pools-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
+import { useAutoRefreshInterval, useSearchQuery } from '../../../../../utils/hooks';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getTopNodesByLoadColumns, } from '../../../../Nodes/getNodesColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopNodesByLoad({ tenantName, additionalNodesProps }) {
+    const query = useSearchQuery();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const columns = getTopNodesByLoadColumns(additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef);
+    const { currentData, isFetching, error } = topNodesApi.useGetTopNodesQuery({ tenant: tenantName, sortValue: 'LoadAverage' }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const topNodes = currentData;
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-load'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+}

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { parseQuery } from '../../../../../routes';
+import { changeUserInput } from '../../../../../store/reducers/executeQuery';
+import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../../store/reducers/tenant/constants';
+import { topQueriesApi } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
+import { useAutoRefreshInterval, useTypedDispatch } from '../../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../../utils/query';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, getTenantOverviewTopQueriesColumns, } from '../../TopQueries/getTopQueriesColumns';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+import { b } from '../utils';
+export function TopQueries({ tenantName }) {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const history = useHistory();
+    const query = parseQuery(location);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const columns = getTenantOverviewTopQueriesColumns();
+    const { currentData, isFetching, error } = topQueriesApi.useGetOverviewTopQueriesQuery({ database: tenantName }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const handleRowClick = React.useCallback((row) => {
+        const { QueryText: input } = row;
+        dispatch(changeUserInput({ input }));
+        const queryParams = parseQuery(location);
+        const queryPath = getTenantPath({
+            ...queryParams,
+            [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+            [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
+        });
+        history.push(queryPath);
+    }, [dispatch, history, location]);
+    const title = getSectionTitle({
+        entity: i18n('queries'),
+        postfix: i18n('by-cpu-time'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
+        }),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, error: parseQueryErrorToString(error), rowClassName: () => b('top-queries-row') }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation } from 'react-router-dom';
+import { parseQuery } from '../../../../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topShardsApi } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import { useAutoRefreshInterval } from '../../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../../utils/query';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, getTopShardsColumns, } from '../../TopShards/getTopShardsColumns';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export const TopShards = ({ tenantName, path }) => {
+    const location = useLocation();
+    const query = parseQuery(location);
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, isFetching, error } = topShardsApi.useGetTopShardsQuery({ database: tenantName, path }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const columns = getTopShardsColumns(tenantName, location);
+    const title = getSectionTitle({
+        entity: i18n('shards'),
+        postfix: i18n('by-cpu-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards,
+        }),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, title: title, loading: loading, error: parseQueryErrorToString(error) }));
+};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
+import { useAutoRefreshInterval, useSearchQuery } from '../../../../../utils/hooks';
+import { NODES_COLUMNS_WIDTH_LS_KEY, getTopNodesByMemoryColumns, } from '../../../../Nodes/getNodesColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopNodesByMemory({ tenantName, additionalNodesProps }) {
+    const query = useSearchQuery();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const columns = getTopNodesByMemoryColumns({
+        getNodeRef: additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef,
+    });
+    const { currentData, isFetching, error } = topNodesApi.useGetTopNodesQuery({ tenant: tenantName, sortValue: 'Memory' }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const topNodes = currentData;
+    const title = getSectionTitle({
+        entity: i18n('nodes'),
+        postfix: i18n('by-memory'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
+        }),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
+import { b } from './utils';
+export function TenantOverviewTableLayout({ title, error, loading, tableClassNameModifiers = {}, ...props }) {
+    const renderContent = () => {
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
+        if (loading) {
+            return _jsx(TableSkeleton, { rows: TENANT_OVERVIEW_TABLES_LIMIT });
+        }
+        return _jsx(ResizeableDataTable, { settings: TENANT_OVERVIEW_TABLES_SETTINGS, ...props });
+    };
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('table', tableClassNameModifiers), children: renderContent() })] }));
+}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topStorageGroupsApi } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import { useAutoRefreshInterval, useSearchQuery } from '../../../../../utils/hooks';
+import { STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, getStorageTopGroupsColumns, } from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+export function TopGroups({ tenant }) {
+    const query = useSearchQuery();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const columns = getStorageTopGroupsColumns();
+    const { currentData, isFetching, error } = topStorageGroupsApi.useGetTopStorageGroupsQuery({ tenant }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const topGroups = currentData;
+    const title = getSectionTitle({
+        entity: i18n('groups'),
+        postfix: i18n('by-usage'),
+        link: getTenantPath({
+            ...query,
+            [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage,
+        }),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY, data: topGroups || [], columns: columns, title: title, loading: loading, error: error }));
+}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { useLocation } from 'react-router-dom';
+import { CellWithPopover } from '../../../../../components/CellWithPopover/CellWithPopover';
+import { LinkToSchemaObject } from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import { topTablesApi } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
+import { formatBytes, getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
+import { useAutoRefreshInterval } from '../../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../../utils/query';
+import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
+import { getSectionTitle } from '../getSectionTitle';
+import i18n from '../i18n';
+import '../TenantOverview.scss';
+const TOP_TABLES_COLUMNS_WIDTH_LS_KEY = 'topTablesTableColumnsWidth';
+export function TopTables({ path }) {
+    const location = useLocation();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const { currentData, error, isFetching } = topTablesApi.useGetTopTablesQuery({ path }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const formatSize = (value) => {
+        const size = getSizeWithSignificantDigits((data === null || data === void 0 ? void 0 : data.length) ? Number(data[0].Size) : 0, 0);
+        return formatBytes({ value, size, precision: 1 });
+    };
+    const columns = [
+        {
+            name: 'Size',
+            width: 100,
+            sortable: false,
+            render: ({ row }) => formatSize(Number(row.Size)),
+            align: DataTable.RIGHT,
+        },
+        {
+            name: 'Path',
+            width: 700,
+            sortable: false,
+            render: ({ row }) => row.Path ? (_jsx(CellWithPopover, { content: row.Path, children: _jsx(LinkToSchemaObject, { path: String(row.Path), location: location, children: row.Path }) })) : null,
+        },
+    ];
+    const title = getSectionTitle({
+        entity: i18n('tables'),
+        postfix: i18n('by-size'),
+    });
+    return (_jsx(TenantOverviewTableLayout, { columnsWidthLSKey: TOP_TABLES_COLUMNS_WIDTH_LS_KEY, data: data || [], columns: columns, title: title, loading: loading, error: parseQueryErrorToString(error) }));
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "nodes" | "queries" | "groups" | "no-data" | "top" | "shards" | "tables" | "no-pools-data" | "top-nodes.empty-data" | "top-groups.empty-data" | "by-pools-usage" | "by-cpu-time" | "by-cpu-usage" | "by-load" | "by-memory" | "by-usage" | "by-size" | "cards.cpu-label" | "cards.storage-label" | "cards.memory-label" | "charts.queries-per-second" | "charts.transaction-latency" | "charts.cpu-usage" | "charts.storage-usage" | "charts.memory-usage" | "storage.tablet-storage-title" | "storage.tablet-storage-description" | "storage.db-storage-title" | "storage.db-storage-description", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.d.ts

@@ -0,0 +1,15 @@
+import type { IssuesTree } from '../../../../store/reducers/healthcheckInfo/types';
+import { SelfCheckResult } from '../../../../types/api/healthcheck';
+import type { StatusFlag } from '../../../../types/api/healthcheck';
+interface HealthcheckParams {
+    issueTrees: IssuesTree[];
+    issuesStatistics: [StatusFlag, number][];
+    loading: boolean;
+    error?: unknown;
+    refetch: () => void;
+    selfCheckResult: SelfCheckResult;
+}
+export declare const useHealthcheck: (tenantName: string, { autorefresh }?: {
+    autorefresh?: number;
+}) => HealthcheckParams;
+export {};

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { DateRange } from '../../../../components/DateRange';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { Search } from '../../../../components/Search';
+import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { parseQuery } from '../../../../routes';
+import { changeUserInput } from '../../../../store/reducers/executeQuery';
+import { setTopQueriesFilters, topQueriesApi, } from '../../../../store/reducers/executeTopQueries/executeTopQueries';
+import { TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../store/reducers/tenant/constants';
+import { cn } from '../../../../utils/cn';
+import { isSortableTopQueriesProperty } from '../../../../utils/diagnostics';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../utils/query';
+import { TenantTabsGroups, getTenantPath } from '../../TenantPages';
+import { QUERY_TABLE_SETTINGS } from '../../utils/constants';
+import { isColumnEntityType } from '../../utils/schema';
+import { TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, getTopQueriesColumns } from './getTopQueriesColumns';
+import i18n from './i18n';
+import './TopQueries.scss';
+const b = cn('kv-top-queries');
+export const TopQueries = ({ tenantName, type }) => {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const history = useHistory();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const filters = useTypedSelector((state) => state.executeTopQueries);
+    const { currentData, isFetching, error } = topQueriesApi.useGetTopQueriesQuery({
+        database: tenantName,
+        filters,
+    }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const rawColumns = getTopQueriesColumns();
+    const columns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableTopQueriesProperty(column.name),
+    }));
+    const handleRowClick = React.useCallback((row) => {
+        const { QueryText: input } = row;
+        dispatch(changeUserInput({ input }));
+        const queryParams = parseQuery(location);
+        const queryPath = getTenantPath({
+            ...queryParams,
+            [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+            [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
+        });
+        history.push(queryPath);
+    }, [dispatch, history, location]);
+    const handleTextSearchUpdate = (text) => {
+        dispatch(setTopQueriesFilters({ text }));
+    };
+    const handleDateRangeChange = (value) => {
+        dispatch(setTopQueriesFilters(value));
+    };
+    const renderContent = () => {
+        if (error) {
+            return _jsx("div", { className: "error", children: parseQueryErrorToString(error) });
+        }
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TOP_QUERIES_COLUMNS_WIDTH_LS_KEY, columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, rowClassName: () => b('row') }));
+    };
+    const renderControls = () => {
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { value: filters.text, onChange: handleTextSearchUpdate, placeholder: i18n('filter.text.placeholder'), className: b('search') }), _jsx(DateRange, { from: filters.from, to: filters.to, onChange: handleDateRangeChange })] }));
+    };
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
+};

package/dist/containers/Tenant/Diagnostics/TopQueries/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "no-data" | "filter.text.placeholder", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/Filters.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { RadioButton } from '@gravity-ui/uikit';
+import { DateRange } from '../../../../../components/DateRange';
+import { EShardsWorkloadMode } from '../../../../../store/reducers/shardsWorkload/types';
+import { isEnumMember } from '../../../../../utils/typecheckers';
+import i18n from '../i18n';
+export const Filters = ({ value, onChange }) => {
+    const handleModeChange = (mode) => {
+        if (!isEnumMember(EShardsWorkloadMode, mode)) {
+            const values = Object.values(EShardsWorkloadMode).join(', ');
+            throw new Error(`Unexpected TopShards mode "${mode}". Should be one of: ${values}`);
+        }
+        onChange({ mode });
+    };
+    const handleDateRangeChange = (dateRange) => {
+        onChange({
+            mode: EShardsWorkloadMode.History,
+            ...dateRange,
+        });
+    };
+    const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
+    const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
+    return (_jsxs(React.Fragment, { children: [_jsxs(RadioButton, { value: value.mode, onUpdate: handleModeChange, children: [_jsx(RadioButton.Option, { value: EShardsWorkloadMode.Immediate, children: i18n('filters.mode.immediate') }), _jsx(RadioButton.Option, { value: EShardsWorkloadMode.History, children: i18n('filters.mode.history') })] }), _jsx(DateRange, { from: from, to: to, onChange: handleDateRangeChange })] }));
+};

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

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import DataTable from '@gravity-ui/react-data-table';
+import { useLocation } from 'react-router-dom';
+import { ResizeableDataTable } from '../../../../components/ResizeableDataTable/ResizeableDataTable';
+import { TableWithControlsLayout } from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
+import { setShardsQueryFilters, shardApi, } from '../../../../store/reducers/shardsWorkload/shardsWorkload';
+import { EShardsWorkloadMode } from '../../../../store/reducers/shardsWorkload/types';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS } from '../../../../utils/constants';
+import { formatDateTime } from '../../../../utils/dataFormatters/dataFormatters';
+import { isSortableTopShardsProperty } from '../../../../utils/diagnostics';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { parseQueryErrorToString } from '../../../../utils/query';
+import { isColumnEntityType } from '../../utils/schema';
+import { Filters } from './Filters';
+import { TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, getShardsWorkloadColumns } from './getTopShardsColumns';
+import i18n from './i18n';
+import './TopShards.scss';
+const b = cn('top-shards');
+const TABLE_SETTINGS = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRender: false, // no more than 20 rows
+    externalSort: true,
+    disableSortReset: true,
+    defaultOrder: DataTable.DESCENDING,
+};
+const tableColumnsNames = {
+    TabletId: 'TabletId',
+    CPUCores: 'CPUCores',
+    DataSize: 'DataSize',
+    Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
+};
+function prepareDateTimeValue(value) {
+    if (!value) {
+        return '–';
+    }
+    return formatDateTime(new Date(value).getTime());
+}
+function stringToDataTableSortOrder(value) {
+    return value
+        ? value.split(',').map((columnId) => ({
+            columnId,
+            order: DataTable.DESCENDING,
+        }))
+        : undefined;
+}
+function stringToQuerySortOrder(value) {
+    return value
+        ? value.split(',').map((columnId) => ({
+            columnId,
+            order: 'DESC',
+        }))
+        : undefined;
+}
+function dataTableToStringSortOrder(value = []) {
+    const sortOrders = Array.isArray(value) ? value : [value];
+    return sortOrders.map(({ columnId }) => columnId).join(',');
+}
+function fillDateRangeFor(value) {
+    value.to = Date.now();
+    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    return value;
+}
+export const TopShards = ({ tenantName, path, type }) => {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const storeFilters = useTypedSelector((state) => state.shardsWorkload);
+    // default filters shouldn't propagate into URL until user interacts with the control
+    // redux initial value can't be used, as it synchronizes with URL
+    const [filters, setFilters] = React.useState(() => {
+        const defaultValue = { ...storeFilters };
+        if (!defaultValue.mode) {
+            defaultValue.mode = EShardsWorkloadMode.Immediate;
+        }
+        if (!defaultValue.from && !defaultValue.to) {
+            fillDateRangeFor(defaultValue);
+        }
+        return defaultValue;
+    });
+    const [sortOrder, setSortOrder] = React.useState(tableColumnsNames.CPUCores);
+    const { data: result, isFetching, error, } = shardApi.useSendShardQueryQuery({
+        database: tenantName,
+        path: path,
+        sortOrder: stringToQuerySortOrder(sortOrder),
+        filters,
+    }, { pollingInterval: autoRefreshInterval });
+    const loading = isFetching && result === undefined;
+    const { result: data } = result !== null && result !== void 0 ? result : {};
+    const onSort = (newSortOrder) => {
+        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
+        // use a string (and not the DataTable default format) to prevent reference change,
+        // which would cause an excess state change, to avoid repeating requests
+        setSortOrder(dataTableToStringSortOrder(newSortOrder));
+    };
+    const handleFiltersChange = (value) => {
+        const newStateValue = { ...value };
+        const isDateRangePristine = !storeFilters.from && !storeFilters.to && !value.from && !value.to;
+        if (isDateRangePristine) {
+            switch (value.mode) {
+                case EShardsWorkloadMode.Immediate:
+                    newStateValue.from = newStateValue.to = undefined;
+                    break;
+                case EShardsWorkloadMode.History:
+                    // should default to the current datetime every time history mode activates
+                    fillDateRangeFor(newStateValue);
+                    break;
+            }
+        }
+        dispatch(setShardsQueryFilters(value));
+        setFilters((state) => ({ ...state, ...newStateValue }));
+    };
+    const tableColumns = React.useMemo(() => {
+        const rawColumns = getShardsWorkloadColumns(tenantName, location);
+        const columns = rawColumns.map((column) => ({
+            ...column,
+            sortable: isSortableTopShardsProperty(column.name),
+        }));
+        if (filters.mode === EShardsWorkloadMode.History) {
+            // after NodeId
+            columns.splice(5, 0, {
+                name: tableColumnsNames.PeakTime,
+                render: ({ row }) => {
+                    return prepareDateTimeValue(row.PeakTime);
+                },
+                sortable: false,
+            });
+            columns.push({
+                name: tableColumnsNames.IntervalEnd,
+                render: ({ row }) => {
+                    return prepareDateTimeValue(row.IntervalEnd);
+                },
+            });
+        }
+        return columns;
+    }, [filters.mode, location, tenantName]);
+    const renderControls = () => {
+        return _jsx(Filters, { value: filters, onChange: handleFiltersChange });
+    };
+    const renderContent = () => {
+        if (error) {
+            return _jsx("div", { className: "error", children: parseQueryErrorToString(error) });
+        }
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: TOP_SHARDS_COLUMNS_WIDTH_LS_KEY, columns: tableColumns, data: data, settings: TABLE_SETTINGS, onSort: onSort, sortOrder: stringToDataTableSortOrder(sortOrder) }));
+    };
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), filters.mode === EShardsWorkloadMode.History && (_jsx("div", { className: b('hint'), children: i18n('description') })), _jsx(TableWithControlsLayout.Table, { loading: loading, children: renderContent() })] }));
+};