feat: add start/stop service buttons and display service state in top corner menu

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/components/TheTopCornerMenu.vue

@@ -23,8 +23,20 @@
                 <template v-if="services.length">
                     <v-divider class="mt-0"></v-divider>
                     <v-subheader class="pt-2" style="height: auto;">{{ $t("App.TopCornerMenu.RestartServices") }}</v-subheader>
-                    <v-list-item class="minheight30"  link @click="serviceRestart(service)" v-for="service in services" v-bind:key="service">
-                        <v-list-item-title><v-icon class="mr-2" small>mdi-restart</v-icon>{{ service.charAt(0).toUpperCase() + service.slice(1) }}</v-list-item-title>
+                    <v-list-item class="minheight30 pr-2" v-for="service in services" v-bind:key="service">
+                        <v-list-item-title>
+                            <v-tooltip left>
+                                <template v-slot:activator="{ on, attrs }">
+                                    <span v-bind="attrs" v-on="on">{{ service.charAt(0).toUpperCase() + service.slice(1) }}</span>
+                                </template>
+                                <span>{{ getServiceState(service) }} ({{ getServiceSubState(service) }})</span>
+                            </v-tooltip>
+                        </v-list-item-title>
+                        <v-list-item-action class="my-0 d-flex flex-row" style="min-width: auto;">
+                            <v-btn icon small v-if="getServiceState(service) === 'inactive'" @click="serviceStart(service)"><v-icon small>mdi-play</v-icon></v-btn>
+                            <v-btn icon small v-if="getServiceState(service) !== 'inactive'" @click="serviceRestart(service)"><v-icon small>mdi-restart</v-icon></v-btn>
+                            <v-btn icon small v-if="getServiceState(service) !== 'inactive'" @click="serviceStop(service)"><v-icon small>mdi-stop</v-icon></v-btn>
+                        </v-list-item-action>
                     </v-list-item>
                 </template>
                 <template v-if="powerDevices.length">
@@ -92,6 +104,22 @@ export default class TheTopCornerMenu extends Mixins(BaseMixin) {
         return this.$store.getters['server/power/getDevices']
     }
 
+    get service_states() {
+        return this.$store.state.server.system_info?.service_state ?? {}
+    }
+
+    getServiceState(name: string) {
+        if (name in this.service_states) return this.service_states[name].active_state
+
+        return null
+    }
+
+    getServiceSubState(name: string) {
+        if (name in this.service_states) return this.service_states[name].sub_state
+
+        return null
+    }
+
     klipperRestart() {
         this.showMenu = false
         this.$store.dispatch('server/addEvent', { message: 'RESTART', type: 'command' })
@@ -104,11 +132,21 @@ export default class TheTopCornerMenu extends Mixins(BaseMixin) {
         this.$socket.emit('printer.gcode.script', { script: 'FIRMWARE_RESTART' })
     }
 
+    serviceStart(service: string) {
+        this.showMenu = false
+        this.$socket.emit('machine.services.start', { service: service })
+    }
+
     serviceRestart(service: string) {
         this.showMenu = false
         this.$socket.emit('machine.services.restart', { service: service })
     }
 
+    serviceStop(service: string) {
+        this.showMenu = false
+        this.$socket.emit('machine.services.stop', { service: service })
+    }
+
     changeSwitch(device: ServerPowerStateDevice, value: string) {
         this.dialogPowerDeviceChange.device = device.device
         this.dialogPowerDeviceChange.value = value

src/store/server/actions.ts

@@ -133,5 +133,9 @@ export const actions: ActionTree<ServerState, RootState> = {
                 type: type
             })
         }
+    },
+
+    serviceStateChanged({ commit }, payload) {
+        commit('updateServiceState', payload)
     }
 }

src/store/server/mutations.ts

@@ -102,5 +102,12 @@ export const mutations: MutationTree<ServerState> = {
 
     addRootDirectory(state, payload) {
         state.registered_directories.push(payload.name)
+    },
+
+    updateServiceState(state, payload) {
+        const name = Object.keys(payload)[0]
+
+        if (state.system_info?.service_state)
+            Vue.set(state.system_info.service_state, name, payload[name])
     }
 }

src/store/server/types.ts

@@ -20,6 +20,7 @@ export interface ServerState {
         cpu_info: ServerStateCpuInfo
         distribution: ServerStateDistribution
         sd_info: ServerStateSdInfo
+        service_state: ServerStateServiceStates
     } | null
     moonraker_stats: {
         cpu_usage: number,
@@ -80,4 +81,13 @@ export interface ServerStateSdInfo {
     product_revision: string
     serial_number: string
     total_bytes: number
+}
+
+export interface ServerStateServiceStates {
+    [key: string]: ServerStateServiceState
+}
+
+export interface ServerStateServiceState {
+    active_state: string
+    sub_state: string
 }

src/store/socket/actions.ts

@@ -96,6 +96,10 @@ export const actions: ActionTree<SocketState, RootState> = {
             dispatch('server/history/getChanged', payload.params[0], { root: true })
             break
 
+        case 'notify_service_state_changed':
+            dispatch('server/serviceStateChanged', payload.params[0], { root: true })
+            break
+
         default:
             if (payload.result !== 'ok' && payload.error?.message) window.console.error('JSON-RPC: ' + payload.error.message)
             else window.console.debug(payload)