2020-05-09 13:04:38 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Wabbajack Metrics</title>
|
|
|
|
|
|
<script
|
2021-10-23 16:51:17 +00:00
|
|
|
|
crossorigin="anonymous"
|
2020-05-09 13:04:38 +00:00
|
|
|
|
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
2021-10-23 16:51:17 +00:00
|
|
|
|
src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
2020-05-09 13:04:38 +00:00
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Finished Install Counts</h2>
|
2021-10-23 16:51:17 +00:00
|
|
|
|
<canvas height="600" id="finished_install_count" width="800"></canvas>
|
2020-05-09 13:04:38 +00:00
|
|
|
|
<hr/>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Begin Download</h2>
|
2021-10-23 16:51:17 +00:00
|
|
|
|
<canvas height="600" id="begin_download_chart" width="800"></canvas>
|
2020-05-09 13:04:38 +00:00
|
|
|
|
<hr/>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Begin Install</h2>
|
2021-10-23 16:51:17 +00:00
|
|
|
|
<canvas height="600" id="begin_install_chart" width="800"></canvas>
|
2020-05-09 13:04:38 +00:00
|
|
|
|
<hr/>
|
|
|
|
|
|
|
|
|
|
|
|
<h2>Finished Install</h2>
|
2021-10-23 16:51:17 +00:00
|
|
|
|
<canvas height="600" id="finished_install_chart" width="800"></canvas>
|
2020-05-09 13:04:38 +00:00
|
|
|
|
<hr/>
|
|
|
|
|
|
|
2020-05-10 05:15:25 +00:00
|
|
|
|
<h2>Started Wabbajack</h2>
|
2021-10-23 16:51:17 +00:00
|
|
|
|
<canvas height="600" id="started_wabbajack_chart" width="800"></canvas>
|
2020-05-10 05:15:25 +00:00
|
|
|
|
<hr/>
|
|
|
|
|
|
|
2021-02-06 16:43:11 +00:00
|
|
|
|
<h2>Exceptions</h2>
|
2021-10-23 16:51:17 +00:00
|
|
|
|
<canvas height="600" id="exceptions_chart" width="800"></canvas>
|
2021-02-06 16:43:11 +00:00
|
|
|
|
<hr/>
|
|
|
|
|
|
|
|
|
|
|
|
|
2020-05-09 13:04:38 +00:00
|
|
|
|
<script>
|
2021-02-06 16:43:11 +00:00
|
|
|
|
|
2021-12-01 22:53:32 +00:00
|
|
|
|
var getReport = function (subject, from, callback) {
|
|
|
|
|
|
$.getJSON("/metrics/report/?action=" + subject + "&from=" + from + "&to=now", callback)
|
2020-05-09 13:04:38 +00:00
|
|
|
|
}
|
2021-02-06 16:43:11 +00:00
|
|
|
|
|
2021-10-23 16:51:17 +00:00
|
|
|
|
var makeChart = function (ele, group) {
|
2020-05-09 13:04:38 +00:00
|
|
|
|
|
|
|
|
|
|
var result_fn = function (data) {
|
2021-12-01 22:53:32 +00:00
|
|
|
|
var labels = _.map(data, f => f._Timestamp);
|
|
|
|
|
|
var datasets = _.map(_.filter(Object.keys(data[0]), key => key !== "_Timestamp"), key => {
|
2021-02-06 16:43:11 +00:00
|
|
|
|
return {
|
2021-12-01 22:53:32 +00:00
|
|
|
|
label: key,
|
2021-02-06 16:43:11 +00:00
|
|
|
|
fill: false,
|
2021-12-01 22:53:32 +00:00
|
|
|
|
data: _.map(data, row => row[key])
|
2021-10-23 16:51:17 +00:00
|
|
|
|
}
|
|
|
|
|
|
});
|
2021-02-06 16:43:11 +00:00
|
|
|
|
var ctx = document.getElementById(ele).getContext('2d');
|
|
|
|
|
|
var chart = new Chart(ctx, {
|
|
|
|
|
|
// The type of chart we want to create
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
|
|
|
|
|
|
// The data for our dataset
|
|
|
|
|
|
data: {
|
|
|
|
|
|
labels: _.last(labels, 90),
|
2021-10-23 16:51:17 +00:00
|
|
|
|
datasets: datasets
|
|
|
|
|
|
},
|
2021-02-06 16:43:11 +00:00
|
|
|
|
|
|
|
|
|
|
// Configuration options go here
|
2021-10-23 16:51:17 +00:00
|
|
|
|
options: {scales: {xAxes: [{stacked: true}], yAxes: [{stacked: true}]}}
|
2021-02-06 16:43:11 +00:00
|
|
|
|
});
|
|
|
|
|
|
};
|
2021-12-01 22:53:32 +00:00
|
|
|
|
getReport(group, "30 days ago", result_fn);
|
2020-05-09 13:04:38 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-10-23 16:51:17 +00:00
|
|
|
|
var makePieChart = function (ele, group) {
|
2020-05-09 13:04:38 +00:00
|
|
|
|
|
|
|
|
|
|
var result_fn = function (data) {
|
2021-12-01 22:53:32 +00:00
|
|
|
|
const counts = {};
|
|
|
|
|
|
for (var row of data) {
|
|
|
|
|
|
for (var key of Object.keys(row)) {
|
|
|
|
|
|
if (key === "_Timestamp") continue;
|
|
|
|
|
|
counts[key] = (counts[key] || 0) + row[key]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2021-02-06 16:43:11 +00:00
|
|
|
|
var ctx = document.getElementById(ele).getContext('2d');
|
|
|
|
|
|
var chart = new Chart(ctx, {
|
|
|
|
|
|
// The type of chart we want to create
|
|
|
|
|
|
type: 'pie',
|
2021-12-01 22:53:32 +00:00
|
|
|
|
|
2021-02-06 16:43:11 +00:00
|
|
|
|
// The data for our dataset
|
|
|
|
|
|
data: {
|
2021-12-01 22:53:32 +00:00
|
|
|
|
labels: Object.keys(counts),
|
|
|
|
|
|
datasets: [{
|
|
|
|
|
|
label: "Data",
|
|
|
|
|
|
data: Object.values(counts)
|
|
|
|
|
|
}]
|
2021-10-23 16:51:17 +00:00
|
|
|
|
},
|
2021-02-06 16:43:11 +00:00
|
|
|
|
|
|
|
|
|
|
// Configuration options go here
|
|
|
|
|
|
options: {}
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
2021-12-01 22:53:32 +00:00
|
|
|
|
getReport(group, "10 years ago", result_fn)
|
2020-05-09 13:04:38 +00:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
makeChart("begin_download_chart", "downloading");
|
|
|
|
|
|
makeChart("begin_install_chart", "begin_install");
|
|
|
|
|
|
makeChart("finished_install_chart", "finish_install");
|
2020-05-10 05:15:25 +00:00
|
|
|
|
makeChart("started_wabbajack_chart", "started_wabbajack");
|
2021-02-06 16:43:11 +00:00
|
|
|
|
makeChart("exceptions_chart", "Exception");
|
2020-05-09 13:04:38 +00:00
|
|
|
|
makePieChart("finished_install_count", "finish_install");
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
