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 overview
- Basic usage
- Environments
- Kubernetes/definitions
- Applications
- User
- Accounts
- Using the catalog
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
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.
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. 
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 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 information on the top bar
Sidebar
In the left side, there is a sidebar with the Napptive color scheme gradient, where the user finds the Catalog button 
at the top, which opens the catalog view, and at the bottom, the User button 
to open the user section, the First steps tutorial button 
that opens the tutorial , and the 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.
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
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
-
Error notifications: showing the error information featured by red background
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.
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
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
kubectltool. - 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
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
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
- Components
- Workflow steps (steps)
- Policies
- Traits
- Scopes
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 
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, 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
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
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 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 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
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.
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 
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 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. 
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.
Application data refresh
The deployed apps information is automatically refreshed as indicated in the data refresh section
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
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.
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.
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 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.
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 ).
Download token button
Delete Token
Deleting a token is as easy as clicking on the Delete button on the bottom part of all the items when expanded available on the right part of each token
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 
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.
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
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.
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.
Deploying DrawIo app from the catalog
For further information, visit any of this sections:
- Deploying an application from the catalog
- Downloading applications from the catalog
- Deleting applications from the catalog
What’s next
- Follow our Getting started guide to start using Napptive.