Skip to content

Commit

Permalink
feat(website): improve host details
Browse files Browse the repository at this point in the history
  • Loading branch information
@vst
vst committed Mar 23, 2024
1 parent e037086 commit 1499f1c
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 63 deletions.
153 changes: 93 additions & 60 deletions website/src/components/app/-app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Link from 'next/link';
import { Just, Maybe, Nothing } from 'purify-ts/Maybe';
import { useState } from 'react';
import { LhpData } from './-data';
import { KVBox } from './-ui';

export function App({ data, onFlushRequest }: { data: LhpData[]; onFlushRequest: () => void }) {
const [host, setHost] = useState<Maybe<LhpData>>(Nothing);
Expand Down Expand Up @@ -185,73 +186,105 @@ export function TabulateHosts({ hosts, onHostSelect }: { hosts: LhpData[]; onHos
}

export function HostDetails({ host }: { host: LhpData }) {
const kvs = [
{ key: 'Hostname', value: host.host.name },
{ key: 'Kernel Name', value: host.kernel.name },
{ key: 'Kernel Architecture', value: host.kernel.machine },
{ key: 'Kernel Release', value: host.kernel.release },
{ key: 'Operating System', value: host.kernel.os },
{ key: 'Distribution ID', value: host.distribution.id },
{ key: 'Distribution Name', value: host.distribution.name },
{ key: 'Distribution Version ID', value: host.distribution.id },
{ key: 'Distribution Version', value: host.distribution.version },
{ key: 'Distribution Version Code', value: host.distribution.codename },
{ key: 'Distribution Full Name', value: host.distribution.description },
{ key: 'Cloud', value: host.cloud.name },
{ key: 'Type', value: host.cloud.hostType },
{ key: 'Region', value: host.cloud.hostRegion },
{ key: 'CPU', value: `${host.hardware.cpuCount} cores` },
{ key: 'RAM', value: `${host.hardware.ramTotal} GB` },
{ key: 'DISK', value: `${host.hardware.diskRoot} GB` },
];

return (
<div>
<h1 className="border-b border-gray-200 bg-white p-4 text-xl font-bold">{host.host.name}</h1>
<h1 className="flex flex-row justify-between border-b border-gray-200 bg-white p-4 text-xl font-bold">
<div className="space-x-2">
<span>{host.host.name}</span>
{host.host.url && (
<Link href={host.host.url} target="_blank">
🔗
</Link>
)}
</div>

<div className="space-x-1">
{(host.host.tags || []).map((x) => (
<Chip size="sm" color="primary" variant="flat" radius="sm">
{x}
</Chip>
))}
</div>
</h1>

<div className="p-4">
<KVBox
title="Cloud"
kvs={[
{ key: 'Name', value: host.cloud.name },
{ key: 'ID', value: host.cloud.id },
{ key: 'Type', value: host.cloud.hostType },
{ key: 'Region', value: host.cloud.hostRegion },
{ key: 'Availability Zone', value: host.cloud.hostAvailabilityZone },
{ key: 'Local Hostname', value: host.cloud.hostLocalHostname },
{ key: 'Local Address', value: host.cloud.hostLocalAddress },
{ key: 'Remote Hostname', value: host.cloud.hostRemoteHostname },
{ key: 'Remote Address', value: host.cloud.hostRemoteAddress },
{ key: 'Reserved Address', value: host.cloud.hostReservedAddress },
]}
/>
</div>

<div className="grid grid-cols-1 gap-4 p-4 lg:grid-cols-2">
<KVBox
title="Distribution"
kvs={[
{ key: 'ID', value: host.distribution.id },
{ key: 'Name', value: host.distribution.name },
{ key: 'Description', value: host.distribution.description },
{ key: 'Release', value: host.distribution.release },
{ key: 'Version', value: host.distribution.version },
{ key: 'Codename', value: host.distribution.codename },
]}
/>

<div className="grid grid-cols-2 gap-4 p-4">
<div>
<Card radius="sm" shadow="sm">
<CardHeader className="text-lg font-bold">Host Information</CardHeader>
<KVBox
title="Kernel"
kvs={[
{ key: 'Node', value: host.kernel.node },
{ key: 'Name', value: host.kernel.name },
{ key: 'Machine', value: host.kernel.machine },
{ key: 'Release', value: host.kernel.release },
{ key: 'Version', value: host.kernel.version },
{ key: 'Operating System', value: host.kernel.os },
]}
/>
</div>

<CardBody>
<Listbox items={kvs}>
{({ key, value }) => (
<ListboxItem key={key} endContent={value}>
{key}
<div className="p-4">
<Card radius="sm" shadow="sm">
<CardHeader className="text-lg font-bold">Docker Containers</CardHeader>

<CardBody>
{host.dockerContainers ? (
<Listbox
items={[
...host.dockerContainers.sort(
(a, b) => (a.running ? 0 : 1) - (b.running ? 0 : 1) || a.name.localeCompare(b.name)
),
]}
emptyContent={<span className="text-orange-400">Docker service has no containers.</span>}
>
{({ id, image, name, running, created }) => (
<ListboxItem
key={id}
description={image}
startContent={running ? <>🟢</> : <>🔴</>}
endContent={
<span className="text-xs" title="Created">
{created}
</span>
}
>
{name}
</ListboxItem>
)}
</Listbox>
</CardBody>
</Card>
</div>

<div>
<Card radius="sm" shadow="sm">
<CardHeader className="text-lg font-bold">Docker Containers</CardHeader>

<CardBody>
{host.dockerContainers ? (
<Listbox
items={[
...host.dockerContainers.sort(
(a, b) => (a.running ? 0 : 1) - (b.running ? 0 : 1) || a.name.localeCompare(b.name)
),
]}
emptyContent={<span className="text-orange-400">Docker service has no containers.</span>}
>
{({ id, image, name, running }) => (
<ListboxItem key={id} description={image} startContent={running ? <>🟢</> : <>🔴</>}>
{name}
</ListboxItem>
)}
</Listbox>
) : (
<span className="text-red-400">Docker service is not found.</span>
)}
</CardBody>
</Card>
</div>
) : (
<span className="text-red-400">Docker service is not found.</span>
)}
</CardBody>
</Card>
</div>
</div>
);
Expand Down
4 changes: 1 addition & 3 deletions website/src/components/app/-data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,7 @@ export interface LhpData {
dockerContainers:
| null
| {
created: {
[k: string]: unknown;
};
created: string;
id: string;
image: string;
name: string;
Expand Down
26 changes: 26 additions & 0 deletions website/src/components/app/-ui.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Card, CardBody, CardHeader } from '@nextui-org/card';
import { Listbox, ListboxItem } from '@nextui-org/listbox';
import { Spinner } from '@nextui-org/react';

export function Centered({ children }: { children: React.ReactNode }) {
Expand All @@ -11,3 +13,27 @@ export function BigSpinner({ label }: { label?: string }) {
</Centered>
);
}

export function KVBox({
title,
kvs,
}: {
title: string;
kvs: { key: string; value: React.ReactNode | string | number | null | undefined }[];
}) {
return (
<Card radius="sm" shadow="sm">
<CardHeader className="text-lg font-bold">{title}</CardHeader>

<CardBody>
<Listbox items={kvs}>
{({ key, value }) => (
<ListboxItem key={key} endContent={value}>
{key}
</ListboxItem>
)}
</Listbox>
</CardBody>
</Card>
);
}

0 comments on commit 1499f1c

Please sign in to comment.