From 1499f1cab3eaf0851f8fe012248cbd5ae61dd900 Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Sat, 23 Mar 2024 19:13:56 +0800
Subject: [PATCH] feat(website): improve host details

---
 website/src/components/app/-app.tsx  | 153 ++++++++++++++++-----------
 website/src/components/app/-data.tsx |   4 +-
 website/src/components/app/-ui.tsx   |  26 +++++
 3 files changed, 120 insertions(+), 63 deletions(-)

diff --git a/website/src/components/app/-app.tsx b/website/src/components/app/-app.tsx
index 6dd1529..be237fe 100644
--- a/website/src/components/app/-app.tsx
+++ b/website/src/components/app/-app.tsx
@@ -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);
@@ -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>
   );
diff --git a/website/src/components/app/-data.tsx b/website/src/components/app/-data.tsx
index d83dc6b..7404f90 100644
--- a/website/src/components/app/-data.tsx
+++ b/website/src/components/app/-data.tsx
@@ -52,9 +52,7 @@ export interface LhpData {
   dockerContainers:
     | null
     | {
-        created: {
-          [k: string]: unknown;
-        };
+        created: string;
         id: string;
         image: string;
         name: string;
diff --git a/website/src/components/app/-ui.tsx b/website/src/components/app/-ui.tsx
index 23c0130..638e77e 100644
--- a/website/src/components/app/-ui.tsx
+++ b/website/src/components/app/-ui.tsx
@@ -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 }) {
@@ -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>
+  );
+}