From 6f763dd4ceb7d2424981c83e3f86d6ec2885bf05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan-Gerrit=20G=C3=B6bel?= Date: Fri, 21 Jun 2024 15:25:13 +0200 Subject: [PATCH 1/5] websocket ping pong to verify that sockets can be opened --- src/app/app-routing.module.ts | 2 + src/app/app.module.ts | 2 + .../websockettest.component.css | 0 .../websockettest.component.html | 6 ++ .../websocket-test/websockettest.component.ts | 57 +++++++++++++++++++ 5 files changed, 67 insertions(+) create mode 100644 src/app/websocket-test/websockettest.component.css create mode 100644 src/app/websocket-test/websockettest.component.html create mode 100644 src/app/websocket-test/websockettest.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06109895..bc7d2b35 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,10 +9,12 @@ import { AuthGuard } from './auth.guard'; import { StepComponent } from './scenario/step.component'; import { PrintableComponent } from './printable/printable.component'; import { GuacTerminalComponent } from './scenario/guacTerminal.component'; +import { WebsocketTestComponent } from './websocket-test/websockettest.component'; const routes: Routes = [ { path: '', redirectTo: '/app/home', pathMatch: 'full' }, { path: 'login', component: LoginComponent }, + { path: 'test/:url', component: WebsocketTestComponent }, { path: 'add/:accesscode', component: AppComponent, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1d10825e..4ac9b527 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -48,6 +48,7 @@ import { VerificationService } from './services/verification.service'; import { TaskProgressComponent } from './scenario/task-progress/task-progress.component'; import { TaskModalComponent } from './scenario/task-modal/task-modal.component'; import { SingleTaskVerificationMarkdownComponent } from './hf-markdown/single-task-verification-markdown/single-task-verification-markdown.component'; +import { WebsocketTestComponent } from './websocket-test/websockettest.component'; import '@cds/core/icon/register.js'; import { ClarityIcons, @@ -171,6 +172,7 @@ export function jwtOptionsFactory() { TaskProgressComponent, TaskModalComponent, SingleTaskVerificationMarkdownComponent, + WebsocketTestComponent, ], imports: [ BrowserModule, diff --git a/src/app/websocket-test/websockettest.component.css b/src/app/websocket-test/websockettest.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/websocket-test/websockettest.component.html b/src/app/websocket-test/websockettest.component.html new file mode 100644 index 00000000..033d1b99 --- /dev/null +++ b/src/app/websocket-test/websockettest.component.html @@ -0,0 +1,6 @@ +
Healthcheck failed
+
Healthcheck Success
+
+ Websocket connection was not established +
+
Websocket connection established.
diff --git a/src/app/websocket-test/websockettest.component.ts b/src/app/websocket-test/websockettest.component.ts new file mode 100644 index 00000000..75f16076 --- /dev/null +++ b/src/app/websocket-test/websockettest.component.ts @@ -0,0 +1,57 @@ +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-websockettest', + templateUrl: './websockettest.component.html', + styleUrls: ['./websockettest.component.css'], +}) +export class WebsocketTestComponent implements OnInit { + wsEndpoint: string; + endpoint: string; + inProgress: boolean = false; + success: boolean; + socketInProgress: boolean = false; + socketSuccess: boolean; + + 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.testConnection(); + } + + testConnection() { + this.inProgress = true; + this.http.get(this.endpoint).subscribe(() => { + this.success = true; + this.testWSConnection(); + this.inProgress = false; + }); + } + + testWSConnection() { + var socket = new WebSocket(this.wsEndpoint); + socket.onmessage = (event) => { + if (event.data == 'pong') { + this.socketSuccess = true; + } + }; + + socket.onopen = () => { + socket.send('ping'); + }; + + socket.onerror = () => { + this.socketInProgress = true; + }; + + socket.onerror = () => { + this.socketInProgress = false; + this.socketSuccess = false; + }; + } +} From 9fc91ec40456ef558cbd0f19b836afeedb96ad8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan-Gerrit=20G=C3=B6bel?= Date: Fri, 21 Jun 2024 15:26:51 +0200 Subject: [PATCH 2/5] remove on error methods --- src/app/websocket-test/websockettest.component.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/app/websocket-test/websockettest.component.ts b/src/app/websocket-test/websockettest.component.ts index 75f16076..9e070532 100644 --- a/src/app/websocket-test/websockettest.component.ts +++ b/src/app/websocket-test/websockettest.component.ts @@ -44,14 +44,5 @@ export class WebsocketTestComponent implements OnInit { socket.onopen = () => { socket.send('ping'); }; - - socket.onerror = () => { - this.socketInProgress = true; - }; - - socket.onerror = () => { - this.socketInProgress = false; - this.socketSuccess = false; - }; } } From da965d6e59fef5d7733adb2bb52d5f1ab3a7673a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan-Gerrit=20G=C3=B6bel?= Date: Fri, 21 Jun 2024 15:27:50 +0200 Subject: [PATCH 3/5] Linting --- src/app/websocket-test/websockettest.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/websocket-test/websockettest.component.ts b/src/app/websocket-test/websockettest.component.ts index 9e070532..c3c57ea1 100644 --- a/src/app/websocket-test/websockettest.component.ts +++ b/src/app/websocket-test/websockettest.component.ts @@ -10,9 +10,9 @@ import { ActivatedRoute } from '@angular/router'; export class WebsocketTestComponent implements OnInit { wsEndpoint: string; endpoint: string; - inProgress: boolean = false; + inProgress = false; success: boolean; - socketInProgress: boolean = false; + socketInProgress = false; socketSuccess: boolean; constructor(private route: ActivatedRoute, private http: HttpClient) {} @@ -34,7 +34,7 @@ export class WebsocketTestComponent implements OnInit { } testWSConnection() { - var socket = new WebSocket(this.wsEndpoint); + const socket = new WebSocket(this.wsEndpoint); socket.onmessage = (event) => { if (event.data == 'pong') { this.socketSuccess = true; From af12b67e8c76282ae495e2274a4058d55deed513 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan-Gerrit=20G=C3=B6bel?= Date: Mon, 24 Jun 2024 08:00:15 +0200 Subject: [PATCH 4/5] Improve websocket test site --- .../websockettest.component.html | 12 ++--- .../websocket-test/websockettest.component.ts | 50 +++++++++++++------ 2 files changed, 42 insertions(+), 20 deletions(-) diff --git a/src/app/websocket-test/websockettest.component.html b/src/app/websocket-test/websockettest.component.html index 033d1b99..0c5f3da5 100644 --- a/src/app/websocket-test/websockettest.component.html +++ b/src/app/websocket-test/websockettest.component.html @@ -1,6 +1,6 @@ -
Healthcheck failed
-
Healthcheck Success
-
- Websocket connection was not established -
-
Websocket connection established.
+ + +
Check successfully completed
diff --git a/src/app/websocket-test/websockettest.component.ts b/src/app/websocket-test/websockettest.component.ts index c3c57ea1..1e7dd75f 100644 --- a/src/app/websocket-test/websockettest.component.ts +++ b/src/app/websocket-test/websockettest.component.ts @@ -1,6 +1,7 @@ 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', @@ -8,41 +9,62 @@ import { ActivatedRoute } from '@angular/router'; 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```'; + } } From 0f64aeb6601ea872c598df5b94c6f09795e128d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan-Gerrit=20G=C3=B6bel?= Date: Mon, 24 Jun 2024 08:54:38 +0200 Subject: [PATCH 5/5] change design --- .../websockettest.component.css | 8 ++++ .../websockettest.component.html | 47 +++++++++++++++++-- .../websocket-test/websockettest.component.ts | 10 +++- 3 files changed, 59 insertions(+), 6 deletions(-) diff --git a/src/app/websocket-test/websockettest.component.css b/src/app/websocket-test/websockettest.component.css index e69de29b..a7835876 100644 --- a/src/app/websocket-test/websockettest.component.css +++ b/src/app/websocket-test/websockettest.component.css @@ -0,0 +1,8 @@ +as-split-area { + margin-left: 10px; +} + +.success { + color: green; + font-weight: bold; +} diff --git a/src/app/websocket-test/websockettest.component.html b/src/app/websocket-test/websockettest.component.html index 0c5f3da5..d7f3361a 100644 --- a/src/app/websocket-test/websockettest.component.html +++ b/src/app/websocket-test/websockettest.component.html @@ -1,6 +1,43 @@ - +
+
+
+ + + {{ title }} + +
+
-
Check successfully completed
+ + +

Websocket Tester

+ This page is dedicated to test if the websocket for the shell proxy is + reachable. If it is reachable you should be able to see +
    +
  1. /healthz endpoint responding with 200
    2. +
  2. Websocket being opened
    3. +
  3. Client sending a ping
    4. +
  4. Websocket responding with pong
    5. +
+

Troubleshooting

+ 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 }} + + + +

Testing {{ target }}:

+ + +
+ Check successfully completed and websocket reachable. + +
+ + +
diff --git a/src/app/websocket-test/websockettest.component.ts b/src/app/websocket-test/websockettest.component.ts index 1e7dd75f..5ed04870 100644 --- a/src/app/websocket-test/websockettest.component.ts +++ b/src/app/websocket-test/websockettest.component.ts @@ -2,6 +2,7 @@ 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'; +import { AppConfigService } from '../app-config.service'; @Component({ selector: 'app-websockettest', @@ -19,7 +20,14 @@ export class WebsocketTestComponent implements OnInit { markdownString = ''; mdContext: HfMarkdownRenderContext = { vmInfo: {}, session: '' }; - constructor(private route: ActivatedRoute, private http: HttpClient) {} + private Config = this.config.getConfig(); + public title = this.Config.title || "Rancher's Hobby Farm"; + + constructor( + private config: AppConfigService, + private route: ActivatedRoute, + private http: HttpClient, + ) {} ngOnInit(): void { this.target = this.route.snapshot.params['url']; this.endpoint = 'https://' + this.target + '/shell/healthz';