Enhance instance management view

src/components/pages/dashboard/manage/ManageInstance/cmp.tsx

@@ -16,15 +16,18 @@ 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 {
     instance,
     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,76 @@ 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 />

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,

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,
   }
 }