api-ui

Embedded UI for any service that implements the Rancher API spec

Usage no npm install needed!

<script type="module">
  import apiUi from 'https://cdn.skypack.dev/api-ui';
</script>

README

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

Running as a standalone server

This will start a server on the given port number (default: 3000) that serves up the assets directly. This mode is mostly suitable for development of this library itself.

  ./scripts/serve

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/rancher with a title starting with [API UI] .

Or just click here to create a new issue.