From 2dd558a8564ff5d987a0a22ab3e79202c4c45e67 Mon Sep 17 00:00:00 2001
From: Alexander Zaslonov <zaslonov.alexander@gmail.com>
Date: Fri, 8 May 2020 17:39:32 -0700
Subject: [PATCH] Added support for multiple hostnames to Test console. (#603)

---
 .../ko/runtime/operation-console.html         | 78 ++++++++++++-------
 .../ko/runtime/operation-console.ts           | 21 ++++-
 .../ko/runtime/operation-details.ts           | 20 ++---
 src/contracts/hostname.ts                     |  4 +
 src/services/apiService.ts                    | 16 +++-
 src/services/mapiClient.ts                    | 11 ++-
 6 files changed, 97 insertions(+), 53 deletions(-)
 create mode 100644 src/contracts/hostname.ts

diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.html b/src/components/operations/operation-details/ko/runtime/operation-console.html
index 4ebe4aebd..06dcec295 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-console.html
+++ b/src/components/operations/operation-details/ko/runtime/operation-console.html
@@ -8,7 +8,7 @@
 
 <div class="panel panel-dark animation-fade-in" data-bind="with: consoleOperation">
     <button type="button" class="no-border pull-right" data-dismiss="modal" aria-label="Close console"
-        data-bind="click: $parents[1].closeConsole">
+            data-bind="click: $parents[1].closeConsole">
         <i class="icon icon-simple-remove"></i>
     </button>
 
@@ -30,6 +30,26 @@
 
     <div class="monospace" data-bind="text: urlTemplate, attr: { 'data-method': method }"></div>
 
+
+    <!-- ko if: $component.hostnameSelectionEnabled -->
+    <h3>Host</h3>
+
+    <div class="row flex flex-row">
+        <div class="col-4">
+            <input type="text" readonly class="form-control form-control-sm" value="Hostname" />
+        </div>
+        <div class="col-6">
+            <div class="form-group">
+                <select id="hostnames" class="form-control" data-bind="value: $component.requestHostname">
+                    <!-- ko foreach: { data: $component.hostnames, as: 'hostname' } -->
+                    <option data-bind="value: hostname, text: hostname"></option>
+                    <!-- /ko -->
+                </select>
+            </div>
+        </div>
+    </div>
+    <!-- /ko -->
+
     <h3>Authorization</h3>
 
     <div class="row flex flex-row">
@@ -51,7 +71,7 @@ <h3>Authorization</h3>
                 <!-- /ko -->
                 <!-- ko if: !$component.products() || $component.products().length === 0 -->
                 <input type="text" class="form-control" placeholder="subscription key"
-                    data-bind="textInput: $component.selectedSubscriptionKey" />
+                       data-bind="textInput: $component.selectedSubscriptionKey" />
                 <!-- /ko -->
             </div>
         </div>
@@ -65,8 +85,8 @@ <h4>Parameters</h4>
                 <div class="form-group">
                     <div class="input-group">
                         <input type="text" readonly autocomplete="off" class="form-control form-control-sm"
-                            placeholder="name" spellcheck="false" aria-label="Parameter name"
-                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.name">
+                               placeholder="name" spellcheck="false" aria-label="Parameter name"
+                               data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.name">
                         <span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
                     </div>
                 </div>
@@ -75,13 +95,13 @@ <h4>Parameters</h4>
                 <div class="form-group">
                     <!-- ko if: parameter.options.length > 0 -->
                     <select class="form-control" aria-label="Parameter value"
-                        data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
+                            data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                     <!-- /ko -->
                     <!-- ko if: parameter.options.length === 0 -->
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                            spellcheck="false" aria-label="Parameter value"
-                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
+                               spellcheck="false" aria-label="Parameter value"
+                               data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
                         <span class="invalid-feedback" data-bind="validationMessage: parameter.value"></span>
                     </div>
                     <!-- /ko -->
@@ -95,7 +115,7 @@ <h4>Parameters</h4>
                 <div class="form-group">
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="name"
-                            spellcheck="false" aria-label="Parameter name" data-bind="textInput: parameter.name">
+                               spellcheck="false" aria-label="Parameter name" data-bind="textInput: parameter.name">
                         <span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
                     </div>
                 </div>
@@ -104,12 +124,12 @@ <h4>Parameters</h4>
                 <div class="form-group">
                     <!-- ko if: parameter.options.length > 0 -->
                     <select class="form-control" aria-label="Parameter value"
-                        data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
+                            data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                     <!-- /ko -->
                     <!-- ko if: parameter.options.length === 0 -->
                     <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                        spellcheck="false" aria-label="Parameter value"
-                        data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
+                           spellcheck="false" aria-label="Parameter value"
+                           data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
                     <!-- /ko -->
                 </div>
             </div>
@@ -135,7 +155,7 @@ <h3>Headers</h3>
                 <div class="form-group">
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="name"
-                            spellcheck="false" aria-label="Header name" data-bind="textInput: header.name">
+                               spellcheck="false" aria-label="Header name" data-bind="textInput: header.name">
                         <span class="invalid-feedback" data-bind="validationMessage: header.name"></span>
                     </div>
                 </div>
@@ -144,13 +164,13 @@ <h3>Headers</h3>
                 <div class="form-group">
                     <!-- ko if: header.options && header.options.length > 0 -->
                     <select class="form-control" aria-label="Header value"
-                        data-bind="value: header.value, options: header.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
+                            data-bind="value: header.value, options: header.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                     <!-- /ko -->
                     <!-- ko if: !header.options || header.options.length === 0 -->
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                            spellcheck="false" aria-label="Header value"
-                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: header.value">
+                               spellcheck="false" aria-label="Header value"
+                               data-bind="event: { keyup: $component.updateRequestSummary }, textInput: header.value">
                         <span class="invalid-feedback" data-bind="validationMessage: header.value"></span>
                     </div>
                     <!-- /ko -->
@@ -176,24 +196,24 @@ <h3>Body</h3>
     <div class="flex justify-content-end">
         <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatRaw" value="raw"
-                data-bind="checked: request.bodyFormat">
+                   data-bind="checked: request.bodyFormat">
             <label class="form-check-label" for="bodyFormatRaw">Raw</label>
         </div>
         <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatBinary" value="binary"
-                data-bind="checked: request.bodyFormat">
+                   data-bind="checked: request.bodyFormat">
             <label class="form-check-label" for="bodyFormatBinary">Binary</label>
         </div>
     </div>
     <div class="form-group">
         <!-- ko if: request.bodyFormat() === 'raw' -->
         <textarea class="form-control form-control-sm" rows="5"
-            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: request.body, valueUpdate: 'keyup'"></textarea>
+                  data-bind="event: { keyup: $component.updateRequestSummary }, textInput: request.body, valueUpdate: 'keyup'"></textarea>
         <!-- /ko -->
         <!-- ko if: request.bodyFormat() === 'binary' -->
         <file-input params="{ onSelect: $component.onFileSelect }" class="form-control" data-bind="css: { 'is-invalid': !request.binary.isValid() }"></file-input>
         <span class="invalid-feedback"
-            data-bind="validationMessage: request.binary"></span>
+              data-bind="validationMessage: request.binary"></span>
         <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -203,55 +223,55 @@ <h3>Body</h3>
     <ul class="nav" role="tablist">
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'http'), css: { 'nav-link-active': $component.selectedLanguage() === 'http' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'http'), css: { 'nav-link-active': $component.selectedLanguage() === 'http' }">
                 HTTP
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'curl'), css: { 'nav-link-active': $component.selectedLanguage() === 'curl' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'curl'), css: { 'nav-link-active': $component.selectedLanguage() === 'curl' }">
                 Curl
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'csharp'), css: { 'nav-link-active': $component.selectedLanguage() === 'csharp' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'csharp'), css: { 'nav-link-active': $component.selectedLanguage() === 'csharp' }">
                 C#
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'java'), css: { 'nav-link-active': $component.selectedLanguage() === 'java' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'java'), css: { 'nav-link-active': $component.selectedLanguage() === 'java' }">
                 Java
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'javascript'), css: { 'nav-link-active': $component.selectedLanguage() === 'javascript' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'javascript'), css: { 'nav-link-active': $component.selectedLanguage() === 'javascript' }">
                 JavaScript
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'php'), css: { 'nav-link-active': $component.selectedLanguage() === 'php' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'php'), css: { 'nav-link-active': $component.selectedLanguage() === 'php' }">
                 PHP
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'python'), css: { 'nav-link-active': $component.selectedLanguage() === 'python' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'python'), css: { 'nav-link-active': $component.selectedLanguage() === 'python' }">
                 Python
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'ruby'), css: { 'nav-link-active': $component.selectedLanguage() === 'ruby' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'ruby'), css: { 'nav-link-active': $component.selectedLanguage() === 'ruby' }">
                 Ruby
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-                data-bind="click: $component.selectedLanguage.bind(this, 'objc'), css: { 'nav-link-active': $component.selectedLanguage() === 'objc' }">
+               data-bind="click: $component.selectedLanguage.bind(this, 'objc'), css: { 'nav-link-active': $component.selectedLanguage() === 'objc' }">
                 Objective C
             </a>
         </li>
@@ -261,7 +281,7 @@ <h3>HTTP request</h3>
     <div class="code-block">
         <div class="code-block-heading">
             <button class="code-block-command" data-bind="copyToClipboard: $component.codeSample"
-                aria-label="Copy to clipboard">
+                    aria-label="Copy to clipboard">
                 <i class="icon icon-duplicate"></i> Copy
             </button>
         </div>
diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.ts b/src/components/operations/operation-details/ko/runtime/operation-console.ts
index 0c750d260..00cb6a0de 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-console.ts
+++ b/src/components/operations/operation-details/ko/runtime/operation-console.ts
@@ -43,6 +43,8 @@ export class OperationConsole {
     public readonly selectedProduct: ko.Observable<Product>;
     public readonly requestError: ko.Observable<string>;
     public readonly codeSample: ko.Observable<string>;
+    public readonly requestHostname: ko.Observable<string>;
+    public readonly hostnameSelectionEnabled: ko.Observable<boolean>;
     public masterKey: string;
     public isConsumptionMode: boolean;
     public templates: Object;
@@ -76,6 +78,8 @@ export class OperationConsole {
         this.codeSample = ko.observable();
         this.selectedProduct = ko.observable();
         this.onFileSelect = this.onFileSelect.bind(this);
+        this.requestHostname = ko.observable();
+        this.hostnameSelectionEnabled = ko.observable();
 
         validation.rules["maxFileSize"] = {
             validator: (file: File, maxSize: number) => !file || file.size < maxSize,
@@ -109,10 +113,10 @@ export class OperationConsole {
         this.masterKey = await this.tenantService.getServiceMasterKey();
         this.isConsumptionMode = skuName === ServiceSkuName.Consumption;
 
-        this.selectedSubscriptionKey.subscribe(this.applySubscriptionKey);
-
         await this.resetConsole();
 
+        this.requestHostname.subscribe(this.setHostname);
+        this.selectedSubscriptionKey.subscribe(this.applySubscriptionKey);
         this.api.subscribe(this.resetConsole);
         this.operation.subscribe(this.resetConsole);
         this.selectedLanguage.subscribe(this.updateRequestSummary);
@@ -140,9 +144,13 @@ export class OperationConsole {
         const consoleOperation = new ConsoleOperation(selectedApi, operation);
         this.consoleOperation(consoleOperation);
 
-        const proxyHostnames = this.hostnames();
-        const hostname = proxyHostnames[0]; // TODO: Take into account multiple hostnames.
+        const hostnames = this.hostnames();
+        this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
+
+        const hostname = hostnames[0];
+        this.requestHostname(hostname);
 
+        this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
         consoleOperation.host.hostname(hostname);
 
         if (this.api().type === TypeOfApi.soap) {
@@ -236,6 +244,11 @@ export class OperationConsole {
         }
     }
 
+    private setHostname(hostname: string): void {
+        this.consoleOperation().host.hostname(hostname);
+        this.updateRequestSummary();
+    }
+
     public addHeader(): void {
         this.consoleOperation().request.headers.push(new ConsoleHeader());
         this.updateRequestSummary();
diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.ts b/src/components/operations/operation-details/ko/runtime/operation-details.ts
index 5561f2285..1077a5884 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-details.ts
+++ b/src/components/operations/operation-details/ko/runtime/operation-details.ts
@@ -32,7 +32,7 @@ export class OperationDetails {
     public readonly tags: ko.ObservableArray<string>;
     public readonly operation: ko.Observable<Operation>;
     public readonly requestUrlSample: ko.Computed<string>;
-    public readonly primaryHostname: ko.Observable<string>;
+    public readonly sampleHostname: ko.Observable<string>;
     public readonly hostnames: ko.Observable<string[]>;
     public readonly working: ko.Observable<boolean>;
 
@@ -43,7 +43,7 @@ export class OperationDetails {
         private readonly routeHelper: RouteHelper
     ) {
         this.working = ko.observable(false);
-        this.primaryHostname = ko.observable();
+        this.sampleHostname = ko.observable();
         this.hostnames = ko.observable();
         this.api = ko.observable();
         this.schemas = ko.observableArray([]);
@@ -60,7 +60,7 @@ export class OperationDetails {
 
             const api = this.api();
             const operation = this.operation();
-            const hostname = this.primaryHostname();
+            const hostname = this.sampleHostname();
             const apiPath = api.versionedPath;
 
             if (api.type === TypeOfApi.soap) {
@@ -78,8 +78,6 @@ export class OperationDetails {
 
     @OnMounted()
     public async initialize(): Promise<void> {
-        await this.loadGatewayInfo();
-
         const apiName = this.routeHelper.getApiName();
         const operationName = this.routeHelper.getOperationName();
 
@@ -87,6 +85,7 @@ export class OperationDetails {
         this.selectedOperationName(operationName);
 
         if (apiName) {
+            await this.loadGatewayInfo(apiName);
             await this.loadApi(apiName);
         }
 
@@ -205,19 +204,14 @@ export class OperationDetails {
         return result;
     }
 
-    public async loadGatewayInfo(): Promise<void> {
-        let hostnames = await this.tenantService.getProxyHostnames();
-
-        if (hostnames.length === 0) {
-            // TODO: Remove once setting backend serving the setting gets deployed.
-            hostnames = await this.getProxyHostnames();
-        }
+    public async loadGatewayInfo(apiName: string): Promise<void> {
+        const hostnames = await this.apiService.getApiHostnames(apiName);
 
         if (hostnames.length === 0) {
             throw new Error(`Unable to fetch gateway hostnames.`);
         }
 
-        this.primaryHostname(hostnames[0]);
+        this.sampleHostname(hostnames[0]);
         this.hostnames(hostnames);
     }
 
diff --git a/src/contracts/hostname.ts b/src/contracts/hostname.ts
new file mode 100644
index 000000000..fef90c1f9
--- /dev/null
+++ b/src/contracts/hostname.ts
@@ -0,0 +1,4 @@
+export interface Hostname {
+    id: string;
+    value: string;
+}
\ No newline at end of file
diff --git a/src/services/apiService.ts b/src/services/apiService.ts
index 8972a72ac..9ddd5acf5 100644
--- a/src/services/apiService.ts
+++ b/src/services/apiService.ts
@@ -15,6 +15,7 @@ import { MapiClient } from "./mapiClient";
 import { Utils } from "../utils";
 import { OperationContract } from "../contracts/operation";
 import { SchemaContract, SchemaType } from "../contracts/schema";
+import { Hostname } from "./../contracts/hostname";
 import { VersionSetContract } from "../contracts/apiVersionSet";
 import { HttpHeader } from "@paperbits/common/http/httpHeader";
 import { ChangeLogContract } from "../contracts/apiChangeLog";
@@ -22,7 +23,6 @@ import { TagGroup } from "../models/tagGroup";
 import { Bag } from "@paperbits/common";
 import { Tag } from "../models/tag";
 
-
 export class ApiService {
     constructor(private readonly mapiClient: MapiClient) { }
 
@@ -402,9 +402,9 @@ export class ApiService {
 
     private getSchemasType(schemas: SchemaContract[]): SchemaType {
         if (schemas && schemas.length > 0) {
-            const is2 = !!schemas.find(item => item.properties.contentType === SchemaType.swagger) 
-                        &&
-                        !schemas.find(item => item.properties.contentType === SchemaType.openapi);
+            const is2 = !!schemas.find(item => item.properties.contentType === SchemaType.swagger)
+                &&
+                !schemas.find(item => item.properties.contentType === SchemaType.openapi);
             if (is2) {
                 return SchemaType.swagger;
             }
@@ -468,4 +468,12 @@ export class ApiService {
 
         return page;
     }
+
+    public async getApiHostnames(apiName: string): Promise<string[]> {
+        const query = `apis/${apiName}/hostnames`;
+        const pageOfHostnames = await this.mapiClient.get<Page<Hostname>>(query);
+        const hostnameValues = pageOfHostnames.value.map(x => x.value);
+
+        return hostnameValues;
+    }
 }
\ No newline at end of file
diff --git a/src/services/mapiClient.ts b/src/services/mapiClient.ts
index 9f2cd858d..287dee913 100644
--- a/src/services/mapiClient.ts
+++ b/src/services/mapiClient.ts
@@ -24,6 +24,7 @@ export interface IHttpBatchResponse {
 
 export class MapiClient {
     private managementApiUrl: string;
+    private managementApiUrlBase: string;
     private managementApiVersion: string;
     private environment: string;
     private initializePromise: Promise<void>;
@@ -52,6 +53,7 @@ export class MapiClient {
             throw new Error(`Management API URL ("${Constants.SettingNames.managementApiUrl}") setting is missing in configuration file.`);
         }
 
+        this.managementApiUrlBase = new URL(managementApiUrl).origin;
         this.managementApiUrl = Utils.ensureUrlArmified(managementApiUrl);
 
         const managementApiVersion = settings[Constants.SettingNames.managementApiVersion];
@@ -96,8 +98,6 @@ export class MapiClient {
             httpRequest.body = JSON.stringify(httpRequest.body);
         }
 
-        httpRequest.url = Utils.addQueryParameter(httpRequest.url, `api-version=${this.managementApiVersion}`);
-
         const call = () => this.makeRequest<T>(httpRequest);
         const requestKey = this.getRequestKey(httpRequest);
 
@@ -133,7 +133,12 @@ export class MapiClient {
             }
         }
 
-        httpRequest.url = `${this.managementApiUrl}${Utils.ensureLeadingSlash(httpRequest.url)}`;
+        const managementApiUrl = httpRequest.url.endsWith(`/hostnames`)
+            ? this.managementApiUrlBase
+            : this.managementApiUrl;
+
+        httpRequest.url = `${managementApiUrl}${Utils.ensureLeadingSlash(httpRequest.url)}`;
+        httpRequest.url = Utils.addQueryParameter(httpRequest.url, `api-version=${this.managementApiVersion}`);
 
         let response: HttpResponse<T>;