1. Introduction to Hygieia

Hygieia℠ is a single, configurable, easy to use dashboard to visualize near real-time status of the entire delivery pipeline.

 

A typical project deals with Agile Project Management tool, Source Control, Continuous Integration (CI) tool, Testing tools, Static Code Analysis and Security Scanning tools, Deployment and Monitoring tools to name a few.

 

Large enterprises and complex systems sometimes use multiple CI, Testing and Scanning tools. Each of these has nice dashboards to present key information stored in it. But what is lacking is a single, comprehensive end-to-end view of the state of a delivery pipeline in near real time.

 

Hygieia is the solution & provides One Dashboard for the Entire CI/CD Pipeline

 

Features

  • Team Dashboard: Monitor things like workitems, code repo, builds, quality items (unit tests, security, coverage, etc.), and deployments in one dashboard.
  • Real-time Status: Monitor quality, productivity, and work in process on a real-time basis within the dashboard.
  • Configurable View: Set up the dashboard to display the widgets that matter most to your project, which helps amplify and shorten the feedback loop.
  • Open Source:Hygieia is open source and free for everyone to use. We also encourage external users to commit to the project.

 

1.1  Hyigiea Layers

There are 3 main Layers of Hygieia Dashboard

  1. UI Layer
  2. API Layer
  3. Collectors Layer

 

1.UI Layer

This layer is view level layer & displays the Daaashboard content to user.there are two types of Dashboards

 

a.Team Level Dashboard

 

b.Product Level Dashboard

 

 

2.API Layer

API is work as an Interface between Collector and UI.It contains the Controller classes, which helps to UI which Collector logic has to be execute whenever request comes from UI.

API module contains following major packages

  • Request: this package classes are used to store Request details
  • Rest :           this package classes contains Controller classes
  • Service : this package classes are used for send response to UI

 

 

3.Collector Layer

Ecah and every DevOps Tool having their own collector. For example Jenkins tool having its own collector call it as Jenkins Build Collector.The main job of the collector is, it will collects the Data from DevOps tool and save that data into the MongoDB

We have following Collectors in the latest version of Hygieia(2.0.4)

 

 

1.2 How Hygieia Dashboard Works

 

  1. Install & Congigure DevOps Tools in Hygiea Dashboard
  2. Collectors will collect the data from the DevOps tool based on the configuration
  3. Collector will convert the collected data into MongoDB data format
  4. Saves the converted data into MongoDB Collector
  5. UI calls the RestAPI call to get the Data from the Database
  6. RestAPI get the data from database and returns to UI
  7. UI will Displays the collected data in the Dashboard

 

 

2. Hygieia Dashboard Setup

To install & configure Hygieia Dashboard we need to install below Software Tools.

  1. Java
  2. Apache Maven
  3. Eclipse IDE for Java EE Developers
  4. MongoDB
  5. NodeJs
  6. Git
  7. RoboMongo (or) Admin Mongo

 

2.1 Install Java & Set JAVA_HOME

  1. Download Java JDK from Oracle Official website & Install It.

 

  1. Configure the JAVA_HOME Windows environment variables by specifying Java Installation Location

Control Panel →   User Accounts →   User Accounts →   Change my Environment Variables

 

  1. Also update the PATH variable with bin location

 

 

 

2.2 Install Apache Mavem & Set MAVEN_HOME

1.Download Apache Maven

Go to Maven official website, download the Maven zip file, Unzip It.

 

2.Configure the JAVA_HOME Windows environment variables by specifying Java Installation Location

Control Panel →   User Accounts →   User Accounts →   Change my Environment Variables

 

3.Add both M2_HOME and MAVEN_HOME as Windows environment variable & point it to Maven folder

 

4.Update PATH variable, append Maven bin folder – %M2_HOME%\bin, so that you can run the Maven’s command everywhere.

 

5.Verify Maven is installed properly or not by mvn –version command

 

 

6.Change PROXY Settings

If you are behind a proxy, Maven will fail to download any dependencies.in this type of situation we have to declare the proxy server setting in Maven configuration file settings.xml.

Find {M2_HOME}/conf/settings.xml, and put your proxies detail inside. Un-comment the proxy options and fill in your proxy server detail.

 

 

 

2.3 Configure Apache Maven in Eclipse

1. Download Eclipse IDE for Java EE Developers , Extract and Run Eclipse 

 

2.Copy maven installation path (Ex. C:\apache-maven-3.3.9)

Window → preferences → Maven → Installations == add maven path

 

 

3.Change Settings.xml file path

Window → preferences → Maven → User Settings

[img_check]

 

 

 

2.4 MongoDB Installation

Know your PC Architecture, Open Command prompt and run below command

C:>wmic os get osarchitecture

 

1.Download MongoDB

There are three builds of MongoDB for Windows:

 

2.Extract and create Folders

download zip files which you extract directly onto any place in your system of your choice. I have extracted them in d:/mongodb“.

Also, create following directories inside d:/mongodb

  • D:\mongodb\data
  • D:\mongodb\log

 

3.Path and Installation

Go to Control Panel →User Accounts →Change my Environment Variables →Add below Variables

MongoDB = D:\mongodb

                       D:\mongodb\bin

 

4.Create a MongoDB config file

Create new file,add below content to mongo.config in given location for Ex: d:\mongodb\mongo.config

 

5.Start/Shutdown the MongoDB Server

Start: Run below command in command prompt

  • d:\mongodb\bin>mongod –dbpath=D:/mongodb    (or)
  • d:\mongodb\bin>mongod.exe --config="D:\mongodb\mongo.config"

 

6.To run Commands on MongoDB

Open new commandline run mongo command

[img_check]

 


7.Create an User by running below commands on Mongo

select Database>use dashboarddb

Now we are Successfully Configured MongoDB

 

 

2.5 Install Git

Download & Install Git Client , add Update PATH variable

 

 

2.5 Install Node.Js

1.Download & Install Node.js from Nodejs Official website

2.Update Path variable with installed nodejs location

 

3.Open command Prompt run below commands one by one

 

 

4.If you are under the Proxy, then configure proxy settings in below files

  • Run “notepad .npmrc” and enter your proxy details

 

  • Run “notepad .gitconfig”, and enter your proxy details

 

  • Run “notepad .bowerrc” and enter your proxy details

 

  • If you are not foung npm folder in "C:\Users\YOUR_USER_Name\AppData\Roaming", then we have to manually create “npm” folder under

for this error : ‘bower’ is not recognized as an internal or external command

Go to C:\Users\USER_NAME\AppData\Roaming\npm, Copy this location add to PATH variable

 

2.6 RoboMongo (or) Admin Mongo

2.6.1 RoboMongo

Robomongo is a shell-centric cross-platform MongoDB management tool. Unlike most other MongoDB admin UI tools, Robomongo embeds the actual mongo shell in a tabbed interface with access to a shell command line as well as GUI interaction.

We can Download the RoboMongo from here , you can install it as easy as normal windows software

 

2.6.2 Admin Mongo

adminMongo is a cross platform user interface (GUI) to handle all your MongoDB connections/databases needs. adminMongo is fully responsive and should work on a range of devices.You can download adminMongo from Github.

Installation

  1. Navigate to folder & install adminMongo:  git clone https://github.com/mrvautin/adminMongo.git && cd adminMongo
  2. Install dependencies: npm install
  3. Start application: npm start or node app
  4. Visit http://127.0.0.1:1234 in your browser

 

 

3. How to Configure & Run Hygieia Dashboard

Download Hygieia Source code from Github (Hygieia 2.0.4 release )

https://github.com/capitalone/Hygieia/releases/

 

 

3.1 Run Maven Build

1.Update Settings.xml file at C:\apache-maven-3.3.9\conf if you are under proxy

 

2.Extract Hygieia-xxx.zip and Open. Make sure it contains following files

 

3.Open command prompt and go to Hygieia folder and run  one of the below mvn cmds

 

 

3.2 Install Bower & npm Packges on UI Folder

1.Open Hygieia\UI on command line

2.Issue the following commands via command line:

 

3.Navigate to your project root via command line and use the following command:

Use Git Shell to install bower in the following manner; do so from your project’s root directory:

 

 

 

4.Start the UI by running gulp serve on Hygieia\UI folder.

 

5.Open http://localhost:3000/ from browser, it will display the Dashboard

If we see above API is not connected. To connect with API we must run the api project. To do that we need to import the code to Eclipse. Follow below steps to do so.

 

 

 

3.3 Import code to Eclipse

1.Open Eclipse IDE

2.File → Import → Maven→ Existing Maven Projects, browse Downloaded Hygieia folder→  Finish

 

3.we will get Project structure as below like below

 

4.Update Maven Project by Selecting all → Right click → Maven Update → Ok

Now We are successfully Setup all the thing which are required for Running Hygieia Dashboard.So Let’s Move next step to Running Hygieia Dashboard

 

 

 

3.4 Steps to Running Hygieia Dashboard

 

3.4.1 Start MongoDB

First, we need to start MongoDB Database and Make sure it is Running

[img_check]

 

Check MongoDB is Started or not, by running mongo command on command-prompt

Blinking cursor means it is running.

 

 

3.4.2 Start “api”

Before we starting API we need add dashboard.properties file, change application.propeties file as per our requirement.

1.dashboard.properties(Path: Hygieia\api\dashboard.properties)

 

2.application.properties(Path: Hygieia\api\src\main\resources\application.properties)

 

 

3.Configure api run configurations by going,

api project → Go to src → com.capitalone.dashboard.Application.java →Rightclick→Run Configuartions → Java Application → go to arguments → program args : add

--spring.config.location=dashboard.properties 

[img_check]

 

 

4.Apply and Run the Application.

If we see the message “Tomcat started on port(s): 8080 (http)” means api is running successfully

 

 

3.4.3 Start “UI”

For Starting UI, Open nodejs command prompt, navigate to UI folder location & run gulp serve command

 

Hygieia people giving some sample Mock data to visualize dashboard. So for demo purpose i’m running gulp serve with mock data. For doing this we need run below command on UI folder

gulp serve --local true

 

Steps to See Hygieia Dashboard with Mock Data

1.Open http://localhost:3000/#/

2.Signup with username & password (minimum 6 characters); Ex: admin & 123456

3.Login with username & password

4.It will Display the dashboard homepage as below

 

5.Select on any Dashboard, it will displays that Dashboard data

 

Now we just run the Hygieia Dashboard with some Demo Data. If you want to run the Dashboard with real data, we need configure & run our own Collectors. Next step will explain how to configure and run any collector in hygieia dashboard

 

 

3.5 Steps to Configuring Any Collector

We have many collectors in hygiea like Bamboo, Jenkins,Sonar etc.,.but don’t worry! We can easily configure any hygieia collector because all collectors follows same steps. We need do some minor changes in application.properties file. That’s it

1.Select a collector (for Ex: jenkins-build-collector)

2.Rightclick on Project →Create → new File → application.properties

3.Copy sample application.properties file data from Github file to local application.properties & change the details as per our requirement

 

4.Right click on Project → Run As → Run configurations → Run Applciation.java

5.Open → Hygieia dashboard on webpage

6.Click on Configure Build Widget → select Jenkins/Hudson →save

7.It will display Jenkins data

 

References

 

https://github.com/capitalone/Hygieia

https://developer.capitalone.com/opensource-projects/hygieia

 

 

 

  • Steven Chau

    Hi,

    Thanks for the nice detail tutorial!
    I initially had problem with the setup as the instruction on Git is lacking lots of details.

    One question, I have set it up, gulp, mongodb, api tomcat are all up and running and I can bring up the page, but when I load the dashboard, I don’t see the mock data.
    Am I suppose to see a dashboard with Team and Product level dashboards as your screenshots at the very beginning?
    I am seeing just a Product Dashboard, like your last screenshot, where only one row of record named “Tertis”, but mine even without any data.

    Thanks
    Steven

  • gulp serve –local true is used for mockdata. The latest version mock data is just displaying product dashboard only. The official Hygeia it self not providing mockdata for team dashboard.

  • kumar

    fabulous blog with crystal clear explanation of steps to install and setup. Have you tried setup with docker ? if so paste those steps too..

    kumar.

  • Harinath D

    Awesome page !!! This page really help me lot to setup the Hygieia. only thing is i’m not getting data in “5.Select on any Dashboard, it will displays that Dashboard data” Can you please suggest what could be issue.

  • SH Nauman

    Hi,

    Thanks for sharing the content. However there are some problems as Jenkins doesnt show anything on widget with all your settings