ydb-embedded-ui 3.0.1 → 3.2.0

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

@@ -0,0 +1,202 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
+import {Loader} from '@gravity-ui/uikit';
+
+import {DateRange, DateRangeValues} from '../../../../components/DateRange';
+import {Search} from '../../../../components/Search';
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+
+import {changeUserInput} from '../../../../store/reducers/executeQuery';
+import {
+    fetchTopQueries,
+    setTopQueriesFilters,
+    setTopQueriesState,
+} from '../../../../store/reducers/executeTopQueries';
+
+import type {KeyValueRow} from '../../../../types/api/query';
+import type {EPathType} from '../../../../types/api/schema';
+import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
+import type {IQueryResult} from '../../../../types/store/query';
+
+import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {prepareQueryError} from '../../../../utils/query';
+
+import {isColumnEntityType} from '../../utils/schema';
+import {TenantGeneralTabsIds} from '../../TenantPages';
+
+import i18n from './i18n';
+import './TopQueries.scss';
+
+const b = cn('kv-top-queries');
+
+const TABLE_SETTINGS: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRenderType: 'variable',
+};
+
+const MAX_QUERY_HEIGHT = 10;
+const COLUMNS: Column<KeyValueRow>[] = [
+    {
+        name: 'CPUTimeUs',
+        width: 140,
+        sortAccessor: (row) => Number(row['CPUTimeUs']),
+    },
+    {
+        name: 'QueryText',
+        width: 500,
+        sortable: false,
+        render: ({value}) => <TruncatedQuery value={value} maxQueryHeight={MAX_QUERY_HEIGHT} />,
+    },
+];
+
+interface TopQueriesProps {
+    path: string;
+    changeSchemaTab: (tab: TenantGeneralTabsIds) => void;
+    type?: EPathType;
+}
+
+export const TopQueries = ({path, type, changeSchemaTab}: TopQueriesProps) => {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        wasLoaded,
+        error,
+        data: {result: data = undefined} = {},
+        filters: storeFilters,
+    } = useTypedSelector((state) => state.executeTopQueries);
+
+    const preventFetch = useRef(false);
+
+    // some filters sync between redux state and URL
+    // component state is for default values,
+    // default values are determined from the query response, and should not propagate to URL
+    const [filters, setFilters] = useState<ITopQueriesFilters>(storeFilters);
+
+    useEffect(() => {
+        dispatch(setTopQueriesFilters(filters));
+    }, [dispatch, filters]);
+
+    const setDefaultFiltersFromResponse = (responseData?: IQueryResult) => {
+        const intervalEnd = responseData?.result?.[0]?.IntervalEnd;
+
+        if (intervalEnd) {
+            const to = new Date(intervalEnd).getTime();
+            const from = new Date(to - HOUR_IN_SECONDS * 1000).getTime();
+
+            setFilters((currentFilters) => {
+                // request without filters returns the latest interval with data
+                // only in this case should update filters in ui
+                // also don't update if user already interacted with controls
+                const shouldUpdateFilters = !currentFilters.from && !currentFilters.to;
+
+                if (!shouldUpdateFilters) {
+                    return currentFilters;
+                }
+
+                preventFetch.current = true;
+
+                return {...currentFilters, from, to};
+            });
+        }
+    };
+
+    useAutofetcher(
+        (isBackground) => {
+            if (preventFetch.current) {
+                preventFetch.current = false;
+                return;
+            }
+
+            if (!isBackground) {
+                dispatch(
+                    setTopQueriesState({
+                        wasLoaded: false,
+                        data: undefined,
+                    }),
+                );
+            }
+
+            // @ts-expect-error
+            // typed dispatch required, remove error expectation after adding it
+            dispatch(fetchTopQueries({database: path, filters})).then(
+                setDefaultFiltersFromResponse,
+            );
+        },
+        [dispatch, filters, path],
+        autorefresh,
+    );
+
+    const handleRowClick = useCallback(
+        (row) => {
+            const {QueryText: input} = row;
+
+            dispatch(changeUserInput({input}));
+            changeSchemaTab(TenantGeneralTabsIds.query);
+        },
+        [changeSchemaTab, dispatch],
+    );
+
+    const handleTextSearchUpdate = (text: string) => {
+        setFilters((currentFilters) => ({...currentFilters, text}));
+    };
+
+    const handleDateRangeChange = (value: DateRangeValues) => {
+        setFilters((currentFilters) => ({...currentFilters, ...value}));
+    };
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        if (loading && !wasLoaded) {
+            return renderLoader();
+        }
+
+        if (error && !error.isCancelled) {
+            return <div className="error">{prepareQueryError(error)}</div>;
+        }
+
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
+        }
+
+        return (
+            <div className={b('result')}>
+                <DataTable
+                    columns={COLUMNS}
+                    data={data}
+                    settings={TABLE_SETTINGS}
+                    onRowClick={handleRowClick}
+                    theme="yandex-cloud"
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div className={b()}>
+            <div className={b('controls')}>
+                <Search
+                    value={filters.text}
+                    onChange={handleTextSearchUpdate}
+                    placeholder={i18n('filter.text.placeholder')}
+                    className={b('search')}
+                />
+                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
+            </div>
+            {renderContent()}
+        </div>
+    );
+};

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

@@ -0,0 +1,4 @@
+{
+  "no-data": "No data",
+  "filter.text.placeholder": "Search by query text..."
+}

package/dist/containers/Tenant/Diagnostics/TopQueries/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-top-queries';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,4 @@
+{
+  "no-data": "Нет данных",
+  "filter.text.placeholder": "Искать по тексту запроса..."
+}

package/dist/containers/Tenant/Diagnostics/TopQueries/index.ts

@@ -0,0 +1 @@
+export * from './TopQueries';

package/dist/containers/UserSettings/UserSettings.tsx

@@ -67,7 +67,7 @@ const mapStateToProps = (state: any) => {
 
     return {
         theme,
-        invertedDisks,
+        invertedDisks: JSON.parse(invertedDisks),
     };
 };
 

package/dist/services/api.d.ts

@@ -48,6 +48,13 @@ interface Window {
         getTenantInfo: (params: {
             path: string;
         }) => Promise<import('../types/api/tenant').TTenantInfo>;
+        getTabletsInfo: (params: {
+            nodes?: string[];
+            path?: string;
+        }) => Promise<import('../types/api/tablet').TEvTabletStateResponse>;
+        getHeatmapData: (params: {
+            path: string;
+        }) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
         [method: string]: Function;
     };
 }

package/dist/store/reducers/describe.ts

@@ -2,7 +2,6 @@ import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {IConsumer} from '../../types/api/consumers';
 import {
     IDescribeRootStateSlice,
     IDescribeState,
@@ -100,6 +99,10 @@ const selectConsumersNames = (state: IDescribeRootStateSlice, path?: string) =>
         ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
         : undefined;
 
+interface IConsumer {
+    name: string;
+}
+
 export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
     createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
 

package/dist/store/reducers/executeTopQueries.ts

@@ -0,0 +1,170 @@
+import type {AnyAction, Reducer} from 'redux';
+import type {ThunkAction} from 'redux-thunk';
+
+import '../../services/api';
+import {
+    ITopQueriesAction,
+    ITopQueriesFilters,
+    ITopQueriesState,
+} from '../../types/store/executeTopQueries';
+import {IQueryResult} from '../../types/store/query';
+
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+import type {IRootState} from '.';
+
+export const FETCH_TOP_QUERIES = createRequestActionTypes('top-queries', 'FETCH_TOP_QUERIES');
+const SET_TOP_QUERIES_STATE = 'top-queries/SET_TOP_QUERIES_STATE';
+const SET_TOP_QUERIES_FILTERS = 'top-queries/SET_TOP_QUERIES_FILTERS';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+    filters: {},
+};
+
+const getMaxIntervalSubquery = (path: string) => `(
+    SELECT
+        MAX(IntervalEnd)
+    FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
+)`;
+
+function getFiltersConditions(path: string, filters?: ITopQueriesFilters) {
+    const conditions: string[] = [];
+
+    if (filters?.from && filters?.to && filters.from > filters.to) {
+        throw new Error('Invalid date range');
+    }
+
+    if (filters?.from) {
+        // matching `from` & `to` is an edge case
+        // other cases should not include the starting point, since intervals are stored using the ending time
+        const gt = filters.to === filters.from ? '>=' : '>';
+        conditions.push(`IntervalEnd ${gt} Timestamp('${new Date(filters.from).toISOString()}')`);
+    }
+
+    if (filters?.to) {
+        conditions.push(`IntervalEnd <= Timestamp('${new Date(filters.to).toISOString()}')`);
+    }
+
+    if (!filters?.from && !filters?.to) {
+        conditions.push(`IntervalEnd IN ${getMaxIntervalSubquery(path)}`);
+    }
+
+    if (filters?.text) {
+        conditions.push(`QueryText ILIKE '%${filters.text}%'`);
+    }
+
+    return conditions.join(' AND ');
+}
+
+const getQueryText = (path: string, filters?: ITopQueriesFilters) => {
+    const filterConditions = getFiltersConditions(path, filters);
+    return `
+SELECT
+    CPUTime as CPUTimeUs,
+    QueryText,
+    IntervalEnd
+FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
+WHERE ${filterConditions || 'true'}
+`;
+};
+
+const executeTopQueries: Reducer<ITopQueriesState, ITopQueriesAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case FETCH_TOP_QUERIES.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TOP_QUERIES.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                error: undefined,
+                wasLoaded: true,
+            };
+        }
+        // 401 Unauthorized error is handled by GenericAPI
+        case FETCH_TOP_QUERIES.FAILURE: {
+            return {
+                ...state,
+                error: action.error || 'Unauthorized',
+                loading: false,
+            };
+        }
+        case SET_TOP_QUERIES_STATE:
+            return {
+                ...state,
+                ...action.data,
+            };
+        case SET_TOP_QUERIES_FILTERS:
+            return {
+                ...state,
+                filters: {
+                    ...state.filters,
+                    ...action.filters,
+                },
+            };
+        default:
+            return state;
+    }
+};
+
+type FetchTopQueries = (params: {
+    database: string;
+    filters?: ITopQueriesFilters;
+}) => ThunkAction<Promise<IQueryResult | undefined>, IRootState, unknown, AnyAction>;
+
+export const fetchTopQueries: FetchTopQueries =
+    ({database, filters}) =>
+    async (dispatch, getState) => {
+        try {
+            return createApiRequest({
+                request: window.api.sendQuery(
+                    {
+                        schema: 'modern',
+                        query: getQueryText(database, filters),
+                        database,
+                        action: 'execute-scan',
+                    },
+                    {
+                        concurrentId: 'executeTopQueries',
+                    },
+                ),
+                actions: FETCH_TOP_QUERIES,
+                dataHandler: parseQueryAPIExecuteResponse,
+            })(dispatch, getState);
+        } catch (error) {
+            dispatch({
+                type: FETCH_TOP_QUERIES.FAILURE,
+                error,
+            });
+
+            throw error;
+        }
+    };
+
+export function setTopQueriesState(state: Partial<ITopQueriesState>) {
+    return {
+        type: SET_TOP_QUERIES_STATE,
+        data: state,
+    } as const;
+}
+
+export function setTopQueriesFilters(filters: Partial<ITopQueriesFilters>) {
+    return {
+        type: SET_TOP_QUERIES_FILTERS,
+        filters,
+    } as const;
+}
+
+export default executeTopQueries;

package/dist/store/reducers/settings.js

@@ -30,7 +30,7 @@ export const initialState = {
         ...defaultUserSettings,
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'light'),
-        [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY) === 'true',
+        [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
         [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),

package/dist/store/reducers/shardsWorkload.ts

@@ -1,18 +1,24 @@
 import type {Reducer} from 'redux';
 
 import '../../services/api';
-import type {IShardsWorkloadAction, IShardsWorkloadState} from '../../types/store/shardsWorkload';
+import type {
+    IShardsWorkloadAction,
+    IShardsWorkloadFilters,
+    IShardsWorkloadState,
+} from '../../types/store/shardsWorkload';
 
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
 export const SEND_SHARD_QUERY = createRequestActionTypes('query', 'SEND_SHARD_QUERY');
-const SET_SHARD_QUERY_OPTIONS = 'query/SET_SHARD_QUERY_OPTIONS';
+const SET_SHARD_STATE = 'query/SET_SHARD_STATE';
+const SET_SHARD_QUERY_FILTERS = 'shardsWorkload/SET_SHARD_QUERY_FILTERS';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
+    filters: {},
 };
 
 export interface SortOrder {
@@ -24,22 +30,56 @@ function formatSortOrder({columnId, order}: SortOrder) {
     return `${columnId} ${order}`;
 }
 
-function createShardQuery(path: string, sortOrder?: SortOrder[], tenantName?: string) {
-    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+function getFiltersConditions(filters?: IShardsWorkloadFilters) {
+    const conditions: string[] = [];
+
+    if (filters?.from && filters?.to && filters.from > filters.to) {
+        throw new Error('Invalid date range');
+    }
 
+    if (filters?.from) {
+        // matching `from` & `to` is an edge case
+        // other cases should not include the starting point, since intervals are stored using the ending time
+        const gt = filters.to === filters.from ? '>=' : '>';
+        conditions.push(`IntervalEnd ${gt} Timestamp('${new Date(filters.from).toISOString()}')`);
+    }
+
+    if (filters?.to) {
+        conditions.push(`IntervalEnd <= Timestamp('${new Date(filters.to).toISOString()}')`);
+    }
+
+    return conditions.join(' AND ');
+}
+
+function createShardQuery(
+    path: string,
+    filters?: IShardsWorkloadFilters,
+    sortOrder?: SortOrder[],
+    tenantName?: string,
+) {
     const pathSelect = tenantName
         ? `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path`
         : 'Path';
 
+    let where = `Path='${path}' OR Path LIKE '${path}/%'`;
+
+    const filterConditions = getFiltersConditions(filters);
+    if (filterConditions.length) {
+        where = `(${where}) AND ${filterConditions}`;
+    }
+
+    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+
     return `SELECT
     ${pathSelect},
     TabletId,
     CPUCores,
-    DataSize
-FROM \`.sys/partition_stats\`
-WHERE
-    Path='${path}'
-    OR Path LIKE '${path}/%'
+    DataSize,
+    NodeId,
+    PeakTime,
+    InFlightTxCount
+FROM \`.sys/top_partitions_one_hour\`
+WHERE ${where}
 ${orderBy}
 LIMIT 20`;
 }
@@ -75,11 +115,19 @@ const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
                 loading: false,
             };
         }
-        case SET_SHARD_QUERY_OPTIONS:
+        case SET_SHARD_STATE:
             return {
                 ...state,
                 ...action.data,
             };
+        case SET_SHARD_QUERY_FILTERS:
+            return {
+                ...state,
+                filters: {
+                    ...state.filters,
+                    ...action.filters,
+                },
+            };
         default:
             return state;
     }
@@ -89,28 +137,46 @@ interface SendShardQueryParams {
     database?: string;
     path?: string;
     sortOrder?: SortOrder[];
+    filters?: IShardsWorkloadFilters;
 }
 
-export const sendShardQuery = ({database, path = '', sortOrder}: SendShardQueryParams) => {
-    return createApiRequest({
-        request: window.api.sendQuery({
-            schema: 'modern',
-            query: createShardQuery(path, sortOrder, database),
-            database,
-            action: queryAction,
-        }, {
-            concurrentId: 'topShards',
-        }),
-        actions: SEND_SHARD_QUERY,
-        dataHandler: parseQueryAPIExecuteResponse,
-    });
+export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendShardQueryParams) => {
+    try {
+        return createApiRequest({
+            request: window.api.sendQuery(
+                {
+                    schema: 'modern',
+                    query: createShardQuery(path, filters, sortOrder, database),
+                    database,
+                    action: queryAction,
+                },
+                {
+                    concurrentId: 'shardsWorkload',
+                },
+            ),
+            actions: SEND_SHARD_QUERY,
+            dataHandler: parseQueryAPIExecuteResponse,
+        });
+    } catch (error) {
+        return {
+            type: SEND_SHARD_QUERY.FAILURE,
+            error,
+        };
+    }
 };
 
-export function setShardQueryOptions(options: Partial<IShardsWorkloadState>) {
+export function setShardsState(options: Partial<IShardsWorkloadState>) {
     return {
-        type: SET_SHARD_QUERY_OPTIONS,
+        type: SET_SHARD_STATE,
         data: options,
     } as const;
 }
 
+export function setShardsQueryFilters(filters: Partial<IShardsWorkloadFilters>) {
+    return {
+        type: SET_SHARD_QUERY_FILTERS,
+        filters,
+    } as const;
+}
+
 export default shardsWorkload;

package/dist/store/reducers/storage.js

@@ -307,6 +307,8 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
         return {
             NodeId: node.NodeId,
             FQDN: systemState.Host,
+            DataCenter: systemState.DataCenter,
+            Rack: systemState.Rack,
             uptime: calcUptime(systemState.StartTime),
             StartTime: systemState.StartTime,
             PDisks: node.PDisks,