Cluster details updates (#2328)

* Change Node Details header

* Add top margin for subheaders and remove no longer needed button import

* Move stopped resources and always display even when empty

* Adjust test to match new name for header

* Style button as a link 

* Use new header prop in table component

* Add stopped resources test scenario for no stopped resources

assets/js/pages/ClusterDetails/AscsErsClusterDetails.jsx

@@ -260,14 +260,12 @@ function AscsErsClusterDetails({
         </div>
       </div>
 
-      {details && details.stopped_resources.length > 0 && (
-        <StoppedResources resources={details.stopped_resources} />
-      )}
-
       <div className="mt-2">
         <Table config={nodeDetailsConfig} data={currentSapSystem?.nodes} />
       </div>
 
+      <StoppedResources resources={details.stopped_resources} />
+
       <SBDDetails sbdDevices={details.sbd_devices} />
     </div>
   );

assets/js/pages/ClusterDetails/AttributesDetails.jsx

@@ -28,11 +28,16 @@ function AttributesDetails({ attributes, resources, title }) {
 
   return (
     <>
-      <Button type="primary" size="small" onClick={() => setModalOpen(true)}>
+      <Button
+        type="transparent"
+        className="text-jungle-green-500"
+        size="fit"
+        onClick={() => setModalOpen(true)}
+      >
         Details
       </Button>
       <Modal title={title} open={modalOpen} onClose={() => setModalOpen(false)}>
-        <h3 className="font-medium">Attributes</h3>
+        <h3 className="font-medium mt-6">Attributes</h3>
         <Table
           config={attributesTableConfig}
           data={Object.keys(attributes).map((key) => ({
@@ -41,7 +46,7 @@ function AttributesDetails({ attributes, resources, title }) {
           }))}
         />
 
-        <h3 className="font-medium">Resources</h3>
+        <h3 className="font-medium mt-6">Resources</h3>
         <Table config={resourcesTableConfig} data={resources} />
       </Modal>
     </>

assets/js/pages/ClusterDetails/HanaClusterDetails.jsx

@@ -194,10 +194,6 @@ function HanaClusterDetails({
         </div>
       </div>
 
-      {details && details.stopped_resources.length > 0 && (
-        <StoppedResources resources={details.stopped_resources} />
-      )}
-
       <h2 className="mt-8 text-2xl font-bold">Site details</h2>
       <div className="mt-2 tn-site-details">
         {sortBy(details.sites, 'name').map(
@@ -217,6 +213,8 @@ function HanaClusterDetails({
         <HanaClusterSite name="Other" nodes={unsitedNodes} />
       )}
 
+      <StoppedResources resources={details.stopped_resources} />
+
       <SBDDetails sbdDevices={details.sbd_devices} />
     </div>
   );

assets/js/pages/ClusterDetails/HanaClusterDetails.test.jsx

@@ -381,7 +381,7 @@ describe('HanaClusterDetails component', () => {
 
     await userEvent.click(screen.getAllByText('Details')[0]);
 
-    expect(screen.getByText('Site Details')).toBeInTheDocument();
+    expect(screen.getByText('Node Details')).toBeInTheDocument();
     expect(screen.getByText('Attributes')).toBeInTheDocument();
     expect(screen.getByText('Resources')).toBeInTheDocument();
 

assets/js/pages/ClusterDetails/HanaClusterSite.jsx

@@ -62,7 +62,7 @@ const siteDetailsConfig = {
         const { attributes, resources } = item;
         return (
           <AttributesDetails
-            title="Site Details"
+            title="Node Details"
             attributes={attributes}
             resources={resources}
           />
@@ -78,19 +78,22 @@ function HanaClusterSite({ name, nodes, state = null, srHealthState = null }) {
       key={name}
       className={`tn-site-details-${name} mt-4 bg-white rounded-lg`}
     >
-      <div className="flex space-x-2 px-4 pt-4">
-        {state && (
-          <span className="text-left">
-            <HealthIcon health={getSiteHealth(srHealthState)} centered />
-          </span>
-        )}
-        <h3 className="text-l font-bold tn-site-name">{name}</h3>
-        {srHealthState && <ReplicationStatusPill status={state} />}
-      </div>
       <Table
         className="tn-site-table"
         config={siteDetailsConfig}
         data={nodes}
+        withPadding={false}
+        header={
+          <div className="flex space-x-2 p-4">
+            {state && (
+              <span className="text-left">
+                <HealthIcon health={getSiteHealth(srHealthState)} centered />
+              </span>
+            )}
+            <h3 className="text-l font-bold tn-site-name">{name}</h3>
+            {srHealthState && <ReplicationStatusPill status={state} />}
+          </div>
+        }
       />
     </div>
   );

assets/js/pages/ClusterDetails/StoppedResources.jsx

@@ -4,16 +4,20 @@ import Pill from '@common/Pill';
 
 function StoppedResources({ resources }) {
   return (
-    <div className="mt-16">
+    <div className="mt-8">
       <div className="flex flex-direction-row">
         <h2 className="text-2xl font-bold self-center">Stopped resources</h2>
       </div>
       <div className="mt-2 space-x-2">
-        {resources.map(({ id }) => (
-          <Pill className="bg-gray-200 text-gray-800" key={id}>
-            {id}
-          </Pill>
-        ))}
+        {resources.length === 0 ? (
+          <p>No resources to display.</p>
+        ) : (
+          resources.map(({ id }) => (
+            <Pill className="bg-gray-200 text-gray-800" key={id}>
+              {id}
+            </Pill>
+          ))
+        )}
       </div>
     </div>
   );

assets/js/pages/ClusterDetails/StoppedResources.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import StoppedResources from './StoppedResources';
+
+it('should display a "No resources to display." message when there are no resources', async () => {
+  render(<StoppedResources resources={[]} />);
+
+  expect(screen.getByText('No resources to display.')).toBeInTheDocument();
+});