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

Merge pull request #17 from chirino/master

Browse Source 
Support a relative url path to the service & Support deeply nested resources.
This commit is contained in:
Zeke Sikelianos
2012-04-04 10:46:32 -07:00
parent d498255d7c bbcb230b20
commit 75d7758c53
4 changed files with 104 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
build/index.html
View File

@@ -14,20 +14,20 @@
</head> </head>
<body> <body>
<div id='header'> <div id='header'>
<a id="logo" href="http://swagger.wordnik.com">swagger</a> <a href="http://swagger.wordnik.com" id="logo">swagger</a>
<form id='api_selector'> <form id='api_selector'>
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text" /></div> <div class='input'><input type="text" placeholder="http://example.com/api" name="baseUrl" id="input_baseUrl" /></div>
<div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text" /></div> <div class='input'><input type="text" placeholder="api_key" name="apiKey" id="input_apiKey" /></div>
<div class='input'><a id="explore" href="#">Explore</a></div> <div class='input'><a href="#" id="explore">Explore</a></div>
</form> </form>
</div> </div>
<div class='container' id='resources_container'> <div class='container' id='resources_container'>
<ul id='resources'></ul> <ul id='resources'></ul>
</div> </div>
<script id="resourceTemplate" type="text/x-jquery-tmpl"><li class='resource' id='resource_${name}'> <script type="text/x-jquery-tmpl" id="resourceTemplate"><li class='resource' id='resource_${name}'>
<div class='heading'> <div class='heading'>
<h2> <h2>
<a href='#!/${name}' onclick="Docs.toggleEndpointListForResource('${name}');">${name}</a> <a href='#!/${name}' onclick="Docs.toggleEndpointListForResource('${name}');">${path}</a>
</h2> </h2>
<ul class='options'> <ul class='options'>
<li> <li>
@@ -51,11 +51,11 @@
<ul class='endpoints' id='${name}_endpoint_list' style='display:none'></ul> <ul class='endpoints' id='${name}_endpoint_list' style='display:none'></ul>
</li> </li>
</script> </script>
<script id="apiTemplate" type="text/x-jquery-tmpl"><li class='endpoint'> <script type="text/x-jquery-tmpl" id="apiTemplate"><li class='endpoint'>
<ul class='operations' id='${name}_endpoint_operations'></ul> <ul class='operations' id='${name}_endpoint_operations'></ul>
</li> </li>
</script> </script>
<script id="operationTemplate" type="text/x-jquery-tmpl"><li class='${httpMethodLowercase} operation' id='${apiName}_${nickname}_${httpMethod}'> <script type="text/x-jquery-tmpl" id="operationTemplate"><li class='${httpMethodLowercase} operation' id='${apiName}_${nickname}_${httpMethod}'>
<div class='heading'> <div class='heading'>
<h3> <h3>
<span class='http_method'> <span class='http_method'>
@@ -108,7 +108,7 @@
</div> </div>
</li> </li>
</script> </script>
<script id="paramTemplate" type="text/x-jquery-tmpl"><tr> <script type="text/x-jquery-tmpl" id="paramTemplate"><tr>
<td class='code'>${name}</td> <td class='code'>${name}</td>
<td> <td>
<input minlength='0' name='${name}' placeholder='' type='text' value='' /> <input minlength='0' name='${name}' placeholder='' type='text' value='' />
@@ -116,7 +116,7 @@
<td width='500'>${description}</td> <td width='500'>${description}</td>
</tr> </tr>
</script> </script>
<script id="paramTemplateSelect" type="text/x-jquery-tmpl"><tr> <script type="text/x-jquery-tmpl" id="paramTemplateSelect"><tr>
<td class='code'>${name}</td> <td class='code'>${name}</td>
<td> <td>
<select name='${name}'> <select name='${name}'>
@@ -135,7 +135,7 @@
<td width='500'>${description}</td> <td width='500'>${description}</td>
</tr> </tr>
</script> </script>
<script id="paramTemplateRequired" type="text/x-jquery-tmpl"><tr> <script type="text/x-jquery-tmpl" id="paramTemplateRequired"><tr>
<td class='code required'>${name}</td> <td class='code required'>${name}</td>
<td> <td>
<input class='required' minlength='1' name='${name}' placeholder='(required)' type='text' value='' /> <input class='required' minlength='1' name='${name}' placeholder='(required)' type='text' value='' />
@@ -145,13 +145,13 @@
</td> </td>
</tr> </tr>
</script> </script>
<script id="paramTemplateRequiredReadOnly" type="text/x-jquery-tmpl"><tr> <script type="text/x-jquery-tmpl" id="paramTemplateRequiredReadOnly"><tr>
<td class='code required'>${name}</td> <td class='code required'>${name}</td>
<td>-</td> <td>-</td>
<td width='500'>${description}</td> <td width='500'>${description}</td>
</tr> </tr>
</script> </script>
<script id="paramTemplateReadOnly" type="text/x-jquery-tmpl"><tr> <script type="text/x-jquery-tmpl" id="paramTemplateReadOnly"><tr>
<td class='code'>${name}</td> <td class='code'>${name}</td>
<td>-</td> <td>-</td>
<td width='500'>${description}</td> <td width='500'>${description}</td>

136
build/javascripts/swagger-service.js
View File

@@ -1,19 +1,17 @@
function SwaggerService(baseUrl, _apiKey, statusCallback) { function SwaggerService(discoveryUrl, _apiKey, statusCallback) {
if (!baseUrl) if (!discoveryUrl)
throw new Error("baseUrl must be passed while creating SwaggerService"); throw new Error("discoveryUrl must be passed while creating SwaggerService");
// constants // constants
baseUrl = jQuery.trim(baseUrl); discoveryUrl = jQuery.trim(discoveryUrl);
if (baseUrl.length == 0) if (discoveryUrl.length == 0)
throw new Error("baseUrl must be passed while creating SwaggerService"); throw new Error("discoveryUrl must be passed while creating SwaggerService");
if (! (baseUrl.toLowerCase().indexOf("http:") == 0 || baseUrl.toLowerCase().indexOf("https:") == 0)) { if ( discoveryUrl.indexOf("/")!=0 && ! (discoveryUrl.toLowerCase().indexOf("http:") == 0 || discoveryUrl.toLowerCase().indexOf("https:") == 0)) {
baseUrl = ("http://" + baseUrl); discoveryUrl = ("http://" + discoveryUrl);
} }
var apiHost = baseUrl.substr(0, baseUrl.lastIndexOf("/")); var globalBasePath = null;
var discoParts = baseUrl.split("/");
var rootResourcesApiName = discoParts[discoParts.length-1];
var formatString = ".{format}"; var formatString = ".{format}";
var statusListener = statusCallback; var statusListener = statusCallback;
var apiKey = _apiKey; var apiKey = _apiKey;
@@ -37,13 +35,17 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
statusListener(status); statusListener(status);
} }
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
// make some models public // make some models public
this.ApiResource = function() { this.ApiResource = function() {
return ApiResource; return ApiResource;
}; };
this.apiHost = function() { this.apiHost = function() {
return apiHost; return globalBasePath;
}; };
this.formatString = function() { this.formatString = function() {
@@ -55,24 +57,22 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
ApiResource.include({ ApiResource.include({
path_json: null, path_json: null,
path_xml: null, path_xml: null,
init: function(atts) { init: function(atts) {
if (atts) this.load(atts); if (atts) this.load(atts);
this.name = this.path.replace(".{format}", "").replace(/\//g, "_");
this.path_json = this.path.replace("{format}", "json"); this.path_json = this.path.replace("{format}", "json");
this.path_xml = this.path.replace("{format}", "xml"); this.path_xml = this.path.replace("{format}", "xml");
this.baseUrl = apiHost; this.baseUrl = globalBasePath;
//execluded 9 letters to remove .{format} from name
this.name = this.path.split("/");
this.name = this.name[this.name.length - 1];
this.name = this.name.replace(".{format}",'').replace(/\//g, "_");
// this.name = this.path.substr(1, this.path.length - formatString.length - 1).replace(/\//g, "_");
this.apiList = Api.sub(); this.apiList = Api.sub();
this.modelList = ApiModel.sub(); this.modelList = ApiModel.sub();
}, },
addApis: function(apiObjects) { addApis: function(apiObjects, basePath) {
// log("apiObjects: %o", apiObjects); // log("apiObjects: %o", apiObjects);
this.apiList.createAll(apiObjects); this.apiList.createAll(apiObjects);
this.apiList.each(function(api) {
api.setBaseUrl(basePath);
});
}, },
addModel: function(modelObject) { addModel: function(modelObject) {
@@ -90,7 +90,8 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
init: function(atts) { init: function(atts) {
if (atts) this.load(atts); if (atts) this.load(atts);
this.baseUrl = apiHost; var sep = this.path.lastIndexOf("/");
this.name = this.path.substr(0, sep).replace(".{format}", "").replace(/\//g, "_");
var secondPathSeperatorIndex = this.path.indexOf("/", 1); var secondPathSeperatorIndex = this.path.indexOf("/", 1);
if (secondPathSeperatorIndex > 0) { if (secondPathSeperatorIndex > 0) {
@@ -99,21 +100,9 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
// log(this.path + ":: " + prefix + "..." + suffix); // log(this.path + ":: " + prefix + "..." + suffix);
this.path_json = prefix.replace("{format}", "json") + suffix; this.path_json = prefix.replace("{format}", "json") + suffix;
this.path_xml = prefix.replace("{format}", "xml") + suffix;; this.path_xml = prefix.replace("{format}", "xml") + suffix;;
if (this.path.indexOf("/") == 0) {
this.name = this.path.substr(1, secondPathSeperatorIndex - formatString.length - 1);
} else {
this.name = this.path.substr(0, secondPathSeperatorIndex - formatString.length - 1);
}
} else { } else {
this.path_json = this.path.replace("{format}", "json"); this.path_json = this.path.replace("{format}", "json");
this.path_xml = this.path.replace("{format}", "xml"); this.path_xml = this.path.replace("{format}", "xml");
if (this.path.indexOf("/") == 0) {
this.name = this.path.substr(1, this.path.length - formatString.length - 1);
} else {
this.name = this.path.substr(0, this.path.length - formatString.length - 1);
}
} }
var value = this.operations; var value = this.operations;
@@ -136,6 +125,13 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
}, },
setBaseUrl: function(u) {
this.baseUrl = u;
this.operations.each(function(o) {
o.baseUrl = u;
});
},
toString: function() { toString: function() {
var opsString = ""; var opsString = "";
for (var i = 0; i < this.operations.all().length; i++) { for (var i = 0; i < this.operations.all().length; i++) {
@@ -157,7 +153,6 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
init: function(atts) { init: function(atts) {
if (atts) this.load(atts); if (atts) this.load(atts);
this.baseUrl = apiHost;
this.httpMethodLowercase = this.httpMethod.toLowerCase(); this.httpMethodLowercase = this.httpMethod.toLowerCase();
var value = this.parameters; var value = this.parameters;
@@ -355,6 +350,8 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
var ModelController = Spine.Controller.create({ var ModelController = Spine.Controller.create({
countLoaded: 0, countLoaded: 0,
proxied: ["fetchResources", "loadResources", "apisLoaded", "modelsLoaded"], proxied: ["fetchResources", "loadResources", "apisLoaded", "modelsLoaded"],
discoveryUrlList: [],
discoveryUrlListCursor: 0,
init: function() { init: function() {
// log("ModelController.init"); // log("ModelController.init");
@@ -363,26 +360,57 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
}, },
fetchEndpoints: function() { fetchEndpoints: function() {
var controller = this;
updateStatus("Fetching API List..."); updateStatus("Fetching API List...");
var url = apiHost + "/" + rootResourcesApiName + apiKeySuffix; var baseDiscoveryUrl = endsWith(discoveryUrl, "/") ? discoveryUrl.substr(0, discoveryUrl.length - 1) : discoveryUrl;
$.getJSON(url, function(response) { if(endsWith(baseDiscoveryUrl, "/resources.json"))
baseDiscoveryUrl = baseDiscoveryUrl.substr(0, baseDiscoveryUrl.length - "/resources.json".length);
else if(endsWith(baseDiscoveryUrl, "/resources"))
baseDiscoveryUrl = baseDiscoveryUrl.substr(0, baseDiscoveryUrl.length - "/resources".length);
// if (response.apis) { this.discoveryUrlList.push(discoveryUrl);
ApiResource.createAll(response.apis); this.discoveryUrlList.push(baseDiscoveryUrl);
// } this.discoveryUrlList.push(baseDiscoveryUrl + "/resources.json");
this.discoveryUrlList.push(baseDiscoveryUrl + "/resources");
// get rid of the root resource list api since we're not going to document that log("Will try the following urls to discover api endpoints:")
var obj = ApiResource.findByAttribute("name", rootResourcesApiName); for(var i = 0; i < this.discoveryUrlList.length; i++)
if (obj) log(" > " + this.discoveryUrlList[i]);
obj.destroy();
controller.fetchResources(); this.fetchEndpointsSeq();
});
}, },
fetchResources: function() { fetchEndpointsSeq: function() {
//log("fetchResources"); var controller = this;
if(this.discoveryUrlListCursor < this.discoveryUrlList.length) {
var url = this.discoveryUrlList[this.discoveryUrlListCursor++]
updateStatus("Fetching API List from " + url);
log("Trying url " + url);
$.getJSON(url + apiKeySuffix, function(response) {
})
.success(function(response) {
log("Setting globalBasePath to " + response.basePath);
globalBasePath = response.basePath;
ApiResource.createAll(response.apis);
controller.fetchResources(response.basePath);
})
.error(function(response) {
controller.fetchEndpointsSeq();
});
} else {
log ('Error with resource discovery. Exhaused all possible endpoint urls');
var urlsTried = "";
for(var i = 0; i < this.discoveryUrlList.length; i++) {
urlsTried = urlsTried + "<br/>" + this.discoveryUrlList[i];
}
updateStatus("Unable to fetch API Listing. Tried the following urls:" + urlsTried);
}
},
fetchResources: function(basePath) {
log("fetchResources: basePath = " + basePath);
//ApiResource.logAll(); //ApiResource.logAll();
for (var i = 0; i < ApiResource.all().length; i++) { for (var i = 0; i < ApiResource.all().length; i++) {
var apiResource = ApiResource.all()[i]; var apiResource = ApiResource.all()[i];
@@ -393,8 +421,8 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
fetchResource: function(apiResource) { fetchResource: function(apiResource) {
var controller = this; var controller = this;
updateStatus("Fetching " + apiResource.name + "..."); updateStatus("Fetching " + apiResource.name + "...");
var resourceUrl = apiHost + apiResource.path_json + apiKeySuffix; var resourceUrl = globalBasePath + apiResource.path_json + apiKeySuffix;
// log("resourceUrl: %o", resourceUrl); log("resourceUrl: %o", resourceUrl);
$.getJSON(resourceUrl, $.getJSON(resourceUrl,
function(response) { function(response) {
controller.loadResources(response, apiResource); controller.loadResources(response, apiResource);
@@ -405,9 +433,9 @@ function SwaggerService(baseUrl, _apiKey, statusCallback) {
try { try {
this.countLoaded++; this.countLoaded++;
// log(response); // log(response);
// if (response.apis) { if (response.apis) {
apiResource.addApis(response.apis); apiResource.addApis(response.apis, response.basePath);
// } }
// updateStatus("Parsed Apis"); // updateStatus("Parsed Apis");
//log(response.models); //log(response.models);
if (response.models) { if (response.models) {

2
source/index.html.haml
View File

@@ -5,7 +5,7 @@
%li.resource{:id => "resource_${name}"} %li.resource{:id => "resource_${name}"}
.heading .heading
%h2 %h2
%a{:href => "#!/${name}", :onclick => "Docs.toggleEndpointListForResource('${name}');"} ${name} %a{:href => "#!/${name}", :onclick => "Docs.toggleEndpointListForResource('${name}');"} ${path}
%ul.options %ul.options
%li %li
%a{:href => "#!/${name}", :id => "endpointListTogger_${name}", :onclick => "Docs.toggleEndpointListForResource('${name}');"} Show/Hide %a{:href => "#!/${name}", :id => "endpointListTogger_${name}", :onclick => "Docs.toggleEndpointListForResource('${name}');"} Show/Hide

24
source/javascripts/swagger-service.js
View File

@@ -7,7 +7,7 @@ function SwaggerService(discoveryUrl, _apiKey, statusCallback) {
if (discoveryUrl.length == 0) if (discoveryUrl.length == 0)
throw new Error("discoveryUrl must be passed while creating SwaggerService"); throw new Error("discoveryUrl must be passed while creating SwaggerService");
if (! (discoveryUrl.toLowerCase().indexOf("http:") == 0 || discoveryUrl.toLowerCase().indexOf("https:") == 0)) { if ( discoveryUrl.indexOf("/")!=0 && ! (discoveryUrl.toLowerCase().indexOf("http:") == 0 || discoveryUrl.toLowerCase().indexOf("https:") == 0)) {
discoveryUrl = ("http://" + discoveryUrl); discoveryUrl = ("http://" + discoveryUrl);
} }
@@ -57,17 +57,12 @@ function SwaggerService(discoveryUrl, _apiKey, statusCallback) {
ApiResource.include({ ApiResource.include({
path_json: null, path_json: null,
path_xml: null, path_xml: null,
init: function(atts) { init: function(atts) {
if (atts) this.load(atts); if (atts) this.load(atts);
this.name = this.path.replace(".{format}", "").replace(/\//g, "_");
this.path_json = this.path.replace("{format}", "json"); this.path_json = this.path.replace("{format}", "json");
this.path_xml = this.path.replace("{format}", "xml"); this.path_xml = this.path.replace("{format}", "xml");
this.baseUrl = globalBasePath; this.baseUrl = globalBasePath;
//execluded 9 letters to remove .{format} from name
this.name = this.path.split("/");
this.name = this.name[this.name.length - 1];
this.name = this.name.replace(".{format}",'').replace(/\//g, "_");
// this.name = this.path.substr(1, this.path.length - formatString.length - 1).replace(/\//g, "_");
this.apiList = Api.sub(); this.apiList = Api.sub();
this.modelList = ApiModel.sub(); this.modelList = ApiModel.sub();
}, },
@@ -95,6 +90,9 @@ function SwaggerService(discoveryUrl, _apiKey, statusCallback) {
init: function(atts) { init: function(atts) {
if (atts) this.load(atts); if (atts) this.load(atts);
var sep = this.path.lastIndexOf("/");
this.name = this.path.substr(0, sep).replace(".{format}", "").replace(/\//g, "_");
var secondPathSeperatorIndex = this.path.indexOf("/", 1); var secondPathSeperatorIndex = this.path.indexOf("/", 1);
if (secondPathSeperatorIndex > 0) { if (secondPathSeperatorIndex > 0) {
var prefix = this.path.substr(0, secondPathSeperatorIndex); var prefix = this.path.substr(0, secondPathSeperatorIndex);
@@ -102,21 +100,9 @@ function SwaggerService(discoveryUrl, _apiKey, statusCallback) {
// log(this.path + ":: " + prefix + "..." + suffix); // log(this.path + ":: " + prefix + "..." + suffix);
this.path_json = prefix.replace("{format}", "json") + suffix; this.path_json = prefix.replace("{format}", "json") + suffix;
this.path_xml = prefix.replace("{format}", "xml") + suffix;; this.path_xml = prefix.replace("{format}", "xml") + suffix;;
if (this.path.indexOf("/") == 0) {
this.name = this.path.substr(1, secondPathSeperatorIndex - formatString.length - 1);
} else {
this.name = this.path.substr(0, secondPathSeperatorIndex - formatString.length - 1);
}
} else { } else {
this.path_json = this.path.replace("{format}", "json"); this.path_json = this.path.replace("{format}", "json");
this.path_xml = this.path.replace("{format}", "xml"); this.path_xml = this.path.replace("{format}", "xml");
if (this.path.indexOf("/") == 0) {
this.name = this.path.substr(1, this.path.length - formatString.length - 1);
} else {
this.name = this.path.substr(0, this.path.length - formatString.length - 1);
}
} }
var value = this.operations; var value = this.operations;