[#88170] frontend: src: components: Close device shell

Signed-off-by: Anna Roszkiewicz <[email protected]>

Author: anroszkiewicz

frontend/src/components/Terminal.vue

@@ -13,7 +13,15 @@ Container for the hterm.js terminal.
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import {
+    defineComponent,
+    computed,
+    onMounted,
+    onUnmounted,
+    watch,
+    nextTick,
+    defineEmits,
+} from 'vue';
 
 // @ts-ignore
 import { hterm, lib } from '../third-party/hterm';
@@ -25,7 +33,7 @@ export default defineComponent({
             type: String,
         },
     },
-    setup(props) {
+    setup(props, { emit }) {
         const notifications = useNotifications();
 
         let term: any;
@@ -40,11 +48,7 @@ export default defineComponent({
             'shift-insert-paste': false,
         };
         const closeEventListener = (event: CloseEvent) => {
-            term.io.print('Console unavailable');
-            if (event.reason) {
-                term.io.print(`: ${event.reason}`);
-            }
-            term.io.print('\n\r');
+            emit('shell-disconnected');
 
             notifications.notifyError({
                 headline: 'Device shell connection closed',

frontend/src/components/devices/Device.vue

@@ -192,7 +192,11 @@ Component wraps functionality for displaying and working with a single rdfm devi
                     :class="['terminal-wrapper', { fullscreen: isFullscreen }]"
                     v-if="isTerminalOpened"
                 >
-                    <Terminal class="terminal" :device="device?.mac_address" />
+                    <Terminal
+                        class="terminal"
+                        :device="device?.mac_address"
+                        @shell-disconnected="disconnect"
+                    />
                 </div>
             </div>
         </template>
@@ -1081,6 +1085,11 @@ export default {
             isFullscreen.value = !isFullscreen.value;
         };
 
+        const disconnect = () => {
+            toggleTerminal();
+            device.value!.connected = false;
+        };
+
         return {
             id: route.params.id,
             interval,
@@ -1108,6 +1117,7 @@ export default {
             terminalButton,
             terminalFullscreen,
             isFullscreen,
+            disconnect,
             allowedTo,
             deviceUpdates,
             deviceVersions,