-
Notifications
You must be signed in to change notification settings - Fork 1
/
queue_monitoring.html
153 lines (130 loc) · 4.4 KB
/
queue_monitoring.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<!-- Anagular-char data -->
<link rel="stylesheet" href=
"https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css" type=
"text/css" />
<script src="https://cdn.rawgit.com/nnnick/Chart.js/master/Chart.min.js" type=
"text/javascript">
</script>
<script src=
"https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.js"
type="text/javascript">
</script>
<!-- Setting the size of the charts -->
<style>
.chart {
width: 500px;
height: 500px;
}
</style>
</head>
<body ng-controller="userController" >
<div class="container">
<hr>
<h3>Tasklog</h3>
<table class="table table-striped">
<tr>
<th>Created</th>
<th>Duration (s)</th>
<th>Problem</th>
<th>User</th>
<th>Verifier</th>
</th>
<tr ng-repeat="item in tasklog | orderBy:created:reverse | limitTo:10">
<td>{{item.created}}</td>
<td>{{item.duration / 1000}}</td>
<td>{{item.problem}}</td>
<td>{{item.user}}</td>
<td>{{item.reserved_by}}</td>
</tr>
</table>
<hr>
Show duration chart
<input type="checkbox" ng-model="showchart">
Show live queue
<input type="checkbox" ng-model="showqueue">
<div class="panel panel-default" ng-show="showchart">
<div class="panel-heading">
Chart
</div>
<!--
class="chart chart-line"
class="chart chart-bar"
-->
<div class="panel-body">
<canvas id="line" class="chart chart-bar" options="bar_chart_options" data="data" labels="labels" legend="true" click="onClick" series="series"></canvas>
</div>
</div>
<div ng-show="showqueue">
<h3>Taskqueue</h3>
<table class="table table-striped">
<tr>
<th>User</th>
<th>Version</th>
<th>Problem</th>
<th>Reserved by</th>
</tr>
<tr ng-repeat="(k,v) in taskqueue">
<td>{{k}}</td>
<td>{{v.version}}</td>
<td>{{v.problem}}</td>
<td>{{v.reserved_by}}</td>
</tr>
</table>
</div>
</div> <!-- container -->
<br><br><br><br><br><br><br><br><br><br><br><br>
<script>
var myApp = angular.module("myApp", ["firebase","chart.js"]);
myApp.controller('userController', ['$scope', '$firebase',
function($scope, $firebase) {
$scope.showchart = true;
$scope.showqueue = true;
// Here is where you update your Firebase URL.
var theFirebaseURL = "https://verifier.firebaseio.com";
var ref = new Firebase(theFirebaseURL);
$scope.taskqueue = $firebase(ref.child("taskqueue")).$asObject();
//Another way to use angularfire.
var testRef= new Firebase("https://verifier.firebaseio.com/tasklog").orderByChild("created").limit(30);
$scope.tasklog = $firebase(testRef).$asArray();
$scope.bar_chart_options = {"animation" : false};
// angular-charts starter data shown before first click.
$scope.labels = [];
$scope.series = ['Durations'];
$scope.data = [
[]
];
$scope.update_the_chart = function(){
console.log("Updating the chart.");
var new_labels = [];
var new_data = [[]];
//you can have multiple lines or bars for each X value.
//$scope.data = [$scope.myCounters, $scope.myCounters];
for(var i=0, len = $scope.tasklog.length; i < len; i++) {
new_labels.push($scope.tasklog[i].user);
new_data[0].push($scope.tasklog[i].duration / 1000);
}
$scope.data = new_data;
$scope.labels = new_labels;
};
$scope.onClick = function (points, evt) {
$scope.update_the_chart();
};
$scope.tasklog.$loaded().then(function() {
$scope.update_the_chart();
});
var unwatch_counters = $scope.tasklog.$watch(function() {
console.log("counter data changed!");
$scope.update_the_chart();
});
//unwatch_counters();
}]); //close the controller and module.
</script>
</body>
</html>