apim-developer-portal4
Version:
API management developer portal
204 lines (179 loc) • 10 kB
HTML
<!-- ko if: working -->
<spinner class="fit"></spinner>
<!-- /ko -->
<!-- ko ifnot: working -->
<!-- ko if: operation -->
<div class="animation-fade-in">
<div class="operation-header">
<h2 class="operation-name" data-bind="click: $component.openConsole">
<span data-bind="text: operation().displayName"></span>
</h2>
<!-- ko if: $component.enableConsole -->
<button class="open-console-button" data-bind="click: $component.openConsole">Try it <i
class="icon icon-play"></i>
</button>
<!-- /ko -->
</div>
<!-- ko if: operation().description -->
<div class="text-word-break" data-bind="markdown: operation().description"></div>
<!-- /ko -->
<!-- ko if: tags().length > 0 -->
<div class="tag-group">
<!-- ko foreach: { data: $component.tags, as: 'tag' } -->
<span class="tag-item" role="group" data-bind="text: tag"></span>
<!-- /ko -->
</div>
<!-- /ko -->
<div class="collapsible">
<h3>Request</h3>
<div class="collapsible-container">
<span class="monospace"
data-bind="text: $component.requestUrlSample, attr: { 'data-method': operation().method }"></span>
<!-- ko if: operation().parameters.length > 0 -->
<h4>Request parameters</h4>
<div role="table" class="table-preset table-preset-params">
<div class="d-contents" role="rowgroup">
<div class="d-contents" role="row">
<div role="columnheader" class="table-preset-head text-truncate">Name</div>
<div role="columnheader" class="table-preset-head text-truncate">In</div>
<div role="columnheader" class="table-preset-head text-truncate">Required</div>
<div role="columnheader" class="table-preset-head text-truncate">Type</div>
<div role="columnheader" class="table-preset-head">Description</div>
</div>
</div>
<div class="d-contents" role="rowgroup">
<!-- ko foreach: { data: operation().parameters, as: 'parameter' } -->
<div class="d-contents" role="row">
<div role="cell" class="text-truncate monospace"
data-bind="text: parameter.name, attr: { title: parameter.name }"></div>
<div role="cell" class="text-truncate" data-bind="text: parameter.in"></div>
<div role="cell" class="text-truncate" data-bind="text: parameter.required"></div>
<div role="cell" class="text-truncate monospace" data-bind="text: parameter.type"></div>
<div role="cell" data-bind="markdown: parameter.description"></div>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- ko if: operation().request && operation().request.headers && operation().request.headers.length > 0 -->
<h4>Request headers</h4>
<div role="table" class="table-preset table-preset-headers">
<div class="d-contents" role="rowgroup">
<div class="d-contents" role="row">
<div role="columnheader" class="table-preset-head text-truncate">Name</div>
<div role="columnheader" class="table-preset-head text-truncate">Required</div>
<div role="columnheader" class="table-preset-head text-truncate">Type</div>
<div role="columnheader" class="table-preset-head">Description</div>
</div>
</div>
<div class="d-contents" role="rowgroup">
<!-- ko foreach: { data: operation().request.headers, as: 'header' } -->
<div class="d-contents" role="row">
<div role="cell" class="text-truncate monospace"
data-bind="text: header.name, attr: { title: header.name }"></div>
<div role="cell" class="text-truncate" data-bind="text: header.required"></div>
<div role="cell" class="text-truncate monospace"
data-bind="text: header.type, attr: { title: header.type }"></div>
<div role="cell" data-bind="markdown: header.description"></div>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- ko with: operation().request, as: 'request' -->
<!-- ko if: request.isMeaningful() -->
<h4>Request body</h4>
<!-- ko if: request.description -->
<div class="text-word-break" data-bind="markdown: request.description"></div>
<!-- /ko -->
<!-- ko if: request.meaningfulRepresentations().length > 0 -->
<div class="tabs" data-bind="foreach: { data: request.meaningfulRepresentations(), as: 'representation' }">
<input class="tab-radio" type="radio" name="requestContentType"
data-bind="attr : { id: 'request' + representation.contentType, checked: $index() === 0 }">
<label class="tab-label"
data-bind="attr : { for: 'request' + representation.contentType }, text: representation.contentType"></label>
<div class="tab-content">
<!-- ko if: representation.typeName -->
<type-definition
params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionForRepresentation(representation), defaultSchemaView: $component.defaultSchemaView }">
</type-definition>
<!-- /ko -->
<!-- ko ifnot: representation.typeName -->
<!-- ko if: representation.example -->
<code-sample params="{ content: representation.example, language: representation.exampleFormat }">
</code-sample>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<!-- ko foreach: { data: operation().getMeaningfulResponses(), as: 'response' } -->
<h3>Response: <span data-bind="text: response.statusCode"></span></h3>
<!-- ko if: response.description -->
<p data-bind="markdown: response.description"></p>
<!-- /ko -->
<!-- ko if: response.meaningfulRepresentations().length > 0 -->
<div class="tabs" data-bind="foreach: { data: meaningfulRepresentations(), as: 'representation' }">
<input class="tab-radio" type="radio"
data-bind="attr: { id: response.identifier + representation.contentType, name: response.identifier, checked: $index() === 0 }">
<label class="tab-label"
data-bind="attr: { for: response.identifier + representation.contentType }, text: representation.contentType"></label>
<div class="tab-content">
<!-- ko if: representation.typeName -->
<type-definition
params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionForRepresentation(representation), defaultSchemaView: $component.defaultSchemaView }">
</type-definition>
<!-- /ko -->
<!-- ko ifnot: representation.typeName -->
<!-- ko if: representation.example -->
<code-sample params="{ content: representation.example, language: representation.exampleFormat }">
</code-sample>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<!-- /ko -->
</div>
</div>
<!-- ko if: $component.definitions().length > 0 -->
<h3>Definitions</h3>
<div role="table" class="table-preset table-preset-definitions">
<div class="d-contents" role="rowgroup">
<div class="d-contents" role="row">
<div class="table-preset-head text-truncate" role="columnheader">Name</div>
<div class="table-preset-head text-truncate" role="columnheader">Description</div>
</div>
</div>
<div class="d-contents" role="rowgroup">
<!-- ko foreach: { data: definitions, as: 'definition' } -->
<div class="d-contents" role="row">
<div role="cell" class="text-truncate">
<a data-bind="text: definition.name, attr: { title: definition.name, href: $component.getDefinitionReferenceUrl(definition) }"></a>
</div>
<div role="cell" data-bind="markdown: definition.description"></div>
</div>
<!-- /ko -->
</div>
</div>
<!-- ko foreach: { data: definitions, as: 'definition' } -->
<type-definition
params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: definition, anchor: true, defaultSchemaView: $component.defaultSchemaView }">
</type-definition>
<!-- /ko -->
<!-- /ko -->
</div>
<!-- /ko -->
<!-- ko ifnot: operation -->
<p>No operation selected.</p>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: $component.consoleIsOpen -->
<div class="detachable-right scrollable flex-grow animation-fade-in">
<operation-console class="test flex flex-column"
params="{ api: api, operation: operation, hostnames: hostnames, authorizationServer: associatedAuthServer }">
</operation-console>
</div>
<!-- /ko -->