From ba39c7eec50b17a36972a93723f21375de0c7732 Mon Sep 17 00:00:00 2001
From: mufazalov <mufazalov@yandex-team.ru>
Date: Thu, 4 Sep 2025 16:23:44 +0300
Subject: [PATCH] fix(Healthcheck): separate issue location, increase gaps

---
 .../Tenant/Healthcheck/Healthcheck.scss       |  2 +-
 .../Tenant/Healthcheck/Healthcheck.tsx        |  2 +-
 .../ComputeLocation.tsx                       |  2 +-
 .../HealthcheckIssueDetails.tsx               | 49 ++------------
 .../HealthcheckIssueDetails/IssueLocation.tsx | 66 +++++++++++++++++++
 .../StorageLocation.tsx                       |  2 +-
 .../HealthcheckIssueDetails/utils.tsx         |  2 +-
 7 files changed, 78 insertions(+), 47 deletions(-)
 create mode 100644 src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/IssueLocation.tsx

diff --git a/src/containers/Tenant/Healthcheck/Healthcheck.scss b/src/containers/Tenant/Healthcheck/Healthcheck.scss
index 3b5b58f9f6..fddc182c5c 100644
--- a/src/containers/Tenant/Healthcheck/Healthcheck.scss
+++ b/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 {
diff --git a/src/containers/Tenant/Healthcheck/Healthcheck.tsx b/src/containers/Tenant/Healthcheck/Healthcheck.tsx
index f777128c4e..b8b041ee3a 100644
--- a/src/containers/Tenant/Healthcheck/Healthcheck.tsx
+++ b/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>
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx
index 5daf64f53b..794c2ed150 100644
--- a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx
+++ b/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>
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/HealthcheckIssueDetails.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/HealthcheckIssueDetails.tsx
index e3f717d132..18f9fa0d06 100644
--- a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/HealthcheckIssueDetails.tsx
+++ b/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>
-    );
-}
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/IssueLocation.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/IssueLocation.tsx
new file mode 100644
index 0000000000..07e9e27ab6
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx
index cc17667a65..69c0bf7c18 100644
--- a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx
+++ b/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>
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/utils.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/utils.tsx
index a9bcc0a32e..aab3da245a 100644
--- a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/utils.tsx
+++ b/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}>