Saptune summary frontend

assets/js/components/HostDetails/HostDetails.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { EOS_CLEAR_ALL, EOS_PLAY_CIRCLE, EOS_SETTINGS } from 'eos-icons-react';
 
 import { agentVersionWarning } from '@lib/agent';
+import { isVersionSupported } from '@lib/saptune';
 
 import Button from '@components/Button';
 import ListView from '@components/ListView';
@@ -15,8 +16,10 @@ import WarningBanner from '@components/Banners/WarningBanner';
 import CleanUpButton from '@components/CleanUpButton';
 import DeregistrationModal from '@components/DeregistrationModal';
 import { canStartExecution } from '@components/ChecksSelection';
+import { SaptuneVersion, SaptuneTuningState } from '@components/SaptuneDetails';
 
 import SuseLogo from '@static/suse_logo.svg';
+import ChecksComingSoon from '@static/checks-coming-soon.svg';
 
 import StatusPill from './StatusPill';
 import ProviderDetails from './ProviderDetails';
@@ -36,10 +39,12 @@ function HostDetails({
   heartbeat,
   hostID,
   hostname,
+  ipAddresses = [],
   provider,
   providerData,
   sapInstances,
   savingChecks,
+  saptuneStatus = {},
   selectedChecks = [],
   slesSubscriptions,
   cleanUpHost,
@@ -50,6 +55,12 @@ function HostDetails({
 
   const versionWarningMessage = agentVersionWarning(agentVersion);
 
+  const {
+    package_version: saptuneVersion,
+    configured_version: saptuneConfigureVersion,
+    tuning_state: saptuneTuning,
+  } = saptuneStatus;
+
   const renderedExporters = Object.entries(exportersStatus).map(
     ([exporterName, exporterStatus]) => (
       <StatusPill
@@ -140,18 +151,63 @@ function HostDetails({
         {versionWarningMessage && (
           <WarningBanner>{versionWarningMessage}</WarningBanner>
         )}
-        <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
-          <ListView
-            orientation="vertical"
-            data={[
-              { title: 'Name', content: hostname },
-              {
-                title: 'Cluster',
-                content: <ClusterLink cluster={cluster} />,
-              },
-              { title: 'Agent version', content: agentVersion },
-            ]}
-          />
+        <div className="flex xl:flex-row flex-col">
+          <div className="mt-4 bg-white shadow rounded-lg py-4 px-8 xl:w-2/5 mr-4">
+            <ListView
+              className="grid-rows-3"
+              orientation="vertical"
+              data={[
+                {
+                  title: 'Cluster',
+                  content: <ClusterLink cluster={cluster} />,
+                },
+                { title: 'Agent Version', content: agentVersion },
+                { title: 'IP addresses', content: ipAddresses.join(',') },
+              ]}
+            />
+          </div>
+          <div className="flex flex-col mt-4 bg-white shadow rounded-lg pt-8 px-8 xl:w-2/5 mr-4">
+            <div className="flex justify-between mb-2">
+              <h1 className="text-2xl font-bold">Saptune Summary</h1>
+              <Button
+                type="primary-white-fit"
+                className="border-green-500 border"
+                size="small"
+                disabled={!isVersionSupported(saptuneVersion)}
+              >
+                View Details
+              </Button>
+            </div>
+            <ListView
+              className="grid-rows-2"
+              orientation="vertical"
+              data={[
+                {
+                  title: 'Package',
+                  content: <SaptuneVersion version={saptuneVersion} />,
+                },
+                {
+                  title: 'Tunning',
+                  content: <SaptuneTuningState state={saptuneTuning} />,
+                },
+                {
+                  title: 'Configured Version',
+                  content: saptuneConfigureVersion || '-',
+                },
+              ]}
+            />
+          </div>
+          <div className="mt-4 bg-white shadow rounded-lg py-4 xl:w-1/4">
+            <div className="flex flex-col items-center h-full">
+              <h1 className="text-center text-2xl font-bold">Check Results</h1>
+              <h6 className="opacity-60 text-xs">Coming soon for Hosts</h6>
+              <img
+                className="h-full inline-block align-middle"
+                alt="checks coming soon"
+                src={ChecksComingSoon}
+              />
+            </div>
+          </div>
         </div>
         <div className="mt-8 bg-white shadow rounded-lg py-4 px-8">
           <iframe

assets/js/components/HostDetails/HostDetails.stories.jsx

@@ -83,6 +83,10 @@ export default {
         type: { summary: 'string' },
       },
     },
+    ipAddresses: {
+      control: { type: 'array' },
+      description: 'IP addresses',
+    },
     provider: {
       control: 'string',
       description: 'The discovered CSP where the host is running',
@@ -98,6 +102,10 @@ export default {
       control: { type: 'array' },
       description: 'SAP systems running on the host',
     },
+    saptuneStatus: {
+      control: 'object',
+      description: 'Saptune status data',
+    },
     savingChecks: {
       control: { type: 'boolean' },
       description: 'The checks are being saved',
@@ -151,10 +159,16 @@ export const Default = {
     heartbeat: host.heartbeat,
     hostID: host.id,
     hostname: host.hostname,
+    ipAddresses: host.ip_addresses,
     provider: host.provider,
     providerData: host.provider_data,
     sapInstances,
     savingChecks: false,
+    saptuneStatus: {
+      package_version: '3.1.0',
+      configured_version: '3',
+      tuning_state: 'no tuning',
+    },
     selectedChecks: [],
     slesSubscriptions: host.sles_subscriptions,
   },
@@ -180,3 +194,25 @@ export const ChecksSelected = {
     selectedChecks: ['some-check'],
   },
 };
+
+export const SaptuneNotInstalled = {
+  args: {
+    ...Default.args,
+    saptuneStatus: {
+      package_version: null,
+      configured_version: null,
+      tuning_state: null,
+    },
+  },
+};
+
+export const SaptuneOldVersion = {
+  args: {
+    ...Default.args,
+    saptuneStatus: {
+      package_version: '3.0.0',
+      configured_version: null,
+      tuning_state: null,
+    },
+  },
+};

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

@@ -5,8 +5,9 @@ import 'intersection-observer';
 import '@testing-library/jest-dom';
 import { faker } from '@faker-js/faker';
 
+import { SUPPORTED_VERSION } from '@lib/saptune';
 import { renderWithRouter } from '@lib/test-utils';
-import { hostFactory } from '@lib/test-utils/factories';
+import { hostFactory, saptuneStatusFactory } from '@lib/test-utils/factories';
 
 import HostDetails from './HostDetails';
 
@@ -132,4 +133,63 @@ describe('HostDetails component', () => {
       expect(mockCleanUp).toHaveBeenCalled();
     });
   });
+
+  describe('saptune', () => {
+    it('should show the summary of saptune', () => {
+      const saptuneStatus = saptuneStatusFactory.build();
+      const {
+        package_version: packageVersion,
+        configured_version: configuredVersion,
+        tuning_state: tuningState,
+      } = saptuneStatus;
+
+      renderWithRouter(
+        <HostDetails agentVersion="2.0.0" saptuneStatus={saptuneStatus} />
+      );
+
+      expect(screen.getByText('Package').nextSibling).toHaveTextContent(
+        packageVersion
+      );
+
+      expect(
+        screen.getByText('Configured Version').nextSibling
+      ).toHaveTextContent(configuredVersion);
+
+      expect(screen.getByText('Tunning').nextSibling).toHaveTextContent(
+        new RegExp(tuningState, 'i')
+      );
+    });
+
+    it('should enable saptune details button', () => {
+      const saptuneStatus = saptuneStatusFactory.build({
+        package_version: SUPPORTED_VERSION,
+      });
+
+      renderWithRouter(
+        <HostDetails agentVersion="2.0.0" saptuneStatus={saptuneStatus} />
+      );
+
+      expect(
+        screen.getByRole('button', {
+          name: 'View Details',
+        })
+      ).toBeEnabled();
+    });
+
+    it('should disable saptune details button', () => {
+      const saptuneStatus = saptuneStatusFactory.build({
+        package_version: '3.0.0',
+      });
+
+      renderWithRouter(
+        <HostDetails agentVersion="2.0.0" saptuneStatus={saptuneStatus} />
+      );
+
+      expect(
+        screen.getByRole('button', {
+          name: 'View Details',
+        })
+      ).toBeDisabled();
+    });
+  });
 });

assets/js/components/HostDetails/HostDetailsPage.jsx

@@ -63,9 +63,11 @@ function HostDetailsPage() {
       heartbeat={host.heartbeat}
       hostID={host.id}
       hostname={host.hostname}
+      ipAddresses={host.ip_addresses}
       provider={host.provider}
       providerData={host.provider_data}
       sapInstances={sapInstances}
+      saptuneStatus={{}}
       savingChecks={saving}
       selectedChecks={hostSelectedChecks}
       slesSubscriptions={host.sles_subscriptions}

assets/js/components/SaptuneDetails/SaptuneTuningState.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import HealthIcon from '@components/Health/HealthIcon';
+
+function SaptuneTuningState({ state }) {
+  switch (state) {
+    case 'compliant':
+      return 'Compliant';
+    case 'not compliant':
+      return (
+        <div className="flex">
+          <HealthIcon health="critical" />
+          <span className="ml-1">Not compliant</span>
+        </div>
+      );
+    case 'no tuning':
+      return (
+        <div className="flex">
+          <HealthIcon health="warning" />
+          <span className="ml-1">No tuning</span>
+        </div>
+      );
+    default:
+      return '-';
+  }
+}
+
+export default SaptuneTuningState;

assets/js/components/SaptuneDetails/SaptuneTuningState.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import SaptuneTuningState from './SaptuneTuningState';
+
+describe('SpatuneTuningState', () => {
+  it.each([
+    { state: 'compliant', text: 'Compliant', iconClass: null },
+    {
+      state: 'not compliant',
+      text: 'Not compliant',
+      iconClass: 'fill-red-500',
+    },
+    { state: 'no tuning', text: 'No tuning', iconClass: 'fill-yellow-500' },
+    { state: null, text: '-', icon: null },
+  ])(
+    'should render correctly the $state state',
+    ({ state, text, iconClass }) => {
+      render(<SaptuneTuningState state={state} />);
+
+      expect(screen.getByText(text)).toBeTruthy();
+
+      if (iconClass) {
+        const icon = screen.getByTestId('eos-svg-component');
+        expect(icon).toHaveClass(iconClass);
+      }
+    }
+  );
+});

assets/js/components/SaptuneDetails/SaptuneVersion.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { isVersionSupported, SUPPORTED_VERSION } from '@lib/saptune';
+
+import Tooltip from '@components/Tooltip';
+import HealthIcon from '@components/Health/HealthIcon';
+
+function SaptuneVersion({ version }) {
+  if (!version) {
+    return 'Not installed';
+  }
+
+  if (isVersionSupported(version)) {
+    return version;
+  }
+
+  return (
+    <div className="flex">
+      <Tooltip
+        content={`Saptune version not supported. Minimum supported version is ${SUPPORTED_VERSION}`}
+        place="bottom"
+      >
+        <HealthIcon health="warning" />
+      </Tooltip>
+      <span className="ml-1">{version}</span>
+    </div>
+  );
+}
+
+export default SaptuneVersion;

assets/js/components/SaptuneDetails/SaptuneVersion.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import SaptuneVersion from './SaptuneVersion';
+
+describe('SaptuneVersion', () => {
+  it.each([
+    { version: null, text: 'Not installed', iconCss: null },
+    { version: '3.0.0', text: '3.0.0', iconCss: 'fill-yellow-500' },
+    { version: '3.1.0', text: '3.1.0', iconCss: null },
+  ])(
+    'should render correctly the $version version',
+    ({ version, text, iconClass }) => {
+      render(<SaptuneVersion version={version} />);
+
+      expect(screen.getByText(text)).toBeTruthy();
+
+      if (iconClass) {
+        const icon = screen.getByTestId('eos-svg-component');
+        expect(icon).toHaveClass(iconClass);
+      }
+    }
+  );
+});

assets/js/components/SaptuneDetails/index.js

@@ -0,0 +1,4 @@
+import SaptuneTuningState from './SaptuneTuningState';
+import SaptuneVersion from './SaptuneVersion';
+
+export { SaptuneTuningState, SaptuneVersion };