From 83948115f72eb1ed563f12cd53b3fec7ea7a215a Mon Sep 17 00:00:00 2001
From: Andy Wick <awick@purple.org>
Date: Wed, 29 Nov 2023 13:20:25 -0500
Subject: [PATCH] add footerTemplate setting, fixes #2371 (#2521)

* add footerTemplate setting, fixes #2371

* fixed PR number

* make entire footer customizable

* remove req span from footerTemplate

---------

Co-authored-by: 31453 <ecrinne@gmail.com>
---
 CHANGELOG                                     |  1 +
 viewer/viewer.js                              |  4 ++
 viewer/vueapp/index.html                      |  1 +
 viewer/vueapp/src/components/utils/Footer.vue | 45 +++++++++----------
 viewer/vueapp/src/main.js                     |  1 +
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index f0535461b3..f03b5b18b3 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -89,6 +89,7 @@ NOTICE: Create a parliament config file before upgrading (see https://arkime.com
   - #2407 transfer ownership of resources
   - #2482 added uploadRoles to control who can upload
   - #2501 add defaultTimeRange setting
+  - #2521 add footerTemplate setting
 ## Parliament
   - #2377 dashboard-only mode removed, if you want users to just see the dashboard don't assign them the parliamentUser role
   - #2395 configuration is now stored in opensearch/elasticsearch
diff --git a/viewer/viewer.js b/viewer/viewer.js
index 0008a68b4d..f24dbd7152 100644
--- a/viewer/viewer.js
+++ b/viewer/viewer.js
@@ -1982,11 +1982,15 @@ app.use(cspHeader, setCookie, (req, res) => {
     .replace(/_userId_/g, req.user ? req.user.userId : '-')
     .replace(/_userName_/g, req.user ? req.user.userName : '-');
 
+  const footerConfig = Config.get('footerTemplate', '_version_ | <a href="https://arkime.com">arkime.com</a> | _responseTime_')
+    .replace(/_version_/g, `Arkime v${version.version}`).replace(/_responseTime_/g, '{{ responseTime | commaString }}ms');
+
   const limit = req.user.hasRole('arkimeAdmin') ? Config.get('huntAdminLimit', 10000000) : Config.get('huntLimit', 1000000);
 
   const appContext = {
     theme,
     titleConfig,
+    footerConfig,
     path: Config.basePath(),
     version: version.version,
     demoMode: req.user.isDemoMode(),
diff --git a/viewer/vueapp/index.html b/viewer/vueapp/index.html
index a5a3602dc4..7332143155 100644
--- a/viewer/vueapp/index.html
+++ b/viewer/vueapp/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="{{ themeUrl }}">
     <script nonce="{{ nonce }}">
       const TITLE_CONFIG = '{{ titleConfig }}';
+      const FOOTER_CONFIG = '{{ footerConfig }}';
       const DEMO_MODE = {{ demoMode }};
       const VERSION = '{{ version }}';
       const PATH = '{{ path }}';
diff --git a/viewer/vueapp/src/components/utils/Footer.vue b/viewer/vueapp/src/components/utils/Footer.vue
index 445bc3056d..8a533cf1dc 100644
--- a/viewer/vueapp/src/components/utils/Footer.vue
+++ b/viewer/vueapp/src/components/utils/Footer.vue
@@ -3,41 +3,40 @@ Copyright Yahoo Inc.
 SPDX-License-Identifier: Apache-2.0
 -->
 <template>
-
   <div class="footer">
     <p>
       <small>
-        Arkime v{{ version }} |
-        <a href="https://arkime.com">arkime.com</a>
-        <span v-if="responseTime && !loadingData">
-          | {{ responseTime | commaString }}ms
-        </span>
-        <span v-if="loadingData">
-          |
-          <span class="fa fa-spinner fa-spin fa-lg text-theme-accent">
-          </span>
-        </span>
+        <div id="footerConfig"></div>
       </small>
     </p>
   </div>
-
 </template>
 
 <script>
+import Vue from 'vue';
+
+let footer;
+
 export default {
   name: 'ArkimeFooter',
-  data: function () {
-    return {
-      version: this.$constants.VERSION
-    };
+  mounted () {
+    footer = new Vue({
+      parent: this,
+      el: '#footerConfig',
+      // add span around template because vue wants a single root element
+      template: `<span>${new DOMParser().parseFromString(this.$constants.FOOTER_CONFIG, 'text/html').documentElement.textContent}</span>`,
+      computed: {
+        responseTime () {
+          return this.$parent.$store.state.responseTime;
+        },
+        loadingData () {
+          return this.$parent.$store.state.loadingData;
+        }
+      }
+    });
   },
-  computed: {
-    responseTime: function () {
-      return this.$store.state.responseTime;
-    },
-    loadingData: function () {
-      return this.$store.state.loadingData;
-    }
+  beforeDestroy () {
+    footer.$destroy();
   }
 };
 </script>
diff --git a/viewer/vueapp/src/main.js b/viewer/vueapp/src/main.js
index bd3869b9ab..3929ec6683 100644
--- a/viewer/vueapp/src/main.js
+++ b/viewer/vueapp/src/main.js
@@ -64,6 +64,7 @@ new Vue({
     /* eslint-disable no-undef */
     Vue.prototype.$constants = {
       TITLE_CONFIG,
+      FOOTER_CONFIG,
       DEMO_MODE,
       VERSION,
       PATH,