Merge pull request #1744 from Azure/dev

Sprint 9 merge
Azure · Sep 1, 2017 · 5eb12e9 · 5eb12e9
2 parents 0b94fe4 + a520d4c
commit 5eb12e9
Show file tree

Hide file tree

Showing 62 changed files with 872 additions and 406 deletions.
diff --git a/AzureFunctions.AngularClient/src/app/api/api-details/api-details.component.html b/AzureFunctions.AngularClient/src/app/api/api-details/api-details.component.html
@@ -97,7 +97,7 @@
       </div>
 
       <input [fnWriteAccess]="functionApp" type="text" name="backendUri" style="width: 720px" [formControl]="complexForm.controls['backendUri']"
-        placeholder="{{ 'apiProxy_backendUrl' | translate }}" [ngClass]="{'input-error':!complexForm.controls['backendUri'].valid && complexForm.controls['backendUri'].touched}">
+        placeholder="{{ 'optional' | translate }}" [ngClass]="{'input-error':!complexForm.controls['backendUri'].valid && complexForm.controls['backendUri'].touched}">
 
       <pop-over *ngIf="!complexForm.controls['backendUri'].valid" [message]="complexForm.controls['backendUri'].errors['required'] ? ('filedRequired' | translate) :  ('apiProxy_backanrUrlStart' | translate)"
         [isInputError]="true">

diff --git a/AzureFunctions.AngularClient/src/app/api/api-new/api-new.component.html b/AzureFunctions.AngularClient/src/app/api/api-new/api-new.component.html
@@ -90,7 +90,7 @@
       </div>
 
       <input [fnWriteAccess]="functionApp" type="text" name="backendUri" class="long" [formControl]="complexForm.controls['backendUri']"
-        placeholder="{{ 'apiProxy_backendUrl' | translate }}" [ngClass]="{'input-error':!complexForm.controls['backendUri'].valid && complexForm.controls['backendUri'].touched}">
+        placeholder="{{ 'optional' | translate }}" [ngClass]="{'input-error':!complexForm.controls['backendUri'].valid && complexForm.controls['backendUri'].touched}">
 
       <pop-over *ngIf="!complexForm.controls['backendUri'].valid" [message]="complexForm.controls['backendUri'].errors['required'] ? ('filedRequired' | translate) :  ('apiProxy_backanrUrlStart' | translate)"
         [isInputError]="true">

diff --git a/...ngularClient/src/app/api/request-respose-override/request-respose-override.component.html b/...ngularClient/src/app/api/request-respose-override/request-respose-override.component.html
@@ -1,74 +1,87 @@
 <div class="rr-container">
     <hr>
-    <div class="text-level1-heading">{{ 'rrOverride_request' | translate }}</div>
 
-    <div>
-        <div class="control-label">{{ 'httpRun_httpMethod' | translate }}</div>
+    <span class="link" (click)="showRequestOverride()">
+        <i class="fa" [class.fa-plus]="!showRequest" [class.fa-minus]="showRequest"></i>
+        &nbsp;{{ 'rrOverride_request' | translate }}
+    </span>
 
-        <select *ngIf="model" [(ngModel)]="model.method" (ngModelChange)="changeValue()">
-            <option value="no">{{ 'apiProxy_noOverride' | translate }}</option>
-            <option *ngFor="let method of availableMethods" [value]="method">{{method.toUpperCase()}}</option>
-        </select>
-    </div>
+    <div [class.non-visible]="!showRequest" [class.shown-container]="showRequest">
+        <div>
+            <div class="control-label">{{ 'httpRun_httpMethod' | translate }}</div>
 
-    <div>
-        <pair-list *ngIf="paramsOptions"
-                    [options]="paramsOptions"
-                    addButtonLabel="{{ 'httpRun_addParameter' | translate}}"
-                    emptyLabel="{{ 'httpRun_noQuery' | translate }}"
-                    title="{{ 'httpRun_query' | translate }}"
-                    (valueChanges)="paramsValueChanges($event)">
+            <select *ngIf="model" [(ngModel)]="model.method" (ngModelChange)="changeValue()">
+                <option value="no">{{ 'apiProxy_noOverride' | translate }}</option>
+                <option *ngFor="let method of availableMethods" [value]="method">{{method.toUpperCase()}}</option>
+            </select>
+        </div>
 
-        </pair-list>
-    </div>
-
-    <div>
-        <pair-list *ngIf="headerOptions"
-                    [options]="headerOptions"
-                    addButtonLabel="{{ 'httpRun_addHeader' | translate}}"
-                    emptyLabel="{{ 'httpRun_noHeaders' | translate }}"
-                    title="{{ 'httpRun_headers' | translate }}"
-                    (valueChanges)="headerValueChanges($event)">
+        <div>
+            <pair-list *ngIf="paramsOptions"
+                        [options]="paramsOptions"
+                        addButtonLabel="{{ 'httpRun_addParameter' | translate}}"
+                        emptyLabel="{{ 'httpRun_noQuery' | translate }}"
+                        title="{{ 'httpRun_query' | translate }}"
+                        (valueChanges)="paramsValueChanges($event)">
 
-        </pair-list>
+            </pair-list>
+        </div>
+
+        <div>
+            <pair-list *ngIf="headerOptions"
+                        [options]="headerOptions"
+                        addButtonLabel="{{ 'httpRun_addHeader' | translate}}"
+                        emptyLabel="{{ 'httpRun_noHeaders' | translate }}"
+                        title="{{ 'httpRun_headers' | translate }}"
+                        (valueChanges)="headerValueChanges($event)">
+
+            </pair-list>
+        </div>
     </div>
     <hr>
-    <div class="text-level1-heading">{{ 'rrOverride_response' | translate }}</div>
 
-    <div class="response-status">
-        <div>
+    <span class="link" (click)="showResponseOverride()">
+        <i class="fa" [class.fa-plus]="!showResponse" [class.fa-minus]="showResponse"></i>
+        &nbsp;{{ 'rrOverride_response' | translate }}
+    </span>
+
+    <div [class.non-visible]="!showResponse" [class.shown-container]="showResponse">
+        <div class="response-status">
             <div>
-                <label class="control-label">{{ 'rrOverride_code' | translate }}</label>
+                <div>
+                    <label class="control-label">{{ 'rrOverride_code' | translate }}</label>
+                </div>
+                <input type="text" [(ngModel)]="model.statusCode" (ngModelChange)="changeValue()">
             </div>
-            <input type="text" [(ngModel)]="model.statusCode" (ngModelChange)="changeValue()">
-        </div>
-        <div>
             <div>
-                <label class="control-label">{{ 'rrOverride_message' | translate }}</label>
+                <div>
+                    <label class="control-label">{{ 'rrOverride_message' | translate }}</label>
+                </div>
+                <input type="text" [(ngModel)]="model.statusReason" (ngModelChange)="changeValue()">
             </div>
-            <input type="text" [(ngModel)]="model.statusReason" (ngModelChange)="changeValue()">
         </div>
-    </div>
-
-    <div>
-        <pair-list *ngIf="responseHeaderOptions"
-                    [options]="responseHeaderOptions"
-                    addButtonLabel="{{ 'httpRun_addHeader' | translate}}"
-                    emptyLabel="{{ 'httpRun_noHeaders' | translate }}"
-                    title="{{ 'httpRun_headers' | translate }}"
-                    (valueChanges)="responseHeaderValueChanges($event)">
+
+        <div>
+            <pair-list *ngIf="responseHeaderOptions"
+                        [options]="responseHeaderOptions"
+                        addButtonLabel="{{ 'httpRun_addHeader' | translate}}"
+                        emptyLabel="{{ 'httpRun_noHeaders' | translate }}"
+                        title="{{ 'httpRun_headers' | translate }}"
+                        (valueChanges)="responseHeaderValueChanges($event)">
 
-        </pair-list>
-    </div>
+            </pair-list>
+        </div>
 
-    <div>
-        <label class="control-label">{{ 'rrOverride_boby' | translate }}</label>
-        <div monacoEditor class="monaco response-body"
-                (onContentChanged)="contentChanged($event)"
-                [content]="model.body"
-                [functionAppInput]="functionApp">
+        <div>
+            <label class="control-label">{{ 'rrOverride_boby' | translate }}</label>
+            <div monacoEditor class="monaco response-body"
+                    (onContentChanged)="contentChanged($event)"
+                    [content]="model.body"
+                    [functionAppInput]="functionApp">
+            </div>
         </div>
     </div>
+    <hr>
 </div>
 
 
diff --git a/...ngularClient/src/app/api/request-respose-override/request-respose-override.component.scss b/...ngularClient/src/app/api/request-respose-override/request-respose-override.component.scss
@@ -14,4 +14,13 @@
     div:nth-child(2) {
         padding-left:65px;
     }
+}
+
+.non-visible {
+    visibility: hidden;
+    height: 0px;
+}
+
+.shown-container {
+    padding-top: 15px;
 }
diff --git a/....AngularClient/src/app/api/request-respose-override/request-respose-override.component.ts b/....AngularClient/src/app/api/request-respose-override/request-respose-override.component.ts
@@ -37,6 +37,8 @@ export class RequestResposeOverrideComponent {
     model: RequestResponseOverrriedModel;
     @Input() functionApp: FunctionApp;
     @Output() valueChanges = new Subject<any>();
+    showResponse = false;
+    showRequest = false
     private _requestHeadersValid: boolean;
     private _requestParamsValid: boolean;
     private _responseHeadersValid: boolean;
@@ -71,7 +73,11 @@ export class RequestResposeOverrideComponent {
                     this.model.statusReason = value.responseOverrides[prop];
                 }
                 if (prop.toLocaleLowerCase() === "response.body") {
-                    this.model.body = value.responseOverrides[prop];
+                    if (typeof value.responseOverrides[prop] === 'string') {
+                        this.model.body = value.responseOverrides[prop];
+                    } else {
+                        this.model.body = JSON.stringify(value.responseOverrides[prop]);
+                    }
                 }
             }
         }
@@ -134,6 +140,14 @@ export class RequestResposeOverrideComponent {
         this.changeValue();
     }
 
+    showResponseOverride() {
+        this.showResponse = !this.showResponse;
+    }
+
+    showRequestOverride() {
+        this.showRequest = !this.showRequest;
+    }
+
     get valid(): boolean {
         return this._requestHeadersValid && this._requestParamsValid && this._responseHeadersValid;
     }

diff --git a/AzureFunctions.AngularClient/src/app/app.module.ts b/AzureFunctions.AngularClient/src/app/app.module.ts
@@ -123,6 +123,7 @@ import { GeneralSettingsComponent } from './site/site-config/general-settings/ge
 import { AppSettingsComponent } from './site/site-config/app-settings/app-settings.component';
 import { ConnectionStringsComponent } from './site/site-config/connection-strings/connection-strings.component';
 import { BindingEventGridComponent } from './binding-event-grid/binding-event-grid.component';
+import { TopWarningComponent } from './top-warning/top-warning.component';
 
 export function ArmServiceFactory(
   http: Http,
@@ -244,7 +245,8 @@ export class AppModule {
       ConnectionStringsComponent,
       PairListComponent,
       RequestResposeOverrideComponent,
-      BindingEventGridComponent
+      BindingEventGridComponent,
+      TopWarningComponent
     ],
     imports: [
       FormsModule,

diff --git a/AzureFunctions.AngularClient/src/app/apps-list/apps-list.component.html b/AzureFunctions.AngularClient/src/app/apps-list/apps-list.component.html
@@ -56,12 +56,13 @@
     </ng-container>
   </tr>
 
-  <tr *ngIf="isLoading">
-    <td *ngIf="isLoading" colspan="4">{{'functionMonitor_loading' | translate}}</td>
-    <td *ngIf="isLoading" colspan="4"></td>
+  <tr *ngIf="appsNode?.isLoading">
+    <td colspan="4">{{'functionMonitor_loading' | translate}}</td>
+    <td colspan="4"></td>
   </tr>
 </tbl>
-<div *ngIf="!isLoading && table.items.length === 0" class="empty-browse">
+
+<div *ngIf="!appsNode?.isLoading && initialized && table.items.length === 0" class="empty-browse">
   <img src="images/emptybrowse-functions.svg" />
   <h4>{{'emptyBrowse_title' | translate}}</h4>
   <span>{{'emptyBrowse' | translate}}</span>

diff --git a/AzureFunctions.AngularClient/src/app/apps-list/apps-list.component.ts b/AzureFunctions.AngularClient/src/app/apps-list/apps-list.component.ts
@@ -32,7 +32,7 @@ export class AppsListComponent implements OnInit, OnDestroy {
   public appsNode: AppsNode;
   public Resources = PortalResources;
 
-  public isLoading = true;
+  public initialized = false;
 
   public allLocations = this.translateService.instant(PortalResources.allLocations);
   public numberLocations = this.translateService.instant(PortalResources.locationCount);
@@ -64,11 +64,12 @@ export class AppsListComponent implements OnInit, OnDestroy {
       .distinctUntilChanged()
       .switchMap(viewInfo => {
         this.appsNode = (<AppsNode>viewInfo.node);
-        this.isLoading = true;
+        this.initialized = false;
         return (<AppsNode>viewInfo.node).childrenStream;
       })
       .subscribe(children => {
         this.apps = children;
+        this.initialized = true;
         this.tableItems = this.apps.map(app => (<AppTableItem>{
           title: app.title,
           subscription: app.subscription,
@@ -88,7 +89,6 @@ export class AppsListComponent implements OnInit, OnDestroy {
             displayLabel: resourceGroup,
             value: resourceGroup
           }));
-        this.isLoading = false;
       });
   }
 

diff --git a/AzureFunctions.AngularClient/src/app/busy-state/busy-state.component.ts b/AzureFunctions.AngularClient/src/app/busy-state/busy-state.component.ts
@@ -18,6 +18,7 @@ export class BusyStateComponent implements OnInit {
 
     private busyStateMap: { [key: string]: boolean } = {};
     private reservedKey = '-';
+    private timeouts: { [key: string]: number } = {};
 
     ngOnInit() {
         this.isGlobal = this.name === 'global';
@@ -29,8 +30,10 @@ export class BusyStateComponent implements OnInit {
 
     setScopedBusyState(key: string): string {
         key = key || Guid.newGuid();
-        this.busyStateMap[key] = true;
-        this.busy = true;
+        this.timeouts[key] = window.setTimeout(() => {
+            this.busyStateMap[key] = true;
+            this.busy = true;
+        }, 100); // 100 msec debounce
         return key;
     }
 
@@ -39,11 +42,20 @@ export class BusyStateComponent implements OnInit {
         if (this.busyStateMap[key]) {
             delete this.busyStateMap[key];
         }
+        if (this.timeouts[key]) {
+            clearTimeout(this.timeouts[key]);
+            delete this.timeouts[key]
+        }
         this.busy = !this.isEmptyMap(this.busyStateMap);
     }
 
     clearOverallBusyState() {
         this.busyStateMap = {};
+        const keys = Object.keys(this.timeouts);
+        for (let i = 0; i < keys.length; i++) {
+            clearTimeout(this.timeouts[keys[i]]);
+            delete this.timeouts[keys[i]];
+        }
         this.clear.next(1);
         this.busy = false;
     }

diff --git a/AzureFunctions.AngularClient/src/app/controls/pair-list/pair-list.component.html b/AzureFunctions.AngularClient/src/app/controls/pair-list/pair-list.component.html
@@ -13,7 +13,7 @@
 
             <input type="text" name="item{{i}}" placeholder="name" class="name" formControlName="name">
 
-            <pop-over *ngIf="!form.controls.items.controls[i].controls.name.valid" [isInputError]="true" class="error-fix">
+            <pop-over *ngIf="!form.controls.items.controls[i].controls.name.valid"  [message]="('notValidValue' | translate)" [isInputError]="true" class="error-fix">
             </pop-over>
 
             <input type="text" placeholder="value" class="value" formControlName="value">

diff --git a/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.ts b/AzureFunctions.AngularClient/src/app/function-dev/function-dev.component.ts
@@ -1,7 +1,7 @@
 import { FileUtilities } from './../shared/Utilities/file';
 import { EditModeHelper } from './../shared/Utilities/edit-mode.helper';
 import { ConfigService } from './../shared/services/config.service';
-import { Component, QueryList, OnChanges, Input, SimpleChange, ViewChild, ViewChildren, OnDestroy, ElementRef } from '@angular/core';
+import { Component, QueryList, OnChanges, Input, SimpleChange, ViewChild, ViewChildren, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
@@ -106,7 +106,8 @@ export class FunctionDevComponent implements OnChanges, OnDestroy {
         private _globalStateService: GlobalStateService,
         private _translateService: TranslateService,
         private _aiService: AiService,
-        configService: ConfigService) {
+        configService: ConfigService,
+        cd: ChangeDetectorRef) {
 
         this.functionInvokeUrl = this._translateService.instant(PortalResources.functionDev_loading);
         this.isStandalone = configService.isStandalone();
@@ -218,6 +219,11 @@ export class FunctionDevComponent implements OnChanges, OnDestroy {
                     this.setFunctionInvokeUrl();
                 }
 
+                // This subscribe method changes a lot of UI elements. Normally that's fine if the data leading
+                // to the subscribe isn't ready and need to be fetched from the server.
+                // if the data is cached on the client, this causes few rapid changes in the DOM and we need to inform the change detector of these changes.
+                // Otherwise we'll get ExpressionChangedAfterItHasBeenCheckedError
+                cd.detectChanges();
 
             });
 

diff --git a/AzureFunctions.AngularClient/src/app/function-keys/function-keys.component.html b/AzureFunctions.AngularClient/src/app/function-keys/function-keys.component.html
@@ -1,4 +1,4 @@
-<div class="wrapper">
+<div class="wrapper" *ngIf="!disabled">
     <busy-state></busy-state>
     <div *ngIf="functionInfo" class="title"> {{'functionKeys_title' | translate}} </div>
     <div *ngIf="!functionInfo" class="title"> {{'adminKeys_title' | translate}} </div>
@@ -13,7 +13,7 @@
         <tbody>
             <tr class="not-clickable" *ngFor="let key of keys">
                 <td>{{key.name}}</td>
-                <td *ngIf="key.show">{{key.value}}</td>
+                <td *ngIf="key.show">{{key.value}} <span (click)="key.show = false" class="operation">{{'functionKeys_clickToHide' | translate}}</span></td>
                 <td *ngIf="!key.show"><span (click)="key.show = true" class="operation">{{'functionKeys_clickToShow' | translate}}</span></td>
                 <td>
                     <div id="operations-bar">