feat(UserSettings): add setting for separate disks pages (#993)

ydb-platform · Jul 9, 2024 · 18253bd · 18253bd
1 parent b33c1ea
commit 18253bd
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 20 deletions.
diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 
 import {STRUCTURE} from '../../containers/Node/NodePages';
-import routes, {createHref} from '../../routes';
+import routes, {createHref, getVDiskPagePath} from '../../routes';
 import type {NodesMap} from '../../types/store/nodesList';
+import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
+import {USE_SEPARATE_DISKS_PAGES_KEY} from '../../utils/constants';
 import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters';
 import {isFullVDiskData} from '../../utils/disks/helpers';
 import type {PreparedVDisk} from '../../utils/disks/types';
+import {useSetting} from '../../utils/hooks';
 import {DiskStateProgressBar} from '../DiskStateProgressBar/DiskStateProgressBar';
 import {InternalLink} from '../InternalLink';
 import {VDiskPopup} from '../VDiskPopup/VDiskPopup';
@@ -24,6 +27,8 @@ interface VDiskProps {
 export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
     const isFullData = isFullVDiskData(data);
 
+    const [useSeparateDisksPages] = useSetting(USE_SEPARATE_DISKS_PAGES_KEY);
+
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
     const anchor = React.useRef(null);
@@ -36,22 +41,32 @@ export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
         setIsPopupVisible(false);
     };
 
+    let vDiskPath: string | undefined;
+
+    if (
+        useSeparateDisksPages &&
+        valueIsDefined(data.VDiskSlotId) &&
+        valueIsDefined(data.PDiskId) &&
+        valueIsDefined(data.NodeId)
+    ) {
+        vDiskPath = getVDiskPagePath(data.VDiskSlotId, data.PDiskId, data.NodeId);
+    } else if (valueIsDefined(data.NodeId) && isFullData) {
+        vDiskPath = createHref(
+            routes.node,
+            {id: data.NodeId, activeTab: STRUCTURE},
+            {
+                pdiskId: data.PDiskId,
+                vdiskId: stringifyVdiskId(data.VDiskId),
+            },
+        );
+    }
+
     return (
         <React.Fragment>
             <VDiskPopup data={data} nodes={nodes} anchorRef={anchor} open={isPopupVisible} />
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                {data.NodeId && isFullData ? (
-                    <InternalLink
-                        to={createHref(
-                            routes.node,
-                            {id: data.NodeId, activeTab: STRUCTURE},
-                            {
-                                pdiskId: data.PDiskId ?? data.PDisk?.PDiskId,
-                                vdiskId: stringifyVdiskId(data.VDiskId),
-                            },
-                        )}
-                        className={b('content')}
-                    >
+                {vDiskPath ? (
+                    <InternalLink to={vDiskPath} className={b('content')}>
                         <DiskStateProgressBar
                             diskAllocatedPercent={data.AllocatedPercent}
                             severity={data.Severity}

diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx
@@ -4,11 +4,14 @@ import {DiskStateProgressBar} from '../../../components/DiskStateProgressBar/Dis
 import {InternalLink} from '../../../components/InternalLink';
 import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup';
 import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack';
-import routes, {createHref} from '../../../routes';
+import routes, {createHref, getPDiskPagePath} from '../../../routes';
 import type {TVDiskStateInfo} from '../../../types/api/vdisk';
+import {valueIsDefined} from '../../../utils';
 import {cn} from '../../../utils/cn';
+import {USE_SEPARATE_DISKS_PAGES_KEY} from '../../../utils/constants';
 import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import type {PreparedPDisk} from '../../../utils/disks/types';
+import {useSetting} from '../../../utils/hooks';
 import {STRUCTURE} from '../../Node/NodePages';
 
 import './PDisk.scss';
@@ -24,6 +27,8 @@ interface PDiskProps {
 export const PDisk = ({nodeId, data = {}, vDisks}: PDiskProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
+    const [useSeparateDisksPages] = useSetting(USE_SEPARATE_DISKS_PAGES_KEY);
+
     const anchor = React.useRef(null);
 
     const showPopup = () => {
@@ -64,17 +69,23 @@ export const PDisk = ({nodeId, data = {}, vDisks}: PDiskProps) => {
         );
     };
 
+    let pDiskPath = createHref(
+        routes.node,
+        {id: nodeId, activeTab: STRUCTURE},
+        {pdiskId: data.PDiskId || ''},
+    );
+
+    if (useSeparateDisksPages && valueIsDefined(data.PDiskId)) {
+        pDiskPath = getPDiskPagePath(data.PDiskId, nodeId);
+    }
+
     return (
         <React.Fragment>
             <PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible} />
             <div className={b()} ref={anchor}>
                 {renderVDisks()}
                 <InternalLink
-                    to={createHref(
-                        routes.node,
-                        {id: nodeId, activeTab: STRUCTURE},
-                        {pdiskId: data.PDiskId || ''},
-                    )}
+                    to={pDiskPath}
                     className={b('content')}
                     onMouseEnter={showPopup}
                     onMouseLeave={hidePopup}

diff --git a/src/containers/UserSettings/i18n/en.json b/src/containers/UserSettings/i18n/en.json
@@ -40,6 +40,9 @@
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",
   "settings.queryUseMultiSchema.popover": "Use 'multi' schema for queries. It enables queries with multiple result sets. It returns nothing on versions 23-3 and older",
 
+  "settings.useSeparateDisksPages.title": "Use separate PDisk and VDisk pages",
+  "settings.useSeparateDisksPages.description": "Use separate pages instead of node structure tab",
+
   "settings.useClusterBalancerAsBackend.title": "Use cluster balancer as backend",
   "settings.useClusterBalancerAsBackend.popover": "By default random cluster node is used as backend. It causes saved links to become invalid after some time, when node is restarted. Using balancer as backend fixes it",
 

diff --git a/src/containers/UserSettings/settings.tsx b/src/containers/UserSettings/settings.tsx
@@ -13,6 +13,7 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    USE_SEPARATE_DISKS_PAGES_KEY,
 } from '../../utils/constants';
 import {Lang, defaultLang} from '../../utils/i18n';
 import {ClusterModeGuard} from '../ClusterModeGuard';
@@ -111,6 +112,12 @@ export const queryUseMultiSchemaSetting: SettingProps = {
     description: i18n('settings.queryUseMultiSchema.popover'),
 };
 
+export const useSeparateDisksPagesSetting: SettingProps = {
+    settingKey: USE_SEPARATE_DISKS_PAGES_KEY,
+    title: i18n('settings.useSeparateDisksPages.title'),
+    description: i18n('settings.useSeparateDisksPages.description'),
+};
+
 export const useClusterBalancerAsBackendSetting: SettingProps = {
     settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     title: i18n('settings.useClusterBalancerAsBackend.title'),
@@ -143,7 +150,12 @@ export const appearanceSection: SettingsSection = {
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
-    settings: [useNodesEndpointSetting, useVirtualTables, queryUseMultiSchemaSetting],
+    settings: [
+        useNodesEndpointSetting,
+        useVirtualTables,
+        queryUseMultiSchemaSetting,
+        useSeparateDisksPagesSetting,
+    ],
 };
 export const devSettingsSection: SettingsSection = {
     id: 'devSettingsSection',

diff --git a/src/services/settings.ts b/src/services/settings.ts
@@ -18,6 +18,7 @@ import {
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
     USE_CLUSTER_BALANCER_AS_BACKEND_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    USE_SEPARATE_DISKS_PAGES_KEY,
 } from '../utils/constants';
 import {QUERY_ACTIONS, QUERY_MODES} from '../utils/query';
 import {parseJson} from '../utils/utils';
@@ -40,6 +41,7 @@ export const DEFAULT_USER_SETTINGS = {
     [PARTITIONS_HIDDEN_COLUMNS_KEY]: [],
     [USE_BACKEND_PARAMS_FOR_TABLES_KEY]: false,
     [USE_CLUSTER_BALANCER_AS_BACKEND_KEY]: true,
+    [USE_SEPARATE_DISKS_PAGES_KEY]: false,
     [ENABLE_AUTOCOMPLETE]: true,
     [AUTOCOMPLETE_ON_ENTER]: true,
     [IS_HOTKEYS_HELP_HIDDEN_KEY]: false,

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -139,3 +139,5 @@ export const ENABLE_AUTOCOMPLETE = 'enableAutocomplete';
 export const AUTOCOMPLETE_ON_ENTER = 'autocompleteOnEnter';
 
 export const IS_HOTKEYS_HELP_HIDDEN_KEY = 'isHotKeysHelpHidden';
+
+export const USE_SEPARATE_DISKS_PAGES_KEY = 'useSeparateDisksPages';
diff --git a/src/utils/disks/prepareDisks.ts b/src/utils/disks/prepareDisks.ts
@@ -11,6 +11,8 @@ export function prepareVDiskData(vdiskState: TVDiskStateInfo = {}): PreparedVDis
     // Prepare PDisk only if it is present
     const PDisk = vdiskState.PDisk ? preparePDiskData(vdiskState.PDisk) : undefined;
 
+    const PDiskId = vdiskState.PDiskId ?? PDisk?.PDiskId;
+
     const AllocatedPercent = calculateVDiskAllocatedPercent(
         vdiskState.AllocatedSize,
         vdiskState.AvailableSize,
@@ -26,6 +28,7 @@ export function prepareVDiskData(vdiskState: TVDiskStateInfo = {}): PreparedVDis
     return {
         ...vdiskState,
         PDisk,
+        PDiskId,
         AllocatedPercent,
         Donors,
         Severity,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -139,3 +139,5 @@ export const ENABLE_AUTOCOMPLETE = 'enableAutocomplete';
		export const AUTOCOMPLETE_ON_ENTER = 'autocompleteOnEnter';

		export const IS_HOTKEYS_HELP_HIDDEN_KEY = 'isHotKeysHelpHidden';

		export const USE_SEPARATE_DISKS_PAGES_KEY = 'useSeparateDisksPages';