Overview
Jenkins is an open-source Java-based third-party server, which provides a content-based dashboard and helps organisations to build, test, and deploy their projects automatically for each & every change and commits they made in their files or projects.
React-D3 is a Javascript library for building reusable components and interactive charts. React-D3 is a highly composable and declarative chart library, and you can create different types of charts such as line chart or bar chart and many more.
Problem Statement
Jenkins already offers a handful of third-party dashboards with many features that an organisation and user need to builds, test, and deploy their software, but the existing dashboard is
-
Less Interactive and Flexible
-
No Proper listing of Projects, Jobs, Builds, and Builds Status
-
Content Based Dashboard with less Visualizations
Solution Offered
Implementing a read-only dashboard for Jenkins using Jenkins REST API for data, and React.JS and D3.JS Charts to build a flexible, interactive, graphical Jenkins Dashboard.
Some of the primary key features of React.JS Based Jenkins Dashboard are -
-
Responsive, Cross browser & flexible Dashboard UI.
-
Manipulate the REST API data as per our requirement.
-
Live data update according to the existing Jenkins Dashboard .
-
Graph-based view of data using React D3 Charts libraries.
-
Filter based view of data(like last 15, 30 days, or custom date range, builds status & many more).
-
Quickly get the status of our last committed changes or Jobs and many more.
First, we integrate D3 Charts Library with the React Application
Next, we use the Jenkins REST API and manipulate them to visualize different types of charts and data in the dashboard.