feat: implement different toast notification center

Author: SteKoe

spring-boot-admin-server-ui/package-lock.json

@@ -17,6 +17,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "@headlessui/vue": "1.7.0",
+    "@stekoe/vue-toast-notificationcenter": "https://github.com/SteKoe/vue-toast-notificationcenter/archive/refs/tags/1.0.0-RC2.tar.gz",
     "@tailwindcss/forms": "0.5.0",
     "@tailwindcss/typography": "0.5.2",
     "ansi_up": "5.1.0",
@@ -46,7 +47,6 @@
     "vue": "3.2.33",
     "vue-i18n": "9.1.9",
     "vue-router": "4.0.16",
-    "vue-toast-notification": "3.0.4",
     "vue3-click-away": "1.2.4"
   },
   "devDependencies": {

spring-boot-admin-server-ui/package.json

@@ -29,11 +29,11 @@ import {createApplicationStore, useApplicationStore} from "./composables/useAppl
 import {createViewRegistry} from "./composables/ViewRegistry.js";
 import { worker } from './mocks/browser';
 
-import VueToast from 'vue-toast-notification';
 import './toast-theme.css';
 
 import SbaModalPlugin from "./plugins/modal";
 import {useI18n} from "vue-i18n";
+import NotificationcenterPlugin from "@stekoe/vue-toast-notificationcenter";
 
 moment.locale(navigator.language.split('-')[0]);
 
@@ -79,9 +79,8 @@ const app = createApp({
 
 app.use(i18n);
 app.use(components);
-app.use(VueToast, {
-  position: 'top-right',
-  duration: 3_500
+app.use(NotificationcenterPlugin, {
+  duration: 10_000
 });
 app.use(SbaModalPlugin, {i18n});
 app.use(router(viewRegistry.routes));

spring-boot-admin-server-ui/src/main/frontend/index.js

@@ -8,13 +8,7 @@ const handler = [
   ...mappingsEndpoint,
   ...liquibaseEndpoints,
   ...flywayEndpoints,
-  ...auditEventsEndpoint,
-  rest.post(
-    '*/actuator/shutdown',
-    (req, res, ctx) => {
-      return res(ctx.status(403), ctx.json("Knöterich is pöterich"));
-    }
-  ),
+  ...auditEventsEndpoint
 ];
 
 export const worker = setupWorker(...handler)

spring-boot-admin-server-ui/src/main/frontend/mocks/browser.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import axios, {redirectOn401} from '../utils/axios.js';
+import axios, {redirectOn401, registerErrorToastInterceptor} from '../utils/axios.js';
 import waitForPolyfill from '../utils/eventsource-polyfill';
 import logtail from '../utils/logtail';
 import {concat, from, ignoreElements, Observable} from '../utils/rxjs';
@@ -42,6 +42,7 @@ class Instance {
       response => response,
       redirectOn401(error => !isInstanceActuatorRequest(error.config.baseURL + error.config.url))
     );
+    registerErrorToastInterceptor(this.axios);
   }
 
   hasEndpoint(endpointId) {

spring-boot-admin-server-ui/src/main/frontend/services/instance.js

@@ -1,45 +1,5 @@
-@import "vue-toast-notification/dist/theme-default.css";
+@import "@stekoe/vue-toast-notificationcenter/dist/style.css";
 
-.v-toast {
-    @apply p-2 pt-14;
-}
-
-.v-toast--fade-out {
-    animation-name: fadeInDown;
-    animation-direction: reverse;
-}
-
-.v-toast__item {
-    @apply flex items-center p-2 mb-2 w-full max-w-xs shadow-lg bg-white border border-l-4 border-gray-300 text-black;
-}
-
-.v-toast__item--warning {
-    @apply border-l-orange-500;
-}
-
-.v-toast__item--info {
-    @apply border-l-blue-500;
-}
-
-.v-toast__item--error {
-    @apply border-l-red-500;
-}
-
-.v-toast__item--default {
-    @apply border-l-gray-500;
-}
-
-.v-toast__item--success {
-    @apply border-l-green-500;
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(100%, 0, 0)
-    }
-    to {
-        opacity: 1;
-        transform: none
-    }
+.v-toast-container {
+    padding: 4em 1em;
 }

spring-boot-admin-server-ui/src/main/frontend/toast-theme.css

@@ -15,6 +15,13 @@
  */
 import sbaConfig from '../sba-config.js'
 import axios from 'axios';
+import {useNotificationCenter} from "@stekoe/vue-toast-notificationcenter";
+import {useI18n} from "vue-i18n";
+
+
+const nc = useNotificationCenter({
+
+});
 
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 axios.defaults.xsrfHeaderName = sbaConfig.csrf.headerName;
@@ -31,3 +38,21 @@ instance.interceptors.response.use(response => response, redirectOn401());
 instance.create = axios.create;
 
 export default instance;
+
+export const registerErrorToastInterceptor = (axios) => {
+  axios.interceptors.response.use(
+    response => response,
+    (error) => {
+      const data = error.request;
+      let message = `
+              Request failed: ${data.statusText}<br>
+              <small>${data.responseURL}</small>
+      `;
+      nc.error(message, {
+        context: data.status ?? 'axios',
+        title: `Error ${data.status}`,
+        duration: 10_000
+      });
+    }
+  )
+}

spring-boot-admin-server-ui/src/main/frontend/utils/axios.js

@@ -224,30 +224,30 @@ export default {
       try {
         await item.unregister();
         const message = item instanceof Application ? 'applications.unregister_successful' : 'instances.unregister_successful';
-        this.$toast.success(this.t(message, {name: item.id || item.name}));
+        this.$notificationCenter.success(this.t(message, {name: item.id || item.name}));
       } catch (error) {
         const message = item instanceof Application ? 'applications.unregister_failed' : 'instances.unregister_failed';
-        this.$toast.error(this.t(message, {name: item.id || item.name, error: error.response.status}));
+        this.$notificationCenter.error(this.t(message, {name: item.id || item.name, error: error.response.status}));
       }
     },
     async shutdown(item) {
       try {
         await item.shutdown();
         const message = item instanceof Application ? 'applications.shutdown_successful' : 'instances.shutdown_successful';
-        this.$toast.success(this.t(message, {name: item.id || item.name}));
+        this.$notificationCenter.success(this.t(message, {name: item.id || item.name}));
       } catch (error) {
         const message = item instanceof Application ? 'applications.shutdown_failed' : 'instances.shutdown_failed';
-        this.$toast.error(this.t(message, {name: item.id || item.name, error: error.response.status}));
+        this.$notificationCenter.error(this.t(message, {name: item.id || item.name, error: error.response.status}));
       }
     },
     async restart(item) {
       try {
         await item.restart();
         const message = item instanceof Application ? 'applications.restarted' : 'instances.restarted';
-        this.$toast.success(this.t(message, {name: item.id || item.name}));
+        this.$notificationCenter.success(this.t(message, {name: item.id || item.name}));
       } catch (error) {
         const message = item instanceof Application ? 'applications.restart_failed' : 'instances.restart_failed';
-        this.$toast.error(this.t(message, {name: item.id || item.name, error: error.response.status}));
+        this.$notificationCenter.error(this.t(message, {name: item.id || item.name, error: error.response.status}));
       }
     },
     createSubscription() {
@@ -264,7 +264,7 @@ export default {
           },
           error: error => {
             console.warn('Fetching notification filters failed with error:', error);
-            this.$toast.error(this.t('applications.fetching_notification_filters_failed'));
+            this.$notificationCenter.error(this.t('applications.fetching_notification_filters_failed'));
           }
         });
     },
@@ -280,7 +280,7 @@ export default {
         const response = await NotificationFilter.addFilter(object, ttl);
         let notificationFilter = response.data;
         this.notificationFilterSubject.next(notificationFilter);
-        this.$toast.success(
+        this.$notificationCenter.success(
           `${this.t('applications.notifications_suppressed_for', {name: notificationFilter.applicationName || notificationFilter.instanceId})} <strong>${notificationFilter.expiry.fromNow(true)}</strong>.`);
       } catch (error) {
         console.warn('Adding notification filter failed:', error);
@@ -292,7 +292,7 @@ export default {
       try {
         await activeFilter.delete();
         this.notificationFilterSubject.next(activeFilter.id);
-        this.$toast.success(this.t('applications.notification_filter.removed'));
+        this.$notificationCenter.success(this.t('applications.notification_filter.removed'));
       } catch (error) {
         console.warn('Deleting notification filter failed:', error);
       } finally {

spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue

@@ -192,8 +192,9 @@ export default {
         } catch (error) {
           console.warn('Fetching metric index failed:', error);
           this.error = error;
+        } finally {
+          this.hasLoaded = true;
         }
-        this.hasLoaded = true;
       }
     }
   },

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <section :class="{'loading': loading}">
+  <section :class="{'loading': showLoadingSpinner}">
     <slot name="before"/>
 
     <div class="px-2 md:px-6 py-6">
@@ -46,11 +46,10 @@ export default {
     }
   },
   watch: {
-    loading: function(newVal, oldVal) {
+    loading: function (newVal) {
       window.clearTimeout(this.debouncedLoader);
-
       this.debouncedLoader = window.setTimeout(() => {
-        this.loading = newVal;
+        this.showLoadingSpinner = newVal;
       }, 250);
     }
   }