diff --git a/CMakeLists.txt b/CMakeLists.txt
index c3aa7fe..3f8b4c7 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -71,15 +71,13 @@ file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router
js/vue-router.min.js EXPECTED_MD5 5d3e35710dbe02de78c39e3e439b8d4e)
file(DOWNLOAD https://raw.githubusercontent.com/drudru/ansi_up/v1.3.0/ansi_up.js
js/ansi_up.js EXPECTED_MD5 158566dc1ff8f2804de972f7e841e2f6)
-file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
- js/Chart.min.js EXPECTED_MD5 0d3004601c1a855a3d203502549528a7)
-file(DOWNLOAD https://raw.githubusercontent.com/tomsouthall/Chart.HorizontalBar.js/v1.04/Chart.HorizontalBar.js
- js/Chart.HorizontalBar.js EXPECTED_MD5 95070a38e69bc56534e1b2086d985270)
+file(DOWNLOAD https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
+ js/Chart.min.js EXPECTED_MD5 f6c8efa65711e0cbbc99ba72997ecd0e)
file(DOWNLOAD https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
css/bootstrap.min.css EXPECTED_MD5 5d5357cb3704e1f43a1f5bfed2aebf42)
# ...and compile them
generate_compressed_bins(${CMAKE_BINARY_DIR} js/vue-router.min.js js/vue.min.js
- js/ansi_up.js js/Chart.min.js js/Chart.HorizontalBar.js css/bootstrap.min.css)
+ js/ansi_up.js js/Chart.min.js css/bootstrap.min.css)
# (see resources.cpp where these are fetched)
## Server
diff --git a/src/resources.cpp b/src/resources.cpp
index 325995b..e7bd45d 100644
--- a/src/resources.cpp
+++ b/src/resources.cpp
@@ -37,13 +37,11 @@ Resources::Resources()
INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG);
INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG);
INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS);
- INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/vue.min.js", js_vue_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/vue-router.min.js", js_vue_router_min_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/ansi_up.js", js_ansi_up_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/js/Chart.min.js", js_Chart_min_js, CONTENT_TYPE_JS);
- INIT_RESOURCE("/js/Chart.HorizontalBar.js", js_Chart_HorizontalBar_js, CONTENT_TYPE_JS);
INIT_RESOURCE("/css/bootstrap.min.css", css_bootstrap_min_css, CONTENT_TYPE_CSS);
}
diff --git a/src/resources/index.html b/src/resources/index.html
index 571d02f..95de2d2 100644
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -12,7 +12,6 @@
-
diff --git a/src/resources/js/app.js b/src/resources/js/app.js
index 8b18cdc..5a70cfd 100644
--- a/src/resources/js/app.js
+++ b/src/resources/js/app.js
@@ -177,8 +177,8 @@ const Home = function() {
var chtUtilization, chtBuildsPerDay, chtBuildsPerJob, chtTimePerJob;
var updateUtilization = function(busy) {
- chtUtilization.segments[0].value += busy ? 1 : -1;
- chtUtilization.segments[1].value -= busy ? 1 : -1;
+ chtUtilization.data.datasets[0].data[0] += busy ? 1 : -1;
+ chtUtilization.data.datasets[0].data[1] -= busy ? 1 : -1;
chtUtilization.update();
}
@@ -196,69 +196,63 @@ const Home = function() {
this.$forceUpdate();
// setup charts
- chtUtilization = new Chart(document.getElementById("chartUtil").getContext("2d")).Pie(
- [{
- value: msg.executorsBusy,
- color: "tan",
- label: "Busy"
- },
- {
- value: msg.executorsTotal - msg.executorsBusy,
- color: "darkseagreen",
- label: "Idle"
- }
- ], {
- animationEasing: 'easeInOutQuad'
+ chtUtilization = new Chart(document.getElementById("chartUtil"), {
+ type: 'pie',
+ data: {
+ labels: ["Busy", "Idle"],
+ datasets: [{
+ data: [ msg.executorsBusy, msg.executorsTotal - msg.executorsBusy ],
+ backgroundColor: ["tan", "darkseagreen"]
+ }]
+ }
+ });
+ chtBuildsPerDay = new Chart(document.getElementById("chartBpd"), {
+ type: 'line',
+ data: {
+ labels: (()=>{
+ res = [];
+ var now = new Date();
+ for (var i = 6; i >= 0; --i) {
+ var then = new Date(now.getTime() - i * 86400000);
+ res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]);
+ }
+ return res;
+ })(),
+ datasets: [{
+ label: 'Successful Builds',
+ backgroundColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65
+ borderColor: "forestgreen",
+ data: msg.buildsPerDay.map((e)=>{ return e.success || 0; })
+ }, {
+ label: 'Failed Builds',
+ backgroundColor: "rgba(233,150,122,0.65)", //darkseagreen at 0.65
+ borderColor: "crimson",
+ data: msg.buildsPerDay.map((e)=>{ return e.failed || 0; })
+ }]
+ }
+ });
+ chtBuildsPerJob = new Chart(document.getElementById("chartBpj"), {
+ type: 'horizontalBar',
+ data: {
+ labels: Object.keys(msg.buildsPerJob),
+ datasets: [{
+ label: 'Most runs per job in last 24hrs',
+ backgroundColor: "lightsteelblue",
+ data: Object.keys(msg.buildsPerJob).map((e)=>{ return msg.buildsPerJob[e]; })
+ }]
+ }
+ });
+ chtTimePerJob = new Chart(document.getElementById("chartTpj"), {
+ type: 'horizontalBar',
+ data: {
+ labels: Object.keys(msg.timePerJob),
+ datasets: [{
+ label: 'Longest average runtime this week',
+ backgroundColor: "lightsteelblue",
+ data: Object.keys(msg.timePerJob).map((e)=>{ return msg.timePerJob[e]; })
+ }]
}
- );
- chtBuildsPerDay = new Chart(document.getElementById("chartBpd").getContext("2d")).Line({
- labels: function() {
- res = [];
- var now = new Date();
- for (var i = 6; i >= 0; --i) {
- var then = new Date(now.getTime() - i * 86400000);
- res.push(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][then.getDay()]);
- }
- return res;
- }(),
- datasets: [{
- label: "Successful Builds",
- fillColor: "rgba(143,188,143,0.65)", //darkseagreen at 0.65
- strokeColor: "forestgreen",
- data: msg.buildsPerDay.map(function(e) {
- return e.success || 0;
- })
- }, {
- label: "Failed Bulids",
- fillColor: "rgba(233,150,122,0.65)", //darksalmon at 0.65
- strokeColor: "crimson",
- data: msg.buildsPerDay.map(function(e) {
- return e.failed || 0;
- })
- }]
- }, {
- showTooltips: false
});
- chtBuildsPerJob = new Chart(document.getElementById("chartBpj").getContext("2d")).HorizontalBar({
- labels: Object.keys(msg.buildsPerJob),
- datasets: [{
- fillColor: "lightsteelblue",
- data: Object.keys(msg.buildsPerJob).map(function(e) {
- return msg.buildsPerJob[e];
- })
- }]
- }, {});
- chtTimePerJob = new Chart(document.getElementById("chartTpj").getContext("2d")).HorizontalBar({
- labels: Object.keys(msg.timePerJob),
- datasets: [{
- fillColor: "lightsteelblue",
- data: Object.keys(msg.timePerJob).map(function(e) {
- return msg.timePerJob[e];
- })
- }]
- }, {});
-
-
},
job_queued: function(data) {
state.jobsQueued.splice(0, 0, data);
@@ -272,9 +266,9 @@ const Home = function() {
},
job_completed: function(data) {
if (data.result === "success")
- chtBuildsPerDay.datasets[0].points[6].value++;
+ chtBuildsPerDay.data.datasets[0].data[6]++;
else
- chtBuildsPerDay.datasets[1].points[6].value++;
+ chtBuildsPerDay.data.datasets[1].data[6]++;
chtBuildsPerDay.update();
for (var i = 0; i < state.jobsRunning.length; ++i) {
@@ -287,9 +281,9 @@ const Home = function() {
}
}
updateUtilization(false);
- for (var j = 0; j < chtBuildsPerJob.datasets[0].bars.length; ++j) {
- if (chtBuildsPerJob.datasets[0].bars[j].label == job.name) {
- chtBuildsPerJob.datasets[0].bars[j].value++;
+ for (var j = 0; j < chtBuildsPerJob.data.datasets[0].data.length; ++j) {
+ if (chtBuildsPerJob.data.labels[j] == job.name) {
+ chtBuildsPerJob.data.datasets[0].data[j]++;
chtBuildsPerJob.update();
break;
}
@@ -426,27 +420,27 @@ var Job = function() {
state.pages = msg.pages;
state.page = msg.page;
- var chtBt = new Chart(document.getElementById("chartBt").getContext("2d")).Bar({
- labels: msg.recent.map(function(e) {
- return '#' + e.number;
- }).reverse(),
- datasets: [{
- fillColor: "darkseagreen",
- strokeColor: "forestgreen",
- data: msg.recent.map(function(e) {
- return e.completed - e.started;
- }).reverse()
- }]
- }, {
- barValueSpacing: 1,
- barStrokeWidth: 1,
- barDatasetSpacing: 0
+ var chtBt = new Chart(document.getElementById("chartBt"), {
+ type: 'bar',
+ data: {
+ labels: msg.recent.map(function(e) {
+ return '#' + e.number;
+ }).reverse(),
+ datasets: [{
+ label: 'Build time',
+ backgroundColor: (new Array(msg.recent.length)).fill('darkseagreen'),
+ borderColor: (new Array(msg.recent.length)).fill('forestgreen'),
+ data: msg.recent.map(function(e) {
+ return e.completed - e.started;
+ }).reverse()
+ }]
+ }
});
for (var i = 0, n = msg.recent.length; i < n; ++i) {
if (msg.recent[i].result != "success") {
- chtBt.datasets[0].bars[n - i - 1].fillColor = "darksalmon";
- chtBt.datasets[0].bars[n - i - 1].strokeColor = "crimson";
+ chtBt.data.datasets[0].backgroundColor[n - i - 1] = "darksalmon";
+ chtBt.data.datasets[0].borderColor[n - i - 1] = "crimson";
}
}
chtBt.update();