Objective
The objective of a product UI usage document is to provide guidance and instructions to users on how to effectively use a product's user interface (UI) to change the Logos, Menu Icons, Title & others.
Ultimately, the goal of a product UI usage document is to help users understand and navigate the product's interface more effectively, improved user satisfaction, and a better overall user experience.
There are 3 configuration files which user can update by there own and redeploy the code to get the changes reflected
UI Configuration
Menus Configuration
Steps to Configure Keycloak after Installation
Redeployment Steps
The first 2 files are the UI Layer changes config file and the 3rd configuration file is to make the Metric values changes if required for the user.
Below steps will clearly describe the configuration for 2 files where user can do the minimal changes as specified and re-deploy the code again
UI Configuration
The UI configuration files can be found in the dashboard-ms microservice. In this UI configuration file ( dashboard-ms > src > assets > config > ui_config.json ) we can modify the Logo name of the application, Header name & title, Dashboard name & title as well. There are certain keys specified respectively in the file to do the changes accordingly.
If user needs to change any of the values inside the UI config file, they need to go to specified location directory as shown below and do the changes
dashboard_header1_title : This key is used to change the title of the cQube application page mentioned on the header
dashboard_header1_image : This key is used to change the image of the cQube application page mentioned on the header. Need to upload the image into the specified directory dashboard-ms > src > assets > images
dashboard_header2_title : This key is used to change the title of the cQube application state name header title mentioned on the header
dashboard_header2_image1 : This key is used to change the image of the cQube application state mentioned on the header. Need to upload the image into the specified directory dashboard-ms > src > assets > images
dashboard_header2_image2 : This key is used to change the image of the cQube application ncert mentioned on the header. Need to upload the image into the specified directory dashboard-ms > src > assets > images
Menus Configuration
Menus configuration can be changed in the query-builder microservice. In this file (query-builder > menus.csv) users can change the menus sequence, program name etc. They need to add the required details mentioned in the csv to add a new menu into the UI layer. If they add/change any icon for the menu, they need to upload the icon images into the following directory dashboard-ms > src > assets > images
The sample csv filled is shown below,
Steps to Configure Keycloak after Installation
Step 1 : In a browser go to the <domain>/auth and go to Administration Console.
Step 2 : Enter the keycloak admin username and password that you have set as part of the cQube installation.
Step 3 : Navigate to the Clients Tab of the cQube Realm and select the client (cqube 5.0) created during the installation.
Step 4 : Fill the Valid Redirect URIs with the domain of the application followed by ‘/*’
Step 5 : Fill the Web Origins with the domain of the application
Step 6 : Turn on the Direct Access Grant Enabled and save the changes.
Steps to create an user
Step 1 : Navigate to Users tab
Step 2 : Click on the add User button
Step 3 : Enter the Username and save.
Step 4 : Navigate to the Credentials tab and Enter the required password, turn off the temporary password option and save.
Redeployment Steps
Run the below commands one after the other to redeploy the UI config file changes to take effect in Visualization
- sudo docker stop ansible_dashboard_app_1
- sudo docker rm ansible_dashboard_app_1 sudo
- docker dashboard_ms:1
- cd cqube-devops/microservices/dashboard-ms
- sudo git pull sudo docker build -t dashboard_ms:1 .
- sudo docker run -d -p 4200:80 --network ansible_cqube_net --name dashboard_app dashboard_ms:1
0 Comments