1. Introduction
ZEDEDA UI is the web-based Graphical User Interface to interact with ZEDEDA CLOUD.
1.1. Log in to ZEDEDA UI
The user can log in using one of the two login modes:
- Local authentication: with username and password.
- Single Sign-On authentication.
Here, you can see the local authentication used as an example to log in.
Once you enter the user credentials and log in to ZEDEDA, you can see the dashboard below. The first-time login will mostly show 'empty widgets' because no Edge Node has yet been onboarded. The screenshot below shows an enterprise with many Edge Nodes and Edge App instances deployed.
1.2. Top Navigation Bar (Top NAV)
The Top Navigation Bar can be broadly divided into three main sections.
(a) The left section, which displays the ZEDEDA logo, as well as the name of your enterprise.
(b) The middle section displays 'All Projects' with a dropdown. You could either select All Projects or any particular 'Project' in your enterprise using the dropdown options. When a particular project is selected, all the objects related to the chosen project get filtered.
(c) The right section has four icons, namely, Notifications (
) (coming soon), Administration (
) (this is where all the Administrative functions can be accessed, like management of Enterprise parameters, Projects, users, roles, and permissions, etc. The administration section will show the assets you have access to based on the roles and permissions you have). Help (
) (a place where you can find documentation links, how-to videos, and other help-related documents, We keep on updating this section), and Profile (
) (this is where you could see and edit your user profile).
) (coming soon), Administration () (this is where all the Administrative functions can be accessed, like management of Enterprise parameters, Projects, users, roles, and permissions, etc. The administration section will show the assets you have access to based on the roles and permissions you have). Help () (a place where you can find documentation links, how-to videos, and other help-related documents, We keep on updating this section), and Profile () (this is where you could see and edit your user profile).
1.3. Left Navigation Bar (left NAV)
You will see a main navigation bar for the UI on the left-hand side. The first icon on the top is used for expanding or collapsing the menu bar. The collapsed menu bar gives additional space for the main content.
The icons in the left NAV are as follows:
- Dashboard Icon (
): This is the link to the default landing page for all users, the landing page will display a default set of customizable dashboard widgets.
- Edge Nodes (
): This icon links the page that displays the edge node list. This is where you will see all the edge nodes in your enterprise, browse them by projects and states, etc.,
- Edge App Instances (
): This icon links to the page that displays a list of all the 'Edge App Instances in your enterprise. It also can be filtered based on your needs.
- Cluster Instances (
): This icon links to the page that displays a list of all the Cluster Instances in your enterprise.
- Library (
): Library icon takes you to a page that shows your enterprise's other asset's list view. Assets like Networks (
), Network instances (
), Data Stores (
), EVE-OS Images (
), App Images (
), Volume Instances (
), etc. The primary tabs show individual links to all of the above lists.
- Reports (
): Reports link shows an interactive way to filter and view different statistics about the ZEDEDA assets. Could find Events, Utilization reports, and Network data flow here.
- Jobs (
): This link shows all the Jobs that are generated while performing any function on ZEDEDA, like Installation or Updation of EVE-OS and many more such events. The bulk tasks like Bulk App deployment, or Bulk EVE-OS update, create a single Job that consists of multiple 'Tasks.' The jobs are always sorted based on the 'latest on the top' principle.
- Marketplace (
): This link takes you to Marketplace, this is where you will be able to see all supported Edge Apps (
) and Models (
) in your enterprise.
Temporary Links:
Whenever you click on any asset, like an Edge Node, or an Edge App Instance, the asset opens in a new (1) temporary link below all the fixed menu items in the left NAV. The temporary Links could be closed using the (2) Close (
) icon that appears upon hovering over the link. The chronology of these temporary links will be based on the 'latest on the top principle' The maximum number of temporary links that could open depends on the screen resolution and the available space in the left NAV.
) icon that appears upon hovering over the link. The chronology of these temporary links will be based on the 'latest on the top principle' The maximum number of temporary links that could open depends on the screen resolution and the available space in the left NAV.
1.4. Content Area
The main content area displays' Panels.' The content always comes on these white panels. For example, the dashboard has customizable widgets in a panel.
The list views have two panels, the top panel is a summary widgets panel (which is collapsed by default), and the bottom content panel shows the table of the list of 'assets' and so on.
Page-level actions are icons that appear at the right top corner of the content area. These are the actions that can perform on the content of the page. For example, in most of the list views, you see three icons, Add (
) to add an asset to the list, Magnifier (
) to filter the assets, and More (
) icon to see the other actions that can perform on the content page.
) to add an asset to the list, Magnifier () to filter the assets, and More () icon to see the other actions that can perform on the content page.Secondary Horizontal Navigation
The secondary navigation bar shows the Links on a grey background. You could click on an element to see the details in the content area. For example–the Library page shows primary navigation, which shows navigation links to objects like Networks, Network Instances, Data Stores, EVE-OS Images, App Images, and Volume Instances.
Tertiary Horizontal Navigation
The tertiary horizontal navigation bar renders with buttons style white background. An example of this is: Any detailed object view shows this tertiary navigation, where the different tabs show different sections. For example, the Edge Nodes detail view shows tabs like 'Status,' 'Basic Info,' 'Adapters,' 'Events' related to a particular Edge Node.
The most common UI components used across ZedUI are discussed in this document. Other UI components are explained in the subsequent sections.