ydb-embedded-ui 4.9.0 → 4.10.0

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

@@ -9,7 +9,7 @@ import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {Search} from '../../../../components/Search';
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {
@@ -23,7 +23,11 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
-import {TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -50,7 +54,10 @@ const COLUMNS: Column<KeyValueRow>[] = [
         sortable: false,
         render: ({row}) => (
             <div className={b('query')}>
-                <TruncatedQuery value={row.QueryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                <TruncatedQuery
+                    value={row.QueryText?.toString()}
+                    maxQueryHeight={MAX_QUERY_HEIGHT}
+                />
             </div>
         ),
     },

package/dist/containers/Tenant/{Preview → Query/Preview}/Preview.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .kv-preview {
     height: 100%;

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

@@ -0,0 +1,121 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader, Button} from '@gravity-ui/uikit';
+
+import type {EPathType} from '../../../../types/api/schema';
+import {sendQuery, setQueryOptions} from '../../../../store/reducers/preview';
+import {setShowPreview} from '../../../../store/reducers/schema/schema';
+import {prepareQueryError} from '../../../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+
+import {Icon} from '../../../../components/Icon';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryResultTable} from '../../../../components/QueryResultTable';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+
+import {isTableType} from '../../utils/schema';
+
+import i18n from '../i18n';
+
+import './Preview.scss';
+
+const b = cn('kv-preview');
+
+interface PreviewProps {
+    database: string;
+    type: EPathType | undefined;
+}
+
+export const Preview = ({database, type}: PreviewProps) => {
+    const dispatch = useDispatch();
+
+    const {data = {}, loading, error, wasLoaded} = useTypedSelector((state) => state.preview);
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+
+    const sendQueryForPreview = useCallback(
+        (isBackground) => {
+            if (!isTableType(type)) {
+                return;
+            }
+
+            if (!isBackground) {
+                dispatch(
+                    setQueryOptions({
+                        wasLoaded: false,
+                        data: undefined,
+                    }),
+                );
+            }
+
+            const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
+
+            dispatch(
+                sendQuery({
+                    query,
+                    database,
+                    action: 'execute-scan',
+                }),
+            );
+        },
+        [dispatch, database, currentSchemaPath, type],
+    );
+
+    useAutofetcher(sendQueryForPreview, [sendQueryForPreview], autorefresh);
+
+    const handleClosePreview = () => {
+        dispatch(setShowPreview(false));
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className={b('header')}>
+                <div className={b('title')}>
+                    {i18n('preview.title')}{' '}
+                    <div className={b('table-name')}>{currentSchemaPath}</div>
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton disabled={Boolean(error)} />
+                    <Button
+                        view="flat-secondary"
+                        onClick={handleClosePreview}
+                        title={i18n('preview.close')}
+                    >
+                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader-container')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    let message;
+
+    if (!isTableType(type)) {
+        message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
+    } else if (error) {
+        message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
+    }
+
+    const content = message ?? (
+        <div className={b('result')}>
+            <QueryResultTable data={data.result} columns={data.columns} />
+        </div>
+    );
+
+    return (
+        <div className={b()}>
+            {renderHeader()}
+            {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
+        </div>
+    );
+};

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

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {useTypedSelector} from '../../../../utils/hooks';

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.js

@@ -35,7 +35,7 @@ import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
 } from '../../utils/paneVisibilityToggleHelpers';
-import Preview from '../../Preview/Preview';
+import {Preview} from '../Preview/Preview';
 
 import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
@@ -104,8 +104,10 @@ function QueryEditor(props) {
 
     useEffect(() => {
         if (savedPath !== path) {
+            if (savedPath) {
+                changeUserInput({input: ''});
+            }
             setTenantPath(path);
-            changeUserInput({input: ''});
         }
     }, [changeUserInput, setTenantPath, path, savedPath]);
 
@@ -380,12 +382,8 @@ function QueryEditor(props) {
     };
 
     const renderPreview = () => {
-        const {path, type, currentSchema = {}} = props;
-        const partCount = currentSchema?.PathDescription?.TableStats?.PartCount;
-        // onExpandResultHandler();
-        return (
-            <Preview database={path} table={currentSchema.Path} type={type} partCount={partCount} />
-        );
+        const {path, type} = props;
+        return <Preview database={path} type={type} />;
     };
 
     const handlePreviousHistoryClick = () => {

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": "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": "Тип запроса:",
+
   "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/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

@@ -2,13 +2,13 @@ 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 type {ProblemFilterValue} from '../settings/types';
 import {createRequestActionTypes, createApiRequest} from '../../utils';
 import {ProblemFilterValues} from '../settings/settings';
 
@@ -181,7 +181,7 @@ const getNodesList = (state: NodesStateSlice) => state.nodes.data;
 
 const filterNodesByProblemsStatus = (
     nodesList: NodesPreparedEntity[] = [],
-    problemFilter: ValueOf<typeof ProblemFilterValues>,
+    problemFilter: ProblemFilterValue,
 ) => {
     if (problemFilter === ProblemFilterValues.ALL) {
         return nodesList;
@@ -192,8 +192,8 @@ const filterNodesByProblemsStatus = (
     });
 };
 
-export const filterNodesByUptime = (
-    nodesList: NodesPreparedEntity[] = [],
+export const filterNodesByUptime = <T extends {StartTime?: string}>(
+    nodesList: T[] = [],
     nodesUptimeFilter: NodesUptimeFilterValues,
 ) => {
     if (nodesUptimeFilter === NodesUptimeFilterValues.All) {

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>;
 }