Embedded UI for any service that implements the Rancher API spec

Go to file

Phillip Rak ab57504726 Merge pull request #42 from rancher/npm-install Ensure we do an npm install		2023-05-23 10:47:08 -07:00
.github/workflows	Update pr-build-check.yaml	2023-02-22 10:18:48 +00:00
partials	Preserve values not in select options, don't add extra spaces to commas in JSON	2019-11-27 15:44:39 -07:00
scripts	Update build	2023-05-23 18:46:29 +01:00
src	Preserve values not in select options, don't add extra spaces to commas in JSON	2019-11-27 15:44:39 -07:00
styles	embed fonts correctly	2017-09-12 00:45:52 -07:00
templates	Remove user name display	2023-02-27 17:55:47 +00:00
vendor	Load Bootstrap locally, long line wrapping	2016-07-11 16:35:26 -07:00
.ackrc	Fix showing loading errors	2013-09-27 10:27:53 -07:00
.drone.yml	Update node version to 16	2023-05-23 18:40:22 +01:00
.gitignore	Remove gulp and use build script	2023-03-07 10:07:38 +00:00
LICENSE.txt	Remove gulp and use build script	2023-03-07 10:07:38 +00:00
README.md	Remove gulp and use build script	2023-03-07 10:07:38 +00:00
index.html.tmpl	Remove gulp and use build script	2023-03-07 10:07:38 +00:00
package.json	Remove gulp and use build script	2023-03-07 10:07:38 +00:00
version.json.tmpl	Add version file to build	2023-03-07 10:58:02 +00:00
yarn.lock	Add yanr lock file	2023-03-07 10:09:38 +00:00

README.md

api-ui

An embedded UI for any service that implements the Rancher API spec.

Integrating with your API

See HTML UI in the API specification. This also includes a link to the latest version hosted on our CDN.

Install

git clone https://github.com/rancherio/api-ui
cd api-ui
yarn install

Usage

Compiling into stand-alone CSS and JavaScript files

This will write files to ./dist/{version}/, suitable for publishing to a CDN.

  ./scripts/build

Integrating with an API

Wrap JSON responses with a bit of HTML (and return Content-Type: text/html):

<!DOCTYPE html>
<!-- If you are reading this, there is a good chance you would prefer sending an
"Accept: application/json" header and receiving actual JSON responses. -->
<link rel="stylesheet" type="text/css" href="//releases.rancher.com/api-ui/1.0.4/ui.css" />
<script src="//releases.rancher.com/api-ui/1.0.4/ui.js"></script>
<script>
var schemas = "http://url-to-your-api/v1/schemas";
var data = {
  /* ... JSON response ... */
};
/* ... additional options globals, see below ... */
</script>

Options

Several options can be configured through additional globals:

// Adds a documentation link in the navigation area
var docsPage = "http://url-to-your-docs/site";

// URL to a documentation JSON file to add descriptions for types and fields.
var docsJson = "http://url-to-your-docs.json";

// Displays the username who is logged in next to the Log Out link so the user knows who you think they are
var user = "jsmith";

// Disables the display of the logout link
var logout = false; // Disable the display of the Log Out link

// Replaces the default "${API_ACCESS_KEY}:${API_SECRET_KEY}" string when displaying cURL commands.
//   setting to false will omit the user/pass option from the command entirely.
var curlUser = "some:thing";

// Overrides the location where bootstrap is loaded from ('/css/boostrap.min.css' and '/js/bootstrap.min.js' will be appended to this)
var bootstrap = "http://url/to/bootstrap/version";

Bugs & Issues

Please submit bugs and issues to rancher/dashboard with a title starting with [API UI] .

Or just click here to create a new issue.