Add navigation to host check selection (#1658)

* Align cluster/host naming related to checks selection and actions * Add Checks related Call to actions in host detail * Host detail - Move exporters mapping to components in a separate variable
trento-project · Jul 25, 2023 · de63cb1 · de63cb1
1 parent 626b8b5
commit de63cb1
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 42 deletions.
diff --git a/assets/js/components/ClusterDetails/ClusterSettings.jsx b/assets/js/components/ClusterDetails/ClusterSettings.jsx
@@ -30,7 +30,7 @@ export function ClusterSettings() {
         Back to Cluster Details
       </BackButton>
       <PageHeader>
-        Cluster Settings for{' '}
+        Check Settings for{' '}
         <span className="font-bold">{getClusterName(cluster)}</span>
       </PageHeader>
       {cluster.provider === UNKNOWN_PROVIDER && (

diff --git a/assets/js/components/ClusterDetails/HanaClusterDetails.jsx b/assets/js/components/ClusterDetails/HanaClusterDetails.jsx
@@ -109,7 +109,7 @@ function HanaClusterDetails({
               onClick={() => navigate(`/clusters/${clusterID}/settings`)}
             >
               <EOS_SETTINGS className="inline-block fill-jungle-green-500" />{' '}
-              Settings
+              Check Selection
             </Button>
 
             <Button

diff --git a/assets/js/components/HostDetails/HostDetails.jsx b/assets/js/components/HostDetails/HostDetails.jsx
@@ -1,10 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
+import classNames from 'classnames';
+
+import { EOS_CLEAR_ALL, EOS_PLAY_CIRCLE, EOS_SETTINGS } from 'eos-icons-react';
 
 import { networkClient } from '@lib/network';
 import { agentVersionWarning } from '@lib/agent';
 
+import Button from '@components/Button';
+import TriggerChecksExecutionRequest from '@components/TriggerChecksExecutionRequest';
 import ListView from '@components/ListView';
 import Table from '@components/Table';
 import PageHeader from '@components/PageHeader';
@@ -30,6 +35,9 @@ import {
 
 function HostDetails() {
   const { hostID } = useParams();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   const host = useSelector(getHost(hostID));
   const cluster = useSelector(getClusterByHost(hostID));
   const sapSystems = useSelector(getInstancesOnHost(hostID));
@@ -40,9 +48,6 @@ function HostDetails() {
   const [exportersStatus, setExportersStatus] = useState([]);
   const [cleanUpModalOpen, setCleanUpModalOpen] = useState(false);
 
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-
   const cleanUpHost = ({ id, hostname }) => {
     setCleanUpModalOpen(false);
     dispatch(deregisterHost({ id, hostname, navigate }));
@@ -65,6 +70,18 @@ function HostDetails() {
 
   const versionWarningMessage = agentVersionWarning(host.agent_version);
 
+  const renderedExporters = Object.entries(exportersStatus).map(
+    ([exporterName, exporterStatus]) => (
+      <StatusPill
+        key={exporterName}
+        className="self-center ml-4 shadow"
+        heartbeat={exporterStatus}
+      >
+        {exporterName}
+      </StatusPill>
+    )
+  );
+
   return (
     <>
       <DeregistrationModal
@@ -79,38 +96,71 @@ function HostDetails() {
       />
       <div>
         <BackButton url="/hosts">Back to Hosts</BackButton>
-        <div className="flex">
-          <PageHeader>
-            Host Details: <span className="font-bold">{host.hostname}</span>
-          </PageHeader>
-          <StatusPill
-            className="self-center ml-4 shadow"
-            heartbeat={host.heartbeat}
-          >
-            Agent
-          </StatusPill>
-
-          {Object.entries(exportersStatus).map(
-            ([exporterName, exporterStatus]) => (
-              <StatusPill
-                key={exporterName}
-                className="self-center ml-4 shadow"
-                heartbeat={exporterStatus}
+        <div className="flex flex-wrap">
+          <div className="flex w-1/2 h-auto overflow-hidden overflow-ellipsis break-words">
+            <PageHeader>
+              Host Details: <span className="font-bold">{host.hostname}</span>
+            </PageHeader>
+          </div>
+          <div className="flex w-1/2 justify-end">
+            <div className="flex w-fit whitespace-nowrap">
+              {host.deregisterable && (
+                <CleanUpButton
+                  cleaning={host.deregistering}
+                  onClick={() => {
+                    setCleanUpModalOpen(true);
+                  }}
+                />
+              )}
+              <Button
+                type="primary-white"
+                className="inline-block mx-0.5 border-green-500 border"
+                size="small"
+                onClick={() => navigate(`/hosts/${hostID}/settings`)}
+              >
+                <EOS_SETTINGS className="inline-block fill-jungle-green-500" />{' '}
+                Check Selection
+              </Button>
+
+              <Button
+                type="primary-white"
+                className="mx-0.5 border-green-500 border disabled:bg-slate-50 disabled:text-slate-500 disabled:border-gray-400"
+                size="small"
+                onClick={() => navigate(`/hosts/${hostID}/executions/last`)}
+                disabled
+              >
+                <EOS_CLEAR_ALL
+                  className={classNames('inline-block ', {
+                    'fill-jungle-green-500': false,
+                    'fill-slate-500': true,
+                  })}
+                />{' '}
+                <span>Show Results</span>
+              </Button>
+
+              <TriggerChecksExecutionRequest
+                cssClasses="flex rounded relative ml-0.5 disabled:bg-gray-400 disabled:text-gray-200 disabled:border-gray-400"
+                disabled
               >
-                {exporterName}
-              </StatusPill>
-            )
-          )}
-          {host.deregisterable && (
-            <div className="ml-auto my-auto">
-              <CleanUpButton
-                cleaning={host.deregistering}
-                onClick={() => {
-                  setCleanUpModalOpen(true);
-                }}
-              />
+                <EOS_PLAY_CIRCLE
+                  className={classNames('inline-block mr-1', {
+                    'fill-jungle-green-500': false,
+                    'fill-gray-200': true,
+                  })}
+                />{' '}
+                <span>Start Execution</span>
+              </TriggerChecksExecutionRequest>
             </div>
-          )}
+          </div>
+          <div className="pb-3">
+            <StatusPill
+              className="self-center shadow"
+              heartbeat={host.heartbeat}
+            >
+              Agent
+            </StatusPill>
+            {renderedExporters}
+          </div>
         </div>
         {versionWarningMessage && (
           <WarningBanner>{versionWarningMessage}</WarningBanner>
@@ -128,7 +178,6 @@ function HostDetails() {
             ]}
           />
         </div>
-
         <div className="mt-8 bg-white shadow rounded-lg py-4 px-8">
           <iframe
             title="node-exporter chart"

diff --git a/assets/js/components/HostDetails/HostDetails.test.jsx b/assets/js/components/HostDetails/HostDetails.test.jsx
@@ -24,6 +24,31 @@ describe('HostDetails component', () => {
     axiosMock.reset();
   });
 
+  it('should show the Checks related action buttons', () => {
+    const host = hostFactory.build();
+    const { id: hostID } = host;
+    const state = {
+      ...defaultInitialState,
+      hostsList: {
+        hosts: [host],
+      },
+    };
+    const [StatefulHostDetails] = withState(<HostDetails />, state);
+
+    renderWithRouterMatch(StatefulHostDetails, {
+      path: '/hosts/:hostID',
+      route: `/hosts/${hostID}`,
+    });
+
+    expect(
+      screen.getByRole('button', { name: 'Check Selection' })
+    ).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Show Results' })).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Start Execution' })
+    ).toBeVisible();
+  });
+
   describe('agent version', () => {
     it('should not show any warning message if the agent version is correct', () => {
       const hosts = hostFactory.buildList(1, { agent_version: '2.0.0' });

diff --git a/test/e2e/cypress/e2e/hana_cluster_details.cy.js b/test/e2e/cypress/e2e/hana_cluster_details.cy.js
@@ -177,9 +177,9 @@ context('HANA cluster details', () => {
     });
   });
 
-  describe.skip('Settings should allow to enable checks from the checks catalog', () => {
+  describe.skip('Check Selection should allow to enable checks from the checks catalog', () => {
     it('should take me to the cluster settings when pressing the settings button', () => {
-      cy.get('button').contains('Settings').click();
+      cy.get('button').contains('Check Selection').click();
     });
 
     it('should include the relevant checks section', () => {
@@ -212,7 +212,7 @@ context('HANA cluster details', () => {
     });
 
     it(`should show a warning message in the check selection view`, () => {
-      cy.contains('button', 'Settings').click();
+      cy.contains('button', 'Check Selection').click();
       cy.get('[data-testid="warning-banner"]').contains(
         'The following catalog is valid for on-premise bare metal platforms.'
       );
@@ -233,7 +233,7 @@ context('HANA cluster details', () => {
     });
 
     it(`should show the default catalog`, () => {
-      cy.contains('button', 'Settings').click();
+      cy.contains('button', 'Check Selection').click();
       cy.contains('Corosync').click();
       cy.get('li').first().contains(5000);
     });
@@ -246,7 +246,7 @@ context('HANA cluster details', () => {
     });
 
     it(`should recognize the provider as vmware`, () => {
-      cy.contains('button', 'Settings').click();
+      cy.contains('button', 'Check Selection').click();
       cy.contains('VMware');
     });
   });
@@ -258,7 +258,7 @@ context('HANA cluster details', () => {
     });
 
     it(`should show the default catalog`, () => {
-      cy.contains('button', 'Settings').click();
+      cy.contains('button', 'Check Selection').click();
       cy.contains('Corosync').click();
       cy.get('li').first().contains(5000);
     });