add footerTemplate setting, fixes arkime#2371 (arkime#2521)

* add footerTemplate setting, fixes arkime#2371 * fixed PR number * make entire footer customizable * remove req span from footerTemplate --------- Co-authored-by: 31453 <[email protected]>
mmguero-dev · Nov 29, 2023 · 8394811 · 8394811
1 parent b61f3c5
commit 8394811
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -64,6 +64,7 @@ new Vue({
     /* eslint-disable no-undef */
     Vue.prototype.$constants = {
       TITLE_CONFIG,
+      FOOTER_CONFIG,
       DEMO_MODE,
       VERSION,
       PATH,