[Frontend] Fix connectivity check

r2binx · Mar 7, 2023 · a812641 · a812641
1 parent ecaa48c
commit a812641
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 34 deletions.
diff --git a/frontend/src/components/HostStatus.vue b/frontend/src/components/HostStatus.vue
@@ -83,7 +83,7 @@ onBeforeUnmount(() => clearInterval(interval));
     <n-collapse>
         <n-collapse-item class="status-collapse" title="STATUS" name="status">
             <template #header-extra>
-                <p v-if="state.reachable" class="active">ONLINE</p>
+                <p v-if="state.reachable.value" class="active">ONLINE</p>
                 <p v-else class="idle">OFFLINE</p>
             </template>
             <n-space v-if="hasPermission('guest')" vertical>
@@ -127,7 +127,7 @@ onBeforeUnmount(() => clearInterval(interval));
                                             REBOOT
                                         </n-button>
                                     </template>
-                                    <div v-if="state.active">
+                                    <div v-if="state.active.value">
                                         System is active, are you sure?
                                     </div>
                                     <div v-else>Are you sure you want to reboot?</div>
@@ -150,7 +150,7 @@ onBeforeUnmount(() => clearInterval(interval));
                                             SHUTDOWN
                                         </n-button>
                                     </template>
-                                    <template v-if="state.active" #action>
+                                    <template v-if="state.active.value" #action>
                                         <n-button
                                             type="error"
                                             size="small"
@@ -172,7 +172,7 @@ onBeforeUnmount(() => clearInterval(interval));
                                             LATER
                                         </n-button>
                                     </template>
-                                    <div v-if="state.active">
+                                    <div v-if="state.active.value">
                                         System is active, are you sure?
                                     </div>
                                     <div v-else>Are you sure you want to shutdown?</div>

diff --git a/frontend/src/components/HostStorage.vue b/frontend/src/components/HostStorage.vue
@@ -19,7 +19,7 @@ type Mount = {
 let storage = ref<Array<Mount>>();
 
 watchEffect(async () => {
-    if (state.reachable) {
+    if (state.reachable.value) {
         fetchStorageUsage().then((res) => {
             if (res.status === 200) {
                 storage.value = res.data.result;

diff --git a/frontend/src/components/KVM.vue b/frontend/src/components/KVM.vue
@@ -9,7 +9,7 @@ const state = useApiState();
 
 <template>
     <n-divider title-placement="left">LIBVIRT</n-divider>
-    <template v-if="state.vms">
+    <template v-if="state.vms.value">
         <n-list bordered>
             <n-list-item v-for="vm in state.vms.value" :key="vm.name">
                 <KvmThing :vm="vm" />

diff --git a/frontend/src/components/MainPanel.vue b/frontend/src/components/MainPanel.vue
@@ -57,7 +57,7 @@ function handleWakeUp() {
 
 <template>
     <div v-if="hasPermission('guest')">
-        <div v-if="state.reachable">
+        <div v-if="state.reachable.value">
             <n-message-provider>
                 <HostStatus />
             </n-message-provider>
@@ -72,7 +72,7 @@ function handleWakeUp() {
             <HostStorage />
         </div>
         <template v-else>
-            <n-space v-if="state.net_reachable" vertical justify="center">
+            <n-space v-if="state.net_reachable.value" vertical justify="center">
                 <n-space
                     style="margin-bottom: 25px; align-items: center"
                     justify="center"

diff --git a/frontend/src/composables/useApi.ts b/frontend/src/composables/useApi.ts
@@ -140,6 +140,15 @@ export function fetchStorageUsage() {
     return axios.get(host + "/storage/usage", { timeout: 1000 });
 }
 
+function catchNetworkError(error: any, message: string) {
+    if (!!error.isAxiosError && !error.response) {
+        console.log(message);
+        console.debug(error);
+    } else {
+        console.log(error);
+    }
+}
+
 const state: Omit<ApiState, "refreshState"> = reactive({
     reachable: false,
     active: false,
@@ -177,40 +186,39 @@ function useApiState() {
                     state.services = activeServices.data.active;
                     state.vms = allVMs.data.result;
                     state.fritz = fritz.data.result;
+                } else {
+                    state.reachable = false;
                 }
             })
             .catch((err) => {
-                if (!!err.isAxiosError && !err.response) {
-                    console.log("Server unreachable");
-                    console.debug(err);
-                } else {
-                    console.log(err);
-                }
+                catchNetworkError(err, "Server unreachable");
+                state.reachable = false;
             })
             .finally(() => {
                 state.refreshing = false;
             });
 
-        fetchWakeAvail().then((res) => {
-            if (res.status === 200) {
-                state.net_reachable = true;
-
-                fetchScheduledBoot()
-                    .then((schedres) => {
-                        if (schedres.status === 200) {
-                            state.schedule = schedres.data;
-                        }
-                    })
-                    .catch((err) => {
-                        if (!!err.isAxiosError && !err.response) {
-                            console.log("Network unreachable");
-                            console.debug(err);
-                        } else {
-                            console.log(err);
-                        }
-                    });
-            }
-        });
+        fetchWakeAvail()
+            .then((res) => {
+                if (res.status === 200) {
+                    state.net_reachable = true;
+
+                    fetchScheduledBoot()
+                        .then((schedres) => {
+                            if (schedres.status === 200) {
+                                state.schedule = schedres.data;
+                            }
+                        })
+                        .catch((err) => {
+                            catchNetworkError(err, "Network unreachable");
+                            state.net_reachable = false;
+                        });
+                }
+            })
+            .catch((err) => {
+                catchNetworkError(err, "Network unreachable");
+                state.net_reachable = false;
+            });
     };
 
     return {