Better offline detection (e.g. if database is offline)

This commit is contained in:
Ferdinand Thiessen 2020-11-15 18:51:30 +01:00
parent 97b60298ec
commit c8708be39d
8 changed files with 112 additions and 129 deletions

View File

@ -3,7 +3,6 @@ import { boot } from 'quasar/wrappers';
import config from '../config';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { Notify } from 'quasar';
declare module 'vue/types/vue' {
interface Vue {
@ -11,7 +10,7 @@ declare module 'vue/types/vue' {
}
}
export default boot<Store<StateInterface>>(({ Vue, store }) => {
export default boot<Store<StateInterface>>(({ Vue, store, router }) => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
Vue.prototype.$axios = axios;
axios.defaults.baseURL = config.baseURL;
@ -30,7 +29,7 @@ export default boot<Store<StateInterface>>(({ Vue, store }) => {
/***
* Intercept responses
* - filter 401 --> logout
* - filter timeout or 502 --> backendOffline
* - filter timeout or 502-504 --> backendOffline
*/
axios.interceptors.response.use(
response => response,
@ -39,17 +38,15 @@ export default boot<Store<StateInterface>>(({ Vue, store }) => {
const e = <AxiosError>error;
if (
e.code === 'ECONNABORTED' ||
(e.response && e.response.status === 502)
(e.response && e.response.status >= 502 && e.response.status <= 504)
) {
store.commit('session/setOffline', true);
} else if (e.response && e.response.status == 401) {
return store.dispatch('session/clearCurrent');
} else {
Notify.create({
type: 'error',
message: 'Eine Aktion konnte nicht durchgeführt werden.',
group: false
return router.push({
name: 'offline',
query: { redirect: router.currentRoute.fullPath }
});
} else if (e.response && e.response.status == 401) {
if (router.currentRoute.name !== 'login')
return store.dispatch('session/clearCurrent');
}
}
return Promise.reject(error);

View File

@ -1,46 +0,0 @@
<template>
<div class="q-pa-md q-gutter-sm">
<q-dialog
v-model="offline"
persistent
transition-show="scale"
transition-hide="scale"
>
<q-card style="width: 400px">
<q-card-section class="bg-negative text-white">
<div class="text-h6 col-12">Backend offline</div>
</q-card-section>
<q-card-section>
<span>Es scheint, dass das Backend aktuell offline ist.</span>
</q-card-section>
<q-card-actions align="right" class="bg-white text-negative">
<q-btn flat label="Erneut versuchen" v-close-popup @click="reload" />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
export default defineComponent({
name: 'BackendOffline',
setup(_, { root }) {
const offline = computed(
() => (<Store<StateInterface>>root.$store).state.session.backendOffline
);
const reload = function() {
root.$store.commit('session/setOffline', false);
root.$router.go(0);
};
return { offline, reload };
}
});
</script>

View File

@ -1,6 +1,9 @@
<template>
<q-layout view="hHh lpr lFf">
<q-header elevated class="bg-primary text-white">
<q-header
elevated
class="bg-primary text-white"
>
<q-toolbar>
<!-- Button um Navigationsleiset ein und auszublenden. Nötig bei Desktop? -->
<q-btn
@ -36,7 +39,13 @@
:permissions="shortcut.permissions"
/>
</div>
<q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
<q-btn
flat
round
dense
icon="mdi-exit-to-app"
@click="logout()"
/>
</q-toolbar>
</q-header>
@ -74,7 +83,10 @@
/>
</q-list>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
<div
class="q-mini-drawer-hide absolute"
style="top: 15px; right: -11px"
>
<q-btn
size="sm"
dense
@ -97,9 +109,6 @@
:permissions="link.permissions"
/>
</q-drawer>
<BackendOffline />
<q-page-container>
<router-view />
</q-page-container>
@ -109,7 +118,6 @@
<script lang="ts">
import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import BackendOffline from 'components/loading/BackendOffline.vue';
import { Screen, Loading } from 'quasar';
import { defineComponent, ref, computed } from '@vue/composition-api';
import { Store } from 'vuex';
@ -121,23 +129,23 @@ const links = [
name: 'about',
title: 'Über Flaschengeist',
link: 'about',
icon: 'mdi-information'
}
icon: 'mdi-information',
},
];
const shortcuts = [
{
link: 'about',
icon: 'mdi-information'
icon: 'mdi-information',
},
{
link: 'user',
icon: 'mdi-account'
icon: 'mdi-account',
},
{
link: 'user-plugin1',
icon: 'mdi-account-plus'
}
icon: 'mdi-account-plus',
},
];
declare module 'vue/types/vue' {
@ -148,14 +156,14 @@ declare module 'vue/types/vue' {
export default defineComponent({
name: 'MainLayout',
components: { EssentialLink, ShortCutLink, BackendOffline },
components: { EssentialLink, ShortCutLink },
setup(_, ctx) {
const leftDrawer = ref(false);
const leftDrawerOpen = ref(
computed({
get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
set: (val: boolean) => (leftDrawer.value = val)
set: (val: boolean) => (leftDrawer.value = val),
})
);
const leftDrawerMini = ref(false);
@ -200,8 +208,8 @@ export default defineComponent({
links,
pluginChildLinks,
shortcuts,
logout
logout,
};
}
},
});
</script>

View File

@ -37,8 +37,6 @@
</q-toolbar>
</q-header>
<BackendOffline />
<q-page-container>
<router-view />
</q-page-container>
@ -48,10 +46,9 @@
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import BackendOffline from 'components/loading/BackendOffline.vue';
export default defineComponent({
name: 'OutLayout',
components: { ShortCutLink, BackendOffline }
components: { ShortCutLink },
});
</script>

View File

@ -1,33 +0,0 @@
<template>
<div
class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
>
<div>
<div style="font-size: 30vh">
404
</div>
<div class="text-h2" style="opacity:.4">
Oops. Nothing here...
</div>
<q-btn
class="q-mt-xl"
color="white"
text-color="blue"
unelevated
to="/"
label="Go Home"
no-caps
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
export default defineComponent({
name: 'Error404'
});
</script>

59
src/pages/Offline.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
<div>
<div>
<svg
style="max-width: 400px;"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 292.761 292.761"
xmlns:xlink="http://www.w3.org/1999/xlink"
enable-background="new 0 0 292.761 292.761"
fill="white"
>
<g>
<circle
cx="87.493"
cy="25.907"
r="25.907"
/>
<path d="m194.386,209.531l-42.802-36.895c-1.825-1.573-4.001-2.683-6.345-3.237l-72.533-17.136 47.755,.703v-34.439l-46.525-26.18 50.36,14.829c4.016,1.182 8.356,0.276 11.564-2.414l38.264-32.093c1.1-0.923 2.001-1.994 2.698-3.161 2.656-4.442 2.36-10.26-1.154-14.449-4.437-5.29-12.32-5.981-17.61-1.544l-33.127,27.785-45.605-13.428 41.402,1.292 16.027-13.442-6.021-2.955-3.631,3.945-18.134,2.86h-37.216c-9.665,0-17.501,7.835-17.501,17.501v90.395l.029-.024c0.252,6.569 4.819,12.433 11.527,14.019l68.966,16.292 40.024,34.501c2.834,2.442 6.318,3.639 9.787,3.639 4.213,0 8.402-1.765 11.368-5.206 5.41-6.278 4.708-15.75-1.567-21.158z" />
<path d="m233.888,50.21l-43.49-21.349c-2.17-1.065-4.545-1.612-6.94-1.612-0.861,0-1.724,0.071-2.581,0.213l-13.243,2.2-24.213-11.886c-6.197-3.043-13.688-0.485-16.728,5.713-3.042,6.197-0.484,13.687 5.713,16.729l14.402,7.069 3.539-2.969c4.405-3.694 9.994-5.729 15.738-5.729 7.266,0 14.11,3.192 18.777,8.756 6.702,7.991 7.61,19.371 2.258,28.32-0.529,0.884-1.127,1.717-1.759,2.523l28.035,13.762c0.916,0.45 1.914,0.664 2.967,0.664 5.79,0 13.263-6.495 18.05-16.247 5.66-11.524 5.424-23.236-0.525-26.157z" />
<path d="m102.363,202.426l2.531,6.9-13.835,65.324c-1.716,8.105 3.463,16.065 11.567,17.782 1.048,0.222 2.092,0.328 3.122,0.328 6.936-0.001 13.165-4.839 14.66-11.896l14.265-67.357-5.513-4.752-26.797-6.329z" />
</g>
</svg>
</div>
<div class="text-h2">
Der Admin is über's Kabel gestolpert!
</div>
<div>
Aktuell kann der Backend Server nicht erreicht werden, wir versuchen es in {{reload}} Sekunden erneut.
</div>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
ref,
onMounted,
onUnmounted,
} from '@vue/composition-api';
export default defineComponent({
name: 'Offline',
setup(_, { root }) {
const reload = ref(10);
const ival = setInterval(() => {
reload.value -= 1;
if (reload.value === 0) {
const path = <string | null>root.$route.query.redirect || '/login';
root.$router.replace({ path: path });
}
}, 1000);
onUnmounted(() => clearInterval(ival));
return { reload };
},
});
</script>

View File

@ -11,7 +11,6 @@ export interface SessionInterface {
currentSession?: FG.Session;
sessions: FG.Session[];
loading: boolean;
backendOffline: boolean;
}
/**
@ -27,8 +26,7 @@ function loadCurrentSession() {
const state: SessionInterface = {
sessions: [],
currentSession: loadCurrentSession() || undefined,
loading: false,
backendOffline: false
loading: false
};
const mutations: MutationTree<SessionInterface> = {
@ -45,9 +43,6 @@ const mutations: MutationTree<SessionInterface> = {
},
setLoading(state, value: boolean) {
state.loading = value;
},
setOffline(state, value: boolean) {
state.backendOffline = value;
}
};
@ -68,7 +63,8 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
root: true
});
})
.catch(() => {
.catch((error: AxiosError) => {
if (error.response && error.response.status === 401)
Notify.create({
group: false,
type: 'negative',
@ -77,6 +73,7 @@ const actions: ActionTree<SessionInterface, StateInterface> = {
progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }]
});
return Promise.reject(error.response);
});
},
/**

View File

@ -43,12 +43,16 @@ const routes: RouteConfig[] = [
name: 'error',
component: () => import('pages/PluginError.vue')
},
{
path: '/offline',
name: 'offline',
component: () => import('pages/Offline.vue')
},
// Always leave this as last one,
// but you can also remove it
{
path: '*',
redirect: 'login',
component: () => import('pages/Error404.vue')
redirect: 'login'
}
];