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
- Browser and resolution requirements
- Basic usage
- Using the catalog
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.
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.
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 .
Wide/Desktop vs Narrow/Device resolutions
|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|
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.
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.
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
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
In the left side, there is a sidebar with the Napptive color scheme gradient, where the user finds the Catalog button on the top, which opens the catalog view, and the Help button on the bottom, that opens this documentation.
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
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 minute.
Data refresh while deploying
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
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
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
- 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.
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.
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:
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 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.
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
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
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
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
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)
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.
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. 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.
Items in the app detail list
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
The deployed apps information is automatically refreshed as indicated in the data refresh section
Data refresh while deploying
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.
In the profile tab, it’s available the user related information aswell as the logout button
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.
In the following section, working with environments there is a much more detailed description of how to deal with managing them.
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.
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
- Follow our Getting started guide to start using Napptive.