ydb-embedded-ui 4.6.0 → 4.7.0

package/dist/containers/Tenant/Tenant.tsx

@@ -8,16 +8,13 @@ import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
 import {useTypedSelector} from '../../utils/hooks';
-import routes, {createHref} from '../../routes';
-import {setHeader} from '../../store/reducers/header';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
 import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
 
-import {getClusterPath} from '../Cluster/utils';
-
 import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
 import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
@@ -92,20 +89,7 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         if (tenantName) {
-            dispatch(
-                setHeader([
-                    {
-                        text: 'Cluster',
-                        link: getClusterPath(),
-                    },
-                    {
-                        text: tenantName.startsWith('/') ? tenantName.slice(1) : tenantName,
-                        link: createHref(routes.tenant, undefined, {
-                            name: tenantName,
-                        }),
-                    },
-                ]),
-            );
+            dispatch(setHeaderBreadcrumbs('tenant', {tenantName}));
         }
     }, [tenantName, dispatch]);
 

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,5 +1,6 @@
-import {Icon} from '../../components/Icon';
 import {TENANT_GENERAL_TABS_IDS} from '../../store/reducers/tenant/constants';
+import routes, {createHref} from '../../routes';
+import {Icon} from '../../components/Icon';
 
 export enum TenantInfoTabsIds {
     overview = 'overview',
@@ -10,7 +11,8 @@ export enum TenantInfoTabsIds {
 export enum TenantTabsGroups {
     info = 'info',
     general = 'general',
-    generalTab = 'generalTab',
+    queryTab = 'queryTab',
+    diagnosticsTab = 'diagnosticsTab',
 }
 
 export const TENANT_GENERAL_TABS = [
@@ -42,3 +44,7 @@ export const TENANT_SCHEMA_TAB = [
         title: 'Schema',
     },
 ];
+
+export const getTenantPath = (query = {}) => {
+    return createHref(routes.tenant, undefined, query);
+};

package/dist/containers/Tenant/utils/constants.ts

@@ -0,0 +1,10 @@
+import type {Settings} from '@gravity-ui/react-data-table';
+
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+
+export const MAX_QUERY_HEIGHT = 6;
+
+export const QUERY_TABLE_SETTINGS: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRenderType: 'variable',
+};

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -3,8 +3,11 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_QUERY_TABS_ID,
+    TENANT_GENERAL_TABS_IDS,
+} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 
 const createTableTemplate = (path: string) => {
@@ -38,6 +41,7 @@ const bindActions = (
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
         dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
         setActivePath(path);
     };
 
@@ -67,6 +71,7 @@ const bindActions = (
         openPreview: () => {
             dispatch(setShowPreview(true));
             dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(path);
         },
     };

package/dist/containers/Tenants/Tenants.js

@@ -126,15 +126,19 @@ class Tenants extends React.Component {
         const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
         const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
 
+        const getTenantBackend = (tenant) => {
+            const backend = tenant.MonitoringEndpoint ?? tenant.backend;
+            return additionalTenantsInfo.tenantBackend
+                ? additionalTenantsInfo.tenantBackend(backend)
+                : undefined;
+        };
+
         const columns = [
             {
                 name: 'Name',
                 header: 'Database',
                 render: ({value, row}) => {
-                    const backend = row.MonitoringEndpoint ?? row.backend;
-                    const tenantBackend = additionalTenantsInfo.tenantBackend
-                        ? additionalTenantsInfo.tenantBackend(backend)
-                        : undefined;
+                    const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
                     return (
                         <div className={b('name-wrapper')}>
@@ -147,7 +151,7 @@ class Tenants extends React.Component {
                                 hasClipboardButton
                                 path={createHref(routes.tenant, undefined, {
                                     name: value,
-                                    backend: tenantBackend,
+                                    backend,
                                     [TenantTabsGroups.info]: initialTenantInfoTab,
                                     [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
@@ -287,12 +291,20 @@ class Tenants extends React.Component {
                 header: 'Tablets States',
                 sortable: false,
                 width: 430,
-                render: ({value, row}) =>
-                    value ? (
-                        <TabletsStatistic path={row.Name} tablets={value} nodeIds={row.NodeIds} />
+                render: ({value, row}) => {
+                    const backend = getTenantBackend(row);
+
+                    return value ? (
+                        <TabletsStatistic
+                            path={row.Name}
+                            tablets={value}
+                            nodeIds={row.NodeIds}
+                            backend={backend}
+                        />
                     ) : (
                         '—'
-                    ),
+                    );
+                },
             },
         ];
 

package/dist/routes.ts

@@ -1,3 +1,4 @@
+import type {Location} from 'history';
 import qs from 'qs';
 import {compile} from 'path-to-regexp';
 import isEmpty from 'lodash/isEmpty';
@@ -13,10 +14,18 @@ const routes = {
     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

@@ -186,7 +186,7 @@ export const changeUserInput = ({input}: {input: string}) => {
     } as const;
 };
 
-export const setMonacoHotKey = (value: MonacoHotKeyAction) => {
+export const setMonacoHotKey = (value: MonacoHotKeyAction | null) => {
     return {
         type: MONACO_HOT_KEY,
         data: value,

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

@@ -62,7 +62,7 @@ export const initialState = {
         [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

@@ -3,6 +3,12 @@ export const TENANT_GENERAL_TABS_IDS = {
     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,
+    TenantGeneralTab,
+    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';
 
@@ -56,7 +63,12 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
                 topLevelTab: action.data,
             };
         }
-
+        case SET_QUERY_TAB: {
+            return {
+                ...state,
+                queryTab: action.data,
+            };
+        }
         case SET_DIAGNOSTICS_TAB: {
             return {
                 ...state,
@@ -90,6 +102,13 @@ export function setTopLevelTab(tab: TenantGeneralTab) {
     } as const;
 }
 
+export function setQueryTab(tab: TenantQueryTab) {
+    return {
+        type: SET_QUERY_TAB,
+        data: tab,
+    } as const;
+}
+
 export function setDiagnosticsTab(tab: TenantDiagnosticsTab) {
     return {
         type: SET_DIAGNOSTICS_TAB,

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

@@ -3,16 +3,22 @@ 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_GENERAL_TABS_IDS,
+} from './constants';
+import {FETCH_TENANT, clearTenant, setDiagnosticsTab, setQueryTab, setTopLevelTab} from './tenant';
 
 export type TenantGeneralTab = ValueOf<typeof TENANT_GENERAL_TABS_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;
+    queryTab?: TenantQueryTab;
     diagnosticsTab?: TenantDiagnosticsTab;
     tenant?: TTenant;
     error?: IResponseError;
@@ -22,4 +28,5 @@ export type TenantAction =
     | ApiRequestAction<typeof FETCH_TENANT, TTenant | undefined, IResponseError>
     | ReturnType<typeof clearTenant>
     | ReturnType<typeof setTopLevelTab>
+    | 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

@@ -45,7 +45,10 @@ const paramSetup = {
         general: {
             stateKey: 'tenant.topLevelTab',
         },
-        generalTab: {
+        queryTab: {
+            stateKey: 'tenant.queryTab',
+        },
+        diagnosticsTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
         shardsMode: {

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.6.0",
+  "version": "4.7.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/QueryEditor/QueriesHistory/QueriesHistory.scss

@@ -1,85 +0,0 @@
-$popup-width: 700px;
-
-.kv-queries-history {
-    $block: &;
-    padding: 12px 16px;
-
-    &__empty {
-        font-weight: 600;
-        text-align: center;
-    }
-    &__popup-wrapper {
-        overflow: hidden;
-
-        width: $popup-width;
-        max-width: $popup-width !important;
-
-        border-radius: 4px;
-        :nth-child(2) {
-            overflow-y: auto;
-
-            max-height: 50vh;
-        }
-
-        &::before {
-            width: $popup-width;
-
-            border-radius: 4px;
-        }
-    }
-    &__saved-queries-row {
-        display: flex;
-        align-items: center;
-
-        padding: 8px 5px;
-
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        &:hover {
-            cursor: pointer;
-
-            color: var(--yc-color-text-link-hover);
-            background: var(--yc-color-base-simple-hover);
-            #{$block}__query-controls {
-                display: flex;
-            }
-        }
-        &_header {
-            font-weight: 600;
-            &:hover {
-                cursor: auto;
-
-                color: var(--yc-color-text-primary);
-                background: var(--yc-color-base-background);
-            }
-        }
-    }
-    &__query-body {
-        overflow: hidden;
-        flex-grow: 1;
-
-        white-space: pre;
-        text-overflow: ellipsis;
-        &_header {
-            display: flex;
-            justify-content: center;
-        }
-    }
-    &__query-controls {
-        display: none;
-    }
-    &__control-button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 24px;
-
-        color: var(--yc-color-text-hint);
-        &:hover {
-            color: var(--yc-color-text-secondary);
-        }
-    }
-    &__dialog-query-name {
-        font-weight: 500;
-    }
-}