Skip to content

Commit

Permalink
Display aws metadata frontend (#650)
Browse files Browse the repository at this point in the history
* Implement the AWS cloud details frontend view

* Add e2e AWS cloud details tests

* Rename to provider details and handle unknown case

* Make aws table acronyms uppercase
  • Loading branch information
arbulu89 authored Jun 10, 2022
1 parent e7c07e1 commit af1983a
Show file tree
Hide file tree
Showing 10 changed files with 228 additions and 41 deletions.
14 changes: 14 additions & 0 deletions .photofinish.toml
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
directories = ["./test/fixtures/scenarios/healthy-27-node-SAP-cluster"]

[aws-landscape]

directories = ["./test/fixtures/scenarios/aws-landscape"]

[gcp-landscape]

directories = ["./test/fixtures/scenarios/gcp-landscape"]

[sap-system-detail-GRAY]
Expand Down Expand Up @@ -87,3 +89,15 @@ files = ["./test/fixtures/scenarios/clusters-overview/13e8c25c-3180-5a9a-95c8-51
[cluster-unnamed]

files = ["./test/fixtures/scenarios/clusters-overview/13e8c25c-3180-5a9a-95c8-51ec38e50cfc_ha_cluster_discovery_unnamed.json"]

[host-details-azure]

files = ["./test/fixtures/scenarios/healthy-27-node-SAP-cluster/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery.json"]

[host-details-aws]

files = ["./test/fixtures/scenarios/host-details/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery_aws.json"]

[host-details-unknown]

files = ["./test/fixtures/scenarios/host-details/9cd46919-5f19-59aa-993e-cf3736c71053_cloud_discovery_unknown.json"]
40 changes: 40 additions & 0 deletions assets/js/components/HostDetails/AwsDetails.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from 'react';

import ListView from '@components/ListView';

const AwsDetails = ({ 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: 'Instance type', content: provider_data?.instance_type },
{ title: 'Instance ID', content: provider_data?.instance_id },
{
title: 'Data disk number',
content: provider_data?.data_disk_number,
},
{
title: 'Account ID',
content: provider_data?.account_id,
},
{ title: 'AMI ID', content: provider_data?.ami_id },
{
title: 'Region',
content: `${provider_data?.region} (${provider_data?.availability_zone})`,
},
{ title: 'VPC ID', content: provider_data?.vpc_id },
]}
/>
</div>
);
};

export default AwsDetails;
37 changes: 37 additions & 0 deletions assets/js/components/HostDetails/AzureDetails.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';

import ListView from '@components/ListView';

const AzureDetails = ({ 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="capitalize">{content}</p>,
},
{ title: 'VM Size', content: provider_data?.vm_size },
{ title: 'VM Name', content: provider_data?.vm_name },
{
title: 'Data disk number',
content: provider_data?.data_disk_number,
},
{
title: 'Resource group',
content: provider_data?.resource_group,
},
{ title: 'Offer', content: provider_data?.offer },
{ title: 'Location', content: provider_data?.location },
{ title: 'SKU', content: provider_data?.sku },
]}
/>
</div>
);
};

export default AzureDetails;
34 changes: 6 additions & 28 deletions assets/js/components/HostDetails/HostDetails.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ListView from '@components/ListView';
import Table from '@components/Table';

import StatusPill from './StatusPill';
import ProviderDetails from './ProviderDetails';

import ClusterLink from '@components/ClusterLink';

Expand Down Expand Up @@ -103,35 +104,12 @@ const HostDetails = () => {

<div className="mt-16">
<div className="mb-4">
<h2 className="text-2xl font-bold">Cloud details</h2>
</div>
<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: host.provider,
render: (content) => <p className="capitalize">{content}</p>,
},
{ title: 'VM Size', content: host.provider_data?.vm_size },
{ title: 'VM Name', content: host.provider_data?.vm_name },
{
title: 'Data disk number',
content: host.provider_data?.data_disk_number,
},
{
title: 'Resource group',
content: host.provider_data?.resource_group,
},
{ title: 'Offer', content: host.provider_data?.offer },
{ title: 'Location', content: host.provider_data?.location },
{ title: 'SKU', content: host.provider_data?.sku },
]}
/>
<h2 className="text-2xl font-bold">Provider details</h2>
</div>
<ProviderDetails
provider={host.provider}
provider_data={host.provider_data}
/>
</div>

<div className="mt-8">
Expand Down
22 changes: 22 additions & 0 deletions assets/js/components/HostDetails/ProviderDetails.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';
import Pill from '@components/Pill';

import AzureDetails from './AzureDetails';
import AwsDetails from './AwsDetails';

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} />;
default:
return (
<Pill className="bg-gray-200 text-gray-800 shadow">
Provider not recognized
</Pill>
);
}
};

export default ProviderDetails;
15 changes: 13 additions & 2 deletions test/e2e/cypress/fixtures/host-details/host_details.feature
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,20 @@ Feature: Host details view
And a link to a cluster details view with name `hana_cluster_3` should be under the cluster label
And one entry with ID '6c9208eb-a5bb-57ef-be5c-6422dedab602' should be present in the SAP instances list

Scenario: Cloud details are available in the view
Scenario: Azure 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 all the correct cloud metadata information
And the host is running on Azure
Then the displayed details should include all the correct Azure cloud metadata information

Scenario: AWS 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 AWS
Then the displayed details should include all the correct AWS 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
Then provider not recognized message is displayed

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')
Expand Down
12 changes: 11 additions & 1 deletion test/e2e/cypress/fixtures/host-details/selected_host.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const selectedHost = {
hostName: 'vmhdbprd01',
clusterName: 'hana_cluster_3',
clusterId: '469e7be5-4e20-5007-b044-c6f540a87493',
cloudDetails: {
azureCloudDetails: {
provider: 'azure',
vmName: 'vmhdbprd01',
resourceGroup: 'resourceGroupName',
Expand All @@ -14,6 +14,16 @@ export const selectedHost = {
offer: 'sles-sap-15-sp3-byos',
sku: 'gen2',
},
awsCloudDetails: {
provider: 'aws',
instanceId: 'i-12345',
accountId: '123456',
region: 'eu-west-1 (eu-west-1a)',
instanceType: 't3.micro',
dataDiskNumber: '1',
amiId: 'ami-12345',
vpcId: 'vpc-12345',
},
sapInstance: {
id: '6c9208eb-a5bb-57ef-be5c-6422dedab602',
sid: 'HDP',
Expand Down
70 changes: 60 additions & 10 deletions test/e2e/cypress/integration/host_details.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,39 +50,89 @@ context('Host Details', () => {
});

describe('Cloud details for this host should be displayed', () => {
it(`should show the cloud details correctly`, () => {
// Restore host provider data
after(() => {
cy.loadScenario('host-details-azure');
});

it(`should show Azure cloud details correctly`, () => {
cy.get('div')
.contains('Provider')
.contains(/^Provider$/)
.next()
.should('contain', selectedHost.cloudDetails.provider);
.should('contain', selectedHost.azureCloudDetails.provider);
cy.get('div')
.contains('VM Name')
.next()
.should('contain', selectedHost.cloudDetails.vmName);
.should('contain', selectedHost.azureCloudDetails.vmName);
cy.get('div')
.contains('Resource group')
.next()
.should('contain', selectedHost.cloudDetails.resourceGroup);
.should('contain', selectedHost.azureCloudDetails.resourceGroup);
cy.get('div')
.contains('Location')
.next()
.should('contain', selectedHost.cloudDetails.location);
.should('contain', selectedHost.azureCloudDetails.location);
cy.get('div')
.contains('VM Size')
.next()
.should('contain', selectedHost.cloudDetails.vmSize);
.should('contain', selectedHost.azureCloudDetails.vmSize);
cy.get('div')
.contains('Data disk number')
.next()
.should('contain', selectedHost.cloudDetails.dataDiskNumber);
.should('contain', selectedHost.azureCloudDetails.dataDiskNumber);
cy.get('div')
.contains('Offer')
.next()
.should('contain', selectedHost.cloudDetails.offer);
.should('contain', selectedHost.azureCloudDetails.offer);
cy.get('div')
.contains('SKU')
.next()
.should('contain', selectedHost.cloudDetails.sku);
.should('contain', selectedHost.azureCloudDetails.sku);
});

it(`should show AWS cloud details correctly`, () => {
cy.loadScenario('host-details-aws');

cy.get('div').should('contain', selectedHost.awsCloudDetails.provider);

cy.get('div')
.contains(/^Provider$/)
.next()
.should('contain', selectedHost.awsCloudDetails.provider);
cy.get('div')
.contains('Instance ID')
.next()
.should('contain', selectedHost.awsCloudDetails.instanceId);
cy.get('div')
.contains('Account ID')
.next()
.should('contain', selectedHost.awsCloudDetails.accountId);
cy.get('div')
.contains('Region')
.next()
.should('contain', selectedHost.awsCloudDetails.region);
cy.get('div')
.contains('Instance type')
.next()
.should('contain', selectedHost.awsCloudDetails.instanceType);
cy.get('div')
.contains('Data disk number')
.next()
.should('contain', selectedHost.awsCloudDetails.dataDiskNumber);
cy.get('div')
.contains('AMI ID')
.next()
.should('contain', selectedHost.awsCloudDetails.amiId);
cy.get('div')
.contains('VPC ID')
.next()
.should('contain', selectedHost.awsCloudDetails.vpcId);
});

it(`should display provider not recognized message`, () => {
cy.loadScenario('host-details-unknown');

cy.get('div').should('contain', 'Provider not recognized');
});
});

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"discovery_type": "cloud_discovery",
"agent_id": "9cd46919-5f19-59aa-993e-cf3736c71053",
"payload": {
"Provider": "aws",
"Metadata": {
"account_id": "123456",
"ami_id": "ami-12345",
"availability_zone": "eu-west-1a",
"data_disk_number": 1,
"instance_id": "i-12345",
"instance_type": "t3.micro",
"region": "eu-west-1",
"vpc_id": "vpc-12345"
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"discovery_type": "cloud_discovery",
"agent_id": "9cd46919-5f19-59aa-993e-cf3736c71053",
"payload": {
"Provider": "unknown",
"Metadata": {}
}
}

0 comments on commit af1983a

Please sign in to comment.