diff options
-rw-r--r-- | index.html | 7 | ||||
-rw-r--r-- | js/main.js | 41 | ||||
-rw-r--r-- | logo.png | bin | 0 -> 7168 bytes | |||
-rw-r--r-- | partials/visualisation.html | 58 | ||||
-rw-r--r-- | style.css | 8 |
5 files changed, 101 insertions, 13 deletions
@@ -11,7 +11,12 @@ <script src="js/main.js"></script> </head> <body ng-app="ciat"> - <h1><em><a href="/#/">Baserock</a></em> <span>|</span> CIAT</h1> + <h1> + <a href="/#/"> + <img src="logo.png"> + </a> + <em>| C.I.A.T.: Continuous Integration and Automated Testing with Baserock</em> + </h1> <div class="content" ng-view> </div> </body> @@ -35,6 +35,10 @@ app.controller('VisualisationController', function($scope, $http, $q, $interval) function load() { $scope.steps = []; + $scope.integrations = []; + $scope.builds = []; + $scope.deploys = []; + $scope.tests = []; $http.get(apiBase + '/builders') .then(function(builders) { angular.forEach(builders.data, function(value, key) { @@ -55,11 +59,38 @@ app.controller('VisualisationController', function($scope, $http, $q, $interval) sourceStamps: response.data.sourceStamps, number: response.data.number }; - $scope.steps.push({ - name: key, - lastBuild: details, - data: value - }); + + if (key.indexOf("Integration") > -1) { + $scope.integrations.push({ + name: key, + lastBuild: details, + data: value + }); + } + else if (key.indexOf("Build") > -1) { + $scope.builds.push({ + name: key, + lastBuild: details, + data: value + }); + } + else if(key.indexOf("Deploy") > -1) { + $scope.deploys.push({ + name: key, + lastBuild: details, + data: value + }); + } + else if(key.indexOf("Test") > -1) { + $scope.tests.push({ + name: key, + lastBuild: details, + data: value + }); + } + + + $scope.steps.sort(function(a, b) { var left = parseInt(a.name.split('.', 1)); var right = parseInt(b.name.split('.', 1)); diff --git a/logo.png b/logo.png Binary files differnew file mode 100644 index 0000000..8de9e92 --- /dev/null +++ b/logo.png diff --git a/partials/visualisation.html b/partials/visualisation.html index f7a4555..4cb9c61 100644 --- a/partials/visualisation.html +++ b/partials/visualisation.html @@ -1,11 +1,59 @@ <div class="visualisation" ng-style="selected && {'top': '35%'}"> - <div class="box" - ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}" - ng-repeat="step in steps" - ng-click="select(step, $event)"> - {{step.name}} + + + <div class="row"> + + <div class="lane col-md-2"> + <h3>Change detection</h3> + </div> + + <div class="lane col-md-2"> + <h3>Integration</h3> + <div class="box" + ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}" + ng-repeat="step in integrations" + ng-click="select(step, $event)"> + {{step.name}} + </div> + </div> + + <div class="lane col-md-2"> + <h3>Build</h3> + <div class="box" + ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}" + ng-repeat="step in builds" + ng-click="select(step, $event)"> + {{step.name}} + </div> + </div> + + <div class="lane col-md-2"> + <h3>Provisioning</h3> + <div class="box" + ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}" + ng-repeat="step in deploys" + ng-click="select(step, $event)"> + {{step.name}} + </div> + </div> + + <div class="lane col-md-2"> + <h3>Automatic test</h3> + <div class="box" + ng-class="{'pass': step.lastBuild.success, 'active': step.data.state == 'building', 'fail': step.lastBuild.failed}" + ng-repeat="step in tests" + ng-click="select(step, $event)"> + {{step.name}} + </div> + </div> + + <div class="lane col-md-2"> + <h3>Publishing</h3> + </div> + </div> + <br /> <div class="detail" ng-show="selected" @@ -12,8 +12,8 @@ body { } h1 { - font-family: 'Sarpanch', sans-serif; - font-size: 32pt; + font-family: 'Courier New', monospace; + font-size: 20pt; border-bottom: 2px solid #f80; padding: 2.1em 1.5em 0.1em 1.5em; box-shadow: inset 0 0 60px 10px #111; @@ -53,6 +53,10 @@ h1>em>a:hover { border-radius: 0.5em; } +.lane.h3 { + color: white; +} + .box:hover { cursor: pointer; } |