Show error when backend is unavailable

src/layouts/DefaultLayout.vue

@@ -146,6 +146,14 @@
       <SplashScreen v-if="splashSrc" :img-url="splashSrc" :version="version" />
       <GlobalSearchComponent />
     </v-main>
+    <v-snackbar
+      v-model="showBackendError"
+      timeout="-1"
+      variant="text"
+      location="top"
+    >
+      <v-alert type="error">Backend is unavailable</v-alert>
+    </v-snackbar>
   </v-layout>
 </template>
 
@@ -162,9 +170,10 @@ import SplashScreen from '@/components/general/SplashScreen.vue'
 import GlobalSearchComponent from '@/components/general/GlobalSearchComponent.vue'
 
 import { configManager } from '@/services/application-config'
-import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { getResourcesStaticUrl, isBackendAvailable } from '@/lib/fews-config'
 import { StyleValue, nextTick } from 'vue'
 import packageConfig from '../../package.json'
+import { asyncComputed } from '@vueuse/core'
 
 const configStore = useConfigStore()
 const alertsStore = useAlertsStore()
@@ -181,6 +190,11 @@ const logoSrc = ref('')
 const splashSrc = ref<string>()
 const appBarStyle = ref<StyleValue>()
 const appBarColor = ref<string>('')
+const HEALTH_CHECK_TIMEOUT = 5000
+const showBackendError = asyncComputed(
+  async () => !(await isBackendAvailable(HEALTH_CHECK_TIMEOUT)),
+  false,
+)
 
 function updateAppBarColor() {
   appBarColor.value = getComputedStyle(document.body).getPropertyValue(

src/lib/fews-config/index.ts

@@ -44,3 +44,29 @@ export function getResourcesIconsUrl(resource: string) {
   })
   return webServiceProvider.resourcesIconsUrl(resource).toString()
 }
+
+export async function isBackendAvailable(timeout?: number) {
+  const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+
+  const controller = new AbortController()
+  const DEFAULT_TIMEOUT = 5000
+  const timeoutId = setTimeout(
+    () => controller.abort(),
+    timeout ?? DEFAULT_TIMEOUT,
+  )
+
+  const webServiceProvider = new PiWebserviceProvider(baseUrl, {
+    transformRequestFn: createTransformRequestFn(controller),
+  })
+
+  try {
+    await webServiceProvider.getVersion()
+  } catch (e) {
+    if (e instanceof Error && e.name === 'AbortError') {
+      return false
+    }
+  }
+
+  clearTimeout(timeoutId)
+  return true
+}