From 2de9b13fced7273d1ce4f33f49dca2fe32e2d9f7 Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Tue, 16 Apr 2024 10:37:24 +0800
Subject: [PATCH] feat(website): report errors on the overview component

---
 website/src/components/report/TabOverview.tsx | 57 ++++++++++++-------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/website/src/components/report/TabOverview.tsx b/website/src/components/report/TabOverview.tsx
index 8c0ca6b..a087800 100644
--- a/website/src/components/report/TabOverview.tsx
+++ b/website/src/components/report/TabOverview.tsx
@@ -9,14 +9,8 @@ export function TabOverview({ data }: { data: HostPatrolReport }) {
   const sshkeys = Object.values(buildSshKeysTable(data));
 
   return (
-    <div className="flex flex-col space-y-8">
+    <div className="flex flex-col space-y-12">
       <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, {
@@ -44,20 +38,41 @@ export function TabOverview({ data }: { data: HostPatrolReport }) {
       </div>
 
       <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 className="w-full max-w-4xl space-y-8 rounded border border-indigo-200 bg-indigo-100 p-6 shadow">
+          <p className="text-center text-lg">
+            {data.errors.length > 0 ? (
+              <span className="text-red-600">
+                <span className="font-bold">
+                  {data.errors.length} error{data.errors.length === 1 ? '' : 's'}
+                </span>{' '}
+                were encountered during patrol.
+              </span>
+            ) : (
+              <span className="text-green-600">No errors were encountered during the patrol.</span>
+            )}
+          </p>
+
+          {data.errors.map((error, i) => (
+            <div key={i} className="flex space-x-4 rounded border border-red-300 bg-red-200 p-4 text-red-600 shadow">
+              <span className="font-bold ">{error.host}</span> <span className="font-light">{error.message}</span>
+            </div>
+          ))}
+
+          <div className="text-center text-indigo-600">
+            <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>
+            .
+          </div>
+        </div>
       </div>
     </div>
   );