Add e2e tests for the host details view

test/e2e/cypress/fixtures/host-details/host_details.feature

@@ -0,0 +1,30 @@
+Feature: Host details view
+    This is where the user has a detailed view of the status of one specific host in the deployed SAP System
+
+    Background:
+        Given an healthy host within a SAP deployment with the following properties
+        # hostName: 'vmhdbprd01',
+        # sapSystem: 'HDP',
+        # clusterName: 'hana_cluster',
+        # resourceGroup: 'resourceGroupName',
+        And a Trento agent installed on it identified by id '9cd46919-5f19-59aa-993e-cf3736c71053'
+
+
+    Scenario: Detailed view of one specific host is available
+        When I navigate to a specific host ('/hosts/9cd46919-5f19-59aa-993e-cf3736c71053')
+        Then the displayed host should match the one I clicked
+
+    Scenario: Host details are available in the view
+        Given I am in the host details view ('/hosts/9cd46919-5f19-59aa-993e-cf3736c71053')
+        Then a link to a SAP system details view with SID equal to 'HDP' should be visible
+        And a link to a cluster details view with name `hana_cluster` should be under the cluster label
+        And one entry with ID '1154f7678ac587e5f0f242830a5201f1' should be present in the SAP instances list
+
+    Scenario: Cloud details are available in the view
+        Given I am in the host details view ('/hosts/9cd46919-5f19-59aa-993e-cf3736c71053')
+        Then the displayed details should include a VMName matching the hostname vmhdbprd01
+        And a Resource group named resourceGroupName
+
+    Scenario: Agent health matches the information resulted from a successful heartbeat
+        Given I am in the host details view ('/hosts/9cd46919-5f19-59aa-993e-cf3736c71053')
+        Then the displayed details should include a Trento Agent status labeled as 'running'

test/e2e/cypress/fixtures/host-details/selected_host.js

@@ -0,0 +1,9 @@
+export const selectedHost = {
+  agentId: "9cd46919-5f19-59aa-993e-cf3736c71053",
+  hostName: "vmhdbprd01",
+  sapSystem: "HDP",
+  clusterName: "hana_cluster",
+  resourceGroup: "resourceGroupName",
+  sapInstanceId: "1154f7678ac587e5f0f242830a5201f1",
+  clusterId: "9c832998801e28cd70ad77380e82a5c0",
+};

test/e2e/cypress/integration/host_details.js

@@ -0,0 +1,69 @@
+import { selectedHost } from "../fixtures/host-details/selected_host";
+
+context("Host Details", () => {
+  before(() => {
+    cy.resetDatabase();
+    cy.loadScenario("healthy-27-node-SAP-cluster");
+
+    cy.task("startAgentHeartbeat", [selectedHost.agentId]);
+
+    cy.visit("/");
+    cy.navigateToItem("Hosts");
+    cy.intercept("GET", `/hosts/${selectedHost.agentId}`).as("getHostDetails");
+    cy.get(`#host-${selectedHost.hostName} > .tn-hostname > a`).click();
+    cy.wait("@getHostDetails");
+    cy.url().should("include", `/hosts/${selectedHost.agentId}`);
+  });
+
+  describe("Detailed view for a specific host should be available", () => {
+    it("should show the host I clicked on in the overview", () => {
+      cy.get(".tn-host-details-container .tn-hostname").should(
+        "contain",
+        selectedHost.hostName
+      );
+    });
+  });
+
+  describe("SAP instances for this host should be displayed", () => {
+    it(`should show a link to the SAP System details view for ${selectedHost.sapSystem}`, () => {
+      cy.get(":nth-child(2) > .text-muted > a")
+        .should("contain", selectedHost.sapSystem)
+        .invoke("attr", "href")
+        .should("include", `/sapsystems/${selectedHost.sapInstanceId}`);
+    });
+    it(`should show SAP instance with ID ${selectedHost.sapInstanceId}`, () => {
+      cy.get(":nth-child(11) > .table > tbody > tr > :nth-child(1)").should(
+        "contain",
+        selectedHost.sapInstanceId
+      );
+    });
+  });
+
+  describe("Cluster details for this host should be displayed", () => {
+    it(`should show a link to the cluster details view for ${selectedHost.clusterName}`, () => {
+      cy.get(":nth-child(3) > .text-muted > a")
+        .should("contain", selectedHost.clusterName)
+        .invoke("attr", "href")
+        .should("include", `/clusters/${selectedHost.clusterId}`);
+    });
+  });
+
+  describe("Cloud details for this host should be displayed", () => {
+    it(`should show ${selectedHost.hostName} under the VM Name`, () => {
+      cy.get(
+        ":nth-child(5) > :nth-child(1) > .col-sm-12 > :nth-child(1) > :nth-child(2) > .text-muted"
+      ).should("contain", selectedHost.hostName);
+    });
+    it(`should show ${selectedHost.resourceGroup} under the Resource group label`, () => {
+      cy.get(
+        ":nth-child(5) > :nth-child(1) > .col-sm-12 > :nth-child(1) > :nth-child(3) > .text-muted"
+      ).should("contain", selectedHost.resourceGroup);
+    });
+  });
+
+  describe("Trento agent status should be 'running'", () => {
+    it("should show the status as 'running'", () => {
+      cy.get(".badge").should("contain", "running");
+    });
+  });
+});

web/templates/host.html.tmpl

@@ -6,10 +6,10 @@
         <div class="border-top mb-4">
             <div class="row">
                 <div class="col-sm-12">
-                    <div class="row mt-5 mb-5">
+                    <div class="row mt-5 mb-5 tn-host-details-container">
                       <div class="col-3">
                           <strong>Name:</strong><br>
-                          <span class="text-muted">{{ .Host.Name }}</span>
+                          <span class="text-muted tn-hostname">{{ .Host.Name }}</span>
                       </div>
                       <div class="col-3">
                           <strong>SAP Systems:</strong><br>