ZedUI Overview

1. Introduction

ZedUI is the web-based Graphical User Interface to interact with ZedControl.
 

1.1. Log in to ZedControl

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.
 
ZC_3_screen_1.png
 
Once you enter the user credentials and log in to ZedControl, you can see the home screen below. The first-time login will show mostly 'empty widgets' because no Edge Node would have been onboarded yet. The screenshot below is an example of an enterprise having many Edge Nodes and Edge App instances deployed.
 
ZC_3_screen_2.png
 

1.2. Top Navigation Bar (Top NAV)

The Top Navigation Bar can be broadly be divided into three main sections.
 
(a) The left section, which displays the ZedControl 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 (Notifications_icon.png) (coming soon), Administration (Administration_icon.png) (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 (Help_icon.png) (a place where you can find documentation links, how-to videos, and other help-related documents, We keep on updating this section), and Profile (Profile_icon.png) (this is where you could see and edit your user profile).
 
ZC_3_screen_3.png
 

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.
 
ZC_3_screen_4.png
 
The icons in the left NAV are as follows:
  • Home Icon (Home_icon.png): 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 (Edge_Nodes_icon.png): 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 (Edge_App_Instances_icon.png): 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 (Cluster_instance.png): This icon links to the page that displays a list of all the Cluster Instances in your enterprise.
  • Library (Library_icon.png): Library icon takes you to a page that shows your enterprise's other asset's list view. Assets like Networks (Networks_icon.png), Network instances (Network_Instances_icon.png), Data Stores (Datastores_icon.png), EVE-OS Images (Images_icon.png), App Images (Images_icon__1_.png), Volume Instances (Volume_Instances_icon.png), etc. The primary tabs show individual links to all of the above lists.
  • Reports (Reports_icon.png): Reports link shows an interactive way to filter and view different statistics about the ZedControl assets. Could find Events, Utilization reports, and Network data flow here.
  • Jobs (Jobs_icon.png): This link shows all the Jobs that are generated while performing any function on ZedControl, 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 (Marketplace_icon.png): This link takes you to Marketplace, this is where you will be able to see all supported Edge Apps (Edge_App_icon.png) and Models (Models_icon.png) in your enterprise.
 
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 (assets_-M-8YZpNfHyoMqstV5LL_-MPCs4p3XJ4SKzOqtv7t_-MPCtD85Rrih1gYxTa0r_Temp-tab-close-icon.png)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.
 
ZC_3_screen_5.png
 

1.4. Content Area

This is the main content area (grey background) that displays' Panels.' The content always comes on these white panels. For example, the Home page has a dashboard (which is customizable) widgets each in a panel.
 
ZC_3_screen_6.png
 
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.
 
ZC_3_screen_7.png
 
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 (Add_icon.png) to add an asset to the list, Magnifier (Magnifier_icon.png) to filter the assets, and More (More_icon.png) icon to see the other actions that can perform on the content page.
 

Secondary Horizontal Navigation

The secondary navigation bar shows the Links in the 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.
 
ZC_3_screen_8.png
 

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.
 
ZC_3_screen_9.png
 
The most common UI components used across ZedUI are discussed in this document. Other UI components are explained in the subsequent sections.
Was this article helpful?
0 out of 0 found this helpful

Articles in this section