The portal is a website for access to the ZDMP functionality including, everything from human collaboration to container management depending on the user’s role and permissions. It displays web UIs from the zApps and provides information to the decision makers that require it.
This is the front facing interface to the platform. From here users can login to the platform see available applications (depending on their access).
This component is on the Enterprise tier and is part of “user frontend plane”. It allows people access to various parts of the platform including the Marketplace to buy and install zApps as well as connecting to running applications within the Application Run-time.
|Latest Release (v1.0.0)||N/A Download source and follow steps on Installation|
|X Open API Spec||Link|
|Generation date of this content||16 May 2021|
|Company Name||ZDMP Acronym||Website||Logo|
|Information Catalyst for Enterprise||ICE||www.informationcatalyst.com|
|Price||[For determination at end of project]|
|Licence||[For determination at end of project]|
|Volume license||[For determination at end of project]|
The following diagram shows the position of this component in the ZDMP architecture
Figure 3: Position of Component in ZDMP Architecture
The benefits include:
Provide common login/logout and access to components header
Act as a bridge between security component and other ZDMP components
Provide consistent look & feel
Access to user management for non-IT users
The ZDMP Portal offers the following features:
ZDMP Global Dash Button: This is a global addition to all components. This provides all sites with a header to give user a common way to access his profile, logout, and switch between system components
User profile with roles: The main screen where user can provide metadata like photo, address, and other information
Organisation registration: Allow new organisations to be registered in the system
Access to all ZDMP components: Integrated login experience and access to all ZDMP components
The ZDMP Portal has the following requirements:
Associated ZDMP services
The ZDMP Portal can be installed using the following steps:
Download the latest source code from ZDMP repository
Execute docker-compose from orchestration folder
Access localhost:4200 from ther browser to reach Portal main UI
How to use
The ZDMP Portal can be used following these steps:
- Welcome page
This page is what the user sees when first goes to ZDMP Portal site. The User enters their email address and then clicks Next.
Figure 4: Portal Welcome page
- Select organisation
Here the user can select any organisation by clicking on its name. It is then is redirected to the login page.
Figure 5: Select organisation screen
- Login is provided by Keycloak (via the security component)
This screen is where the user is logged into the system, using the organisation chosen.
Figure 6: Keycloak login
- ZDMP Components
Once logged in, user is able to access the ZDMP Components screen.
This screen provides links for all components in ZDMP, thus becoming the main access point to all ZDMP components. This has been automatically populated based on which components/configuration the user has selected.
This functionality is also provided by the Dash button.
Figure 7: ZDMP Components
Figure 8: Register organisation screen
The ZDMP Dash button is a Portal component that can be integrated by any ZDMP component and/or ZDMP application, to help the developer with the tasks related to the security, including validating current user, registering new organisations and authentication.
Figure 9: Dash button in ‘anonymous’ state
- How it works
The Dash button appears at the upper right corner and provides a single sign on experience for the end user.
It has been built using web components technology, so it can be integrated on any web page/application easily.
When the end user clicks on the Dash button, it is redirected to the main Login screen.
After a successful login, the user is redirected back to the original application, showing a ‘connected’ status, with the user’s organisation logo and username.
Figure 10: Dash button in ‘logged’ state
- How to integrate it
To integrate the Dash button on any existing web page, please follow the next steps:
- > A reference to the css style file, placed in specific HEAD section
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zdmp-dash-button@latest/zdmp-dash-button.css" />
- > A tag to position the dash button, placed in specific BODY section.
<body> <zdmp-header api-url="http://localhost:5100"></zdmp-header> ... </body>