ydb-embedded-ui 4.6.0 → 4.8.0

package/dist/routes.ts

@@ -1,22 +1,36 @@
+import type {Location} from 'history';
 import qs from 'qs';
 import {compile} from 'path-to-regexp';
 import isEmpty from 'lodash/isEmpty';
 
 import {backend, clusterName, webVersion} from './store';
 
+export const CLUSTER = 'cluster';
+export const TENANT = 'tenant';
+export const NODE = 'node';
+export const TABLET = 'tablet';
+
 const routes = {
-    cluster: '/cluster/:activeTab?',
-    tenant: '/tenant',
-    node: '/node/:id/:activeTab?',
-    tablet: '/tablet/:id',
-    tabletsFilters: '/tabletsFilters',
-    auth: '/auth',
+    cluster: `/${CLUSTER}/:activeTab?`,
+    tenant: `/${TENANT}`,
+    node: `/${NODE}/:id/:activeTab?`,
+    tablet: `/${TABLET}/:id`,
+    tabletsFilters: `/tabletsFilters`,
+    auth: `/auth`,
+};
+
+export const parseQuery = (location: Location) => {
+    return qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
 };
 
+export type Query = Record<string | number, string | number | string[] | number[] | undefined>;
+
 export function createHref(
     route: string,
     params?: Record<string, string | number>,
-    query: Record<string | number, string | number | string[] | number[] | undefined> = {},
+    query: Query = {},
 ) {
     let extendedQuery = query;
 

package/dist/services/api.ts

@@ -44,11 +44,15 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     getPath(path: string) {
         return `${BACKEND}${path}`;
     }
-    getClusterInfo(clusterName?: string) {
-        return this.get<TClusterInfo>(this.getPath('/viewer/json/cluster'), {
-            name: clusterName,
-            tablets: true,
-        });
+    getClusterInfo(clusterName?: string, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TClusterInfo>(
+            this.getPath('/viewer/json/cluster'),
+            {
+                name: clusterName,
+                tablets: true,
+            },
+            {concurrentId: concurrentId || `getClusterInfo`},
+        );
     }
     getClusterNodes({concurrentId}: AxiosOptions = {}) {
         return this.get<TEvSystemStateResponse>(

package/dist/store/reducers/executeQuery.ts

@@ -23,7 +23,8 @@ const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
 const SAVE_QUERY_TO_HISTORY = 'query/SAVE_QUERY_TO_HISTORY';
 const GO_TO_PREVIOUS_QUERY = 'query/GO_TO_PREVIOUS_QUERY';
 const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
-const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
+const SET_MONACO_HOT_KEY = 'query/SET_MONACO_HOT_KEY';
+const SET_TENANT_PATH = 'query/SET_TENANT_PATH';
 
 const queriesHistoryInitial: string[] = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, '[]'));
 
@@ -128,12 +129,18 @@ const executeQuery: Reducer<ExecuteQueryState, ExecuteQueryAction> = (
             };
         }
 
-        case MONACO_HOT_KEY: {
+        case SET_MONACO_HOT_KEY: {
             return {
                 ...state,
                 monacoHotKey: action.data,
             };
         }
+        case SET_TENANT_PATH: {
+            return {
+                ...state,
+                tenantPath: action.data,
+            };
+        }
 
         default:
             return state;
@@ -186,9 +193,16 @@ export const changeUserInput = ({input}: {input: string}) => {
     } as const;
 };
 
-export const setMonacoHotKey = (value: MonacoHotKeyAction) => {
+export const setMonacoHotKey = (value: MonacoHotKeyAction | null) => {
+    return {
+        type: SET_MONACO_HOT_KEY,
+        data: value,
+    } as const;
+};
+
+export const setTenantPath = (value: string) => {
     return {
-        type: MONACO_HOT_KEY,
+        type: SET_TENANT_PATH,
         data: value,
     } as const;
 };

package/dist/store/reducers/header/header.ts

@@ -0,0 +1,31 @@
+import type {Reducer} from 'redux';
+
+import type {HeaderAction, HeaderState, Page, PageBreadcrumbsOptions} from './types';
+
+const SET_HEADER_BREADCRUMBS = 'header/SET_HEADER_BREADCRUMBS';
+
+const initialState = {
+    pageBreadcrumbsOptions: {},
+};
+
+const header: Reducer<HeaderState, HeaderAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case SET_HEADER_BREADCRUMBS:
+            return {
+                page: action.page,
+                pageBreadcrumbsOptions: action.options,
+            };
+        default:
+            return state;
+    }
+};
+
+export function setHeaderBreadcrumbs<T extends Page>(page: T, options: PageBreadcrumbsOptions<T>) {
+    return {
+        type: SET_HEADER_BREADCRUMBS,
+        page,
+        options,
+    } as const;
+}
+
+export default header;

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

@@ -0,0 +1,54 @@
+import type {ClusterTab} from '../../../containers/Cluster/utils';
+
+import {setHeaderBreadcrumbs} from './header';
+
+export type Page = 'cluster' | 'tenant' | 'node' | 'tablets' | 'tablet' | undefined;
+
+export interface ClusterBreadcrumbsOptions {
+    clusterName?: string;
+    clusterTab?: ClusterTab;
+}
+
+export interface TenantBreadcrumbsOptions extends ClusterBreadcrumbsOptions {
+    tenantName?: string;
+}
+
+export interface NodeBreadcrumbsOptions extends TenantBreadcrumbsOptions {
+    nodeId?: string | number;
+}
+
+export interface TabletsBreadcrumbsOptions extends TenantBreadcrumbsOptions {
+    nodeIds?: string[] | number[];
+    state?: string;
+    type?: string;
+}
+
+export interface TabletBreadcrumbsOptions extends TabletsBreadcrumbsOptions {
+    tabletId?: string;
+}
+
+export type BreadcrumbsOptions =
+    | ClusterBreadcrumbsOptions
+    | TenantBreadcrumbsOptions
+    | NodeBreadcrumbsOptions
+    | TabletsBreadcrumbsOptions
+    | TabletBreadcrumbsOptions;
+
+export type PageBreadcrumbsOptions<T extends Page = undefined> = T extends 'cluster'
+    ? ClusterBreadcrumbsOptions
+    : T extends 'tenant'
+    ? TenantBreadcrumbsOptions
+    : T extends 'node'
+    ? NodeBreadcrumbsOptions
+    : T extends 'tablets'
+    ? TabletsBreadcrumbsOptions
+    : T extends 'tablet'
+    ? TabletBreadcrumbsOptions
+    : {};
+
+export interface HeaderState {
+    page?: Page;
+    pageBreadcrumbsOptions: BreadcrumbsOptions;
+}
+
+export type HeaderAction = ReturnType<typeof setHeaderBreadcrumbs>;

package/dist/store/reducers/index.ts

@@ -31,7 +31,7 @@ import shardsWorkload from './shardsWorkload';
 import hotKeys from './hotKeys';
 import olapStats from './olapStats';
 import authentication from './authentication';
-import header from './header';
+import header from './header/header';
 import saveQuery from './saveQuery';
 import fullscreen from './fullscreen';
 import singleClusterMode from './singleClusterMode';

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

@@ -28,10 +28,12 @@ export interface NodeState {
     data: TEvSystemStateResponse;
     loading: boolean;
     wasLoaded: boolean;
+    error?: IResponseError;
 
     nodeStructure: TStorageInfo;
     loadingStructure: boolean;
     wasLoadedStructure: boolean;
+    errorStructure?: IResponseError;
 }
 
 export type NodeAction =

package/dist/store/reducers/settings/settings.ts

@@ -5,7 +5,7 @@ import type {ValueOf} from '../../../types/common';
 import {
     SAVED_QUERIES_KEY,
     THEME_KEY,
-    TENANT_INITIAL_TAB_KEY,
+    TENANT_INITIAL_PAGE_KEY,
     INVERTED_DISKS_KEY,
     ASIDE_HEADER_COMPACT_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
@@ -18,6 +18,8 @@ import '../../../services/api';
 import {getValueFromLS, parseJson} from '../../../utils/utils';
 import {QueryModes} from '../../../types/store/query';
 
+import {TENANT_PAGES_IDS} from '../tenant/constants';
+
 import type {RootState} from '..';
 import type {
     SetSettingValueAction,
@@ -58,11 +60,14 @@ export const initialState = {
             'false',
         ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
-        [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
+        [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(
+            TENANT_INITIAL_PAGE_KEY,
+            TENANT_PAGES_IDS.query,
+        ),
         [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
-        [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'false'),
+        [CLUSTER_INFO_HIDDEN_KEY]: readSavedSettingsValue(CLUSTER_INFO_HIDDEN_KEY, 'true'),
     },
     systemSettings,
 };

package/dist/store/reducers/tablet.ts

@@ -16,9 +16,11 @@ import {prepareNodesMap} from '../../utils/nodes';
 export const FETCH_TABLET = createRequestActionTypes('TABLET', 'FETCH_TABLET');
 export const FETCH_TABLET_DESCRIBE = createRequestActionTypes('TABLET', 'FETCH_TABLET_DESCRIBE');
 
+const CLEAR_TABLET_DATA = 'tablet/CLEAR_TABLET_DATA';
+
 const initialState = {
     loading: false,
-    tenantPath: '-',
+    tenantPath: undefined,
 };
 
 const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, action) => {
@@ -57,6 +59,15 @@ const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, acti
                 error: undefined,
             };
         }
+        case CLEAR_TABLET_DATA: {
+            return {
+                ...state,
+                id: undefined,
+                tenantPath: undefined,
+                data: undefined,
+                history: undefined,
+            };
+        }
         default:
             return state;
     }
@@ -122,4 +133,10 @@ export const getTabletDescribe = (tenantId: TDomainKey = {}) => {
     });
 };
 
+export const clearTabletData = () => {
+    return {
+        type: CLEAR_TABLET_DATA,
+    } as const;
+};
+
 export default tablet;

package/dist/store/reducers/tenant/constants.ts

@@ -1,8 +1,16 @@
-export const TENANT_GENERAL_TABS_IDS = {
+export const TENANT_PAGE = 'tenantPage';
+
+export const TENANT_PAGES_IDS = {
     query: 'query',
     diagnostics: 'diagnostics',
 } as const;
 
+export const TENANT_QUERY_TABS_ID = {
+    newQuery: 'newQuery',
+    history: 'history',
+    saved: 'saved',
+} as const;
+
 export const TENANT_DIAGNOSTICS_TABS_IDS = {
     overview: 'overview',
     topQueries: 'topQueries',

package/dist/store/reducers/tenant/tenant.ts

@@ -1,7 +1,13 @@
 import type {Reducer} from 'redux';
 
 import type {TTenant} from '../../../types/api/tenant';
-import type {TenantAction, TenantDiagnosticsTab, TenantGeneralTab, TenantState} from './types';
+import type {
+    TenantAction,
+    TenantDiagnosticsTab,
+    TenantPage,
+    TenantQueryTab,
+    TenantState,
+} from './types';
 
 import '../../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../../utils';
@@ -9,6 +15,7 @@ import {createRequestActionTypes, createApiRequest} from '../../utils';
 export const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 
 const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
+const SET_QUERY_TAB = 'tenant/SET_QUERY_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 
@@ -53,10 +60,15 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
         case SET_TOP_LEVEL_TAB: {
             return {
                 ...state,
-                topLevelTab: action.data,
+                tenantPage: action.data,
+            };
+        }
+        case SET_QUERY_TAB: {
+            return {
+                ...state,
+                queryTab: action.data,
             };
         }
-
         case SET_DIAGNOSTICS_TAB: {
             return {
                 ...state,
@@ -83,9 +95,16 @@ export const clearTenant = () => {
     return {type: CLEAR_TENANT} as const;
 };
 
-export function setTopLevelTab(tab: TenantGeneralTab) {
+export function setTenantPage(page: TenantPage) {
     return {
         type: SET_TOP_LEVEL_TAB,
+        data: page,
+    } as const;
+}
+
+export function setQueryTab(tab: TenantQueryTab) {
+    return {
+        type: SET_QUERY_TAB,
         data: tab,
     } as const;
 }

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

@@ -3,16 +3,19 @@ import type {TTenant} from '../../../types/api/tenant';
 import type {ValueOf} from '../../../types/common';
 import type {ApiRequestAction} from '../../utils';
 
-import {TENANT_DIAGNOSTICS_TABS_IDS, TENANT_GENERAL_TABS_IDS} from './constants';
-import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setTopLevelTab} from './tenant';
+import {TENANT_QUERY_TABS_ID, TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGES_IDS} from './constants';
+import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setQueryTab, setTenantPage} from './tenant';
 
-export type TenantGeneralTab = ValueOf<typeof TENANT_GENERAL_TABS_IDS>;
+export type TenantPage = ValueOf<typeof TENANT_PAGES_IDS>;
+
+export type TenantQueryTab = ValueOf<typeof TENANT_QUERY_TABS_ID>;
 export type TenantDiagnosticsTab = ValueOf<typeof TENANT_DIAGNOSTICS_TABS_IDS>;
 
 export interface TenantState {
     loading: boolean;
     wasLoaded: boolean;
-    topLevelTab?: TenantGeneralTab;
+    tenantPage?: TenantPage;
+    queryTab?: TenantQueryTab;
     diagnosticsTab?: TenantDiagnosticsTab;
     tenant?: TTenant;
     error?: IResponseError;
@@ -21,5 +24,6 @@ export interface TenantState {
 export type TenantAction =
     | ApiRequestAction<typeof FETCH_TENANT, TTenant | undefined, IResponseError>
     | ReturnType<typeof clearTenant>
-    | ReturnType<typeof setTopLevelTab>
+    | ReturnType<typeof setTenantPage>
+    | ReturnType<typeof setQueryTab>
     | ReturnType<typeof setDiagnosticsTab>;

package/dist/store/reducers/topic.ts

@@ -35,7 +35,7 @@ const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action)
             };
         }
         case FETCH_TOPIC.SUCCESS: {
-            // On older version it can return HTML page of Internal Viewer with an error
+            // On older version it can return HTML page of Developer UI with an error
             if (typeof action.data !== 'object') {
                 return {...state, loading: false, error: {}};
             }

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

@@ -42,10 +42,13 @@ const paramSetup = {
             stateKey: 'tablets.typeFilter',
             type: 'array',
         },
-        general: {
-            stateKey: 'tenant.topLevelTab',
+        tenantPage: {
+            stateKey: 'tenant.tenantPage',
         },
-        generalTab: {
+        queryTab: {
+            stateKey: 'tenant.queryTab',
+        },
+        diagnosticsTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
         shardsMode: {

package/dist/types/store/executeQuery.ts

@@ -5,6 +5,7 @@ import {
     goToPreviousQuery,
     setMonacoHotKey,
     goToNextQuery,
+    setTenantPath,
     MONACO_HOT_KEY_ACTIONS,
 } from '../../store/reducers/executeQuery';
 import type {ApiRequestAction} from '../../store/utils';
@@ -22,6 +23,7 @@ export interface ExecuteQueryState {
         currentIndex: number;
     };
     monacoHotKey: null | MonacoHotKeyAction;
+    tenantPath?: string;
     data?: IQueryResult;
     stats?: IQueryResult['stats'];
     error?: string | ErrorResponse;
@@ -35,4 +37,5 @@ export type ExecuteQueryAction =
     | ReturnType<typeof goToPreviousQuery>
     | ReturnType<typeof changeUserInput>
     | ReturnType<typeof saveQueryToHistory>
-    | ReturnType<typeof setMonacoHotKey>;
+    | ReturnType<typeof setMonacoHotKey>
+    | ReturnType<typeof setTenantPath>;

package/dist/types/store/query.ts

@@ -29,3 +29,8 @@ export enum QueryModes {
     data = 'data',
     query = 'query',
 }
+
+export interface SavedQuery {
+    name: string;
+    body: string;
+}

package/dist/types/store/tablet.ts

@@ -1,8 +1,8 @@
+import type {ApiRequestAction} from '../../store/utils';
 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';
+import {FETCH_TABLET, FETCH_TABLET_DESCRIBE, clearTabletData} from '../../store/reducers/tablet';
 
 export interface ITabletPreparedHistoryItem {
     nodeId: string;
@@ -16,7 +16,7 @@ export interface ITabletPreparedHistoryItem {
 
 export interface ITabletState {
     loading: boolean;
-    tenantPath: string;
+    tenantPath?: string;
     error?: IResponseError;
     id?: string;
     history?: ITabletPreparedHistoryItem[];
@@ -44,7 +44,10 @@ type ITabletDescribeApiRequestAction = ApiRequestAction<
     IResponseError
 >;
 
-export type ITabletAction = ITabletApiRequestAction | ITabletDescribeApiRequestAction;
+export type ITabletAction =
+    | ITabletApiRequestAction
+    | ITabletDescribeApiRequestAction
+    | ReturnType<typeof clearTabletData>;
 
 export interface ITabletRootStateSlice {
     tablet: ITabletState;

package/dist/utils/constants.ts

@@ -75,6 +75,8 @@ export const COLORS_PRIORITY = {
     grey: 1,
 };
 
+export const DEVELOPER_UI = 'Developer UI';
+
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
@@ -102,9 +104,11 @@ export const DEFAULT_TABLE_SETTINGS = {
     highlightRows: true,
 } as const;
 
-export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';
 export const QUERY_INITIAL_MODE_KEY = 'query_initial_mode';
 
 export const PARTITIONS_HIDDEN_COLUMNS_KEY = 'partitionsHiddenColumns';
 
 export const CLUSTER_INFO_HIDDEN_KEY = 'clusterInfoHidden';
+
+// Remain "tab" in key name for backward compatibility
+export const TENANT_INITIAL_PAGE_KEY = 'saved_tenant_initial_tab';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "files": [
     "dist"
   ],
@@ -103,6 +103,7 @@
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@gravity-ui/eslint-config": "^1.0.2",
+    "@gravity-ui/icons": "^2.2.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.scss

@@ -1,9 +0,0 @@
-@import '../../../styles/mixins.scss';
-
-.object-general-tabs {
-    padding: 12px 20px 0 12px;
-
-    &__tab {
-        text-decoration: none;
-    }
-}

package/dist/containers/Tenant/ObjectGeneralTabs/ObjectGeneralTabs.tsx

@@ -1,68 +0,0 @@
-import qs from 'qs';
-import {connect} from 'react-redux';
-import {useLocation} from 'react-router';
-import {Link} from 'react-router-dom';
-import cn from 'bem-cn-lite';
-
-import {Tabs} from '@gravity-ui/uikit';
-
-import routes, {createHref} from '../../../routes';
-import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
-import {setSettingValue} from '../../../store/reducers/settings/settings';
-
-import {TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
-
-import './ObjectGeneralTabs.scss';
-
-const b = cn('object-general-tabs');
-
-interface ObjectGeneralTabsProps {
-    setSettingValue: (name: string, value: string) => void;
-}
-
-function ObjectGeneralTabs(props: ObjectGeneralTabsProps) {
-    const location = useLocation();
-
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
-
-    const {name: tenantName, general: generalTab} = queryParams;
-
-    const renderContent = () => {
-        if (!tenantName) {
-            return null;
-        }
-        return (
-            <div className={b()}>
-                <Tabs
-                    size="xl"
-                    items={TENANT_GENERAL_TABS}
-                    activeTab={generalTab as string}
-                    wrapTo={({id}, node) => {
-                        const path = createHref(routes.tenant, undefined, {
-                            ...queryParams,
-                            name: tenantName as string,
-                            [TenantTabsGroups.general]: id,
-                        });
-                        return (
-                            <Link to={path} key={id} className={b('tab')}>
-                                {node}
-                            </Link>
-                        );
-                    }}
-                    allowNotSelected
-                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
-                />
-            </div>
-        );
-    };
-
-    return renderContent();
-}
-
-const mapDispatchToProps = {
-    setSettingValue,
-};
-
-export default connect(null, mapDispatchToProps)(ObjectGeneralTabs);