kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into bug/3072-error-response-fixes

Browse Source
This commit is contained in:
shockey
2017-06-29 17:20:09 -07:00
committed by GitHub
parent 61d874d484 2f07a61e0c
commit afaa5619bb
19 changed files with 411 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/core/components/live-response.jsx
View File

@@ -8,19 +8,32 @@ 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")
@@ -28,6 +41,7 @@ export default class LiveResponse extends React.Component {
const notDocumented = response.get("notDocumented")
const isError = response.get("error")
const body = response.get("text")
const duration = response.get("duration")
const headersKeys = Object.keys(headers)
const contentType = headers["content-type"]
@@ -78,6 +92,9 @@ export default class LiveResponse extends React.Component {
{
hasHeaders ? <Headers headers={ returnObject }/> : null
}
{
displayRequestDuration && duration ? <Duration duration={ duration } /> : null
}
</td>
</tr>
</tbody>

30
src/core/components/model.jsx
View File

@@ -117,12 +117,13 @@ class ObjectModel extends Component {
class Primitive extends Component {
static propTypes = {
schema: PropTypes.object.isRequired,
name: PropTypes.string,
getComponent: PropTypes.func.isRequired,
required: PropTypes.bool
}
render(){
let { schema, getComponent, required } = this.props
let { schema, getComponent, name, required } = this.props
if(!schema || !schema.get) {
// don't render if schema isn't correctly formed
@@ -133,12 +134,18 @@ class Primitive extends Component {
let format = schema.get("format")
let xml = schema.get("xml")
let enumArray = schema.get("enum")
let title = schema.get("title") || name
let description = schema.get("description")
let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 )
let style = required ? { fontWeight: "bold" } : {}
const Markdown = getComponent("Markdown")
return <span className="prop">
return <span className="model">
{
title && <span className="model-title" style={{ marginRight: "2em" }}>
<span className="model-title__text">{ title }</span>
</span>
}
<span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>}
{ format && <span className="prop-format">(${format})</span>}
{
@@ -176,17 +183,20 @@ class ArrayModel extends Component {
}
render(){
let { required, schema, depth, expandDepth } = this.props
let { required, schema, depth, name, expandDepth } = this.props
let items = schema.get("items")
let title = schema.get("title") || name
let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 )
return <span className="model">
<span className="model-title">
<span className="model-title__text">{ schema.get("title") }</span>
</span>
{
title && <span className="model-title">
<span className="model-title__text">{ title }</span>
</span>
}
<Collapse collapsed={ depth > expandDepth } collapsedContent="[...]">
[
<span><Model { ...this.props } schema={ items } required={ false }/></span>
<span><Model { ...this.props } name="" schema={ items } required={ false }/></span>
]
{
properties.size ? <span>
@@ -249,13 +259,13 @@ class Model extends Component {
name={ name || modelName }
isRef={ isRef!== undefined ? isRef : !!$$ref }/>
case "array":
return <ArrayModel className="array" { ...this.props } schema={ modelSchema } required={ required } />
return <ArrayModel className="array" { ...this.props } schema={ modelSchema } name={ name || modelName } required={ required } />
case "string":
case "number":
case "integer":
case "boolean":
default:
return <Primitive getComponent={ getComponent } schema={ modelSchema } required={ required }/>
return <Primitive { ...this.props } getComponent={ getComponent } schema={ modelSchema } name={ name || modelName } required={ required }/>
}
}
}

4
src/core/components/models.jsx
View File

@@ -24,8 +24,8 @@ export default class Models extends Component {
return <section className={ showModels ? "models is-open" : "models"}>
<h4 onClick={() => layoutActions.show("models", !showModels)}>
<span>Models</span>
<svg width="20" height="20">
<use xlinkHref="#large-arrow" />
<svg className="arrow" width="20" height="20">
<use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
</svg>
</h4>
<Collapse isOpened={showModels} animated>

9
src/core/components/operation.jsx
View File

@@ -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,
@@ -126,6 +128,7 @@ export default class Operation extends PureComponent {
let schemes = operation.get("schemes")
let parameters = getList(operation, ["parameters"])
let operationId = operation.get("__originalOperationId")
let operationScheme = specSelectors.operationScheme(path, method)
const Responses = getComponent("responses")
const Parameters = getComponent( "parameters" )
@@ -211,7 +214,8 @@ export default class Operation extends PureComponent {
<Schemes schemes={ schemes }
path={ path }
method={ method }
specActions={ specActions }/>
specActions={ specActions }
operationScheme={ operationScheme } />
</div> : null
}
@@ -250,6 +254,7 @@ export default class Operation extends PureComponent {
produces={ produces }
producesValue={ operation.get("produces_value") }
pathMethod={ [path, method] }
displayRequestDuration={ displayRequestDuration }
fn={fn} />
}
</div>

3
src/core/components/operations.jsx
View File

@@ -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 }

16
src/core/components/response.jsx
View File

@@ -5,14 +5,16 @@ import { getSampleSchema } from "core/utils"
const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
if ( examples && examples.size ) {
return examples.entrySeq().map( ([ key, example ]) => {
let exampleValue
try {
exampleValue = example && example.toJS ? example.toJS() : example
exampleValue = JSON.stringify(exampleValue, null, 2)
}
catch(e) {
exampleValue = String(example)
let exampleValue = example
if ( example.toJS ) {
try {
exampleValue = JSON.stringify(example.toJS(), null, 2)
}
catch(e) {
exampleValue = String(example)
}
}
return (<div key={ key }>
<h5>{ key }</h5>
<HighlightCode className="example" value={ exampleValue } />

9
src/core/components/responses.jsx
View File

@@ -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>

12
src/core/components/schemes.jsx
View File

@@ -6,7 +6,8 @@ export default class Schemes extends React.Component {
specActions: PropTypes.object.isRequired,
schemes: PropTypes.object.isRequired,
path: PropTypes.string,
method: PropTypes.string
method: PropTypes.string,
operationScheme: PropTypes.string
}
componentWillMount() {
@@ -16,11 +17,18 @@ export default class Schemes extends React.Component {
this.setScheme(schemes.first())
}
componentWillReceiveProps(nextProps) {
if ( this.props.operationScheme && !nextProps.schemes.has(this.props.operationScheme) ) {
//fire 'change' event if our selected scheme is no longer an option
this.setScheme(nextProps.schemes.first())
}
}
onChange =( e ) => {
this.setScheme( e.target.value )
}
setScheme =( value ) => {
setScheme = ( value ) => {
let { path, method, specActions } = this.props
specActions.setScheme( value, path, method )

6
src/core/index.js
View File

@@ -6,9 +6,9 @@ import ApisPreset from "core/presets/apis"
import * as AllPlugins from "core/plugins/all"
import { parseSeach, filterConfigs } from "core/utils"
const CONFIGS = [ "url", "spec", "validatorUrl", "onComplete", "onFailure", "authorizations", "docExpansion",
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
@@ -23,12 +23,14 @@ module.exports = function SwaggerUI(opts) {
dom_id: null,
spec: {},
url: "",
urls: null,
layout: "BaseLayout",
docExpansion: "list",
validatorUrl: "https://online.swagger.io/validator",
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.

2
src/core/plugins/samples/fn.js
View File

@@ -9,7 +9,7 @@ const primitives = {
"number": () => 0,
"number_float": () => 0.0,
"integer": () => 0,
"boolean": () => true
"boolean": (schema) => typeof schema.default === "boolean" ? schema.default : true
}
const primitive = (schema) => {

8
src/core/plugins/spec/actions.js
View File

@@ -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) } ) )
}

15
src/core/utils.js
View File

@@ -450,15 +450,15 @@ export const propChecker = (props, nextProps, objectList=[], ignoreList=[]) => {
|| objectList.some( objectPropName => !eq(props[objectPropName], nextProps[objectPropName])))
}
const validateNumber = ( val ) => {
if ( !/^-?\d+(.?\d+)?$/.test(val)) {
export const validateNumber = ( val ) => {
if ( !/^-?\d+(\.?\d+)?$/.test(val)) {
return "Value must be a number"
}
}
const validateInteger = ( val ) => {
export const validateInteger = ( val ) => {
if ( !/^-?\d+$/.test(val)) {
return "Value must be integer"
return "Value must be an integer"
}
}
@@ -469,13 +469,14 @@ export const validateParam = (param, isXml) => {
let required = param.get("required")
let type = param.get("type")
if ( required && (!value || (type==="array" && Array.isArray(value) && !value.length ))) {
let stringCheck = type === "string" && !value
let arrayCheck = type === "array" && Array.isArray(value) && !value.length
let listCheck = type === "array" && Im.List.isList(value) && !value.count()
if ( required && (stringCheck || arrayCheck || listCheck) ) {
errors.push("Required field is not provided")
return errors
}
if ( !value ) return errors
if ( type === "number" ) {
let err = validateNumber(value)
if (!err) return errors

116
src/plugins/topbar/topbar.jsx
View File

@@ -7,7 +7,7 @@ export default class Topbar extends React.Component {
constructor(props, context) {
super(props, context)
this.state = { url: props.specSelectors.url() }
this.state = { url: props.specSelectors.url(), selectedIndex: 0 }
}
componentWillReceiveProps(nextProps) {
@@ -19,14 +19,68 @@ export default class Topbar extends React.Component {
this.setState({url: value})
}
downloadUrl = (e) => {
this.props.specActions.updateUrl(this.state.url)
this.props.specActions.download(this.state.url)
loadSpec = (url) => {
this.props.specActions.updateUrl(url)
this.props.specActions.download(url)
}
onUrlSelect =(e)=> {
let url = e.target.value || e.target.href
this.loadSpec(url)
this.setSelectedUrl(url)
e.preventDefault()
}
downloadUrl = (e) => {
this.loadSpec(this.state.url)
e.preventDefault()
}
setSelectedUrl = (selectedUrl) => {
const configs = this.props.getConfigs()
const urls = configs.urls || []
if(urls && urls.length) {
if(selectedUrl)
{
urls.forEach((spec, i) => {
if(spec.url === selectedUrl)
{
this.setState({selectedIndex: i})
}
})
}
}
}
componentWillMount() {
const configs = this.props.getConfigs()
const urls = configs.urls || []
if(urls && urls.length) {
let primaryName = configs["urls.primaryName"]
if(primaryName)
{
urls.forEach((spec, i) => {
if(spec.name === primaryName)
{
this.setState({selectedIndex: i})
}
})
}
}
}
componentDidMount() {
const urls = this.props.getConfigs().urls || []
if(urls && urls.length) {
this.loadSpec(urls[this.state.selectedIndex].url)
}
}
render() {
let { getComponent, specSelectors } = this.props
let { getComponent, specSelectors, getConfigs } = this.props
const Button = getComponent("Button")
const Link = getComponent("Link")
@@ -36,22 +90,45 @@ export default class Topbar extends React.Component {
let inputStyle = {}
if(isFailed) inputStyle.color = "red"
if(isLoading) inputStyle.color = "#aaa"
const { urls } = getConfigs()
let control = []
let formOnSubmit = null
if(urls) {
let rows = []
urls.forEach((link, i) => {
rows.push(<option key={i} value={link.url}>{link.name}</option>)
})
control.push(
<label className="select-label" htmlFor="select"><span>Select a spec</span>
<select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
{rows}
</select>
</label>
)
}
else {
formOnSubmit = this.downloadUrl
control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
}
return (
<div className="topbar">
<div className="wrapper">
<div className="topbar-wrapper">
<Link href="#" title="Swagger UX">
<img height="30" width="30" src={ Logo } alt="Swagger UX"/>
<span>swagger</span>
</Link>
<form className="download-url-wrapper" onSubmit={this.downloadUrl}>
<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />
<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>
</form>
</div>
<div className="topbar">
<div className="wrapper">
<div className="topbar-wrapper">
<Link href="#" title="Swagger UX">
<img height="30" width="30" src={ Logo } alt="Swagger UX"/>
<span>swagger</span>
</Link>
<form className="download-url-wrapper" onSubmit={formOnSubmit}>
{control}
</form>
</div>
</div>
</div>
)
}
}
@@ -59,5 +136,6 @@ export default class Topbar extends React.Component {
Topbar.propTypes = {
specSelectors: PropTypes.object.isRequired,
specActions: PropTypes.object.isRequired,
getComponent: PropTypes.func.isRequired
getComponent: PropTypes.func.isRequired,
getConfigs: PropTypes.func.isRequired
}

3
src/plugins/topbar/topbar.less
View File

@@ -1,11 +1,10 @@
.swagger-ui {
.topbar {
background-color: #89bf04;
}
.topbar-wrapper {
padding: 0.7em
padding: 0.7em;
}
.topbar-logo__img {

7
src/style/_models.scss
View File

@@ -95,14 +95,7 @@ section.models
h4
{
margin: 0 0 5px 0;
border-bottom: 1px solid rgba(#3b4151, .3);
svg
{
transform: rotate(90deg);
}
}
}
h4

39
src/style/_topbar.scss
View File

@@ -6,7 +6,6 @@
.topbar-wrapper
{
display: flex;
align-items: center;
}
a
@@ -15,13 +14,13 @@
font-weight: bold;
display: flex;
align-items: center;
flex: 1;
max-width: 300px;
text-decoration: none;
flex: 1;
align-items: center;
@include text_headline(#fff);
span
@@ -34,8 +33,8 @@
.download-url-wrapper
{
display: flex;
flex: 3;
justify-content: flex-end;
input[type=text]
{
@@ -48,6 +47,38 @@
outline: none;
}
.select-label
{
display: flex;
align-items: center;
width: 100%;
max-width: 600px;
margin: 0;
span
{
font-size: 16px;
flex: 1;
padding: 0 10px 0 0;
text-align: right;
}
select
{
flex: 2;
width: 100%;
border: 2px solid #547f00;
outline: none;
box-shadow: none;
}
}
.download-url-button
{
font-size: 16px;