fix: update links to VDisk and PDisk Developer UI (#582)

ydb-platform · Nov 14, 2023 · 97dda88 · 97dda88
1 parent e02128e
commit 97dda88
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 41 deletions.
diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx
@@ -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;

diff --git a/src/containers/Node/NodeStructure/NodeStructure.tsx b/src/containers/Node/NodeStructure/NodeStructure.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useMemo} from 'react';
+import {useEffect, useRef} from 'react';
 import {useDispatch} from 'react-redux';
 import url from 'url';
 import _ from 'lodash';
@@ -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,
@@ -136,7 +126,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();

diff --git a/src/containers/Node/NodeStructure/Pdisk.tsx b/src/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,38 +56,43 @@ 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>[] = [
         {
             name: VDiskTableColumnsIds.slotId,
             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>

diff --git a/src/containers/Node/i18n/en.json b/src/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"
+}
diff --git a/src/containers/Node/i18n/index.ts b/src/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);
diff --git a/src/containers/Node/i18n/ru.json b/src/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"
+}
diff --git a/src/utils/developerUI.ts b/src/utils/developerUI.ts
@@ -0,0 +1,32 @@
+import {backend} from '../store';
+import {pad9} from './utils';
+
+// Current node connects with target node by itself using nodeId
+export const createDeveloperUILinkWithNodeId = (nodeId: number | string) => {
+    return `${backend}/node/${nodeId}/`;
+};
+
+interface PDiskDeveloperUILinkParams {
+    nodeId: number | string;
+    pDiskId: number | string;
+}
+
+export const createPDiskDeveloperUILink = ({nodeId, pDiskId}: PDiskDeveloperUILinkParams) => {
+    const pdiskPath = 'actors/pdisks/pdisk' + pad9(pDiskId);
+
+    return createDeveloperUILinkWithNodeId(nodeId) + pdiskPath;
+};
+
+interface VDiskDeveloperUILinkParams extends PDiskDeveloperUILinkParams {
+    vDiskSlotId: number | string;
+}
+
+export const createVDiskDeveloperUILink = ({
+    nodeId,
+    pDiskId,
+    vDiskSlotId,
+}: VDiskDeveloperUILinkParams) => {
+    const vdiskPath = 'actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(vDiskSlotId);
+
+    return createDeveloperUILinkWithNodeId(nodeId) + vdiskPath;
+};