Skip to content

Instantly share code, notes, and snippets.

@jamescookie

jamescookie/pipeline.html

Created June 21, 2017 12:21
Show Gist options
  • Save jamescookie/3d68de26afdec759a047c1a8d170e09a to your computer and use it in GitHub Desktop.
Save jamescookie/3d68de26afdec759a047c1a8d170e09a to your computer and use it in GitHub Desktop.
Download ZIP
Jenkins pipeline view
Raw
pipeline.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pipeline Status</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<link rel="stylesheet" href="/plugin/build-monitor-plugin/styles/normalize.css">
<link rel="stylesheet" href="/plugin/build-monitor-plugin/themes/industrial.css">
<link rel="stylesheet" href="/build-monitor-plugin/style.css">
<style>
.widget {
min-width: 80%;
}
.pmp.build-monitor .project .progress {
animation-iteration-count: 1000;
}
</style>
<script type="text/javascript">
angular.module("pipeline", [])
.controller('builds', function ($scope, $http, $interval) {
$scope.refreshData = function () {
$scope.builds = [];
$http.get('/job/pmp-release-pipeline/wfapi/runs').then(
function (response) {
$scope.builds = response.data;
angular.forEach($scope.builds, function(build) {
switch(build.status) {
case "SUCCESS":
build.statusClass = "successful";
break;
case "FAILED":
build.statusClass = "failing";
build.slots = ['FAILED', build.stages.pop().name];
break;
case "ABORTED":
build.statusClass = "unknown";
break;
default:
build.statusClass = "successful";
build.inProgess = true;
var stage = build.stages.pop();
build.slots = [stage.status, stage.name];
}
});
}
);
};
$scope.refreshData();
$interval($scope.refreshData, 60000);
});
</script>
</head>
<body class="pmp build-monitor dashboard industrial">
<header>
<a href="/" title="Jenkins" class="home-link">Jenkins</a>
<h1><a>Pipeline Status</a></h1>
</header>
<main class="main" data-ng-app="pipeline">
<ul id="widgets" data-ng-controller="builds">
<li data-ng-repeat="build in builds" data-ng-class="build.statusClass" class="basic project widget">
<div class="progress" style="width: 100%" data-ng-show="build.inProgess"></div>
<header>
<h2>{{build.id}}</h2>
</header>
<div class="slots">
<div data-ng-repeat="slot in build.slots" data-ng-class="'slot-'+($index+1)" class="slot">
{{slot}}
</div>
</div>
</li>
</ul>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment