Converted Remaining Routes, Problems

Converted over the remaining routes. Some problems arose. Vue didn't like that some component tags were self-closing. In some places it messed up white space, in others controls weren't rendering at all. Occasionally, especially during Cypress tests, the page would load with a blank page in the v-app. Vue also didn't like `@update:modelUpdate` but worked when changed to `@update:model-update`. There might be a race condition between 1) The pages being loaded, 2) Vue, and 3) the Vue router.
Security-Onion-Solutions · Mar 4, 2025 · 1aea0e1 · 1aea0e1
1 parent ae8e4d8
commit 1aea0e1
Show file tree

Hide file tree

Showing 33 changed files with 6,064 additions and 6,089 deletions.
diff --git a/html/index.html b/html/index.html
diff --git a/html/js/components/detection-panel.js b/html/js/components/detection-panel.js
@@ -3,8 +3,10 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('component-detection-panel', 'pages/detection-panel.html');
+
 components.push({
-	name: "Detection-Panel", component: {
+	name: "DetectionPanel", component: {
 		props: {
 			'detection': {
 				type: Object,

diff --git a/html/js/components/treeview.js b/html/js/components/treeview.js
@@ -3,6 +3,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('component-treeview', 'pages/treeview.html');
+
 components.push({
 	name: "TreeView", component: {
 		props: {

diff --git a/html/js/routes/case.js b/html/js/routes/case.js
@@ -14,6 +14,8 @@ const uriPathRegex = /^\/[\w,\s-]/;
 const hashRegex = /^[0-9a-fA-F]{32}$|^[0-9a-fA-F]{40}$|^[0-9a-fA-F]{64}$|^[0-9a-fA-F]{128}$/;
 const internalPrefix = "___";
 
+loadPageTemplate('page-case', 'pages/case.html');
+
 routes.push({ path: '/case/:id', name: 'case', component: {
   template: '#page-case',
   data() { return {

diff --git a/html/js/routes/clients.js b/html/js/routes/clients.js
@@ -6,6 +6,8 @@
 
 const NOTE_TRUNCATE_LEN = 50;
 
+loadPageTemplate('page-clients', 'pages/clients.html');
+
 routes.push({ path: '/clients', name: 'clients', component: {
   template: '#page-clients',
   data() { return {

diff --git a/html/js/routes/config.js b/html/js/routes/config.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-config', 'pages/config.html');
+
 routes.push({
   path: '/config', name: 'config', component: {
     template: '#page-config',
@@ -398,7 +400,7 @@ routes.push({
               try {
                 this.form.entries = JSON.parse(setting.value);
               } catch(e) {
-                
+
               }
             }
           } else {
@@ -448,7 +450,7 @@ routes.push({
             }
           }
         }
-        if (!isArrayOfObjects) { 
+        if (!isArrayOfObjects) {
           if (setting.syntax.toLowerCase() == 'json') {
             value = JSON.stringify(tmpEntries);
           }
@@ -748,7 +750,7 @@ routes.push({
       this.$root.stopLoading();
     },
     edit(setting, nodeId) {
-      if (this.isReadOnly(setting)) { 
+      if (this.isReadOnly(setting)) {
         return;
       }
       setTimeout(() => {

diff --git a/html/js/routes/detection.js b/html/js/routes/detection.js
@@ -19,6 +19,8 @@ function debounce(fn, wait) {
 
 const MAX_OVERRIDE_NOTE_LENGTH = 150;
 
+loadPageTemplate('page-detection', 'pages/detection.html');
+
 routes.push({ path: '/detection/:id', name: 'detection', component: {
 	template: '#page-detection',
 	data() {

diff --git a/html/js/routes/downloads.js b/html/js/routes/downloads.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-downloads', 'pages/downloads.html');
+
 routes.push({ path: '/downloads', name: 'downloads', component: {
   template: '#page-downloads',
   data() { return {

diff --git a/html/js/routes/grid.js b/html/js/routes/grid.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-grid', 'pages/grid.html');
+
 const NodeStatusUnknown = "unknown";
 const NodeStatusFault = "fault";
 const NodeStatusOk = "ok";

diff --git a/html/js/routes/gridmembers.js b/html/js/routes/gridmembers.js
@@ -9,6 +9,8 @@ const GridMemberUnaccepted = "unaccepted";
 const GridMemberRejected = "rejected";
 const GridMemberDenied = "denied";
 
+loadPageTemplate('page-gridmembers', 'pages/gridmembers.html');
+
 routes.push({ path: '/gridmembers', name: 'gridmembers', component: {
   template: '#page-gridmembers',
   data() { return {

diff --git a/html/js/routes/home.js b/html/js/routes/home.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-home', 'pages/home.html');
+
 routes.push({ path: '/', name: 'home', component: {
   template: '#page-home',
   data() { return {

diff --git a/html/js/routes/hunt.js b/html/js/routes/hunt.js
@@ -15,6 +15,8 @@ const FILTER_EXCLUDE = 'EXCLUDE';
 const FILTER_EXACT = 'EXACT';
 const FILTER_DRILLDOWN = 'DRILLDOWN';
 
+loadPageTemplate('page-hunt', 'pages/hunt.html');
+
 const huntComponent = {
   template: '#page-hunt',
   data() { return {

diff --git a/html/js/routes/job.js b/html/js/routes/job.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-job', 'pages/job.html');
+
 routes.push({ path: '/job/:jobId', name: 'job', component: {
   template: '#page-job',
   data() { return {

diff --git a/html/js/routes/jobs.js b/html/js/routes/jobs.js
@@ -9,6 +9,8 @@ const JobStatusCompleted = 1;
 const JobStatusIncomplete = 2;
 const JobStatusDeleted = 3;
 
+loadPageTemplate('page-jobs', 'pages/jobs.html');
+
 routes.push({ path: '/jobs', name: 'jobs', component: {
   template: '#page-jobs',
   data() { return {

diff --git a/html/js/routes/settings.js b/html/js/routes/settings.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-settings', 'pages/settings.html');
+
 routes.push({ path: '/settings', name: 'settings', component: {
   template: '#page-settings',
   data() { return {
@@ -96,7 +98,7 @@ routes.push({ path: '/settings', name: 'settings', component: {
         if (this.$route.query.tab) {
           this.activeTab = this.$route.query.tab;
         }
-  
+
         var errorsMessage = null;
         if (response.data.ui.messages && response.data.ui.messages.length > 0) {
           const error = response.data.ui.messages.find(item => item.type == "error");
@@ -155,7 +157,7 @@ routes.push({ path: '/settings', name: 'settings', component: {
         script.setAttribute('referrerpolicy', this.webauthnForm.script.referrerpolicy);
         script.setAttribute('integrity', this.webauthnForm.script.integrity);
         script.setAttribute('nonce', this.webauthnForm.script.nonce);
-        script.setAttribute('src', this.webauthnForm.script.src); 
+        script.setAttribute('src', this.webauthnForm.script.src);
         document.body.appendChild(script);
       }
     },

diff --git a/html/js/routes/terms.js b/html/js/routes/terms.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-terms', 'pages/terms.html');
+
 const termsComponent = {
   template: '#page-terms',
   data() { return {

diff --git a/html/js/routes/users.js b/html/js/routes/users.js
@@ -4,6 +4,8 @@
 // https://securityonion.net/license; you may not use this file except in compliance with the
 // Elastic License 2.0.
 
+loadPageTemplate('page-users', 'pages/users.html');
+
 routes.push({ path: '/users', name: 'users', component: {
   template: '#page-users',
   data() { return {