Saptune details view

assets/js/components/HostDetails/HostDetails.jsx

@@ -176,6 +176,7 @@ function HostDetails({
               saptuneVersion={saptuneVersion}
               saptuneConfiguredVersion={saptuneConfiguredVersion}
               saptuneTuning={saptuneTuning}
+              onViewDetails={() => navigate(`/hosts/${hostID}/saptune`)}
             />
           </div>
           <div className="mt-4 bg-white shadow rounded-lg py-4 xl:w-1/4">

assets/js/components/HostDetails/SaptuneSummary.jsx

@@ -10,6 +10,7 @@ function SaptuneSummary({
   saptuneVersion,
   saptuneConfiguredVersion,
   saptuneTuning,
+  onViewDetails,
 }) {
   return (
     <>
@@ -20,6 +21,7 @@ function SaptuneSummary({
           className="border-green-500 border"
           size="small"
           disabled={!isVersionSupported(saptuneVersion)}
+          onClick={onViewDetails}
         >
           View Details
         </Button>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import 'intersection-observer';
 import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 
 import { SUPPORTED_VERSION } from '@lib/saptune';
 import { saptuneStatusFactory } from '@lib/test-utils/factories';
@@ -57,4 +58,19 @@ describe('SaptuneSummary component', () => {
       })
     ).toBeDisabled();
   });
+
+  it('should run the onViewDetails function when button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockedOnViewDetails = jest.fn();
+
+    render(
+      <SaptuneSummary
+        saptuneVersion={SUPPORTED_VERSION}
+        onViewDetails={mockedOnViewDetails}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: 'View Details' }));
+    expect(mockedOnViewDetails).toHaveBeenCalled();
+  });
 });

assets/js/components/SaptuneDetails/SaptuneDetails.jsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { find, map } from 'lodash';
+
+import BackButton from '@components/BackButton';
+import ListView from '@components/ListView';
+
+import PageHeader from '@components/PageHeader';
+
+import SaptuneTuningState from './SaptuneTuningState';
+import SaptuneVersion from './SaptuneVersion';
+
+const renderService = (serviceName, services) => {
+  const currentService = find(services, { name: serviceName });
+
+  if (!currentService.enabled) {
+    return <span>-</span>;
+  }
+
+  return (
+    <span>
+      {currentService.enabled}/{currentService.active}
+    </span>
+  );
+};
+
+const renderNote = (noteID) => (
+  <a
+    key={noteID}
+    className="text-jungle-green-500 hover:opacity-75"
+    href={`https://me.sap.com/notes/${noteID}`}
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {noteID}
+  </a>
+);
+const renderNotes = (notes) => {
+  if (notes.length === 0) {
+    return <span>-</span>;
+  }
+  return notes.map((noteID, index) => [index > 0 && ', ', renderNote(noteID)]);
+};
+
+const renderSolution = ({ id, notes, partial }) => (
+  <span>
+    {id} ({renderNotes(notes)}
+    {partial ? '-> Partial' : ''})
+  </span>
+);
+
+function SaptuneDetails({
+  appliedNotes,
+  appliedSolution,
+  enabledNotes,
+  enabledSolution,
+  configuredVersion,
+  hostname,
+  hostID,
+  packageVersion,
+  services,
+  staging,
+  tuningState,
+}) {
+  const { hostID: paramHostID } = useParams();
+  const resolvedHostID = hostID || paramHostID;
+  return (
+    <div>
+      <BackButton url={`/hosts/${resolvedHostID}`}>
+        Back to Host Details
+      </BackButton>
+      <div className="flex flex-wrap">
+        <div className="flex w-1/2 h-auto overflow-hidden overflow-ellipsis break-words">
+          <PageHeader>
+            Saptune Details: <span className="font-bold">{hostname}</span>
+          </PageHeader>
+        </div>
+      </div>
+
+      <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
+        <ListView
+          orientation="vertical"
+          data={[
+            {
+              title: 'Package',
+              content: <SaptuneVersion version={packageVersion} />,
+            },
+            {
+              title: 'Configured Version',
+              content: configuredVersion,
+            },
+            {
+              title: 'Tuning',
+              content: <SaptuneTuningState state={tuningState} />,
+            },
+          ]}
+        />
+      </div>
+
+      <div className="flex flex-direction-row mt-7">
+        <h2 className="text-2xl font-bold self-center">
+          Saptune Services Status
+        </h2>
+      </div>
+      <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
+        <ListView
+          orientation="vertical"
+          data={[
+            {
+              title: 'saptune.service',
+              content: renderService('saptune', services),
+            },
+            {
+              title: 'sapconf.service',
+              content: renderService('sapconf', services),
+            },
+            {
+              title: 'tuned.service',
+              content: renderService('tuned', services),
+            },
+          ]}
+        />
+      </div>
+
+      <div className="flex flex-direction-row mt-7">
+        <h2 className="text-2xl font-bold self-center">
+          Saptune Tuning Solutions
+        </h2>
+      </div>
+      <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
+        <ListView
+          orientation="vertical"
+          data={[
+            {
+              title: 'Enabled Solution',
+              content: renderSolution(enabledSolution),
+            },
+            {
+              title: 'Applied Solution',
+              content: renderSolution(appliedSolution),
+            },
+          ]}
+        />
+      </div>
+
+      <div className="flex flex-direction-row mt-7">
+        <h2 className="text-2xl font-bold self-center">Saptune Tuning Notes</h2>
+      </div>
+      <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
+        <ListView
+          orientation="vertical"
+          data={[
+            {
+              title: 'Enabled Notes',
+              content: renderNotes(map(enabledNotes, 'id')),
+            },
+            {
+              title: 'Applied Notes',
+              content: renderNotes(map(appliedNotes, 'id')),
+            },
+          ]}
+        />
+      </div>
+
+      <div className="flex flex-direction-row mt-7">
+        <h2 className="text-2xl font-bold self-center">
+          Saptune Staging Status
+        </h2>
+      </div>
+      <div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
+        <ListView
+          orientation="vertical"
+          data={[
+            {
+              title: 'Staging',
+              content: staging.enabled ? (
+                <span>Enabled</span>
+              ) : (
+                <span>Disabled</span>
+              ),
+            },
+            {
+              title: 'Staged Notes',
+              content: renderNotes(staging.notes),
+            },
+            {
+              title: 'Staged Solutions',
+              content: staging.solutions_ids.join(', ') || <span>-</span>,
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default SaptuneDetails;

assets/js/components/SaptuneDetails/SaptuneDetails.stories.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { hostFactory, saptuneStatusFactory } from '@lib/test-utils/factories';
+
+import SaptuneDetails from './SaptuneDetails';
+
+const { hostname, id: hostID } = hostFactory.build();
+const {
+  applied_notes: appliedNotes,
+  applied_solution: appliedSolution,
+  configured_version: configuredVersion,
+  enabled_solution: enabledSolution,
+  enabled_notes: enabledNotes,
+  package_version: packageVersion,
+  services,
+  staging,
+  tuning_state: tuningState,
+} = saptuneStatusFactory.build();
+
+function ContainerWrapper({ children }) {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">{children}</div>
+  );
+}
+
+export default {
+  title: 'SaptuneDetails',
+  component: SaptuneDetails,
+  argTypes: {
+    appliedNotes: {
+      control: 'array',
+      description: 'Applied notes',
+    },
+    appliedSolution: {
+      control: 'array',
+      description: 'Applied solution',
+    },
+    enabledNotes: {
+      control: 'array',
+      description: 'Enabled notes',
+    },
+    enabledSolution: {
+      control: 'array',
+      description: 'Enabled solutions',
+    },
+    configuredVersion: {
+      control: { type: 'range', min: 1, max: 3, step: 1 },
+      description: 'The configured version of saptune',
+    },
+    hostname: {
+      control: 'text',
+      description: 'The hostname',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    hostID: {
+      control: 'text',
+      description: 'The host identifier',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    packageVersion: {
+      control: 'text',
+      description: 'The saptune installed version',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    services: {
+      control: 'array',
+      description: 'Services',
+    },
+    staging: {
+      control: 'object',
+      description: 'Staging',
+    },
+    tuningState: {
+      control: 'select',
+      options: ['compliant', 'not compliant', 'no tuning'],
+      description: 'The tuning state of saptune',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  render: (args) => (
+    <ContainerWrapper>
+      <SaptuneDetails {...args} />
+    </ContainerWrapper>
+  ),
+};
+
+export const Default = {
+  args: {
+    appliedNotes,
+    appliedSolution,
+    enabledNotes,
+    enabledSolution,
+    configuredVersion,
+    hostname,
+    hostID,
+    packageVersion,
+    services,
+    staging,
+    tuningState,
+  },
+};
+
+export const StagingDisabled = {
+  args: {
+    ...Default.args,
+    staging: { enabled: false, notes: [], solutions_ids: [] },
+  },
+};