From a685e6fb153230fc0e03fb478fb70890381f75d7 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:05:04 +0200
Subject: [PATCH 1/2] enh: instance mgmt display

---
 .../dashboard/manage/ManageInstance/cmp.tsx   | 98 ++++++++++++-------
 src/domain/ssh.ts                             |  5 +
 .../dashboard/manage/useManageInstance.ts     | 26 ++++-
 3 files changed, 93 insertions(+), 36 deletions(-)

diff --git a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
index da2ec840..ee5d8e61 100644
--- a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
@@ -16,6 +16,7 @@ import VolumeList from '../VolumeList'
 import StatusLabel from '@/components/common/StatusLabel'
 import { ThreeDots } from 'react-loader-spinner'
 import { useTheme } from 'styled-components'
+import Link from 'next/link'
 
 export default function ManageInstance() {
   const {
@@ -23,8 +24,10 @@ export default function ManageInstance() {
     status,
     handleCopyHash,
     handleCopyConnect,
+    handleCopyIpv6,
     handleDelete,
     copyAndNotify,
+    mappedKeys
   } = useManageInstance()
 
   const theme = useTheme()
@@ -122,30 +125,6 @@ export default function ManageInstance() {
             </div>
 
             <div tw="mr-5">
-              <div className="tp-info text-main0">SSH COMMAND</div>
-              <div>
-                {status ? (
-                  <IconText iconName="copy" onClick={handleCopyConnect}>
-                    <GrayText>&gt;_ ssh root@{status.vm_ipv6}</GrayText>
-                  </IconText>
-                ) : (
-                  <div tw="flex items-end">
-                    <span tw="mr-1" className="tp-body1 fs-sm text-main2">
-                      Allocating
-                    </span>
-                    <ThreeDots
-                      width=".8rem"
-                      height="1rem"
-                      color={theme.color.main2}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <Separator />
-
-            <div tw="my-5">
               <div className="tp-info text-main0">EXPLORER</div>
               <div>
                 <a
@@ -161,26 +140,75 @@ export default function ManageInstance() {
               </div>
             </div>
 
-            <div tw="flex my-5">
-              <div tw="mr-5">
-                <div className="tp-info text-main0">SIZE</div>
+            <Separator />
+
+            <div tw="my-5">
+              <TextGradient type="h7" color="main1">
+                Connection methods
+              </TextGradient>
+              
+              <div tw="my-5">
+                <div className="tp-info text-main0">SSH COMMAND</div>
                 <div>
-                  <GrayText className="fs-xs tp-body1">
-                    {humanReadableSize(instance.size, 'MiB')}
-                  </GrayText>
+                  {status ? (
+                    <IconText iconName="copy" onClick={handleCopyConnect}>
+                      <GrayText>&gt;_ ssh root@{status.vm_ipv6}</GrayText>
+                    </IconText>
+                  ) : (
+                    <div tw="flex items-end">
+                      <span tw="mr-1" className="tp-body1 fs-sm text-main2">
+                        Allocating
+                      </span>
+                      <ThreeDots
+                        width=".8rem"
+                        height="1rem"
+                        color={theme.color.main2}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
 
-              <div tw="mr-5">
-                <div className="tp-info text-main0">CREATED ON</div>
+              <div tw='my-5'>
+                <div className="tp-info text-main0">IPv6</div>
                 <div>
-                  <GrayText className="fs-xs tp-body1">
-                    {instance.date}
-                  </GrayText>
+                  {status && (
+                    <IconText iconName="copy" onClick={handleCopyIpv6}>
+                      <GrayText>{status.vm_ipv6}</GrayText>
+                    </IconText>
+                  )}
                 </div>
               </div>
             </div>
 
+            <div tw="my-5">
+              <TextGradient type="h7" color="main1">
+                Accessible for
+              </TextGradient>
+              
+              <div tw="my-5 flex">
+                {
+                  mappedKeys.map((key, i) => (
+                    key && (
+                      <div key={key?.id} tw="mr-5">
+                        <div className="tp-info text-main0">SSH KEY #{i+1}</div>
+
+                        <Link
+                          className="tp-body1 fs-sm"
+                          href={'?hash=' + key.id}
+                          referrerPolicy="no-referrer"
+                        >
+                          <IconText iconName="square-up-right">
+                            <GrayText>{key.label}</GrayText>
+                          </IconText>
+                        </Link>
+                      </div>
+                    )
+                  ))
+                }
+              </div>
+            </div>
+
             {status?.node && (
               <>
                 <Separator />
diff --git a/src/domain/ssh.ts b/src/domain/ssh.ts
index b35bb3da..be6b1dd3 100644
--- a/src/domain/ssh.ts
+++ b/src/domain/ssh.ts
@@ -59,6 +59,11 @@ export class SSHKeyManager implements EntityManager<SSHKey, AddSSHKey> {
     return entity
   }
 
+  async getByValues(values: string[]): Promise<(SSHKey | undefined)[]> {
+    const all = await this.getAll()
+    return values.map((value) => all.find((d) => d.key === value))
+  }
+
   async add(
     sshKeys: AddSSHKey | AddSSHKey[],
     throwOnCollision?: boolean,
diff --git a/src/hooks/pages/dashboard/manage/useManageInstance.ts b/src/hooks/pages/dashboard/manage/useManageInstance.ts
index 2e315118..52cb1fec 100644
--- a/src/hooks/pages/dashboard/manage/useManageInstance.ts
+++ b/src/hooks/pages/dashboard/manage/useManageInstance.ts
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Instance, InstanceStatus } from '@/domain/instance'
 import { useAccountInstance } from '@/hooks/common/useAccountEntity/useAccountInstance'
 import { useCopyToClipboardAndNotify } from '@/hooks/common/useCopyToClipboard'
@@ -8,20 +8,25 @@ import { useInstanceManager } from '@/hooks/common/useManager/useInstanceManager
 import { useAppState } from '@/contexts/appState'
 import { ActionTypes } from '@/helpers/store'
 import { useInstanceStatus } from '@/hooks/common/useInstanceStatus'
+import { useSSHKeyManager } from '@/hooks/common/useManager/useSSHKeyManager'
+import { SSHKey } from '@/domain/ssh'
 
 export type ManageInstance = {
   instance?: Instance
   status?: InstanceStatus
   handleCopyHash: () => void
   handleCopyConnect: () => void
+  handleCopyIpv6: () => void
   handleDelete: () => void
   copyAndNotify: (text: string) => void
+  mappedKeys: (SSHKey | undefined)[]
 }
 
 export function useManageInstance(): ManageInstance {
   const router = useRouter()
   const { hash } = router.query
 
+  const [mappedKeys, setMappedKeys] = useState<(SSHKey | undefined)[]>([])
   const [instance] = useAccountInstance({ id: hash as string })
   const [, { onLoad, onSuccess, onError }] = useRequestState()
   const [, copyAndNotify] = useCopyToClipboardAndNotify()
@@ -30,6 +35,19 @@ export function useManageInstance(): ManageInstance {
   const status = useInstanceStatus(instance)
 
   const manager = useInstanceManager()
+  const sshKeyManager = useSSHKeyManager()
+
+  useEffect(() => {
+    if (!instance || !sshKeyManager) return
+    const getMapped = async () => {
+      const mapped = await sshKeyManager?.getByValues(
+        instance.authorized_keys || [],
+      )
+      setMappedKeys(mapped)
+    }
+
+    getMapped()
+  }, [sshKeyManager, instance])
 
   const handleCopyHash = useCallback(() => {
     copyAndNotify(instance?.id || '')
@@ -39,6 +57,10 @@ export function useManageInstance(): ManageInstance {
     copyAndNotify(`ssh root@${status?.vm_ipv6}`)
   }, [copyAndNotify, status])
 
+  const handleCopyIpv6 = useCallback(() => {
+    copyAndNotify(status?.vm_ipv6 || '')
+  }, [copyAndNotify, status])
+
   const handleDelete = useCallback(async () => {
     if (!instance) throw new Error('Invalid function')
     if (!manager) throw new Error('Manager not ready')
@@ -66,7 +88,9 @@ export function useManageInstance(): ManageInstance {
     status,
     handleCopyHash,
     handleCopyConnect,
+    handleCopyIpv6,
     handleDelete,
     copyAndNotify,
+    mappedKeys,
   }
 }

From 3ef042127823ea74ec255e15e1796a576b8e2195 Mon Sep 17 00:00:00 2001
From: Bonjour Internet <BjrInt@users.noreply.github.com>
Date: Wed, 6 Sep 2023 17:05:35 +0200
Subject: [PATCH 2/2] chore: lint

---
 .../dashboard/manage/ManageInstance/cmp.tsx   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
index ee5d8e61..64e7b4cb 100644
--- a/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
+++ b/src/components/pages/dashboard/manage/ManageInstance/cmp.tsx
@@ -27,7 +27,7 @@ export default function ManageInstance() {
     handleCopyIpv6,
     handleDelete,
     copyAndNotify,
-    mappedKeys
+    mappedKeys,
   } = useManageInstance()
 
   const theme = useTheme()
@@ -146,7 +146,7 @@ export default function ManageInstance() {
               <TextGradient type="h7" color="main1">
                 Connection methods
               </TextGradient>
-              
+
               <div tw="my-5">
                 <div className="tp-info text-main0">SSH COMMAND</div>
                 <div>
@@ -169,7 +169,7 @@ export default function ManageInstance() {
                 </div>
               </div>
 
-              <div tw='my-5'>
+              <div tw="my-5">
                 <div className="tp-info text-main0">IPv6</div>
                 <div>
                   {status && (
@@ -185,13 +185,15 @@ export default function ManageInstance() {
               <TextGradient type="h7" color="main1">
                 Accessible for
               </TextGradient>
-              
+
               <div tw="my-5 flex">
-                {
-                  mappedKeys.map((key, i) => (
+                {mappedKeys.map(
+                  (key, i) =>
                     key && (
                       <div key={key?.id} tw="mr-5">
-                        <div className="tp-info text-main0">SSH KEY #{i+1}</div>
+                        <div className="tp-info text-main0">
+                          SSH KEY #{i + 1}
+                        </div>
 
                         <Link
                           className="tp-body1 fs-sm"
@@ -203,9 +205,8 @@ export default function ManageInstance() {
                           </IconText>
                         </Link>
                       </div>
-                    )
-                  ))
-                }
+                    ),
+                )}
               </div>
             </div>