Skip to content

Commit

Permalink
Added support for wildcard hostnames in Test console. (#681)
Browse files Browse the repository at this point in the history
  • Loading branch information
@azaslonov
azaslonov authored Jun 5, 2020
1 parent f25377c commit b3df817
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 48 deletions.
99 changes: 56 additions & 43 deletions src/components/operations/operation-details/ko/runtime/operation-console.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -36,11 +36,13 @@ <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" />
<label for="hostname" class="text-monospace form-label">
Hostname
</label>
</div>
<div class="col-6">
<div class="form-group">
<select id="hostnames" class="form-control" data-bind="value: $component.requestHostname">
<select id="hostname" class="form-control" data-bind="value: $component.selectedHostname">
<!-- ko foreach: { data: $component.hostnames, as: 'hostname' } -->
<option data-bind="value: hostname, text: hostname"></option>
<!-- /ko -->
Expand All @@ -50,11 +52,30 @@ <h3>Host</h3>
</div>
<!-- /ko -->

<!-- ko if: $component.isHostnameWildcarded -->
<div class="row flex flex-row">
<div class="col-4">
<label for="wildcardSegment" class="text-monospace form-label">
Wildcard segment
</label>
</div>
<div class="col-6">
<div class="form-group">
<input id="wildcardSegment" type="text" autocomplete="off" class="form-control form-control-sm"
placeholder="name" spellcheck="false"
data-bind="event: { keyup: $component.updateRequestSummary }, textInput: $component.wildcardSegment">
</div>
</div>
</div>
<!-- /ko -->

<h3>Authorization</h3>

<div class="row flex flex-row">
<div class="col-4">
<input type="text" readonly class="form-control form-control-sm" value="Subscription key" />
<label for="subscriptionKey" class="text-monospace form-label">
Subscription key
</label>
</div>
<div class="col-6">
<div class="form-group">
Expand All @@ -71,37 +92,31 @@ <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>
</div>

<h4>Parameters</h4>
<h3>Parameters</h3>
<!-- ko if: (templateParameters && templateParameters().length > 0) || (request.queryParameters && request.queryParameters().length > 0) -->
<div data-bind="foreach: { data: templateParameters, as: 'parameter' }">
<div class="row flex flex-row">
<div class="col-4">
<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">
<span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
</div>
</div>
<label class="text-monospace form-label" data-bind="text: parameter.name">
</label>
</div>
<div class="col-6">
<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 -->
Expand All @@ -115,7 +130,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>
Expand All @@ -124,12 +139,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>
Expand All @@ -155,7 +170,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>
Expand All @@ -164,18 +179,16 @@ <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 -->


</div>
</div>
<div class="col-2">
Expand All @@ -196,24 +209,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>
<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>
<!-- /ko -->
</div>
<!-- /ko -->
Expand All @@ -223,55 +236,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>
Expand All @@ -281,7 +294,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>
Expand Down
20 changes: 16 additions & 4 deletions src/components/operations/operation-details/ko/runtime/operation-console.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@ 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 selectedHostname: ko.Observable<string>;
public readonly isHostnameWildcarded: ko.Computed<boolean>;
public readonly hostnameSelectionEnabled: ko.Observable<boolean>;
public readonly wildcardSegment: ko.Observable<string>;
public masterKey: string;
public isConsumptionMode: boolean;
public templates: Object;
Expand Down Expand Up @@ -78,8 +80,11 @@ export class OperationConsole {
this.codeSample = ko.observable();
this.selectedProduct = ko.observable();
this.onFileSelect = this.onFileSelect.bind(this);
this.requestHostname = ko.observable();
this.selectedHostname = ko.observable("");
this.hostnameSelectionEnabled = ko.observable();
this.isHostnameWildcarded = ko.computed(() => this.selectedHostname().includes("*"));

this.wildcardSegment = ko.observable();

validation.rules["maxFileSize"] = {
validator: (file: File, maxSize: number) => !file || file.size < maxSize,
Expand Down Expand Up @@ -115,7 +120,14 @@ export class OperationConsole {

await this.resetConsole();

this.requestHostname.subscribe(this.setHostname);
this.selectedHostname.subscribe(this.setHostname);
this.wildcardSegment.subscribe((wildcardSegment) => {
const hostname = wildcardSegment
? this.selectedHostname().replace("*", wildcardSegment)
: this.selectedHostname();

this.setHostname(hostname);
});
this.selectedSubscriptionKey.subscribe(this.applySubscriptionKey.bind(this));
this.api.subscribe(this.resetConsole);
this.operation.subscribe(this.resetConsole);
Expand Down Expand Up @@ -148,7 +160,7 @@ export class OperationConsole {
this.hostnameSelectionEnabled(this.hostnames()?.length > 1);

const hostname = hostnames[0];
this.requestHostname(hostname);
this.selectedHostname(hostname);

this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
consoleOperation.host.hostname(hostname);
Expand Down
4 changes: 4 additions & 0 deletions src/themes/website/styles/forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ $switch-trigger-size: $switch-height - $switch-trigger-gap * 2;
}
}

.form-label {
padding: .375rem .75rem;
}

.form-control {
display: block;
width: 100%;
Expand Down
1 change: 0 additions & 1 deletion src/themes/website/styles/reboot.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,6 @@ th {
}
label {
display: inline-block;
margin-bottom: 0.5rem;
}
button {
border-radius: 0;
Expand Down
4 changes: 4 additions & 0 deletions src/themes/website/styles/utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,8 @@
text-shadow: none;
background-color: transparent;
border: 0;
}

.text-monospace {
font-family: monospace;
}

0 comments on commit b3df817

Please sign in to comment.