fix(Healthcheck): separate issue location, increase gaps (#2837)

Author: artemmufazalov

src/containers/Tenant/Healthcheck/Healthcheck.scss

@@ -53,7 +53,7 @@
         }
     }
     &__issue-content {
-        --g-definition-list-item-gap: var(--g-spacing-2);
+        --g-definition-list-item-gap: var(--g-spacing-3);
         width: 100%;
     }
     &__issue-divider {

src/containers/Tenant/Healthcheck/Healthcheck.tsx

@@ -85,7 +85,7 @@ export function Healthcheck({
         return (
             <Flex direction="column" grow={1}>
                 {renderControls()}
-                <Flex direction="column" gap={3} grow={1} className={b('issues')}>
+                <Flex direction="column" gap={4} grow={1} className={b('issues')}>
                     <Issues issues={leavesIssues} />
                 </Flex>
             </Flex>

src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx

@@ -58,7 +58,7 @@ export function ComputeLocation({location, hiddenFields = []}: ComputeLocationPr
 
     return (
         <SectionWithTitle title={i18n('label_compute_location')} titleVariant="subheader-2">
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap={3}>
                 {fields.map((field) => LocationFieldRenderer[field](location))}
             </Flex>
         </SectionWithTitle>

src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/HealthcheckIssueDetails.tsx

@@ -1,21 +1,17 @@
 import React from 'react';
 
 import {Flex} from '@gravity-ui/uikit';
-import {isEmpty} from 'lodash';
 
 import {InternalLink} from '../../../../../components/InternalLink';
 import {getTabletPagePath} from '../../../../../routes';
 import type {IssuesTree} from '../../../../../store/reducers/healthcheckInfo/types';
-import type {Location} from '../../../../../types/api/healthcheck';
 import {useTenantQueryParams} from '../../../useTenantQueryParams';
 import i18n from '../../i18n';
 
-import {ComputeLocation} from './ComputeLocation';
 import type {LocationFieldCompute} from './ComputeLocation';
-import {NodeInfo} from './NodeInfo';
+import {IssueLocation} from './IssueLocation';
 import type {LocationFieldStorage} from './StorageLocation';
-import {StorageLocation} from './StorageLocation';
-import {IdList, LocationDetails, SectionWithTitle} from './utils';
+import {IdList, LocationDetails} from './utils';
 
 interface HealthcheckIssueDetailsProps {
     issue: IssuesTree;
@@ -83,42 +79,11 @@ export function IssueDetails({issue}: HealthcheckIssueDetailsProps) {
                 fields={detailsFields}
                 titleVariant="subheader-2"
             />
-            <StorageLocation location={location?.storage} hiddenFields={hiddenStorageFields} />
-            <ComputeLocation location={location?.compute} hiddenFields={hiddenComputeFields} />
-            <NodeLocation location={location?.node} />
-            <PeerLocation location={location?.peer} />
+            <IssueLocation
+                location={location}
+                hiddenStorageFields={hiddenStorageFields}
+                hiddenComputeFields={hiddenComputeFields}
+            />
         </Flex>
     );
 }
-
-interface NodeLocationProps {
-    location: Location['node'];
-}
-
-function NodeLocation({location}: NodeLocationProps) {
-    if (!location || isEmpty(location)) {
-        return null;
-    }
-
-    return (
-        <SectionWithTitle title={i18n('label_node_location')}>
-            <NodeInfo node={location} />
-        </SectionWithTitle>
-    );
-}
-
-interface PeerLocationProps {
-    location: Location['peer'];
-}
-
-function PeerLocation({location}: PeerLocationProps) {
-    if (!location || isEmpty(location)) {
-        return null;
-    }
-
-    return (
-        <SectionWithTitle title={i18n('label_peer_location')}>
-            <NodeInfo node={location} />
-        </SectionWithTitle>
-    );
-}

src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/IssueLocation.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {isEmpty} from 'lodash';
+
+import type {Location} from '../../../../../types/api/healthcheck';
+import i18n from '../../i18n';
+
+import type {LocationFieldCompute} from './ComputeLocation';
+import {ComputeLocation} from './ComputeLocation';
+import {NodeInfo} from './NodeInfo';
+import type {LocationFieldStorage} from './StorageLocation';
+import {StorageLocation} from './StorageLocation';
+import {SectionWithTitle} from './utils';
+
+interface IssueLocationProps {
+    location?: Location;
+    hiddenStorageFields?: LocationFieldStorage[];
+    hiddenComputeFields?: LocationFieldCompute[];
+}
+
+export function IssueLocation({
+    location,
+    hiddenStorageFields,
+    hiddenComputeFields,
+}: IssueLocationProps) {
+    return (
+        <React.Fragment>
+            <StorageLocation location={location?.storage} hiddenFields={hiddenStorageFields} />
+            <ComputeLocation location={location?.compute} hiddenFields={hiddenComputeFields} />
+            <NodeLocation location={location?.node} />
+            <PeerLocation location={location?.peer} />
+        </React.Fragment>
+    );
+}
+
+interface NodeLocationProps {
+    location: Location['node'];
+}
+
+function NodeLocation({location}: NodeLocationProps) {
+    if (!location || isEmpty(location)) {
+        return null;
+    }
+
+    return (
+        <SectionWithTitle title={i18n('label_node_location')}>
+            <NodeInfo node={location} />
+        </SectionWithTitle>
+    );
+}
+
+interface PeerLocationProps {
+    location: Location['peer'];
+}
+
+function PeerLocation({location}: PeerLocationProps) {
+    if (!location || isEmpty(location)) {
+        return null;
+    }
+
+    return (
+        <SectionWithTitle title={i18n('label_peer_location')}>
+            <NodeInfo node={location} />
+        </SectionWithTitle>
+    );
+}

src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx

@@ -65,7 +65,7 @@ export function StorageLocation({location, hiddenFields = []}: StorageLocationPr
 
     return (
         <SectionWithTitle title={i18n('label_storage_location')} titleVariant="subheader-2">
-            <Flex direction="column" gap={2}>
+            <Flex direction="column" gap={3}>
                 {fields.map((field) => LocationFieldRenderer[field](location))}
             </Flex>
         </SectionWithTitle>

src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/utils.tsx

@@ -14,7 +14,7 @@ export function SectionWithTitle({
     title,
     children,
     titleVariant = 'body-2',
-    gap = 2,
+    gap = 3,
 }: SectionWithTitleProps) {
     return (
         <Flex direction="column" gap={gap}>