UI Customisations
Describes how customisations on the dashboard (UI) layer of cQube Ed v5.0 can be made
There are 5 configurations enabled here for the dashboard pages.
All of these configurations will be done in the UI configuration file, which can be found in the dashboard-ms micro service. You can access this file in this manner: dashboard-ms > src > assets > config > ui_config.json.
There are certain keys specified for respective configuration to be changed as mentioned below. If there is a need to change any of these configurations, the users need to go to specified location directory (in ui_config.json) as shown below and make the changes:
- 1.dashboard_header1_title : This key is used to change the title of the cQube dashboard page mentioned at the top. It is depicted in the image below:
dashboard_header1_title - 2.dashboard_header1_image : This key is used to change the image of the cQube dashboard page present at the top. The size of the image should be 32px * 32px. It is depicted in the image below:
dashboard_header1_image
The user needs to upload the image into the specified directory: dashboard-ms > src > assets > images
- 3.dashboard_header2_title : This key is used to change the state name in the title of the cQube dashboard. It is depicted in the image below:
dashboard_header2_title
- 4.dashboard_header2_image1 : This key is used to change the first image next to the title of the cQube dashboard. The size of the image should be 45px * <Any>. It is depicted in the image below:
dashboard_header2_image1
The user needs to upload the image into the specified directory: dashboard-ms > src > assets > images
- 5.dashboard_header2_image2 : This key is used to change the second image next to the title of the cQube dashboard. The size of the image should be 45px * 45px. It is depicted in the image below:
dashboard_header2_image2
The user needs to upload the image into the specified directory: dashboard-ms > src > assets > images
Post making the changes, the user needs to redeploy the code again as explained below.
Run the commands below in the given order to redeploy the UI config file changes for them to be reflected in the visualisation layer:
sudo docker stop ansible_dashboard_app_1sudo docker rm ansible_dashboard_app_1 sudo docker dashboard_ms:1cd cqube-devops/microservices/dashboard-mssudo 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:1The name of the programs, icons and sequence of the side menubar can be changed as explained below.
This can be changed in the menu configuration file present in the query-builder micro service (query-builder > menus.csv).
The users can change the menu sequence and program name in this file. They need to add the required details mentioned in the CSV to add a new program in the menu bar. 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:
Post making the changes, the user needs to redeploy the code again as explained below.
Run the commands below in the given order to redeploy the menus.csv file changes for them to be reflected in the visualisation layer:
sudo docker stop ansible_querybuilder_app_1sudo docker rm ansible_querybuilder_app_1sudo docker querybuilder_ms:1cd cqube-devops/microservices/querybuilder-mssudo git pullsudo docker build -t querybuilder_ms:1sudo docker run -d -p 3002:3002 --network ansible_cqube_net --name querybuilder_app querybuilder_ms:1