ydb-embedded-ui 3.2.2 → 3.3.0

package/dist/store/reducers/nodes.ts

@@ -1,21 +1,35 @@
 import type {Reducer} from 'redux';
+import {createSelector, Selector} from 'reselect';
+import {escapeRegExp} from 'lodash/fp';
 
 import '../../services/api';
+import {ALL, HOUR_IN_SECONDS, IProblemFilterValues} from '../../utils/constants';
+import {calcUptime, calcUptimeInSeconds} from '../../utils';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
-import {INodesAction, INodesRootStateSlice, INodesState} from '../../types/store/nodes';
+import type {
+    INodesAction,
+    INodesApiRequestParams,
+    INodesHandledResponse,
+    INodesPreparedEntity,
+    INodesRootStateSlice,
+    INodesState,
+} from '../../types/store/nodes';
+import {EFlag} from '../../types/api/enums';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
 export const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
-const CLEAR_NODES = 'nodes/CLEAR_NODES';
+const RESET_NODES_STATE = 'nodes/RESET_NODES_STATE';
 const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
 const SET_DATA_WAS_NOT_LOADED = 'nodes/SET_DATA_WAS_NOT_LOADED';
+const SET_SEARCH_VALUE = 'nodes/SET_SEARCH_VALUE';
 
 const initialState = {
-    loading: true,
+    loading: false,
     wasLoaded: false,
     nodesUptimeFilter: NodesUptimeFilterValues.All,
+    searchValue: '',
 };
 
 const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action) => {
@@ -29,7 +43,8 @@ const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action)
         case FETCH_NODES.SUCCESS: {
             return {
                 ...state,
-                data: action.data,
+                data: action.data?.Nodes,
+                totalNodes: action.data?.TotalNodes,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
@@ -42,22 +57,28 @@ const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action)
                 loading: false,
             };
         }
-        case CLEAR_NODES: {
+        case RESET_NODES_STATE: {
             return {
                 ...state,
-                loading: true,
-                data: undefined,
-                wasLoaded: false,
-                error: undefined,
+                loading: initialState.loading,
+                wasLoaded: initialState.wasLoaded,
+                nodesUptimeFilter: initialState.nodesUptimeFilter,
+                searchValue: initialState.searchValue,
             };
         }
-
         case SET_NODES_UPTIME_FILTER: {
             return {
                 ...state,
                 nodesUptimeFilter: action.data,
             };
         }
+        case SET_SEARCH_VALUE: {
+            return {
+                ...state,
+                searchValue: action.data,
+            };
+        }
+
         case SET_DATA_WAS_NOT_LOADED: {
             return {
                 ...state,
@@ -69,14 +90,68 @@ const nodes: Reducer<INodesState, INodesAction> = (state = initialState, action)
     }
 };
 
-export function getNodes(path: string) {
+export function getNodes({tenant, filter, type = 'any'}: INodesApiRequestParams) {
     return createApiRequest({
-        request: window.api.getNodes(path),
+        request: window.api.getNodes({tenant, filter, type}),
         actions: FETCH_NODES,
+        dataHandler: (data): INodesHandledResponse => {
+            const rawNodes = data.Nodes || [];
+
+            const preparedNodes = rawNodes.map((node) => {
+                return {
+                    ...node?.SystemState,
+                    Tablets: node?.Tablets,
+                    NodeId: node?.NodeId,
+                    Uptime: calcUptime(node?.SystemState?.StartTime),
+                    TenantName: node?.SystemState?.Tenants?.[0],
+                };
+            });
+
+            return {
+                Nodes: preparedNodes,
+                TotalNodes: Number(data.TotalNodes) || preparedNodes.length,
+            };
+        },
     });
 }
 
-export const clearNodes = () => ({type: CLEAR_NODES} as const);
+export function getComputeNodes(path: string) {
+    return createApiRequest({
+        request: window.api.getCompute(path),
+        actions: FETCH_NODES,
+        dataHandler: (data): INodesHandledResponse => {
+            const preparedNodes: INodesPreparedEntity[] = [];
+
+            if (data.Tenants) {
+                for (const tenant of data.Tenants) {
+                    if (tenant && tenant.Nodes) {
+                        const tenantNodes = tenant.Nodes.map((node) => {
+                            return {
+                                ...node,
+                                TenantName: tenant.Name,
+                                SystemState: node?.Overall,
+                                Uptime: calcUptime(node?.StartTime),
+                            };
+                        });
+
+                        preparedNodes.push(...tenantNodes);
+                    }
+                }
+            }
+
+            return {
+                Nodes: preparedNodes,
+                TotalNodes: preparedNodes.length,
+            };
+        },
+    });
+}
+
+export const resetNodesState = () => {
+    return {
+        type: RESET_NODES_STATE,
+    } as const;
+};
 
 export const setNodesUptimeFilter = (value: NodesUptimeFilterValues) =>
     ({
@@ -90,6 +165,65 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
-export const getNodesUptimeFilter = (state: INodesRootStateSlice) => state.nodes.nodesUptimeFilter;
+export const setSearchValue = (value: string) => {
+    return {
+        type: SET_SEARCH_VALUE,
+        data: value,
+    } as const;
+};
+
+const getNodesUptimeFilter = (state: INodesRootStateSlice) => state.nodes.nodesUptimeFilter;
+const getSearchValue = (state: INodesRootStateSlice) => state.nodes.searchValue;
+const getNodesList = (state: INodesRootStateSlice) => state.nodes.data;
+
+const filterNodesByProblemsStatus = (
+    nodesList: INodesPreparedEntity[] = [],
+    problemFilter: IProblemFilterValues,
+) => {
+    if (problemFilter === ALL) {
+        return nodesList;
+    }
+
+    return nodesList.filter(({SystemState}) => {
+        return SystemState && SystemState !== EFlag.Green;
+    });
+};
+
+export const filterNodesByUptime = (
+    nodesList: INodesPreparedEntity[] = [],
+    nodesUptimeFilter: NodesUptimeFilterValues,
+) => {
+    if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
+        return nodesList;
+    }
+    return nodesList.filter(({StartTime}) => {
+        return !StartTime || calcUptimeInSeconds(StartTime) < HOUR_IN_SECONDS;
+    });
+};
+
+const filterNodesBySearchValue = (nodesList: INodesPreparedEntity[] = [], searchValue: string) => {
+    if (!searchValue) {
+        return nodesList;
+    }
+    const re = new RegExp(escapeRegExp(searchValue), 'i');
+
+    return nodesList.filter((node) => {
+        return node.Host ? re.test(node.Host) || re.test(String(node.NodeId)) : true;
+    });
+};
+
+export const getFilteredPreparedNodesList: Selector<
+    INodesRootStateSlice,
+    INodesPreparedEntity[] | undefined
+> = createSelector(
+    [getNodesList, getNodesUptimeFilter, getSearchValue, (state) => state.settings.problemFilter],
+    (nodesList, uptimeFilter, searchValue, problemFilter) => {
+        let result = filterNodesByUptime(nodesList, uptimeFilter);
+        result = filterNodesByProblemsStatus(result, problemFilter);
+        result = filterNodesBySearchValue(result, searchValue);
+
+        return result;
+    },
+);
 
 export default nodes;

package/dist/store/reducers/{clusterNodes.js → nodesList.js}

@@ -1,12 +1,6 @@
-import {createSelector} from 'reselect';
-
 import '../../services/api';
-import {ALL} from '../../utils/constants';
 import {createRequestActionTypes, createApiRequest} from '../utils';
 
-import {filterByUptime} from './storage';
-import {getNodesUptimeFilter} from './nodes';
-
 const FETCH_NODES_LIST = createRequestActionTypes('tenants', 'FETCH_NODES_LIST');
 
 const initialState = {loading: true, wasLoaded: false, data: []};
@@ -51,39 +45,4 @@ export function getNodesList() {
     });
 }
 
-const filterByProblemsStatus = (nodes = [], problemFilter) => {
-    if (problemFilter === ALL) {
-        return nodes;
-    }
-
-    return nodes.filter(({Overall}) => {
-        return Overall && Overall !== 'Green';
-    });
-};
-
-export const filterNodesByStatusAndUptime = (nodes = [], problemFilter, uptimeFilter) => {
-    let result = filterByProblemsStatus(nodes, problemFilter);
-    result = filterByUptime(result, uptimeFilter);
-
-    return result;
-};
-
-export const getFilteredNodes = createSelector(
-    [
-        (state) => state.nodes.data?.Tenants,
-        (state) => state.settings.problemFilter,
-        getNodesUptimeFilter,
-    ],
-    (tenants, problemFilter, uptimeFilter) => {
-        const nodes = tenants?.reduce((acc, item) => {
-            if (Array.isArray(item.Nodes)) {
-                return [...acc, ...item.Nodes.map((node) => ({...node, TenantName: item.Name}))];
-            }
-            return acc;
-        }, []);
-
-        return filterNodesByStatusAndUptime(nodes, problemFilter, uptimeFilter);
-    },
-);
-
 export default nodesList;

package/dist/store/reducers/settings.js

@@ -6,6 +6,7 @@ import {
     QUERY_INITIAL_RUN_ACTION_KEY,
     INVERTED_DISKS_KEY,
     ASIDE_HEADER_COMPACT_KEY,
+    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
@@ -17,9 +18,7 @@ const userSettings = window.userSettings || {};
 const systemSettings = window.systemSettings || {};
 
 export function readSavedSettingsValue(key, defaultValue) {
-    const savedValue = window.web_version
-        ? userSettings[key]
-        : getValueFromLS(key);
+    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
 
     return savedValue ?? defaultValue;
 }
@@ -40,10 +39,17 @@ export const initialState = {
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'light'),
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
+        [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
+            USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+            'false',
+        ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
         [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),
-        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, legacyAsideNavCompactState || 'true'),
+        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(
+            ASIDE_HEADER_COMPACT_KEY,
+            legacyAsideNavCompactState || 'true',
+        ),
     },
     systemSettings,
 };

package/dist/store/reducers/storage.js

@@ -1,14 +1,14 @@
 import _ from 'lodash';
 import {createSelector} from 'reselect';
 
-import {calcUptime, calcUptimeInSeconds} from '../../utils';
+import {calcUptime} from '../../utils';
 import {getUsage} from '../../utils/storage';
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {getPDiskType} from '../../utils/pdisk';
-import {HOUR_IN_SECONDS} from '../../utils/constants';
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {filterNodesByUptime} from './nodes';
 
 export const VisibleEntities = {
     All: 'All',
@@ -135,8 +135,15 @@ export function setInitialState() {
 }
 
 export function getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}) {
+    if (type === StorageTypes.nodes) {
+        return createApiRequest({
+            request: window.api.getNodes({tenant, filter, type: 'static'}, {concurrentId}),
+            actions: FETCH_STORAGE,
+        });
+    }
+
     return createApiRequest({
-        request: window.api.getStorageInfo({tenant, filter, nodeId, type}, {concurrentId}),
+        request: window.api.getStorageInfo({tenant, filter, nodeId}, {concurrentId}),
         actions: FETCH_STORAGE,
     });
 }
@@ -317,6 +324,19 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
     });
 });
 
+export const getVDisksForPDisk = createSelector(
+    getStorageNodes,
+    (_state, nodeId) => nodeId,
+    (_state, _nodeId, pdiskId) => pdiskId,
+    (storageNodes, nodeId, pdiskId) => {
+        const targetNode = storageNodes?.find((node) => node.NodeId === nodeId);
+        return targetNode?.VDisks?.filter((vdisk) => vdisk.PDiskId === pdiskId).map((data) => ({
+            ...data,
+            NodeId: nodeId,
+        }));
+    },
+);
+
 export const getFlatListStorage = createSelector(
     [getStorageType, getFlatListStorageGroups, getFlatListStorageNodes],
     (storageType, groupsList, nodesList) => {
@@ -373,15 +393,6 @@ const filterByUsage = (entities, usage) => {
     });
 };
 
-export const filterByUptime = (nodes = [], nodesUptimeFilter) => {
-    if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
-        return nodes;
-    }
-    return nodes.filter(({StartTime}) => {
-        return !StartTime || calcUptimeInSeconds(StartTime) < HOUR_IN_SECONDS;
-    });
-};
-
 export const getFilteredEntities = createSelector(
     [
         getStorageFilter,
@@ -396,7 +407,7 @@ export const getFilteredEntities = createSelector(
         result = filterByUsage(result, usageFilter);
 
         if (type === StorageTypes.nodes) {
-            result = filterByUptime(result, nodesUptimeFilter);
+            result = filterNodesByUptime(result, nodesUptimeFilter);
         }
 
         return result;

package/dist/store/reducers/tenant.js

@@ -5,6 +5,7 @@ import _ from 'lodash';
 const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
+const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
 
 const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, action) => {
     switch (action.type) {
@@ -37,7 +38,7 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
             };
         }
 
-        case 'CLEAR_TENANT': {
+        case CLEAR_TENANT: {
             return {
                 ...state,
                 tenant: {},
@@ -65,12 +66,12 @@ const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, a
 };
 
 export const clearTenant = () => {
-    return {type: 'CLEAR_TENANT'};
+    return {type: CLEAR_TENANT};
 };
 
 export const getTenantInfo = ({path}) => {
     return createApiRequest({
-        request: Promise.all([window.api.getTenantInfo({path}), window.api.getNodes(path)]),
+        request: Promise.all([window.api.getTenantInfo({path}), window.api.getCompute(path)]),
         actions: FETCH_TENANT,
         dataHandler: ([tenantData, nodesData]) => {
             const tenant = tenantData.TenantInfo[0];
@@ -83,7 +84,7 @@ export const getTenantInfo = ({path}) => {
                     };
                 }
 
-                return;
+                return undefined;
             }).filter(Boolean);
 
             return {tenant, tenantNodes};

package/dist/store/reducers/tooltip.ts

@@ -62,7 +62,7 @@ export const hideTooltip = () => {
 };
 
 export const showTooltip = (
-    node: EventTarget,
+    node: EventTarget | null,
     data: any,
     templateType: ITooltipTemplateType,
     additionalData?: any,

package/dist/store/reducers/topic.ts

@@ -0,0 +1,52 @@
+import type {Reducer} from 'redux';
+
+import type {ITopicAction, ITopicState} from '../../types/store/topic';
+import '../../services/api';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_TOPIC = createRequestActionTypes('topic', 'FETCH_TOPIC');
+
+const initialState = {
+    loading: true,
+    wasLoaded: false,
+    data: {},
+};
+
+const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_TOPIC.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_TOPIC.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TOPIC.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getTopic(path?: string) {
+    return createApiRequest({
+        request: window.api.getTopic({path}),
+        actions: FETCH_TOPIC,
+    });
+}
+
+export default topic;

package/dist/styles/mixins.scss

@@ -79,6 +79,14 @@
     width: 238px;
 }
 
+@mixin info-viewer-title {
+    margin: 15px 0 10px;
+
+    font-size: var(--yc-text-body-2-font-size);
+    font-weight: 600;
+    line-height: var(--yc-text-body-2-line-height);
+}
+
 @mixin query-data-table() {
     & .data-table {
         $_: &;
@@ -128,17 +136,6 @@
     $border-width: 1px;
     $clearance-width: 1px; /* Delete clearance and cancel column shadow for previous columns */
 
-    @for $i from 0 through $nth {
-        & .data-table__td:nth-child(#{$i}),
-        & .data-table__head-row:first-child .data-table__th:nth-child(#{$i}) {
-            box-shadow: unset;
-
-            @if $i < $nth {
-                border-right: unset;
-            }
-        }
-    }
-
     /* Freeze td */
     & .data-table__td:nth-child(#{$nth}),
     & .data-table__head-row:first-child .data-table__th:nth-child(#{$nth}) {
@@ -152,6 +149,17 @@
     .data-table__row:hover .data-table__td:nth-child(#{$nth}) {
         background-color: var(--ydb-data-table-color-hover) !important;
     }
+
+    @for $i from 0 through $nth {
+        & .data-table__td:nth-child(#{$i}),
+        & .data-table__head-row:first-child .data-table__th:nth-child(#{$i}) {
+            box-shadow: unset;
+
+            @if $i < $nth {
+                border-right: unset;
+            }
+        }
+    }
 }
 
 @mixin table-styles {

package/dist/types/api/common.ts

@@ -0,0 +1,5 @@
+export interface IProtobufTimeObject {
+    /** int64 */
+    seconds?: string;
+    nanos?: number;
+}

package/dist/types/api/compute.ts

@@ -17,7 +17,7 @@ interface TComputeTenantInfo {
     Nodes?: TComputeNodeInfo[];
 }
 
-interface TComputeNodeInfo {
+export interface TComputeNodeInfo {
     /** uint64 */
     StartTime: string;
     /** uint64 */

package/dist/types/api/consumer.ts

@@ -1,5 +1,7 @@
 /* eslint-disable camelcase */
 
+import {IProtobufTimeObject} from './common';
+
 /**
  * endpoint: /json/describe_consumer
  *
@@ -65,27 +67,27 @@ interface PartitionConsumerStats {
      *
      * Timestamp of providing this partition to this session by server.
      */
-    partition_read_session_create_time?: string;
+    partition_read_session_create_time?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Timestamp
      *
      * Timestamp of last read from this partition. */
-    last_read_time?: string;
+    last_read_time?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Duration
      *
      * Maximum of differences between timestamp of read and write timestamp for all messages, read during last minute.
      */
-    max_read_time_lag?: string;
+    max_read_time_lag?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Duration
      *
      * Maximum of differences between write timestamp and create timestamp for all messages, read during last minute.
      */
-    max_write_time_lag?: string;
+    max_write_time_lag?: string | IProtobufTimeObject;
 
     /** How much bytes were read during several windows statistics from this partiton. */
     bytes_read?: MultipleWindowsStat;
@@ -113,14 +115,14 @@ export interface PartitionStats {
      *
      * Timestamp of last write.
      */
-    last_write_time?: string;
+    last_write_time?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Duration
      *
      * Maximum of differences between write timestamp and create timestamp for all messages, written during last minute.
      */
-    max_write_time_lag?: string;
+    max_write_time_lag?: string | IProtobufTimeObject;
 
     /** How much bytes were written during several windows in this partition. */
     bytes_written?: MultipleWindowsStat;
@@ -148,7 +150,7 @@ export interface Consumer {
      *
      * All messages with smaller server written_at timestamp will be skipped.
      */
-    read_from?: string;
+    read_from?: string | IProtobufTimeObject;
 
     /**
      * List of supported codecs by this consumer.
@@ -170,21 +172,21 @@ interface ConsumerStats {
      *
      * Minimal timestamp of last read from partitions.
      */
-    min_partitions_last_read_time?: string;
+    min_partitions_last_read_time?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Duration
      *
      * Maximum of differences between timestamp of read and write timestamp for all messages, read during last minute.
      */
-    max_read_time_lag?: string;
+    max_read_time_lag?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Duration
      *
      * Maximum of differences between write timestamp and create timestamp for all messages, read during last minute.
      */
-    max_write_time_lag?: string;
+    max_write_time_lag?: string | IProtobufTimeObject;
 
     /** Bytes read stastics. */
     bytes_read?: MultipleWindowsStat;

package/dist/types/api/nodes.ts

@@ -1,6 +1,7 @@
 import {EFlag} from './enums';
 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
@@ -19,6 +20,7 @@ export interface TNodeInfo {
     NodeId: number;
     SystemState: TSystemStateInfo;
     PDisks?: TPDiskStateInfo[];
+    VDisks?: TVDiskStateInfo[];
     Tablets?: TTabletStateInfo[];
 }
 

package/dist/types/api/pdisk.ts

@@ -44,6 +44,7 @@ export enum TPDiskState {
     ChunkQuotaError = 'ChunkQuotaError',
     DeviceIoError = 'DeviceIoError',
 
+    // these can't be sent to UI
     Missing = 'Missing',
     Timeout = 'Timeout',
     NodeDisconnected = 'NodeDisconnected',