Add the build worker and job count information to the charts
This commit is contained in:
parent
63cd6ffcc3
commit
d359c849cd
9 changed files with 134 additions and 9 deletions
|
@ -1,4 +1,17 @@
|
|||
<div class="ps-usage-graph-element">
|
||||
Build Workers:
|
||||
<div class="realtime-area-chart"
|
||||
data="[data.build.job_total, data.build.running_total]"
|
||||
labels="['Queued Build Jobs', 'Running Build Jobs']"
|
||||
colors="['rgb(157, 194, 211)', 'rgb(56, 122, 163)']"
|
||||
counter="counter"></div>
|
||||
|
||||
<div class="realtime-area-chart"
|
||||
data="[data.build.job_total, data.build.workers, data.build.running_local]"
|
||||
labels="['Queued Build Jobs', 'Build Workers (local)', 'Running Build Jobs (local)']"
|
||||
colors="['rgb(157, 194, 211)', 'rgb(161, 208, 93)', 'rgb(210, 237, 130)']"
|
||||
counter="counter"></div>
|
||||
|
||||
CPU:
|
||||
<div class="realtime-line-chart" data="data.count.cpu" counter="counter"
|
||||
label-template="CPU #{x} %"></div>
|
||||
|
|
3
static/directives/realtime-area-chart.html
Normal file
3
static/directives/realtime-area-chart.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<div class="realtime-area-chart-element">
|
||||
<div class="chart" style="width: 450px; height: 250px;"></div>
|
||||
</div>
|
|
@ -6522,6 +6522,81 @@ quayApp.directive('locationView', function () {
|
|||
});
|
||||
|
||||
|
||||
quayApp.directive('realtimeAreaChart', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
templateUrl: '/static/directives/realtime-area-chart.html',
|
||||
replace: false,
|
||||
transclude: false,
|
||||
restrict: 'C',
|
||||
scope: {
|
||||
'data': '=data',
|
||||
'labels': '=labels',
|
||||
'colors': '=colors',
|
||||
'counter': '=counter'
|
||||
},
|
||||
controller: function($scope, $element) {
|
||||
var graph = null;
|
||||
var series = [];
|
||||
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum14' } );
|
||||
var colors = $scope.colors || [];
|
||||
|
||||
var setupGraph = function() {
|
||||
for (var i = 0; i < $scope.labels.length; ++i) {
|
||||
series.push({
|
||||
name: $scope.labels[i],
|
||||
color: i >= colors.length ? palette.color(): $scope.colors[i],
|
||||
stroke: 'rgba(0,0,0,0.15)',
|
||||
data: []
|
||||
});
|
||||
}
|
||||
|
||||
graph = new Rickshaw.Graph( {
|
||||
element: $element.find('.chart')[0],
|
||||
renderer: 'area',
|
||||
stroke: true,
|
||||
series: series,
|
||||
min: 0
|
||||
});
|
||||
};
|
||||
|
||||
var refresh = function(data) {
|
||||
if (!data || $scope.counter < 0) { return; }
|
||||
if (!graph) {
|
||||
setupGraph();
|
||||
}
|
||||
|
||||
for (var i = 0; i < $scope.data.length; ++i) {
|
||||
series[i].data.push(
|
||||
{'x': $scope.counter, 'y': $scope.data[i] }
|
||||
);
|
||||
}
|
||||
|
||||
hoverDetail = new Rickshaw.Graph.HoverDetail({
|
||||
graph: graph,
|
||||
xFormatter: function(x) {
|
||||
return x.toString();
|
||||
}
|
||||
});
|
||||
|
||||
graph.renderer.unstack = true;
|
||||
graph.render();
|
||||
};
|
||||
|
||||
$scope.$watch('counter', function() {
|
||||
refresh($scope.data_raw);
|
||||
});
|
||||
|
||||
$scope.$watch('data', function(data) {
|
||||
$scope.data_raw = data;
|
||||
refresh($scope.data_raw);
|
||||
});
|
||||
}
|
||||
};
|
||||
return directiveDefinitionObject;
|
||||
});
|
||||
|
||||
|
||||
quayApp.directive('realtimeLineChart', function () {
|
||||
var directiveDefinitionObject = {
|
||||
priority: 0,
|
||||
|
|
Reference in a new issue