ydb-embedded-ui 2.4.3 → 2.5.0

package/dist/store/reducers/describe.ts

@@ -2,24 +2,23 @@ import {createSelector, Selector} from 'reselect';
 import {Reducer} from 'redux';
 
 import '../../services/api';
-import {TEvDescribeSchemeResult} from '../../types/api/schema';
 import {IConsumer} from '../../types/api/consumers';
-import {IDescribeRootStateSlice, IDescribeState} from '../../types/store/describe';
-import {IResponseError} from '../../types/api/error';
-import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
+import {IDescribeRootStateSlice, IDescribeState, IDescribeAction} from '../../types/store/describe';
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
-const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+export const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+const SET_CURRENT_DESCRIBE_PATH = 'describe/SET_CURRENT_DESCRIBE_PATH';
+const SET_DATA_WAS_NOT_LOADED = 'describe/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
     data: {},
+    currentDescribe: undefined,
+    currentDescribePath: undefined,
 };
 
-const describe: Reducer<
-    IDescribeState,
-    ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, IResponseError>
-> = (state = initialState, action) => {
+const describe: Reducer<IDescribeState, IDescribeAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_DESCRIBE.REQUEST: {
             return {
@@ -28,52 +27,83 @@ const describe: Reducer<
             };
         }
         case FETCH_DESCRIBE.SUCCESS: {
-            let newData;
+            const data = action.data;
 
-            if (action.data.Path) {
+            const isCurrentDescribePath = data.Path === state.currentDescribePath;
+
+            let newData = state.data;
+
+            if (data.Path) {
                 newData = JSON.parse(JSON.stringify(state.data));
-                newData[action.data.Path] = action.data;
-            } else {
-                newData = state.data;
+                newData[data.Path] = data;
+            }
+
+            if (!isCurrentDescribePath) {
+                return {
+                    ...state,
+                    data: newData,
+                };
             }
 
             return {
                 ...state,
                 data: newData,
-                currentDescribe: action.data,
+                currentDescribe: data,
                 loading: false,
                 wasLoaded: true,
                 error: undefined,
             };
         }
+
         case FETCH_DESCRIBE.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
                 loading: false,
             };
         }
+        case SET_CURRENT_DESCRIBE_PATH: {
+            return {
+                ...state,
+                currentDescribePath: action.data,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
         default:
             return state;
     }
 };
 
+export const setCurrentDescribePath = (path: string) => {
+    return {
+        type: SET_CURRENT_DESCRIBE_PATH,
+        data: path,
+    } as const;
+};
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
 // Consumers selectors
-const selectConsumersNames: Selector<IDescribeRootStateSlice, string[] | undefined, [string]> = (
-    state,
-    path,
-) => state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
-
-export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[]> = createSelector(
-    selectConsumersNames,
-    (names = []) => {
-        const consumers = names.map((name) => {
-            return {name};
-        });
-
-        return consumers;
-    },
-);
+const selectConsumersNames = (state: IDescribeRootStateSlice, path: string | undefined) =>
+    path
+        ? state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules
+        : undefined;
+
+export const selectConsumers: Selector<IDescribeRootStateSlice, IConsumer[], [string | undefined]> =
+    createSelector(selectConsumersNames, (names = []) => names.map((name) => ({name})));
 
 export function getDescribe({path}: {path: string}) {
     return createApiRequest({

package/dist/store/reducers/nodes.js

@@ -1,9 +1,19 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
 
 const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
-const nodes = function z(state = {loading: true, wasLoaded: false}, action) {
+const CLEAR_NODES = 'nodes/CLEAR_NODES';
+const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
+
+const initialState = {
+    loading: true,
+    wasLoaded: false,
+    nodesUptimeFilter: NodesUptimeFilterValues.All,
+};
+
+const nodes = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_NODES.REQUEST: {
             return {
@@ -28,7 +38,7 @@ const nodes = function z(state = {loading: true, wasLoaded: false}, action) {
                 loading: false,
             };
         }
-        case 'CLEAR_NODES': {
+        case CLEAR_NODES: {
             return {
                 ...state,
                 loading: true,
@@ -38,6 +48,10 @@ const nodes = function z(state = {loading: true, wasLoaded: false}, action) {
                 error: undefined,
             };
         }
+
+        case SET_NODES_UPTIME_FILTER: {
+            return {...state, nodesUptimeFilter: action.data};
+        }
         default:
             return state;
     }
@@ -50,6 +64,13 @@ export function getNodes(path) {
     });
 }
 
-export const clearNodes = () => ({type: 'CLEAR_NODES'});
+export const clearNodes = () => ({type: CLEAR_NODES});
+
+export const setNodesUptimeFilter = (value) => ({
+    type: SET_NODES_UPTIME_FILTER,
+    data: value,
+});
+
+export const getNodesUptimeFilter = (state) => state.nodes.nodesUptimeFilter;
 
 export default nodes;

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

@@ -1,7 +1,11 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import {Reducer} from 'redux';
+
+import {ISchemaAction, ISchemaData, ISchemaState} from '../../types/store/schema';
 import '../../services/api';
 
-const FETCH_SCHEMA = createRequestActionTypes('schema', 'FETCH_SCHEMA');
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_SCHEMA = createRequestActionTypes('schema', 'FETCH_SCHEMA');
 const PRELOAD_SCHEMAS = 'schema/PRELOAD_SCHEMAS';
 const SET_SCHEMA = 'schema/SET_SCHEMA';
 const SET_SHOW_PREVIEW = 'schema/SET_SHOW_PREVIEW';
@@ -18,7 +22,7 @@ export const initialState = {
     showPreview: false,
 };
 
-const schema = (state = initialState, action) => {
+const schema: Reducer<ISchemaState, ISchemaAction> = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_SCHEMA.REQUEST: {
             return {
@@ -28,7 +32,11 @@ const schema = (state = initialState, action) => {
         }
         case FETCH_SCHEMA.SUCCESS: {
             const newData = JSON.parse(JSON.stringify(state.data));
-            newData[action.data.Path] = action.data;
+
+            if (action.data.Path) {
+                newData[action.data.Path] = action.data;
+            }
+
             const currentSchema = state.currentSchemaPath
                 ? newData[state.currentSchemaPath]
                 : action.data;
@@ -100,49 +108,49 @@ const schema = (state = initialState, action) => {
     }
 };
 
-export function getSchema({path}) {
+export function getSchema({path}: {path: string}) {
     return createApiRequest({
         request: window.api.getSchema({path}),
         actions: FETCH_SCHEMA,
     });
 }
 
-export function setCurrentSchemaPath(currentSchemaPath) {
+export function setCurrentSchemaPath(currentSchemaPath: string) {
     return {
         type: SET_SCHEMA,
         data: currentSchemaPath,
-    };
+    } as const;
 }
 export function enableAutorefresh() {
     return {
         type: ENABLE_AUTOREFRESH,
-    };
+    } as const;
 }
 export function disableAutorefresh() {
     return {
         type: DISABLE_AUTOREFRESH,
-    };
+    } as const;
 }
-export function setShowPreview(value) {
+export function setShowPreview(value: boolean) {
     return {
         type: SET_SHOW_PREVIEW,
         data: value,
-    };
+    } as const;
 }
 
 // only stores data for paths that are not in the store yet
 // existing paths are ignored
-export function preloadSchemas(data) {
+export function preloadSchemas(data: ISchemaData) {
     return {
         type: PRELOAD_SCHEMAS,
         data,
-    };
+    } as const;
 }
 
 export function resetLoadingState() {
     return {
         type: RESET_LOADING_STATE,
-    };
+    } as const;
 }
 
 export default schema;

package/dist/store/reducers/storage.js

@@ -1,10 +1,14 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
 import _ from 'lodash';
 import {createSelector} from 'reselect';
-import {calcUptime} from '../../utils';
+
+import {calcUptime, calcUptimeInSeconds} 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';
 
 export const VisibleEntities = {
     All: 'All',
@@ -29,6 +33,7 @@ const SET_FILTER = 'storage/SET_FILTER';
 const SET_USAGE_FILTER = 'storage/SET_USAGE_FILTER';
 const SET_VISIBLE_GROUPS = 'storage/SET_VISIBLE_GROUPS';
 const SET_STORAGE_TYPE = 'storage/SET_STORAGE_TYPE';
+const SET_NODES_UPTIME_FILTER = 'storage/SET_NODES_UPTIME_FILTER';
 
 const initialState = {
     loading: true,
@@ -36,6 +41,7 @@ const initialState = {
     filter: '',
     usageFilter: [],
     visible: VisibleEntities.Missing,
+    nodesUptimeFilter: NodesUptimeFilterValues.All,
     type: StorageTypes.groups,
 };
 
@@ -93,6 +99,13 @@ const storage = (state = initialState, action) => {
                 error: undefined,
             };
         }
+
+        case SET_NODES_UPTIME_FILTER: {
+            return {
+                ...state,
+                nodesUptimeFilter: action.data,
+            };
+        }
         case SET_STORAGE_TYPE: {
             return {
                 ...state,
@@ -149,6 +162,13 @@ export function setVisibleEntities(value) {
     };
 }
 
+export function setNodesUptimeFilter(value) {
+    return {
+        type: SET_NODES_UPTIME_FILTER,
+        data: value,
+    };
+}
+
 export const getStoragePools = (state) => state.storage.data?.StoragePools;
 export const getStoragePoolsGroupsCount = (state) => ({
     total: state.storage.data?.TotalGroups || 0,
@@ -162,6 +182,7 @@ export const getStorageNodesCount = (state) => ({
 export const getStorageFilter = (state) => state.storage.filter;
 export const getUsageFilter = (state) => state.storage.usageFilter;
 export const getVisibleEntities = (state) => state.storage.visible;
+export const getNodesUptimeFilter = (state) => state.storage.nodesUptimeFilter;
 export const getStorageType = (state) => state.storage.type;
 export const getNodesObject = (state) =>
     _.reduce(
@@ -337,12 +358,32 @@ 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, getUsageFilter, getStorageType, getVisibleEntitiesList],
-    (textFilter, usageFilter, type, entities) => {
+    [
+        getStorageFilter,
+        getUsageFilter,
+        getStorageType,
+        getNodesUptimeFilter,
+        getVisibleEntitiesList,
+    ],
+    (textFilter, usageFilter, type, nodesUptimeFilter, entities) => {
         let result = entities;
         result = filterByText(result, type, textFilter);
         result = filterByUsage(result, usageFilter);
+
+        if (type === StorageTypes.nodes) {
+            result = filterByUptime(result, nodesUptimeFilter);
+        }
+
         return result;
     },
 );

package/dist/types/api/error.ts

@@ -1,4 +1,6 @@
 export interface IResponseError {
-    status: number;
-    statusText: string;
+    data?: unknown;
+    status?: number;
+    statusText?: string;
+    isCancelled?: boolean;
 }

package/dist/types/store/describe.ts

@@ -1,14 +1,34 @@
+import {
+    FETCH_DESCRIBE,
+    setCurrentDescribePath,
+    setDataWasNotLoaded,
+} from '../../store/reducers/describe';
+import {ApiRequestAction} from '../../store/utils';
 import {IResponseError} from '../api/error';
 import {TEvDescribeSchemeResult} from '../api/schema';
 
+export type IDescribeData = Record<string, TEvDescribeSchemeResult>;
+
 export interface IDescribeState {
     loading: boolean;
     wasLoaded: boolean;
-    data: Record<string, TEvDescribeSchemeResult>;
+    data: IDescribeData;
     currentDescribe?: TEvDescribeSchemeResult;
+    currentDescribePath?: string;
     error?: IResponseError;
 }
 
+type IDescribeApiRequestAction = ApiRequestAction<
+    typeof FETCH_DESCRIBE,
+    TEvDescribeSchemeResult,
+    IResponseError
+>;
+
+export type IDescribeAction =
+    | IDescribeApiRequestAction
+    | ReturnType<typeof setCurrentDescribePath>
+    | ReturnType<typeof setDataWasNotLoaded>;
+
 export interface IDescribeRootStateSlice {
     describe: IDescribeState;
 }

package/dist/types/store/schema.ts

@@ -0,0 +1,46 @@
+import {
+    disableAutorefresh,
+    enableAutorefresh,
+    FETCH_SCHEMA,
+    preloadSchemas,
+    resetLoadingState,
+    setCurrentSchemaPath,
+    setShowPreview,
+} from '../../store/reducers/schema';
+import {ApiRequestAction} from '../../store/utils';
+import {IResponseError} from '../api/error';
+import {TEvDescribeSchemeResult} from '../api/schema';
+
+export type ISchemaData = Record<string, TEvDescribeSchemeResult>;
+
+export interface ISchemaState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data: ISchemaData;
+    currentSchema?: TEvDescribeSchemeResult;
+    currentSchemaPath?: string;
+    autorefresh: boolean;
+    showPreview: boolean;
+    error?: IResponseError;
+}
+
+type ISchemaApiRequestAction = ApiRequestAction<
+    typeof FETCH_SCHEMA,
+    TEvDescribeSchemeResult,
+    IResponseError
+>;
+
+export type ISchemaAction =
+    | ISchemaApiRequestAction
+    | (
+          | ReturnType<typeof setCurrentSchemaPath>
+          | ReturnType<typeof enableAutorefresh>
+          | ReturnType<typeof disableAutorefresh>
+          | ReturnType<typeof setShowPreview>
+          | ReturnType<typeof preloadSchemas>
+          | ReturnType<typeof resetLoadingState>
+      );
+
+export interface ISchemaRootStateSlice {
+    schema: ISchemaState;
+}

package/dist/utils/index.js

@@ -79,9 +79,13 @@ export const formatDateTime = (value) => {
     return value > 0 ? new Date(Number(value)).toUTCString() : 'N/A';
 };
 
-export const calcUptime = (milliseconds) => {
+export const calcUptimeInSeconds = (milliseconds) => {
     const currentDate = new Date();
-    return formatUptime((currentDate - Number(milliseconds)) / 1000);
+    return (currentDate - Number(milliseconds)) / 1000;
+};
+
+export const calcUptime = (milliseconds) => {
+    return formatUptime(calcUptimeInSeconds(milliseconds));
 };
 
 // determine how many nodes have status Connected "true"

package/dist/utils/nodes.ts

@@ -0,0 +1,9 @@
+export const NodesUptimeFilterValues = {
+    All: 'All',
+    SmallUptime: 'SmallUptime',
+};
+
+export const NodesUptimeFilterTitles = {
+    [NodesUptimeFilterValues.All]: 'All',
+    [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "files": [
     "dist"
   ],

package/dist/containers/Tenant/Diagnostics/Describe/Describe.js

@@ -1,130 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-import {connect} from 'react-redux';
-import {Loader} from '@gravity-ui/uikit';
-import JSONTree from 'react-json-inspector';
-
-import {getDescribe} from '../../../../store/reducers/describe';
-
-import './Describe.scss';
-import 'react-json-inspector/json-inspector.css';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-const b = cn('kv-describe');
-
-const expandMap = new Map();
-
-class Describe extends React.Component {
-    static propTypes = {
-        error: PropTypes.string,
-        data: PropTypes.array,
-        loading: PropTypes.bool,
-        wasLoaded: PropTypes.bool,
-        autorefresh: PropTypes.bool,
-        tenant: PropTypes.string,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        const {autorefresh} = this.props;
-        this.autofetcher = new AutoFetcher();
-        this.fetchData();
-        if (autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchData);
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh} = this.props;
-
-        if (autorefresh && !prevProps.autorefresh) {
-            this.fetchData();
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => this.fetchData());
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    fetchData() {
-        const {getDescribe, tenant, currentSchemaPath} = this.props;
-        const path = currentSchemaPath || tenant;
-        getDescribe({path});
-    }
-
-    renderDescribeJson = () => {
-        const {data} = this.props;
-
-        return (
-            <JSONTree
-                data={data}
-                className={b('tree')}
-                onClick={({path}) => {
-                    const newValue = !(expandMap.get(path) || false);
-                    expandMap.set(path, newValue);
-                }}
-                searchOptions={{
-                    debounceTime: 300,
-                }}
-                isExpanded={(keypath) => {
-                    return expandMap.get(keypath) || false;
-                }}
-            />
-        );
-    };
-
-    render() {
-        const {error, loading, data, wasLoaded} = this.props;
-
-        if (loading && !wasLoaded) {
-            return (
-                <div className={b('loader-container')}>
-                    <Loader size="m" />
-                </div>
-            );
-        }
-
-        if (error) {
-            return <div className={b('message-container')}>{error.data || error}</div>;
-        }
-
-        if (!loading && !data) {
-            return <div className={b('message-container')}>Empty</div>;
-        }
-
-        return (
-            <div className={b()}>
-                <div className={b('result')}>{this.renderDescribeJson()}</div>
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = (state) => {
-    const {loading, error, currentDescribe, wasLoaded} = state.describe;
-    const {autorefresh, currentSchemaPath} = state.schema;
-
-    return {
-        data: currentDescribe,
-        loading,
-        error,
-        wasLoaded,
-        autorefresh,
-        currentSchemaPath,
-    };
-};
-
-const mapDispatchToProps = {
-    getDescribe,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(Describe);