mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:01:32 +00:00
Code Issues Releases Wiki Activity

Poll webservice url for 200 OK on frontend load

Browse Source
This commit is contained in:
Kristóf Tóth 2019-08-30 15:59:49 +02:00
parent 4e60bfc8df
commit 62e0a99478
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/dashboard/dashboard.component.html
View File

@ -7,7 +7,7 @@
<app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages> <app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
</div> </div>
<div class="tfw-web tao-grid-top-left" <div class="tfw-web tao-grid-top-left"
[ngClass]="{'deploy-blur': deploying || polling}"> [ngClass]="{'deploy-blur': deploying || (polling | async)}">
<div *ngIf="iframeUrl | async" class="iframe-container"> <div *ngIf="iframeUrl | async" class="iframe-container">
<div *ngIf="showUrlBar | async" class="urlbar-container"> <div *ngIf="showUrlBar | async" class="urlbar-container">
<button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button> <button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button>

32
src/app/dashboard/dashboard.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnDestroy, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core'; import { Component, OnDestroy, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
import { DeploymentNotificationService } from '../services/deployment-notification.service'; import { DeploymentNotificationService } from '../services/deployment-notification.service';
import { Subscription } from 'rxjs'; import { Subscription, BehaviorSubject } from 'rxjs';
import { WebSocketService } from '../services/websocket.service'; import { WebSocketService } from '../services/websocket.service';
import { WebSocketMessage } from '../message-types/websocket-message'; import { WebSocketMessage } from '../message-types/websocket-message';
import { DashboardConfigService } from '../services/config.service'; import { DashboardConfigService } from '../services/config.service';
@ -14,7 +14,7 @@ import { delay, retryWhen, tap } from 'rxjs/operators';
}) })
export class DashboardComponent implements OnInit, OnDestroy { export class DashboardComponent implements OnInit, OnDestroy {
deploying = false; deploying = false;
polling = false; polling = new BehaviorSubject<boolean>(false);
deploymentNotificationSubscription: Subscription; deploymentNotificationSubscription: Subscription;
@ViewChild('webiframe', {static: false}) webiframe: ElementRef; @ViewChild('webiframe', {static: false}) webiframe: ElementRef;
@ViewChild('tfwmessages', {static: false}) messages: ElementRef; @ViewChild('tfwmessages', {static: false}) messages: ElementRef;
@ -42,12 +42,18 @@ export class DashboardComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
this.webSocketService.connect(); this.webSocketService.connect();
this.configService.init(); this.configService.init();
this.hideIframeUntilResponseOk();
this.subscribeResizeOnLayoutChange(); this.subscribeResizeOnLayoutChange();
this.initCommandHandling(); this.initCommandHandling();
this.initDeploymentNotifications(); this.initDeploymentNotifications();
this.sendReady(); this.sendReady();
} }
hideIframeUntilResponseOk() {
// TODO: hide iframe and show it after this whole deal...
this.reloadIframeWhenResponseOk();
}
subscribeResizeOnLayoutChange() { subscribeResizeOnLayoutChange() {
this.configService.layout.subscribe(() => this.emitResizeEvent()); this.configService.layout.subscribe(() => this.emitResizeEvent());
} }
@ -64,10 +70,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
(deploying) => { (deploying) => {
this.deploying = deploying; this.deploying = deploying;
if (!deploying && this.configService.reloadIframeOnDeploy.value) { if (!deploying && this.configService.reloadIframeOnDeploy.value) {
if (this.polling) { this.reloadIframeWhenResponseOk();
this.iframeReloadSubscription.unsubscribe();
}
this.pollingServerForIframeReload();
} }
}); });
} }
@ -142,8 +145,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.webiframe.nativeElement.contentWindow.frames.location.href = this.urlbar.nativeElement.value; this.webiframe.nativeElement.contentWindow.frames.location.href = this.urlbar.nativeElement.value;
} }
pollingServerForIframeReload() { reloadIframeWhenResponseOk() {
this.polling = true; if (this.polling.value) {
this.iframeReloadSubscription.unsubscribe();
}
this.polling.next(true);
this.iframeReloadSubscription = this.http.get(this.actualIframeUrl, {observe: 'response'}).pipe( this.iframeReloadSubscription = this.http.get(this.actualIframeUrl, {observe: 'response'}).pipe(
retryWhen(errors => retryWhen(errors =>
errors.pipe( errors.pipe(
@ -151,15 +157,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
response => { response => {
if (response.status === 200) { if (response.status === 200) {
this.iframeReloadSubscription.unsubscribe(); this.iframeReloadSubscription.unsubscribe();
this.polling = false; this.polling.next(false);
this.reloadIframe(); this.reloadIframe();
} }}),
}
),
delay(1000) delay(1000)
) ))).subscribe();
)
).subscribe();
} }
ngOnDestroy() { ngOnDestroy() {