ydb-embedded-ui 4.0.0 → 4.2.0

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -86,9 +86,10 @@ const prepareTableGeneralInfo = (PartitionConfig: TPartitionConfig, TTLSettings?
 
     const generalTableInfo: InfoViewerItem[] = [];
 
-    const partitioningBySize = PartitioningPolicy.SizeToSplit
-        ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
-        : 'Disabled';
+    const partitioningBySize =
+        PartitioningPolicy.SizeToSplit && Number(PartitioningPolicy.SizeToSplit) > 0
+            ? `Enabled, split size: ${formatBytes(PartitioningPolicy.SizeToSplit)}`
+            : 'Disabled';
 
     const partitioningByLoad = PartitioningPolicy.SplitByLoadSettings?.Enabled
         ? 'Enabled'

package/dist/containers/Tenant/QueryEditor/Issues/Issues.scss

@@ -106,7 +106,7 @@
     }
 
     &_severity_warning &__icon {
-        color: var(--yc-color-text-warning-medium);
+        color: var(--yc-color-text-warning);
     }
 
     &_severity_info &__icon {

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/OldQueryEditorControls.tsx

@@ -48,7 +48,7 @@ export const OldQueryEditorControls = ({
                     </Button>
                     <DropdownMenu
                         items={runModeSelectorMenuItems}
-                        popupClassName={b('select-query-action-popup')}
+                        popupProps={{className: b('select-query-action-popup')}}
                         switcher={
                             <Button
                                 view="action"

package/dist/containers/Tenant/QueryEditor/QueryEditorControls/QueryEditorControls.tsx

@@ -61,7 +61,7 @@ export const QueryEditorControls = ({
                 </Button>
                 <DropdownMenu
                     items={querySelectorMenuItems}
-                    popupClassName={b('mode-selector__popup')}
+                    popupProps={{className: b('mode-selector__popup')}}
                     switcher={
                         <Button className={b('mode-selector__button')}>
                             <span className={b('mode-selector__button-content')}>

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

@@ -16,6 +16,7 @@ const SchemaViewerColumns = {
     name: 'Name',
     key: 'Key',
     type: 'Type',
+    notNull: 'NotNull',
 };
 
 class SchemaViewer extends React.Component {
@@ -59,6 +60,17 @@ class SchemaViewer extends React.Component {
                 name: SchemaViewerColumns.type,
                 width: 100,
             },
+            {
+                name: SchemaViewerColumns.notNull,
+                width: 100,
+                render: ({row}) => {
+                    if (row.NotNull) {
+                        return '\u2713';
+                    }
+
+                    return undefined;
+                },
+            },
         ];
 
         const tableData = [...keyColumns, ...restColumns];

package/dist/containers/Tenants/Tenants.js

@@ -20,7 +20,7 @@ import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
-import {getTenantsInfo} from '../../store/reducers/tenants';
+import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
 import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';
 

package/dist/containers/UserSettings/UserSettings.tsx

@@ -2,12 +2,14 @@ import {ReactNode} from 'react';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {RadioButton, Switch, HelpPopover} from '@gravity-ui/uikit';
+import {RadioButton, Switch} from '@gravity-ui/uikit';
 import {Settings} from '@gravity-ui/navigation';
 
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
+import {LabelWithPopover} from '../../components/LabelWithPopover/LabelWithPopover';
+
 import {
     ENABLE_QUERY_MODES_FOR_EXPLAIN,
     INVERTED_DISKS_KEY,
@@ -46,27 +48,27 @@ function UserSettings(props: any) {
 
     const renderBreakNodesSettingsItem = (title: ReactNode) => {
         return (
-            <div className={b('item-with-popup')}>
-                {title}
-                <HelpPopover
-                    content="Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions"
-                    contentClassName={b('popup')}
-                    hasArrow={true}
-                />
-            </div>
+            <LabelWithPopover
+                className={b('item-with-popup')}
+                contentClassName={b('popup')}
+                text={title}
+                popoverContent={
+                    'Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions'
+                }
+            />
         );
     };
 
     const renderEnableExplainQueryModesItem = (title: ReactNode) => {
         return (
-            <div className={b('item-with-popup')}>
-                {title}
-                <HelpPopover
-                    content="Enable script | scan query mode selector for both run and explain. May not work on some versions"
-                    contentClassName={b('popup')}
-                    hasArrow={true}
-                />
-            </div>
+            <LabelWithPopover
+                className={b('item-with-popup')}
+                contentClassName={b('popup')}
+                text={title}
+                popoverContent={
+                    'Enable script | scan query mode selector for both run and explain. May not work on some versions'
+                }
+            />
         );
     };
 

package/dist/services/api.ts

@@ -0,0 +1,383 @@
+import AxiosWrapper from '@gravity-ui/axios-wrapper';
+
+import type {
+    Actions,
+    ExplainActions,
+    ExplainResponse,
+    QueryAPIResponse,
+    Schemas,
+} from '../types/api/query';
+import type {
+    TDomainKey,
+    TEvTabletStateResponse,
+    UnmergedTEvTabletStateResponse,
+} from '../types/api/tablet';
+import type {TMetaInfo} from '../types/api/acl';
+import type {TClusterInfo} from '../types/api/cluster';
+import type {TComputeInfo} from '../types/api/compute';
+import type {DescribeConsumerResult} from '../types/api/consumer';
+import type {HealthCheckAPIResponse} from '../types/api/healthcheck';
+import type {TNetInfo} from '../types/api/netInfo';
+import type {TNodesInfo} from '../types/api/nodes';
+import type {TEvNodesInfo} from '../types/api/nodesList';
+import type {TEvDescribeSchemeResult} from '../types/api/schema';
+import type {TStorageInfo} from '../types/api/storage';
+import type {TEvSystemStateResponse} from '../types/api/systemState';
+import type {TTenantInfo, TTenants} from '../types/api/tenant';
+import type {DescribeTopicResult} from '../types/api/topic';
+import type {TEvPDiskStateResponse} from '../types/api/pdisk';
+import type {TEvVDiskStateResponse} from '../types/api/vdisk';
+import type {TUserToken} from '../types/api/whoami';
+import type {INodesApiRequestParams} from '../types/store/nodes';
+
+import {backend as BACKEND} from '../store';
+
+const config = {withCredentials: !window.custom_backend};
+
+const settingsApi = window.web_version ? window.systemSettings?.settingsApi : undefined;
+
+type AxiosOptions = {
+    concurrentId?: string;
+};
+
+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,
+        });
+    }
+    getNodeInfo(id?: string) {
+        return this.get<TEvSystemStateResponse>(this.getPath('/viewer/json/sysinfo?enums=true'), {
+            node_id: id,
+        });
+    }
+    getTenants(clusterName?: string) {
+        return this.get<TTenantInfo>(this.getPath('/viewer/json/tenantinfo'), {
+            tablets: 1,
+            storage: 1,
+            cluster_name: clusterName,
+        });
+    }
+    getTenantInfo({path}: {path: string}) {
+        return this.get<TTenantInfo>(this.getPath('/viewer/json/tenantinfo'), {
+            path,
+            tablets: true,
+            storage: true,
+        });
+    }
+    getNodes(
+        {tenant, filter, storage, type = 'any', tablets = true}: INodesApiRequestParams,
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.get<TNodesInfo>(
+            this.getPath('/viewer/json/nodes?enums=true'),
+            {
+                tenant,
+                with: filter,
+                storage,
+                type,
+                tablets,
+            },
+            {
+                concurrentId,
+            },
+        );
+    }
+    getCompute(path: string) {
+        return this.get<TComputeInfo>(this.getPath('/viewer/json/compute?enums=true'), {path});
+    }
+    getStorageInfo(
+        {
+            tenant,
+            filter,
+            nodeId,
+        }: {
+            tenant: string;
+            filter: string;
+            nodeId: string;
+        },
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.get<TStorageInfo>(
+            this.getPath(`/viewer/json/storage?enums=true`),
+            {
+                tenant,
+                node_id: nodeId,
+                with: filter,
+            },
+            {
+                concurrentId,
+            },
+        );
+    }
+    getPdiskInfo(nodeId: string | number, pdiskId: string | number) {
+        return this.get<TEvPDiskStateResponse>(this.getPath('/viewer/json/pdiskinfo?enums=true'), {
+            filter: `(NodeId=${nodeId}${pdiskId ? `;PDiskId=${pdiskId}` : ''})`,
+        });
+    }
+    getVdiskInfo({
+        vdiskId,
+        pdiskId,
+        nodeId,
+    }: {
+        vdiskId: string | number;
+        pdiskId: string | number;
+        nodeId: string | number;
+    }) {
+        return this.get<TEvVDiskStateResponse>(this.getPath('/viewer/json/vdiskinfo?enums=true'), {
+            filter: `(VDiskId=${vdiskId ?? ''};PDiskId=${pdiskId ?? ''};NodeId=${nodeId ?? ''})`,
+        });
+    }
+    getGroupInfo(groupId: string | number) {
+        return this.get<TStorageInfo>(this.getPath('/viewer/json/storage?enums=true'), {
+            group_id: groupId,
+        });
+    }
+    getHostInfo() {
+        return this.get<TEvSystemStateResponse>(
+            this.getPath('/viewer/json/sysinfo?node_id=.&enums=true'),
+            {},
+        );
+    }
+    getTabletsInfo({nodes = [], path}: {nodes?: string[]; path?: string}) {
+        const filter = nodes.length > 0 && `(NodeId=[${nodes.join(',')}])`;
+        return this.get<TEvTabletStateResponse>(this.getPath('/viewer/json/tabletinfo'), {
+            filter,
+            path,
+            enums: true,
+        });
+    }
+    getSchema({path}: {path: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TEvDescribeSchemeResult>(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                backup: false,
+                private: true,
+                partition_config: true,
+                partition_stats: true,
+                partitioning_info: true,
+                subs: 1,
+            },
+            {concurrentId: concurrentId || `getSchema|${path}`},
+        );
+    }
+    getDescribe({path}: {path: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<TEvDescribeSchemeResult>(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                partition_stats: true,
+                subs: 0,
+            },
+            {concurrentId: concurrentId || `getDescribe|${path}`},
+        );
+    }
+    getSchemaAcl({path}: {path: string}) {
+        return this.get<TMetaInfo>(
+            this.getPath('/viewer/json/acl'),
+            {
+                path,
+            },
+            {concurrentId: `getSchemaAcl|${path}`},
+        );
+    }
+    getHeatmapData({path}: {path: string}) {
+        return this.get<TEvDescribeSchemeResult>(this.getPath('/viewer/json/describe'), {
+            path,
+            enums: true,
+            backup: false,
+            children: false,
+            partition_config: false,
+            partition_stats: true,
+        });
+    }
+    getNetwork(path: string) {
+        return this.get<TNetInfo>(this.getPath('/viewer/json/netinfo'), {
+            enums: true,
+            path,
+        });
+    }
+    getTopic({path}: {path?: string}, {concurrentId}: AxiosOptions = {}) {
+        return this.get<DescribeTopicResult>(
+            this.getPath('/viewer/json/describe_topic'),
+            {
+                enums: true,
+                include_stats: true,
+                path,
+            },
+            {concurrentId: concurrentId || 'getTopic'},
+        );
+    }
+    getConsumer(
+        {path, consumer}: {path?: string; consumer?: string},
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.get<DescribeConsumerResult>(
+            this.getPath('/viewer/json/describe_consumer'),
+            {
+                enums: true,
+                include_stats: true,
+                path,
+                consumer,
+            },
+            {concurrentId: concurrentId || 'getConsumer'},
+        );
+    }
+    getPoolInfo(poolName: string) {
+        return this.get<TStorageInfo>(this.getPath('/viewer/json/storage'), {
+            pool: poolName,
+            enums: true,
+        });
+    }
+    getTablet({id}: {id?: string}) {
+        return this.get<TEvTabletStateResponse>(
+            this.getPath(`/viewer/json/tabletinfo?filter=(TabletId=${id})`),
+            {
+                enums: true,
+            },
+        );
+    }
+    getTabletHistory({id}: {id?: string}) {
+        return this.get<UnmergedTEvTabletStateResponse>(
+            this.getPath(`/viewer/json/tabletinfo?filter=(TabletId=${id})`),
+            {
+                enums: true,
+                merge: false,
+            },
+        );
+    }
+    getNodesList() {
+        return this.get<TEvNodesInfo>(this.getPath('/viewer/json/nodelist'), {enums: true});
+    }
+    getTenantsList() {
+        return this.get<TTenants>(this.getPath('/viewer/json/tenants'), {
+            enums: true,
+            state: 0,
+        });
+    }
+    sendQuery<Action extends Actions, Schema extends Schemas = undefined>(
+        {
+            query,
+            database,
+            action,
+            stats,
+            schema,
+        }: {
+            query?: string;
+            database?: string;
+            action?: Action;
+            stats?: string;
+            schema?: Schema;
+        },
+        {concurrentId}: AxiosOptions = {},
+    ) {
+        return this.post<QueryAPIResponse<Action, Schema>>(
+            this.getPath(`/viewer/json/query${schema ? `?schema=${schema}` : ''}`),
+            {
+                query,
+                database,
+                action,
+                stats,
+                timeout: 600000,
+            },
+            {},
+            {
+                concurrentId,
+                timeout: 9 * 60 * 1000,
+            },
+        );
+    }
+    getExplainQuery<Action extends ExplainActions>(
+        query: string,
+        database: string,
+        action: Action,
+    ) {
+        return this.post<ExplainResponse<Action>>(
+            this.getPath('/viewer/json/query'),
+            {
+                query,
+                database,
+                action: action || 'explain',
+                timeout: 600000,
+            },
+            {},
+        );
+    }
+    getExplainQueryAst(query: string, database: string) {
+        return this.post<ExplainResponse<'explain-ast'>>(
+            this.getPath('/viewer/json/query'),
+            {
+                query,
+                database,
+                action: 'explain-ast',
+                timeout: 600000,
+            },
+            {},
+        );
+    }
+    getHotKeys(path: string, enableSampling: boolean) {
+        return this.get(this.getPath('/viewer/json/hotkeys'), {
+            path,
+            enable_sampling: enableSampling,
+        });
+    }
+    getHealthcheckInfo(database: string) {
+        return this.get<HealthCheckAPIResponse>(this.getPath('/viewer/json/healthcheck'), {
+            tenant: database,
+        });
+    }
+    killTablet(id?: string) {
+        return this.get<string>(this.getPath(`/tablets?KillTabletID=${id}`), {});
+    }
+    stopTablet(id?: string, hiveId?: string) {
+        return this.get<string>(
+            this.getPath(`/tablets/app?TabletID=${hiveId}&page=StopTablet&tablet=${id}`),
+            {},
+        );
+    }
+    resumeTablet(id?: string, hiveId?: string) {
+        return this.get<string>(
+            this.getPath(`/tablets/app?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`),
+            {},
+        );
+    }
+    getTabletDescribe(tenantId: TDomainKey) {
+        return this.get<TEvDescribeSchemeResult>(this.getPath('/viewer/json/describe'), {
+            schemeshard_id: tenantId?.SchemeShard,
+            path_id: tenantId?.PathId,
+        });
+    }
+    postSetting(name: string, value: string) {
+        return this.request({
+            method: 'PATCH',
+            url: settingsApi || '',
+            data: {[name]: value},
+        });
+    }
+    authenticate(user: string, password: string) {
+        return this.post(
+            this.getPath('/login'),
+            {
+                user,
+                password,
+            },
+            {},
+        );
+    }
+    logout() {
+        return this.post(this.getPath('/logout'), {}, {});
+    }
+    whoami() {
+        return this.get<TUserToken>(this.getPath('/viewer/json/whoami'), {});
+    }
+}
+
+const api = new YdbEmbeddedAPI({config: config});
+window.api = api;

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

@@ -1,11 +1,14 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import type {Reducer} from 'redux';
 
-const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+import type {ClusterAction, ClusterState} from './types';
+
+export const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
 
 const initialState = {loading: true, wasLoaded: false};
 
-const cluster = function (state = initialState, action) {
+const cluster: Reducer<ClusterState, ClusterAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_CLUSTER.REQUEST: {
             return {
@@ -14,17 +17,9 @@ const cluster = function (state = initialState, action) {
             };
         }
         case FETCH_CLUSTER.SUCCESS: {
-            const {data} = action;
-            const clusterInfo = data.cluster ? data.cluster.cluster : data;
-            const clusterName = data.cluster?.title || data.Name;
             return {
                 ...state,
-                data: {
-                    ...clusterInfo,
-                    balancer: data.cluster?.balancer,
-                    solomon: data.cluster?.solomon,
-                    Name: clusterName,
-                },
+                data: action.data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -42,7 +37,7 @@ const cluster = function (state = initialState, action) {
     }
 };
 
-export function getClusterInfo(clusterName) {
+export function getClusterInfo(clusterName?: string) {
     return createApiRequest({
         request: window.api.getClusterInfo(clusterName),
         actions: FETCH_CLUSTER,

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

@@ -0,0 +1,13 @@
+import {FETCH_CLUSTER} from './cluster';
+
+import type {TClusterInfo} from '../../../types/api/cluster';
+import type {ApiRequestAction} from '../../utils';
+
+export interface ClusterState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: TClusterInfo;
+    error?: unknown;
+}
+
+export type ClusterAction = ApiRequestAction<typeof FETCH_CLUSTER, TClusterInfo, unknown>;

package/dist/store/reducers/executeTopQueries.ts

@@ -13,7 +13,7 @@ import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-import type {IRootState} from '.';
+import type {RootState} from '.';
 
 export const FETCH_TOP_QUERIES = createRequestActionTypes('top-queries', 'FETCH_TOP_QUERIES');
 const SET_TOP_QUERIES_STATE = 'top-queries/SET_TOP_QUERIES_STATE';
@@ -126,7 +126,7 @@ const executeTopQueries: Reducer<ITopQueriesState, ITopQueriesAction> = (
 type FetchTopQueries = (params: {
     database: string;
     filters?: ITopQueriesFilters;
-}) => ThunkAction<Promise<IQueryResult | undefined>, IRootState, unknown, AnyAction>;
+}) => ThunkAction<Promise<IQueryResult | undefined>, RootState, unknown, AnyAction>;
 
 export const fetchTopQueries: FetchTopQueries =
     ({database, filters}) =>

package/dist/store/reducers/index.ts

@@ -1,7 +1,7 @@
 import {combineReducers} from 'redux';
 
 import nodes from './nodes';
-import cluster from './cluster';
+import cluster from './cluster/cluster';
 import tenant from './tenant';
 import storage from './storage';
 import node from './node';
@@ -15,7 +15,7 @@ import schema from './schema';
 import host from './host';
 import network from './network';
 import pool from './pool';
-import tenants from './tenants';
+import tenants from './tenants/tenants';
 import tablet from './tablet';
 import topic from './topic';
 import consumer from './consumer';
@@ -82,7 +82,8 @@ const combinedReducer = combineReducers({
     ...rootReducer,
 });
 
-export type IRootReducer = typeof combinedReducer;
-export type IRootState = ReturnType<IRootReducer>;
+export type RootReducer = typeof combinedReducer;
+export type RootState = ReturnType<RootReducer>;
+export type GetState = () => RootState;
 
 export default combinedReducer;

package/dist/store/reducers/node.js

@@ -116,7 +116,11 @@ export const selectNodeStructure = createSelector(
                     if (!structure[String(pDiskId)]) {
                         structure[String(pDiskId)] = {vDisks: {}, ...vd.PDisk};
                     }
-                    structure[String(pDiskId)].vDisks[vDiskId] = vd;
+                    structure[String(pDiskId)].vDisks[vDiskId] = {
+                        ...vd,
+                        // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
+                        StoragePoolName: pool.Name,
+                    };
                 });
             });
         });

package/dist/store/reducers/nodesList.ts

@@ -4,10 +4,10 @@ import type {
     NodesListState,
     NodesListAction,
     NodesListRootStateSlice,
-    NodesMap,
 } from '../../types/store/nodesList';
 import '../../services/api';
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {prepareNodesMap} from '../../utils/nodes';
 
 export const FETCH_NODES_LIST = createRequestActionTypes('nodesList', 'FETCH_NODES_LIST');
 
@@ -50,11 +50,6 @@ export function getNodesList() {
 }
 
 export const selectNodesMap = (state: NodesListRootStateSlice) =>
-    state.nodesList.data?.reduce<NodesMap>((nodesMap, node) => {
-        if (node.Id && node.Host) {
-            nodesMap.set(node.Id, node.Host);
-        }
-        return nodesMap;
-    }, new Map());
+    prepareNodesMap(state.nodesList.data);
 
 export default nodesList;