Use EventSourcePolyfill instead (#142)

* Use EventSourcePolyfill instead

* Cleanup and skip on non-oidc

* Updated CHANGELOG.md

CHANGELOG.md

@@ -17,7 +17,7 @@ This project tries to follow [SemVer 2.0.0](https://semver.org/).
 - Added the ability to login. While logged in this will forward the OIDC
   access token to the backend such that a secure user access control is
   established. This is only performed when the following config value
-  is set: (#70, #137, #138)
+  is set: (#70, #137, #138, #142)
 
   ```json
   {

src/app/builds/build-details/build-details.component.ts

@@ -5,6 +5,8 @@ import { BuildStatus } from '../../models/build-status';
 import { Title } from '@angular/platform-browser';
 import { ResponseBuild } from 'api-client';
 import { environment } from 'src/environments/environment';
+import { EventSourcePolyfill, EventSourceInit } from 'ng-event-source';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
   selector: 'wh-build-details',
@@ -16,15 +18,16 @@ export class BuildDetailsComponent implements OnInit, OnDestroy, AfterViewChecke
   build: ResponseBuild;
   myData: any;
   source: EventSource;
-  listener: any = null;
   logEvents: ResponseLog[] = [];
   container: HTMLElement;
   wasScrolledToBottom: boolean;
 
   constructor(
     private route: ActivatedRoute,
     private buildService: BuildService,
-    private titleService: Title) { }
+    private titleService: Title,
+    private oidcSecurityService: OidcSecurityService,
+  ) { }
 
   ngOnInit(): void {
     this.buildId = Number(this.route.snapshot.paramMap.get('buildId'));
@@ -42,16 +45,8 @@ export class BuildDetailsComponent implements OnInit, OnDestroy, AfterViewChecke
   connect(): void {
     if (this.buildStatus === BuildStatus.Scheduling || this.buildStatus === BuildStatus.Running) {
       if (!this.source) {
-        const apiUrl = environment.backendUrls.api;
-        this.source = new EventSource(`${apiUrl}/build/${this.buildId}/stream`);
-      }
-      if (!!window.EventSource && !this.listener) {
-        this.source.addEventListener('message', (message: MessageEvent) => {
-          this.wasScrolledToBottom = this.isScrolledToBottom();
-          // When it comes to SSE, the MessageEvent.data is always a string
-          const data = JSON.parse(message.data);
-          this.logEvents.push(data);
-        });
+        this.source = this.openEventSourceStream();
+        this.source.addEventListener('message', this.listener);
       }
     } else {
       if (this.source) {
@@ -68,6 +63,13 @@ export class BuildDetailsComponent implements OnInit, OnDestroy, AfterViewChecke
     });
   }
 
+  listener(message: MessageEvent) {
+    this.wasScrolledToBottom = this.isScrolledToBottom();
+    // When it comes to SSE, the MessageEvent.data is always a string
+    const data = JSON.parse(message.data);
+    this.logEvents.push(data);
+  }
+
   ngOnDestroy() {
     this.source?.removeEventListener('message', this.listener);
   }
@@ -76,6 +78,32 @@ export class BuildDetailsComponent implements OnInit, OnDestroy, AfterViewChecke
     this.updateTitle();
   }
 
+  private openEventSourceStream(): EventSource {
+    const url = `${environment.backendUrls.api}/build/${this.buildId}/stream`;
+    if (!environment.oidcConfig?.enabled) {
+      return new EventSource(url);
+    }
+    const reqOpts = this.getOidcRequestOptions();
+    const source = new EventSourcePolyfill(url, reqOpts);
+    return source as unknown as EventSource;
+  }
+
+  private getOidcRequestOptions(): EventSourceInit {
+    const token = this.oidcSecurityService.getAccessToken();
+    if (!token) {
+      return {};
+    }
+    const bearerToken = `Bearer ${token}`;
+    return {
+      headers: {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        Authorization: bearerToken,
+        /* eslint-enable @typescript-eslint/naming-convention */
+      },
+      withCredentials: true,
+    };
+  }
+
   private stayScrolledToBottom(): void {
     if (this.wasScrolledToBottom) {
       this.scrollToBottom();