Improve websocket test site

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

@@ -1,6 +1,6 @@
-<div *ngIf="!success">Healthcheck failed</div>
-<div *ngIf="success">Healthcheck Success</div>
-<div *ngIf="!socketInProgress && !socketSuccess">
-  Websocket connection was not established
-</div>
-<div *ngIf="socketSuccess">Websocket connection established.</div>
+<app-hf-markdown
+  [content]="markdownString"
+  [context]="mdContext"
+></app-hf-markdown>
+
+<div *ngIf="completed">Check successfully completed</div>

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

@@ -1,48 +1,70 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { HfMarkdownRenderContext } from '../hf-markdown/hf-markdown.component';
 
 @Component({
   selector: 'app-websockettest',
   templateUrl: './websockettest.component.html',
   styleUrls: ['./websockettest.component.css'],
 })
 export class WebsocketTestComponent implements OnInit {
+  target: string;
   wsEndpoint: string;
   endpoint: string;
-  inProgress = false;
-  success: boolean;
-  socketInProgress = false;
-  socketSuccess: boolean;
+
+  completed: boolean;
+
+  mermaidString = 'sequenceDiagram';
+  markdownString = '';
+  mdContext: HfMarkdownRenderContext = { vmInfo: {}, session: '' };
 
   constructor(private route: ActivatedRoute, private http: HttpClient) {}
   ngOnInit(): void {
-    this.endpoint =
-      'https://' + this.route.snapshot.params['url'] + '/shell/healthz';
-    this.wsEndpoint =
-      'wss://' + this.route.snapshot.params['url'] + '/shell/websocketTest';
+    this.target = this.route.snapshot.params['url'];
+    this.endpoint = 'https://' + this.target + '/shell/healthz';
+    this.wsEndpoint = 'wss://' + this.target + '/shell/websocketTest';
     this.testConnection();
   }
 
   testConnection() {
-    this.inProgress = true;
-    this.http.get(this.endpoint).subscribe(() => {
-      this.success = true;
-      this.testWSConnection();
-      this.inProgress = false;
+    this.addMermaidString('you', this.target, '/shell/healthz');
+    this.http.get(this.endpoint).subscribe({
+      next: () => {
+        this.addMermaidString(this.target, 'you', '200, OK');
+        this.testWSConnection();
+      },
+      error: (msg) => {
+        console.log(msg);
+        this.addMermaidString(this.target, 'you', msg.code);
+      },
     });
   }
 
   testWSConnection() {
+    this.addMermaidString('you', this.target, 'open websocket', '+');
     const socket = new WebSocket(this.wsEndpoint);
     socket.onmessage = (event) => {
       if (event.data == 'pong') {
-        this.socketSuccess = true;
+        this.addMermaidString(this.target, 'you', 'pong', '-');
+        this.completed = true;
       }
     };
 
     socket.onopen = () => {
+      this.addMermaidString(this.target, 'you', 'websocket opened');
       socket.send('ping');
+      this.addMermaidString('you', this.target, 'ping');
     };
   }
+
+  addMermaidString(
+    from: string,
+    to: string,
+    content: string,
+    opChar: string = '',
+  ) {
+    this.mermaidString += '\n  ' + from + '->>' + opChar + to + ': ' + content;
+    this.markdownString = '```mermaid\n' + this.mermaidString + '\n```';
+  }
 }