Merge pull request #50 from Savage-Aim/health-check

Health check

backend/backend/urls.py

@@ -16,15 +16,15 @@
 from allauth.socialaccount.providers.discord.urls import urlpatterns as discord_urls
 from django.contrib import admin
 from django.contrib.auth.views import LogoutView
-from django.views.generic import TemplateView
+from django.http import HttpResponse
 from django.urls import path, include
 
 patterns = [
     path('admin/', admin.site.urls),
     path('api/', include(('api.urls', 'api'))),
-
     # Auth stuff (TODO - replace this because it's sorta workaroundy)
     path('accounts/', include(discord_urls)),
+    path('health/', lambda _: HttpResponse()),
     path('logout/', LogoutView.as_view()),
 ]
 

backend/backend/urls_live.py

@@ -16,6 +16,7 @@
 from allauth.socialaccount.providers.discord.urls import urlpatterns as discord_urls
 from allauth.socialaccount.views import login_cancelled, login_error
 from django.contrib.auth.views import LogoutView
+from django.http import HttpResponse
 from django.urls import path, include
 
 patterns = [
@@ -25,6 +26,7 @@
     path('accounts/', include(discord_urls)),
     path('auth/cancelled/', login_cancelled, name='socialaccount_login_cancelled'),
     path('auth/error/', login_error, name='socialaccount_login_error'),
+    path('health/', lambda _: HttpResponse()),
     path('logout/', LogoutView.as_view()),
 ]
 

frontend/src/App.vue

@@ -1,20 +1,5 @@
 <template>
-  <div id="root" v-if="maintenance">
-    <Nav :maintenance="maintenance" />
-    <div class="hero is-fullheight-with-navbar">
-      <div class="hero-body">
-        <div class="container has-text-centered">
-          <h1 class="title is-1">
-            Savage <span class="has-text-danger">Aim</span> Maintenance
-          </h1>
-          <p class="subtitle">
-            We're currently undergoing maintenance. We should be back soon!
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div id="root" v-else>
+  <div id="root">
     <Nav />
     <div class="container is-fluid">
       <router-view ref="viewComponent"></router-view>
@@ -41,6 +26,20 @@ import SavageAimMixin from '@/mixins/savage_aim_mixin'
 export default class App extends Vue {
   updateSocket!: WebSocket
 
+  // Check that the backend server is up before loading the App properly
+  async checkBackend(): Promise<void> {
+    const response = await fetch('/backend/health/')
+    if (response.ok) {
+      this.loadData()
+      Vue.nextTick(() => this.$forceUpdate)
+      return
+    }
+
+    // If the request fails, it's almost guaranteed that the server is down, so ping a warning and set a check again in 30 seconds
+    this.$notify({ text: 'Backend server could not be reached. There is probably an update being deployed. Checking again in 30 seconds.', type: 'is-warning' })
+    setTimeout(this.checkBackend, 30 * 1000)
+  }
+
   // Check the current version against the last version the user has seen, and if there's anything new, display the CHANGELOG modal
   checkChangelog(): void {
     const lastVersion = localStorage.lastVersion || ''
@@ -52,20 +51,17 @@ export default class App extends Vue {
     }
   }
 
-  get maintenance(): boolean {
-    if (process.env.VUE_APP_MAINTENANCE !== undefined) {
-      return process.env.VUE_APP_MAINTENANCE === '1'
-    }
-    return false
-  }
-
   get viewComponent(): SavageAimMixin {
     return this.$refs.viewComponent as SavageAimMixin
   }
 
   async mounted(): Promise<void> {
-    if (this.maintenance) return
+    this.checkBackend()
+  }
+
+  loadData(): void {
     // Populate the store with static information for dropdowns later
+    this.$store.dispatch('fetchUser')
     this.$store.dispatch('fetchGear')
     this.$store.dispatch('fetchItemLevels')
     this.$store.dispatch('fetchJobs')

frontend/src/components/modals/changelog.vue

@@ -13,6 +13,7 @@
     <div class="card-content content">
       <h2 class="has-text-primary subtitle">{{ version }}</h2>
       <div class="divider"><i class="material-icons icon">expand_more</i> Major Changes <i class="material-icons icon">expand_more</i></div>
+      <p>Added handling to detect if the backend is up and responding before loading data, to prevent random errors during deployments.</p>
       <p>
         Added a new "Update" button on Character pages to refresh Character data from the Lodestone.
         <ul>

frontend/src/components/nav.vue

@@ -14,7 +14,7 @@
       </a>
     </div>
 
-    <div ref="navbar" class="navbar-menu" v-if="!maintenance">
+    <div ref="navbar" class="navbar-menu">
       <div class="navbar-start">
         <router-link to="/" class="navbar-item">
           <div class="icon-text">
@@ -97,9 +97,6 @@ import NotificationsModal from './modals/notifications.vue'
 
 @Component
 export default class Nav extends SavageAimMixin {
-  @Prop({ default: false })
-  maintenance!: boolean
-
   // Only check for the refs after we've been mounted
   isMounted = false
 

frontend/src/store.ts

@@ -181,7 +181,7 @@ const store: Store = {
           }
           commit('setUser', userDetails)
         }
-        else {
+        else if (response.status !== 502) {
           Vue.notify({ text: `Error ${response.status} when fetching User details.`, type: 'is-danger' })
         }
       }