ydb-embedded-ui 4.27.0 → 4.28.0

package/dist/containers/Storage/VirtualStorage.tsx

@@ -0,0 +1,112 @@
+import {useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
+
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import type {RenderControls, RenderErrorMessage} from '../../components/VirtualTable';
+import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
+import {STORAGE_TYPES, VISIBLE_ENTITIES} from '../../store/reducers/storage/constants';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {AccessDenied} from '../../components/Errors/403/AccessDenied';
+import {ResponseError} from '../../components/Errors/ResponseError/ResponseError';
+import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
+import {useTypedSelector} from '../../utils/hooks';
+
+import {StorageControls} from './StorageControls/StorageControls';
+import {VirtualStorageGroups} from './StorageGroups/VirtualStorageGroups';
+import {VirtualStorageNodes} from './StorageNodes/VirtualStorageNodes';
+
+interface VirtualStorageProps {
+    tenant?: string;
+    nodeId?: string;
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const VirtualStorage = ({
+    tenant,
+    nodeId,
+    parentContainer,
+    additionalNodesProps,
+}: VirtualStorageProps) => {
+    const dispatch = useDispatch();
+
+    const [searchValue, setSearchValue] = useState('');
+    const [storageType, setStorageType] = useState<StorageType>(STORAGE_TYPES.groups);
+    const [visibleEntities, setVisibleEntities] = useState<VisibleEntities>(VISIBLE_ENTITIES.all);
+    const [nodesUptimeFilter, setNodesUptimeFilter] = useState<NodesUptimeFilterValues>(
+        NodesUptimeFilterValues.All,
+    );
+
+    const nodesMap = useTypedSelector(selectNodesMap);
+
+    useEffect(() => {
+        dispatch(getNodesList());
+    }, [dispatch]);
+
+    const handleShowAllGroups = () => {
+        setVisibleEntities(VISIBLE_ENTITIES.all);
+    };
+
+    const handleShowAllNodes = () => {
+        setVisibleEntities(VISIBLE_ENTITIES.all);
+        setNodesUptimeFilter(NodesUptimeFilterValues.All);
+    };
+
+    const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
+        return (
+            <StorageControls
+                searchValue={searchValue}
+                handleSearchValueChange={setSearchValue}
+                withTypeSelector={!nodeId}
+                storageType={storageType}
+                handleStorageTypeChange={setStorageType}
+                visibleEntities={visibleEntities}
+                handleVisibleEntitiesChange={setVisibleEntities}
+                nodesUptimeFilter={nodesUptimeFilter}
+                handleNodesUptimeFilterChange={setNodesUptimeFilter}
+                withGroupsUsageFilter={false}
+                entitiesCountCurrent={foundEntities}
+                entitiesCountTotal={totalEntities}
+                entitiesLoading={!inited}
+            />
+        );
+    };
+
+    const renderErrorMessage: RenderErrorMessage = (error) => {
+        if (error.status === 403) {
+            return <AccessDenied position="left" />;
+        }
+
+        return <ResponseError error={error} />;
+    };
+
+    if (storageType === STORAGE_TYPES.nodes) {
+        return (
+            <VirtualStorageNodes
+                searchValue={searchValue}
+                visibleEntities={visibleEntities}
+                nodesUptimeFilter={nodesUptimeFilter}
+                tenant={tenant}
+                additionalNodesProps={additionalNodesProps}
+                onShowAll={handleShowAllNodes}
+                parentContainer={parentContainer}
+                renderControls={renderControls}
+                renderErrorMessage={renderErrorMessage}
+            />
+        );
+    }
+
+    return (
+        <VirtualStorageGroups
+            searchValue={searchValue}
+            visibleEntities={visibleEntities}
+            tenant={tenant}
+            nodeId={nodeId}
+            nodesMap={nodesMap}
+            onShowAll={handleShowAllGroups}
+            parentContainer={parentContainer}
+            renderControls={renderControls}
+            renderErrorMessage={renderErrorMessage}
+        />
+    );
+};

package/dist/containers/Storage/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "groups": "Groups",
+  "nodes": "Nodes",
+
+  "controls_groups-search-placeholder": "Group ID, Pool name",
+  "controls_nodes-search-placeholder": "Node ID, FQDN"
+}

package/dist/containers/Storage/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-storage';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Storage/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "groups": "Группы",
+  "nodes": "Ноды",
+
+  "controls_groups-search-placeholder": "ID группы, имя пула",
+  "controls_nodes-search-placeholder": "ID узла, FQDN"
+}

package/dist/containers/Storage/shared.ts

@@ -0,0 +1,3 @@
+import cn from 'bem-cn-lite';
+
+export const b = cn('global-storage');

package/dist/containers/Tenants/Tenants.tsx

@@ -61,8 +61,8 @@ export const Tenants = ({additionalTenantsProps}: TenantsProps) => {
         true,
     );
 
-    const handleProblemFilterChange = (value: string) => {
-        dispatch(changeFilter(value as ProblemFilterValue));
+    const handleProblemFilterChange = (value: ProblemFilterValue) => {
+        dispatch(changeFilter(value));
     };
 
     const handleSearchChange = (value: string) => {

package/dist/containers/UserSettings/i18n/en.json

@@ -19,8 +19,8 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It could return incorrect data on some versions",
 
-  "settings.useBackendParamsForTables.title": "Use virtual table for cluster Nodes tab",
-  "settings.useBackendParamsForTables.popover": "Use table with data load on scroll. It will increase performance, but could work unstable",
+  "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage cluster tabs",
+  "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
   "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries that enables queries with multiple result sets. Returns nothing on versions 23-3 and older"

package/dist/containers/UserSettings/i18n/ru.json

@@ -19,8 +19,8 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
 
-  "settings.useBackendParamsForTables.title": "Использовать виртуализированную таблицу для вкладки Nodes кластера",
-  "settings.useBackendParamsForTables.popover": "Использовать таблицу с загрузкой данных по скроллу. Это улучшит производительность, но может работать нестабильно",
+  "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage кластера",
+  "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
 
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",
   "settings.queryUseMultiSchema.popover": "Использовать для запросов схему 'multi', которая позволяет выполнять запросы с несколькими результатами. На версиях 23-3 и старше результат не возвращается вообще"

package/dist/containers/UserSettings/settings.ts

@@ -84,10 +84,10 @@ export const useNodesEndpointSetting: SettingProps = {
     title: i18n('settings.useNodesEndpoint.title'),
     helpPopoverContent: i18n('settings.useNodesEndpoint.popover'),
 };
-export const useBackendParamsForTables: SettingProps = {
+export const useVirtualTables: SettingProps = {
     settingKey: USE_BACKEND_PARAMS_FOR_TABLES_KEY,
-    title: i18n('settings.useBackendParamsForTables.title'),
-    helpPopoverContent: i18n('settings.useBackendParamsForTables.popover'),
+    title: i18n('settings.useVirtualTables.title'),
+    helpPopoverContent: i18n('settings.useVirtualTables.popover'),
 };
 export const queryUseMultiSchemaSetting: SettingProps = {
     settingKey: QUERY_USE_MULTI_SCHEMA_KEY,
@@ -103,7 +103,7 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [useNodesEndpointSetting, useBackendParamsForTables, queryUseMultiSchemaSetting],
+    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
 };
 
 export const generalPage: SettingsPage = {

package/dist/services/settings.ts

@@ -23,7 +23,7 @@ export type SettingsObject = Record<string, unknown>;
 const USE_LOCAL_STORAGE_FOR_SETTINGS_KEY = 'useLocalStorageForSettings';
 
 /** User settings keys and their default values */
-const DEFAULT_USER_SETTINGS: SettingsObject = {
+export const DEFAULT_USER_SETTINGS: SettingsObject = {
     [THEME_KEY]: 'system',
     [LANGUAGE_KEY]: undefined,
     [INVERTED_DISKS_KEY]: false,
@@ -59,20 +59,13 @@ class SettingsManager {
         }
     }
 
-    /**
-     * User settings - settings stored in LS or external store
-     */
-    getUserSettings() {
-        return this.extractSettingsFromLS();
-    }
-
     /**
      * Returns parsed settings value.
      * If value cannot be parsed, returns initially stored string.
      * If there is no value, return default value
      */
     readUserSettingsValue(key: string, defaultValue?: unknown) {
-        return this.readValueFromLS(key) ?? defaultValue ?? DEFAULT_USER_SETTINGS[key];
+        return this.readValueFromLS(key) ?? defaultValue;
     }
 
     /**
@@ -82,8 +75,11 @@ class SettingsManager {
         return this.setValueToLS(key, value);
     }
 
-    private extractSettingsFromLS = () => {
-        return Object.entries(DEFAULT_USER_SETTINGS).reduce<SettingsObject>((acc, [key, value]) => {
+    /**
+     * Extract values by provided settings object
+     */
+    extractSettingsFromLS = (settings: SettingsObject) => {
+        return Object.entries(settings).reduce<SettingsObject>((acc, [key, value]) => {
             acc[key] = this.readUserSettingsValue(key, value);
             return acc;
         }, {});

package/dist/store/reducers/settings/settings.ts

@@ -2,7 +2,7 @@ import type {Reducer} from 'redux';
 import type {ThunkAction} from 'redux-thunk';
 
 import '../../../services/api';
-import {settingsManager} from '../../../services/settings';
+import {DEFAULT_USER_SETTINGS, SettingsObject, settingsManager} from '../../../services/settings';
 
 import type {RootState} from '..';
 import type {
@@ -15,13 +15,14 @@ import type {
 
 const CHANGE_PROBLEM_FILTER = 'settings/CHANGE_PROBLEM_FILTER';
 export const SET_SETTING_VALUE = 'settings/SET_VALUE';
+export const SET_USER_SETTINGS = 'settings/SET_USER_SETTINGS';
 
 export const ProblemFilterValues = {
     ALL: 'All',
     PROBLEMS: 'With problems',
 } as const;
 
-const userSettings = settingsManager.getUserSettings();
+const userSettings = settingsManager.extractSettingsFromLS(DEFAULT_USER_SETTINGS);
 const systemSettings = window.systemSettings || {};
 
 export const initialState = {
@@ -49,7 +50,15 @@ const settings: Reducer<SettingsState, SettingsAction> = (state = initialState,
                 userSettings: newSettings,
             };
         }
-
+        case SET_USER_SETTINGS: {
+            return {
+                ...state,
+                userSettings: {
+                    ...state.userSettings,
+                    ...action.data,
+                },
+            };
+        }
         default:
             return state;
     }
@@ -66,6 +75,10 @@ export const setSettingValue = (
     };
 };
 
+export const setUserSettings = (data: SettingsObject) => {
+    return {type: SET_USER_SETTINGS, data} as const;
+};
+
 export const getSettingValue = (state: SettingsRootStateSlice, name: string) => {
     return state.settings.userSettings[name];
 };

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

@@ -1,6 +1,6 @@
 import type {ValueOf} from '../../../types/common';
 import type {SettingsObject} from '../../../services/settings';
-import {changeFilter, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
+import {changeFilter, setUserSettings, ProblemFilterValues, SET_SETTING_VALUE} from './settings';
 
 export type ProblemFilterValue = ValueOf<typeof ProblemFilterValues>;
 
@@ -15,7 +15,10 @@ export type SetSettingValueAction = {
     data: {name: string; value: unknown};
 };
 
-export type SettingsAction = ReturnType<typeof changeFilter> | SetSettingValueAction;
+export type SettingsAction =
+    | ReturnType<typeof changeFilter>
+    | ReturnType<typeof setUserSettings>
+    | SetSettingValueAction;
 
 export interface SettingsRootStateSlice {
     settings: SettingsState;

package/dist/store/reducers/storage/selectors.ts

@@ -3,7 +3,6 @@ import {Selector, createSelector} from 'reselect';
 import type {OrderType} from '@gravity-ui/react-data-table';
 import {ASCENDING, DESCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 
-import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {NODES_SORT_VALUES, type NodesSortValue} from '../../../utils/nodes';
 import {STORAGE_SORT_VALUES, type StorageSortValue, getUsage} from '../../../utils/storage';
 
@@ -111,25 +110,6 @@ export const selectGroupsSortParams = (state: StorageStateSlice) => {
 };
 // ==== Complex selectors ====
 
-export const selectVDisksForPDisk: Selector<
-    StorageStateSlice,
-    TVDiskStateInfo[] | undefined,
-    [number | undefined, number | undefined]
-> = createSelector(
-    [
-        selectStorageNodes,
-        (_state, nodeId: number | undefined) => nodeId,
-        (_state, _nodeId, pdiskId: number | undefined) => 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 selectUsageFilterOptions: Selector<StorageStateSlice, UsageFilter[]> = createSelector(
     selectStorageGroups,
     (groups) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "files": [
     "dist"
   ],
@@ -16,6 +16,8 @@
     "@gravity-ui/navigation": "^1.8.0",
     "@gravity-ui/paranoid": "^1.4.0",
     "@gravity-ui/react-data-table": "^1.0.3",
+    "@types/numeral": "^2.0.2",
+    "@types/qs": "^6.9.7",
     "@types/react": "^17.0.58",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
@@ -27,6 +29,7 @@
     "monaco-editor": "0.24.0",
     "numeral": "2.0.6",
     "path-to-regexp": "3.0.0",
+    "qs": "^6.11.0",
     "react-json-inspector": "7.1.1",
     "react-list": "0.8.11",
     "react-monaco-editor": "0.30.1",
@@ -40,6 +43,7 @@
     "redux-thunk": "2.3.0",
     "reselect": "4.1.6",
     "sass": "1.32.8",
+    "url": "^0.11.0",
     "web-vitals": "1.1.2",
     "ydb-ui-components": "^3.5.0"
   },
@@ -118,8 +122,6 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@types/lodash": "^4.14.178",
-    "@types/numeral": "^2.0.2",
-    "@types/qs": "^6.9.7",
     "@types/react-dom": "^17.0.11",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.2",
@@ -130,14 +132,12 @@
     "lint-staged": "^12.3.7",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",
-    "qs": "^6.11.0",
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.11",
     "react-dom": "^17.0.2",
     "stylelint": "^14.3.0",
     "ts-jest": "^28.0.7",
-    "typescript": "^4.5.5",
-    "url": "^0.11.0"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^5.24.0"