feat(website): show hardware info on host details component

vst · Apr 13, 2024 · 3ee0c42 · 3ee0c42
1 parent abe163c
commit 3ee0c42
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/website/src/components/helpers.tsx b/website/src/components/helpers.tsx
@@ -18,12 +18,14 @@ export function BigSpinner({ label }: { label?: string }) {
 export function KVBox({
   title,
   kvs,
+  ...rest
 }: {
   title: string;
   kvs: { key: string; value: React.ReactNode | string | number | null | undefined }[];
+  [prop: string]: any;
 }) {
   return (
-    <Card radius="sm" shadow="sm">
+    <Card radius="sm" shadow="sm" {...rest}>
       <CardHeader className="text-lg font-bold">{title}</CardHeader>
 
       <CardBody>

diff --git a/website/src/components/report/ShowHostDetails.tsx b/website/src/components/report/ShowHostDetails.tsx
@@ -47,21 +47,33 @@ export function ShowHostDetails({ host, data }: { host: LhpHostReport; data: Lhp
         </div>
       </h1>
 
-      <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 className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <KVBox
+          title="Hardware"
+          kvs={[
+            { key: 'CPU', value: host.hardware.cpuCount },
+            { key: 'Memory', value: host.hardware.ramTotal },
+            { key: 'Disk', value: host.hardware.diskRoot },
+          ]}
+        />
+
+        <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 },
+          ]}
+          className="lg:col-span-2"
+        />
+      </div>
 
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
         <KVBox
@@ -146,9 +158,7 @@ export function ShowHostDetails({ host, data }: { host: LhpHostReport; data: Lhp
         <CardBody>
           <Listbox
             items={host.publicSshHostKeys}
-            emptyContent={
-              <span className="text-orange-400">No public SSH host keys are found. Sounds weird?</span>
-            }
+            emptyContent={<span className="text-orange-400">No public SSH host keys are found. Sounds weird?</span>}
           >
             {({ length, type, fingerprint, data, comment }) => (
               <ListboxItem