Added support for multiple hostnames to Test console. (#603)

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>

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

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,15 +78,14 @@ export class OperationDetails {
 
     @OnMounted()
     public async initialize(): Promise<void> {
-        await this.loadGatewayInfo();
-
         const apiName = this.routeHelper.getApiName();
         const operationName = this.routeHelper.getOperationName();
 
         this.selectedApiName(apiName);
         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);
     }
 

src/contracts/hostname.ts

@@ -0,0 +1,4 @@
+export interface Hostname {
+    id: string;
+    value: string;
+}