ydb-embedded-ui 4.0.0 → 4.2.0

package/dist/store/reducers/settings.js

@@ -26,16 +26,6 @@ export function readSavedSettingsValue(key, defaultValue) {
     return savedValue ?? defaultValue;
 }
 
-// navigation managed its compact state internally before, and its approach is not compatible with settings
-// try reading the old localStorage entry to use it as a default value, for backward compatibility
-// assume it is safe to remove this code block if it is at least a few months old
-// there a two of these, search for a similar comment
-let legacyAsideNavCompactState = '';
-try {
-    legacyAsideNavCompactState = String(JSON.parse(getValueFromLS('nvAsideHeader')).isCompact);
-    localStorage.removeItem('nvAsideHeader');
-} catch {}
-
 export const initialState = {
     problemFilter: ALL,
     userSettings: {
@@ -53,10 +43,7 @@ export const initialState = {
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
         [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
-        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(
-            ASIDE_HEADER_COMPACT_KEY,
-            legacyAsideNavCompactState || 'true',
-        ),
+        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
         [PARTITIONS_SELECTED_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_SELECTED_COLUMNS_KEY),
     },
     systemSettings,

package/dist/store/reducers/storage.js

@@ -271,10 +271,22 @@ export const getFlatListStorageGroups = createSelector([getStoragePools], (stora
                             ? currentType
                             : 'Mixed';
                     }, '');
+
+                    // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
+                    const vDisks = group.VDisks?.map((vdisk) => ({
+                        ...vdisk,
+                        StoragePoolName: pool.Name,
+                        Donors: vdisk.Donors?.map((donor) => ({
+                            ...donor,
+                            StoragePoolName: pool.Name,
+                        })),
+                    }));
+
                     return [
                         ...acc,
                         {
                             ...group,
+                            VDisks: vDisks,
                             Read: readSpeedBytesPerSec,
                             Write: writeSpeedBytesPerSec,
                             PoolName: pool.Name,

package/dist/store/reducers/tablet.ts

@@ -11,6 +11,7 @@ import type {
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {prepareNodesMap} from '../../utils/nodes';
 
 export const FETCH_TABLET = createRequestActionTypes('TABLET', 'FETCH_TABLET');
 export const FETCH_TABLET_DESCRIBE = createRequestActionTypes('TABLET', 'FETCH_TABLET_DESCRIBE');
@@ -63,9 +64,19 @@ const tablet: Reducer<ITabletState, ITabletAction> = (state = initialState, acti
 
 export const getTablet = (id: string) => {
     return createApiRequest({
-        request: Promise.all([window.api.getTablet({id}), window.api.getTabletHistory({id})]),
+        request: Promise.all([
+            window.api.getTablet({id}),
+            window.api.getTabletHistory({id}),
+            window.api.getNodesList(),
+        ]),
         actions: FETCH_TABLET,
-        dataHandler: ([tabletResponseData, historyResponseData]): ITabletHandledResponse => {
+        dataHandler: ([
+            tabletResponseData,
+            historyResponseData,
+            nodesList,
+        ]): ITabletHandledResponse => {
+            const nodesMap = prepareNodesMap(nodesList);
+
             const historyData = Object.keys(historyResponseData).reduce<
                 ITabletPreparedHistoryItem[]
             >((list, nodeId) => {
@@ -75,6 +86,8 @@ export const getTablet = (id: string) => {
 
                     const {ChangeTime, Generation, State, Leader, FollowerId} = leaderTablet;
 
+                    const fqdn = nodesMap && nodeId ? nodesMap.get(Number(nodeId)) : undefined;
+
                     list.push({
                         nodeId,
                         generation: Generation,
@@ -82,6 +95,7 @@ export const getTablet = (id: string) => {
                         state: State,
                         leader: Leader,
                         followerId: FollowerId,
+                        fqdn,
                     });
                 }
                 return list;

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

@@ -1,12 +1,15 @@
-import _ from 'lodash';
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
+import type {Reducer} from 'redux';
 
-const FETCH_TENANTS = createRequestActionTypes('tenants', 'FETCH_TENANTS');
+import '../../../services/api';
+import {createRequestActionTypes, createApiRequest} from '../../utils';
 
-const initialState = {loading: true, wasLoaded: false, data: {}};
+import type {TenantsAction, TenantsState} from './types';
 
-const tenants = function (state = initialState, action) {
+export const FETCH_TENANTS = createRequestActionTypes('tenants', 'FETCH_TENANTS');
+
+const initialState = {loading: true, wasLoaded: false};
+
+const tenants: Reducer<TenantsState, TenantsAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_TENANTS.REQUEST: {
             return {
@@ -35,20 +38,22 @@ const tenants = function (state = initialState, action) {
     }
 };
 
-export function getTenantsInfo(clusterName) {
+export function getTenantsInfo(clusterName?: string) {
     return createApiRequest({
         request: window.api.getTenants(clusterName),
         actions: FETCH_TENANTS,
         dataHandler: (response, getState) => {
             const {singleClusterMode} = getState();
+
             if (singleClusterMode) {
                 return response.TenantInfo;
             } else {
-                return response.databases?.map((tenant) => {
+                return response.TenantInfo?.map((tenant) => {
                     const node = tenant.Nodes ? tenant.Nodes[0] : {};
                     const address =
                         node.Host && node.Endpoints
-                            ? _.find(node.Endpoints, {Name: 'http-mon'})?.Address
+                            ? node.Endpoints.find((endpoint) => endpoint.Name === 'http-mon')
+                                  ?.Address
                             : undefined;
                     const backend = node.Host ? `${node.Host}${address ? address : ''}` : undefined;
                     return {...tenant, backend};

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

@@ -0,0 +1,17 @@
+import {FETCH_TENANTS} from './tenants';
+
+import type {TTenant} from '../../../types/api/tenant';
+import type {ApiRequestAction} from '../../utils';
+
+export interface PreparedTenant extends TTenant {
+    backend?: string;
+}
+
+export interface TenantsState {
+    loading: boolean;
+    wasLoaded: boolean;
+    tenants?: PreparedTenant[];
+    error?: unknown;
+}
+
+export type TenantsAction = ApiRequestAction<typeof FETCH_TENANTS, PreparedTenant[], unknown>;

package/dist/store/utils.ts

@@ -4,6 +4,7 @@ import {AxiosResponse} from 'axios';
 import createToast from '../utils/createToast';
 
 import {SET_UNAUTHENTICATED} from './reducers/authentication';
+import type {GetState} from './reducers';
 
 export const nop = (result: any) => result;
 
@@ -24,7 +25,7 @@ const isAxiosResponse = (response: any): response is AxiosResponse =>
 type CreateApiRequestParams<Actions, Response, HandledResponse> = {
     actions: Actions;
     request: Promise<Response>;
-    dataHandler?: (data: Response, getState?: () => any) => HandledResponse;
+    dataHandler?: (data: Response, getState: GetState) => HandledResponse;
 };
 
 export function createApiRequest<
@@ -36,7 +37,7 @@ export function createApiRequest<
     request,
     dataHandler = nop,
 }: CreateApiRequestParams<Actions, Response, HandledResponse>) {
-    const doRequest = async function (dispatch: Dispatch, getState: () => any) {
+    const doRequest = async function (dispatch: Dispatch, getState: GetState) {
         dispatch({
             type: actions.REQUEST,
         });

package/dist/types/api/acl.ts

@@ -0,0 +1,25 @@
+/**
+ * endpoint: /viewer/json/acl
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ *
+ * incomplete, only fields that present for ACL requests
+ */
+export interface TMetaInfo {
+    Common: TMetaCommonInfo;
+}
+
+/** incomplete */
+export interface TMetaCommonInfo {
+    Path: string;
+    Owner?: string;
+    ACL?: TACE[];
+}
+
+interface TACE {
+    AccessType: string;
+    AccessRights?: string[];
+    Subject: string;
+    InheritanceType?: string[];
+    AccessRule: string;
+}

package/dist/types/api/cluster.ts

@@ -31,4 +31,7 @@ export interface TClusterInfo {
     Tenants?: string;
     /** uint64 */
     Tablets?: string;
+    
+    Balancer?: string; // additional
+    Solomon?: string; // additional
 }

package/dist/types/api/compute.ts

@@ -2,9 +2,11 @@ import {EFlag} from './enums';
 import {TEndpoint, TLegacyNodeLocation, TPoolStats} from './nodes';
 import {TMetrics} from './tenant';
 
-// endpoint: viewer/json/compute
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
-
+/**
+ * endpoint: viewer/json/compute
+ * 
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
 export interface TComputeInfo {
     Overall: EFlag;
     Tenants?: TComputeTenantInfo[];

package/dist/types/api/netInfo.ts

@@ -0,0 +1,48 @@
+import type {EFlag} from './enums';
+
+/**
+ * endpoint: /viewer/json/netinfo
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
+export interface TNetInfo {
+    Overall: EFlag;
+    Tenants?: TNetTenantInfo[];
+}
+
+interface TNetTenantInfo {
+    Overall: EFlag;
+    Name: string;
+    Nodes?: TNetNodeInfo[];
+}
+
+interface TNetNodeInfo {
+    NodeId: number;
+    Overall: EFlag;
+    Peers?: TNetNodePeerInfo[];
+    NodeType: ENodeType;
+    DataCenter: string;
+    Rack: string;
+    Host: string;
+    Port: number;
+}
+
+interface TNetNodePeerInfo {
+    NodeId: number;
+    PeerName: string;
+    Connected: boolean;
+    ConnectStatus: EFlag;
+    /** uint64 */
+    ChangeTime: string;
+    NodeType: ENodeType;
+    DataCenter: string;
+    Rack: string;
+    Host: string;
+    Port: number;
+}
+
+enum ENodeType {
+    UnknownNodeType,
+    Static,
+    Dynamic,
+}

package/dist/types/api/nodes.ts

@@ -3,9 +3,11 @@ import {TPDiskStateInfo} from './pdisk';
 import {TTabletStateInfo} from './tablet';
 import {TVDiskStateInfo} from './vdisk';
 
-// endpoint: /viewer/json/nodes
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
-
+/**
+ * endpoint: /viewer/json/nodes
+ * 
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
 export interface TNodesInfo {
     Overall?: EFlag;
     Nodes?: TNodeInfo[];

package/dist/types/api/pdisk.ts

@@ -1,7 +1,16 @@
 import {EFlag} from './enums';
 
-// endpoint: /viewer/json/pdiskinfo
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/node_whiteboard.proto
+/**
+ * endpoint: /viewer/json/pdiskinfo
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/node_whiteboard.proto
+ */
+export interface TEvPDiskStateResponse {
+    PDiskStateInfo?: TPDiskStateInfo[];
+    /** uint64 */
+    ResponseTime?: string;
+    ResponseDuration?: number;
+}
 
 export interface TPDiskStateInfo {
     PDiskId?: number;

package/dist/types/api/storage.ts

@@ -1,9 +1,11 @@
 import {EFlag} from './enums';
 import {TVDiskStateInfo} from './vdisk';
 
-// endpoint: /viewer/json/storage
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
-
+/**
+ * endpoint: /viewer/json/storage
+ * 
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
 export interface TStorageInfo {
     Overall?: EFlag;
     StoragePools?: TStoragePoolInfo[];

package/dist/types/api/tenant.ts

@@ -2,13 +2,20 @@ import {EFlag} from './enums';
 import {TPoolStats, TSystemStateInfo} from './nodes';
 import {TTabletStateInfo} from './tablet';
 
-// endpoint: /viewer/json/tenantinfo
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
-
+/**
+ * endpoint: /viewer/json/tenants
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
 export interface TTenants {
     Tenants?: TTenant[];
 }
 
+/**
+ * endpoint: /viewer/json/tenantinfo
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ */
 export interface TTenantInfo {
     TenantInfo?: TTenant[];
     Errors?: string[];
@@ -47,6 +54,9 @@ export interface TTenant {
     CoresUsed: number;
     /** uint64 */
     StorageGroups: string;
+
+    MonitoringEndpoint?: string; // additional
+    ControlPlane?: ControlPlane; // additional
 }
 
 interface THiveDomainStatsStateCount {
@@ -107,6 +117,11 @@ interface TTenantResource {
     Count: number;
 }
 
+/** incomplete */
+interface ControlPlane {
+    name?: string;
+}
+
 export enum ETenantType {
     'UnknownTenantType' = 'UnknownTenantType',
     'Domain' = 'Domain',

package/dist/types/api/vdisk.ts

@@ -1,8 +1,16 @@
 import {EFlag} from './enums';
 import {TPDiskStateInfo} from './pdisk';
 
-// endpoint: /viewer/json/vdiskinfo
-// source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/node_whiteboard.proto
+/**
+ * endpoint: /viewer/json/vdiskinfo
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/node_whiteboard.proto
+ */
+export interface TEvVDiskStateResponse {
+    VDiskStateInfo?: TVDiskStateInfo[];
+    ResponseTime?: string;
+    ResponseDuration?: number;
+}
 
 export interface TVDiskStateInfo {
     VDiskId?: TVDiskID;

package/dist/types/api/whoami.ts

@@ -0,0 +1,19 @@
+/**
+ * endpoint: /viewer/json/whoami
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/library/aclib/protos/aclib.proto
+ */
+export interface TUserToken {
+    UserSID?: string;
+    GroupSIDs?: TProtoHashTable;
+    OriginalUserToken?: string;
+    AuthType?: string;
+}
+
+interface TProtoHashTable {
+    Buckets?: TProtoHashBucket[];
+}
+
+interface TProtoHashBucket {
+    Values?: string[];
+}

package/dist/types/store/tablet.ts

@@ -11,6 +11,7 @@ export interface ITabletPreparedHistoryItem {
     state: ETabletState | undefined;
     leader: boolean | undefined;
     followerId: number | undefined;
+    fqdn: string | undefined;
 }
 
 export interface ITabletState {

package/dist/types/window.d.ts

@@ -37,4 +37,9 @@ interface Window {
     custom_backend?: string;
 
     __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof import('redux').compose;
+
+    userSettings?: Record<string, string | undefined>;
+    systemSettings?: Record<string, string | undefined>;
+
+    api: import('../services/api').YdbEmbeddedAPI;
 }

package/dist/utils/createToast.tsx

@@ -10,13 +10,13 @@ interface CreateToastProps {
 }
 
 function createToast({name, title, type, content}: CreateToastProps) {
-    return toaster.createToast({
+    return toaster.add({
         name: name ?? 'Request succeeded',
         title: title ?? 'Request succeeded',
         type: type ?? 'success',
         content: content,
         isClosable: true,
-        allowAutoHiding: type === 'success',
+        autoHiding: type === 'success' ? 5000 : false,
     });
 }
 

package/dist/utils/hooks/useTypedSelector.ts

@@ -1,5 +1,5 @@
 import {TypedUseSelectorHook, useSelector} from 'react-redux';
 
-import {IRootState} from '../../store';
+import {RootState} from '../../store';
 
-export const useTypedSelector: TypedUseSelectorHook<IRootState> = useSelector;
+export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

package/dist/utils/nodes.ts

@@ -1,5 +1,7 @@
 import type {TSystemStateInfo} from '../types/api/nodes';
+import type {TNodeInfo} from '../types/api/nodesList';
 import type {INodesPreparedEntity} from '../types/store/nodes';
+import type {NodesMap} from '../types/store/nodesList';
 import {EFlag} from '../types/api/enums';
 
 export enum NodesUptimeFilterValues {
@@ -15,6 +17,17 @@ export const NodesUptimeFilterTitles = {
 export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
     !node.SystemState || node.SystemState === EFlag.Grey;
 
+export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints'>;
+
 export interface AdditionalNodesInfo extends Record<string, unknown> {
-    getNodeRef?: Function;
+    getNodeRef?: (node?: NodeAddress) => string;
 }
+
+export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
+    return nodesList?.reduce<NodesMap>((nodesMap, node) => {
+        if (node.Id && node.Host) {
+            nodesMap.set(Number(node.Id), node.Host);
+        }
+        return nodesMap;
+    }, new Map());
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "files": [
     "dist"
   ],
@@ -12,7 +12,7 @@
     "@gravity-ui/axios-wrapper": "^1.3.0",
     "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/navigation": "^0.3.1",
+    "@gravity-ui/navigation": "^0.4.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
     "axios": "0.19.2",
@@ -39,7 +39,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.0.3"
+    "ydb-ui-components": "^3.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -105,7 +105,7 @@
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^3.20.2",
+    "@gravity-ui/uikit": "^4.11.1",
     "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",

package/dist/services/api.d.ts

@@ -1,87 +0,0 @@
-type AxiosOptions = {
-    concurrentId?: string;
-};
-
-interface Window {
-    api: {
-        getSchema: (
-            params: {path: string},
-            axiosOptions?: AxiosOptions,
-        ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
-        getDescribe: (
-            params: {path: string},
-            axiosOptions?: AxiosOptions,
-        ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
-        getStorageInfo: (
-            params: {
-                tenant: string;
-                filter: string;
-                nodeId: string;
-            },
-            axiosOptions?: AxiosOptions,
-        ) => Promise<import('../types/api/storage').TStorageInfo>;
-        getNodes: (
-            params: import('../types/store/nodes').INodesApiRequestParams,
-            axiosOptions?: AxiosOptions,
-        ) => Promise<import('../types/api/nodes').TNodesInfo>;
-        getCompute: (path: string) => Promise<import('../types/api/compute').TComputeInfo>;
-        sendQuery: <
-            Action extends import('../types/api/query').Actions,
-            Schema extends import('../types/api/query').Schemas = undefined,
-        >(
-            params: {
-                query?: string;
-                database?: string;
-                action?: Action;
-                stats?: string;
-                schema?: Schema;
-            },
-            axiosOptions?: AxiosOptions,
-        ) => Promise<import('../types/api/query').QueryAPIResponse<Action, Schema>>;
-        getExplainQuery: <Action extends import('../types/api/query').ExplainActions = 'explain'>(
-            query: string,
-            database: string,
-            action?: Action,
-        ) => Promise<import('../types/api/query').ExplainResponse<Action>>;
-        getExplainQueryAst: (
-            query: string,
-            database: string,
-        ) => Promise<import('../types/api/query').ExplainResponse<'explain-ast'>>;
-        getHealthcheckInfo: (
-            database: string,
-        ) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>;
-        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>;
-        getTopic: (params: {
-            path?: string;
-        }) => Promise<import('../types/api/topic').DescribeTopicResult>;
-        getConsumer: (params: {
-            path?: string;
-            consumer?: string;
-        }) => Promise<import('../types/api/consumer').DescribeConsumerResult>;
-        getHostInfo: () => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
-        getNodeInfo: (
-            id?: string,
-        ) => Promise<import('../types/api/systemState').TEvSystemStateResponse>;
-        getNodesList: () => Promise<import('../types/api/nodesList').TEvNodesInfo>;
-        [method: string]: Function;
-    };
-}