feat: make links from disk pop-up better (#1986)

Author: astandrik

src/components/PDiskInfo/PDiskInfo.scss

@@ -3,7 +3,6 @@ import {Flex} from '@gravity-ui/uikit';
 import {getPDiskPagePath} from '../../routes';
 import {valueIsDefined} from '../../utils';
 import {formatBytes} from '../../utils/bytesParsers';
-import {cn} from '../../utils/cn';
 import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
 import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
 import type {PreparedPDisk} from '../../utils/disks/types';
@@ -16,10 +15,6 @@ import {StatusIcon} from '../StatusIcon/StatusIcon';
 
 import {pDiskInfoKeyset} from './i18n';
 
-import './PDiskInfo.scss';
-
-const b = cn('ydb-pdisk-info');
-
 interface GetPDiskInfoOptions<T extends PreparedPDisk> {
     pDisk?: T;
     nodeId?: number | string | null;
@@ -156,7 +151,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
         additionalInfo.push({
             label: pDiskInfoKeyset('links'),
             value: (
-                <span className={b('links')}>
+                <Flex wrap="wrap" gap={2}>
                     {withPDiskPageLink && (
                         <LinkWithIcon
                             title={pDiskInfoKeyset('pdisk-page')}
@@ -170,7 +165,7 @@ function getPDiskInfo<T extends PreparedPDisk>({
                             url={pDiskInternalViewerPath}
                         />
                     )}
-                </span>
+                </Flex>
             ),
         });
     }

src/components/PDiskInfo/PDiskInfo.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import {Flex} from '@gravity-ui/uikit';
+
+import {getPDiskPagePath} from '../../routes';
 import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
@@ -12,6 +15,7 @@ import {bytesToGB, isNumeric} from '../../utils/utils';
 import {InfoViewer} from '../InfoViewer';
 import type {InfoViewerItem} from '../InfoViewer';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+import {pDiskInfoKeyset} from '../PDiskInfo/i18n';
 
 const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 
@@ -78,9 +82,22 @@ export const preparePDiskData = (
             pDiskId: PDiskId,
         });
 
+        const pDiskPagePath = getPDiskPagePath(PDiskId, NodeId);
         pdiskData.push({
             label: 'Links',
-            value: <LinkWithIcon title={'Developer UI'} url={pDiskInternalViewerPath} />,
+            value: (
+                <Flex gap={2} wrap="wrap">
+                    <LinkWithIcon
+                        title={pDiskInfoKeyset('pdisk-page')}
+                        url={pDiskPagePath}
+                        external={false}
+                    />
+                    <LinkWithIcon
+                        title={pDiskInfoKeyset('developer-ui')}
+                        url={pDiskInternalViewerPath}
+                    />
+                </Flex>
+            ),
         });
     }
 

src/components/PDiskPopup/PDiskPopup.tsx

@@ -1,10 +1,4 @@
 .ydb-vdisk-info {
-    &__links {
-        display: flex;
-        flex-flow: row wrap;
-        gap: var(--g-spacing-2);
-    }
-
     &__title {
         display: flex;
         flex-direction: row;

src/components/VDiskInfo/VDiskInfo.scss

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {Flex} from '@gravity-ui/uikit';
+
 import {getVDiskPagePath} from '../../routes';
 import {valueIsDefined} from '../../utils';
 import {cn} from '../../utils/cn';
@@ -182,7 +184,11 @@ export function VDiskInfo<T extends PreparedVDisk>({
         if (links.length) {
             vdiskInfo.push({
                 label: vDiskInfoKeyset('links'),
-                value: <div className={b('links')}>{links}</div>,
+                value: (
+                    <Flex wrap="wrap" gap={2}>
+                        {links}
+                    </Flex>
+                ),
             });
         }
     }

src/components/VDiskInfo/VDiskInfo.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import {Label} from '@gravity-ui/uikit';
+import {Flex, Label} from '@gravity-ui/uikit';
 
+import {getVDiskPagePath} from '../../routes';
 import {selectNodesMap} from '../../store/reducers/nodesList';
 import {EFlag} from '../../types/api/enums';
 import {valueIsDefined} from '../../utils';
@@ -19,6 +20,7 @@ import {InternalLink} from '../InternalLink';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {preparePDiskData} from '../PDiskPopup/PDiskPopup';
 import {getVDiskLink} from '../VDisk/utils';
+import {vDiskInfoKeyset} from '../VDiskInfo/i18n';
 
 import './VDiskPopup.scss';
 
@@ -162,9 +164,23 @@ const prepareVDiskData = (data: PreparedVDisk, withDeveloperUILink?: boolean) =>
             vDiskSlotId: VDiskSlotId,
         });
 
+        const vDiskPagePath = getVDiskPagePath(VDiskSlotId, PDiskId, NodeId);
         vdiskData.push({
             label: 'Links',
-            value: <LinkWithIcon title={'Developer UI'} url={vDiskInternalViewerPath} />,
+            value: (
+                <Flex wrap="wrap" gap={2}>
+                    <LinkWithIcon
+                        key={vDiskPagePath}
+                        title={vDiskInfoKeyset('vdisk-page')}
+                        url={vDiskPagePath}
+                        external={false}
+                    />
+                    <LinkWithIcon
+                        title={vDiskInfoKeyset('developer-ui')}
+                        url={vDiskInternalViewerPath}
+                    />
+                </Flex>
+            ),
         });
     }