run

Author: kellerza

package-lock.json

@@ -30,7 +30,8 @@
     "vue3-json-viewer": "^2.2.2",
     "webfontloader": "^1.6.28",
     "xterm": "^5.0.0",
-    "xterm-addon-fit": "^0.7.0"
+    "xterm-addon-fit": "^0.7.0",
+    "xterm-addon-webgl": "^0.16.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.2",

package.json

@@ -96,10 +96,10 @@ const theme = computed(() => (store.dark ? darkTheme : lightTheme))
 
 /** websocket to eventbus handlers */
 const {
-  status,
-  data,
-  send,
-  open: openWs,
+  status: wsStatus,
+  data: wsData,
+  send: wsSend,
+  open: wsOpen,
 } = useWebSocket<string>(ws_uri, {
   heartbeat: {
     message: "%",
@@ -112,11 +112,11 @@ const {
 
 wsTxBus.on((tx) => {
   console.debug("WS Tx", tx)
-  send(JSON.stringify(tx))
+  wsSend(JSON.stringify(tx))
 })
 
 // on any data change, transmit the message on the template bus or send to store
-watch(data, (msg) => {
+watch(wsData, (msg) => {
   if (!msg) return
   const m: WsMessage = JSON.parse(msg)
   if (m.code === WsMsgCodes.template) {
@@ -125,17 +125,17 @@ watch(data, (msg) => {
     store.websock_handler(m)
   }
   // Clear the last rx websocket message to allow duplicate messages (i.e file saves)
-  if (msg === data.value) data.value = null
+  if (msg === wsData.value) wsData.value = null
 })
 
-watch(status, (s) => {
+watch(wsStatus, (s) => {
   if (s === "CLOSED") {
     setTimeout(open_if_closed, 2000)
   }
 })
 
 const wsstatus = computed(() => {
-  switch (status.value) {
+  switch (wsStatus.value) {
     case "OPEN":
       return { color: "green", icon: ContactlessTwotone }
     case "CONNECTING":
@@ -147,12 +147,12 @@ const wsstatus = computed(() => {
 
 onBeforeMount(() => {
   store.init()
-  openWs()
+  wsOpen()
 })
 
 function open_if_closed() {
-  if (status.value !== "OPEN") {
-    open()
+  if (wsStatus.value !== "OPEN") {
+    wsOpen()
   }
 }
 </script>

src/App.vue

@@ -33,7 +33,7 @@ const md = computed(() => {
   try {
     return DOMPurify.sanitize(result, {
       ALLOWED_URI_REGEXP:
-        /^(?:(?:(?:f|ht)tps?|mailto|es|path|run|config|gnmic|containerlab|clab):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
+        /^(?:(?:(?:f|ht)tps?|mailto|es|path|run|run\+|config|ssh|gnmic|containerlab|clab):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
     })
   } catch (error) {
     /* eslint-disable-next-line no-console */
@@ -63,9 +63,6 @@ function uriHandler(e: Event) {
     command: url.replaceAll("/", " ").trim() || target.textContent || "",
   } as ActionEvent
   switch (proto) {
-    case "run":
-      action.action = "config"
-      break
     case "containerlab":
       action.action = "clab"
       break

src/components/div_markdown.vue

@@ -8,24 +8,37 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { IDisposable, Terminal } from "xterm"
 import { FitAddon } from "xterm-addon-fit"
+import { WebglAddon } from "xterm-addon-webgl"
 import { Base64 } from "js-base64"
 import { useResizeObserver, useWebSocket } from "@vueuse/core"
 import { ws_uri } from "@/utils/const"
 import { webttyRx, webttyTx } from "@/utils/webtty"
 
-import "xterm/css/xterm.css"
 import { ActionEvent, actionBus } from "@/utils/action"
+import "xterm/css/xterm.css"
 
-interface PropDef {
-  cmd: string
-  connected: boolean
-}
-const props = withDefaults(defineProps<PropDef>(), { connected: true })
-const emit = defineEmits(["update:connected"])
-defineExpose({ focus })
+const props = withDefaults(
+  defineProps<{
+    /** The command to execute */
+    cmd: string
+    connected: boolean
+  }>(),
+  { connected: true }
+)
+const emit = defineEmits<{
+  (e: "update:connected", connected: boolean): void
+}>()
+defineExpose({ focus, fit })
 
 const terminal = ref()
 
+function fit() {
+  fitAddon.fit()
+
+  term.refresh(0, term.rows - 1)
+  console.log("fit")
+}
+
 const term = new Terminal({
   rows: 24,
   cols: 80,
@@ -139,6 +152,7 @@ useResizeObserver(terminal, (el) => {
 onMounted(() => {
   open()
   term.loadAddon(fitAddon)
+  term.loadAddon(new WebglAddon())
   term.open(terminal.value)
   term.writeln(`$ \x1B[1;3;31m${props.cmd}\x1B[0m`)
   focus()
@@ -152,12 +166,12 @@ onBeforeUnmount(() => {
 })
 
 function focus() {
-  terminal.value.scrollIntoView()
+  terminal.value?.scrollIntoView()
   term.focus()
 }
 
 actionBus.on((action: ActionEvent) => {
-  if (action.action == "ssh" && props.cmd.endsWith(action.command)) {
+  if (action.action == "focus" && props.cmd.endsWith(action.command)) {
     // console.log("focus", action.command, props.cmd)
     focus()
   }

src/components/div_xterm.vue

@@ -35,12 +35,14 @@ import LPanel from "@/components/l_panel.vue"
 import { PlugDisconnected20Filled } from "@vicons/fluent"
 import { CancelOutlined, ConnectWithoutContactRound } from "@vicons/material"
 
-export interface PropDef {
+const props = defineProps<{
   target: string
   visible: number
-}
-const props = defineProps<PropDef>()
-const emit = defineEmits(["close", "update:visible"])
+}>()
+const emit = defineEmits<{
+  (e: "close"): void
+  (e: "update:visible", v: number): void
+}>()
 
 const vis = computed({
   get: () => props.visible,

src/components/panel_xterm.vue

@@ -0,0 +1,95 @@
+console.log("visible")
+<template>
+  <l-panel
+    v-model:visible="vis"
+    :title="'Run script ' + props.cmd"
+    :min-v="minV"
+    :max-v="maxV"
+  >
+    <template #header-extra>
+      <n-button v-if="connected" quaternary @click="connected = !connected">
+        <n-icon
+          :component="connected ? CancelOutlined : PlugDisconnected20Filled"
+        />
+        {{ connected ? "Disconnect" : "Connect" }}
+      </n-button>
+    </template>
+    <div ref="xtermwrap">
+      <div-xterm
+        v-if="!delayShow || showterm"
+        v-model:connected="connected"
+        :cmd="props.cmd"
+      />
+    </div>
+  </l-panel>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { NButton, NIcon } from "naive-ui"
+import DivXterm from "@/components/div_xterm.vue"
+import LPanel from "@/components/l_panel.vue"
+import { PlugDisconnected20Filled } from "@vicons/fluent"
+import { CancelOutlined } from "@vicons/material"
+import { useElementVisibility } from "@vueuse/core"
+
+const props = withDefaults(
+  defineProps<{
+    cmd: string
+    visible: number
+    minV?: number
+    maxV?: number
+    /** Delay the show for a 'modal' window */
+    delayShow?: boolean
+  }>(),
+  {
+    minV: 2,
+    maxV: 4,
+    delayShow: false,
+  }
+)
+const emit = defineEmits<{
+  (e: "close"): void
+  (e: "update:visible", v: number): void
+}>()
+
+const xtermwrap = ref<HTMLElement>()
+const isvisible = useElementVisibility(xtermwrap)
+watch(
+  () => isvisible.value,
+  (v) => {
+    console.log(props.delayShow)
+    if (props.delayShow && v) {
+      console.log("visible")
+      setTimeout(() => {
+        showterm.value = true
+      }, 200)
+    }
+  }
+)
+
+const vis = computed({
+  get: () => props.visible,
+  set: (v) => {
+    if (v < 0) {
+      emit("close")
+    }
+    emit("update:visible", v)
+  },
+})
+
+const showterm = ref(false)
+const connected = ref(false)
+
+// watch(
+//   () => props.visible,
+//   (v: number) => {
+//     console.log("visible", v, props.visible)
+//     if (v > 0) {
+//       return
+//     }
+//   }
+// )
+</script>
+
+<style></style>

src/components/panel_xterm_exec.vue

@@ -1,7 +1,24 @@
 import { useEventBus } from "@vueuse/core"
 
 export interface ActionEvent {
-  action: "config" | "clab" | "path" | "center" | "ssh"
+  /** action can be one of:
+   * - config: Send commands using the config engine
+   * - run: execute a script on the server
+   * - run+: execute a long-running script on the server
+   * - clab: execute clab commands (not yet implemented)
+   * - path: highlight a path
+   * - ssh: ssh to a node
+   * - center: center the graph on a node
+   */
+  action:
+    | "config"
+    | "clab"
+    | "path"
+    | "center"
+    | "ssh"
+    | "run"
+    | "run+"
+    | "focus"
   command: string
 }
 

src/utils/action.ts

@@ -0,0 +1,4 @@
+/** Toggle visibility (negative) */
+export function toggleVis(v: number) {
+  return isNaN(v) || v === 0 ? 2 : -v
+}