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

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

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


Whats new board

As soon as you get in, a board with the news and latest changes is shown. It will always show up unless the “Do not show this message again” checkbox is checked.

Welcome board
What’s new board


First steps tutorial

To ease the understanding of the Playground usage, a new tutorial board with few initial steps to learn basic actions is shown. To complete the step click on the Next button. The completed steps will show a green check in the list. The steps are enabled once the previous are completed. The user can navigate through the steps by clicking on the element of the list or using the buttons on the bottom right corner of the window. This can be skipped at any moment by clicking on the Skip tutorial button on the bottom left part. This board can be accessed using the bulb button in the bottom part of sidebar. Welcome board
First steps tutorial 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 DrawIO 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 at the top, which opens the catalog view, and at the bottom, the User button Catalog button to open the user section, the First steps tutorial button Catalog button that opens the tutorial , 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 two minutes.

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


Additionally, 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 through 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


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

or deploy an application from a Git Repository


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.


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)

The user may access more detailed information clicking on any of the apps list items. The application detail card displays extended information related to it’s components and the related logs. The structure of the app detail info includes a header, that contains the name on the top, and a row with the visual id, status, version, created on, and description fields as well as a board containing the info (Application info) and logs (Application logs) tabs. For more information on the specific tab, check the corresponding section.


Application info

Deployed app detail
Deployed app detail

When the info tab is active in the application detail card, the board displays a list of 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 specific information is accessible by selecting any item. The active element is marked with the top blue-to-purple gradient bar.

Detail item list

Items in the app detail list


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.


Application logs

The application logs tab enables the user to access the latest logs related to the application. Each log line displays the Kubernetes pod identifier in dark grey color, the component name in purple, the timestamp in light grey, and the log text in white. Logs may be refreshed anytime by using the refresh button in the top right corner of the logs board, right beside the Filter by component dropdown, which will reload the logs. Also newer logs can be loaded using the Load more button, (always at the bottom of the logs list), and will be added as the last elements of the list. If there are no new logs to load, the system will display a notification.

App logs

App logs features

The user is enabled to search for any text in the logs by using the browser find feature (using Ctrl + F shortcut in Windows, Linux and ChromeOS, or Cmd + F in Mac). The logs board also provides filtering features that can be used by typing a keyword in the input text box with the text Type to filter by term (the term has to be longer than 3 characters), selecting a component in the Filter by component dropdown list, or combining both methods. To clear the term filter, the user may delete the keyword from the input text, or click on the x button of the displayed contextual notification that shows the number of logs available from the filtering. Logs filter by term notification To clear the component filter, the user has to open the dropdown and click on the clean filter button that appears at the bottom of the list.

Logs filter by component dropdown


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


User

The user section contains the user profile info and the Personal Access Tokens management. Click on the new sidebar user button User button

to open the user window. By default, the user profile info will be shown. To switch between the available tabs and change displayed information, click on the top PATs (Personal Access Token) tab.

Profile

User section tabs


Profile

In the profile tab, it’s available the user related information as well as the logout button.
IMPORTANT - When logged with GitHub, the Playground does NOT have access to the repositories. The only gather information is the GitHub username, user name and email.

Profile

User Profile information


PATs (Personal Access Token)

Personal access token are an alternative to using passwords for authentication to Playground when using the CLI. Personal access tokens are intended to access Playground resources on behalf of yourself. This information is displayed in the *PATs(Personal Access Token) tab in the user section. For more information related to Personal Access Token usage check our Using personal access tokens guide.

Personal Access Tokens

Personal Access Tokens list


Create new token

To create a new Personal Access Token, click on Create token button on the top right corner of the section (or in the here word that appears if the token list is empty). Once the Create token input is shown, type a name for the token (it must be at least 3 chars, lowercase and no spaces or special chars are allowed except ‘-‘), and click on the Create token button. Wait few seconds for the token to be generated and the token value will be displayed.

Personal Access Tokens Account button Create new token input Account button Token value

IMPORTANT - Copy or download value token in a secure location, because it will not be shown again for security reasons.

User may use Copy to clipboard button to get the token value copied into the clipboard. To finish the token creation and refresh the available tokens list, click on Complete button.


Dowload token

Clicking on the Download button available at the bottom center will ask to create a .txt file containing the token value (only available after creating the new token, for security reasons ).

Delete button

Download token button


Delete Token

Deleting a token is as easy as clicking on the Delete button Delete button on the bottom part of all the items when expanded available on the right part of each token

Account button

Delete button on each token in the list


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

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