ydb-embedded-ui 4.9.0 → 4.10.1

package/dist/containers/Tenants/Tenants.tsx

@@ -0,0 +1,262 @@
+import cn from 'bem-cn-lite';
+import {useDispatch} from 'react-redux';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+import {Button} from '@gravity-ui/uikit';
+
+import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
+import {TabletsStatistic} from '../../components/TabletsStatistic';
+import {ProblemFilter} from '../../components/ProblemFilter';
+import {Illustration} from '../../components/Illustration';
+import {Search} from '../../components/Search';
+import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/TableWithControlsLayout';
+import {ResponseError} from '../../components/Errors/ResponseError';
+
+import type {AdditionalTenantsProps} from '../../types/additionalProps';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import type {PreparedTenant} from '../../store/reducers/tenants/types';
+import {getTenantsInfo, setSearchValue} from '../../store/reducers/tenants/tenants';
+import {
+    selectFilteredTenants,
+    selectTenantsSearchValue,
+} from '../../store/reducers/tenants/selectors';
+import {
+    changeFilter,
+    ProblemFilterValues,
+    selectProblemFilter,
+} from '../../store/reducers/settings/settings';
+import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {clusterName} from '../../store';
+
+import {TenantTabsGroups, TENANT_INFO_TABS, getTenantPath} from '../Tenant/TenantPages';
+
+import './Tenants.scss';
+
+const b = cn('tenants');
+
+interface TenantsProps {
+    additionalTenantsProps?: AdditionalTenantsProps;
+}
+
+export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
+    const dispatch = useDispatch();
+
+    const {error, loading, wasLoaded} = useTypedSelector((state) => state.tenants);
+    const searchValue = useTypedSelector(selectTenantsSearchValue);
+    const filteredTenants = useTypedSelector(selectFilteredTenants);
+    const problemFilter = useTypedSelector(selectProblemFilter);
+
+    useAutofetcher(
+        () => {
+            dispatch(getTenantsInfo(clusterName));
+        },
+        [dispatch],
+        true,
+    );
+
+    const handleProblemFilterChange = (value: string) => {
+        dispatch(changeFilter(value as ProblemFilterValue));
+    };
+
+    const handleSearchChange = (value: string) => {
+        dispatch(setSearchValue(value));
+    };
+
+    const renderControls = () => {
+        return (
+            <>
+                <Search
+                    value={searchValue}
+                    onChange={handleSearchChange}
+                    placeholder="Database name"
+                    className={b('search')}
+                />
+                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+            </>
+        );
+    };
+
+    const renderTable = () => {
+        const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
+
+        const getTenantBackend = (tenant: PreparedTenant) => {
+            const backend = tenant.MonitoringEndpoint ?? tenant.backend;
+            return additionalTenantsProps?.prepareTenantBackend?.(backend);
+        };
+
+        const columns: Column<PreparedTenant>[] = [
+            {
+                name: 'Name',
+                header: 'Database',
+                render: ({row}) => {
+                    const backend = getTenantBackend(row);
+                    const isExternalLink = Boolean(backend);
+                    return (
+                        <div className={b('name-wrapper')}>
+                            <EntityStatus
+                                externalLink={isExternalLink}
+                                className={b('name')}
+                                name={row.Name || 'unknown database'}
+                                withLeftTrim={true}
+                                status={row.Overall}
+                                hasClipboardButton
+                                path={getTenantPath({
+                                    name: row.Name,
+                                    backend,
+                                    [TenantTabsGroups.info]: initialTenantInfoTab,
+                                })}
+                            />
+                            {additionalTenantsProps?.getMonitoringLink?.(row.Name, row.Type)}
+                        </div>
+                    );
+                },
+                width: 440,
+                sortable: true,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'controlPlaneName',
+                header: 'Name',
+                render: ({row}) => {
+                    return row.controlPlaneName;
+                },
+                width: 200,
+                sortable: true,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'Type',
+                width: 200,
+                render: ({row}) => {
+                    if (row.Type !== 'Serverless') {
+                        return row.Type;
+                    }
+
+                    return (
+                        <div className={b('type')}>
+                            <span className={b('type-value')}>{row.Type}</span>
+                            <Button
+                                className={b('type-button')}
+                                onClick={() => handleSearchChange(row.sharedTenantName || '')}
+                            >
+                                Show shared
+                            </Button>
+                        </div>
+                    );
+                },
+            },
+            {
+                name: 'State',
+                width: 90,
+                render: ({row}) => (row.State ? row.State.toLowerCase() : '—'),
+                customStyle: () => ({textTransform: 'capitalize'}),
+            },
+            {
+                name: 'cpu',
+                header: 'CPU',
+                width: 80,
+                render: ({row}) => {
+                    // Don't show values below 0.01 when formatted
+                    if (row.cpu > 10_000) {
+                        return formatCPU(row.cpu);
+                    }
+                    return '—';
+                },
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'memory',
+                header: 'Memory',
+                width: 120,
+                render: ({row}) => (row.memory ? formatBytesToGigabyte(row.memory) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'storage',
+                header: 'Storage',
+                width: 120,
+                render: ({row}) => (row.storage ? formatBytesToGigabyte(row.storage) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'nodesCount',
+                header: 'Nodes',
+                width: 100,
+                render: ({row}) => (row.nodesCount ? formatNumber(row.nodesCount) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'groupsCount',
+                header: 'Groups',
+                width: 100,
+                render: ({row}) => (row.groupsCount ? formatNumber(row.groupsCount) : '—'),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
+            {
+                name: 'PoolStats',
+                header: 'Pools',
+                width: 100,
+                sortAccessor: ({PoolStats = []}) =>
+                    PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
+                defaultOrder: DataTable.DESCENDING,
+                align: DataTable.LEFT,
+                render: ({row}) => <PoolsGraph pools={row.PoolStats} />,
+            },
+            {
+                name: 'Tablets',
+                header: 'Tablets States',
+                sortable: false,
+                width: 430,
+                render: ({row}) => {
+                    const backend = getTenantBackend(row);
+
+                    return row.Tablets ? (
+                        <TabletsStatistic
+                            path={row.Name}
+                            tablets={row.Tablets}
+                            nodeIds={row.NodeIds || []}
+                            backend={backend}
+                        />
+                    ) : (
+                        '—'
+                    );
+                },
+            },
+        ];
+
+        if (filteredTenants.length === 0 && problemFilter !== ProblemFilterValues.ALL) {
+            return <Illustration name="thumbsUp" width="200" />;
+        }
+
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                data={filteredTenants}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                emptyDataMessage="No such tenants"
+            />
+        );
+    };
+
+    if (error) {
+        return <ResponseError error={error} />;
+    }
+
+    return (
+        <TableWithControlsLayout>
+            <TableWithControlsLayout.Controls>{renderControls()}</TableWithControlsLayout.Controls>
+            <TableWithControlsLayout.Table loading={loading && !wasLoaded} className={b('table')}>
+                {renderTable()}
+            </TableWithControlsLayout.Table>
+        </TableWithControlsLayout>
+    );
+};

package/dist/services/api.ts

@@ -282,19 +282,24 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         },
         {concurrentId}: AxiosOptions = {},
     ) {
+        // Time difference to ensure that timeout from ui will be shown rather than backend error
+        const uiTimeout = 9 * 60 * 1000;
+        const backendTimeout = 10 * 60 * 1000;
+
         return this.post<QueryAPIResponse<Action, Schema>>(
-            this.getPath(`/viewer/json/query${schema ? `?schema=${schema}` : ''}`),
+            this.getPath(
+                `/viewer/json/query?timeout=${backendTimeout}${schema ? `&schema=${schema}` : ''}`,
+            ),
             {
                 query,
                 database,
                 action,
                 stats,
-                timeout: 600000,
             },
             {},
             {
                 concurrentId,
-                timeout: 9 * 60 * 1000,
+                timeout: uiTimeout,
             },
         );
     }

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

@@ -1,25 +1,12 @@
 import type {Reducer} from 'redux';
-import {createSelector, Selector} from 'reselect';
-import {escapeRegExp} from 'lodash/fp';
 
-import type {ValueOf} from '../../../types/common';
 import '../../../services/api';
-import {HOUR_IN_SECONDS} from '../../../utils/constants';
-import {calcUptime, calcUptimeInSeconds} from '../../../utils';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
-import {EFlag} from '../../../types/api/enums';
 
 import {createRequestActionTypes, createApiRequest} from '../../utils';
-import {ProblemFilterValues} from '../settings/settings';
 
-import type {
-    NodesAction,
-    NodesApiRequestParams,
-    NodesHandledResponse,
-    NodesPreparedEntity,
-    NodesStateSlice,
-    NodesState,
-} from './types';
+import type {NodesAction, NodesApiRequestParams, NodesState} from './types';
+import {prepareComputeNodesData, prepareNodesData} from './utils';
 
 export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
@@ -97,24 +84,7 @@ export function getNodes({tenant, visibleEntities, type = 'any'}: NodesApiReques
     return createApiRequest({
         request: window.api.getNodes({tenant, visibleEntities, type}),
         actions: FETCH_NODES,
-        dataHandler: (data): NodesHandledResponse => {
-            const rawNodes = data.Nodes || [];
-
-            const preparedNodes = rawNodes.map((node) => {
-                return {
-                    ...node?.SystemState,
-                    Tablets: node?.Tablets,
-                    NodeId: node?.NodeId,
-                    Uptime: calcUptime(node?.SystemState?.StartTime),
-                    TenantName: node?.SystemState?.Tenants?.[0],
-                };
-            });
-
-            return {
-                Nodes: preparedNodes,
-                TotalNodes: Number(data.TotalNodes) || preparedNodes.length,
-            };
-        },
+        dataHandler: prepareNodesData,
     });
 }
 
@@ -122,31 +92,7 @@ export function getComputeNodes(path: string) {
     return createApiRequest({
         request: window.api.getCompute(path),
         actions: FETCH_NODES,
-        dataHandler: (data): NodesHandledResponse => {
-            const preparedNodes: NodesPreparedEntity[] = [];
-
-            if (data.Tenants) {
-                for (const tenant of data.Tenants) {
-                    if (tenant && tenant.Nodes) {
-                        const tenantNodes = tenant.Nodes.map((node) => {
-                            return {
-                                ...node,
-                                TenantName: tenant.Name,
-                                SystemState: node?.Overall,
-                                Uptime: calcUptime(node?.StartTime),
-                            };
-                        });
-
-                        preparedNodes.push(...tenantNodes);
-                    }
-                }
-            }
-
-            return {
-                Nodes: preparedNodes,
-                TotalNodes: preparedNodes.length,
-            };
-        },
+        dataHandler: prepareComputeNodesData,
     });
 }
 
@@ -175,58 +121,4 @@ export const setSearchValue = (value: string) => {
     } as const;
 };
 
-const getNodesUptimeFilter = (state: NodesStateSlice) => state.nodes.nodesUptimeFilter;
-const getSearchValue = (state: NodesStateSlice) => state.nodes.searchValue;
-const getNodesList = (state: NodesStateSlice) => state.nodes.data;
-
-const filterNodesByProblemsStatus = (
-    nodesList: NodesPreparedEntity[] = [],
-    problemFilter: ValueOf<typeof ProblemFilterValues>,
-) => {
-    if (problemFilter === ProblemFilterValues.ALL) {
-        return nodesList;
-    }
-
-    return nodesList.filter(({SystemState}) => {
-        return SystemState && SystemState !== EFlag.Green;
-    });
-};
-
-export const filterNodesByUptime = (
-    nodesList: NodesPreparedEntity[] = [],
-    nodesUptimeFilter: NodesUptimeFilterValues,
-) => {
-    if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
-        return nodesList;
-    }
-    return nodesList.filter(({StartTime}) => {
-        return !StartTime || calcUptimeInSeconds(StartTime) < HOUR_IN_SECONDS;
-    });
-};
-
-const filterNodesBySearchValue = (nodesList: NodesPreparedEntity[] = [], searchValue: string) => {
-    if (!searchValue) {
-        return nodesList;
-    }
-    const re = new RegExp(escapeRegExp(searchValue), 'i');
-
-    return nodesList.filter((node) => {
-        return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;
-    });
-};
-
-export const getFilteredPreparedNodesList: Selector<
-    NodesStateSlice,
-    NodesPreparedEntity[] | undefined
-> = createSelector(
-    [getNodesList, getNodesUptimeFilter, getSearchValue, (state) => state.settings.problemFilter],
-    (nodesList, uptimeFilter, searchValue, problemFilter) => {
-        let result = filterNodesByUptime(nodesList, uptimeFilter);
-        result = filterNodesByProblemsStatus(result, problemFilter);
-        result = filterNodesBySearchValue(result, searchValue);
-
-        return result;
-    },
-);
-
 export default nodes;

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

@@ -0,0 +1,74 @@
+import {Selector, createSelector} from 'reselect';
+import {escapeRegExp} from 'lodash';
+
+import {EFlag} from '../../../types/api/enums';
+import {calcUptimeInSeconds} from '../../../utils';
+import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
+
+import type {ProblemFilterValue} from '../settings/types';
+import type {NodesPreparedEntity, NodesStateSlice} from './types';
+import {ProblemFilterValues} from '../settings/settings';
+
+// ==== Filters ====
+
+const filterNodesByProblemsStatus = (
+    nodesList: NodesPreparedEntity[] = [],
+    problemFilter: ProblemFilterValue,
+) => {
+    if (problemFilter === ProblemFilterValues.ALL) {
+        return nodesList;
+    }
+
+    return nodesList.filter(({SystemState}) => {
+        return SystemState && SystemState !== EFlag.Green;
+    });
+};
+
+export const filterNodesByUptime = <T extends {StartTime?: string}>(
+    nodesList: T[] = [],
+    nodesUptimeFilter: NodesUptimeFilterValues,
+) => {
+    if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
+        return nodesList;
+    }
+    return nodesList.filter(({StartTime}) => {
+        return !StartTime || calcUptimeInSeconds(StartTime) < HOUR_IN_SECONDS;
+    });
+};
+
+const filterNodesBySearchValue = (nodesList: NodesPreparedEntity[] = [], searchValue: string) => {
+    if (!searchValue) {
+        return nodesList;
+    }
+    const re = new RegExp(escapeRegExp(searchValue), 'i');
+
+    return nodesList.filter((node) => {
+        return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;
+    });
+};
+
+// ==== Simple selectors ====
+
+const selectNodesUptimeFilter = (state: NodesStateSlice) => state.nodes.nodesUptimeFilter;
+const selectSearchValue = (state: NodesStateSlice) => state.nodes.searchValue;
+const selectNodesList = (state: NodesStateSlice) => state.nodes.data;
+
+// ==== Complex selectors ====
+
+export const selectFilteredNodes: Selector<NodesStateSlice, NodesPreparedEntity[] | undefined> =
+    createSelector(
+        [
+            selectNodesList,
+            selectNodesUptimeFilter,
+            selectSearchValue,
+            (state) => state.settings.problemFilter,
+        ],
+        (nodesList, uptimeFilter, searchValue, problemFilter) => {
+            let result = filterNodesByUptime(nodesList, uptimeFilter);
+            result = filterNodesByProblemsStatus(result, problemFilter);
+            result = filterNodesBySearchValue(result, searchValue);
+
+            return result;
+        },
+    );

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

@@ -0,0 +1,46 @@
+import type {TComputeInfo} from '../../../types/api/compute';
+import type {TNodesInfo} from '../../../types/api/nodes';
+import {calcUptime} from '../../../utils';
+
+import type {NodesHandledResponse, NodesPreparedEntity} from './types';
+
+export const prepareComputeNodesData = (data: TComputeInfo): NodesHandledResponse => {
+    const preparedNodes: NodesPreparedEntity[] = [];
+
+    if (data.Tenants) {
+        for (const tenant of data.Tenants) {
+            tenant.Nodes?.forEach((node) => {
+                preparedNodes.push({
+                    ...node,
+                    TenantName: tenant.Name,
+                    SystemState: node?.Overall,
+                    Uptime: calcUptime(node?.StartTime),
+                });
+            });
+        }
+    }
+
+    return {
+        Nodes: preparedNodes,
+        TotalNodes: preparedNodes.length,
+    };
+};
+
+export const prepareNodesData = (data: TNodesInfo): NodesHandledResponse => {
+    const rawNodes = data.Nodes || [];
+
+    const preparedNodes = rawNodes.map((node) => {
+        return {
+            ...node.SystemState,
+            Tablets: node.Tablets,
+            NodeId: node.NodeId,
+            Uptime: calcUptime(node.SystemState?.StartTime),
+            TenantName: node.SystemState?.Tenants?.[0],
+        };
+    });
+
+    return {
+        Nodes: preparedNodes,
+        TotalNodes: Number(data.TotalNodes) ?? preparedNodes.length,
+    };
+};

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

@@ -1,5 +1,5 @@
 import type {IResponseError} from '../../../types/api/error';
-import type {IProcessSpeedStats} from '../../../utils/bytesParsers';
+import type {ProcessSpeedStats} from '../../../utils/bytesParsers';
 import type {ApiRequestAction} from '../../utils';
 
 import {FETCH_PARTITIONS, setDataWasNotLoaded, setSelectedConsumer} from './partitions';
@@ -9,8 +9,8 @@ export interface PreparedPartitionData {
     partitionId: string;
     storeSize: string;
 
-    writeSpeed: IProcessSpeedStats;
-    readSpeed?: IProcessSpeedStats;
+    writeSpeed: ProcessSpeedStats;
+    readSpeed?: ProcessSpeedStats;
 
     partitionWriteLag: number;
     partitionWriteIdleTime: number;

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

@@ -1,7 +1,6 @@
 import type {Reducer} from 'redux';
 import type {ThunkAction} from 'redux-thunk';
 
-import type {ValueOf} from '../../../types/common';
 import {
     SAVED_QUERIES_KEY,
     THEME_KEY,
@@ -23,6 +22,7 @@ import {TENANT_PAGES_IDS} from '../tenant/constants';
 
 import type {RootState} from '..';
 import type {
+    ProblemFilterValue,
     SetSettingValueAction,
     SettingsAction,
     SettingsRootStateSlice,
@@ -133,11 +133,13 @@ export const getParsedSettingValue = (state: SettingsRootStateSlice, name: strin
     return parseJson(value);
 };
 
-export const changeFilter = (filter: ValueOf<typeof ProblemFilterValues>) => {
+export const changeFilter = (filter: ProblemFilterValue) => {
     return {
         type: CHANGE_PROBLEM_FILTER,
         data: filter,
     } as const;
 };
 
+export const selectProblemFilter = (state: SettingsRootStateSlice) => state.settings.problemFilter;
+
 export default settings;

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

@@ -1,8 +1,10 @@
 import type {ValueOf} from '../../../types/common';
 import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
 
+export type ProblemFilterValue = ValueOf<typeof ProblemFilterValues>;
+
 export interface SettingsState {
-    problemFilter: ValueOf<typeof ProblemFilterValues>;
+    problemFilter: ProblemFilterValue;
     userSettings: Record<string, string | undefined>;
     systemSettings: Record<string, string | undefined>;
 }