Merge branch 'frontend_fixes'

src/app/dashboard/dashboard.component.html

@@ -10,15 +10,25 @@
       <app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
     </div>
     <div class="tfw-web tao-grid-top-left"
-         [ngClass]="{'deploy-blur': deploying}">
+         [ngClass]="{'deploy-blur': deploying || polling}">
          <app-web *ngIf="!iframeUrl"></app-web>
+         <div *ngIf="showUrlBar" class="urlbar-container">
+           <button class="refresh btn btn-sm rounded-circle" (click)="reloadIframe()">&#8635;</button>
+           <input type="text"
+                  #urlbar
+                  class="urlbar form-control"
+                  value="{{actualIframeUrl}}"
+                  (keyup.enter)="changeIframeURL()">
+           <button class="go btn btn-sm rounded-circle" (click)="changeIframeURL()">&#8680;</button>
+         </div>
          <div *ngIf="iframeUrl" class="iframe-container">
-          <iframe class="iframe"
-                  #webiframe
-                  scrolling="yes"
-                  frameborder="0"
-                  [src]="iframeUrl | safe">
-          </iframe>
+            <iframe class="iframe"
+                    #webiframe
+                    scrolling="yes"
+                    frameborder="0"
+                    (load)="iframeLoad()"
+                    [src]="iframeUrl | safe">
+            </iframe>
         </div>
     </div>
     <div class="tfw-ide">

src/app/dashboard/dashboard.component.scss

@@ -3,11 +3,13 @@
 
 @import "../../assets/scss/variables.scss";
 @import "../../assets/scss/mixins/layout.scss";
+@import "../../assets/scss/mixins/scrollbar";
 
 @mixin set-tfw-web($layouts-key) {
   .tfw-web {
     .iframe-container {
       display: flex;
+      flex-direction: column;
       overflow: hidden;
       @include set-component-size($layouts-key, 'web');
     }
@@ -18,6 +20,30 @@
       margin: 0;
       padding: 0;
     }
+
+    .urlbar-container {
+      display: flex;
+      height: 37px;
+      background: #353535;
+
+      .btn {
+        background: #353535;
+        color: white;
+        align-self: center;
+        margin: 5px;
+      }
+
+      .btn:hover{
+        background: lighten(#353535, 10);
+      }
+    }
+
+    .urlbar {
+      flex-grow: 1;
+      height: 30px;
+      align-self: center;
+      border-radius: 15px;
+    }
   }
 }
 
@@ -46,6 +72,8 @@
     background-color: $tao-gray-50;
   }
 
+  @include set-scrollbar-style('dark', '.tfw-messages');
+
   .tfw-messages {
     padding: $space;
     padding-top: $hair;

src/app/dashboard/dashboard.component.ts

@@ -10,6 +10,8 @@ import { config } from '../config';
 import { ProcessLogService } from '../services/processlog.service';
 import { LogMessage } from '../message-types/log-message';
 import { CommandMessage } from '../message-types/command-message';
+import { HttpClient } from '@angular/common/http';
+import { delay, retryWhen, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-dashboard',
@@ -18,14 +20,19 @@ import { CommandMessage } from '../message-types/command-message';
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   deploying = false;
+  polling = false;
   deploymentNotificationSubscription: Subscription;
   @ViewChild('webiframe') webiframe: ElementRef;
   @ViewChild('tfwmessages') messages: ElementRef;
+  @ViewChild('urlbar') urlbar: ElementRef;
 
   layout: string = config.dashboard.currentLayout;
   hideMessages: boolean = config.dashboard.hideMessages;
   iframeUrl: string = config.dashboard.iframeUrl;
+  showUrlBar = config.dashboard.showUrlBar;
+  actualIframeUrl: string = this.iframeUrl;
   selectedTerminalMenuItem: string = config.dashboard.terminalOrConsole;
+  iframeReloadSubscription: Subscription;
 
   command_handlers = {
     'layout':           this.layoutHandler.bind(this),
@@ -38,7 +45,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
   constructor(private deploymentNotificationService: DeploymentNotificationService,
               private webSocketService: WebSocketService,
               private changeDetectorRef: ChangeDetectorRef,
-              private processLogService: ProcessLogService) {}
+              private processLogService: ProcessLogService,
+              private http: HttpClient) {}
 
   ngOnInit() {
     this.webSocketService.connect();
@@ -60,7 +68,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
       (deploying) => {
         this.deploying = deploying;
         if (!deploying && config.ide.reloadIframeOnDeploy) {
-          this.reloadIframe();
+          if (this.polling) {
+            this.iframeReloadSubscription.unsubscribe();
+          }
+          this.pollingServerForIframeReload();
         }
       });
   }
@@ -113,12 +124,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
     setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
   }
 
-  ngOnDestroy() {
-    if (this.deploymentNotificationSubscription) {
-      this.deploymentNotificationSubscription.unsubscribe();
-    }
-  }
-
   reloadIframe() {
     setTimeout(() => {
       this.webiframe.nativeElement.contentWindow.location.reload(true);
@@ -152,4 +157,44 @@ export class DashboardComponent implements OnInit, OnDestroy {
     // change detection (not in the template like ConsoleComponent does)
     element.scrollTop = element.scrollHeight;
   }
+
+  iframeLoad(): void {
+    if (this.webiframe) {
+      this.actualIframeUrl = this.webiframe.nativeElement.contentWindow.frames.location.pathname;
+    }
+  }
+
+  changeIframeURL() {
+    this.webiframe.nativeElement.contentWindow.frames.location.pathname = this.urlbar.nativeElement.value;
+  }
+
+  pollingServerForIframeReload() {
+    this.polling = true;
+    this.iframeReloadSubscription = this.http.get(this.actualIframeUrl, {observe: 'response'}).pipe(
+      retryWhen(errors =>
+        errors.pipe(
+          tap(
+            response => {
+              if (response.status === 200) {
+                this.iframeReloadSubscription.unsubscribe();
+                this.polling = false;
+                this.reloadIframe();
+              }
+            }
+          ),
+          delay(1000)
+        )
+      )
+    ).subscribe();
+  }
+
+  ngOnDestroy() {
+    if (this.deploymentNotificationSubscription) {
+      this.deploymentNotificationSubscription.unsubscribe();
+    }
+
+    if (this.iframeReloadSubscription) {
+      this.iframeReloadSubscription.unsubscribe();
+    }
+  }
 }