ydb-embedded-ui 3.4.0 → 3.4.1

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

@@ -1,5 +1,5 @@
 import block from 'bem-cn-lite';
-import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {escapeRegExp} from 'lodash/fp';
 
@@ -17,6 +17,7 @@ import {
     getConsumer,
     selectPreparedPartitionsData,
     setDataWasNotLoaded,
+    setSelectedConsumer,
 } from '../../../../store/reducers/consumer';
 
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
@@ -52,14 +53,17 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
 
     const dispatch = useDispatch();
 
-    const [selectedConsumer, setSelectedConsumer] = useState<string[]>();
+    const isFirstRenderRef = useRef(true);
+
     const [generalSearchValue, setGeneralSearchValue] = useState('');
     const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
 
     const [componentCurrentPath, setComponentCurrentPath] = useState(path);
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
-    const {loading, wasLoaded, error} = useTypedSelector((state) => state.consumer);
+    const {loading, wasLoaded, error, selectedConsumer} = useTypedSelector(
+        (state) => state.consumer,
+    );
 
     const partitions = useTypedSelector((state) => selectPreparedPartitionsData(state));
 
@@ -70,7 +74,15 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     useEffect(() => {
         // Manual path control to ensure it updates with other values so no request with wrong params will be sent
         setComponentCurrentPath(path);
-    }, [path]);
+
+        // Do not reset selected consumer on first effect call
+        // To enable navigating to specific consumer
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+        } else {
+            dispatch(setSelectedConsumer(undefined));
+        }
+    }, [dispatch, path]);
 
     const fetchConsumerData = useCallback(
         (isBackground: boolean) => {
@@ -78,8 +90,8 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                 dispatch(setDataWasNotLoaded());
             }
 
-            if (selectedConsumer && selectedConsumer.length) {
-                dispatch(getConsumer(componentCurrentPath, selectedConsumer[0]));
+            if (selectedConsumer) {
+                dispatch(getConsumer(componentCurrentPath, selectedConsumer));
             }
         },
         [dispatch, selectedConsumer, componentCurrentPath],
@@ -99,12 +111,10 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     );
 
     useEffect(() => {
-        if (consumersToSelect && consumersToSelect.length) {
-            setSelectedConsumer([consumersToSelect[0].value]);
-        } else {
-            setSelectedConsumer(undefined);
+        if (consumersToSelect && consumersToSelect.length && !selectedConsumer) {
+            dispatch(setSelectedConsumer(consumersToSelect[0].value));
         }
-    }, [consumersToSelect]);
+    }, [dispatch, consumersToSelect, selectedConsumer]);
 
     const selectedColumns: string[] = useMemo(
         () =>
@@ -183,7 +193,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     };
 
     const handleConsumerSelectChange = (value: string[]) => {
-        setSelectedConsumer(value);
+        dispatch(setSelectedConsumer(value[0]));
     };
 
     const handlePartitionIdSearchChange = (value: string) => {
@@ -210,7 +220,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                     placeholder={i18n('controls.consumerSelector.placeholder')}
                     label={i18n('controls.consumerSelector')}
                     options={consumersToSelect}
-                    value={selectedConsumer}
+                    value={[selectedConsumer || '']}
                     onUpdate={handleConsumerSelectChange}
                 />
                 <Search

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -7,7 +7,7 @@ import {Loader} from '@gravity-ui/uikit';
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
 import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
-import Tablet from '../../../../components/Tablet/Tablet';
+import {Tablet} from '../../../../components/Tablet';
 
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {getTenantInfo} from '../../../../store/reducers/tenant';

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -18,7 +18,7 @@ import {
     CDCStreamOverview,
     PersQueueGroupOverview,
 } from '../../../components/InfoViewer/schemaOverview';
-import Icon from '../../../components/Icon/Icon';
+import {Icon} from '../../../components/Icon';
 
 import {
     EPathSubType,

package/dist/containers/Tenant/Preview/Preview.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 
 import {Loader, Button} from '@gravity-ui/uikit';
 
-import Icon from '../../../components/Icon/Icon';
+import {Icon} from '../../../components/Icon';
 import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 import {QueryResultTable} from '../../../components/QueryResultTable';
 

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

@@ -11,7 +11,7 @@ import {QueryResultTable} from '../../../components/QueryResultTable';
 
 import SaveQuery from './SaveQuery/SaveQuery';
 import SavedQueries from './SavedQueries/SavedQueries';
-import Icon from '../../../components/Icon/Icon';
+import {Icon} from '../../../components/Icon';
 import QueryResult from './QueryResult/QueryResult';
 import QueryExplain from './QueryExplain/QueryExplain';
 

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

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import {Dialog, Popup, Button} from '@gravity-ui/uikit';
 
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
-import Icon from '../../../../components/Icon/Icon';
+import {Icon} from '../../../../components/Icon';
 import './SavedQueries.scss';
 import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
 import {useDispatch} from 'react-redux';

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 
 import find from 'lodash/find';
 
-import Icon from '../../../../components/Icon/Icon';
+import {Icon} from '../../../../components/Icon';
 import DataTable from '@gravity-ui/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import './SchemaViewer.scss';

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,5 +1,4 @@
-//@ts-ignore
-import Icon from '../../components/Icon/Icon';
+import {Icon} from '../../components/Icon';
 
 export enum TenantGeneralTabsIds {
     query = 'query',

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import {Button} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
-//@ts-ignore
-import Icon from '../../../components/Icon/Icon';
+
+import {Icon} from '../../../components/Icon';
 
 import './ToggleButton.scss';
 

package/dist/services/api.d.ts

@@ -52,10 +52,20 @@ interface Window {
         getTenantInfo: (params: {
             path: string;
         }) => Promise<import('../types/api/tenant').TTenantInfo>;
+        getClusterInfo: () => Promise<import('../types/api/cluster').TClusterInfo>;
         getTabletsInfo: (params: {
             nodes?: string[];
             path?: string;
         }) => Promise<import('../types/api/tablet').TEvTabletStateResponse>;
+        getTabletDescribe: (
+            tenantId?: import('../types/api/tablet').TDomainKey,
+        ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
+        getTablet: (params: {
+            id?: string;
+        }) => Promise<import('../types/api/tablet').TEvTabletStateResponse>;
+        getTabletHistory: (params: {
+            id?: string;
+        }) => Promise<import('../types/api/tablet').UnmergedTEvTabletStateResponse>;
         getHeatmapData: (params: {
             path: string;
         }) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
@@ -66,6 +76,7 @@ interface Window {
             path?: string;
             consumer?: string;
         }) => Promise<import('../types/api/consumer').DescribeConsumerResult>;
+        getHostInfo: () => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
         [method: string]: Function;
     };
 }

package/dist/services/api.js

@@ -247,10 +247,10 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             this.getPath(`/tablets/app?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`),
         );
     }
-    getTabletDescribe(TenantId) {
+    getTabletDescribe(tenantId) {
         return this.get(this.getPath('/viewer/json/describe'), {
-            schemeshard_id: TenantId.SchemeShard,
-            path_id: TenantId.PathId,
+            schemeshard_id: tenantId?.SchemeShard,
+            path_id: tenantId?.PathId,
         });
     }
     postSetting(name, value) {

package/dist/store/reducers/consumer.ts

@@ -20,6 +20,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 export const FETCH_CONSUMER = createRequestActionTypes('consumer', 'FETCH_CONSUMER');
 
 const SET_DATA_WAS_NOT_LOADED = 'consumer/SET_DATA_WAS_NOT_LOADED';
+const SET_SELECTED_CONSUMER = 'consumer/SET_SELECTED_CONSUMER';
 
 const initialState = {
     loading: false,
@@ -66,6 +67,12 @@ const consumer: Reducer<IConsumerState, IConsumerAction> = (state = initialState
                 wasLoaded: false,
             };
         }
+        case SET_SELECTED_CONSUMER: {
+            return {
+                ...state,
+                selectedConsumer: action.data,
+            };
+        }
         default:
             return state;
     }
@@ -77,6 +84,13 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
+export const setSelectedConsumer = (value?: string) => {
+    return {
+        type: SET_SELECTED_CONSUMER,
+        data: value,
+    } as const;
+};
+
 export function getConsumer(path?: string, consumerName?: string) {
     return createApiRequest({
         request: window.api.getConsumer({path, consumer: consumerName}),

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

@@ -1,11 +1,15 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
+
+import type {IHostAction, IHostState} from '../../types/store/host';
 import '../../services/api';
 
-const FETCH_HOST = createRequestActionTypes('host', 'FETCH_HOST');
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_HOST = createRequestActionTypes('host', 'FETCH_HOST');
 
 const initialState = {loading: true, wasLoaded: false, data: {}};
 
-const cluster = function (state = initialState, action) {
+const host: Reducer<IHostState, IHostAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_HOST.REQUEST: {
             return {
@@ -16,7 +20,7 @@ const cluster = function (state = initialState, action) {
         case FETCH_HOST.SUCCESS: {
             return {
                 ...state,
-                data: action.data.SystemStateInfo[0],
+                data: action.data.SystemStateInfo?.[0],
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -41,4 +45,4 @@ export function getHostInfo() {
     });
 }
 
-export default cluster;
+export default host;

package/dist/store/reducers/shardsWorkload.ts

@@ -133,6 +133,10 @@ const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
         }
         // 401 Unauthorized error is handled by GenericAPI
         case SEND_SHARD_QUERY.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error || 'Unauthorized',

package/dist/store/reducers/tablet.ts

@@ -0,0 +1,111 @@
+import type {Reducer} from 'redux';
+
+import type {TDomainKey} from '../../types/api/tablet';
+import type {
+    ITabletAction,
+    ITabletDescribeHandledResponse,
+    ITabletHandledResponse,
+    ITabletPreparedHistoryItem,
+    ITabletState,
+} from '../../types/store/tablet';
+import '../../services/api';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_TABLET = createRequestActionTypes('TABLET', 'FETCH_TABLET');
+export const FETCH_TABLET_DESCRIBE = createRequestActionTypes('TABLET', 'FETCH_TABLET_DESCRIBE');
+
+const initialState = {
+    loading: false,
+    tenantPath: '-',
+};
+
+const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_TABLET.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_TABLET.SUCCESS: {
+            const {tabletData, historyData} = action.data;
+            const {TabletId: id} = tabletData;
+            return {
+                ...state,
+                id,
+                data: tabletData,
+                history: historyData,
+                loading: false,
+                error: undefined,
+            };
+        }
+        case FETCH_TABLET.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case FETCH_TABLET_DESCRIBE.SUCCESS: {
+            const {tenantPath} = action.data;
+
+            return {
+                ...state,
+                tenantPath,
+                error: undefined,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const getTablet = (id: string) => {
+    return createApiRequest({
+        request: Promise.all([window.api.getTablet({id}), window.api.getTabletHistory({id})]),
+        actions: FETCH_TABLET,
+        dataHandler: ([tabletResponseData, historyResponseData]): ITabletHandledResponse => {
+            const historyData = Object.keys(historyResponseData).reduce<
+                ITabletPreparedHistoryItem[]
+            >((list, nodeId) => {
+                const tabletInfo = historyResponseData[nodeId]?.TabletStateInfo;
+                if (tabletInfo && tabletInfo.length) {
+                    const leaderTablet = tabletInfo.find((t) => t.Leader) || tabletInfo[0];
+
+                    const {ChangeTime, Generation, State, Leader, FollowerId} = leaderTablet;
+
+                    list.push({
+                        nodeId,
+                        generation: Generation,
+                        changeTime: ChangeTime,
+                        state: State,
+                        leader: Leader,
+                        followerId: FollowerId,
+                    });
+                }
+                return list;
+            }, []);
+
+            const {TabletStateInfo = []} = tabletResponseData;
+            const [tabletData = {}] = TabletStateInfo;
+
+            return {tabletData, historyData};
+        },
+    });
+};
+
+export const getTabletDescribe = (tenantId: TDomainKey = {}) => {
+    return createApiRequest({
+        request: window.api.getTabletDescribe(tenantId),
+        actions: FETCH_TABLET_DESCRIBE,
+        dataHandler: (tabletDescribe): ITabletDescribeHandledResponse => {
+            const {SchemeShard, PathId} = tenantId;
+            const tenantPath = tabletDescribe.Path || `${SchemeShard}:${PathId}`;
+
+            return {tenantPath};
+        },
+    });
+};
+
+export default tablet;

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

@@ -67,6 +67,9 @@ const paramSetup = {
             stateKey: 'executeTopQueries.filters.to',
             type: 'number',
         },
+        selectedConsumer: {
+            stateKey: 'consumer.selectedConsumer',
+        },
     },
 };
 

package/dist/types/api/cluster.ts

@@ -0,0 +1,34 @@
+import type {EFlag} from './enums';
+import type {TTabletStateInfo} from './tablet';
+
+/**
+ * endpoint: viewer/json/cluster
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
+export interface TClusterInfo {
+    Name?: string;
+    Overall?: EFlag;
+    NodesTotal?: number;
+    NodesAlive?: number;
+    NumberOfCpus?: number;
+    /** double */
+    LoadAverage?: number;
+    /** uint64 */
+    MemoryTotal?: string;
+    /** uint64 */
+    MemoryUsed?: string;
+    /** uint64 */
+    StorageTotal?: string;
+    /** uint64 */
+    StorageUsed?: string;
+    DataCenters?: string[];
+    Versions?: string[];
+    SystemTablets?: TTabletStateInfo[];
+    /** uint64 */
+    Hosts?: string;
+    /** uint64 */
+    Tenants?: string;
+    /** uint64 */
+    Tablets?: string;
+}

package/dist/types/api/systemState.ts

@@ -0,0 +1,13 @@
+import {TSystemStateInfo} from './nodes';
+
+/**
+ * endpoint: /viewer/json/sysinfo
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/node_whiteboard.proto
+ */
+export interface TEvSystemStateResponse {
+    SystemStateInfo?: TSystemStateInfo[];
+    /** uint64 */
+    ResponseTime?: string;
+    ResponseDuration?: number;
+}

package/dist/types/api/tablet.ts

@@ -1,8 +1,10 @@
 import {EFlag} from './enums';
 
-// endpoint: /viewer/json/tabletinfo
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/sys_view.proto
-
+/**
+ * endpoint: /viewer/json/tabletinfo
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/sys_view.proto
+ */
 export interface TEvTabletStateResponse {
     TabletStateInfo?: TTabletStateInfo[];
 
@@ -16,6 +18,12 @@ export interface TEvTabletStateResponse {
     Packed5?: unknown;
 }
 
+/**
+ * endpoint: /viewer/json/tabletinfo with merge=false in query.
+ * Maps nodes to their tablets
+ */
+export type UnmergedTEvTabletStateResponse = Record<string, TEvTabletStateResponse>;
+
 export interface TTabletStateInfo {
     /** uint64 */
     TabletId?: string;
@@ -46,7 +54,7 @@ interface TCustomTabletAttribute {
     Value?: string;
 }
 
-interface TDomainKey {
+export interface TDomainKey {
     /** fixed64 */
     SchemeShard?: string;
     /** fixed64 */

package/dist/types/store/consumer.ts

@@ -1,7 +1,11 @@
 import type {IProcessSpeedStats} from '../../utils/bytesParsers';
 import type {ApiRequestAction} from '../../store/utils';
 
-import {FETCH_CONSUMER, setDataWasNotLoaded} from '../../store/reducers/consumer';
+import {
+    FETCH_CONSUMER,
+    setDataWasNotLoaded,
+    setSelectedConsumer,
+} from '../../store/reducers/consumer';
 
 import type {DescribeConsumerResult} from '../api/consumer';
 import type {IResponseError} from '../api/error';
@@ -38,6 +42,7 @@ export interface IPreparedPartitionData {
 export interface IConsumerState {
     loading: boolean;
     wasLoaded: boolean;
+    selectedConsumer?: string;
     data?: DescribeConsumerResult;
     error?: IResponseError;
 }
@@ -48,7 +53,10 @@ type IConsumerApiRequestAction = ApiRequestAction<
     IResponseError
 >;
 
-export type IConsumerAction = IConsumerApiRequestAction | ReturnType<typeof setDataWasNotLoaded>;
+export type IConsumerAction =
+    | IConsumerApiRequestAction
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof setSelectedConsumer>;
 
 export interface IConsumerRootStateSlice {
     consumer: IConsumerState;

package/dist/types/store/host.ts

@@ -0,0 +1,23 @@
+import {FETCH_HOST} from '../../store/reducers/host';
+
+import type {ApiRequestAction} from '../../store/utils';
+import type {IResponseError} from '../api/error';
+import type {TSystemStateInfo} from '../api/nodes';
+import type {TEvSystemStateResponse} from '../api/systemState';
+
+export interface IHostState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: TSystemStateInfo;
+    error?: IResponseError;
+}
+
+export type IHostAction = ApiRequestAction<
+    typeof FETCH_HOST,
+    TEvSystemStateResponse,
+    IResponseError
+>;
+
+export interface IHostRootStateSlice {
+    host: IHostState;
+}

package/dist/types/store/tablet.ts

@@ -0,0 +1,50 @@
+import type {IResponseError} from '../api/error';
+import type {ETabletState, TTabletStateInfo} from '../api/tablet';
+
+import {FETCH_TABLET, FETCH_TABLET_DESCRIBE} from '../../store/reducers/tablet';
+import {ApiRequestAction} from '../../store/utils';
+
+export interface ITabletPreparedHistoryItem {
+    nodeId: string;
+    generation: number | undefined;
+    changeTime: string | undefined;
+    state: ETabletState | undefined;
+    leader: boolean | undefined;
+    followerId: number | undefined;
+}
+
+export interface ITabletState {
+    loading: boolean;
+    tenantPath: string;
+    error?: IResponseError;
+    id?: string;
+    history?: ITabletPreparedHistoryItem[];
+    data?: TTabletStateInfo;
+}
+
+export interface ITabletHandledResponse {
+    tabletData: TTabletStateInfo;
+    historyData: ITabletPreparedHistoryItem[];
+}
+
+export interface ITabletDescribeHandledResponse {
+    tenantPath: string;
+}
+
+type ITabletApiRequestAction = ApiRequestAction<
+    typeof FETCH_TABLET,
+    ITabletHandledResponse,
+    IResponseError
+>;
+
+type ITabletDescribeApiRequestAction = ApiRequestAction<
+    typeof FETCH_TABLET_DESCRIBE,
+    ITabletDescribeHandledResponse,
+    IResponseError
+>;
+
+export type ITabletAction = ITabletApiRequestAction | ITabletDescribeApiRequestAction;
+
+export interface ITabletRootStateSlice {
+    tablet: ITabletState;
+}

package/dist/types/store/tooltip.ts

@@ -18,7 +18,9 @@ export interface ITooltipState {
     additionalData?: any;
 }
 
-export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<typeof showTooltip>;
+export type ShowTooltipFunction = typeof showTooltip;
+
+export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<ShowTooltipFunction>;
 
 export interface ITooltipRootStateSlice {
     tooltip: ITooltipState;