feat: show more VM info

src/api.ts

@@ -73,6 +73,7 @@ export interface VmInstance {
   disk_size: number;
   disk_id: number;
   status?: VmStatus;
+  mac_address: string;
 
   template?: VmTemplate;
   image?: VmOsImage;
@@ -106,7 +107,7 @@ export class LNVpsApi {
   constructor(
     readonly url: string,
     readonly publisher: EventPublisher | undefined,
-  ) {}
+  ) { }
 
   async listVms() {
     const { data } = await this.#handleResponse<ApiResponse<Array<VmInstance>>>(
@@ -192,6 +193,23 @@ export class LNVpsApi {
     return data;
   }
 
+  async connect_terminal(id: number) {
+    const u = `${this.url}/api/v1/console/${id}`;
+    const auth = await this.#auth_event(u, "GET");
+    const ws = new WebSocket(`${u}?auth=${base64.encode(
+      new TextEncoder().encode(JSON.stringify(auth)),
+    )}`);
+    return await new Promise<WebSocket>((resolve, reject) => {
+      ws.onopen = () => {
+        resolve(ws);
+      }
+      ws.onerror = (e) => {
+        reject(e)
+      }
+    })
+  }
+
+
   async #handleResponse<T extends ApiResponseBase>(rsp: Response) {
     if (rsp.ok) {
       return (await rsp.json()) as T;
@@ -206,25 +224,29 @@ export class LNVpsApi {
     }
   }
 
+  async #auth_event(url: string, method: string) {
+    return await this.publisher?.generic((eb) => {
+      return eb
+        .kind(EventKind.HttpAuthentication)
+        .tag(["u", url])
+        .tag(["method", method]);
+    })
+  }
+
+  async #auth(url: string, method: string) {
+    const auth = await this.#auth_event(url, method);
+    if (auth) {
+      return `Nostr ${base64.encode(
+        new TextEncoder().encode(JSON.stringify(auth)),
+      )}`;
+    }
+  }
+
   async #req(
     path: string,
     method: "GET" | "POST" | "DELETE" | "PUT" | "PATCH",
     body?: object,
   ) {
-    const auth = async (url: string, method: string) => {
-      const auth = await this.publisher?.generic((eb) => {
-        return eb
-          .kind(EventKind.HttpAuthentication)
-          .tag(["u", url])
-          .tag(["method", method]);
-      });
-      if (auth) {
-        return `Nostr ${base64.encode(
-          new TextEncoder().encode(JSON.stringify(auth)),
-        )}`;
-      }
-    };
-
     const u = `${this.url}${path}`;
     return await fetch(u, {
       method,
@@ -232,7 +254,7 @@ export class LNVpsApi {
       headers: {
         accept: "application/json",
         "content-type": "application/json",
-        authorization: (await auth(u, method)) ?? "",
+        authorization: (await this.#auth(u, method)) ?? "",
       },
     });
   }

src/pages/vm.tsx

@@ -4,10 +4,18 @@ import VpsInstanceRow from "../components/vps-instance";
 import useLogin from "../hooks/login";
 import { ApiUrl } from "../const";
 import { EventPublisher } from "@snort/system";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import VpsPayment from "../components/vps-payment";
 import CostLabel from "../components/cost";
 import { AsyncButton } from "../components/button";
+import { AttachAddon } from "@xterm/addon-attach";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebglAddon } from "@xterm/addon-webgl";
+import "@xterm/xterm/css/xterm.css";
+import { toEui64 } from "../utils";
+
+const fit = new FitAddon();
 
 export default function VmPage() {
   const { state } = useLocation() as { state?: VmInstance };
@@ -15,6 +23,8 @@ export default function VmPage() {
   const login = useLogin();
   const navigate = useNavigate();
   const [payment, setPayment] = useState<VmPayment>();
+  const [term, setTerm] = useState<Terminal>()
+  const termRef = useRef<HTMLDivElement | null>(null);
 
   const renew = useCallback(
     async function () {
@@ -29,6 +39,36 @@ export default function VmPage() {
     [login, state],
   );
 
+  async function openTerminal() {
+    if (!login?.signer || !state) return;
+    const api = new LNVpsApi(
+      ApiUrl,
+      new EventPublisher(login.signer, login.pubkey),
+    );
+    const ws = await api.connect_terminal(state.id);
+    const te = new Terminal();
+    const webgl = new WebglAddon();
+    webgl.onContextLoss(() => {
+      webgl.dispose();
+    });
+    te.loadAddon(webgl);
+    te.loadAddon(fit);
+    te.onResize(({ cols, rows }) => {
+      ws.send(`${cols}:${rows}`);
+    })
+    const attach = new AttachAddon(ws);
+    te.loadAddon(attach);
+    setTerm(te);
+  }
+
+  useEffect(() => {
+    if (term && termRef.current) {
+      term.open(termRef.current);
+      term.focus();
+      fit.fit();
+    }
+  }, [termRef, term, fit]);
+
   useEffect(() => {
     switch (action) {
       case "renew":
@@ -56,8 +96,8 @@ export default function VmPage() {
           <AsyncButton onClick={() => navigate("/vm/renew", { state })}>
             Extend Now
           </AsyncButton>
-          <div className="text-xl">Network</div>
-          <div className="flex gap-4">
+          <div className="flex gap-4 items-center">
+            <div className="text-xl">Network:</div>
             {(state.ip_assignments?.length ?? 0) === 0 && (
               <div className="text-sm text-red-500">No IP's assigned</div>
             )}
@@ -69,7 +109,19 @@ export default function VmPage() {
                 {a.ip.split("/")[0]}
               </div>
             ))}
+            <div className="text-sm bg-neutral-900 px-3 py-1 rounded-lg">
+              {toEui64("2a13:2c0::", state.mac_address)}
+            </div>
           </div>
+          <div className="flex gap-4 items-center">
+            <div className="text-xl">SSH Key:</div>
+            <div className="text-sm bg-neutral-900 px-3 py-1 rounded-lg">
+              {state.ssh_key?.name}
+            </div>
+          </div>
+          {/*
+          {!term && <AsyncButton onClick={openTerminal}>Connect Terminal</AsyncButton>}
+          {term && <div className="border p-2" ref={termRef}></div>}*/}
         </>
       )}
       {action === "renew" && (

src/utils.ts

@@ -1,3 +1,5 @@
+import { base16 } from "@scure/base";
+
 export async function openFile(): Promise<File | undefined> {
   return new Promise((resolve) => {
     const elm = document.createElement("input");
@@ -28,3 +30,14 @@ export async function openFile(): Promise<File | undefined> {
     );
   });
 }
+
+
+export function toEui64(prefix: string, mac: string) {
+  const macData = base16.decode(mac.replace(/:/g, "").toUpperCase());
+  const macExtended = new Uint8Array([...macData.subarray(0, 3), 0xff, 0xfe, ...macData.subarray(3, 6)])
+  macExtended[0] |= 0x02;
+  return (prefix + base16.encode(macExtended.subarray(0, 2)) + ":"
+    + base16.encode(macExtended.subarray(2, 4)) + ":"
+    + base16.encode(macExtended.subarray(4, 6)) + ":"
+    + base16.encode(macExtended.subarray(6, 8))).toLowerCase();
+}