ydb-embedded-ui 4.8.2 → 4.10.0

package/dist/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx

@@ -1,24 +1,49 @@
-import {Button, DropdownMenu} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import {Button, ButtonView, DropdownMenu} from '@gravity-ui/uikit';
 import {useMemo} from 'react';
 
-import {QueryModes} from '../../../../types/store/query';
+import type {QueryAction, QueryMode} from '../../../../types/store/query';
+import {QUERY_MODES} from '../../../../utils/query';
 import {Icon} from '../../../../components/Icon';
 
 import SaveQuery from '../SaveQuery/SaveQuery';
 
 import i18n from '../i18n';
 
-import {QueryEditorControlsProps, b} from './shared';
-
 import './QueryEditorControls.scss';
 
-export const QueryModeSelectorTitles = {
-    [QueryModes.script]: 'Script',
-    [QueryModes.scan]: 'Scan',
-    [QueryModes.data]: 'Data',
-    [QueryModes.query]: 'Query',
+const queryModeSelectorQa = 'query-mode-selector';
+const queryModeSelectorPopupQa = 'query-mode-selector-popup';
+
+const b = block('ydb-query-editor-controls');
+
+const OldQueryModeSelectorTitles = {
+    [QUERY_MODES.script]: 'YQL Script',
+    [QUERY_MODES.scan]: 'Scan',
+} as const;
+
+const QueryModeSelectorTitles = {
+    [QUERY_MODES.script]: 'YQL Script',
+    [QUERY_MODES.scan]: 'Scan',
+    [QUERY_MODES.data]: 'Data',
+    [QUERY_MODES.query]: 'YQL - QueryService',
 } as const;
 
+interface QueryEditorControlsProps {
+    onRunButtonClick: (mode?: QueryMode) => void;
+    runIsLoading: boolean;
+    onExplainButtonClick: (mode?: QueryMode) => void;
+    explainIsLoading: boolean;
+    onSaveQueryClick: (queryName: string) => void;
+    savedQueries: unknown;
+    disabled: boolean;
+    onUpdateQueryMode: (mode: QueryMode) => void;
+    queryMode: QueryMode;
+    enableAdditionalQueryModes: boolean;
+    highlitedAction: QueryAction;
+}
+
 export const QueryEditorControls = ({
     onRunButtonClick,
     runIsLoading,
@@ -29,17 +54,27 @@ export const QueryEditorControls = ({
     disabled,
     onUpdateQueryMode,
     queryMode,
+    highlitedAction,
+    enableAdditionalQueryModes,
 }: QueryEditorControlsProps) => {
     const querySelectorMenuItems = useMemo(() => {
-        return Object.entries(QueryModeSelectorTitles).map(([mode, title]) => {
+        const titles = enableAdditionalQueryModes
+            ? QueryModeSelectorTitles
+            : OldQueryModeSelectorTitles;
+
+        return Object.entries(titles).map(([mode, title]) => {
             return {
                 text: title,
                 action: () => {
-                    onUpdateQueryMode(mode as QueryModes);
+                    onUpdateQueryMode(mode as QueryMode);
                 },
             };
         });
-    }, [onUpdateQueryMode]);
+    }, [onUpdateQueryMode, enableAdditionalQueryModes]);
+
+    const runView: ButtonView | undefined = highlitedAction === 'execute' ? 'action' : undefined;
+    const explainView: ButtonView | undefined =
+        highlitedAction === 'explain' ? 'action' : undefined;
 
     return (
         <div className={b()}>
@@ -49,9 +84,9 @@ export const QueryEditorControls = ({
                         onClick={() => {
                             onRunButtonClick(queryMode);
                         }}
-                        view="action"
                         disabled={disabled}
                         loading={runIsLoading}
+                        view={runView}
                     >
                         <Icon name="startPlay" viewBox="0 0 16 16" width={16} height={16} />
                         {'Run'}
@@ -63,23 +98,35 @@ export const QueryEditorControls = ({
                     }}
                     disabled={disabled}
                     loading={explainIsLoading}
+                    view={explainView}
                 >
                     Explain
                 </Button>
-                <DropdownMenu
-                    items={querySelectorMenuItems}
-                    popupProps={{className: b('mode-selector__popup')}}
-                    switcher={
-                        <Button className={b('mode-selector__button')}>
-                            <span className={b('mode-selector__button-content')}>
-                                {`${i18n('controls.query-mode-selector_type')} ${
-                                    QueryModeSelectorTitles[queryMode]
-                                }`}
-                                <Icon name="chevron-down" width={16} height={16} />
-                            </span>
-                        </Button>
-                    }
-                />
+                <div
+                    className={b('mode-selector', {
+                        extended: enableAdditionalQueryModes,
+                    })}
+                >
+                    <DropdownMenu
+                        items={querySelectorMenuItems}
+                        popupProps={{
+                            className: b('mode-selector__popup', {
+                                extended: enableAdditionalQueryModes,
+                            }),
+                            qa: queryModeSelectorPopupQa,
+                        }}
+                        switcher={
+                            <Button className={b('mode-selector__button')} qa={queryModeSelectorQa}>
+                                <span className={b('mode-selector__button-content')}>
+                                    {`${i18n('controls.query-mode-selector_type')} ${
+                                        QueryModeSelectorTitles[queryMode]
+                                    }`}
+                                    <Icon name="chevron-down" width={16} height={16} />
+                                </span>
+                            </Button>
+                        }
+                    />
+                </div>
             </div>
             <SaveQuery
                 savedQueries={savedQueries}

package/dist/containers/Tenant/Query/SavedQueries/SavedQueries.tsx

@@ -10,7 +10,7 @@ import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {IconWrapper} from '../../../../components/Icon';
 
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';

package/dist/containers/Tenant/Query/i18n/en.json

@@ -1,12 +1,19 @@
 {
-  "controls.query-mode-selector_type": "Type:",
+  "controls.query-mode-selector_type": "Query type:",
+
   "tabs.newQuery": "New query",
   "tabs.history": "History",
   "tabs.saved": "Saved",
+
   "history.empty": "History is empty",
   "saved.empty": "There are no saved queries",
+
   "delete-dialog.header": "Delete query",
   "delete-dialog.question": "Are you sure you want to delete query",
   "delete-dialog.delete": "Delete",
-  "delete-dialog.cancel": "Cancel"
+  "delete-dialog.cancel": "Cancel",
+
+  "preview.title": "Preview",
+  "preview.not-available": "Preview is not available",
+  "preview.close": "Close preview"
 }

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -1,12 +1,19 @@
 {
-  "controls.query-mode-selector_type": "Тип:",
+  "controls.query-mode-selector_type": "Тип запроса:",
+
   "tabs.newQuery": "Новый запрос",
   "tabs.history": "История",
   "tabs.saved": "Сохраненные",
+
   "history.empty": "История пуста",
   "saved.empty": "Нет сохраненных запросов",
+
   "delete-dialog.header": "Удалить запрос",
   "delete-dialog.question": "Вы уверены что хотите удалить запрос",
   "delete-dialog.delete": "Удалить",
-  "delete-dialog.cancel": "Отменить"
+  "delete-dialog.cancel": "Отменить",
+
+  "preview.title": "Предпросмотр",
+  "preview.not-available": "Предпросмотр недоступен",
+  "preview.close": "Закрыть предпросмотр"
 }

package/dist/containers/Tenants/Tenants.tsx

@@ -0,0 +1,269 @@
+import cn from 'bem-cn-lite';
+import {useDispatch} from 'react-redux';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+import {Loader, 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 {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 (
+            <div className={b('controls')}>
+                <Search
+                    value={searchValue}
+                    onChange={handleSearchChange}
+                    placeholder="Database name"
+                    className={b('search')}
+                />
+                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+            </div>
+        );
+    };
+
+    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 (
+            <div className={b('table-wrapper')}>
+                <DataTable
+                    theme="yandex-cloud"
+                    data={filteredTenants}
+                    columns={columns}
+                    settings={DEFAULT_TABLE_SETTINGS}
+                    emptyDataMessage="No such tenants"
+                />
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={'loader'}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    if (error) {
+        return <ResponseError error={error} />;
+    }
+
+    return (
+        <div className={b()}>
+            {renderControls()}
+            {renderTable()}
+        </div>
+    );
+};

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

@@ -16,5 +16,5 @@
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
-  "settings.enableAdditionalQueryModes.popover": "Adds 'data' and 'query' modes for run. Enables query modes for explain. May not work on some versions"
+  "settings.enableAdditionalQueryModes.popover": "Adds 'Data' and 'YQL - QueryService' modes. May not work on some versions"
 }

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

@@ -16,5 +16,5 @@
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
-  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'data' и 'query' для run. Включает возможность выбрать режим выполнения запроса для explain. Может работать некорректно на некоторых версиях"
+  "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data' и 'YQL - QueryService'. Может работать некорректно на некоторых версиях"
 }

package/dist/services/api.ts

@@ -28,7 +28,8 @@ import type {DescribeTopicResult} from '../types/api/topic';
 import type {TEvPDiskStateResponse} from '../types/api/pdisk';
 import type {TEvVDiskStateResponse} from '../types/api/vdisk';
 import type {TUserToken} from '../types/api/whoami';
-import type {INodesApiRequestParams} from '../types/store/nodes';
+import type {NodesApiRequestParams} from '../store/reducers/nodes/types';
+import type {StorageApiRequestParams} from '../store/reducers/storage/types';
 
 import {backend as BACKEND} from '../store';
 
@@ -81,14 +82,14 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         });
     }
     getNodes(
-        {tenant, filter, storage, type = 'any', tablets = true}: INodesApiRequestParams,
+        {tenant, visibleEntities, storage, type = 'any', tablets = true}: NodesApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
         return this.get<TNodesInfo>(
             this.getPath('/viewer/json/nodes?enums=true'),
             {
                 tenant,
-                with: filter,
+                with: visibleEntities,
                 storage,
                 type,
                 tablets,
@@ -102,15 +103,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), {path});
     }
     getStorageInfo(
-        {
-            tenant,
-            filter,
-            nodeId,
-        }: {
-            tenant?: string;
-            filter?: string;
-            nodeId: string;
-        },
+        {tenant, visibleEntities, nodeId}: StorageApiRequestParams,
         {concurrentId}: AxiosOptions = {},
     ) {
         return this.get<TStorageInfo>(
@@ -118,7 +111,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             {
                 tenant,
                 node_id: nodeId,
-                with: filter,
+                with: visibleEntities,
             },
             {
                 concurrentId,
@@ -289,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/executeQuery.ts

@@ -6,7 +6,7 @@ import type {
     ExecuteQueryState,
     MonacoHotKeyAction,
 } from '../../types/store/executeQuery';
-import type {QueryRequestParams, QueryModes} from '../../types/store/query';
+import type {QueryRequestParams, QueryMode} from '../../types/store/query';
 import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY} from '../../utils/constants';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
@@ -34,7 +34,6 @@ export const MONACO_HOT_KEY_ACTIONS = {
     sendQuery: 'sendQuery',
     goPrev: 'goPrev',
     goNext: 'goNext',
-    getExplain: 'getExplain',
 } as const;
 
 const initialState = {
@@ -148,7 +147,7 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
 };
 
 interface SendQueryParams extends QueryRequestParams {
-    mode?: QueryModes;
+    mode?: QueryMode;
 }
 
 export const sendExecuteQuery = ({query, database, mode}: SendQueryParams) => {

package/dist/store/reducers/explainQuery.ts

@@ -9,7 +9,7 @@ import type {
     ExplainQueryState,
     PreparedExplainResponse,
 } from '../../types/store/explainQuery';
-import type {QueryRequestParams, QueryModes} from '../../types/store/query';
+import type {QueryRequestParams, QueryMode} from '../../types/store/query';
 
 import {preparePlan} from '../../utils/prepareQueryExplain';
 import {parseQueryAPIExplainResponse, parseQueryExplainPlan} from '../../utils/query';
@@ -99,7 +99,7 @@ export const explainVersions = {
 const supportedExplainQueryVersions = Object.values(explainVersions);
 
 interface ExplainQueryParams extends QueryRequestParams {
-    mode?: QueryModes;
+    mode?: QueryMode;
 }
 
 export const getExplainQuery = ({query, database, mode}: ExplainQueryParams) => {

package/dist/store/reducers/index.ts

@@ -1,10 +1,10 @@
 import {combineReducers} from 'redux';
 
-import nodes from './nodes';
+import nodes from './nodes/nodes';
 import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
-import storage from './storage';
+import storage from './storage/storage';
 import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';