Display gcp metadata frontend (#662)

* Display gcp provider details in the frontend

* Add e2e tests to the gcp provider details view

.photofinish.toml

@@ -98,6 +98,10 @@ files = ["./test/fixtures/scenarios/healthy-27-node-SAP-cluster/9cd46919-5f19-59
 
 files = ["./test/fixtures/scenarios/host-details/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery_aws.json"]
 
+[host-details-gcp]
+
+files = ["./test/fixtures/scenarios/host-details/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery_gcp.json"]
+
 [host-details-unknown]
 
 files = ["./test/fixtures/scenarios/host-details/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery_unknown.json"]

assets/js/components/HostDetails/GcpDetails.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import ListView from '@components/ListView';
+
+const GcpDetails = ({ provider, provider_data }) => {
+  return (
+    <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
+      <ListView
+        className="grid-rows-2"
+        orientation="vertical"
+        rows={2}
+        data={[
+          {
+            title: 'Provider',
+            content: provider,
+            render: (content) => <p className="uppercase">{content}</p>,
+          },
+          { title: 'Machine type', content: provider_data?.machine_type },
+          { title: 'Instance name', content: provider_data?.instance_name },
+          { title: 'Disk number', content: provider_data?.disk_number },
+          { title: 'Project ID', content: provider_data?.project_id },
+          { title: 'Image', content: provider_data?.image },
+          { title: 'Zone', content: provider_data?.zone },
+          { title: 'Network', content: provider_data?.network },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default GcpDetails;

assets/js/components/HostDetails/ProviderDetails.jsx

@@ -3,13 +3,16 @@ import Pill from '@components/Pill';
 
 import AzureDetails from './AzureDetails';
 import AwsDetails from './AwsDetails';
+import GcpDetails from './GcpDetails';
 
 const ProviderDetails = ({ provider, provider_data }) => {
   switch (provider) {
     case 'azure':
       return <AzureDetails provider={provider} provider_data={provider_data} />;
     case 'aws':
       return <AwsDetails provider={provider} provider_data={provider_data} />;
+    case 'gcp':
+      return <GcpDetails provider={provider} provider_data={provider_data} />;
     default:
       return (
         <Pill className="bg-gray-200 text-gray-800 shadow">

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

@@ -30,6 +30,11 @@ Feature: Host details view
         And the host is running on AWS
         Then the displayed details should include all the correct AWS cloud metadata information
 
+    Scenario: GCP cloud details are available in the view
+        Given I am in the host details view ('/hosts/9cd46919-5f19-59aa-993e-cf3736c71053')
+        And the host is running on GCP
+        Then the displayed details should include all the correct GCP cloud metadata information
+
     Scenario: Provider details are not available
         Given I am in the host details view ('/hosts/9cd46919-5f19-59aa-993e-cf3736c71053')
         And the host is running on unknown provider platform

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

@@ -24,6 +24,16 @@ export const selectedHost = {
     amiId: 'ami-12345',
     vpcId: 'vpc-12345',
   },
+  gcpCloudDetails: {
+    provider: 'gcp',
+    diskNumber: 4,
+    machineType: 'n1-highmem-8',
+    instanceName: 'vmhana01',
+    projectId: '123456',
+    image: 'sles-15-sp1-sap-byos-v20220126',
+    zone: 'europe-west1-b',
+    network: 'network',
+  },
   sapInstance: {
     id: '6c9208eb-a5bb-57ef-be5c-6422dedab602',
     sid: 'HDP',

test/e2e/cypress/integration/host_details.js

@@ -129,6 +129,45 @@ context('Host Details', () => {
         .should('contain', selectedHost.awsCloudDetails.vpcId);
     });
 
+    it(`should show GCP cloud details correctly`, () => {
+      cy.loadScenario('host-details-gcp');
+
+      cy.get('div').should('contain', selectedHost.gcpCloudDetails.provider);
+
+      cy.get('div')
+        .contains(/^Provider$/)
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.provider);
+      cy.get('div')
+        .contains('Instance name')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.instanceName);
+      cy.get('div')
+        .contains('Project ID')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.projectId);
+      cy.get('div')
+        .contains('Zone')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.zone);
+      cy.get('div')
+        .contains('Machine type')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.machineType);
+      cy.get('div')
+        .contains('Disk number')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.diskNumber);
+      cy.get('div')
+        .contains('Image')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.image);
+      cy.get('div')
+        .contains('Network')
+        .next()
+        .should('contain', selectedHost.gcpCloudDetails.network);
+    });
+
     it(`should display provider not recognized message`, () => {
       cy.loadScenario('host-details-unknown');
 

test/fixtures/scenarios/host-details/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery_gcp.json

@@ -0,0 +1,16 @@
+{
+  "discovery_type": "cloud_discovery",
+  "agent_id": "9cd46919-5f19-59aa-993e-cf3736c71053",
+  "payload": {
+    "Provider": "gcp",
+    "Metadata": {
+      "disk_number": 4,
+      "image": "sles-15-sp1-sap-byos-v20220126",
+      "instance_name": "vmhana01",
+      "machine_type": "n1-highmem-8",
+      "network": "network",
+      "project_id": "123456",
+      "zone": "europe-west1-b"
+    }
+  }
+}