ydb-embedded-ui 3.1.0 → 3.2.1

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/{heatmap.js → heatmap.ts}

@@ -1,7 +1,17 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
+
 import '../../services/api';
+import type {
+    IHeatmapAction,
+    IHeatmapApiRequestParams,
+    IHeatmapState,
+    IHeatmapTabletData,
+} from '../../types/store/heatmap';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_HEATMAP = createRequestActionTypes('heatmap', 'FETCH_HEATMAP');
 
-const FETCH_TABLETS = createRequestActionTypes('heatmap', 'FETCH_TABLETS');
 const SET_HEATMAP_OPTIONS = 'heatmap/SET_HEATMAP_OPTIONS';
 
 export const initialState = {
@@ -12,15 +22,15 @@ export const initialState = {
     heatmap: false,
 };
 
-const tablets = function z(state = initialState, action) {
+const heatmap: Reducer<IHeatmapState, IHeatmapAction> = (state = initialState, action) => {
     switch (action.type) {
-        case FETCH_TABLETS.REQUEST: {
+        case FETCH_HEATMAP.REQUEST: {
             return {
                 ...state,
                 loading: true,
             };
         }
-        case FETCH_TABLETS.SUCCESS: {
+        case FETCH_HEATMAP.SUCCESS: {
             return {
                 ...state,
                 ...action.data,
@@ -29,7 +39,7 @@ const tablets = function z(state = initialState, action) {
                 error: undefined,
             };
         }
-        case FETCH_TABLETS.FAILURE: {
+        case FETCH_HEATMAP.FAILURE: {
             return {
                 ...state,
                 error: action.error,
@@ -47,16 +57,16 @@ const tablets = function z(state = initialState, action) {
     }
 };
 
-export function getTabletsInfo({nodes, path}) {
+export function getTabletsInfo({nodes, path}: IHeatmapApiRequestParams) {
     return createApiRequest({
         request: Promise.all([
             window.api.getTabletsInfo({nodes, path}),
             window.api.getHeatmapData({path}),
         ]),
-        actions: FETCH_TABLETS,
-        dataHandler: ([tabletsData = [], describe = {}]) => {
+        actions: FETCH_HEATMAP,
+        dataHandler: ([tabletsData = {}, describe = {}]) => {
             const {TabletStateInfo: tablets = []} = tabletsData;
-            const TabletsMap = new Map();
+            const TabletsMap: Map<string, IHeatmapTabletData> = new Map();
             const {PathDescription = {}} = describe;
             const {
                 TablePartitions = [],
@@ -65,7 +75,9 @@ export function getTabletsInfo({nodes, path}) {
             } = PathDescription;
 
             tablets.forEach((item) => {
-                TabletsMap.set(item.TabletId, item);
+                if (item.TabletId) {
+                    TabletsMap.set(item.TabletId, item);
+                }
             });
 
             TablePartitions.forEach((item, index) => {
@@ -74,15 +86,18 @@ export function getTabletsInfo({nodes, path}) {
                     TablePartitionStats[index],
                     TablePartitionMetrics[index],
                 );
-                TabletsMap.set(item.DatashardId, {
-                    ...TabletsMap.get(item.DatashardId),
-                    metrics,
-                });
+                if (item.DatashardId) {
+                    TabletsMap.set(item.DatashardId, {
+                        ...TabletsMap.get(item.DatashardId),
+                        metrics,
+                    });
+                }
             });
 
             const preparedTablets = Array.from(TabletsMap.values());
             const selectMetrics =
                 preparedTablets[0] &&
+                preparedTablets[0].metrics &&
                 Object.keys(preparedTablets[0].metrics).map((item) => {
                     return {
                         value: item,
@@ -95,11 +110,11 @@ export function getTabletsInfo({nodes, path}) {
     });
 }
 
-export function setHeatmapOptions(options) {
+export function setHeatmapOptions(options: Partial<IHeatmapState>) {
     return {
         type: SET_HEATMAP_OPTIONS,
         data: options,
-    };
+    } as const;
 }
 
-export default tablets;
+export default heatmap;

package/dist/store/reducers/settings.js

@@ -1,11 +1,11 @@
 import {
-    defaultUserSettings,
     ALL,
     SAVED_QUERIES_KEY,
     THEME_KEY,
     TENANT_INITIAL_TAB_KEY,
     QUERY_INITIAL_RUN_ACTION_KEY,
     INVERTED_DISKS_KEY,
+    ASIDE_HEADER_COMPACT_KEY,
 } from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
@@ -24,16 +24,26 @@ export function readSavedSettingsValue(key, defaultValue) {
     return savedValue ?? defaultValue;
 }
 
+// navigation managed its compact state internally before, and its approach is not compatible with settings
+// try reading the old localStorage entry to use it as a default value, for backward compatibility
+// assume it is safe to remove this code block if it is at least a few months old
+// there a two of these, search for a similar comment
+let legacyAsideNavCompactState = '';
+try {
+    legacyAsideNavCompactState = String(JSON.parse(getValueFromLS('nvAsideHeader')).isCompact);
+    localStorage.removeItem('nvAsideHeader');
+} catch {}
+
 export const initialState = {
     problemFilter: ALL,
     userSettings: {
-        ...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),
+        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, legacyAsideNavCompactState || 'true'),
     },
     systemSettings,
 };

package/dist/store/reducers/shardsWorkload.ts

@@ -12,8 +12,8 @@ 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_TOP_SHARDS_FILTERS = 'shardsWorkload/SET_TOP_SHARDS_FILTERS';
+const SET_SHARD_STATE = 'query/SET_SHARD_STATE';
+const SET_SHARD_QUERY_FILTERS = 'shardsWorkload/SET_SHARD_QUERY_FILTERS';
 
 const initialState = {
     loading: false,
@@ -115,12 +115,12 @@ const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
                 loading: false,
             };
         }
-        case SET_SHARD_QUERY_OPTIONS:
+        case SET_SHARD_STATE:
             return {
                 ...state,
                 ...action.data,
             };
-        case SET_TOP_SHARDS_FILTERS:
+        case SET_SHARD_QUERY_FILTERS:
             return {
                 ...state,
                 filters: {
@@ -151,7 +151,7 @@ export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendSh
                     action: queryAction,
                 },
                 {
-                    concurrentId: 'topShards',
+                    concurrentId: 'shardsWorkload',
                 },
             ),
             actions: SEND_SHARD_QUERY,
@@ -165,16 +165,16 @@ export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendSh
     }
 };
 
-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 setTopShardFilters(filters: Partial<IShardsWorkloadFilters>) {
+export function setShardsQueryFilters(filters: Partial<IShardsWorkloadFilters>) {
     return {
-        type: SET_TOP_SHARDS_FILTERS,
+        type: SET_SHARD_QUERY_FILTERS,
         filters,
     } as const;
 }

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,

package/dist/store/reducers/{tablets.js → tablets.ts}

@@ -1,7 +1,20 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
 import '../../services/api';
 
-const FETCH_TABLETS = createRequestActionTypes('tablets', 'FETCH_TABLETS');
+import type {ETabletState, EType} from '../../types/api/tablet';
+import type {
+    ITabletsAction,
+    ITabletsApiRequestParams,
+    ITabletsState,
+} from '../../types/store/tablets';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_TABLETS = createRequestActionTypes('tablets', 'FETCH_TABLETS');
+
+const CLEAR_WAS_LOADING_TABLETS = 'tablets/CLEAR_WAS_LOADING_TABLETS';
+const SET_STATE_FILTER = 'tablets/SET_STATE_FILTER';
+const SET_TYPE_FILTER = 'tablets/SET_TYPE_FILTER';
 
 const initialState = {
     loading: true,
@@ -10,13 +23,12 @@ const initialState = {
     typeFilter: [],
 };
 
-const tablets = function z(state = initialState, action) {
+const tablets: Reducer<ITabletsState, ITabletsAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_TABLETS.REQUEST: {
             return {
                 ...state,
                 loading: true,
-                requestTime: new Date().getTime(),
             };
         }
         case FETCH_TABLETS.SUCCESS: {
@@ -35,20 +47,20 @@ const tablets = function z(state = initialState, action) {
                 loading: false,
             };
         }
-        case 'CLEAR_WAS_LOADING_TABLETS': {
+        case CLEAR_WAS_LOADING_TABLETS: {
             return {
                 ...state,
                 wasLoaded: false,
                 loading: true,
             };
         }
-        case 'SET_STATE_FILTER': {
+        case SET_STATE_FILTER: {
             return {
                 ...state,
                 stateFilter: action.data,
             };
         }
-        case 'SET_TYPE_FILTER': {
+        case SET_TYPE_FILTER: {
             return {
                 ...state,
                 typeFilter: action.data,
@@ -59,25 +71,26 @@ const tablets = function z(state = initialState, action) {
     }
 };
 
-export const setStateFilter = (stateFilter) => {
+export const setStateFilter = (stateFilter: ETabletState[]) => {
     return {
-        type: 'SET_STATE_FILTER',
+        type: SET_STATE_FILTER,
         data: stateFilter,
-    };
+    } as const;
 };
 
-export const setTypeFilter = (typeFilter) => {
+export const setTypeFilter = (typeFilter: EType[]) => {
     return {
-        type: 'SET_TYPE_FILTER',
+        type: SET_TYPE_FILTER,
         data: typeFilter,
-    };
+    } as const;
 };
 
-export const clearWasLoadingFlag = () => ({
-    type: 'CLEAR_WAS_LOADING_TABLETS',
-});
+export const clearWasLoadingFlag = () =>
+    ({
+        type: CLEAR_WAS_LOADING_TABLETS,
+    } as const);
 
-export function getTabletsInfo(data) {
+export function getTabletsInfo(data: ITabletsApiRequestParams) {
     return createApiRequest({
         request: window.api.getTabletsInfo(data),
         actions: FETCH_TABLETS,

package/dist/store/state-url-mapping.js

@@ -48,14 +48,22 @@ const paramSetup = {
         generalTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
-        topShardsFrom: {
+        shardsDateFrom: {
             stateKey: 'shardsWorkload.filters.from',
             type: 'number',
         },
-        topShardsTo: {
+        shardsDateTo: {
             stateKey: 'shardsWorkload.filters.to',
             type: 'number',
         },
+        topQueriesDateFrom: {
+            stateKey: 'executeTopQueries.filters.from',
+            type: 'number',
+        },
+        topQueriesDateTo: {
+            stateKey: 'executeTopQueries.filters.to',
+            type: 'number',
+        },
     },
 };
 

package/dist/types/api/compute.ts

@@ -0,0 +1,52 @@
+import {EFlag} from './enums';
+import {TEndpoint, TLegacyNodeLocation, TPoolStats} from './nodes';
+import {TMetrics} from './tenant';
+
+// endpoint: viewer/json/compute
+// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+
+export interface TComputeInfo {
+    Overall: EFlag;
+    Tenants?: TComputeTenantInfo[];
+    Errors?: string[];
+}
+
+interface TComputeTenantInfo {
+    Overall: EFlag;
+    Name: string;
+    Nodes?: TComputeNodeInfo[];
+}
+
+interface TComputeNodeInfo {
+    /** uint64 */
+    StartTime: string;
+    /** uint64 */
+    ChangeTime: string;
+    SystemLocation: TLegacyNodeLocation;
+    /** double */
+    LoadAverage: number[];
+    NumberOfCpus: number;
+    Overall: EFlag;
+    NodeId: number;
+    DataCenter: string;
+    Rack: string;
+    Host: string;
+    Version: string;
+    PoolStats?: TPoolStats[];
+    Endpoints?: TEndpoint[];
+    Roles?: string[];
+    /** uint64 */
+    MemoryUsed?: string;
+    /** uint64 */
+    MemoryLimit?: string;
+    Metrics: TMetrics;
+    Tablets?: TTabletStateInfo[];
+}
+
+// Tablets in compute nodes
+// Types for tabletInfo and tablets inside nodes and storage endpoints are in tablet.ts
+export interface TTabletStateInfo {
+    Type: string;
+    State: EFlag;
+    Count: number;
+}