ydb-embedded-ui 4.19.2 → 4.20.0

package/dist/containers/Tenant/Query/ExecuteResult/{ExecuteResult.js → ExecuteResult.tsx}

@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import React, {type ReactNode, useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 import JSONTree from 'react-json-inspector';
 
@@ -11,13 +11,15 @@ import EnableFullscreenButton from '../../../../components/EnableFullscreenButto
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
 import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 
+import type {ValueOf} from '../../../../types/common';
+import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
-
 import {prepareQueryError} from '../../../../utils/query';
+import {useTypedSelector} from '../../../../utils/hooks';
 
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
-import ResultIssues from '../Issues/Issues';
+import {ResultIssues} from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 
 import './ExecuteResult.scss';
@@ -27,31 +29,51 @@ const b = cn('ydb-query-execute-result');
 const resultOptionsIds = {
     result: 'result',
     stats: 'stats',
-};
+} as const;
+
+type SectionID = ValueOf<typeof resultOptionsIds>;
 
 const resultOptions = [
     {value: resultOptionsIds.result, content: 'Result'},
     {value: resultOptionsIds.stats, content: 'Stats'},
 ];
 
-export function ExecuteResult(props) {
-    const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
-    const isFullscreen = useSelector((state) => state.fullscreen);
+interface ExecuteResultProps {
+    textResults: string;
+    result: ReactNode;
+    stats: IQueryResult['stats'] | undefined;
+    error: string | QueryErrorResponse | undefined;
+    copyDisabled?: boolean;
+    isResultsCollapsed?: boolean;
+    onCollapseResults: VoidFunction;
+    onExpandResults: VoidFunction;
+}
+
+export function ExecuteResult({
+    textResults,
+    result,
+    stats,
+    error,
+    copyDisabled,
+    isResultsCollapsed,
+    onCollapseResults,
+    onExpandResults,
+}: ExecuteResultProps) {
+    const [activeSection, setActiveSection] = useState<SectionID>(resultOptionsIds.result);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
     const dispatch = useDispatch();
 
     useEffect(() => {
         return () => {
             dispatch(disableFullscreen());
         };
-    }, []);
+    }, [dispatch]);
 
-    const onSelectSection = (value) => {
-        setActiveSection(value);
+    const onSelectSection = (value: string) => {
+        setActiveSection(value as SectionID);
     };
 
     const renderClipboardButton = () => {
-        const {textResults, copyDisabled} = props;
-
         return (
             <CopyToClipboard
                 text={textResults}
@@ -65,7 +87,7 @@ export function ExecuteResult(props) {
     const renderStats = () => {
         const content = (
             <JSONTree
-                data={props.stats}
+                data={stats}
                 isExpanded={() => true}
                 className={b('inspector')}
                 searchOptions={{
@@ -86,8 +108,6 @@ export function ExecuteResult(props) {
     };
 
     const renderResult = () => {
-        const {result} = props;
-
         return (
             <React.Fragment>
                 {result}
@@ -101,11 +121,11 @@ export function ExecuteResult(props) {
     };
 
     const renderIssues = () => {
-        const error = props.error;
-
-        const hasIssues = error?.data?.issues && Array.isArray(error.data.issues);
+        if (!error) {
+            return null;
+        }
 
-        if (hasIssues) {
+        if (typeof error === 'object' && error.data?.issues && Array.isArray(error.data.issues)) {
             return (
                 <React.Fragment>
                     <ResultIssues data={error.data} />
@@ -120,20 +140,20 @@ export function ExecuteResult(props) {
             );
         }
 
-        if (error) {
-            return <div className={b('error')}>{prepareQueryError(error)}</div>;
-        }
+        const parsedError = typeof error === 'string' ? error : prepareQueryError(error);
+
+        return <div className={b('error')}>{parsedError}</div>;
     };
 
     return (
         <React.Fragment>
             <div className={b('controls')}>
                 <div className={b('controls-right')}>
-                    <QueryExecutionStatus error={props.error} />
+                    <QueryExecutionStatus error={error} />
 
-                    {props.stats && !props.error && (
+                    {stats && !error && (
                         <React.Fragment>
-                            <QueryDuration duration={props.stats?.DurationUs} />
+                            <QueryDuration duration={stats?.DurationUs} />
                             <Divider />
                             <RadioButton
                                 options={resultOptions}
@@ -147,16 +167,16 @@ export function ExecuteResult(props) {
                     {renderClipboardButton()}
                     <EnableFullscreenButton />
                     <PaneVisibilityToggleButtons
-                        onCollapse={props.onCollapseResults}
-                        onExpand={props.onExpandResults}
-                        isCollapsed={props.isResultsCollapsed}
+                        onCollapse={onCollapseResults}
+                        onExpand={onExpandResults}
+                        isCollapsed={isResultsCollapsed}
                         initialDirection="bottom"
                     />
                 </div>
             </div>
             <div className={b('result')}>
-                {activeSection === resultOptionsIds.result && !props.error && renderResult()}
-                {activeSection === resultOptionsIds.stats && !props.error && renderStats()}
+                {activeSection === resultOptionsIds.result && !error && renderResult()}
+                {activeSection === resultOptionsIds.stats && !error && renderStats()}
                 {renderIssues()}
             </div>
         </React.Fragment>

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

@@ -21,10 +21,9 @@ const blockIssue = cn('kv-issue');
 
 interface ResultIssuesProps {
     data: ErrorResponse | string;
-    className: string;
 }
 
-export default function ResultIssues({data, className}: ResultIssuesProps) {
+export function ResultIssues({data}: ResultIssuesProps) {
     const [showIssues, setShowIssues] = React.useState(false);
 
     const issues = typeof data === 'string' ? undefined : data?.issues;
@@ -59,22 +58,21 @@ export default function ResultIssues({data, className}: ResultIssuesProps) {
                     </Button>
                 )}
             </div>
-            {hasIssues && showIssues && <Issues issues={issues} className={className} />}
+            {hasIssues && showIssues && <Issues issues={issues} />}
         </div>
     );
 }
 
 interface IssuesProps {
-    className?: string;
     issues: IssueMessage[] | null | undefined;
 }
-export function Issues({issues, className}: IssuesProps) {
+export function Issues({issues}: IssuesProps) {
     const mostSevereIssue = issues?.reduce((result, issue) => {
         const severity = issue.severity ?? 10;
         return Math.min(result, severity);
     }, 10);
     return (
-        <div className={blockIssues(null, className)}>
+        <div className={blockIssues(null)}>
             {issues?.map((issue, index) => (
                 <Issue key={index} issue={issue} expanded={issue === mostSevereIssue} />
             ))}

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

@@ -8,7 +8,7 @@ import i18n from '../i18n';
 import './QueryDuration.scss';
 
 interface QueryDurationProps {
-    duration?: string;
+    duration?: string | number;
 }
 
 const b = block('ydb-query-duration');

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.tsx

@@ -67,7 +67,7 @@ export function paneVisibilityToggleReducerCreator(isPaneCollapsedKey: string) {
 interface ToggleButtonProps {
     onCollapse: VoidFunction;
     onExpand: VoidFunction;
-    isCollapsed: boolean;
+    isCollapsed?: boolean;
     initialDirection?: 'right' | 'left' | 'top' | 'bottom';
     className?: string;
 }

package/dist/routes.ts

@@ -49,4 +49,10 @@ export function createHref(
     return `${compile(route)(params)}${search}`;
 }
 
+// embedded version could be located in some folder (e.g. host/some_folder/app_router_path)
+// window.location has the full pathname, while location from router ignores path to project
+// this navigation assumes page reloading
+export const createExternalUILink = (query = {}) =>
+    createHref(window.location.pathname, undefined, query);
+
 export default routes;

package/dist/store/reducers/{executeTopQueries.ts → executeTopQueries/executeTopQueries.ts}

@@ -1,19 +1,14 @@
 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 '../../../services/api';
+import type {IQueryResult} from '../../../types/store/query';
+import {parseQueryAPIExecuteResponse} from '../../../utils/query';
 
-import {parseQueryAPIExecuteResponse} from '../../utils/query';
-
-import {createRequestActionTypes, createApiRequest} from '../utils';
-
-import type {RootState} from '.';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+import type {RootState} from '..';
+import type {ITopQueriesAction, ITopQueriesFilters, ITopQueriesState} from './types';
+import {getFiltersConditions} from './utils';
 
 export const FETCH_TOP_QUERIES = createRequestActionTypes('top-queries', 'FETCH_TOP_QUERIES');
 const SET_TOP_QUERIES_STATE = 'top-queries/SET_TOP_QUERIES_STATE';
@@ -25,41 +20,6 @@ const initialState = {
     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 `
@@ -128,34 +88,22 @@ type FetchTopQueries = (params: {
     filters?: ITopQueriesFilters;
 }) => ThunkAction<Promise<IQueryResult | undefined>, RootState, 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 const fetchTopQueries: FetchTopQueries = ({database, filters}) =>
+    createApiRequest({
+        request: window.api.sendQuery(
+            {
+                schema: 'modern',
+                query: getQueryText(database, filters),
+                database,
+                action: 'execute-scan',
+            },
+            {
+                concurrentId: 'executeTopQueries',
+            },
+        ),
+        actions: FETCH_TOP_QUERIES,
+        dataHandler: parseQueryAPIExecuteResponse,
+    });
 
 export function setTopQueriesState(state: Partial<ITopQueriesState>) {
     return {

package/dist/{types/store/executeTopQueries.ts → store/reducers/executeTopQueries/types.ts}

@@ -1,10 +1,6 @@
-import {
-    FETCH_TOP_QUERIES,
-    setTopQueriesState,
-    setTopQueriesFilters,
-} from '../../store/reducers/executeTopQueries';
-import type {ApiRequestAction} from '../../store/utils';
-import type {IQueryResult, QueryErrorResponse} from './query';
+import {FETCH_TOP_QUERIES, setTopQueriesState, setTopQueriesFilters} from './executeTopQueries';
+import type {ApiRequestAction} from '../../utils';
+import type {IQueryResult, QueryErrorResponse} from '../../../types/store/query';
 
 export interface ITopQueriesFilters {
     /** ms from epoch */

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

@@ -0,0 +1,36 @@
+import {ITopQueriesFilters} from './types';
+
+const getMaxIntervalSubquery = (path: string) => `(
+    SELECT
+        MAX(IntervalEnd)
+    FROM \`${path}/.sys/top_queries_by_cpu_time_one_hour\`
+)`;
+
+export 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 ');
+}

package/dist/store/reducers/index.ts

@@ -1,6 +1,9 @@
 import {combineReducers} from 'redux';
 
 import nodes from './nodes/nodes';
+import {topNodesByLoad} from './tenantOverview/topNodesByLoad/topNodesByLoad';
+import {topNodesByCpu} from './tenantOverview/topNodesByCpu/topNodesByCpu';
+import {topNodesByMemory} from './tenantOverview/topNodesByMemory/topNodesByMemory';
 import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
@@ -26,10 +29,12 @@ import preview from './preview';
 import nodesList from './nodesList';
 import describe from './describe';
 import schemaAcl from './schemaAcl/schemaAcl';
-import executeTopQueries from './executeTopQueries';
+import executeTopQueries from './executeTopQueries/executeTopQueries';
+import {tenantOverviewTopQueries} from './tenantOverview/topQueries/tenantOverviewTopQueries';
 import executeTopTables from './tenantOverview/executeTopTables/executeTopTables';
 import healthcheckInfo from './healthcheckInfo';
-import shardsWorkload from './shardsWorkload';
+import shardsWorkload from './shardsWorkload/shardsWorkload';
+import {tenantOverviewTopShards} from './tenantOverview/topShards/tenantOverviewTopShards';
 import hotKeys from './hotKeys';
 import olapStats from './olapStats';
 import authentication from './authentication/authentication';
@@ -41,6 +46,9 @@ import singleClusterMode from './singleClusterMode';
 export const rootReducer = {
     singleClusterMode,
     nodes,
+    topNodesByLoad,
+    topNodesByCpu,
+    topNodesByMemory,
     cluster,
     clusterNodes,
     tenant,
@@ -69,8 +77,10 @@ export const rootReducer = {
     schemaAcl,
     executeTopQueries,
     executeTopTables,
+    tenantOverviewTopQueries,
     healthcheckInfo,
     shardsWorkload,
+    tenantOverviewTopShards,
     hotKeys,
     authentication,
     header,

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

@@ -33,6 +33,7 @@ export interface NodesPreparedEntity {
     StartTime?: string;
     Uptime: string;
     MemoryUsed?: string;
+    MemoryLimit?: string;
     PoolStats?: TPoolStats[];
     LoadAverage?: number[];
     Tablets?: TFullTabletStateInfo[] | TComputeTabletStateInfo[];

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

@@ -1,6 +1,7 @@
-import type {TComputeInfo, TComputeNodeInfo} from '../../../types/api/compute';
+import type {TComputeInfo, TComputeNodeInfo, TComputeTenantInfo} from '../../../types/api/compute';
 import type {TNodesInfo} from '../../../types/api/nodes';
 import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
+import {generateEvaluator} from '../../../utils/generateEvaluator';
 
 import type {NodesHandledResponse, NodesPreparedEntity} from './types';
 
@@ -14,23 +15,30 @@ const prepareComputeNode = (node: TComputeNodeInfo, tenantName?: string) => {
     };
 };
 
-export const prepareComputeNodesData = (data: TComputeInfo): NodesHandledResponse => {
+export const prepareComputeNodes = (nodes?: TComputeNodeInfo[], tenants?: TComputeTenantInfo[]) => {
     const preparedNodes: NodesPreparedEntity[] = [];
 
     // First try to parse v2 response in case backend supports it
     // Else parse v1 response
-    if (data.Nodes) {
-        data.Nodes.forEach((node) => {
+
+    if (nodes) {
+        nodes.forEach((node) => {
             preparedNodes.push(prepareComputeNode(node));
         });
-    } else if (data.Tenants) {
-        for (const tenant of data.Tenants) {
+    } else if (tenants) {
+        for (const tenant of tenants) {
             tenant.Nodes?.forEach((node) => {
                 preparedNodes.push(prepareComputeNode(node, tenant.Name));
             });
         }
     }
 
+    return preparedNodes;
+};
+
+export const prepareComputeNodesData = (data: TComputeInfo): NodesHandledResponse => {
+    const preparedNodes = prepareComputeNodes(data.Nodes, data.Tenants);
+
     return {
         Nodes: preparedNodes,
         TotalNodes: Number(data.TotalNodes) || preparedNodes.length,
@@ -57,3 +65,5 @@ export const prepareNodesData = (data: TNodesInfo): NodesHandledResponse => {
         FoundNodes: Number(data.FoundNodes),
     };
 };
+
+export const getLoadSeverityForNode = generateEvaluator(60, 80, ['success', 'warning', 'danger']);

package/dist/store/reducers/{shardsWorkload.ts → shardsWorkload/shardsWorkload.ts}

@@ -1,16 +1,10 @@
 import type {Reducer} from 'redux';
 
-import '../../services/api';
-import type {
-    IShardsWorkloadAction,
-    IShardsWorkloadFilters,
-    IShardsWorkloadState,
-} from '../../types/store/shardsWorkload';
-import {EShardsWorkloadMode} from '../../types/store/shardsWorkload';
-
-import {parseQueryAPIExecuteResponse} from '../../utils/query';
-
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../../services/api';
+import {parseQueryAPIExecuteResponse} from '../../../utils/query';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+import type {IShardsWorkloadAction, IShardsWorkloadFilters, IShardsWorkloadState} from './types';
+import {EShardsWorkloadMode} from './types';
 
 export const SEND_SHARD_QUERY = createRequestActionTypes('query', 'SEND_SHARD_QUERY');
 const SET_SHARD_STATE = 'query/SET_SHARD_STATE';

package/dist/{types/store/shardsWorkload.ts → store/reducers/shardsWorkload/types.ts}

@@ -1,10 +1,6 @@
-import {
-    SEND_SHARD_QUERY,
-    setShardsState,
-    setShardsQueryFilters,
-} from '../../store/reducers/shardsWorkload';
-import type {ApiRequestAction} from '../../store/utils';
-import type {IQueryResult, QueryErrorResponse} from './query';
+import {SEND_SHARD_QUERY, setShardsState, setShardsQueryFilters} from './shardsWorkload';
+import type {ApiRequestAction} from '../../utils';
+import type {IQueryResult, QueryErrorResponse} from '../../../types/store/query';
 
 export enum EShardsWorkloadMode {
     Immediate = 'immediate',

package/dist/store/reducers/storage/storage.ts

@@ -36,7 +36,7 @@ const initialState = {
     wasLoaded: false,
     filter: '',
     usageFilter: [],
-    visible: VISIBLE_ENTITIES.missing,
+    visible: VISIBLE_ENTITIES.all,
     nodesUptimeFilter: NodesUptimeFilterValues.All,
     type: STORAGE_TYPES.groups,
 };

package/dist/store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu.ts

@@ -0,0 +1,87 @@
+import type {Reducer} from 'redux';
+
+import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
+import {createApiRequest, createRequestActionTypes} from '../../../utils';
+import {prepareNodesData} from '../../nodes/utils';
+import type {NodesApiRequestParams} from '../../nodes/types';
+import type {TopNodesByCpuAction, TopNodesByCpuState, TopPoolsStateSlice} from './types';
+
+export const FETCH_TOP_NODES_BY_CPU = createRequestActionTypes(
+    'topNodesByCpu',
+    'FETCH_TOP_NODES_BY_CPU',
+);
+const SET_DATA_WAS_NOT_LOADED = 'topNodesByCpu/SET_DATA_WAS_NOT_LOADED';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+};
+
+export const topNodesByCpu: Reducer<TopNodesByCpuState, TopNodesByCpuAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case FETCH_TOP_NODES_BY_CPU.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_TOP_NODES_BY_CPU.SUCCESS: {
+            return {
+                ...state,
+                data: action.data?.Nodes,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TOP_NODES_BY_CPU.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+const concurrentId = 'getTopNodeByCpu';
+
+export function getTopNodesByCpu({
+    type = 'any',
+    sortOrder = -1,
+    sortValue = 'CPU',
+    limit = TENANT_OVERVIEW_TABLES_LIMIT,
+    ...params
+}: NodesApiRequestParams) {
+    return createApiRequest({
+        request: window.api.getNodes(
+            {type, sortOrder, sortValue, limit, ...params},
+            {concurrentId},
+        ),
+        actions: FETCH_TOP_NODES_BY_CPU,
+        dataHandler: prepareNodesData,
+    });
+}
+
+export const selectTopNodesByCpu = (state: TopPoolsStateSlice) => state.topNodesByCpu.data;
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};