Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add 'Clean up' button to Host Details page #1623

Merged
merged 16 commits into from
Jul 18, 2023
Merged

Add 'Clean up' button to Host Details page #1623

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
eb664ed
Add 'Clean up' button to Host Details page
jamie-suse Jul 11, 2023
bd56859
Change test descriptions
jamie-suse Jul 12, 2023
a720d46
Organise tests inside `describe` blocks
jamie-suse Jul 12, 2023
07a0950
Use `userEvent` instead of `fireEvent`
jamie-suse Jul 12, 2023
2cfd98d
Reify superfluous abstract function `openDeregistrationModal()`
jamie-suse Jul 12, 2023
195ff87
Use `DEREGISTER_HOST` constant instead of string literal
jamie-suse Jul 12, 2023
4049740
Don't use global scope in `cleanUpHost()` callback
jamie-suse Jul 17, 2023
7a89b5a
Navigate to Hosts List after deregistering from Host Details view
jamie-suse Jul 17, 2023
6b4a209
Use `deregisterHost()` Saga consistently
jamie-suse Jul 18, 2023
974be7f
Always call `navigate()` in `deregisterHost()` Saga
jamie-suse Jul 18, 2023
2197e42
Update test
jamie-suse Jul 18, 2023
ede002a
Revert "Update test"
jamie-suse Jul 18, 2023
e5580b8
Update test for `deregisterHost()` Saga
jamie-suse Jul 18, 2023
c6fea89
Change `mockNavigate()` to `NOOP`
jamie-suse Jul 18, 2023
0b00696
Send minimal set of data in `deregisterHost()` Saga payload
jamie-suse Jul 18, 2023
b203e7a
Perform destructuring on argument of `cleanUpHost()`
jamie-suse Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 120 additions & 85 deletions assets/js/components/HostDetails/HostDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useParams, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';

import { networkClient } from '@lib/network';
import { agentVersionWarning } from '@lib/agent';

import ListView from '@components/ListView';
import Table from '@components/Table';

import PageHeader from '@components/PageHeader';
import BackButton from '@components/BackButton';
import ClusterLink from '@components/ClusterLink';
import WarningBanner from '@components/Banners/WarningBanner';
import CleanUpButton from '@components/CleanUpButton';
import DeregistrationModal from '@components/DeregistrationModal';
import SuseLogo from '@static/suse_logo.svg';
import {
getInstancesOnHost,
getClusterByHost,
getHost,
} from '@state/selectors';
import { deregisterHost } from '@state/hosts';
import StatusPill from './StatusPill';
import ProviderDetails from './ProviderDetails';

Expand All @@ -36,6 +38,17 @@ function HostDetails() {
const { grafanaPublicUrl } = config;

const [exportersStatus, setExportersStatus] = useState([]);
const [cleanUpModalOpen, setCleanUpModalOpen] = useState(false);

const dispatch = useDispatch();
const navigate = useNavigate();

const cleanUpHost = (selectedHost) => {
setCleanUpModalOpen(false);

const { id, hostname } = selectedHost;
dispatch(deregisterHost({ id, hostname, navigate }));
};

const getExportersStatus = async () => {
const { data } = await networkClient.get(
Expand All @@ -55,97 +68,119 @@ function HostDetails() {
const versionWarningMessage = agentVersionWarning(host.agent_version);

return (
<div>
<BackButton url="/hosts">Back to Hosts</BackButton>
<div className="flex">
<PageHeader>
Host Details: <span className="font-bold">{host.hostname}</span>
</PageHeader>
<StatusPill
className="self-center ml-4 shadow"
heartbeat={host.heartbeat}
>
Agent
</StatusPill>

{Object.entries(exportersStatus).map(
([exporterName, exporterStatus]) => (
<StatusPill
key={exporterName}
className="self-center ml-4 shadow"
heartbeat={exporterStatus}
>
{exporterName}
</StatusPill>
)
<>
<DeregistrationModal
hostname={host.hostname}
isOpen={!!cleanUpModalOpen}
onCleanUp={() => {
cleanUpHost(host);
}}
onCancel={() => {
setCleanUpModalOpen(false);
}}
/>
<div>
<BackButton url="/hosts">Back to Hosts</BackButton>
<div className="flex">
<PageHeader>
Host Details: <span className="font-bold">{host.hostname}</span>
</PageHeader>
<StatusPill
className="self-center ml-4 shadow"
heartbeat={host.heartbeat}
>
Agent
</StatusPill>

{Object.entries(exportersStatus).map(
([exporterName, exporterStatus]) => (
<StatusPill
key={exporterName}
className="self-center ml-4 shadow"
heartbeat={exporterStatus}
>
{exporterName}
</StatusPill>
)
)}
{host.deregisterable && (
<div className="ml-auto my-auto">
<CleanUpButton
cleaning={host.deregistering}
onClick={() => {
setCleanUpModalOpen(true);
}}
/>
</div>
)}
</div>
{versionWarningMessage && (
<WarningBanner>{versionWarningMessage}</WarningBanner>
)}
</div>
{versionWarningMessage && (
<WarningBanner>{versionWarningMessage}</WarningBanner>
)}
<div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
<ListView
orientation="vertical"
data={[
{ title: 'Name', content: host.hostname },
{
title: 'Cluster',
content: <ClusterLink cluster={cluster} />,
},
{ title: 'Agent version', content: host.agent_version },
]}
/>
</div>
<div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
<ListView
orientation="vertical"
data={[
{ title: 'Name', content: host.hostname },
{
title: 'Cluster',
content: <ClusterLink cluster={cluster} />,
},
{ title: 'Agent version', content: host.agent_version },
]}
/>
</div>

<div className="mt-8 bg-white shadow rounded-lg py-4 px-8">
<iframe
title="node-exporter chart"
src={`${grafanaPublicUrl}/d-solo/rYdddlPWj/node-exporter-full?orgId=1&refresh=1m&theme=light&panelId=77&var-agentID=${host.id}`}
width="100%"
height="200"
frameBorder="0"
/>
</div>
<div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
<iframe
title="node-exporter chart trento"
src={`${grafanaPublicUrl}/d-solo/rYdddlPWj/node-exporter-full?orgId=1&refresh=1m&theme=light&panelId=78&var-agentID=${host.id}`}
width="100%"
height="200"
frameBorder="0"
/>
</div>
<div className="mt-8 bg-white shadow rounded-lg py-4 px-8">
<iframe
title="node-exporter chart"
src={`${grafanaPublicUrl}/d-solo/rYdddlPWj/node-exporter-full?orgId=1&refresh=1m&theme=light&panelId=77&var-agentID=${host.id}`}
width="100%"
height="200"
frameBorder="0"
/>
</div>
<div className="mt-4 bg-white shadow rounded-lg py-4 px-8">
<iframe
title="node-exporter chart trento"
src={`${grafanaPublicUrl}/d-solo/rYdddlPWj/node-exporter-full?orgId=1&refresh=1m&theme=light&panelId=78&var-agentID=${host.id}`}
width="100%"
height="200"
frameBorder="0"
/>
</div>

<div className="mt-16">
<div className="mb-4">
<h2 className="text-2xl font-bold">Provider details</h2>
<div className="mt-16">
<div className="mb-4">
<h2 className="text-2xl font-bold">Provider details</h2>
</div>
<ProviderDetails
provider={host.provider}
provider_data={host.provider_data}
/>
</div>
<ProviderDetails
provider={host.provider}
provider_data={host.provider_data}
/>
</div>

<div className="mt-8">
<div>
<h2 className="text-2xl font-bold">SAP instances</h2>
<div className="mt-8">
<div>
<h2 className="text-2xl font-bold">SAP instances</h2>
</div>
<Table config={sapInstancesTableConfiguration} data={sapSystems} />
</div>
<Table config={sapInstancesTableConfiguration} data={sapSystems} />
</div>

<div className="mt-16">
<div className="flex flex-direction-row">
<img src={SuseLogo} className="h-12" alt="suse company logo" />
<h2 className="ml-2 text-2xl font-bold self-center">
SLES subscription details
</h2>
<div className="mt-16">
<div className="flex flex-direction-row">
<img src={SuseLogo} className="h-12" alt="suse company logo" />
<h2 className="ml-2 text-2xl font-bold self-center">
SLES subscription details
</h2>
</div>
<Table
config={subscriptionsTableConfiguration}
data={host.sles_subscriptions}
/>
</div>
<Table
config={subscriptionsTableConfiguration}
data={host.sles_subscriptions}
/>
</div>
</div>
</>
);
}

Expand Down
Loading
Loading