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-10-23 16:51:17 +00:00
|
|
|
|
var getReport = function (subject, callback) {
|
|
|
|
|
|
$.getJSON("/metrics/report/" + subject, 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-02-06 16:43:11 +00:00
|
|
|
|
var data = _.filter(data, series => _.some(series.values, v => v > 1));
|
|
|
|
|
|
var labels = _.uniq(_.flatten(_.map(data, series => series.labels)));
|
|
|
|
|
|
var datasets = _.map(data, series => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
label: series.seriesName,
|
|
|
|
|
|
fill: false,
|
|
|
|
|
|
data: _.last(series.values, 90)
|
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
|
|
|
|
});
|
|
|
|
|
|
};
|
2020-05-09 13:04:38 +00:00
|
|
|
|
getReport(group, result_fn);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
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-02-06 16:43:11 +00:00
|
|
|
|
var data = _.filter(data, series => _.some(series.values, v => v > 2));
|
|
|
|
|
|
var labels = _.map(data, series => series.seriesName);
|
2021-10-23 16:51:17 +00:00
|
|
|
|
var datasets = {
|
|
|
|
|
|
data: _.map(data, series => {
|
|
|
|
|
|
return _.reduce(series.values, (x, y) => x + y, 0)
|
|
|
|
|
|
})
|
|
|
|
|
|
};
|
2021-02-06 16:43:11 +00:00
|
|
|
|
console.log(datasets);
|
|
|
|
|
|
console.log(labels);
|
|
|
|
|
|
var ctx = document.getElementById(ele).getContext('2d');
|
|
|
|
|
|
var chart = new Chart(ctx, {
|
|
|
|
|
|
// The type of chart we want to create
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
|
|
|
|
|
|
// The data for our dataset
|
|
|
|
|
|
data: {
|
|
|
|
|
|
labels: labels,
|
2021-10-23 16:51:17 +00:00
|
|
|
|
datasets: [datasets]
|
|
|
|
|
|
},
|
2021-02-06 16:43:11 +00:00
|
|
|
|
|
|
|
|
|
|
// Configuration options go here
|
|
|
|
|
|
options: {}
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
2020-05-09 13:04:38 +00:00
|
|
|
|
getReport(group, result_fn)
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
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>
|
