The UI Layer represents The Hygieia Executive Dashboard’s front-end and contains GUI elements for users to view and configure the DevOps tools on the dashboard.

The Hygieia dashboard requires installation of:

  • nvm
  • Node JS
  • npm

To set up the UI layer, execute the following steps:

  • Step 1: Install nvm

    Download and install the nvm package for your platform.

    Close and reopen your terminal to start using nvm.

  • Step 2: Install node

    To install Node, open terminal and execute the following command:

    nvm install 8.9.1

    Test whether Node is installed by running the following in the terminal:

    node -e "console.log('Running Node.js ' + process.version)"
  • Step 3: Configure the UI

    a. In the ui/package.json, add the following lines in the scripts section:

       # Run the UI on <port_number>, and bind it to the all the interfaces (IPs):
       "local": "ng serve --host= --port=<port_number> --proxy-config=proxy.config.json --env=local",
       "prod": "ng serve --host= --port=<port_number> --proxy-config=proxy.config.json --env=prod"
       # --port - the ui comes up on this port

    b. Update ui/proxy.config.json as follows:

      			"/api" : {
    	"target": "http://<host_ip>:<port of the server running the api>",
    	"changeOrigin": true,
    	"secure": false,
    	"logLevel": "debug",
    	"pathRewrite": {"^/api": "http://<host_ip>:<port of the server running the api>"}

    c. Update the apiUrl property in the environment.ts, environment.local.ts and file at /ui/src/environments/ as follows:

    apiUrl: '/api'
  • Step 4: Run the UI

    In the terminal, navigate to /UI and execute the following commands to install and run npm:

    npm install
    npm run local

    The dashboard will serve up on the port you configured in Step 3a.