feat: check if device is up again properly

Author: ronny-standtke

Cargo.lock

@@ -7,7 +7,7 @@ license = "MIT OR Apache-2.0"
 name = "omnect-ui"
 readme = "README.md"
 repository = "git@github.com:omnect/omnect-ui.git"
-version = "0.8.0"
+version = "0.8.1"
 build = "src/build.rs"
 
 [dependencies]

Cargo.toml

@@ -17,20 +17,20 @@
 	"dependencies": {
 		"@mdi/font": "^7.4.47",
 		"@vueuse/core": "^12.8.2",
-		"axios": "^1.8.3",
+		"axios": "^1.8.4",
 		"centrifuge": "^5.3.4",
 		"vue": "^3.5.13",
-		"vuetify": "^3.7.16"
+		"vuetify": "^3.8.1"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@types/bun": "^1.2.5",
-		"@vitejs/plugin-vue": "^5.2.1",
+		"@types/bun": "^1.2.8",
+		"@vitejs/plugin-vue": "^5.2.3",
 		"@vue/tsconfig": "^0.7.0",
 		"typescript": "~5.7.3",
 		"unocss": "^65.5.0",
-		"vite": "^6.2.1",
-		"vite-plugin-vuetify": "^2.1.0",
+		"vite": "^6.2.5",
+		"vite-plugin-vuetify": "^2.1.1",
 		"vue-router": "^4.5.0",
 		"vue-tsc": "^2.2.8"
 	}

vue/bun.lock

@@ -10,36 +10,24 @@ import UserMenu from "./components/UserMenu.vue"
 import { useCentrifuge } from "./composables/useCentrifugo"
 import { useOverlaySpinner } from "./composables/useOverlaySpinner"
 import { useSnackbar } from "./composables/useSnackbar"
-import { CentrifugeSubscriptionType } from "./enums/centrifuge-subscription-type.enum"
-import type { UpdateValidationStatus } from "./types/update-validation-status"
+import { useWaitReconnect } from "./composables/useWaitReconnect"
 
 axios.defaults.validateStatus = (_) => true
 
 const { snackbarState } = useSnackbar()
-const { overlaySpinnerState, reset, updateDone } = useOverlaySpinner()
-const { initializeCentrifuge, onConnected, history, subscribe } = useCentrifuge()
+const { overlaySpinnerState, reset } = useOverlaySpinner()
+const { initializeCentrifuge } = useCentrifuge()
+const { onConnected } = useWaitReconnect()
 const { lgAndUp } = useDisplay()
 const router = useRouter()
 const route = useRoute()
 const showSideBar: Ref<boolean> = ref(lgAndUp.value)
 
 onConnected(() => {
-	if (!overlaySpinnerState.isUpdateRunning) {
-		reset()
-		return
-	}
-
-	history(checkUpdateState, CentrifugeSubscriptionType.UpdateStatus)
-	subscribe(checkUpdateState, CentrifugeSubscriptionType.UpdateStatus)
-	updateDone.trigger()
+	reset()
+	router.push("/login")
 })
 
-const checkUpdateState = (data: UpdateValidationStatus) => {
-	if (overlaySpinnerState.isUpdateRunning && (data.status === "Succeeded" || data.status === "Recovered")) {
-		reset()
-	}
-}
-
 const toggleSideBar = () => {
 	showSideBar.value = !showSideBar.value
 }

vue/package.json

@@ -3,12 +3,14 @@ import { useFetch } from "@vueuse/core"
 import { ref, toRef } from "vue"
 import { useOverlaySpinner } from "../composables/useOverlaySpinner"
 import { useSnackbar } from "../composables/useSnackbar"
+import { useWaitReconnect } from "../composables/useWaitReconnect"
 import router from "../plugins/router"
 import type { UpdateManifest } from "../types/update-manifest"
 import KeyValuePair from "./ui-components/KeyValuePair.vue"
 
 const { showError: snackbarShowError } = useSnackbar()
 const { overlaySpinnerState, reset: resetOverlay } = useOverlaySpinner()
+const { startWaitReconnect, stopWaitReconnect } = useWaitReconnect()
 
 const props = defineProps<{
 	updateManifest: UpdateManifest | undefined
@@ -43,11 +45,13 @@ const triggerUpdate = () => {
 	overlaySpinnerState.text = "Please have some patience, the update may take some time."
 	overlaySpinnerState.overlay = true
 	overlaySpinnerState.isUpdateRunning = true
+	startWaitReconnect()
 }
 
 const showError = (errorMsg: string) => {
 	resetOverlay()
 	snackbarShowError(errorMsg)
+	stopWaitReconnect()
 }
 
 const toggleEnforceConnect = (v: boolean | null) => {

vue/src/App.vue

@@ -1,10 +1,8 @@
 import { Centrifuge, type PublicationContext, SubscriptionState } from "centrifuge"
 import { type Ref, ref } from "vue"
 import type { CentrifugeSubscriptionType } from "../enums/centrifuge-subscription-type.enum"
-import { useEventHook } from "./useEventHook"
 
 const centrifuge: Ref<Centrifuge | undefined> = ref(undefined)
-const connectedEvent = useEventHook()
 
 export function useCentrifuge() {
 	const centrifuge_url = `wss://${window.location.hostname}:8000/connection/websocket`
@@ -24,7 +22,6 @@ export function useCentrifuge() {
 				})
 				.on("connected", (ctx) => {
 					console.debug(`connected over ${ctx.transport}`)
-					connectedEvent.trigger()
 				})
 				.on("disconnected", (ctx) => {
 					console.debug(`disconnected: ${ctx.code}, ${ctx.reason}`)
@@ -96,5 +93,5 @@ export function useCentrifuge() {
 		}
 	}
 
-	return { subscribe, unsubscribe, unsubscribeAll, initializeCentrifuge, token, history, onConnected: connectedEvent.on }
+	return { subscribe, unsubscribe, unsubscribeAll, initializeCentrifuge, token, history }
 }

vue/src/components/UpdateInfo.vue

@@ -0,0 +1,38 @@
+import axios, { AxiosError } from "axios"
+import { ref } from "vue"
+import { useEventHook } from "./useEventHook"
+
+const connectedEvent = useEventHook()
+
+export function useWaitReconnect() {
+	const wasDown = ref(false)
+	const reconnectInterval = ref()
+
+	const startWaitReconnect = async () => {
+		reconnectInterval.value = setInterval(checkReconnect, 5_000)
+	}
+
+	const stopWaitReconnect = () => {
+		wasDown.value = false
+		clearInterval(reconnectInterval.value)
+		connectedEvent.trigger()
+	}
+
+	const checkReconnect = async () => {
+		try {
+			const res = await axios.get("/", {
+				timeout: 2_500
+			})
+			if (res.status === 200 && wasDown.value) {
+				stopWaitReconnect()
+			}
+		} catch (error) {
+			const err = error as AxiosError
+			if (err.isAxiosError && err.code === "ECONNABORTED") {
+				wasDown.value = true
+			}
+		}
+	}
+
+	return { startWaitReconnect, stopWaitReconnect, onConnected: connectedEvent.on }
+}

vue/src/composables/useCentrifugo.ts

@@ -5,12 +5,14 @@ import DeviceInfo from "../components/DeviceInfo.vue"
 import DeviceNetworks from "../components/DeviceNetworks.vue"
 import { useCentrifuge } from "../composables/useCentrifugo"
 import { useOverlaySpinner } from "../composables/useOverlaySpinner"
+import { useWaitReconnect } from "../composables/useWaitReconnect"
 import { CentrifugeSubscriptionType } from "../enums/centrifuge-subscription-type.enum"
 import type { FactoryResetStatus, OnlineStatus, SystemInfo, Timeouts } from "../types"
 import type { UpdateValidationStatus } from "../types/update-validation-status"
 
 const { subscribe, history } = useCentrifuge()
 const { overlaySpinnerState } = useOverlaySpinner()
+const { startWaitReconnect } = useWaitReconnect()
 
 const online = ref(false)
 const systemInfo: Ref<SystemInfo | undefined> = ref(undefined)
@@ -36,12 +38,14 @@ const deviceInfo: Ref<Map<string, string | number>> = computed(
 const showIsRebooting = () => {
 	overlaySpinnerState.title = "Device is rebooting"
 	overlaySpinnerState.overlay = true
+	startWaitReconnect()
 }
 
 const showIsResetting = () => {
 	overlaySpinnerState.title = "The device is being reset"
 	overlaySpinnerState.text = "Please have some patience, the resetting may take some time."
 	overlaySpinnerState.overlay = true
+	startWaitReconnect()
 }
 
 const updateOnlineStatus = (data: OnlineStatus) => {

vue/src/composables/useWaitReconnect.ts

@@ -1,23 +1,17 @@
 <script setup lang="ts">
 import { useFetch } from "@vueuse/core"
 import { onMounted, ref } from "vue"
-import DialogContent from "../components/DialogContent.vue"
 import UpdateFileUpload from "../components/UpdateFileUpload.vue"
 import UpdateInfo from "../components/UpdateInfo.vue"
 import { useCentrifuge } from "../composables/useCentrifugo"
-import { useOverlaySpinner } from "../composables/useOverlaySpinner"
 import { useSnackbar } from "../composables/useSnackbar"
 import { CentrifugeSubscriptionType } from "../enums/centrifuge-subscription-type.enum"
 import router from "../plugins/router"
 import type { SystemInfo } from "../types"
-import type { UpdateValidationStatus } from "../types/update-validation-status"
 
-const { updateDone } = useOverlaySpinner()
 const { showError } = useSnackbar()
 const { history } = useCentrifuge()
 
-const updateStatus = ref("Recovered")
-const updateDoneDialog = ref(false)
 const currentVersion = ref<string>()
 const loadUpdatePayload = ref({
 	update_file_path: ""
@@ -48,45 +42,14 @@ const loadUpdateData = (filename: string) => {
 	loadUpdate(false)
 }
 
-const checkUpdateState = (data: UpdateValidationStatus) => {
-	updateStatus.value = data.status
-}
-
 onMounted(() => {
-	updateDone.on(() => {
-		data.value = undefined
-		history(checkUpdateState, CentrifugeSubscriptionType.UpdateStatus)
-		updateDoneDialog.value = true
-	})
-
 	history((data: SystemInfo) => {
 		currentVersion.value = data.os.version
 	}, CentrifugeSubscriptionType.SystemInfo)
 })
 </script>
 
 <template>
-	<v-dialog persistent v-model="updateDoneDialog" width="25vw" :no-click-animation="true">
-		<DialogContent v-if="updateStatus === 'Succeeded'" title="Update done" dialog-type="default"
-			:show-close="false">
-			<div class="flex flex-col gap-2 mb-8 items-center">
-				<v-icon size="128" icon="mdi-checkbox-marked-circle-outline" color="success"></v-icon>
-				<strong class="text-xl">Update installed successfully</strong>
-			</div>
-			<div class="flex justify-end -mr-4 mt-4">
-				<v-btn variant="text" color="primary" @click="updateDoneDialog = false">OK</v-btn>
-			</div>
-		</DialogContent>
-		<DialogContent v-else title="Update failed" dialog-type="Warning" :show-close="false">
-			<div class="flex flex-col gap-2 mb-8 items-center">
-				<v-icon size="128" icon="mdi-alert-circle-outline" color="warning"></v-icon>
-				<strong class="text-xl">Update installation failed and recovered to previous version.</strong>
-			</div>
-			<div class="flex justify-end -mr-4 mt-4">
-				<v-btn variant="text" color="primary" @click="updateDoneDialog = false">OK</v-btn>
-			</div>
-		</DialogContent>
-	</v-dialog>
 	<v-sheet :border="true" rounded class="m-20">
 		<v-row class="m-8">
 			<v-col sm="12" xl="6">