#3135 - Add request duration to response detailsbubble
@@ -143,6 +143,7 @@ parameterMacro | MUST be a function. Function to set default value to parameters | |||
modelPropertyMacro | MUST be a function. Function to set default values to each property in model. Accepts one argument modelPropertyMacro(property), property is immutable | |||
docExpansion | Controls the default expansion setting for the operations and tags. It can be 'list' (expands only the tags), 'full' (expands the tags and operations) or 'none' (expands nothing). The default is 'list'. | |||
displayOperationId | Controls the display of operationId in operations list. The default is `false`. | |||
displayRequestDuration | Controls the display of the request duration (in milliseconds) for `Try it out` requests. The default is `false`. | |||
### Plugins | |||
@@ -8,25 +8,39 @@ const Headers = ( { headers } )=>{ | |||
<pre>{headers}</pre> | |||
</div>) | |||
} | |||
Headers.propTypes = { | |||
headers: PropTypes.array.isRequired | |||
} | |||
const Duration = ( { duration } ) => { | |||
return ( | |||
<div> | |||
<h5>Request duration</h5> | |||
<pre>{duration} ms</pre> | |||
</div> | |||
) | |||
} | |||
Duration.propTypes = { | |||
duration: PropTypes.number.isRequired | |||
} | |||
export default class LiveResponse extends React.Component { | |||
static propTypes = { | |||
response: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired | |||
getComponent: PropTypes.func.isRequired, | |||
displayRequestDuration: PropTypes.bool.isRequired | |||
} | |||
render() { | |||
const { request, response, getComponent } = this.props | |||
const { request, response, getComponent, displayRequestDuration } = this.props | |||
const status = response.get("status") | |||
const url = response.get("url") | |||
const headers = response.get("headers").toJS() | |||
const notDocumented = response.get("notDocumented") | |||
const isError = response.get("error") | |||
const duration = response.get("duration") | |||
const body = isError ? response.get("response").get("text") : response.get("text") | |||
@@ -80,6 +94,9 @@ export default class LiveResponse extends React.Component { | |||
{ | |||
hasHeaders ? <Headers headers={ returnObject }/> : null | |||
} | |||
{ | |||
displayRequestDuration && duration ? <Duration duration={ duration } /> : null | |||
} | |||
</td> | |||
</tr> | |||
</tbody> | |||
@@ -17,6 +17,7 @@ export default class Operation extends PureComponent { | |||
allowTryItOut: PropTypes.bool, | |||
displayOperationId: PropTypes.bool, | |||
displayRequestDuration: PropTypes.bool, | |||
response: PropTypes.object, | |||
request: PropTypes.object, | |||
@@ -37,6 +38,7 @@ export default class Operation extends PureComponent { | |||
response: null, | |||
allowTryItOut: true, | |||
displayOperationId: false, | |||
displayRequestDuration: false | |||
} | |||
constructor(props, context) { | |||
@@ -107,7 +109,7 @@ export default class Operation extends PureComponent { | |||
request, | |||
allowTryItOut, | |||
displayOperationId, | |||
displayRequestDuration, | |||
fn, | |||
getComponent, | |||
specActions, | |||
@@ -252,6 +254,7 @@ export default class Operation extends PureComponent { | |||
produces={ produces } | |||
producesValue={ operation.get("produces_value") } | |||
pathMethod={ [path, method] } | |||
displayRequestDuration={ displayRequestDuration } | |||
fn={fn} /> | |||
} | |||
</div> | |||
@@ -32,7 +32,7 @@ export default class Operations extends React.Component { | |||
const Collapse = getComponent("Collapse") | |||
let showSummary = layoutSelectors.showSummary() | |||
let { docExpansion, displayOperationId } = getConfigs() | |||
let { docExpansion, displayOperationId, displayRequestDuration } = getConfigs() | |||
return ( | |||
<div> | |||
@@ -87,6 +87,7 @@ export default class Operations extends React.Component { | |||
allowTryItOut={allowTryItOut} | |||
displayOperationId={displayOperationId} | |||
displayRequestDuration={displayRequestDuration} | |||
specActions={ specActions } | |||
specSelectors={ specSelectors } | |||
@@ -14,19 +14,21 @@ export default class Responses extends React.Component { | |||
specSelectors: PropTypes.object.isRequired, | |||
specActions: PropTypes.object.isRequired, | |||
pathMethod: PropTypes.array.isRequired, | |||
displayRequestDuration: PropTypes.bool.isRequired, | |||
fn: PropTypes.object.isRequired | |||
} | |||
static defaultProps = { | |||
request: null, | |||
tryItOutResponse: null, | |||
produces: fromJS(["application/json"]) | |||
produces: fromJS(["application/json"]), | |||
displayRequestDuration: false | |||
} | |||
onChangeProducesWrapper = ( val ) => this.props.specActions.changeProducesValue(this.props.pathMethod, val) | |||
render() { | |||
let { responses, request, tryItOutResponse, getComponent, specSelectors, fn, producesValue } = this.props | |||
let { responses, request, tryItOutResponse, getComponent, specSelectors, fn, producesValue, displayRequestDuration } = this.props | |||
let defaultCode = defaultStatusCode( responses ) | |||
const ContentType = getComponent( "contentType" ) | |||
@@ -53,7 +55,8 @@ export default class Responses extends React.Component { | |||
: <div> | |||
<LiveResponse request={ request } | |||
response={ tryItOutResponse } | |||
getComponent={ getComponent } /> | |||
getComponent={ getComponent } | |||
displayRequestDuration={ displayRequestDuration } /> | |||
<h4>Responses</h4> | |||
</div> | |||
@@ -8,7 +8,7 @@ import { parseSeach, filterConfigs } from "core/utils" | |||
const CONFIGS = [ "url", "urls", "urls.primaryName", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion", | |||
"apisSorter", "operationsSorter", "supportedSubmitMethods", "dom_id", "defaultModelRendering", "oauth2RedirectUrl", | |||
"showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" ] | |||
"showRequestHeaders", "custom", "modelPropertyMacro", "parameterMacro", "displayOperationId" , "displayRequestDuration"] | |||
// eslint-disable-next-line no-undef | |||
const { GIT_DIRTY, GIT_COMMIT, PACKAGE_VERSION } = buildInfo | |||
@@ -30,6 +30,7 @@ module.exports = function SwaggerUI(opts) { | |||
configs: {}, | |||
custom: {}, | |||
displayOperationId: false, | |||
displayRequestDuration: false, | |||
// Initial set of plugins ( TODO rename this, or refactor - we don't need presets _and_ plugins. Its just there for performance. | |||
// Instead, we can compile the first plugin ( it can be a collection of plugins ), then batch the rest. | |||
@@ -207,8 +207,14 @@ export const executeRequest = (req) => ({fn, specActions, specSelectors}) => { | |||
specActions.setRequest(req.pathName, req.method, parsedRequest) | |||
// track duration of request | |||
const startTime = Date.now() | |||
return fn.execute(req) | |||
.then( res => specActions.setResponse(req.pathName, req.method, res)) | |||
.then( res => { | |||
res.duration = Date.now() - startTime | |||
specActions.setResponse(req.pathName, req.method, res) | |||
} ) | |||
.catch( err => specActions.setResponse(req.pathName, req.method, { error: true, err: serializeError(err) } ) ) | |||
} | |||