fix: polling klippy error messages (#571)

src/components/panels/KlippyStatePanel.vue

@@ -6,9 +6,15 @@
         card-class="klippy-state-panel"
     >
         <template v-if="klippyIsConnected">
-            <v-card-text class="py-1 mt-2">
+            <v-card-text class="py-1 mt-2" v-if="klippy_message !== null">
                 <pre style="white-space: pre-wrap;">{{ klippy_message }}</pre>
             </v-card-text>
+            <v-card-text v-else class="text-center py-3">
+                <v-progress-circular
+                    indeterminate
+                    color="primary"
+                ></v-progress-circular>
+            </v-card-text>
             <v-divider class="mt-2"></v-divider>
             <v-card-actions class="justify-start">
                 <v-btn small @click="restart" class="ml-2 error--text"><v-icon class="mr-sm-2">mdi-restart</v-icon>{{ $t('Panels.KlippyStatePanel.Restart') }}</v-btn>
@@ -28,7 +34,7 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import {Mixins, Watch} from 'vue-property-decorator'
+import {Mixins} from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import ConnectionStatus from '../ui/ConnectionStatus.vue'
 import Panel from '@/components/ui/Panel.vue'
@@ -37,11 +43,10 @@ import Panel from '@/components/ui/Panel.vue'
     components: {Panel, ConnectionStatus}
 })
 export default class KlippyStatePanel extends Mixins(BaseMixin) {
-    private timer: number | null = null
-
+    //private timer: number | null = null
 
     get klippy_message() {
-        return this.$store.state.server.klippy_message ?? ''
+        return this.$store.state.server.klippy_message ?? null
     }
 
     restart() {
@@ -52,7 +57,7 @@ export default class KlippyStatePanel extends Mixins(BaseMixin) {
         this.$socket.emit('printer.firmware_restart', { }, { loading: 'firmwareRestart' })
     }
 
-    requestKlippyState() {
+    /*requestKlippyState() {
         this.$socket.emit('printer.info', {}, { action: 'printer/getInfo' })
     }
 
@@ -68,6 +73,6 @@ export default class KlippyStatePanel extends Mixins(BaseMixin) {
                 this.requestKlippyState()
             }, 2000)
         }
-    }
+    }*/
 }
 </script>

src/plugins/webSocketClient.ts

@@ -64,8 +64,9 @@ export class WebSocketClient {
             if (this.store) {
                 const wait = this.getWaitById(data.id)
                 if (wait && wait.action !== ''){
-                    if (data.error && data.error.message) {
-                        window.console.error('Response Error: '+wait.action+' > '+data.error.message)
+                    if (data.error?.message) {
+                        if (data.error?.message !== 'Klippy Disconnected')
+                            window.console.error('Response Error: '+wait.action+' > '+data.error.message)
                     } else if (wait.action) {
                         let result = data.result
                         if (result === 'ok') result = { result: result }

src/store/editor/actions.ts

@@ -125,7 +125,7 @@ export const actions: ActionTree<EditorState, RootState> = {
             dispatch('clearLoader')
             Vue.$toast.success(i18n.t('Editor.SuccessfullySaved', { filename: data.item.path }).toString())
             if (payload.restartServiceName === 'klipper') {
-                dispatch('server/addEvent', { message: 'FIRMWARE_RESTART', type: 'command' })
+                //dispatch('server/addEvent', { message: 'FIRMWARE_RESTART', type: 'command' })
                 Vue.$socket.emit('printer.gcode.script', { script: 'FIRMWARE_RESTART' })
             } else if (payload.restartServiceName !== null) {
                 Vue.$socket.emit('machine.services.restart', { service: payload.restartServiceName })

src/store/editor/mutations.ts

@@ -19,7 +19,6 @@ export const mutations: MutationTree<EditorState> = {
     },
 
     updateLoader(state, payload) {
-        window.console.log(payload)
         Vue.set(state, 'loaderProgress', payload)
     },
 

src/store/server/actions.ts

@@ -29,10 +29,11 @@ export const actions: ActionTree<ServerState, RootState> = {
 
         commit('saveDbNamespaces', payload.namespaces)
 
-        dispatch('printer/init', null, { root: true })
+        Vue.$socket.emit('server.info', {}, { action: 'server/checkKlippyConnected'})
+        //dispatch('printer/init', null, { root: true })
     },
 
-    initServerInfo: function ({ dispatch, commit }, payload) {
+    initServerInfo({ dispatch, commit }, payload) {
         // delete old plugin entries
         if ('plugins' in payload) delete payload.plugins
         if ('failed_plugins' in payload) delete payload.failed_plugins
@@ -67,11 +68,77 @@ export const actions: ActionTree<ServerState, RootState> = {
             commit('setThrottledState', payload.throttled_state)
     },
 
-    setKlippyReady({ dispatch }) {
+    setKlippyReady({ dispatch, state }) {
+        if (state.klippy_connected_timer !== null) dispatch('stopKlippyConnectedInterval')
+        if (state.klippy_state_timer !== null) dispatch('stopKlippyStateInterval')
         dispatch('printer/reset', null, { root: true })
         dispatch('printer/init', null, { root: true })
     },
 
+    setKlippyDisconnected({ commit, dispatch, state }) {
+        commit('setKlippyDisconnected', null)
+        if (state.klippy_state_timer !== null) dispatch('stopKlippyStateInterval')
+        dispatch('startKlippyConnectedInterval')
+    },
+
+    setKlippyShutdown({ commit }) {
+        commit('setKlippyShutdown', null)
+    },
+
+    startKlippyConnectedInterval({ commit, state }) {
+        if (state.klippy_connected_timer === null) {
+            const timer = setInterval(() => {
+                Vue.$socket.emit('server.info', {}, { action: 'server/checkKlippyConnected'})
+            }, 2000)
+            commit('setKlippyConnectedTimer', timer)
+        }
+    },
+
+    stopKlippyConnectedInterval({ commit, state }) {
+        if (state.klippy_connected_timer !== null) {
+            clearInterval(state.klippy_connected_timer)
+            commit('setKlippyConnectedTimer', null)
+        }
+    },
+
+    async checkKlippyConnected({ commit, dispatch, state }, payload) {
+        if (payload.klippy_connected) {
+            await dispatch('stopKlippyConnectedInterval')
+            await commit('setKlippyConnected')
+            dispatch('checkKlippyState', { state: payload.klippy_state, state_message: null })
+        } else if (!payload.klippy_connected && state.klippy_connected_timer === null)
+            dispatch('startKlippyConnectedInterval')
+    },
+
+    startKlippyStateInterval({ commit, state }) {
+        if (state.klippy_state_timer === null) {
+            const timer = setInterval(() => {
+                Vue.$socket.emit('printer.info', {}, { action: 'server/checkKlippyState'})
+            }, 2000)
+            commit('setKlippyStateTimer', timer)
+        }
+    },
+
+    stopKlippyStateInterval({ commit, state }) {
+        if (state.klippy_state_timer !== null) {
+            clearInterval(state.klippy_state_timer)
+            commit('setKlippyStateTimer', null)
+        }
+    },
+
+    checkKlippyState({ commit, dispatch, state }, payload: { state: string, state_message: string | null }) {
+        commit('setKlippyState', payload.state)
+        commit('setKlippyMessage', payload.state_message)
+
+        if (payload.state !== 'ready' && state.klippy_connected && state.klippy_state_timer === null) {
+            dispatch('startKlippyStateInterval')
+        } else if (payload.state === 'ready' && state.klippy_state_timer !== null) {
+            dispatch('stopKlippyStateInterval')
+        } else if (payload.state === 'ready' && state.klippy_state_timer === null) {
+            dispatch('printer/init', null, { root: true })
+        }
+    },
+
     getData({ commit }, payload){
         commit('setData', payload)
     },

src/store/server/index.ts

@@ -15,7 +15,9 @@ import { jobQueue } from '@/store/server/jobQueue'
 export const getDefaultState = (): ServerState => {
     return {
         klippy_connected: false,
+        klippy_connected_timer: null,
         klippy_state: '',
+        klippy_state_timer: null,
         klippy_message: '',
         components: [],
         failed_components: [],

src/store/server/mutations.ts

@@ -14,6 +14,18 @@ export const mutations: MutationTree<ServerState> = {
         Vue.set(state, 'klippy_connected', true)
     },
 
+    setKlippyState(state, payload) {
+        Vue.set(state, 'klippy_state', payload)
+    },
+
+    setKlippyStateTimer(state, payload) {
+        Vue.set(state, 'klippy_state_timer', payload)
+    },
+
+    setKlippyMessage(state, payload) {
+        Vue.set(state, 'klippy_message', payload)
+    },
+
     setKlippyDisconnected(state) {
         Vue.set(state, 'klippy_connected', false)
         Vue.set(state, 'klippy_state', 'disconnected')
@@ -25,6 +37,10 @@ export const mutations: MutationTree<ServerState> = {
         Vue.set(state, 'klippy_message', 'Shutdown...')
     },
 
+    setKlippyConnectedTimer(state, timer) {
+        Vue.set(state, 'klippy_connected_timer', timer)
+    },
+
     setProcStats(state, payload) {
         Vue.set(state, 'cpu_temp', payload.cpu_temp)
         Vue.set(state, 'moonraker_stats', payload.moonraker_stats)

src/store/server/types.ts

@@ -5,7 +5,9 @@ import { ServerTimelapseState } from '@/store/server/timelapse/types'
 
 export interface ServerState {
     klippy_connected: boolean
+    klippy_connected_timer: number | null
     klippy_state: string
+    klippy_state_timer: number | null
     klippy_message: string
     components: string[],
     failed_components: string[],

src/store/socket/actions.ts

@@ -54,11 +54,11 @@ export const actions: ActionTree<SocketState, RootState> = {
             break
 
         case 'notify_klippy_disconnected':
-            commit('server/setKlippyDisconnected', null, { root: true })
+            dispatch('server/setKlippyDisconnected', null, { root: true })
             break
 
         case 'notify_klippy_shutdown':
-            commit('server/setKlippyShutdown', null, { root: true })
+            dispatch('server/setKlippyShutdown', null, { root: true })
             break
 
         case 'notify_proc_stat_update':