feat(website): add report meta to overview component

vst · Apr 16, 2024 · 01cf995 · 01cf995
1 parent 6bc4e0e
commit 01cf995
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 25 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git 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
@@ -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>
   );