✨ add disconnected indicator

Author: Wytamma

frontend/src/components/data/TraceList.vue

@@ -154,7 +154,7 @@ export default class TraceList extends Vue {
   public show: boolean = true;
   public interval?: number;
   // this is so dumb need a better way to do dynamic v-model defualts
-  public burnIn = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
+  public burnIn = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
 
   get traces() {
     const traces = readTraces(this.$store);

frontend/src/store/main/actions.ts

@@ -6,6 +6,7 @@ import { ActionContext } from 'vuex';
 import { State } from '../state';
 import {
     commitAddNotification,
+    commitDisconnected,
     commitRemoveNotification,
     commitSetLoggedIn,
     commitSetLogInError,
@@ -66,14 +67,21 @@ export const actions = {
         }
     },
     async actionCheckApiError(context: MainContext, payload: AxiosError) {
+        // check for general errors e.g. CORS or network issues
+        if (!payload.response) {
+            console.log('Network error');
+            return commitDisconnected(context, true);
+        }
+        console.log('API error', payload.response);
+        commitDisconnected(context, false);
         if (payload.response!.status === 401) {
-            await dispatchLogOut(context);
+            return await dispatchLogOut(context);
         }
         if (payload.response!.status === 404) {
-            commitAddNotification(context, { content: payload.response!.data.detail, color: 'error', notFound: true});
+            return commitAddNotification(context, { content: payload.response!.data.detail, color: 'error', notFound: true});
         }
         if (payload.response!.status === 500) {
-            commitAddNotification(context, { content: payload.response!.data.detail, color: 'error', notFound: true});
+            return commitAddNotification(context, { content: payload.response!.data.detail, color: 'error', notFound: true});
         }
     },
     actionRouteLoggedIn(context: MainContext) {

frontend/src/store/main/getters.ts

@@ -4,6 +4,7 @@ import { MainState } from './state';
 
 export const getters = {
     loginError: (state: MainState) => state.logInError,
+    disconnected: (state: MainState) => state.disconnected,
     dashboardShowDrawer: (state: MainState) => state.dashboardShowDrawer,
     dashboardMiniDrawer: (state: MainState) => state.dashboardMiniDrawer,
     token: (state: MainState) => state.token,
@@ -19,3 +20,4 @@ export const readIsLoggedIn = read(getters.isLoggedIn);
 export const readLoginError = read(getters.loginError);
 export const readToken = read(getters.token);
 export const readFirstNotification = read(getters.firstNotification);
+export const readDisconnected = read(getters.disconnected);

frontend/src/store/main/index.ts

@@ -7,6 +7,7 @@ const defaultState: MainState = {
   isLoggedIn: null,
   token: '',
   logInError: false,
+  disconnected: false,
   dashboardMiniDrawer: false,
   dashboardShowDrawer: false,
   notifications: [],

frontend/src/store/main/mutations.ts

@@ -13,6 +13,9 @@ export const mutations = {
     setLogInError(state: MainState, payload: boolean) {
         state.logInError = payload;
     },
+    setDisconnected(state: MainState, payload: boolean) {
+        state.disconnected = payload;
+    },
     setDashboardMiniDrawer(state: MainState, payload: boolean) {
         state.dashboardMiniDrawer = payload;
     },
@@ -36,3 +39,4 @@ export const commitSetLogInError = commit(mutations.setLogInError);
 export const commitSetToken = commit(mutations.setToken);
 export const commitAddNotification = commit(mutations.addNotification);
 export const commitRemoveNotification = commit(mutations.removeNotification);
+export const commitDisconnected = commit(mutations.setDisconnected);

frontend/src/store/main/state.ts

@@ -9,6 +9,7 @@ export interface MainState {
     token: string;
     isLoggedIn: boolean | null;
     logInError: boolean;
+    disconnected: boolean;
     dashboardMiniDrawer: boolean;
     dashboardShowDrawer: boolean;
     notifications: AppNotification[];

frontend/src/views/main/Dashboard.vue

@@ -7,7 +7,13 @@
                   class="rounded-lg"
                   flat >
               <v-toolbar-title class="text-h5">
-                  Traces
+                  Traces 
+                  <v-tooltip v-if="isDisconnected"  color="black" top>
+                  <template #activator="{ on }">
+                    <v-icon v-on="on"  color="red darken-2">mdi-link-variant-off</v-icon>
+                  </template>
+                  <span>Disconnected from server!</span>
+                </v-tooltip>
               </v-toolbar-title>
 
               <v-spacer></v-spacer>
@@ -161,6 +167,7 @@ import StatsTable from '@/components/data/StatsTable.vue';
 import TraceList from '@/components/data/TraceList.vue';
 
 import { readActiveTraceIDs, readTraces } from '@/store/data/getters';
+import { readDisconnected } from '@/store/main/getters';
 import { Plotly } from 'vue-plotly';
 import { Component, Vue } from 'vue-property-decorator';
 import VueResizable from 'vue-resizable';
@@ -194,6 +201,10 @@ export default class Dashboard extends Vue {
       }
   }
 
+  get isDisconnected() {
+    return readDisconnected(this.$store);
+  }
+
   get activeTraceIDs() {
     const IDs = readActiveTraceIDs(this.$store);
     return IDs;