Add provider icon host views

assets/js/components/ClusterDetails/ClusterDetails.jsx

@@ -9,6 +9,7 @@ import Pill from '@components/Pill';
 import Table from '@components/Table';
 import Tooltip from '@components/Tooltip';
 import TriggerChecksExecutionRequest from '@components/TriggerChecksExecutionRequest';
+import ProviderLabel from '@components/ProviderLabel';
 
 import { groupBy } from '@lib/lists';
 
@@ -21,7 +22,6 @@ import classNames from 'classnames';
 import ChecksResultOverview from '@components/ClusterDetails/ChecksResultOverview';
 import { useChecksResult } from '@components/ClusterDetails/hooks';
 import SiteDetails from './SiteDetails';
-import ProviderLabel from './ProviderLabel';
 
 export const truncatedClusterNameClasses = classNames(
   'font-bold truncate w-60 inline-block align-top'

assets/js/components/ClusterDetails/ClusterDetailsNew.jsx

@@ -13,13 +13,13 @@ import Tooltip from '@components/Tooltip';
 import TriggerChecksExecutionRequest from '@components/TriggerChecksExecutionRequest';
 import HostLink from '@components/HostLink';
 import ChecksResultOverviewNew from '@components/ClusterDetails/ChecksResultOverviewNew';
+import ProviderLabel from '@components/ProviderLabel';
 import { getClusterName } from '@components/ClusterLink';
 import { EOS_SETTINGS, EOS_CLEAR_ALL, EOS_PLAY_CIRCLE } from 'eos-icons-react';
 
 import { getCluster } from '@state/selectors';
 import { updateLastExecution } from '@state/actions/lastExecutions';
 import { getLastExecution } from '@state/selectors/lastExecutions';
-import ProviderLabel from './ProviderLabel';
 import SiteDetails from './SiteDetails';
 
 export const truncatedClusterNameClasses = classNames(

assets/js/components/ClusterDetails/ClusterInfoBox.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import ListView from '@components/ListView';
-import ProviderLabel from './ProviderLabel';
+import ProviderLabel from '@components/ProviderLabel';
 
 const haScenarioToString = {
   hana_scale_up: 'HANA scale-up',

assets/js/components/HostDetails/ProviderDetails.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import classNames from 'classnames';
 import Pill from '@components/Pill';
 import ListView from '@components/ListView';
+import ProviderLabel from '@components/ProviderLabel';
 
 function ProviderDetails({ provider, provider_data }) {
   const data = {
     azure: [
       {
         title: 'Provider',
         content: provider,
-        render: (content) => <p className="capitalize">{content}</p>,
+        render: (content) => <ProviderLabel provider={content} />,
       },
       { title: 'VM Size', content: provider_data?.vm_size },
       { title: 'VM Name', content: provider_data?.vm_name },
@@ -29,7 +30,7 @@ function ProviderDetails({ provider, provider_data }) {
       {
         title: 'Provider',
         content: provider,
-        render: (content) => <p className="uppercase">{content}</p>,
+        render: (content) => <ProviderLabel provider={content} />,
       },
       { title: 'Instance type', content: provider_data?.instance_type },
       { title: 'Instance ID', content: provider_data?.instance_id },
@@ -52,7 +53,7 @@ function ProviderDetails({ provider, provider_data }) {
       {
         title: 'Provider',
         content: provider,
-        render: (content) => <p className="uppercase">{content}</p>,
+        render: (content) => <ProviderLabel provider={content} />,
       },
       { title: 'Machine type', content: provider_data?.machine_type },
       { title: 'Instance name', content: provider_data?.instance_name },
@@ -66,14 +67,14 @@ function ProviderDetails({ provider, provider_data }) {
       {
         title: 'Provider',
         content: provider,
-        render: (content) => <p className="uppercase">{content}</p>,
+        render: (content) => <ProviderLabel provider={content} />,
       },
     ],
     nutanix: [
       {
         title: 'Provider',
         content: provider,
-        render: (content) => <p className="capitalize">{content}</p>,
+        render: (content) => <ProviderLabel provider={content} />,
       },
     ],
   };

assets/js/components/HostDetails/ProviderDetails.test.jsx

@@ -4,31 +4,35 @@ import '@testing-library/jest-dom';
 import ProviderDetails from './ProviderDetails';
 
 describe('Provider Details', () => {
-  it('should display a box with Azure as the provider', () => {
-    render(<ProviderDetails provider="azure" />);
-    expect(screen.getAllByText(/Provider/)).toBeTruthy();
-    expect(screen.getAllByText(/azure/)).toBeTruthy();
-  });
-  it('should display a box with AWS as the provider', () => {
-    render(<ProviderDetails provider="aws" />);
-    expect(screen.getAllByText(/Provider/)).toBeTruthy();
-    expect(screen.getAllByText(/aws/)).toBeTruthy();
-  });
-  it('should display a box with GCP as the provider', () => {
-    render(<ProviderDetails provider="gcp" />);
-    expect(screen.getAllByText(/Provider/)).toBeTruthy();
-    expect(screen.getAllByText(/gcp/)).toBeTruthy();
-  });
-  it('should display a box with KVM as the provider', () => {
-    render(<ProviderDetails provider="kvm" />);
-    expect(screen.getAllByText(/Provider/)).toBeTruthy();
-    expect(screen.getAllByText(/kvm/)).toBeTruthy();
-  });
-  it('should display a box with Nutanix as the provider', () => {
-    render(<ProviderDetails provider="nutanix" />);
-    expect(screen.getAllByText(/Provider/)).toBeTruthy();
-    expect(screen.getAllByText(/nutanix/)).toBeTruthy();
+  [
+    {
+      provider: 'aws',
+      providerText: 'AWS',
+    },
+    {
+      provider: 'azure',
+      providerText: 'Azure',
+    },
+    {
+      provider: 'gcp',
+      providerText: 'GCP',
+    },
+    {
+      provider: 'kvm',
+      providerText: 'KVM',
+    },
+    {
+      provider: 'nutanix',
+      providerText: 'Nutanix',
+    },
+  ].forEach(({ provider, providerText }) => {
+    it(`should display a box with ${providerText} as the provider`, () => {
+      render(<ProviderDetails provider={provider} />);
+      expect(screen.getAllByText(/Provider/)).toBeTruthy();
+      expect(screen.getAllByText(providerText)).toBeTruthy();
+    });
   });
+
   it('should display an element containing "Provider not recognized"', () => {
     render(<ProviderDetails provider="unrecognized-provider" />);
     expect(document.querySelector('span')).toHaveTextContent(

assets/js/components/HostsList.jsx

@@ -12,6 +12,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { post, del } from '@lib/network';
 import HealthSummary from '@components/HealthSummary/HealthSummary';
 import { getCounters } from '@components/HealthSummary/summarySelection';
+import ProviderLabel from '@components/ProviderLabel';
 
 const getInstancesByHost = (applicationInstances, databaseInstances, hostId) =>
   applicationInstances
@@ -79,6 +80,12 @@ function HostsList() {
       {
         title: 'Provider',
         key: 'provider',
+        render: (content) => {
+          if (content) {
+            return <ProviderLabel provider={content} />;
+          }
+          return '';
+        },
       },
       {
         title: 'Cluster',

assets/js/components/HostsList.test.jsx

@@ -7,6 +7,41 @@ import HostsList from './HostsList';
 import { renderWithRouter, withDefaultState } from '../lib/test-utils';
 
 describe('HostsLists component', () => {
+  describe('list content', () => {
+    [
+      {
+        host: 'vmhdbdev01',
+        ip: '10.100.1.1110.100.1.13',
+        provider: 'Azure',
+        cluster: 'hana_cluster_1',
+        sid: 'HDD',
+        version: '1.1.0+git.dev17.1660137228.fe5ba8a',
+      },
+      {
+        host: 'vmnwqas03',
+        ip: '10.90.1.2710.90.1.23',
+        provider: '',
+        cluster: '',
+        sid: 'NWQ',
+        version: '1.1.0+git.dev17.1660137228.fe5ba8a',
+      }
+    ].forEach(({ host, ip, provider, cluster, sid, version }) => {
+      it(`should show the correct values in the hosts list for host ${host}`, () => {
+        const [StatefulHostsList] = withDefaultState(<HostsList />);
+        const params = { route: `/hosts?hostname=${host}` }
+        renderWithRouter(StatefulHostsList, params);
+
+        const table = screen.getByRole('table');
+        expect(table.querySelector('td:nth-child(2)')).toHaveTextContent(host);
+        expect(table.querySelector('td:nth-child(3)')).toHaveTextContent(ip);
+        expect(table.querySelector('td:nth-child(4)')).toHaveTextContent(provider);
+        expect(table.querySelector('td:nth-child(5)')).toHaveTextContent(cluster);
+        expect(table.querySelector('td:nth-child(6)')).toHaveTextContent(sid);
+        expect(table.querySelector('td:nth-child(7)')).toHaveTextContent(version);
+      });
+    });
+  });
+
   describe('query string filtering behavior', () => {
     it('should put the filters values in the query string when filters are selected', () => {
       const [StatefulHostsList] = withDefaultState(<HostsList />);

assets/js/components/ProviderLabel/index.js

@@ -0,0 +1,3 @@
+import ProviderLabel from './ProviderLabel';
+
+export default ProviderLabel;

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

@@ -5,7 +5,7 @@ export const selectedHost = {
   clusterName: 'hana_cluster_3',
   clusterId: '469e7be5-4e20-5007-b044-c6f540a87493',
   azureCloudDetails: {
-    provider: 'azure',
+    provider: 'Azure',
     vmName: 'vmhdbprd01',
     resourceGroup: 'resourceGroupName',
     location: 'westeurope',
@@ -15,7 +15,7 @@ export const selectedHost = {
     sku: 'gen2',
   },
   awsCloudDetails: {
-    provider: 'aws',
+    provider: 'AWS',
     instanceId: 'i-12345',
     accountId: '123456',
     region: 'eu-west-1 (eu-west-1a)',
@@ -25,7 +25,7 @@ export const selectedHost = {
     vpcId: 'vpc-12345',
   },
   gcpCloudDetails: {
-    provider: 'gcp',
+    provider: 'GCP',
     diskNumber: 4,
     machineType: 'n1-highmem-8',
     instanceName: 'vmhana01',
@@ -35,10 +35,10 @@ export const selectedHost = {
     network: 'network',
   },
   kvmCloudDetails: {
-    provider: 'kvm',
+    provider: 'KVM',
   },
   nutanixCloudDetails: {
-    provider: 'nutanix',
+    provider: 'Nutanix',
   },
   sapInstance: {
     id: '6c9208eb-a5bb-57ef-be5c-6422dedab602',

test/e2e/cypress/fixtures/hosts-overview/available_hosts.js

@@ -3,7 +3,7 @@ export const availableHosts = [
     id: '240f96b1-8d26-53b7-9e99-ffb0f2e735bf',
     name: 'vmdrbddev01',
     ipAddresses: ['10.100.1.31', '10.100.1.33'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'drbd_cluster',
     clusterId: '',
     sapSystemSid: '',
@@ -15,7 +15,7 @@ export const availableHosts = [
     id: '21de186a-e38f-5804-b643-7f4ef22fecfd',
     name: 'vmdrbddev02',
     ipAddresses: ['10.100.1.32'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'drbd_cluster',
     clusterId: '',
     sapSystemSid: '',
@@ -27,7 +27,7 @@ export const availableHosts = [
     id: 'a09d9cf3-46c1-505c-8fb8-4b0a71a9114e',
     name: 'vmdrbdprd01',
     ipAddresses: ['10.80.1.31', '10.80.1.33'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'drbd_cluster',
     clusterId: '',
     sapSystemSid: '',
@@ -39,7 +39,7 @@ export const availableHosts = [
     id: '927901fa-2c87-524e-b18c-3ef5187f504f',
     name: 'vmdrbdprd02',
     ipAddresses: ['10.80.1.32'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'drbd_cluster',
     clusterId: '',
     sapSystemSid: '',
@@ -51,7 +51,7 @@ export const availableHosts = [
     id: 'ddcb7992-2ffb-5c10-8b39-80685f6eaaba',
     name: 'vmdrbdqas01',
     ipAddresses: ['10.90.1.31', '10.90.1.33'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'drbd_cluster',
     clusterId: '',
     sapSystemSid: '',
@@ -63,7 +63,7 @@ export const availableHosts = [
     id: '422686d6-b2d1-5092-93e8-a744854f5085',
     name: 'vmdrbdqas02',
     ipAddresses: ['10.90.1.32'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'drbd_cluster',
     clusterId: '',
     sapSystemSid: '',
@@ -75,7 +75,7 @@ export const availableHosts = [
     id: '13e8c25c-3180-5a9a-95c8-51ec38e50cfc',
     name: 'vmhdbdev01',
     ipAddresses: ['10.100.1.11', '10.100.1.13'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'hana_cluster_1',
     clusterId: '7965f822-0254-5858-abca-f6e8b4c27714',
     sapSystemSid: 'HDD',
@@ -87,7 +87,7 @@ export const availableHosts = [
     id: '0a055c90-4cb6-54ce-ac9c-ae3fedaf40d4',
     name: 'vmhdbdev02',
     ipAddresses: ['10.100.1.12'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'hana_cluster_1',
     clusterId: '7965f822-0254-5858-abca-f6e8b4c27714',
     sapSystemSid: 'HDD',
@@ -99,7 +99,7 @@ export const availableHosts = [
     id: '9cd46919-5f19-59aa-993e-cf3736c71053',
     name: 'vmhdbprd01',
     ipAddresses: ['10.80.1.11', '10.80.1.13'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'hana_cluster_3',
     clusterId: '469e7be5-4e20-5007-b044-c6f540a87493',
     sapSystemSid: 'HDP',
@@ -111,7 +111,7 @@ export const availableHosts = [
     id: 'b767b3e9-e802-587e-a442-541d093b86b9',
     name: 'vmhdbprd02',
     ipAddresses: ['10.80.1.12'],
-    provider: 'azure',
+    provider: 'Azure',
     clusterName: 'hana_cluster_3',
     clusterId: '469e7be5-4e20-5007-b044-c6f540a87493',
     sapSystemSid: 'HDP',