Merge branch 'frontend_fixes'

src/app/config.ts

@@ -21,6 +21,7 @@ export const config = {
       'web-only'
       ],
     iframeUrl: '/webservice',
+    showUrlBar: false,
     hideMessages: false
   },
   ide: {

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();
+    }
+  }
 }

src/app/ide/ide.component.html

@@ -39,6 +39,6 @@
 
 <ngx-monaco-editor [(ngModel)]="code"
                    class="tfw-ide-editor"
-                   (keyup)="editorWriteHanlder()"
+                   (ngModelChange)="editorWriteHanlder()"
                    [options]="editorOptions"
 ></ngx-monaco-editor>

src/app/ide/ide.component.scss

@@ -4,13 +4,12 @@
 @import "../../assets/scss/variables.scss";
 
 .tfw-grid-ide-statusbar {
-  display: grid;
-  grid-template-columns: 8fr 1fr;
+  display: flex;
   background-color: #353535;
 }
 
 .tfw-ide-editor {
-  height: calc(100% - 67px);
+  height: calc(100% - 25px);
   width: 100%;
   overflow: hidden;
 }
@@ -37,13 +36,20 @@
 
 .tfw-deploy-btn-group {
   display: flex;
-  justify-content: flex-end;  
+  justify-content: flex-end;
+  flex-grow: 1;
 
   .tfw-deploy-btn {
     background: $tao-bright-green-200;
     padding: 0.3em 0.7em 0.7em 1.5em;
-    border-radius: 0;
-    border-bottom-left-radius: 2.2em;
+    border-radius: 0 0 0 2.2em;
+    color: black;
+
+    &:first-child {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
     img {
       padding-right: 0.5em;
@@ -71,9 +77,8 @@
 
 
     .loader {
-      border: 2px solid $tao-warm-yellow-600;
       border-radius: 50%;
-      border-top: 2px solid $tao-warm-yellow-200;
+      border: 2px solid;
       width: 15px;
       height: 15px;
       animation: spin 2s linear infinite;

src/app/messages/messages.component.html

@@ -10,7 +10,7 @@
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
       <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
     </div>
-    <div [innerHtml]="message.message"></div>
+    <div class="tfw-grid-message-body" [innerHtml]="message.message"></div>
   </div>
   <div *ngIf="messageInQueue" class="tfw-grid-message jumping-circle-container">
       <div class="jumping-circle" id="jc1"></div>

src/app/messages/messages.component.scss

@@ -2,6 +2,7 @@
 // All Rights Reserved. See LICENSE file for details.
 
 @import "../../assets/scss/variables.scss";
+@import "../../assets/scss/mixins/layout";
 
 .tfw-next-button {
   text-align: center;
@@ -84,3 +85,7 @@
     opacity: 0.37;
   }
 }
+
+.tfw-grid-message-body {
+  @include word-break()
+}

src/app/terminal/terminal.component.scss

@@ -5,6 +5,10 @@
 @import "../../app/dashboard/dashboard.component.scss";
 
 
+::ng-deep .xterm .xterm-viewport {
+  overflow-y: auto;
+}
+
 .tfw-xterm {
   max-height: 100%;
   height: 100%;