minor frontend changes to discard responses if route changed

frontend/pages/backend/[backend]/delete.vue

@@ -98,7 +98,6 @@ const loadBackend = async () => {
 
     if (200 !== response.status) {
       error.value = json
-
       return
     }
 

frontend/pages/backend/[backend]/edit.vue

@@ -388,6 +388,9 @@ useHead({title: 'Backends - Edit: ' + id})
 const loadContent = async () => {
   const content = await request(`/backend/${id}`)
   let json = await content.json()
+  if (useRoute().name !== 'backend-backend-edit') {
+    return
+  }
 
   if (!json?.options || typeof json.options !== 'object') {
     json.options = {}

frontend/pages/backend/[backend]/index.vue

@@ -182,6 +182,9 @@ const loadRecentHistory = async () => {
 
   const response = await request(`/history/?${search.toString()}`)
   const json = await response.json()
+  if (useRoute().name !== 'backend-backend') {
+    return
+  }
 
   if (200 !== response.status) {
     notification('error', 'Error loading data', `${json.error.code}: ${json.error.message}`);
@@ -195,7 +198,13 @@ const loadInfo = async () => {
   try {
     isLoading.value = false
     const response = await request(`/backend/${backend.value}/info`)
-    info.value = await response.json()
+    const json = await response.json()
+    if (useRoute().name !== 'backend-backend') {
+      return
+    }
+
+    info.value = json
+
     if (200 !== response.status) {
       isError.value = true
       error.value = `${info.value.error.code}: ${info.value.error.message}`

frontend/pages/backend/[backend]/libraries.vue

@@ -122,6 +122,10 @@ const loadContent = async () => {
       }
     }
 
+    if (useRoute().name !== 'backend-backend-libraries') {
+      return
+    }
+    
     if (200 !== response.status) {
       notification('error', 'Error', `${json.error.code}: ${json.error.message}`)
       return

frontend/pages/backend/[backend]/mismatched.vue

@@ -11,7 +11,7 @@
         <div class="is-pulled-right" v-if="hasLooked">
           <div class="field is-grouped">
             <p class="control">
-              <button class="button is-info" @click="loadContent" :disabled="isLoading"
+              <button class="button is-info" @click="loadContent(false)" :disabled="isLoading"
                       :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
@@ -139,31 +139,42 @@
 import {makeSearchLink, notification} from '~/utils/index'
 import {useStorage} from '@vueuse/core'
 import Message from '~/components/Message'
+import {useSessionCache} from '~/utils/cache'
 
 const backend = useRoute().params.backend
 const items = ref([])
 const isLoading = ref(false)
 const hasLooked = ref(false)
 const show_page_tips = useStorage('show_page_tips', true)
+const cache = useSessionCache()
+const cacheKey = `backend-${backend}-mismatched`
 
 useHead({title: `Backends: ${backend} - Misidentified items`})
-const loadContent = async () => {
+const loadContent = async (useCache = true) => {
   hasLooked.value = true
   isLoading.value = true
   items.value = []
 
   let response, json;
 
+
   try {
-    response = await request(`/backend/${backend}/mismatched`)
-    json = await response.json()
+    if (useCache && cache.has(cacheKey)) {
+      items.value = cache.get(cacheKey)
+    } else {
+      response = await request(`/backend/${backend}/mismatched`)
+      json = await response.json()
+      cache.set(cacheKey, json)
 
-    if (!response.ok) {
-      notification('error', 'Error', `${json.error.code ?? response.status}: ${json.error.message ?? response.statusText}`)
-      return
+      if (useRoute().name !== 'backend-backend-mismatched') {
+        return
+      }
+      if (!response.ok) {
+        notification('error', 'Error', `${json.error.code ?? response.status}: ${json.error.message ?? response.statusText}`)
+        return
+      }
+      items.value = json
     }
-
-    items.value = json
   } catch (e) {
     hasLooked.value = false
     return notification('error', 'Error', e.message)

frontend/pages/backend/[backend]/search.vue

@@ -242,6 +242,9 @@ const searchContent = async (fromPopState = false) => {
   try {
     const response = await request(`/backend/${backend}/search?${search.toString()}`)
     const json = await response.json()
+    if (useRoute().name !== 'backend-backend-search') {
+      return
+    }
     const currentUrl = window.location.pathname + '?' + (new URLSearchParams(window.location.search)).toString()
     const newUrl = window.location.pathname + '?' + search.toString()
 

frontend/pages/backend/[backend]/sessions.vue

@@ -95,6 +95,10 @@ const loadContent = async () => {
     }
   }
 
+  if (useRoute().name !== 'backend-backend-sessions') {
+    return
+  }
+  
   isLoading.value = false
 
   if (!response.ok) {

frontend/pages/backend/[backend]/unmatched.vue

@@ -11,7 +11,7 @@
         <div class="is-pulled-right" v-if="hasLooked">
           <div class="field is-grouped">
             <p class="control">
-              <button class="button is-info" @click.prevent="loadContent" :disabled="isLoading"
+              <button class="button is-info" @click.prevent="loadContent(false)" :disabled="isLoading"
                       :class="{'is-loading':isLoading}">
                 <span class="icon"><i class="fas fa-sync"></i></span>
               </button>
@@ -130,47 +130,49 @@
 
 <script setup>
 import {makeSearchLink, notification} from '~/utils/index'
+import {useSessionCache} from '~/utils/cache'
 
 const backend = useRoute().params.backend
 const items = ref([])
 const isLoading = ref(false)
 const hasLooked = ref(false)
+const cache = useSessionCache()
+const cacheKey = `backend-${backend}-unmatched`
 
 useHead({title: `Backends: ${backend} - Unmatched items.`})
 
-const loadContent = async () => {
+const loadContent = async (useCache = true) => {
   hasLooked.value = true
   isLoading.value = true
   items.value = []
 
   let response, json;
 
-  try {
-    response = await request(`/backend/${backend}/unmatched`)
-  } catch (e) {
-    isLoading.value = false
-    return notification('error', 'Error', e.message)
-  }
 
   try {
-    json = await response.json()
-  } catch (e) {
-    json = {
-      error: {
-        code: response.status,
-        message: response.statusText
+    if (useCache && cache.has(cacheKey)) {
+      items.value = cache.get(cacheKey)
+    } else {
+      response = await request(`/backend/${backend}/unmatched`)
+      json = await response.json()
+      cache.set(cacheKey, json)
+
+      if (useRoute().name !== 'backend-backend-unmatched') {
+        return
       }
+
+      if (!response.ok) {
+        notification('error', 'Error', `${json.error.code ?? response.status}: ${json.error.message ?? response.statusText}`)
+        return
+      }
+      items.value = json
     }
+  } catch (e) {
+    hasLooked.value = false
+    return notification('error', 'Error', e.message)
+  } finally {
+    isLoading.value = false
   }
-
-  isLoading.value = false
-
-  if (!response.ok) {
-    notification('error', 'Error', `${json.error.code}: ${json.error.message}`)
-    return
-  }
-
-  items.value = json
 }
 
 const fixTitle = (title) => title.replace(/([\[(]).*?([\])])/g, '').replace(/-\w+$/, '').trim()

frontend/pages/backend/[backend]/users.vue

@@ -23,7 +23,7 @@
         </div>
       </div>
 
-      <div class="column is-12" v-if="items.length < 1">
+      <div class="column is-12" v-if="!items || items?.length < 1">
         <Message message_class="has-background-info-90 has-text-dark" title="Loading" icon="fas fa-spinner fa-spin"
                  message="Loading users list. Please wait..." v-if="isLoading"/>
         <Message v-else message_class="has-background-warning-80 has-text-dark" title="Warning"
@@ -123,6 +123,10 @@ const loadContent = async () => {
     }
   }
 
+  if (useRoute().name !== 'backend-backend-users') {
+    return
+  }
+
   isLoading.value = false
 
   if (!response.ok) {

frontend/pages/backends/index.vue

@@ -240,7 +240,11 @@ const loadContent = async () => {
   isLoading.value = true
   try {
     const response = await request('/backends')
-    backends.value = await response.json()
+    const json = await response.json()
+    if (useRoute().name !== 'backends') {
+      return
+    }
+    backends.value = json
   } catch (e) {
     notification('error', 'Error', `Failed to load backends. ${e.message}`)
   } finally {

frontend/pages/backup.vue

@@ -120,6 +120,9 @@ const loadContent = async () => {
   try {
     const response = await request('/system/backup')
     items.value = await response.json()
+    if (useRoute().name !== 'backup') {
+      return
+    }
 
     queued.value = await isQueued()
   } catch (e) {

frontend/pages/env.vue

@@ -312,6 +312,9 @@ const addVariable = async () => {
     }
 
     const json = await response.json()
+    if (useRoute().name !== 'env') {
+      return
+    }
 
     if (200 !== response.status) {
       notification('error', 'Error', `${json.error.code}: ${json.error.message}`, 5000)

frontend/pages/events.vue

@@ -317,10 +317,13 @@ const loadContent = async () => {
     requests.value = []
 
     const response = await request(`/system/events`)
-    let json;
+    let json
 
     try {
       json = await response.json()
+      if (useRoute().name !== 'events') {
+        return
+      }
     } catch (e) {
       json = {
         error: {
@@ -357,7 +360,7 @@ const deleteItem = async (item, type, key) => {
     })
 
     if (200 !== response.status) {
-      let json;
+      let json
 
       try {
         json = await response.json()

frontend/pages/history/[id]/index.vue

@@ -505,6 +505,12 @@ const loadContent = async (id) => {
   const response = await request(`/history/${id}`)
   const json = await response.json()
 
+  if (useRoute().name !== 'history-id') {
+    return
+  }
+
+  console.log(useRoute().name)
+
   isLoading.value = false
 
   if (200 !== response.status) {

frontend/pages/history/index.vue

@@ -389,6 +389,12 @@ const loadContent = async (pageNumber, fromPopState = false) => {
 
     const response = await request(`/history?${search.toString()}`)
     const json = await response.json()
+
+    if (useRoute().name !== 'history') {
+      await unloadPage()
+      return
+    }
+
     const currentUrl = window.location.pathname + '?' + (new URLSearchParams(window.location.search)).toString()
 
     if (!fromPopState && currentUrl !== newUrl) {
@@ -474,15 +480,6 @@ const getHelp = (key) => {
   return `<span class="icon-text"><span class="icon"><i class="fas fa-info"></i></span><span>${text}</span></span>`
 }
 
-const triggerSearch = async (search_type, search_query) => {
-  searchForm.value = true
-  perpage.value = 50
-  page.value = 1
-  searchField.value = search_type
-  query.value = search_query
-  await loadContent(1);
-}
-
 const toggleFilter = () => {
   showFilter.value = !showFilter.value
   if (!showFilter.value) {
@@ -642,8 +639,10 @@ onMounted(async () => {
   await loadContent(page.value ?? 1)
 })
 
-onUnmounted(() => {
+const unloadPage = async () => {
   window.removeEventListener('history_main_link_clicked', stateCallBack)
   window.removeEventListener('popstate', stateCallBack)
-})
+}
+
+onUnmounted(async () => await unloadPage())
 </script>

frontend/pages/ignore.vue

@@ -306,16 +306,24 @@ const loadContent = async () => {
   items.value = []
 
   if (!guids.value.length) {
-    const guid_response = await request('/system/guids')
-    guids.value = await guid_response.json()
+    const guid_request = await request('/system/guids')
+    const guid_response = await guid_request.json()
+    if (useRoute().name !== 'ignore') {
+      return
+    }
+    guids.value = guid_response
   }
 
   if (!backends.value.length) {
-    const backends_response = await request('/backends')
-    backends.value = await backends_response.json()
+    const backends_request = await request('/backends')
+    const backends_response = await backends_request.json()
+    if (useRoute().name !== 'ignore') {
+      return
+    }
+    backends.value = backends_response
   }
 
-  let response, json;
+  let response, json
 
   try {
     response = await request(`/ignore`)
@@ -326,6 +334,9 @@ const loadContent = async () => {
 
   try {
     json = await response.json()
+    if (useRoute().name !== 'ignore') {
+      return
+    }
   } catch (e) {
     json = {
       error: {
@@ -371,7 +382,7 @@ const makeItemLink = (item) => {
 
   const type = item.type === 'Show' ? 'show' : 'id'
 
-  const params = new URLSearchParams();
+  const params = new URLSearchParams()
   params.append('perpage', '50')
   params.append('page', '1')
   params.append('q', `${item.backend}.${type}://${item.scoped_to}`)
@@ -409,7 +420,7 @@ const addIgnoreRule = async () => {
     return
   }
 
-  return cancelForm();
+  return cancelForm()
 }
 
 const cancelForm = () => {
@@ -420,7 +431,7 @@ const cancelForm = () => {
 watch(toggleForm, (value) => {
   if (!value) {
     cancelForm()
-    return;
+    return
   }
 
   awaitElement('#page_form', (_, el) => el.scrollIntoView({
@@ -428,7 +439,7 @@ watch(toggleForm, (value) => {
     block: 'start',
     inline: 'nearest'
   }))
-});
+})
 
 const checkForm = computed(() => {
   const {id, type, backend, db} = form.value

frontend/pages/index.vue

@@ -132,8 +132,12 @@ const loadContent = async () => {
   try {
     const response = await request(`/history?perpage=6`)
     if (response.ok) {
-      const json = await response.json();
-      lastHistory.value = json.history;
+      const historyResponse = await response.json()
+      if (useRoute().name !== 'index') {
+        return
+      }
+
+      lastHistory.value = historyResponse.history
     }
   } catch (e) {
   }
@@ -141,11 +145,15 @@ const loadContent = async () => {
   try {
     const response = await request(`/logs/recent`)
     if (response.ok) {
-      logs.value = await response.json();
+      const logsResponse = await response.json()
+      if (useRoute().name !== 'index') {
+        return
+      }
+      logs.value = logsResponse
     }
   } catch (e) {
   }
-};
+}
 
 onMounted(async () => loadContent())
 onUpdated(() => document.querySelectorAll('.logs-container').forEach((el) => el.scrollTop = el.scrollHeight))

frontend/pages/integrity.vue

@@ -262,11 +262,11 @@ const isDeleting = ref(false)
 const filter = ref('')
 const showFilter = ref(false)
 const isCached = ref(false)
-const cache = useSessionCache();
+const cache = useSessionCache()
 
 const selectAll = ref(false)
 const massActionInProgress = ref(false)
-watch(selectAll, v => selected_ids.value = v ? filteredRows(items.value).map(i => i.id) : []);
+watch(selectAll, v => selected_ids.value = v ? filteredRows(items.value).map(i => i.id) : [])
 
 const toggleFilter = () => {
   showFilter.value = !showFilter.value
@@ -289,6 +289,10 @@ const loadContent = async () => {
     const response = await request(`/system/integrity`)
     const json = await response.json()
 
+    if (useRoute().name !== 'integrity') {
+      return
+    }
+
     if (200 !== response.status) {
       notification('error', 'Error', `API Error. ${json.error.code}: ${json.error.message}`)
       isLoading.value = false
@@ -360,7 +364,7 @@ const emptyCache = async () => {
       return notification('error', 'Error', `API Error. ${json.error.code}: ${json.error.message}`)
     }
 
-    items.value = [];
+    items.value = []
     isLoaded.value = false
     isLoading.value = false
     isCached.value = false

frontend/pages/logs/[filename].vue

@@ -106,15 +106,22 @@ const stream = ref(null)
 const logContainer = ref(null)
 
 const loadContent = async () => {
+  console.log(useRoute().name)
   try {
     isLoading.value = true
     const response = await request(`/log/${filename}`)
     if (response.ok) {
       const text = await response.text()
+      if (useRoute().name !== 'logs-filename') {
+        return
+      }
       data.value = text.split('\n')
     } else {
       try {
         const json = await response.json();
+        if (useRoute().name !== 'logs-filename') {
+          return
+        }
         error.value = `${json.error.code}: ${json.error.message}`
       } catch (e) {
         error.value = `${response.status}: ${response.statusText}`

frontend/pages/logs/index.vue

@@ -89,6 +89,10 @@ const loadContent = async () => {
     const response = await request('/logs')
     let data = await response.json();
 
+    if (useRoute().name !== 'logs') {
+      return
+    }
+
     data.sort((a, b) => new Date(b.modified) - new Date(a.modified));
 
     logs.value = data;

frontend/pages/parity.vue

@@ -284,6 +284,7 @@ import {
 import moment from 'moment'
 import {useStorage} from '@vueuse/core'
 import Lazy from '~/components/Lazy'
+import {useSessionCache} from '~/utils/cache'
 
 const route = useRoute()
 
@@ -299,14 +300,16 @@ const isDeleting = ref(false)
 const show_page_tips = useStorage('show_page_tips', true)
 const filter = ref(route.query.filter ?? '')
 const showFilter = ref(!!filter.value)
-const min = ref(route.query.min ?? null);
-const max = ref();
-const cacheKey = computed(() => `parity-${min.value}-${page.value}-${perpage.value}`)
+const min = ref(route.query.min ?? null)
+const max = ref()
+const cacheKey = computed(() => `parity_v1-${min.value}-${page.value}-${perpage.value}`)
 
 const selectAll = ref(false)
 const selected_ids = ref([])
 const massActionInProgress = ref(false)
-watch(selectAll, v => selected_ids.value = v ? filteredRows(items.value).map(i => i.id) : []);
+watch(selectAll, v => selected_ids.value = v ? filteredRows(items.value).map(i => i.id) : [])
+
+const cache = useSessionCache()
 
 
 const toggleFilter = () => {
@@ -350,18 +353,22 @@ const loadContent = async (pageNumber, fromPopState = false, fromReload = false)
   page.value = pageNumber
 
   try {
-    let json;
+    let json
 
     if (true === fromReload) {
-      clearCache();
+      clearCache()
     }
 
-    if (sessionStorage?.getItem(cacheKey.value)) {
-      json = JSON.parse(sessionStorage.getItem(cacheKey.value))
+    if (cache.has(cacheKey.value)) {
+      json = cache.get(cacheKey.value)
     } else {
       const response = await request(`/system/parity/?${search.toString()}`)
       json = await response.json()
-      sessionStorage.setItem(cacheKey.value, JSON.stringify(json))
+      cache.set(cacheKey.value, json)
+
+      if (useRoute().name !== 'parity') {
+        return
+      }
 
       if (200 !== response.status) {
         notification('error', 'Error', `API Error. ${json.error.code}: ${json.error.message}`)
@@ -420,7 +427,7 @@ const massDelete = async () => {
     } else {
       items.value = items.value.filter(i => !selected_ids.value.includes(i.id))
       try {
-        sessionStorage?.removeItem(cacheKey.value)
+        cache.remove(cacheKey.value)
       } catch (e) {
       }
     }
@@ -475,13 +482,13 @@ const deleteData = async () => {
     filter.value = ''
     page.value = 1
 
-    clearCache();
+    clearCache()
   } catch (e) {
     notification('error', 'Error', e.message)
   } finally {
     isDeleting.value = false
   }
-};
+}
 
 onMounted(async () => {
   const response = await request(`/backends/`)
@@ -521,7 +528,7 @@ watch(filter, val => {
   const router = useRouter()
   if (!val) {
     if (!route?.query['filter']) {
-      return;
+      return
     }
 
     router.push({
@@ -531,11 +538,11 @@ watch(filter, val => {
         'filter': undefined
       }
     })
-    return;
+    return
   }
 
   if (route?.query['filter'] === val) {
-    return;
+    return
   }
 
   router.push({
@@ -547,7 +554,7 @@ watch(filter, val => {
   })
 })
 
-const clearCache = () => Object.keys(sessionStorage ?? {}).filter(k => /^parity/.test(k)).forEach(k => sessionStorage.removeItem(k))
+const clearCache = () => cache.clear(k => /^parity/.test(k))
 
 const stateCallBack = async e => {
   if (!e.state && !e.detail) {

frontend/pages/report.vue

@@ -50,17 +50,25 @@
 
 <script setup>
 import {copyText} from '~/utils/index'
+import {request} from '~/utils/request'
 
 useHead({title: `System Report`})
 
 const data = ref([])
 const show_report_warning = ref(true)
 
-watch(show_report_warning, async (value) => {
-  if (false !== value) {
+watch(show_report_warning, async v => {
+  if (false !== v) {
     return
   }
+
   const response = await request(`/system/report`)
-  data.value = await response.json()
+  const json = await response.json()
+
+  if (useRoute().name === 'report') {
+    return
+  }
+
+  data.value = json
 })
 </script>

frontend/pages/reset.vue

@@ -67,6 +67,7 @@ import request from '~/utils/request'
 import Message from '~/components/Message'
 import {notification} from '~/utils/index'
 import Confirm from '~/components/Confirm'
+import {useSessionCache} from '~/utils/cache'
 
 const error = ref()
 const isResetting = ref(false)
@@ -93,6 +94,10 @@ const resetSystem = async () => {
       }
     }
 
+    if (useRoute().name !== 'reset') {
+      return
+    }
+
     if (200 !== response.status) {
       error.value = json
       return
@@ -103,7 +108,7 @@ const resetSystem = async () => {
 
     // -- remove all session storage due to the reset.
     try {
-      Object.keys(sessionStorage).forEach(k => sessionStorage.removeItem(k))
+      useSessionCache().clear()
     } catch (e) {
     }
   } catch (e) {

frontend/pages/suppression.vue

@@ -228,7 +228,7 @@ import Message from '~/components/Message'
 
 useHead({title: 'Log Suppressor'})
 
-const form_data = {id: null, rule: '', example: '', type: 'contains'};
+const form_data = {id: null, rule: '', example: '', type: 'contains'}
 
 const isLoading = ref(false)
 const items = ref([])
@@ -240,11 +240,14 @@ const loadContent = async () => {
   isLoading.value = true
   items.value = []
 
-  let response, json;
+  let response, json
 
   try {
     response = await request(`/system/suppressor`)
     json = await response.json()
+    if (useRoute().name !== 'suppression') {
+      return
+    }
 
     if (!response.ok) {
       notification('error', 'Error', `${json.error.code ?? response.status}: ${json.error.message ?? response.statusText}`)
@@ -294,7 +297,7 @@ const sendData = async () => {
     })
 
     if (304 === response.status) {
-      return cancelForm();
+      return cancelForm()
     }
 
     const json = await response.json()
@@ -312,7 +315,7 @@ const sendData = async () => {
 
     const action = formData.value.id ? 'updated' : 'added'
     notification('success', 'Success', `Suppression rule successfully ${action}.`, 5000)
-    return cancelForm();
+    return cancelForm()
   } catch (e) {
     return notification('error', 'Error', `Request error. ${e.message}`, 5000)
   }
@@ -337,5 +340,5 @@ watch(toggleForm, (value) => {
   if (!value) {
     formData.value = form_data
   }
-});
+})
 </script>

frontend/pages/tasks.vue

@@ -203,6 +203,9 @@ const loadContent = async () => {
   try {
     const response = await request('/tasks')
     const json = await response.json()
+    if (useRoute().name !== 'tasks') {
+      return
+    }
     tasks.value = json.tasks
     queued.value = json.queued
     status.value = json.status
@@ -262,7 +265,7 @@ const queueTask = async task => {
 }
 
 const makeEnvLink = (key, val = null) => {
-  let search = new URLSearchParams();
+  let search = new URLSearchParams()
   search.set('callback', '/tasks')
   search.set('edit', key)
   if (val) {
@@ -275,6 +278,6 @@ const confirmRun = async task => {
   if (!confirm(`Run '${task.name}' via web console now?`)) {
     return
   }
-  await navigateTo(makeConsoleCommand(`${task.command} ${task.args || ''}`, true));
+  await navigateTo(makeConsoleCommand(`${task.command} ${task.args || ''}`, true))
 }
 </script>

frontend/utils/cache.js

@@ -66,9 +66,15 @@ class Cache {
 
     /**
      * Clear the cache
+     *
+     * @param {function|null} filter - A filter function to remove only specific keys. Or null to clear all.
      */
-    clear() {
-        this.storage.clear()
+    clear(filter = null) {
+        if (null !== filter) {
+            Object.keys(this.storage ?? {}).filter(filter).forEach(k => this.storage.removeItem(k))
+        } else {
+            this.storage.clear()
+        }
     }
 
     /**