ydb-embedded-ui 4.19.3 → 4.20.0

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,85 @@
+import qs from 'qs';
+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 {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 = qs.parse(location.search, {
+                ignoreQueryPrefix: true,
+            });
+
+            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,39 @@
         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;
+        }
+    }
 }

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/TopTables.tsx

@@ -1,4 +1,5 @@
 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';
@@ -17,6 +18,7 @@ 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 './TenantStorage.scss';
 
@@ -28,6 +30,7 @@ interface TopTablesProps {
 
 export function TopTables({path}: TopTablesProps) {
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -67,13 +70,18 @@ export function TopTables({path}: TopTablesProps) {
         {
             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>
-            ),
+            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}>
+                            {row.Path}
+                        </Popover>
+                    </LinkToSchemaObject>
+                ) : null,
         },
     ];
 

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

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

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

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

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

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