ydb-embedded-ui 4.27.1 → 4.29.0

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.tsx

@@ -0,0 +1,125 @@
+import DataTable, {type Column as DataTableColumn} from '@gravity-ui/react-data-table';
+
+import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
+import type {AdditionalNodesProps} from '../../../types/additionalProps';
+import type {Column as VirtualTableColumn} from '../../../components/VirtualTable';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+import {NodeHostWrapper} from '../../../components/NodeHostWrapper/NodeHostWrapper';
+import {isSortableNodesProperty} from '../../../utils/nodes';
+
+import {PDisk} from '../PDisk/PDisk';
+import {b} from './shared';
+
+export const STORAGE_NODES_COLUMNS_IDS = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Uptime: 'Uptime',
+    PDisks: 'PDisks',
+    Missing: 'Missing',
+} as const;
+
+type StorageGroupsColumn = VirtualTableColumn<PreparedStorageNode> &
+    DataTableColumn<PreparedStorageNode>;
+
+const getStorageNodesColumns = (additionalNodesProps: AdditionalNodesProps | undefined) => {
+    const getNodeRef = additionalNodesProps?.getNodeRef;
+
+    const columns: StorageGroupsColumn[] = [
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.NodeId,
+            header: 'Node ID',
+            width: 100,
+            align: DataTable.RIGHT,
+            render: ({row}) => row.NodeId,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Host,
+            header: 'Host',
+            width: 350,
+            render: ({row}) => {
+                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
+            },
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.DC,
+            header: 'DC',
+            width: 100,
+            render: ({row}) => row.DataCenter || '—',
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Rack,
+            header: 'Rack',
+            width: 100,
+            render: ({row}) => row.Rack || '—',
+            align: DataTable.LEFT,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Uptime,
+            header: 'Uptime',
+            width: 130,
+            sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
+            align: DataTable.RIGHT,
+            render: ({row}) => row.Uptime,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.Missing,
+            header: 'Missing',
+            width: 100,
+            align: DataTable.CENTER,
+            defaultOrder: DataTable.DESCENDING,
+            render: ({row}) => row.Missing,
+        },
+        {
+            name: STORAGE_NODES_COLUMNS_IDS.PDisks,
+            className: b('pdisks-column'),
+            header: 'PDisks',
+            render: ({row}) => {
+                return (
+                    <div className={b('pdisks-wrapper')}>
+                        {row.PDisks?.map((pDisk) => {
+                            const vDisks = row.VDisks?.filter(
+                                (vdisk) => vdisk.PDiskId === pDisk.PDiskId,
+                            ).map((data) => ({
+                                ...data,
+                                NodeId: row.NodeId,
+                            }));
+
+                            return (
+                                <div className={b('pdisks-item')} key={pDisk.PDiskId}>
+                                    <PDisk data={pDisk} nodeId={row.NodeId} vDisks={vDisks} />
+                                </div>
+                            );
+                        })}
+                    </div>
+                );
+            },
+            align: DataTable.CENTER,
+            sortable: false,
+            width: 900,
+        },
+    ];
+
+    return columns;
+};
+
+export const getPreparedStorageNodesColumns = (
+    additionalNodesProps: AdditionalNodesProps | undefined,
+    visibleEntities: VisibleEntities,
+) => {
+    const rawColumns = getStorageNodesColumns(additionalNodesProps);
+
+    const sortableColumns = rawColumns.map((column) => ({
+        ...column,
+        sortable: isSortableNodesProperty(column.name),
+    }));
+
+    if (visibleEntities !== VISIBLE_ENTITIES.missing) {
+        return sortableColumns.filter((col) => col.name !== STORAGE_NODES_COLUMNS_IDS.Missing);
+    }
+
+    return sortableColumns;
+};

package/dist/containers/Storage/StorageNodes/shared.ts

@@ -0,0 +1,9 @@
+import cn from 'bem-cn-lite';
+
+import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
+import {isUnavailableNode} from '../../../utils/nodes';
+
+export const b = cn('global-storage-nodes');
+
+export const getRowUnavailableClassName = (row: PreparedStorageNode) =>
+    b('node', {unavailable: isUnavailableNode(row)});

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -10,7 +10,7 @@ const StorageTypesTitles = {
 
 interface StorageTypeFilterProps {
     value: StorageType;
-    onChange: (value: string) => void;
+    onChange: (value: StorageType) => void;
 }
 
 const storageTypeFilterQa = 'storage-type-filter';

package/dist/containers/Storage/StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.tsx

@@ -11,7 +11,7 @@ export const VisibleEntitiesTitles = {
 
 interface StorageProblemFilterProps {
     value: VisibleEntities;
-    onChange: (value: string) => void;
+    onChange: (value: VisibleEntities) => void;
 }
 
 const storageVisibleEntitiesFilterQa = 'storage-visible-entities-filter';

package/dist/containers/Storage/StorageWrapper.tsx

@@ -0,0 +1,23 @@
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
+import {useSetting} from '../../utils/hooks';
+
+import {VirtualStorage} from './VirtualStorage';
+import {Storage} from './Storage';
+
+interface StorageWrapperProps {
+    tenant?: string;
+    nodeId?: string;
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const StorageWrapper = ({parentContainer, ...props}: StorageWrapperProps) => {
+    const [useVirtualTable] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
+
+    if (useVirtualTable) {
+        return <VirtualStorage parentContainer={parentContainer} {...props} />;
+    }
+
+    return <Storage {...props} />;
+};

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -10,7 +10,7 @@ import {getUsageSeverityForEntityStatus} from '../utils';
 import i18n from './i18n';
 import './UsageFilter.scss';
 
-interface UsageFilterItem {
+export interface UsageFilterItem {
     threshold: number;
     count: number;
 }
@@ -21,13 +21,12 @@ interface UsageFilterProps {
     groups?: UsageFilterItem[];
     onChange?: (value: string[]) => void;
     debounce?: number;
-    disabled?: boolean;
 }
 
 const b = cn('usage-filter');
 
 export const UsageFilter = (props: UsageFilterProps) => {
-    const {className, value = [], groups = [], onChange, debounce = 200, disabled} = props;
+    const {className, value = [], groups = [], onChange, debounce = 200} = props;
 
     const [filterValue, setFilterValue] = useState(value);
     const timer = useRef<number>();
@@ -94,7 +93,7 @@ export const UsageFilter = (props: UsageFilterProps) => {
             renderOption={renderOption}
             getOptionHeight={() => 50}
             popupWidth={280}
-            disabled={disabled}
+            disabled={groups.length === 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/index.tsx

@@ -8,6 +8,7 @@ import App from './containers/App/App';
 import configureStore from './store';
 import reportWebVitals from './reportWebVitals';
 import HistoryContext from './contexts/HistoryContext';
+import {ErrorBoundary} from './components/ErrorBoundary/ErrorBoundary';
 
 import './styles/themes.scss';
 import './styles/constants.scss';
@@ -18,11 +19,13 @@ window.store = store;
 
 ReactDOM.render(
     <React.StrictMode>
-        <Provider store={store}>
-            <HistoryContext.Provider value={history}>
-                <App />
-            </HistoryContext.Provider>
-        </Provider>
+        <ErrorBoundary>
+            <Provider store={store}>
+                <HistoryContext.Provider value={history}>
+                    <App />
+                </HistoryContext.Provider>
+            </Provider>
+        </ErrorBoundary>
     </React.StrictMode>,
     document.getElementById('root'),
 );

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/dist/utils/registerError.ts

@@ -0,0 +1,18 @@
+export function registerError(error: Error, message?: string, type = 'error') {
+    if (typeof window !== 'undefined' && window.Ya?.Rum) {
+        window.Ya.Rum.logError(
+            {
+                additional: {
+                    url: window.location.href,
+                },
+                type,
+                message,
+                level: window.Ya.Rum.ERROR_LEVEL.ERROR,
+            },
+            error,
+        );
+    } else {
+        // eslint-disable-next-line no-console
+        console.error(error);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.27.1",
+  "version": "4.29.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,8 @@
     "monaco-editor": "0.24.0",
     "numeral": "2.0.6",
     "path-to-regexp": "3.0.0",
+    "qs": "^6.11.0",
+    "react-error-boundary": "^4.0.12",
     "react-json-inspector": "7.1.1",
     "react-list": "0.8.11",
     "react-monaco-editor": "0.30.1",
@@ -40,6 +44,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 +123,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 +133,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"