Notify user that the filtering/search query timed out

package.json

@@ -21,6 +21,7 @@
     "vue": "^3.2.39",
     "vuex": "next",
     "vue-select": "beta",
+    "@meforma/vue-toaster": "^1.3.0",
     "vuetify": "^3.0.0-beta.0",
     "webfontloader": "^1.0.0"
   },

src/components/LogViewer.vue

@@ -73,6 +73,7 @@ export default {
       let es = new EventSource(url.toString());
       es.onmessage = (e) => this.handleReceiveMessage(e)
       es.addEventListener("filters", (e) => this.handleReceiveFilters(e))
+      es.addEventListener("timeout", (e) => this.handleReceiveTimeout(e))
       this.es = es
     },
     onGridReady(params) {
@@ -156,6 +157,12 @@ export default {
 
       this.setFilterOptions(correctOptions)
     },
+    handleReceiveTimeout () {
+      this.$toast.warning(`Not all rows were loaded. Please use more precise filtering`, {
+        position: "top-right",
+      });
+      setTimeout(this.$toast.clear, 3000);
+    },
     openExamineLog (row) {
       const selectedRow = row.data
       row.node.setSelected(false)

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import store from "./stores";
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
+import Toaster from "@meforma/vue-toaster";
 import { loadFonts } from './plugins/webfontloader'
 import './assets/main.css'
 import 'vue-select/dist/vue-select.css';
@@ -10,5 +11,6 @@ loadFonts()
 const app = createApp(App);
 app.use(store);
 app.use(vuetify);
+app.use(Toaster);
 app.mount("#app");