Feat: Change setting to affect monitor notif. only

louislam · Aug 2, 2023 · 49ecad4 · 49ecad4
1 parent 9daa09b
commit 49ecad4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 46 deletions.
diff --git a/src/components/settings/Notifications.vue b/src/components/settings/Notifications.vue
@@ -21,8 +21,8 @@
         </div>
 
         <div class="my-4 pt-4">
-            <h5 class="my-4 settings-subheading">{{ $t("toastMessagesLabel") }}</h5>
-            <p>{{ $t("toastMessagesDescription") }}</p>
+            <h5 class="my-4 settings-subheading">{{ $t("monitorToastMessagesLabel") }}</h5>
+            <p>{{ $t("monitorToastMessagesDescription") }}</p>
 
             <div class="my-4">
                 <label for="toastErrorTimeoutSecs" class="form-label">
@@ -118,14 +118,12 @@ export default {
             const parsedTimeout = parseInt(newTimeout);
             if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
                 localStorage.toastSuccessTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
-                this.$root.loadToastTimeoutSettings();
             }
         },
         toastErrorTimeoutSecs: function (newTimeout) {
             const parsedTimeout = parseInt(newTimeout);
             if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
                 localStorage.toastErrorTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
-                this.$root.loadToastTimeoutSettings();
             }
         }
     },

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -774,8 +774,8 @@
     "Badge URL": "Badge URL",
     "Group": "Group",
     "Monitor Group": "Monitor Group",
-    "toastMessagesLabel": "Toast notifications",
-    "toastMessagesDescription": "Toast notifications disappear after given time in seconds. Set to -1 disables timeout. Set to 0 disables toast notifications.",
+    "monitorToastMessagesLabel": "Monitor Toast notifications",
+    "monitorToastMessagesDescription": "Toast notifications for monitors disappear after given time in seconds. Set to -1 disables timeout. Set to 0 disables toast notifications.",
     "toastErrorTimeout": "Timeout for Error Notifications",
     "toastSuccessTimeout": "Timeout for Success Notifications",
     "Kafka Brokers": "Kafka Brokers",

diff --git a/src/mixins/socket.js b/src/mixins/socket.js
@@ -4,7 +4,7 @@ import jwtDecode from "jwt-decode";
 import Favico from "favico.js";
 import dayjs from "dayjs";
 import { DOWN, MAINTENANCE, PENDING, UP } from "../util.ts";
-import { getDevContainerServerHostname, isDevContainer, loadToastSettings } from "../util-frontend.js";
+import { getDevContainerServerHostname, isDevContainer, getToastSuccessTimeout, getToastErrorTimeout } from "../util-frontend.js";
 const toast = useToast();
 
 let socket;
@@ -184,9 +184,13 @@ export default {
 
                     if (this.monitorList[data.monitorID] !== undefined) {
                         if (data.status === 0) {
-                            toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`);
+                            toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
+                                timeout: getToastErrorTimeout(),
+                            });
                         } else if (data.status === 1) {
-                            toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`);
+                            toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
+                                timeout: getToastSuccessTimeout(),
+                            });
                         } else {
                             toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
                         }
@@ -629,13 +633,6 @@ export default {
         getMonitorBeats(monitorID, period, callback) {
             socket.emit("getMonitorBeats", monitorID, period, callback);
         },
-
-        /**
-         * Load toast timeout settings from storage and update defaults.
-         */
-        loadToastTimeoutSettings() {
-            toast.updateDefaults(loadToastSettings());
-        }
     },
 
     computed: {

diff --git a/src/util-frontend.js b/src/util-frontend.js
@@ -147,47 +147,51 @@ export function colorOptions(self) {
  * @return {Object} The toast plugin options object.
  */
 export function loadToastSettings() {
-    let errorTimeout = -1;
+    return {
+        position: POSITION.BOTTOM_RIGHT,
+        containerClassName: "toast-container mb-5",
+        showCloseButtonOnHover: true,
+
+        filterBeforeCreate: (toast, toasts) => {
+            if (toast.timeout === 0) {
+                return false;
+            } else {
+                return toast;
+            }
+        },
+    };
+}
+
+export function getToastSuccessTimeout() {
     let successTimeout = 20000;
 
-    if (localStorage.toastErrorTimeout !== undefined) {
-        const parsedTimeout = parseInt(localStorage.toastErrorTimeout);
-        if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
-            errorTimeout = parsedTimeout;
-        }
-    }
     if (localStorage.toastSuccessTimeout !== undefined) {
         const parsedTimeout = parseInt(localStorage.toastSuccessTimeout);
         if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
             successTimeout = parsedTimeout;
         }
     }
 
-    if (errorTimeout === -1) {
-        errorTimeout = false;
-    }
     if (successTimeout === -1) {
         successTimeout = false;
     }
 
-    return {
-        position: POSITION.BOTTOM_RIGHT,
-        containerClassName: "toast-container mb-5",
-        showCloseButtonOnHover: true,
-        toastDefaults: {
-            [TYPE.ERROR]: {
-                timeout: errorTimeout,
-            },
-            [TYPE.SUCCESS]: {
-                timeout: successTimeout,
-            }
-        },
-        filterBeforeCreate: (toast, toasts) => {
-            if (toast.timeout === 0) {
-                return false;
-            } else {
-                return toast;
-            }
-        },
-    };
+    return successTimeout;
+}
+
+export function getToastErrorTimeout() {
+    let errorTimeout = -1;
+
+    if (localStorage.toastErrorTimeout !== undefined) {
+        const parsedTimeout = parseInt(localStorage.toastErrorTimeout);
+        if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+            errorTimeout = parsedTimeout;
+        }
+    }
+
+    if (errorTimeout === -1) {
+        errorTimeout = false;
+    }
+
+    return errorTimeout;
 }