Skip to content

Home

Jump to bottom
Mengting Yan edited this page Jul 9, 2020 · 77 revisions

Getting Started

First clone and build the code, and initiate a watcher. The watcher will recompile and reload any open Kui windows whenever you edit and save source files. This includes changes to TypeScript, CSS, and SCSS source files.

git clone git@github.com:IBM/kui.git
cd kui && npm ci && npm start

To verify your installation, try npm run open. You should see a Kui window open and present you with a prompt. Issue a command, such as ls, and click on the links in the table. Clicking on a JSON or YAML file should display the contents in an editor in the Kui Sidecar.

Approaches for Enhancing Kui

Currently, there are four ways to enhance Kui:

Option 1: Directing Command Output to the Terminal

Kui Provides a fully-featured terminal. In response to certain commands, Kui augments the basic ASCII art presented by those commands with graphics.

Source | Read more

 terminal-oriented commands

Option 2: Directing Command Output to the Sidecar

Your commands can fetch structured information, organize it into one or more tabs. Kui presents tab-structured content in the TopNavSidecar.

Source | Read more

 left-nav-sidecar-oriented commands

Option 3: Directing Command Output to the Alternate Sidecar

The LeftNavSidecar is a Sidecar variant that optimizes layout for a hierarchical presentation. It also uses a narrower sidecar than the TopNavSidecar.

Source | Read more

 left-nav-sidecar-oriented commands

Option 4a: Custom Layout

This image shows a custom layout used to support Kui in Popup mode. This client 1) does not include a UI for switching tabs, 2) places the command input as a StatusStripe widget, and 3) uses the Terminal only for presenting command output.

Source

 status-stripe-widgets

Option 4b: Status Stripe Widgets

The <Kui/> React component allows for some customization without having to go fully custom. You may instantiate it with your own StatusStripe widgets. This image shows two widgets that, when clicked, execute a terminal command.

Source

 status-stripe-widgets

Other Examples

Next Steps

  • Customize the overall layout of the UI. [Coming Soon]. For the first three enhancement options, this is an optional step. Only consider this if you have a need to customize the layout of the client.
  • Build and deploy a production release. You may build and distribute your own version of Kui as either a set of double-clickable platform-local applications, or as a hosted service.
Clone this wiki locally