Reporting Frontend Changes

.vscode/settings.json

@@ -9,13 +9,12 @@
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.watcherExclude": {
-    "files.watcherExclude": {
       "**/.git/objects/**": true,
       "**/.git/subtree-cache/**": true,
       "**/node_modules/": true,
       "/node_modules/**": true,
       "**/env/": true,
       "/env/**": true
-    }
-  }
+  },
+  "prettier.prettierPath": "./node_modules/prettier"
 }

package.json

@@ -15,23 +15,27 @@
     "axios": "1.5.1",
     "dotenv": "16.3.1",
     "qrcode.vue": "3.4.1",
-    "quasar": "2.12.7",
-    "vue": "3.3.4",
+    "quasar": "2.13.0",
+    "vue": "3.3.6",
     "vue3-ace-editor": "2.2.3",
     "vue3-apexcharts": "1.4.4",
     "vuedraggable": "4.1.0",
     "vue-router": "4.2.5",
-    "vuex": "4.1.0"
+    "@vueuse/core": "10.5.0",
+    "@vueuse/shared": "10.5.0",
+    "monaco-editor": "0.44.0",
+    "vuex": "4.1.0",
+    "yaml": "2.3.3"
   },
   "devDependencies": {
     "@quasar/cli": "2.3.0",
     "@intlify/unplugin-vue-i18n": "1.4.0",
     "@quasar/app-vite": "1.6.2",
-    "@types/node": "20.8.0",
-    "@typescript-eslint/eslint-plugin": "6.7.3",
-    "@typescript-eslint/parser": "6.7.3",
+    "@types/node": "20.8.7",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
     "autoprefixer": "10.4.16",
-    "eslint": "8.50.0",
+    "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-vue": "8.7.1",
     "prettier": "3.0.3",

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"],
+    boot: ["axios", "monaco", "integrations"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ["app.sass"],

src/boot/axios.js

@@ -9,6 +9,15 @@ export const getBaseUrl = () => {
   }
 };
 
+export function setErrorMessage(data, message) {
+  console.log(data);
+  return [
+    () => {
+      message;
+    },
+  ];
+}
+
 export default function ({ app, router, store }) {
   app.config.globalProperties.$axios = axios;
 
@@ -19,6 +28,12 @@ export default function ({ app, router, store }) {
       if (token != null) {
         config.headers.Authorization = `Token ${token}`;
       }
+      // config.transformResponse = [
+      //   function (data) {
+      //     console.log(data);
+      //     return data;
+      //   },
+      // ];
       return config;
     },
     function (err) {

src/boot/integrations.ts

@@ -0,0 +1,10 @@
+import { boot } from "quasar/wrappers";
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$integrations = {
+    fileBarIntegrations: [],
+    clientMenuIntegrations: [],
+    siteMenuIntegrations: [],
+    agentMenuIntegrations: [],
+  };
+});

src/boot/monaco.ts

@@ -0,0 +1,23 @@
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+
+import { boot } from "quasar/wrappers";
+
+export default boot(() => {
+  self.MonacoEnvironment = {
+    getWorker(_: unknown, label: string) {
+      if (label === "json") {
+        return new jsonWorker();
+      }
+      if (label === "css" || label === "scss" || label === "less") {
+        return new cssWorker();
+      }
+      if (label === "html" || label === "handlebars" || label === "razor") {
+        return new htmlWorker();
+      }
+      return new editorWorker();
+    },
+  };
+});

src/components/FileBar.vue

@@ -149,6 +149,49 @@
             </q-list>
           </q-menu>
         </q-btn>
+        <!-- integrations -->
+        <q-btn size="md" dense no-caps flat label="Integrations">
+          <q-menu auto-close>
+            <q-list
+              v-if="
+                $integrations &&
+                $integrations.fileBarIntegrations &&
+                $integrations.fileBarIntegrations.length > 0
+              "
+              dense
+              style="min-width: 100px"
+            >
+              <q-item
+                v-for="integration in $integrations.fileBarIntegrations"
+                :key="integration.name"
+                @click="
+                  integration.type === 'dialog'
+                    ? $q.dialog({ component: integration.component })
+                    : undefined
+                "
+                :to="integration.type === 'route' ? integration.uri : undefined"
+                clickable
+                v-close-popup
+              >
+                <q-item-section>{{ integration.name }}</q-item-section>
+              </q-item>
+            </q-list>
+            <q-list v-else dense style="min-width: 100px">
+              <q-item
+                clickable
+                v-close-popup
+                @click="
+                  notifyWarning(
+                    'Reporting feature requires a valid code signing token. Please check the docs for more info.',
+                    10000,
+                  )
+                "
+              >
+                <q-item-section>Reporting Manager</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
         <!-- help -->
         <q-btn v-if="!hosted" size="md" dense no-caps flat label="Help">
           <q-menu auto-close>
@@ -234,6 +277,9 @@ import ServerMaintenance from "@/components/modals/core/ServerMaintenance.vue";
 import CodeSign from "@/components/modals/coresettings/CodeSign.vue";
 import PermissionsManager from "@/components/accounts/PermissionsManager.vue";
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { notifyWarning } from "@/utils/notify";
+
 export default {
   name: "FileBar",
   mixins: [mixins],
@@ -396,6 +442,11 @@ export default {
         component: DeploymentTable,
       });
     },
+    showReportsManager() {
+      this.$q.dialog({
+        component: ReportsManager,
+      });
+    },
   },
 };
 </script>