Link Search Menu Expand Document

Playground Web

The Playground Web is the easiest way to visualize the available resources on your system as well as their overall status. We are working to provide the best user experience on monitoring your cloud-native applications. This web UI is meant to achieve the best visualization in the most popular resolutions. It has two layout flavors and it will show up the proper one automatically to always display the best information distribution. Below, its available a list with the resolutions and devices used in the tests. In this section we will do a walkthrough of its features.

Wide

Wide resolutions

Narrow

Narrow resolutions



Tested resolutions and emulated devices

  • 1920x1080
  • 1366x768
  • 1440x900
  • 1536x864
  • 2560x1440
  • 1680x1050
  • 1280x720
  • 1280x800
  • 1600x900
  • Kindle Fire HDX
  • Iphone 6/7/8
  • Iphone 6/7/8 plus
  • Iphone X
  • Ipad
  • Ipad Pro
  • Laptop with HiDPI screen
  • Laptop with MDPi screen

Login

The first time that you join the web interface, it is required to log in with your GitHub account. By clicking on the GitHub login button, you accept the terms and conditions of the service, and the web will be redirected to the main screen.


Login

Login screen


Welcome board

As soon as you get in, a welcome board with the basic instructions is shown. It will always show up unless the “Do not show this again” checkbox is checked.


Welcome Board Welcome board


Environment information

On the top-left, the environment card displays 3 indicators with the usage of CPU, memory and storage. This is important to understand the quota limitations and your applications usage. The information is automatically refreshed every 20 seconds by default.

Environment information

Right above the card, it’s placed an environment selector where all the available environments of all the user enabled accounts will be listed

Environments dropdown

Addionally, you can access the menu to:

  • Refresh data: To get the latest information on cluster usage.
  • Get Kubeconfig: Download the file that is needed to interact with the cluster using the standard kubectl tool.
  • Get the Playground CLI: Download the binary that gives you access to the napptive playground thourgh the CLI and that is needed for the associated kubeconfig.

Environment menu

Schematics

On the bottom-left, the schematics card allows you to easily explore the different lists.

Schematics

Clicking on the each name (components, traits, scopes, workloads), would change the content on the squared dark area below to display a list of the available elements. Those elements can be expanded to show the details just by clicking on the header. The header contains the key info about the element such as: name, description/kind and version.
Below the tabs that contain the schematics kind names its available a search field that allows to filter by the input term, as well as a button to get the latest updated info and, (only in components) a button that shows a modal window with the information to add a new element to the system.

Schematics

The schematics information is automatically updated every 60 seconds.

Note that traits, scopes and wordloads are already installed on the cluster.

Applications

The main card displays the information of the deployed applications.

Applications

On the top of the apps card its shown, as in the schematics card, the search bar that allows to filter the apps displayed in the list, the refresh data button, and the deploy app button. The apps list displays up to four elements in a carrousel that is managed by two buttons (‘<’ and ‘>’) that enable to change the displayed elements between the list of available. Each app briefing card contains:

  • the app name
  • the app status (circle)
  • an automatic generated visual id
  • a list of the components status (squares)

Deploy app

When any app briefing card is clicked, the details are shown, including a list of the components, that may be expanded to display the specific component parameters, applied traits and scopes.

The deployed apps information is automatically updated every 60 seconds.

Account

On the top right part of the playground main view, it is placed the account button that allows you to open the account info, including profile and environments management. On the top part of it, right next to the title, there is an account dropdown selector for the user to choose which account to work with

Account

Profile

In the profile tab, it’s available the user related information aswell as the logout button

Profile

Environments

The environments tab allows to manage the environments of the selected account. At first sight, there is an environments list on the left and an information card on the right. Also, there are two buttons, above the info card, that enable to refresh the environments data and to create a new environment. On the list, the environment in use is displayed with the aquamarine border color. If no environment selected from the list, the info card shows a summary of all the account environments quotas.

Environments
Environments summary

To display the detailed information about an specific environment, you just need to click on any of the available environments of the list. The environment in use can be switched clicking on the use button. Using an environment displays the environments data/schematics/apps in the main Playground view. The environment also may be deleted from the environment detail view.

Environment detail
Environment detail

New environments can be created by clicking on the ‘+’ button mentioned above. To create a new environment you need to add the environment name (use only regular lowercase chars and numbers), a description, and specify the quotas for CPU, memory and storage. The default values will be preset in the number input fields.

Environment creation
Environment creation

What’s next