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


Cluster information

On the top-left, the cluster 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.

Cluster information

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.

Cluster 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.

Profile

On the bottom left part of the sidebar, it is placed the profile button that allows you to visualize your GitHub username and email and includes the logout profile button.

Logout

What’s next