Improve websocket tester by telling the user that opening a websocket…

… has failed (hobbyfarm#211)

src/app/websocket-test/websockettest.component.css

@@ -4,5 +4,12 @@ as-split-area {
 
 .success {
   color: green;
+  fill: green;
+  font-weight: bold;
+}
+
+.error {
+  color: red;
+  fill: red;
   font-weight: bold;
 }

src/app/websocket-test/websockettest.component.html

@@ -20,11 +20,11 @@ <h1>Websocket Tester</h1>
         <li>Websocket responding with pong</li>
       </ol>
       <h2>Troubleshooting</h2>
-      If the /healthz endopoint is not responding you should check if the shell
-      proxy is up and running. Also verify that {{ endpoint }} is the correct
-      URL to the proxy. If the endpoint responds with 200 but the websocket is
-      not being opened, you should verify that no firewall is in place that
-      disallows the usage of websockets for {{ endpoint }}
+      If the /healthz endpoint is not responding you should check if the shell
+      proxy is up and running. Also verify that {{ target }} is the correct URL
+      to the proxy. If the endpoint responds with 200 but the websocket is not
+      being opened, you should verify that no firewall is in place that
+      disallows the usage of websockets for {{ target }}
     </as-split-area>
 
     <as-split-area [size]="50" class="split-area-2">
@@ -38,6 +38,11 @@ <h1>Testing {{ target }}:</h1>
         Check successfully completed and websocket reachable.
         <cds-icon shape="success-standard" inverse class="success"></cds-icon>
       </div>
+
+      <div *ngIf="error">
+        {{ error }}
+        <cds-icon shape="error-standard" inverse class="error"></cds-icon>
+      </div>
     </as-split-area>
   </as-split>
 </div>

src/app/websocket-test/websockettest.component.ts

@@ -15,6 +15,7 @@ export class WebsocketTestComponent implements OnInit {
   endpoint: string;
 
   completed: boolean;
+  error: string;
 
   mermaidString = 'sequenceDiagram';
   markdownString = '';
@@ -44,35 +45,52 @@ export class WebsocketTestComponent implements OnInit {
       },
       error: (msg) => {
         console.log(msg);
+        this.error = 'The Health Endpoint delivered a status other than 200.';
         this.addMermaidString(this.target, 'you', msg.code);
       },
     });
   }
 
   testWSConnection() {
-    this.addMermaidString('you', this.target, 'open websocket', '+');
     const socket = new WebSocket(this.wsEndpoint);
+
+    socket.onerror = () => {
+      this.error = 'The Websocket could not be opened.';
+      this.addMermaidString(
+        'you',
+        this.target,
+        'opening websocket failed',
+        '',
+        'x',
+      );
+    };
+
     socket.onmessage = (event) => {
       if (event.data == 'pong') {
         this.addMermaidString(this.target, 'you', 'pong', '-');
-        this.completed = true;
       }
     };
 
     socket.onopen = () => {
-      this.addMermaidString(this.target, 'you', 'websocket opened');
+      this.addMermaidString('you', this.target, 'open websocket', '+');
       socket.send('ping');
       this.addMermaidString('you', this.target, 'ping');
     };
+
+    socket.onclose = (event) => {
+      this.completed = true;
+    };
   }
 
   addMermaidString(
     from: string,
     to: string,
     content: string,
     opChar: string = '',
+    arrowChar: string = '>>',
   ) {
-    this.mermaidString += '\n  ' + from + '->>' + opChar + to + ': ' + content;
+    this.mermaidString +=
+      '\n  ' + from + '-' + arrowChar + opChar + to + ': ' + content;
     this.markdownString = '```mermaid\n' + this.mermaidString + '\n```';
   }
 }