fix: design review

Raubzeug · Raubzeug · commit def76ea19e17 · 2025-06-03T15:11:27.000+03:00
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssue.tsx
@@ -54,7 +54,12 @@ export function HealthcheckIssue({issue}: HealthcheckIssueProps) {
                                         </div>
                                     )}
                                 </Flex>
-                                <Flex wrap="nowrap" gap={2}>
+                                <Flex
+                                    wrap="nowrap"
+                                    gap={2}
+                                    alignItems="center"
+                                    height="max-content"
+                                >
                                     <Divider
                                         className={b('issue-divider')}
                                         orientation="vertical"
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/ComputeLocation.tsx
@@ -57,7 +57,7 @@ export function ComputeLocation({location, hiddenFields = []}: ComputeLocationPr
     }
 
     return (
-        <SectionWithTitle title={i18n('label_compute_location')}>
+        <SectionWithTitle title={i18n('label_compute_location')} titleVariant="subheader-2">
             <Flex direction="column" gap={2}>
                 {fields.map((field) => LocationFieldRenderer[field](location))}
             </Flex>
@@ -79,7 +79,6 @@ function TabletInfo({location}: ComputeSectionProps) {
 
     return (
         <LocationDetails
-            title={i18n('label_tablet')}
             fields={[
                 {
                     value: tablet.id?.length ? (
@@ -110,7 +109,6 @@ function SchemaInfo({location}: ComputeSectionProps) {
 
     return (
         <LocationDetails
-            title={i18n('label_schema')}
             fields={[
                 {value: schema.type, title: i18n('label_schema-type')},
                 {value: schema.path, title: i18n('label_schema-path')},
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/HealthcheckIssueDetails.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/HealthcheckIssueDetails.tsx
@@ -34,10 +34,17 @@ export function IssueDetails({issue}: HealthcheckIssueDetailsProps) {
         if (issue.type === 'STORAGE_POOL') {
             fields.push({
                 value: issue.location?.storage?.pool?.name,
-                title: `${i18n('label_pool')} ${i18n('label_pool-name')}`,
+                title: i18n('label_pool-name'),
             });
             hiddenStorageFields.push('pool');
         }
+        if (issue.type === 'COMPUTE_POOL') {
+            fields.push({
+                value: issue.location?.compute?.pool?.name,
+                title: i18n('label_pool-name'),
+            });
+            hiddenComputeFields.push('pool');
+        }
         if (issue.type === 'TABLET') {
             const tablet = issue.location?.compute?.tablet;
             fields.push(
@@ -52,15 +59,15 @@ export function IssueDetails({issue}: HealthcheckIssueDetailsProps) {
                             )}
                         />
                     ) : undefined,
-                    title: `${i18n('label_tablet')} ${i18n('label_tablet-id')}`,
+                    title: i18n('label_tablet-id'),
                 },
                 {
                     value: tablet?.type,
-                    title: `${i18n('label_tablet')} ${i18n('label_tablet-type')}`,
+                    title: i18n('label_tablet-type'),
                 },
                 {
                     value: tablet?.count,
-                    title: `${i18n('label_tablet')} ${i18n('label_tablet-count')}`,
+                    title: i18n('label_tablet-count'),
                 },
             );
             hiddenComputeFields.push('tablet');
@@ -70,35 +77,19 @@ export function IssueDetails({issue}: HealthcheckIssueDetailsProps) {
 
     return (
         <Flex direction="column" gap={4}>
-            <LocationDetails title={i18n('label_details')} fields={detailsFields} />
-            <SectionWithTitle titleVariant="subheader-2" title={i18n('label_location')} gap={3}>
-                <StorageLocation location={location.storage} hiddenFields={hiddenStorageFields} />
-                <ComputeLocation location={location.compute} hiddenFields={hiddenComputeFields} />
-                <DatabaseLocation location={location.database} />
-                <NodeLocation location={location.node} />
-                <PeerLocation location={location.peer} />
-            </SectionWithTitle>
+            <LocationDetails
+                title={i18n('label_details')}
+                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} />
         </Flex>
     );
 }
 
-interface DatabaseLocationProps {
-    location: Location['database'];
-}
-
-function DatabaseLocation({location}: DatabaseLocationProps) {
-    if (!location || !location.name) {
-        return null;
-    }
-
-    return (
-        <LocationDetails
-            title={i18n('label_database_location')}
-            fields={[{value: location.name, title: i18n('label_database')}]}
-        />
-    );
-}
-
 interface NodeLocationProps {
     location: Location['node'];
 }
@@ -126,7 +117,7 @@ function PeerLocation({location}: PeerLocationProps) {
 
     return (
         <SectionWithTitle title={i18n('label_peer_location')}>
-            <NodeInfo node={location} title={i18n('label_peer')} />
+            <NodeInfo node={location} />
         </SectionWithTitle>
     );
 }
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/NodeInfo.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/NodeInfo.tsx
@@ -11,7 +11,7 @@ interface NodeInfoProps {
     title?: string;
 }
 
-export function NodeInfo({node, title = i18n('label_node')}: NodeInfoProps) {
+export function NodeInfo({node, title}: NodeInfoProps) {
     const {database} = useTenantQueryParams();
     if (!node) {
         return null;
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/PoolInfo.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/PoolInfo.tsx
@@ -15,10 +15,5 @@ export function PoolInfo({location}: PoolInfoProps) {
         return null;
     }
 
-    return (
-        <LocationDetails
-            title={i18n('label_pool')}
-            fields={[{value: name, title: i18n('label_pool-name')}]}
-        />
-    );
+    return <LocationDetails fields={[{value: name, title: i18n('label_pool-name')}]} />;
 }
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/StorageLocation.tsx
@@ -63,7 +63,7 @@ export function StorageLocation({location, hiddenFields = []}: StorageLocationPr
     }
 
     return (
-        <SectionWithTitle title={i18n('label_storage_location')}>
+        <SectionWithTitle title={i18n('label_storage_location')} titleVariant="subheader-2">
             <Flex direction="column" gap={2}>
                 {fields.map((field) => LocationFieldRenderer[field](location))}
             </Flex>
@@ -87,7 +87,6 @@ function GroupInfo({location}: StorageSectionProps) {
 
     return (
         <LocationDetails
-            title={i18n('label_group')}
             fields={[
                 {
                     value: ids?.length ? <IdList ids={ids} /> : undefined,
@@ -111,7 +110,6 @@ function VDiskInfo({location}: StorageSectionProps) {
 
     return (
         <LocationDetails
-            title={i18n('label_vdisk')}
             fields={[
                 {
                     value: ids?.length ? (
@@ -148,7 +146,6 @@ function PDiskInfo({location}: StorageSectionProps) {
     return pdisk.map((el: {id: string; path: string}) => (
         <LocationDetails
             key={el.id}
-            title={i18n('label_pdisk')}
             fields={[
                 {
                     value:
diff --git a/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/utils.tsx b/src/containers/Tenant/Healthcheck/components/HealthcheckIssueDetails/utils.tsx
@@ -27,17 +27,18 @@ export function SectionWithTitle({
 interface LocationDetailsProps {
     title?: string;
     fields: {value?: React.ReactNode; title: string; copy?: string}[];
+    titleVariant?: TextProps['variant'];
 }
 
-export function LocationDetails({title, fields}: LocationDetailsProps) {
+export function LocationDetails({title, fields, titleVariant}: LocationDetailsProps) {
     const filteredFields = fields.filter((f) => f.value);
 
     if (filteredFields.length === 0) {
         return null;
     }
 
     return (
-        <SectionWithTitle title={title}>
+        <SectionWithTitle title={title} titleVariant={titleVariant}>
             <DefinitionList nameMaxWidth={200}>
                 {filteredFields.map((field) => (
                     <DefinitionList.Item name={field.title} key={field.title} copyText={field.copy}>
diff --git a/src/containers/Tenant/Healthcheck/i18n/en.json b/src/containers/Tenant/Healthcheck/i18n/en.json
@@ -20,33 +20,22 @@
   "label_no-issues": "No issues",
   "description_no-issues": "Here you will see issues that require your attention",
   "label_details": "Details",
-  "label_location": "Location",
   "label_storage_location": "Storage Location",
   "label_compute_location": "Compute Location",
-  "label_database_location": "Database Location",
-  "label_node": "Node",
-  "label_pool": "Pool",
-  "label_group": "Group",
-  "label_vdisk": "VDisk",
-  "label_pdisk": "PDisk",
-  "label_tablet": "Tablet",
-  "label_schema": "Schema",
-  "label_database": "Database",
   "label_description": "Description",
-  "label_node-id": "ID",
-  "label_node-host": "Host",
-  "label_node-port": "Port",
-  "label_pool-name": "Name",
-  "label_tablet-id": "ID",
-  "label_tablet-type": "Type",
-  "label_tablet-count": "Count",
-  "label_schema-type": "Type",
-  "label_schema-path": "Path",
-  "label_group-id": "ID",
-  "label_vdisk-id": "ID",
-  "label_pdisk-id": "ID",
-  "label_pdisk-path": "Path",
-  "label_peer": "Peer Node",
+  "label_node-id": "Node ID",
+  "label_node-host": "Node Host",
+  "label_node-port": "Node Port",
+  "label_pool-name": "Pool Name",
+  "label_tablet-id": "Tablet ID",
+  "label_tablet-type": "Tablet Type",
+  "label_tablet-count": "Tablets Count",
+  "label_schema-type": "Schema Type",
+  "label_schema-path": "Schema Path",
+  "label_group-id": "Group ID",
+  "label_vdisk-id": "VDisk ID",
+  "label_pdisk-id": "Pdisk ID",
+  "label_pdisk-path": "PDisk Path",
   "label_node_location": "Node Location",
   "label_peer_location": "Peer Node Location"
 }

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ interface NodeInfoProps {`
`11`	`11`	`title?: string;`
`12`	`12`	`}`
`13`	`13`
`14`		`-export function NodeInfo({node, title = i18n('label_node')}: NodeInfoProps) {`
	`14`	`+export function NodeInfo({node, title}: NodeInfoProps) {`
`15`	`15`	`const {database} = useTenantQueryParams();`
`16`	`16`	`if (!node) {`
`17`	`17`	`return null;`
Original file line number	Diff line number	Diff line change
`@@ -15,10 +15,5 @@ export function PoolInfo({location}: PoolInfoProps) {`
`15`	`15`	`return null;`
`16`	`16`	`}`
`17`	`17`
`18`		`- return (`
`19`		`- <LocationDetails`
`20`		`- title={i18n('label_pool')}`
`21`		`- fields={[{value: name, title: i18n('label_pool-name')}]}`
`22`		`- />`
`23`		`- );`
	`18`	`+ return <LocationDetails fields={[{value: name, title: i18n('label_pool-name')}]} />;`
`24`	`19`	`}`