Added button to reload Terminal (hobbyfarm#191)

* Reload Terminal button

* Resize Guacamole Terminal

* Remove unused variable

src/app/scenario/guacTerminal.component.ts

@@ -373,6 +373,12 @@ export class GuacTerminalComponent implements OnChanges {
     return { width: width, height: height };
   }
 
+  reloadConnection() {
+    this.shellService.setStatus(this.vmname, 'Reconnecting');
+    this.client.disconnect();
+    this.connect();
+  }
+
   resize() {
     const elm = this.viewport.nativeElement;
     if (!elm || !elm.offsetWidth) {

src/app/scenario/step.component.html

@@ -102,6 +102,15 @@ <h4 class="card-title">
                   <td><b>Private IP:</b> {{ v.value.private_ip }}</td>
                   <td><b>Hostname:</b> {{ v.value.hostname }}</td>
                   <td><b>Shell Status:</b> {{ getShellStatus(v.key) }}</td>
+                  <td style="padding: 0">
+                    <button
+                      class="btn btn-icon btn-primary btn-sm"
+                      title="Reload Terminal"
+                      (click)="reloadTerminal(v.key)"
+                    >
+                      <cds-icon shape="refresh"></cds-icon>
+                    </button>
+                  </td>
                 </tr>
               </table>
               <app-terminal

src/app/scenario/step.component.ts

@@ -427,32 +427,14 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   resizeTerminals() {
-    let numberOfGuacTabs = 0;
-    let numberOfTermTabs = 0;
-    const vmArray: VM[] = [...this.vms.values()];
-    // For each tab...
-    this.tabContents.forEach((t: ClrTabContent, i: number) => {
-      const isGuacTerminal: boolean = this.isGuacamoleTerminal(
-        vmArray[i].protocol,
-      );
-      const isActiveTab: boolean = t.ifActiveService.current === t.id;
-      if (isGuacTerminal) {
-        ++numberOfGuacTabs;
-        // If the active tab is the same as the currently scoped ...
-        // ... resize the terminal that corresponds to the index of the active tab.
-        // Subtract the number of terminal tabs over which it has already been iterated.
-        // e.g.:
-        // - Tab 0 could have been a (regular) terminal, so the index sits now at 1
-        // - But we need the guacamole terminal at index 0 to retrieve the first one from guacterms
-        // - Therefore calculate i (index) - numberOfTermTabs (iterated term tabs) ...
-        // ... to retrieve the current index of guacterms.toArray()
-        isActiveTab && this.guacterms.toArray()[i - numberOfTermTabs].resize();
-      } else {
-        ++numberOfTermTabs;
-        // see above
-        isActiveTab && this.terms.toArray()[i - numberOfGuacTabs].resize();
-      }
+    this.terms.forEach((t: TerminalComponent) => {
+      t.resize();
+    });
+
+    this.guacterms.forEach((t: GuacTerminalComponent) => {
+      t.resize();
     });
+
     this.calculateMaxInterfaceTabs();
   }
 
@@ -480,6 +462,19 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
     } as webinterfaceTabIdentifier);
   }
 
+  reloadTerminal(target: string) {
+    this.terms.forEach((t: TerminalComponent) => {
+      if (t.vmname == target) {
+        t.reloadSocket();
+      }
+    });
+    this.guacterms.forEach((t: GuacTerminalComponent) => {
+      if (t.vmname == target) {
+        t.reloadConnection();
+      }
+    });
+  }
+
   calculateMaxInterfaceTabs(reduce: boolean = false) {
     const tabs = document.getElementsByTagName('li');
     let tabsBarWidth: number | undefined = 0;

src/app/scenario/terminal.component.ts

@@ -175,6 +175,17 @@ export class TerminalComponent implements OnChanges, AfterViewInit, OnDestroy {
     this.socket.close(WS_CODE_NORMAL_CLOSURE);
   }
 
+  reloadSocket() {
+    // Override the socket.onclose function that was defined in the buildSocket function
+    // to ensure we reconnect after the old socket has been closed and the terminal is disposed properly
+    this.socket.onclose = () => {
+      this.term.dispose(); // destroy the terminal on the page to avoid bad display
+      this.shellService.setStatus(this.vmname, 'Reconnecting');
+      this.buildSocket();
+    };
+    this.closeSocket();
+  }
+
   ngOnChanges() {
     if (this.vmid != null && this.endpoint != null) {
       this.closeSocket();