wip

package.json

@@ -14,6 +14,7 @@
     "apexcharts": "3.45.2",
     "axios": "1.6.7",
     "dotenv": "16.4.1",
+    "pinia": "^2.1.7",
     "qrcode.vue": "3.4.1",
     "quasar": "2.14.3",
     "vue": "3.4.15",
@@ -24,6 +25,8 @@
     "@vueuse/shared": "10.7.2",
     "monaco-editor": "0.45.0",
     "vuex": "4.1.0",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0",
     "yaml": "2.3.4"
   },
   "devDependencies": {

quasar.config.js

@@ -29,7 +29,7 @@ module.exports = configure(function (/* ctx */) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ["axios", "monaco", "integrations"],
+    boot: ["axios", "monaco", "pinia", "integrations"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ["app.sass"],

src/api/core.js

@@ -30,6 +30,33 @@ export async function fetchURLActions(params = {}) {
   }
 }
 
+export async function saveURLAction(payload) {
+  try {
+    const { data } = await axios.post(`${baseUrl}/urlaction/`, payload);
+    return data;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export async function editURLAction(id, payload) {
+  try {
+    const { data } = await axios.put(`${baseUrl}/urlaction/${id}/`, payload);
+    return data;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export async function removeURLAction(id) {
+  try {
+    const { data } = await axios.delete(`${baseUrl}/urlaction/${id}/`);
+    return data;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
 export async function runURLAction(payload) {
   try {
     const { data } = await axios.patch(`${baseUrl}/urlaction/run/`, payload);

src/api/core.ts

@@ -0,0 +1,32 @@
+import axios from "axios";
+
+import type { URLAction, URLActionRunResponse } from "@/types/core/urlactions";
+
+const baseUrl = "/core";
+
+export async function fetchURLActions(params = {}) {
+  const { data } = await axios.get(`${baseUrl}/urlaction/`, {
+    params: params,
+  });
+  return data;
+}
+
+export async function saveURLAction(action: URLAction) {
+  const { data } = await axios.post(`${baseUrl}/urlaction/`, action);
+  return data;
+}
+
+export async function editURLAction(id: number, action: URLAction) {
+  const { data } = await axios.put(`${baseUrl}/urlaction/${id}/`, action);
+  return data;
+}
+
+export async function removeURLAction(id: number) {
+  const { data } = await axios.delete(`${baseUrl}/urlaction/${id}/`);
+  return data;
+}
+
+export async function runURLAction(id: number, payload): Promise<URLActionRunResponse> {
+  const { data } = await axios.post(`${baseUrl}/urlaction/${id}/run/`);
+  return data;
+}

src/boot/axios.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import { useAuthStore } from "@/stores/auth";
 import { Notify } from "quasar";
 
 export const getBaseUrl = () => {
@@ -18,27 +19,22 @@ export function setErrorMessage(data, message) {
   ];
 }
 
-export default function ({ app, router, store }) {
+export default function ({ app, router }) {
   app.config.globalProperties.$axios = axios;
 
   axios.interceptors.request.use(
     function (config) {
+      const auth = useAuthStore();
       config.baseURL = getBaseUrl();
-      const token = store.state.token;
+      const token = auth.token;
       if (token != null) {
         config.headers.Authorization = `Token ${token}`;
       }
-      // config.transformResponse = [
-      //   function (data) {
-      //     console.log(data);
-      //     return data;
-      //   },
-      // ];
       return config;
     },
     function (err) {
       return Promise.reject(err);
-    }
+    },
   );
 
   axios.interceptors.response.use(
@@ -101,6 +97,6 @@ export default function ({ app, router, store }) {
       }
 
       return Promise.reject({ ...error });
-    }
+    },
   );
 }

src/boot/pinia.ts

@@ -0,0 +1,11 @@
+import { boot } from "quasar/wrappers";
+import { createPinia } from "pinia";
+
+export default boot(({ app }) => {
+  const pinia = createPinia();
+
+  app.use(pinia);
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+});

src/components/core/TRMMCommandPrompt.vue

@@ -0,0 +1,93 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    @hide="onDialogHide"
+    maximized
+    @show="setupXTerm"
+    @before-hide="disconnect"
+  >
+    <q-card class="q-dialog-plugin">
+      <q-bar>
+        Tactical RMM Server Command Prompt - Careful! With great power comes
+        great responsibility!
+        <q-space />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+
+      <div
+        ref="xtermContainer"
+        :style="{ height: `${$q.screen.height - 34}px` }"
+      ></div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { useResizeObserver, useDebounceFn } from "@vueuse/core";
+import { useDashWSConnection } from "@/websocket/websocket";
+
+import "xterm/css/xterm.css";
+
+// emits
+defineEmits([...useDialogPluginComponent.emits]);
+
+// setup quasar plugins
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+
+// set ws connection
+const { data, send } = useDashWSConnection();
+
+watch(data, (newValue) => {
+  if (newValue.action === "trmmcli.output") term.write(newValue.data.output);
+});
+
+const xtermContainer = ref<HTMLElement | null>(null);
+
+let term: Terminal;
+const fit = new FitAddon();
+
+// Setup Xterm
+function setupXTerm() {
+  term = new Terminal({
+    cursorBlink: true,
+    scrollback: 1000,
+  });
+
+  term.loadAddon(fit);
+  term.open(xtermContainer.value!);
+  fit.fit();
+  term.onData((data) => {
+    console.log("browser terminal received new data:", data);
+    send(JSON.stringify({ action: "trmmcli.input", data: { input: data } }));
+  });
+
+  send(
+    JSON.stringify({
+      action: "trmmcli.connect",
+      data: { cols: term.cols, rows: term.rows },
+    }),
+  );
+
+  useResizeObserver(dialogRef, () => {
+    resizeWindow();
+  });
+}
+
+const resizeWindow = useDebounceFn(() => {
+  fit.fit();
+  const dims = { cols: term.cols, rows: term.rows };
+  console.log("sending new dimensions to server's pty", dims);
+  send(JSON.stringify({ action: "trmmcli.resize", data: dims }));
+}, 300);
+
+function disconnect() {
+  term.dispose();
+  send(JSON.stringify({ action: "trmmcli.disconnect" }));
+}
+</script>