ydb-embedded-ui 4.19.3 → 4.20.1

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

@@ -0,0 +1,21 @@
+import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {TopNodesByLoad} from './TopNodesByLoad';
+import {TopNodesByCpu} from './TopNodesByCpu';
+import {TopShards} from './TopShards';
+import {TopQueries} from './TopQueries';
+
+interface TenantCpuProps {
+    path: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) {
+    return (
+        <>
+            <TopNodesByLoad path={path} additionalNodesProps={additionalNodesProps} />
+            <TopNodesByCpu path={path} additionalNodesProps={additionalNodesProps} />
+            <TopShards path={path} />
+            <TopQueries path={path} />
+        </>
+    );
+}

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

@@ -0,0 +1,53 @@
+import {useDispatch} from 'react-redux';
+import {useCallback} from 'react';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    getTopNodesByCpu,
+    selectTopNodesByCpu,
+    setDataWasNotLoaded,
+} from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
+import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {getTopNodesByCpuColumns} from '../../../../Nodes/getNodesColumns';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+
+import i18n from '../i18n';
+
+interface TopNodesByCpuProps {
+    path: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export function TopNodesByCpu({path, additionalNodesProps}: TopNodesByCpuProps) {
+    const dispatch = useDispatch();
+
+    const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByCpu);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByCpu);
+    const columns = getTopNodesByCpuColumns(additionalNodesProps?.getNodeRef);
+
+    const fetchNodes = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getTopNodesByCpu({tenant: path}));
+        },
+        [dispatch, path],
+    );
+
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+
+    return (
+        <TenantOverviewTableLayout
+            data={topNodes || []}
+            columns={columns}
+            title="Top nodes by pools usage"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+            emptyDataMessage={i18n('top-nodes.empty-data')}
+        />
+    );
+}

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

@@ -0,0 +1,53 @@
+import {useDispatch} from 'react-redux';
+import {useCallback} from 'react';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    getTopNodesByLoad,
+    selectTopNodesByLoad,
+    setDataWasNotLoaded,
+} from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
+import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {getTopNodesByLoadColumns} from '../../../../Nodes/getNodesColumns';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+
+import i18n from '../i18n';
+
+interface TopNodesByLoadProps {
+    path: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export function TopNodesByLoad({path, additionalNodesProps}: TopNodesByLoadProps) {
+    const dispatch = useDispatch();
+
+    const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByLoad);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByLoad);
+    const columns = getTopNodesByLoadColumns(additionalNodesProps?.getNodeRef);
+
+    const fetchNodes = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getTopNodesByLoad({tenant: path}));
+        },
+        [dispatch, path],
+    );
+
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+
+    return (
+        <TenantOverviewTableLayout
+            data={topNodes || []}
+            columns={columns}
+            title="Top nodes by load"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+            emptyDataMessage={i18n('top-nodes.empty-data')}
+        />
+    );
+}

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

@@ -0,0 +1,83 @@
+import {useDispatch} from 'react-redux';
+import {useHistory, useLocation} from 'react-router';
+import {useCallback} from 'react';
+
+import {
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../../store/reducers/tenant/constants';
+import {
+    fetchTenantOverviewTopQueries,
+    setDataWasNotLoaded,
+} 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';
+
+interface TopQueriesProps {
+    path: string;
+}
+
+export function TopQueries({path}: TopQueriesProps) {
+    const dispatch = useDispatch();
+    const location = useLocation();
+    const history = useHistory();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        wasLoaded,
+        error,
+        data: {result: data = undefined} = {},
+    } = useTypedSelector((state) => state.tenantOverviewTopQueries);
+    const columns = getTenantOverviewTopQueriesColumns();
+
+    useAutofetcher(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(fetchTenantOverviewTopQueries(path));
+        },
+        [dispatch, path],
+        autorefresh,
+    );
+
+    const handleRowClick = 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],
+    );
+
+    return (
+        <TenantOverviewTableLayout
+            data={data || []}
+            columns={columns}
+            onRowClick={handleRowClick}
+            title="Top queries by cpu time"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+            tableClassNameModifiers={{'top-queries': true}}
+        />
+    );
+}

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

@@ -0,0 +1,53 @@
+import {useDispatch} from 'react-redux';
+import {useLocation} from 'react-router';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    sendTenantOverviewTopShardsQuery,
+    setDataWasNotLoaded,
+} from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import {getTopShardsColumns} from '../../TopShards/getTopShardsColumns';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+
+interface TopShardsProps {
+    path: string;
+}
+
+export const TopShards = ({path}: TopShardsProps) => {
+    const dispatch = useDispatch();
+    const location = useLocation();
+
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        data: {result: data = undefined} = {},
+        error,
+        wasLoaded,
+    } = useTypedSelector((state) => state.tenantOverviewTopShards);
+
+    useAutofetcher(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+            dispatch(sendTenantOverviewTopShardsQuery(path, currentSchemaPath));
+        },
+        [dispatch, path, currentSchemaPath],
+        autorefresh,
+    );
+
+    const columns = getTopShardsColumns(path, location);
+
+    return (
+        <TenantOverviewTableLayout
+            data={data || []}
+            columns={columns}
+            title="Top shards by cpu usage"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+            tableClassNameModifiers={{'top-queries': true}}
+        />
+    );
+};

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

@@ -0,0 +1,9 @@
+import {TopNodesByMemory} from './TopNodesByMemory';
+
+interface TenantMemoryProps {
+    path: string;
+}
+
+export function TenantMemory({path}: TenantMemoryProps) {
+    return <TopNodesByMemory path={path} />;
+}

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

@@ -0,0 +1,55 @@
+import {useDispatch} from 'react-redux';
+import {useCallback} from 'react';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    getTopNodesByMemory,
+    selectTopNodesByMemory,
+    setDataWasNotLoaded,
+} from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
+import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {getTopNodesByMemoryColumns} from '../../../../Nodes/getNodesColumns';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+
+import i18n from '../i18n';
+
+interface TopNodesByMemoryProps {
+    path: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) {
+    const dispatch = useDispatch();
+
+    const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByMemory);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByMemory);
+    const columns = getTopNodesByMemoryColumns({
+        getNodeRef: additionalNodesProps?.getNodeRef,
+    });
+
+    const fetchNodes = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getTopNodesByMemory({tenant: path}));
+        },
+        [dispatch, path],
+    );
+
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+
+    return (
+        <TenantOverviewTableLayout
+            data={topNodes || []}
+            columns={columns}
+            title="Top nodes by memory"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+            emptyDataMessage={i18n('top-nodes.empty-data')}
+        />
+    );
+}

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

@@ -1,4 +1,9 @@
+@import '../../../../styles/mixins.scss';
+
 .tenant-overview {
+    overflow: auto;
+
+    height: 100%;
     padding-bottom: 20px;
 
     &__loader {
@@ -78,4 +83,43 @@
         font-weight: 600;
         line-height: var(--yc-text-body-2-line-height);
     }
+
+    &__info {
+        position: sticky;
+        left: 0;
+
+        width: max-content;
+    }
+
+    &__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;
+        }
+
+        &_top-queries tr {
+            cursor: pointer;
+        }
+    }
+
+    &__info {
+        margin-bottom: 36px;
+    }
 }

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

@@ -9,15 +9,16 @@ import {TENANT_DEFAULT_TITLE} from '../../../../utils/constants';
 import {TENANT_METRICS_TABS_IDS} from '../../../../store/reducers/tenant/constants';
 import {mapDatabaseTypeToDBName} from '../../utils/schema';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
+import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/tenant/tenant';
 import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
+import {TenantCpu} from './TenantCpu/TenantCpu';
 import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
 import {TenantStorage} from './TenantStorage/TenantStorage';
+import {TenantMemory} from './TenantMemory/TenantMemory';
 import {useHealthcheck} from './useHealthcheck';
 
-import i18n from './i18n';
 import './TenantOverview.scss';
 
 const b = cn('tenant-overview');
@@ -25,9 +26,14 @@ const b = cn('tenant-overview');
 interface TenantOverviewProps {
     tenantName: string;
     additionalTenantProps?: AdditionalTenantsProps;
+    additionalNodesProps?: AdditionalNodesProps;
 }
 
-export function TenantOverview({tenantName, additionalTenantProps}: TenantOverviewProps) {
+export function TenantOverview({
+    tenantName,
+    additionalTenantProps,
+    additionalNodesProps,
+}: TenantOverviewProps) {
     const dispatch = useDispatch();
 
     const {
@@ -115,16 +121,23 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
     const renderTabContent = () => {
         switch (metricsTab) {
             case TENANT_METRICS_TABS_IDS.cpu: {
-                return i18n('label.under-development');
+                return <TenantCpu path={tenantName} additionalNodesProps={additionalNodesProps} />;
             }
             case TENANT_METRICS_TABS_IDS.storage: {
                 return <TenantStorage tenantName={tenantName} metrics={storageMetrics} />;
             }
             case TENANT_METRICS_TABS_IDS.memory: {
-                return i18n('label.under-development');
+                return <TenantMemory path={tenantName} />;
             }
             case TENANT_METRICS_TABS_IDS.healthcheck: {
-                return <HealthcheckDetails issueTrees={issueTrees} error={healthcheckError} />;
+                return (
+                    <HealthcheckDetails
+                        issueTrees={issueTrees}
+                        loading={healthcheckLoading}
+                        wasLoaded={healthCheckWasLoaded}
+                        error={healthcheckError}
+                    />
+                );
             }
             default: {
                 return undefined;
@@ -132,7 +145,7 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
         }
     };
 
-    if ((tenantLoading && !tenantWasLoaded) || (healthcheckLoading && !healthCheckWasLoaded)) {
+    if (tenantLoading && !tenantWasLoaded) {
         return (
             <div className={b('loader')}>
                 <Loader size="m" />
@@ -142,19 +155,22 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
 
     return (
         <div className={b()}>
-            <div className={b('top-label')}>{tenantType}</div>
-            <div className={b('top')}>
-                {renderName()}
-                {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+            <div className={b('info')}>
+                <div className={b('top-label')}>{tenantType}</div>
+                <div className={b('top')}>
+                    {renderName()}
+                    {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+                </div>
+                <MetricsCards
+                    metrics={calculatedMetrics}
+                    issuesStatistics={issuesStatistics}
+                    selfCheckResult={selfCheckResult}
+                    fetchHealthcheck={fetchHealthcheck}
+                    healthcheckLoading={healthcheckLoading}
+                    healthCheckWasLoaded={healthCheckWasLoaded}
+                    healthcheckError={healthcheckError}
+                />
             </div>
-            <MetricsCards
-                metrics={calculatedMetrics}
-                issuesStatistics={issuesStatistics}
-                selfCheckResult={selfCheckResult}
-                fetchHealthcheck={fetchHealthcheck}
-                healthcheckLoading={healthcheckLoading}
-                healthcheckError={healthcheckError}
-            />
             {renderTabContent()}
         </div>
     );

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

@@ -0,0 +1,53 @@
+import cn from 'bem-cn-lite';
+
+import DataTable from '@gravity-ui/react-data-table';
+import type {DataTableProps} from '@gravity-ui/react-data-table';
+
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../utils/constants';
+import type {IResponseError} from '../../../../types/api/error';
+import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
+
+const b = cn('tenant-overview');
+
+interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
+    title: string;
+    loading?: boolean;
+    wasLoaded?: boolean;
+    error?: IResponseError;
+    tableClassNameModifiers?: {
+        [name: string]: string | boolean | undefined;
+    };
+}
+
+export function TenantOverviewTableLayout<T>({
+    title,
+    error,
+    loading,
+    wasLoaded,
+    tableClassNameModifiers = {},
+    ...props
+}: TenantOverviewTableLayoutProps<T>) {
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} />;
+        }
+
+        if (loading && !wasLoaded) {
+            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
+        }
+
+        return (
+            <DataTable theme="yandex-cloud" settings={TENANT_OVERVIEW_TABLES_SETTINGS} {...props} />
+        );
+    };
+    return (
+        <>
+            <div className={b('title')}>{title}</div>
+            <div className={b('table', tableClassNameModifiers)}>{renderContent()}</div>
+        </>
+    );
+}

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;

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}
+        />
     );
 }