ydb-embedded-ui 2.4.4 → 2.5.0

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -5,7 +5,9 @@ import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
 import {useLocation} from 'react-router';
 
-import {Loader, Switch, Tabs} from '@gravity-ui/uikit';
+import {Switch, Tabs} from '@gravity-ui/uikit';
+
+import {Loader} from '../../../components/Loader';
 
 //@ts-ignore
 import TopQueries from './TopQueries/TopQueries';
@@ -153,7 +155,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Heatmap path={currentItem.Path} />;
             }
             case GeneralPagesIds.consumers: {
-                return <Consumers path={currentItem.Path} />;
+                return <Consumers path={currentSchemaPath} />;
             }
             default: {
                 return <div>No data...</div>;
@@ -196,11 +198,7 @@ function Diagnostics(props: DiagnosticsProps) {
     // After tabs are initially loaded it is no longer needed
     // Thus there is no also "loading" check as in other parts of the project
     if (!wasLoaded) {
-        return (
-            <div className={b('loader')}>
-                <Loader size="l" />
-            </div>
-        );
+        return <Loader size="l" />;
     }
 
     return (

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

@@ -47,17 +47,23 @@ function prepareDateSizeValue(value) {
 }
 
 function stringToDataTableSortOrder(value) {
-    return value && value.split(',').map((columnId) => ({
-        columnId,
-        order: DataTable.DESCENDING,
-    }));
+    return (
+        value &&
+        value.split(',').map((columnId) => ({
+            columnId,
+            order: DataTable.DESCENDING,
+        }))
+    );
 }
 
 function stringToQuerySortOrder(value) {
-    return value && value.split(',').map((columnId) => ({
-        columnId,
-        order: 'DESC',
-    }));
+    return (
+        value &&
+        value.split(',').map((columnId) => ({
+            columnId,
+            order: 'DESC',
+        }))
+    );
 }
 
 function dataTableToStringSortOrder(value = []) {
@@ -85,11 +91,13 @@ function TopShards({
 
         if (autorefresh) {
             autofetcher.start();
-            autofetcher.fetch(() => sendShardQuery({
-                database: path,
-                path: currentSchemaPath,
-                sortOrder: stringToQuerySortOrder(sortOrder),
-            }));
+            autofetcher.fetch(() =>
+                sendShardQuery({
+                    database: path,
+                    path: currentSchemaPath,
+                    sortOrder: stringToQuerySortOrder(sortOrder),
+                }),
+            );
         }
 
         return () => {

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -54,11 +54,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         if (!tenantName) {
             return null;
         }
-        return (
-            <div className={b()}>
-                {renderTabContent()}
-            </div>
-        );
+        return <div className={b()}>{renderTabContent()}</div>;
     };
 
     return renderContent();

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
 import {Loader, RadioButton} from '@gravity-ui/uikit';
@@ -58,7 +58,7 @@ function GraphRoot(props) {
         updateComponentTheme(theme);
     }, [theme]);
 
-    const render = useCallback(() => {
+    const render = () => {
         if (version === explainVersions.v2) {
             paranoid.current = getTopology('graphRoot', data, opts, shapes);
             paranoid.current.render();
@@ -66,7 +66,7 @@ function GraphRoot(props) {
             paranoid.current = getCompactTopology('graphRoot', data, opts);
             paranoid.current.renderCompactTopology();
         }
-    }, [data, opts, shapes, version]);
+    };
 
     useEffect(() => {
         render();
@@ -86,7 +86,7 @@ function GraphRoot(props) {
         graphRoot.innerHTML = '';
 
         render();
-    }, [componentTheme, render]);
+    }, [componentTheme]);
 
     useEffect(() => {
         paranoid.current?.updateData?.(props.data);

package/dist/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.js

@@ -73,10 +73,7 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
                         </div>
                     )}
                     <div className={b('dialog-row')}>
-                        <label
-                            htmlFor="queryName"
-                            className={b('field-title', 'required')}
-                        >
+                        <label htmlFor="queryName" className={b('field-title', 'required')}>
                             Query name
                         </label>
                         <div className={b('control-wrapper')}>

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

@@ -44,9 +44,10 @@ const formatTableStatsItem = createInfoFormatter({
     defaultValueFormatter: formatNumber,
 });
 
-const formatTableStats = (fields) => Object.entries(fields)
-    .map(([label, value]) => formatTableStatsItem(label, value))
-    .filter(({value}) => Boolean(value));
+const formatTableStats = (fields) =>
+    Object.entries(fields)
+        .map(([label, value]) => formatTableStatsItem(label, value))
+        .filter(({value}) => Boolean(value));
 
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
@@ -60,17 +61,18 @@ class SchemaInfoViewer extends React.Component {
 
         return (
             <div className={b('item')}>
-                <InfoViewer
-                    title={title}
-                    info={itemData}
-                />
+                <InfoViewer title={title} info={itemData} />
             </div>
         );
     }
 
     renderContent(data) {
         const {PathDescription = {}} = data;
-        const {TableStats = {}, TabletMetrics = {}, Table: {PartitionConfig = {}} = {}} = PathDescription;
+        const {
+            TableStats = {},
+            TabletMetrics = {},
+            Table: {PartitionConfig = {}} = {},
+        } = PathDescription;
         const {
             PartCount,
             RowCount,
@@ -127,33 +129,30 @@ class SchemaInfoViewer extends React.Component {
         ];
 
         const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
-            formatTabletMetricsItem(key, TabletMetrics[key])
+            formatTabletMetricsItem(key, TabletMetrics[key]),
         );
 
         const partitionConfigInfo = [];
 
         if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
-            partitionConfigInfo.push(...Object.keys(FollowerGroups[0]).map((key) =>
-                formatFollowerGroupItem(key, FollowerGroups[0][key])
-            ));
-        } else if (FollowerCount !== undefined) {
             partitionConfigInfo.push(
-                formatPartitionConfigItem('FollowerCount', FollowerCount)
+                ...Object.keys(FollowerGroups[0]).map((key) =>
+                    formatFollowerGroupItem(key, FollowerGroups[0][key]),
+                ),
             );
+        } else if (FollowerCount !== undefined) {
+            partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
         } else if (CrossDataCenterFollowerCount !== undefined) {
             partitionConfigInfo.push(
-                formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount)
+                formatPartitionConfigItem(
+                    'CrossDataCenterFollowerCount',
+                    CrossDataCenterFollowerCount,
+                ),
             );
         }
 
-        if ([
-            tabletMetricsInfo,
-            partitionConfigInfo,
-            tableStatsInfo.flat(),
-        ].flat().length === 0) {
-            return (
-                <div className={b('item')}>Empty</div>
-            );
+        if ([tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat().length === 0) {
+            return <div className={b('item')}>Empty</div>;
         }
 
         return (
@@ -179,11 +178,7 @@ class SchemaInfoViewer extends React.Component {
         const {data} = this.props;
 
         if (data) {
-            return (
-                <div className={b()}>
-                    {this.renderContent(data)}
-                </div>
-            );
+            return <div className={b()}>{this.renderContent(data)}</div>;
         } else {
             return <div className="error">no schema data</div>;
         }

package/dist/containers/Tenant/TenantPages.tsx

@@ -14,7 +14,7 @@ export enum TenantInfoTabsIds {
 export enum TenantTabsGroups {
     info = 'info',
     general = 'general',
-    generalTab = 'generalTab'
+    generalTab = 'generalTab',
 }
 
 export const TENANT_GENERAL_TABS = [

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

@@ -37,9 +37,9 @@ const bindActions = (
 ) => {
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTopLevelTab(TenantGeneralTabsIds.query))
+        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
         setActivePath(path);
-    }
+    };
 
     return {
         createTable: inputQuery(createTableTemplate),
@@ -66,7 +66,7 @@ const bindActions = (
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
-            dispatch(setTopLevelTab(TenantGeneralTabsIds.query))
+            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
             setActivePath(path);
         },
     };
@@ -74,27 +74,18 @@ const bindActions = (
 
 type ActionsSet = ReturnType<Required<NavigationTreeProps>['getActions']>;
 
-export const getActions = (
-    dispatch: Dispatch<any>,
-    setActivePath: (path: string) => void,
-) =>
+export const getActions =
+    (dispatch: Dispatch<any>, setActivePath: (path: string) => void) =>
     (path: string, type: NavigationTreeNodeType) => {
         const actions = bindActions(path, dispatch, setActivePath);
         const copyItem = {text: 'Copy path', action: actions.copyPath};
 
         const DIR_SET: ActionsSet = [
-            [
-                copyItem,
-            ],
-            [
-                {text: 'Create table...', action: actions.createTable},
-            ],
+            [copyItem],
+            [{text: 'Create table...', action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
-            [
-                {text: 'Open preview', action: actions.openPreview},
-                copyItem,
-            ],
+            [{text: 'Open preview', action: actions.openPreview}, copyItem],
             [
                 {text: 'Alter table...', action: actions.alterTable},
                 {text: 'Select query...', action: actions.selectQuery},
@@ -102,9 +93,7 @@ export const getActions = (
             ],
         ];
 
-        const JUST_COPY: ActionsSet = [
-            copyItem,
-        ];
+        const JUST_COPY: ActionsSet = [copyItem];
 
         const EMPTY_SET: ActionsSet = [];
 

package/dist/store/reducers/clusterNodes.js

@@ -1,7 +1,11 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 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');
 
@@ -47,23 +51,38 @@ 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,
-    (tenants, filter) => {
+    [
+        (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;
         }, []);
-        if (filter === ALL) {
-            return nodes;
-        }
 
-        return nodes?.filter(({Overall}) => {
-            return Overall && Overall !== 'Green';
-        });
+        return filterNodesByStatusAndUptime(nodes, problemFilter, uptimeFilter);
     },
 );
 

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/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;
+}