wabbajack/Wabbajack.BuildServer/public/metrics.html
2020-01-09 16:19:07 -07:00

77 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wabbajack Metrics</title>
<script src="//cdn.jsdelivr.net/npm/graphql.js@0.6.6/graphql.min.js"></script>
<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>Begin Download</h2>
<canvas id="begin_download_chart" width="800" height="600"></canvas>
<hr/>
<h2>Begin Install</h2>
<canvas id="begin_install_chart" width="800" height="600"></canvas>
<hr/>
<h2>Finished Install</h2>
<canvas id="finished_install_chart" width="800" height="600"></canvas>
<hr/>
<script>
var makeChart = function(ele, group) {
var graph = graphql("/graphql",
{
method: "POST",
asJSON: true,
headers: {
"Content-Type": "application/json"
}
});
var metrics = graph.query(`($type: MetricType) {
dailyUniqueMetrics(metric_type: $type)
{
seriesName,
labels,
values
}
}`);
var result = metrics({type: group})
.then(function (data) {
var data = data.dailyUniqueMetrics;
var labels = _.uniq(_.flatten(_.map(data, series => series.labels))).sort();
var datasets = _.map(data, series => {
return {
label: series.seriesName,
fill: false,
data: series.values
}});
var ctx = document.getElementById(ele).getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: datasets},
// Configuration options go here
options: {}
});
});
};
makeChart("begin_download_chart", "BEGIN_DOWNLOAD");
makeChart("begin_install_chart", "BEGIN_INSTALL");
makeChart("finished_install_chart", "FINISHED_INSTALL");
</script>
</body>
</html>