From 91da46730891e1230b7965a5d644d4364c8b68ec Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Mon, 15 Apr 2024 19:30:09 +0800
Subject: [PATCH] fix(website): fix authorized SSH key states shown on host
 details

---
 website/src/components/report/ShowHostDetails.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/website/src/components/report/ShowHostDetails.tsx b/website/src/components/report/ShowHostDetails.tsx
index db51c6d..4a8063a 100644
--- a/website/src/components/report/ShowHostDetails.tsx
+++ b/website/src/components/report/ShowHostDetails.tsx
@@ -231,9 +231,11 @@ export function TabulateSshKeys({ host, data }: { host: HostReport; data: HostPa
   return (
     <Table aria-label="Table of SSH Keys" removeWrapper color="secondary" showSelectionCheckboxes={false}>
       <TableHeader>
+        <TableColumn key="problem">Problem?</TableColumn>
         <TableColumn key="type">Type</TableColumn>
         <TableColumn key="length">Length</TableColumn>
         <TableColumn key="known">Known?</TableColumn>
+        <TableColumn key="seen">Seen?</TableColumn>
         <TableColumn key="fingerprint">Fingerprint</TableColumn>
         <TableColumn key="seen-comments">Comments</TableColumn>
       </TableHeader>
@@ -247,15 +249,21 @@ export function TabulateSshKeys({ host, data }: { host: HostReport; data: HostPa
           const keyS = keysSeen[fp];
           const key = (keyG || keyH || keyS) as SshPublicKey;
           const known: 'global' | 'host' | 'unknown' = keyG ? 'global' : keyH ? 'host' : 'unknown';
+          const seen = keyS ? true : false;
+          const problem = (known === 'unknown' && seen) || ((known === 'host' || known === 'global') && !seen);
           const comments = Array.from(new Set(keys.filter((x) => x.fingerprint === fp).map((x) => x.comment)));
 
           return (
             <TableRow key={fp}>
+              <TableCell>{problem ? '🔴' : '🟢'}</TableCell>
               <TableCell>{key.type}</TableCell>
               <TableCell>{key.length}</TableCell>
               <TableCell>
                 <Chip color={known === 'global' ? 'success' : known === 'host' ? 'primary' : 'danger'}>{known}</Chip>
               </TableCell>
+              <TableCell>
+                <Chip color={seen ? 'success' : 'danger'}>{seen ? 'yes' : 'no'}</Chip>
+              </TableCell>
               <TableCell>
                 {key.fingerprint}
                 <div>