Skip to content
Zero-interaction dashboard
JavaScript CSS HTML
Branch: github
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
art
public
src
.gitignore
README.md
demo.png
legend-black.svg
package.json
vscode.code-workspace
yarn.lock

README.md

Sites monitor

This is a site-status dashboard that my team projects on one wall of our office. It uses React to visualize data from Jenkins and from our Barracuda load balancer. It provides cheerful reassurance that all our sites are still up; if one of them goes down, it lets us know which site has gone down and which servers are responsible. It's designed to monitor a large number of sites with no interaction -- when something goes wrong it will tell you where to look without a single keypress or mouse click.

Demo

Legend

Legend

Data is fetched from the loadBalancerUrl and the jenkinsUrl (on lines 10-11 of src/App.jsx) every 30 seconds. After the first 30-second cycle, the legend will be hidden to make more room for the Jenkins log.

Data has been cached for this public demo, and the names of our servers have been redacted.

Usage

Run npm start to start the development server. npm run build will build it for production.

Use your browser's zoom function (Ctrl/Cmd + scrollwheel) to adjust things to fit on your display.

Important files in /src

  • App.jsx: All the networking and data-processing logic, and the app's overall layout.
  • App.scss: Stylesheet
  • System.jsx: React component visualizing a System, which is a service (site) and the servers that keep it live. Systems may also show a diamond that represents the most recent Jenkins build (defined in Diamond.jsx). Systems are organized into Groups defined by the load balancer.
  • JenkinsLog.jsx: Displays recent builds from Jenkins. The number of recent builds is determined by const numJenkinsBuildsToShow in App.jsx.
You can’t perform that action at this time.