From 01cf9951a3d256435150ff58a904fc644cfa47ca Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Tue, 16 Apr 2024 10:20:28 +0800
Subject: [PATCH] feat(website): add report meta to overview component

---
 website/package-lock.json                     | 15 ++++
 website/package.json                          |  2 +
 website/src/components/report/TabOverview.tsx | 73 ++++++++++++-------
 3 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index ac3f271..119ee2c 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -10,12 +10,14 @@
       "dependencies": {
         "@nextui-org/react": "^2.2.10",
         "ajv": "^8.12.0",
+        "dayjs": "^1.11.10",
         "framer-motion": "^11.0.22",
         "json-schema-to-ts": "^3.0.1",
         "next": "14.1.4",
         "purify-ts": "^2.0.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-icons": "^5.1.0",
         "react-toastify": "^10.0.5",
         "recharts": "^2.12.3"
       },
@@ -3601,6 +3603,11 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "dev": true,
@@ -6125,6 +6132,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "license": "MIT"
diff --git a/website/package.json b/website/package.json
index bd7ac05..2862f8f 100644
--- a/website/package.json
+++ b/website/package.json
@@ -14,12 +14,14 @@
   "dependencies": {
     "@nextui-org/react": "^2.2.10",
     "ajv": "^8.12.0",
+    "dayjs": "^1.11.10",
     "framer-motion": "^11.0.22",
     "json-schema-to-ts": "^3.0.1",
     "next": "14.1.4",
     "purify-ts": "^2.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.1.0",
     "react-toastify": "^10.0.5",
     "recharts": "^2.12.3"
   },
diff --git a/website/src/components/report/TabOverview.tsx b/website/src/components/report/TabOverview.tsx
index b4734b0..8c0ca6b 100644
--- a/website/src/components/report/TabOverview.tsx
+++ b/website/src/components/report/TabOverview.tsx
@@ -1,40 +1,63 @@
 import { HostPatrolReport, buildSshKeysTable } from '@/lib/data';
+import dayjs from 'dayjs';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import { FaCircleInfo } from 'react-icons/fa6';
 import { SimpleBarChart, histogram } from '../helpers';
+dayjs.extend(LocalizedFormat);
 
 export function TabOverview({ data }: { data: HostPatrolReport }) {
   const sshkeys = Object.values(buildSshKeysTable(data));
 
   return (
-    <div className="mt-4 grid grid-cols-4 gap-4">
-      <div className="col-span-4 text-center font-bold text-indigo-500">
-        Showing summary of {data.hosts.length} host{data.hosts.length === 1 ? '' : 's'}, {data.knownSshKeys.length} SSH
-        public key{sshkeys.length === 1 ? '' : 's'} known, and total of {sshkeys.length} SSH public key
-        {sshkeys.length === 1 ? '' : 's'} seen.
-      </div>
+    <div className="flex flex-col space-y-8">
+      <div className="mt-4 grid grid-cols-4 gap-4">
+        <div className="col-span-4 text-center font-bold text-indigo-500">
+          Showing summary of {data.hosts.length} host{data.hosts.length === 1 ? '' : 's'}, {data.knownSshKeys.length}{' '}
+          SSH public key{sshkeys.length === 1 ? '' : 's'} known, and total of {sshkeys.length} SSH public key
+          {sshkeys.length === 1 ? '' : 's'} seen.
+        </div>
 
-      <div>
-        <SimpleBarChart
-          data={histogram((x) => (x.isKnown ? 'Known SSH Keys' : 'Unknown SSH Keys'), sshkeys, {
-            'Known SSH Keys': 0,
-            'Unknown SSH Keys': 0,
-          })}
-          size={[480, 320]}
-        />
-      </div>
+        <div>
+          <SimpleBarChart
+            data={histogram((x) => (x.isKnown ? 'Known SSH Keys' : 'Unknown SSH Keys'), sshkeys, {
+              'Known SSH Keys': 0,
+              'Unknown SSH Keys': 0,
+            })}
+            size={[480, 320]}
+          />
+        </div>
 
-      <div>
-        <SimpleBarChart
-          data={histogram((x) => x.timezone.split(' ', 1)[0] || 'UNKNOWN', data.hosts)}
-          size={[480, 320]}
-        />
-      </div>
+        <div>
+          <SimpleBarChart
+            data={histogram((x) => x.timezone.split(' ', 1)[0] || 'UNKNOWN', data.hosts)}
+            size={[480, 320]}
+          />
+        </div>
+
+        <div>
+          <SimpleBarChart data={histogram((x) => x.cloud.name, data.hosts)} size={[480, 320]} />
+        </div>
 
-      <div>
-        <SimpleBarChart data={histogram((x) => x.cloud.name, data.hosts)} size={[480, 320]} />
+        <div>
+          <SimpleBarChart data={histogram((x) => x.distribution.name, data.hosts)} size={[480, 320]} />
+        </div>
       </div>
 
-      <div>
-        <SimpleBarChart data={histogram((x) => x.distribution.name, data.hosts)} size={[480, 320]} />
+      <div className="flex flex-col items-center">
+        <span className="rounded border border-indigo-300 bg-indigo-200 p-4 text-center text-indigo-900 shadow">
+          <FaCircleInfo className="inline" /> This report is generated by{' '}
+          <abbr
+            title={`${data.meta.buildTag} - ${data.meta.buildHash}`}
+            className="cursor-help font-bold underline decoration-dashed"
+          >
+            hostpatrol v{data.meta.version}
+          </abbr>{' '}
+          on{' '}
+          <abbr title={data.meta.timestamp} className="cursor-help font-bold underline decoration-dashed">
+            {dayjs(data.meta.timestamp).format('LLLL')}
+          </abbr>
+          .
+        </span>
       </div>
     </div>
   );