feat(website): adopt host-level authorized SSH keys in related views

vst · Apr 9, 2024 · 394efb6 · 394efb6
1 parent f3b25d4
commit 394efb6
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 8 deletions.
diff --git a/website/src/components/report/App.tsx b/website/src/components/report/App.tsx
@@ -84,7 +84,7 @@ export function TabShowHostDetails({
       <div className="col-span-5">
         {host.caseOf({
           Nothing: () => <div className="p-4 text-red-400">Choose a host to view details.</div>,
-          Just: (x) => <ShowHostDetails host={x} />,
+          Just: (x) => <ShowHostDetails data={data} host={x} />,
         })}
       </div>
     </div>

diff --git a/website/src/components/report/ShowHostDetails.tsx b/website/src/components/report/ShowHostDetails.tsx
@@ -1,12 +1,15 @@
-import { LhpHostReport } from '@/lib/data';
+import { LhpHostReport, LhpPatrolReport } from '@/lib/data';
 import { Card, CardBody, CardHeader } from '@nextui-org/card';
 import { Chip } from '@nextui-org/chip';
 import { Listbox, ListboxItem } from '@nextui-org/listbox';
 import Link from 'next/link';
 import { toast } from 'react-toastify';
 import { KVBox } from '../helpers';
 
-export function ShowHostDetails({ host }: { host: LhpHostReport }) {
+export function ShowHostDetails({ host, data }: { host: LhpHostReport; data: LhpPatrolReport }) {
+  const authorizedKeysPlanned = [...(data.knownSshKeys || []), ...(host.host.knownSshKeys || [])];
+  const authorizedKeysPlannedSet = new Set(authorizedKeysPlanned.map((x) => x.fingerprint));
+
   return (
     <div className="space-y-4 px-4 py-4">
       <h1 className="flex flex-row items-center justify-between text-xl font-bold">
@@ -87,12 +90,39 @@ export function ShowHostDetails({ host }: { host: LhpHostReport }) {
       </div>
 
       <Card radius="sm" shadow="sm">
-        <CardHeader className="text-lg font-bold">Authorized SSH Keys</CardHeader>
+        <CardHeader className="text-lg font-bold">Authorized SSH Keys Found</CardHeader>
 
         <CardBody>
           <Listbox
             items={host.authorizedSshKeys}
             emptyContent={<span className="text-orange-400">No authorized SSH keys are found. Sounds weird?</span>}
+          >
+            {({ length, type, fingerprint, data, comment }) => (
+              <ListboxItem
+                key={data}
+                description={data}
+                startContent={authorizedKeysPlannedSet.has(fingerprint) ? <>🟢</> : <>🔴</>}
+                onPress={() => {
+                  navigator.clipboard.writeText(data);
+                  toast('SSH Key is copied to clipboard.');
+                }}
+              >
+                {`${type} (${length}) - ${fingerprint} - ${comment || ''}`}
+              </ListboxItem>
+            )}
+          </Listbox>
+        </CardBody>
+      </Card>
+
+      <Card radius="sm" shadow="sm">
+        <CardHeader className="text-lg font-bold">Authorized SSH Keys Planned</CardHeader>
+
+        <CardBody>
+          <Listbox
+            items={authorizedKeysPlanned}
+            emptyContent={
+              <span className="text-orange-400">No authorized SSH keys are found as planned. Sounds weird?</span>
+            }
           >
             {({ length, type, fingerprint, data, comment }) => (
               <ListboxItem

diff --git a/website/src/lib/data.ts b/website/src/lib/data.ts
@@ -139,6 +139,27 @@ export const LHP_PATROL_REPORT_SCHEMA = {
             properties: {
               data: { $comment: 'Arbitrary data for the host.' },
               id: { $comment: 'External identifier of the host.', type: 'string' },
+              knownSshKeys: {
+                $comment: 'Known SSH public keys for the host.',
+                items: {
+                  $comment: 'SSH Public Key Information\nSshPublicKey',
+                  properties: {
+                    comment: { $comment: 'Comment on the public key.', type: 'string' },
+                    data: { $comment: 'Original information.', type: 'string' },
+                    fingerprint: { $comment: 'Fingerprint of the public key.', type: 'string' },
+                    length: {
+                      $comment: 'Length of the public key.',
+                      maximum: 2147483647,
+                      minimum: -2147483648,
+                      type: 'number',
+                    },
+                    type: { $comment: 'Type of the public key.', type: 'string' },
+                  },
+                  required: ['fingerprint', 'comment', 'length', 'type', 'data'],
+                  type: 'object',
+                },
+                type: 'array',
+              },
               name: { $comment: 'Name of the host.', type: 'string' },
               ssh: {
                 $comment: 'SSH configuration.\nSSH Configuration\nSshConfig',
@@ -283,10 +304,10 @@ export function buildSshKeysTable(data: LhpPatrolReport): SshKeysTable {
   const keys: SshKeysTable = {};
 
   // Lookup table for known SSH public key comments by their fingerprint:
-  const knownComments: Record<string, string> = data.knownSshKeys.reduce(
-    (acc, x) => ({ ...acc, [x.fingerprint]: x.comment || '<NO-COMMENT>' }),
-    {}
-  );
+  const knownComments: Record<string, string> = [
+    ...data.knownSshKeys,
+    ...data.hosts.reduce((acc, x) => [...acc, ...(x.host.knownSshKeys || [])], [] as typeof data.knownSshKeys),
+  ].reduce((acc, x) => ({ ...acc, [x.fingerprint]: x.comment || '<NO-COMMENT>' }), {});
 
   // Iterate over all SSH public keys for all hosts and populate our registry:
   for (const host of data.hosts) {