From 2859ac35ce47846e57614b920130c00d31d51b0d Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Sun, 31 Mar 2024 18:32:21 +0800
Subject: [PATCH] feat(website): adopt host's hostname and timezone

---
 .../src/components/report/ShowHostDetails.tsx | 20 ++++++++-----
 .../src/components/report/TabulateHosts.tsx   | 28 ++++++++++++++++++-
 website/src/lib/data.ts                       |  4 +++
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/website/src/components/report/ShowHostDetails.tsx b/website/src/components/report/ShowHostDetails.tsx
index f827df7..b5b1f57 100644
--- a/website/src/components/report/ShowHostDetails.tsx
+++ b/website/src/components/report/ShowHostDetails.tsx
@@ -9,7 +9,7 @@ import { KVBox } from '../helpers';
 export function ShowHostDetails({ host }: { host: LhpHostReport }) {
   return (
     <div className="space-y-4 px-4 py-4">
-      <h1 className="flex flex-row justify-between text-xl font-bold">
+      <h1 className="flex flex-row items-center justify-between text-xl font-bold">
         <div className="space-x-2">
           <span>{host.host.name}</span>
           {host.host.url && (
@@ -19,12 +19,18 @@ export function ShowHostDetails({ host }: { host: LhpHostReport }) {
           )}
         </div>
 
-        <div className="space-x-1">
-          {(host.host.tags || []).map((x) => (
-            <Chip key={x} size="sm" color="primary" variant="flat" radius="sm">
-              {x}
-            </Chip>
-          ))}
+        <div className="align-items flex flex-row items-center space-x-4">
+          <div className="text-xs font-medium text-gray-500">
+            {host.hostname} on {host.timezone}
+          </div>
+
+          <div className="space-x-1 pb-1">
+            {(host.host.tags || []).map((x) => (
+              <Chip key={x} size="sm" color="primary" variant="flat" radius="sm">
+                {x}
+              </Chip>
+            ))}
+          </div>
         </div>
       </h1>
 
diff --git a/website/src/components/report/TabulateHosts.tsx b/website/src/components/report/TabulateHosts.tsx
index 37d9d83..b4c9c86 100644
--- a/website/src/components/report/TabulateHosts.tsx
+++ b/website/src/components/report/TabulateHosts.tsx
@@ -40,6 +40,28 @@ export function TabulateHosts({
           </Select>
         </div>
 
+        <div className="rounded-lg bg-gray-100 p-2">
+          <Select
+            label="Timezones"
+            selectionMode="multiple"
+            variant="underlined"
+            className="max-w-xs"
+            onSelectionChange={(x: Selection) => {
+              setFilters({ ...filters, timezone: x === 'all' || x.size === 0 ? () => true : (h) => x.has(h.timezone) });
+            }}
+          >
+            {hosts
+              .map((host) => host.timezone)
+              .sort()
+              .filter(function (el, i, a) {
+                return i === a.indexOf(el);
+              })
+              .map((t) => (
+                <SelectItem key={t}>{t}</SelectItem>
+              ))}
+          </Select>
+        </div>
+
         <div className="rounded-lg bg-gray-100 p-2">
           <Select
             label="Clouds"
@@ -137,7 +159,7 @@ export function TabulateHosts({
           </Select>
         </div>
 
-        <div className="col-span-5 rounded-lg bg-gray-100 p-2">
+        <div className="col-span-4 rounded-lg bg-gray-100 p-2">
           <Select
             label="Authorized SSH Keys"
             selectionMode="multiple"
@@ -300,7 +322,9 @@ export function TabulateHosts({
         showSelectionCheckboxes={false}
       >
         <TableHeader>
+          <TableColumn key="name">Name</TableColumn>
           <TableColumn key="hostname">Hostname</TableColumn>
+          <TableColumn key="timezone">Timezone</TableColumn>
           <TableColumn key="cloud">Cloud</TableColumn>
           <TableColumn key="distro">Distribution</TableColumn>
           <TableColumn key="arch">Arch</TableColumn>
@@ -353,6 +377,8 @@ export function TabulateHosts({
                   )}
                 </div>
               </TableCell>
+              <TableCell>{host.hostname}</TableCell>
+              <TableCell>{host.timezone.split(' ', 1)[0] || 'UNKNOWN'}</TableCell>
               <TableCell>
                 {host.cloud.name}
                 {host.cloud.hostRegion && <span className="text-xs text-gray-400"> {host.cloud.hostRegion}</span>}
diff --git a/website/src/lib/data.ts b/website/src/lib/data.ts
index eb818d9..e8b07b7 100644
--- a/website/src/lib/data.ts
+++ b/website/src/lib/data.ts
@@ -144,6 +144,7 @@ export const LHP_PATROL_REPORT_SCHEMA = {
             required: ['name'],
             type: 'object',
           },
+          hostname: { $comment: 'Hostname of the host.', type: 'string' },
           kernel: {
             $comment: 'Kernel information.\nKernel Information\nKernel',
             properties: {
@@ -167,6 +168,7 @@ export const LHP_PATROL_REPORT_SCHEMA = {
             items: { type: 'string' },
             type: 'array',
           },
+          timezone: { $comment: 'Timezone of the host.', type: 'string' },
         },
         required: [
           'systemdTimers',
@@ -177,6 +179,8 @@ export const LHP_PATROL_REPORT_SCHEMA = {
           'kernel',
           'hardware',
           'cloud',
+          'timezone',
+          'hostname',
           'host',
         ],
         type: 'object',