Skip to main content Link Search Menu Expand Document (external link)

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 for monitoring your cloud-native applications.

Playground web
Playground web overview

Browser and resolution requirements

This web UI is meant to achieve the best visualization in the most popular resolutions and browsers, and we are working in a full adaptative layout that we will be releasing within the next versions.

Browser support

The Playground Web is full featured supported on Chromium based browsers like Google Chrome, Brave, Opera or Microsoft Edge. It is also tested on Firefox and Safari latest versions to work properly.

Resolution support

So far, our Playground Web has two layout flavors and it will show up the proper one automatically to always display the best information distribution. Below, a list with the resolutions and devices used in the tests is available .

Login screen Login screen

Wide/Desktop vs Narrow/Device 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, you are required to log in with any of the available methods: GitHub account, Google account, or email and password. By clicking on any of the login buttons, you accept the terms and conditions of the service, and the web will be redirected to the main screen.

Login screen

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


Dashboard overview

Napptive Playground Web is meant to provide a clear understanding of what is happening within the user environments, which includes everything related to the apps´ relevant information, the available definitions, and configurations. The web interface also enables the user to manage environments, as well as provides access to a catalog full of ready-to-deploy applications. The user will be able, also, to perform actions related to its account as it is detailed in the following articles of this documentation.

Main view of the dashboard with a Wordpress application running
Main view of the dashboard with a Wordpress application running


Top bar

In the top part of the main view, in desktop mode, led by the Napptive logo and following the playground header, the user has the environment selector on the left side and the active account name, tier tag and the account button on the right.

Account Info
Account information on the top bar


In the left side, there is a sidebar with the Napptive color scheme gradient, where the user finds the Catalog button Catalog button on the top, which opens the catalog view, and the Help button Help button on the bottom, that opens this documentation.

Information cards

The main information that enables the user to know what is happening in its environment, is distributed in the following 3 cards:

  • Environment displays the active environment resources information about the usage and total quotas
  • Kubernetes/definitions shows the information related to the available definitions and the Kubernetes configurations for the active environment
  • Apps provides all the information related to deployed applications and its workflows, components and policies

Data refresh

The Playground Web integrates an automatic data pull system that triggers after specific events like login, active account change, active environment change, application deployment, app delete or environment delete among others.
The user is always enabled to manually trigger the data refresh using the button on the top right corner of each card (or under the environment … menu). A formatted timestamp appears on the bottom of Kubernetes/definitions and apps cards that shows the last time the data was updated.

Data refresh

Also, the system incorporates another timer-data-update, triggered every 60 seconds, except during the app deployment from the catalog process, that starts an special refreshing data event every 5s until the app gets deployed or during the first minute.

Data refresh while deploying

Data refresh while deploying


Toast notifications

Every time that a relevant event for the user happens, the web interface pops a toast notification on the top center of the screen, showing meaningful feedback for the user. The notifications are automatically discarded after 10 seconds by default, but the user is always enabled to close it at any time using the X button.
There are two types of notifications that the system will display depending on the event that happened:

  • Regular notifications: containing regular information related to what is happening, shown with a gradient blue to purple background
    Notification regular

  • Error notifications: showing the error information featured by red background
    Notification error


Environments

In desktop resolutions, 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.

Environments info

Environment card info


Right above the card, there is an environment selector where all the available environments of all the user enabled accounts will be listed

Environments dropdown

Environment selector


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

Environment menu


Working with environments

The user is enabled to manage its environments under the Account section. In the following section, working with environments it is explained in detail how this works

Environments management window
Environments management window


To understand more about the environments you can check our Environments section.

Kubernetes/Definitions

On the left, the Kubernetes/definitions card allows you to easily explore the different sections related to the applications definitions and Kubernetes key information. The selector on top of the card, enables the user to select the active category between Kubernetes and Definitions. Depending on the active category,the different sections information available for the active environment is displayed:
Kubernetes

Definitions

Help button

Search in the items list


Clicking on the section name, 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 name and an square with the section initial

There is always available a search input to type any term that will filter the below list items, that containing the introduced term. Unfortunately the highlight term feature is not yet released.

The active section information, as mentioned in the Basic usage section is automatically updated every 60 seconds, as well as after certain relevant events mentioned in the data refresh section.

To delete an item, there is a delete button Delete button on the bottom part of all the items when expanded

Kubernetes

Kubernetes category holds all the related information to the Kubernetes relevant configuration objects secrets and config maps available for the active environment. Those items are tied to the deployed applications in the environment.

Config maps

A ConfigMap is an API object used to store non-confidential data in key-value pairs. Pods can consume ConfigMaps as environment variables, command-line arguments, or as configuration files in a volume. Check the Kubernetes official documentation to know more about config maps

Secrets

A Secret is an object that contains a small amount of sensitive data such as a password, a token, or a key. Such information might otherwise be put in a Pod specification or in a container image. Using a Secret means that you don’t need to include confidential data in your application code.

Secrets are similar to ConfigMaps but are specifically intended to hold confidential data.

Check the Kubernetes official documentation to know more about secrets

Kubernetes category while search active

Kubernetes category, config maps section search


Definitions

The definitions category contains all the available components, workflow steps, policies, traits or scopes items in the active environment. You can check Definitions section to access detailed information about the OAM 3 definitions concepts.

Definitions category, components section, k8s-objects item expanded
Definitions category, components section, k8s-objects item expanded


Applications

The main card displays the information of the deployed applications. To know more about the applications definition and structure, you can check Applications section.

Deployed app detail
Deployed app detail


Inspecting the application

On the top of the apps card its shown, 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)

Deleting an application

When any app briefing card is clicked, the details are shown. On the top right corner of the app detail, it appears the Delete button delete button that allows the user to delete the application from the environment.

Application endpoints

The user is enabled to navigate through the available information related to the active item. If the component has endpoints available, there will be a list of the available ones, with a button Endpoint button to open it in a new tab. The structure of the app detail includes a header, that contains the name on the top, and a row with the visual id, status, version, created on, and description fields. On the center part it’s displayed a board that has a list of the items that includes: workflow(if present), components and policies (if present).

Each item in the list displays an indicator of the current status, the type of item in the list c for component, p for policy and w for workflow, the name of the item, and depending on the type it may display the image and the component/policy type on the top right corner. The active element is marked with the top blue-to-purple gradient bar.

Detail item list

Items in the app detail list


Deploying an application

To deploy apps, the user may leverage the deploy from catalog feature or use the CLI, pasting the displayed command when clicking on the deploy button. Deploy app

Deploy app command for CLI


Application data refresh

The deployed apps information is automatically refreshed as indicated in the data refresh section

Data refresh while deploying

Data refresh while deploying


Accounts

On the top right part of the Playground main view, it is placed the account button Account button that allows you to open the account info, including profile and environments management. Once opened account window, 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 management

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 summary

Environments summary

In the following section, working with environments there is a much more detailed description of how to deal with managing them.

Plans&Billing

The last section of the account window is the Plans & Billing section where the user is capable to perform actions like updating the billing, checking the invoices or upgrading the plan.

Help button

To know how to execute those actions, check the Subscription section where you may find information like how to change the current plan or how to apply a discount.

Using the catalog

Overview

The Playground enables the user to easily manage the app catalog. The catalog contains a set of tested and ready-to-deploy applications aswell as the ones created by the users. More information related to the general usage of the catalog here.

Help button

Deploying DrawIo app from the catalog


For further information, visit any of this sections:

What’s next