change&prefix

Author: kellerza

README.md

@@ -15,16 +15,20 @@ The frontend was built using:
 
 Github Actions will test, build and upload the frontend to the [labctl repo](https://github.com/labctl/labctl/tree/main/helpers/frontend/html).
 
-# Local testing
+## Testing the frontend locally
 
-For local testing you could point it towards another running labctl server instance. This instance is define in the **localhost** variable in Local Storage. You can change this in Web Tools: Application->Local Storage from the default, *tes4:8080*.
+When the frontend opens it usually connects to the host and URL on which it was served,- this will not work while testing the frontend on localhost with vite.
 
-When the frontend opens on a http://localhost:* URL it will use the **localhost** variable, else it will connect to the host and URL on which it was served.
+For local testing you should point the fontend toward a running labctl server instance. This instance is defined in the **localhost** variable in Local Storage. You can change this in Web Tools: Application->Local Storage from the default, `https://tes4:8080/labctl`.
 
 1. Clone the repo and install deps: `npm install`
 2. Start the web server with `npm run dev` or `npx vite`
-3. When the frontend runs on http://localhost it will try to connect to a server identified by the value of **localhost** in Local Storage
+3. When the frontend runs on <http://localhost> it will try to connect to a server identified by the value of **localhost** in Local Storage
 
-# Local unit tests
+## Local unit tests
 
 `npm test` or `npx vitest` for continuous testing during development
+
+## Web API endpoints & Websocket messages
+
+These are documented in the labctl main repo's README file - [labctl/labctl](https://github.com/labctl/labctl)

src/App.vue

@@ -79,7 +79,6 @@ import {
   lightTheme,
   NAvatar,
 } from "naive-ui"
-
 import { useMainStore } from "@/stores/mainStore"
 import { useWebSocket } from "@vueuse/core"
 import { ws_uri } from "@/utils/const"

src/stores/mainStore.ts

@@ -27,6 +27,7 @@ export const useMainStore = defineStore("main", {
     /** topo file */
     topo: {
       name: "",
+      prefix: undefined as string | undefined,
       nodes: {} as Nodes,
       links: {} as Links,
       /** compiled vars per NE */
@@ -70,6 +71,14 @@ export const useMainStore = defineStore("main", {
       } as WsMessage
     },
 
+    hostName: (state) => (nodeName: string) => {
+      // https://containerlab.dev/manual/topo-def-file/#prefix
+      const p: string = state.topo.prefix ?? "clab"
+      if (p === "") return nodeName
+      if (p === "__lab-name") return `${state.topo.name}-${nodeName}`
+      return `${p}-${state.topo.name}-${nodeName}`
+    },
+
     linkVars: (state) => (linkid: string) => {
       const l = state.topo.links[linkid]
       if (!l) {
@@ -166,6 +175,11 @@ export const useMainStore = defineStore("main", {
       json_fetch(base_uri + "vars").then((resp) => {
         Object.assign(this.topo.vars, resp.data)
       })
+      this.fetch_templates()
+      this.fetch_labfiles()
+    },
+
+    fetch_templates() {
       json_fetch(base_uri + "templates")
         .then((resp) => {
           Object.assign(this.templateFiles, resp.data)
@@ -175,14 +189,17 @@ export const useMainStore = defineStore("main", {
             `Could not load templates\n\n${err}\n\nReload the webpage and/or check the server`
           )
         )
+    },
+
+    fetch_labfiles() {
       json_fetch(base_uri + "files")
         .then((resp) => {
           Object.assign(this.labFiles, resp.data)
         })
         .catch(() => {
+          MsgError("Could not load lab files")
           this.labFiles = { "readme.md": "could not load lab files" }
         })
-      // }
     },
 
     load_config(data?: Array<WsTxResponse>) {
@@ -229,6 +246,11 @@ export const useMainStore = defineStore("main", {
             MsgInfo(msg.msg ?? JSON.stringify(msg))
             return // don't emit!
 
+          case WsMsgCodes.fschange:
+            console.log(msg)
+            this.fschange(msg.msg ?? "")
+            return // don't emit!
+
           default:
             console.debug("unknown msg code", msg)
             MsgError(`unknown message code\n\n${JSON.stringify(msg)}`, {
@@ -243,6 +265,22 @@ export const useMainStore = defineStore("main", {
       // Pass on the message for updates etc
       wsRxBus.emit(msg)
     },
+
+    fschange(name: string) {
+      if (this.labFiles[name] !== undefined) {
+        console.log("load lf!", name)
+        this.fetch_labfiles()
+        return
+      }
+      const np = name.split("/")
+      const basename = np[np.length - 1]
+      if (this.templateFiles[basename] !== undefined) {
+        console.log("load t!", name)
+        this.fetch_templates()
+        return
+      }
+      console.log("unhandled file change: ", name)
+    },
   },
   debounce: {
     save: 1500, // debounce save by 300ms

src/utils/const.ts

@@ -1,26 +1,36 @@
-export const base_uri = (() => {
-  if (typeof window === "undefined") return "/labctl/"
-  const p = window.location.pathname.split("/", 2)
-  return `/${p[1] || "labctl"}/`
-})()
-
 /** If localhost, get localhost+port from local storage, else null */
+function lhURL(): URL {
+  let u = localStorage.getItem("localhost")
+  if (u === null) {
+    u = "https://tes4:8080/labctl"
+    localStorage.setItem("localhost", u)
+  }
+  return new URL(u)
+}
+
 export const localhost = (() => {
   if (typeof window === "undefined") return ""
-  const lh = "localhost"
   const h = window.location.hostname
-  if (!(h === lh || h === "127.0.0.1")) {
+  if (!(h === "localhost" || h === "127.0.0.1")) {
     return ""
   }
-  let s = localStorage.getItem(lh)
-  if (s === null) {
-    s = "tes4:8080"
-    localStorage.setItem(lh, s)
-  }
+  const url = lhURL()
   console.warn(
-    `Using upstream server ${s}. Change in Dev Tools --> Application --> Local Storage [key=${lh}] & refresh.`
+    `Using upstream server ${url.host}${url.pathname}. Change in Dev Tools --> Application --> Local Storage [key=localhost] & refresh.`
   )
-  return s
+  return url.host
+})()
+
+export const base_uri = (() => {
+  if (localhost) {
+    const url = lhURL()
+    if (url.pathname && url.pathname !== "/") {
+      return url.pathname.endsWith("/") ? url.pathname : url.pathname + "/"
+    }
+  }
+  if (typeof window === "undefined") return "/labctl/"
+  const p = window.location.pathname.split("/", 2)
+  return `/${p[1] || "labctl"}/`
 })()
 
 export const api_uri = (() => {

src/utils/websocket.ts

@@ -34,6 +34,7 @@ export enum WsMsgCodes {
   error = "error",
   warn = "warn",
   info = "info",
+  fschange = "fschange",
 }
 
 export interface WsTxResponse {

src/views/graphView.vue

@@ -150,7 +150,7 @@
       :span="panelWidth[n] ?? 2"
     >
       <panel-xterm
-        :target="`clab-${store.topo.name}-${n}`"
+        :target="store.hostName(n)"
         :visible="panelWidth[n] ?? 2"
         @update:visible="(v) => sshVis(n, v)"
       />
@@ -382,7 +382,7 @@ function updatelabels() {
 }
 
 function toggleVisible(v: number) {
-  return v === 0 ? 2 : -v
+  return isNaN(v) || v === 0 ? 2 : -v
 }
 
 const sshNodes = ref([] as string[])