jamescookie/pipeline.html

## 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>
	<!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>