Feat: Toast notification timeout settings (#3441)

* Add toast timeout to the settings

Changing gui, adding timeout with a fix value

memo

rc

rollback readme

cleanup code

cleanup code

Review fixes

review fix 2

* Feat: Add clearAll button below toastContainer

* Feat: Load & Apply defaults, improve wording

Chore: Remove unused

* Feat: Change setting to affect monitor notif. only

* Apply suggestions from code review

Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>

* Chore: Fix JSDoc

---------

Co-authored-by: Berczi Sandor <sandor.berczi@urss.hu>
Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>

src/assets/app.scss

@@ -609,6 +609,18 @@ $shadow-box-padding: 20px;
     }
 }
 
+@media (max-width: 770px) {
+    .toast-container {
+        margin-bottom: 100px !important;
+    }
+}
+
+@media (max-width: 550px) {
+    .toast-container {
+        margin-bottom: 126px !important;
+    }
+}
+
 // Localization
 
 @import "localization.scss";

src/components/settings/Notifications.vue

@@ -20,6 +20,39 @@
             </button>
         </div>
 
+        <div class="my-4 pt-4">
+            <h5 class="my-4 settings-subheading">{{ $t("monitorToastMessagesLabel") }}</h5>
+            <p>{{ $t("monitorToastMessagesDescription") }}</p>
+
+            <div class="my-4">
+                <label for="toastErrorTimeoutSecs" class="form-label">
+                    {{ $t("toastErrorTimeout") }}
+                </label>
+                <input
+                    id="toastErrorTimeoutSecs"
+                    v-model="toastErrorTimeoutSecs"
+                    type="number"
+                    class="form-control"
+                    min="-1"
+                    step="1"
+                />
+            </div>
+
+            <div class="my-4">
+                <label for="toastSuccessTimeoutSecs" class="form-label">
+                    {{ $t("toastSuccessTimeout") }}
+                </label>
+                <input
+                    id="toastSuccessTimeoutSecs"
+                    v-model="toastSuccessTimeoutSecs"
+                    type="number"
+                    class="form-control"
+                    min="-1"
+                    step="1"
+                />
+            </div>
+        </div>
+
         <div class="my-4 pt-4">
             <h5 class="my-4 settings-subheading">{{ $t("settingsCertificateExpiry") }}</h5>
             <p>{{ $t("certificationExpiryDescription") }}</p>
@@ -58,6 +91,8 @@ export default {
 
     data() {
         return {
+            toastSuccessTimeoutSecs: 20,
+            toastErrorTimeoutSecs: -1,
             /**
              * Variable to store the input for new certificate expiry day.
              */
@@ -77,6 +112,26 @@ export default {
         },
     },
 
+    watch: {
+        // Parse, store and apply new timeout settings.
+        toastSuccessTimeoutSecs(newTimeout) {
+            const parsedTimeout = parseInt(newTimeout);
+            if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+                localStorage.toastSuccessTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
+            }
+        },
+        toastErrorTimeoutSecs(newTimeout) {
+            const parsedTimeout = parseInt(newTimeout);
+            if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+                localStorage.toastErrorTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
+            }
+        }
+    },
+
+    mounted() {
+        this.loadToastTimeoutSettings();
+    },
+
     methods: {
         /**
          * Remove a day from expiry notification days.
@@ -108,6 +163,27 @@ export default {
                 }
             }
         },
+
+        /**
+         * Loads toast timeout settings from storage to component data.
+         */
+        loadToastTimeoutSettings() {
+            const successTimeout = localStorage.toastSuccessTimeout;
+            if (successTimeout !== undefined) {
+                const parsedTimeout = parseInt(successTimeout);
+                if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+                    this.toastSuccessTimeoutSecs = parsedTimeout > 0 ? parsedTimeout / 1000 : parsedTimeout;
+                }
+            }
+
+            const errorTimeout = localStorage.toastErrorTimeout;
+            if (errorTimeout !== undefined) {
+                const parsedTimeout = parseInt(errorTimeout);
+                if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+                    this.toastErrorTimeoutSecs = parsedTimeout > 0 ? parsedTimeout / 1000 : parsedTimeout;
+                }
+            }
+        },
     },
 };
 </script>

src/lang/en.json

@@ -785,6 +785,10 @@
     "Badge URL": "Badge URL",
     "Group": "Group",
     "Monitor Group": "Monitor Group",
+    "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",
     "Enter the list of brokers": "Enter the list of brokers",
     "Press Enter to add broker": "Press Enter to add broker",

src/layouts/Layout.vue

@@ -117,12 +117,23 @@
                 {{ $t("Settings") }}
             </router-link>
         </nav>
+
+        <button
+            v-if="numActiveToasts != 0"
+            type="button"
+            class="btn btn-normal clear-all-toast-btn"
+            @click="clearToasts"
+        >
+            <font-awesome-icon icon="times" />
+        </button>
     </div>
 </template>
 
 <script>
 import Login from "../components/Login.vue";
 import compareVersions from "compare-versions";
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
 
@@ -131,7 +142,11 @@ export default {
     },
 
     data() {
-        return {};
+        return {
+            toastContainer: null,
+            numActiveToasts: 0,
+            toastContainerObserver: null,
+        };
     },
 
     computed: {
@@ -159,11 +174,33 @@ export default {
     },
 
     mounted() {
+        this.toastContainer = document.querySelector(".bottom-right.toast-container");
+
+        // Watch the number of active toasts
+        this.toastContainerObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === "childList") {
+                    this.numActiveToasts = mutation.target.children.length;
+                }
+            }
+        });
 
+        if (this.toastContainer != null) {
+            this.toastContainerObserver.observe(this.toastContainer, { childList: true });
+        }
     },
 
-    methods: {
+    beforeUnmount() {
+        this.toastContainerObserver.disconnect();
+    },
 
+    methods: {
+        /**
+         * Clear all toast notifications.
+         */
+        clearToasts() {
+            toast.clear();
+        }
     },
 
 };
@@ -323,4 +360,22 @@ main {
         background-color: $dark-bg;
     }
 }
+
+.clear-all-toast-btn {
+    position: fixed;
+    right: 1em;
+    bottom: 1em;
+    font-size: 1.2em;
+    padding: 9px 15px;
+    width: 48px;
+    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
+}
+
+@media (max-width: 770px) {
+    .clear-all-toast-btn {
+        bottom: 72px;
+        z-index: 100;
+    }
+}
+
 </style>

src/main.js

@@ -20,6 +20,7 @@ import dayjs from "dayjs";
 import timezone from "./modules/dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import relativeTime from "dayjs/plugin/relativeTime";
+import { loadToastSettings } from "./util-frontend";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
@@ -44,11 +45,7 @@ const app = createApp({
 app.use(router);
 app.use(i18n);
 
-const options = {
-    position: "bottom-right",
-};
-
-app.use(Toast, options);
+app.use(Toast, loadToastSettings());
 app.component("Editable", contenteditable);
 app.component("FontAwesomeIcon", FontAwesomeIcon);
 

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 } from "../util-frontend.js";
+import { getDevContainerServerHostname, isDevContainer, getToastSuccessTimeout, getToastErrorTimeout } from "../util-frontend.js";
 const toast = useToast();
 
 let socket;
@@ -190,11 +190,11 @@ export default {
                     if (this.monitorList[data.monitorID] !== undefined) {
                         if (data.status === 0) {
                             toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
-                                timeout: false,
+                                timeout: getToastErrorTimeout(),
                             });
                         } else if (data.status === 1) {
                             toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
-                                timeout: 20000,
+                                timeout: getToastSuccessTimeout(),
                             });
                         } else {
                             toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
@@ -683,7 +683,7 @@ export default {
          */
         getMonitorBeats(monitorID, period, callback) {
             socket.emit("getMonitorBeats", monitorID, period, callback);
-        }
+        },
     },
 
     computed: {

src/util-frontend.js

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import timezones from "timezones-list";
 import { localeDirection, currentLocale } from "./i18n";
+import { POSITION } from "vue-toastification";
 
 /**
  * Returns the offset from UTC in hours for the current locale.
@@ -149,3 +150,65 @@ export function colorOptions(self) {
             color: "#DB2777" },
     ];
 }
+
+/**
+ * Loads the toast timeout settings from storage.
+ * @returns {object} The toast plugin options object.
+ */
+export function loadToastSettings() {
+    return {
+        position: POSITION.BOTTOM_RIGHT,
+        containerClassName: "toast-container mb-5",
+        showCloseButtonOnHover: true,
+
+        filterBeforeCreate: (toast, toasts) => {
+            if (toast.timeout === 0) {
+                return false;
+            } else {
+                return toast;
+            }
+        },
+    };
+}
+
+/**
+ * Get timeout for success toasts
+ * @returns {(number|boolean)} Timeout in ms. If false timeout disabled.
+ */
+export function getToastSuccessTimeout() {
+    let successTimeout = 20000;
+
+    if (localStorage.toastSuccessTimeout !== undefined) {
+        const parsedTimeout = parseInt(localStorage.toastSuccessTimeout);
+        if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+            successTimeout = parsedTimeout;
+        }
+    }
+
+    if (successTimeout === -1) {
+        successTimeout = false;
+    }
+
+    return successTimeout;
+}
+
+/**
+ * Get timeout for error toasts
+ * @returns {(number|boolean)} Timeout in ms. If false timeout disabled.
+ */
+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;
+}