ydb-embedded-ui 4.20.4 → 4.21.1

package/dist/containers/Node/Node.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import {useLocation, useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
-import _ from 'lodash';
 
 import {Tabs} from '@gravity-ui/uikit';
 import {Link} from 'react-router-dom';
@@ -52,21 +51,22 @@ function Node(props: NodeProps) {
     const {tenantName: tenantNameFromQuery} = parseQuery(location);
 
     const {activeTabVerified, nodeTabs} = React.useMemo(() => {
-        const hasStorage = _.find(node?.Roles as any[], (el) => el === STORAGE_ROLE);
-        let activeTabVerified = activeTab;
+        const hasStorage = node?.Roles?.find((el) => el === STORAGE_ROLE);
+
+        let actualActiveTab = activeTab;
         if (!hasStorage && activeTab === STORAGE) {
-            activeTabVerified = OVERVIEW;
+            actualActiveTab = OVERVIEW;
         }
         const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
 
-        const nodeTabs = nodePages.map((page) => {
+        const actualNodeTabs = nodePages.map((page) => {
             return {
                 ...page,
                 title: page.name,
             };
         });
 
-        return {activeTabVerified, nodeTabs};
+        return {activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [activeTab, node]);
 
     React.useEffect(() => {
@@ -100,13 +100,13 @@ function Node(props: NodeProps) {
                     size="l"
                     items={nodeTabs}
                     activeTab={activeTabVerified}
-                    wrapTo={({id}, node) => (
+                    wrapTo={({id}, tabNode) => (
                         <Link
                             to={createHref(routes.node, {id: nodeId, activeTab: id})}
                             key={id}
                             className={b('tab')}
                         >
-                            {node}
+                            {tabNode}
                         </Link>
                     )}
                     allowNotSelected={true}
@@ -115,8 +115,6 @@ function Node(props: NodeProps) {
         );
     };
     const renderTabContent = () => {
-        const {additionalNodesProps} = props;
-
         switch (activeTab) {
             case STORAGE: {
                 return (
@@ -134,13 +132,7 @@ function Node(props: NodeProps) {
             }
 
             case STRUCTURE: {
-                return (
-                    <NodeStructure
-                        className={b('node-page-wrapper')}
-                        nodeId={nodeId}
-                        additionalNodesProps={additionalNodesProps}
-                    />
-                );
+                return <NodeStructure className={b('node-page-wrapper')} nodeId={nodeId} />;
             }
             default:
                 return false;

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,7 +1,7 @@
-import {useEffect, useRef, useMemo} from 'react';
+import {useEffect, useRef} from 'react';
 import {useDispatch} from 'react-redux';
 import url from 'url';
-import _ from 'lodash';
+import {isEmpty} from 'lodash/fp';
 
 import cn from 'bem-cn-lite';
 
@@ -13,15 +13,13 @@ import {selectNodeStructure} from '../../../store/reducers/node/selectors';
 import {AutoFetcher} from '../../../utils/autofetcher';
 import {useTypedSelector} from '../../../utils/hooks';
 
-import type {AdditionalNodesProps} from '../../../types/additionalProps';
-
 import {PDisk} from './Pdisk';
 
 import './NodeStructure.scss';
 
 const b = cn('kv-node-structure');
 
-export function valueIsDefined(value: any) {
+export function valueIsDefined<T>(value: T | null | undefined): value is T {
     return value !== null && value !== undefined;
 }
 
@@ -32,24 +30,16 @@ function generateId({type, id}: {type: 'pdisk' | 'vdisk'; id: string}) {
 interface NodeStructureProps {
     nodeId: string;
     className?: string;
-    additionalNodesProps?: AdditionalNodesProps;
 }
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureProps) {
+function NodeStructure({nodeId, className}: NodeStructureProps) {
     const dispatch = useDispatch();
 
     const nodeStructure = useTypedSelector(selectNodeStructure);
 
     const {loadingStructure, wasLoadedStructure} = useTypedSelector((state) => state.node);
-    const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
-
-    const nodeHref = useMemo(() => {
-        return additionalNodesProps?.getNodeRef
-            ? additionalNodesProps.getNodeRef(nodeData)
-            : undefined;
-    }, [nodeData, additionalNodesProps]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,
@@ -57,23 +47,11 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
     ).query;
 
     const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const scrollContainer = scrollContainerRef.current;
 
     const isReady = useRef(false);
 
     const scrolled = useRef(false);
 
-    useEffect(() => {
-        return () => {
-            if (scrollContainer) {
-                scrollContainer.scrollTo({
-                    behavior: 'smooth',
-                    top: 0,
-                });
-            }
-        };
-    }, []);
-
     useEffect(() => {
         dispatch(getNodeStructure(nodeId));
         autofetcher.start();
@@ -87,13 +65,13 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
     }, [nodeId, dispatch]);
 
     useEffect(() => {
-        if (!_.isEmpty(nodeStructure) && scrollContainer) {
+        if (!isEmpty(nodeStructure) && scrollContainerRef.current) {
             isReady.current = true;
         }
     }, [nodeStructure]);
 
     useEffect(() => {
-        if (isReady.current && !scrolled.current && scrollContainer) {
+        if (isReady.current && !scrolled.current && scrollContainerRef.current) {
             const element = document.getElementById(
                 generateId({type: 'pdisk', id: pdiskIdFromUrl as string}),
             );
@@ -112,7 +90,7 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
             }
 
             if (element) {
-                scrollContainer.scrollTo({
+                scrollContainerRef.current.scrollTo({
                     behavior: 'smooth',
                     // should subtract 20 to avoid sticking the element to tabs
                     top: scrollToVdisk ? scrollToVdisk : element.offsetTop,
@@ -136,7 +114,7 @@ function NodeStructure({nodeId, className, additionalNodesProps}: NodeStructureP
                       id={generateId({type: 'pdisk', id: pDiskId})}
                       unfolded={pdiskIdFromUrl === pDiskId}
                       selectedVdiskId={vdiskIdFromUrl as string}
-                      nodeHref={nodeHref}
+                      nodeId={nodeId}
                   />
               ))
             : renderStub();

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -12,15 +12,17 @@ import type {
     PreparedStructureVDisk,
 } from '../../../store/reducers/node/types';
 import {EVDiskState} from '../../../types/api/vdisk';
-import {bytesToGB, pad9} from '../../../utils/utils';
+import {bytesToGB} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {createPDiskDeveloperUILink, createVDiskDeveloperUILink} from '../../../utils/developerUI';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import InfoViewer, {type InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import {Icon} from '../../../components/Icon';
 
+import i18n from '../i18n';
 import {Vdisk} from './Vdisk';
 import {valueIsDefined} from './NodeStructure';
 import {PDiskTitleBadge} from './PDiskTitleBadge';
@@ -32,7 +34,7 @@ interface PDiskProps {
     unfolded?: boolean;
     id: string;
     selectedVdiskId?: string;
-    nodeHref?: string | null;
+    nodeId: string | number;
 }
 
 enum VDiskTableColumnsIds {
@@ -54,11 +56,11 @@ const vDiskTableColumnsNames: Record<VDiskTableColumnsIdsValues, string> = {
 function getColumns({
     pDiskId,
     selectedVdiskId,
-    nodeHref,
+    nodeId,
 }: {
     pDiskId: number | undefined;
     selectedVdiskId?: string;
-    nodeHref?: string | null;
+    nodeId?: string | number;
 }) {
     const columns: Column<PreparedStructureVDisk>[] = [
         {
@@ -66,26 +68,31 @@ function getColumns({
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
             width: 100,
             render: ({row}) => {
-                let vdiskInternalViewerLink = '';
+                const vDiskSlotId = row.VDiskSlotId;
+                let vdiskInternalViewerLink = null;
 
-                if (nodeHref && pDiskId !== undefined && row.VDiskSlotId !== undefined) {
-                    vdiskInternalViewerLink +=
-                        nodeHref +
-                        'actors/vdisks/vdisk' +
-                        pad9(pDiskId) +
-                        '_' +
-                        pad9(row.VDiskSlotId);
+                if (
+                    valueIsDefined(nodeId) &&
+                    valueIsDefined(pDiskId) &&
+                    valueIsDefined(vDiskSlotId)
+                ) {
+                    vdiskInternalViewerLink = createVDiskDeveloperUILink({
+                        nodeId,
+                        pDiskId,
+                        vDiskSlotId,
+                    });
                 }
 
                 return (
                     <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
-                        <span>{row.VDiskSlotId}</span>
+                        <span>{vDiskSlotId}</span>
                         {vdiskInternalViewerLink && (
                             <Button
                                 size="s"
                                 className={b('external-button', {hidden: true})}
                                 href={vdiskInternalViewerLink}
                                 target="_blank"
+                                title={i18n('vdisk.developer-ui-button-title')}
                             >
                                 <Icon name="external" />
                             </Button>
@@ -156,7 +163,7 @@ export function PDisk({
     id,
     data,
     selectedVdiskId,
-    nodeHref,
+    nodeId,
     unfolded: unfoldedFromProps,
 }: PDiskProps) {
     const [unfolded, setUnfolded] = useState(unfoldedFromProps ?? false);
@@ -190,7 +197,7 @@ export function PDisk({
             <DataTable
                 theme="yandex-cloud"
                 data={vDisks}
-                columns={getColumns({nodeHref, pDiskId: PDiskId, selectedVdiskId})}
+                columns={getColumns({nodeId, pDiskId: PDiskId, selectedVdiskId})}
                 settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
                 rowClassName={(row) => {
                     return row.id === selectedVdiskId ? b('selected-vdisk') : '';
@@ -203,10 +210,13 @@ export function PDisk({
         if (isEmpty(data)) {
             return <div>No information about PDisk</div>;
         }
-        let pDiskInternalViewerLink = '';
+        let pDiskInternalViewerLink = null;
 
-        if (nodeHref) {
-            pDiskInternalViewerLink += nodeHref + 'actors/pdisks/pdisk' + pad9(PDiskId);
+        if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
+            pDiskInternalViewerLink = createPDiskDeveloperUILink({
+                nodeId,
+                pDiskId: PDiskId,
+            });
         }
 
         const pdiskInfo: InfoViewerItem[] = [
@@ -222,6 +232,7 @@ export function PDisk({
                                 href={pDiskInternalViewerLink}
                                 target="_blank"
                                 view="flat-secondary"
+                                title={i18n('pdisk.developer-ui-button-title')}
                             >
                                 <Icon name="external" />
                             </Button>

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

@@ -0,0 +1,4 @@
+{
+  "pdisk.developer-ui-button-title": "PDisk Developer UI page",
+  "vdisk.developer-ui-button-title": "VDisk Developer UI page"
+}

package/dist/containers/Node/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-node-page';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,4 @@
+{
+  "pdisk.developer-ui-button-title": "Страница PDisk в Developer UI",
+  "vdisk.developer-ui-button-title": "Страница VDisk в Developer UI"
+}

package/dist/containers/Nodes/Nodes.tsx

@@ -5,7 +5,6 @@ import {useDispatch} from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 
-import type {EPathType} from '../../types/api/schema';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
 import type {NodesSortParams} from '../../store/reducers/nodes/types';
 
@@ -19,13 +18,7 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
-import {
-    useAutofetcher,
-    useSetting,
-    useTypedSelector,
-    useNodesRequestParams,
-    useTableSort,
-} from '../../utils/hooks';
+import {useAutofetcher, useSetting, useTypedSelector, useTableSort} from '../../utils/hooks';
 import {
     isSortableNodesProperty,
     isUnavailableNode,
@@ -45,8 +38,6 @@ import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
 import type {AdditionalNodesProps} from '../../types/additionalProps';
 
-import {isDatabaseEntityType} from '../Tenant/utils/schema';
-
 import {getNodesColumns} from './getNodesColumns';
 
 import './Nodes.scss';
@@ -57,11 +48,10 @@ const b = cn('ydb-nodes');
 
 interface NodesProps {
     path?: string;
-    type?: EPathType;
     additionalNodesProps?: AdditionalNodesProps;
 }
 
-export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
+export const Nodes = ({path, additionalNodesProps = {}}: NodesProps) => {
     const dispatch = useDispatch();
 
     const isClusterNodes = !path;
@@ -90,31 +80,20 @@ export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
-    const requestParams = useNodesRequestParams({
-        filter: searchValue,
-        problemFilter,
-        nodesUptimeFilter,
-        sortOrder,
-        sortValue,
-    });
-
     const fetchNodes = useCallback(
         (isBackground) => {
             if (!isBackground) {
                 dispatch(setDataWasNotLoaded());
             }
 
-            const params = requestParams || {};
-
-            // For not DB entities we always use /compute endpoint instead of /nodes
-            // since /nodes can return data only for tenants
-            if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
-                dispatch(getComputeNodes({path, ...params}));
+            // If there is no path, it's cluster Nodes tab
+            if (path && !useNodesEndpoint) {
+                dispatch(getComputeNodes({path}));
             } else {
-                dispatch(getNodes({tenant: path, ...params}));
+                dispatch(getNodes({path}));
             }
         },
-        [dispatch, path, type, useNodesEndpoint, requestParams],
+        [dispatch, path, useNodesEndpoint],
     );
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);

package/dist/containers/Nodes/VirtualNodes.tsx

@@ -0,0 +1,146 @@
+import {useCallback, useMemo, useState} from 'react';
+import cn from 'bem-cn-lite';
+
+import type {AdditionalNodesProps} from '../../types/additionalProps';
+import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
+import {ProblemFilterValues} from '../../store/reducers/settings/settings';
+import {
+    NodesSortValue,
+    NodesUptimeFilterValues,
+    getProblemParamValue,
+    getUptimeParamValue,
+    isSortableNodesProperty,
+    isUnavailableNode,
+} from '../../utils/nodes';
+
+import {Search} from '../../components/Search';
+import {ProblemFilter} from '../../components/ProblemFilter';
+import {UptimeFilter} from '../../components/UptimeFIlter';
+import {EntitiesCount} from '../../components/EntitiesCount';
+import {AccessDenied} from '../../components/Errors/403';
+import {ResponseError} from '../../components/Errors/ResponseError';
+import {Illustration} from '../../components/Illustration';
+import {
+    type FetchData,
+    type RenderControls,
+    type RenderErrorMessage,
+    VirtualTable,
+    GetRowClassName,
+} from '../../components/VirtualTable';
+
+import {getNodesColumns} from './getNodesColumns';
+import {getNodes} from './getNodes';
+import i18n from './i18n';
+
+import './Nodes.scss';
+
+const b = cn('ydb-nodes');
+
+interface NodesProps {
+    parentContainer?: Element | null;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps) => {
+    const [searchValue, setSearchValue] = useState('');
+    const [problemFilter, setProblemFilter] = useState<ProblemFilterValue>(ProblemFilterValues.ALL);
+    const [uptimeFilter, setUptimeFilter] = useState<NodesUptimeFilterValues>(
+        NodesUptimeFilterValues.All,
+    );
+
+    const filters = useMemo(() => {
+        return [searchValue, problemFilter, uptimeFilter];
+    }, [searchValue, problemFilter, uptimeFilter]);
+
+    const fetchData = useCallback<FetchData<NodesPreparedEntity>>(
+        async (limit, offset, {sortOrder, columnId} = {}) => {
+            return await getNodes({
+                limit,
+                offset,
+                filter: searchValue,
+                problems_only: getProblemParamValue(problemFilter),
+                uptime: getUptimeParamValue(uptimeFilter),
+                sortOrder,
+                sortValue: columnId as NodesSortValue,
+            });
+        },
+        [problemFilter, searchValue, uptimeFilter],
+    );
+
+    const getRowClassName: GetRowClassName<NodesPreparedEntity> = (row) => {
+        return b('node', {unavailable: isUnavailableNode(row)});
+    };
+
+    const handleSearchQueryChange = (value: string) => {
+        setSearchValue(value);
+    };
+    const handleProblemFilterChange = (value: string) => {
+        setProblemFilter(value as ProblemFilterValue);
+    };
+    const handleUptimeFilterChange = (value: string) => {
+        setUptimeFilter(value as NodesUptimeFilterValues);
+    };
+
+    const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
+        return (
+            <>
+                <Search
+                    onChange={handleSearchQueryChange}
+                    placeholder="Host name"
+                    className={b('search')}
+                    value={searchValue}
+                />
+                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+                <UptimeFilter value={uptimeFilter} onChange={handleUptimeFilterChange} />
+                <EntitiesCount
+                    total={totalEntities}
+                    current={foundEntities}
+                    label={'Nodes'}
+                    loading={!inited}
+                />
+            </>
+        );
+    };
+
+    const renderEmptyDataMessage = () => {
+        if (
+            problemFilter !== ProblemFilterValues.ALL ||
+            uptimeFilter !== NodesUptimeFilterValues.All
+        ) {
+            return <Illustration name="thumbsUp" width="200" />;
+        }
+
+        return i18n('empty.default');
+    };
+
+    const renderErrorMessage: RenderErrorMessage = (error) => {
+        if (error && error.status === 403) {
+            return <AccessDenied />;
+        }
+
+        return <ResponseError error={error} />;
+    };
+
+    const rawColumns = getNodesColumns({
+        getNodeRef: additionalNodesProps?.getNodeRef,
+    });
+
+    const columns = rawColumns.map((column) => {
+        return {...column, sortable: isSortableNodesProperty(column.name)};
+    });
+
+    return (
+        <VirtualTable
+            parentContainer={parentContainer}
+            columns={columns}
+            fetchData={fetchData}
+            limit={50}
+            renderControls={renderControls}
+            renderErrorMessage={renderErrorMessage}
+            renderEmptyDataMessage={renderEmptyDataMessage}
+            dependencyArray={filters}
+            getRowClassName={getRowClassName}
+        />
+    );
+};

package/dist/containers/Nodes/getNodes.ts

@@ -0,0 +1,26 @@
+import type {NodesApiRequestParams} from '../../store/reducers/nodes/types';
+import {prepareNodesData} from '../../store/reducers/nodes/utils';
+
+const getConcurrentId = (limit?: number, offset?: number) => {
+    return `getNodes|offset${offset}|limit${limit}`;
+};
+
+export const getNodes = async ({
+    type = 'any',
+    storage = false,
+    limit,
+    offset,
+    ...params
+}: NodesApiRequestParams) => {
+    const response = await window.api.getNodes(
+        {type, storage, limit, offset, ...params},
+        {concurrentId: getConcurrentId(limit, offset)},
+    );
+    const preparedResponse = prepareNodesData(response);
+
+    return {
+        data: preparedResponse.Nodes || [],
+        found: preparedResponse.FoundNodes || 0,
+        total: preparedResponse.TotalNodes || 0,
+    };
+};