2019-04-10 20:33:14 +02:00
|
|
|
{{define "admin_panel"}}
|
2019-02-25 22:53:09 +01:00
|
|
|
<!DOCTYPE html>
|
2020-01-17 20:32:21 +01:00
|
|
|
<html lang="en">
|
2019-02-25 22:53:09 +01:00
|
|
|
<head>
|
|
|
|
|
{{template "meta_tags" "Administrator panel"}}
|
|
|
|
|
{{template "user_style" .}}
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-07-07 10:11:18 +02:00
|
|
|
{{$isAdmin := .PixelAPI.UserIsAdmin}}
|
2019-09-17 23:38:40 +02:00
|
|
|
{{template "page_top" .}}
|
|
|
|
|
<div class="page_content">
|
2019-07-07 10:11:18 +02:00
|
|
|
{{if $isAdmin.IsAdmin}}
|
2019-09-17 23:38:40 +02:00
|
|
|
<h3>Bandwidth and views</h3>
|
|
|
|
|
<div class="highlight_dark">
|
2020-05-21 21:42:50 +02:00
|
|
|
<button onclick="setData(7, 60);">Week</button>
|
|
|
|
|
<button onclick="setData(14, 60);">Two Weeks</button>
|
|
|
|
|
<button onclick="setData(21, 60);">Three Weeks</button>
|
|
|
|
|
<button onclick="setData(30, 1440);">Month</button>
|
|
|
|
|
<button onclick="setData(60, 1440);">Two Months</button>
|
|
|
|
|
<button onclick="setData(91, 1440);">Quarter</button>
|
|
|
|
|
<button onclick="setData(182, 1440);">Half-year</button>
|
|
|
|
|
<button onclick="setData(356, 1440);">Year</button>
|
2019-09-17 23:38:40 +02:00
|
|
|
</div>
|
2020-05-21 21:42:50 +02:00
|
|
|
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: 400px;">
|
2019-09-17 23:38:40 +02:00
|
|
|
<canvas id="bandwidth_chart"></canvas>
|
|
|
|
|
</div>
|
2019-02-25 22:53:09 +01:00
|
|
|
|
2019-12-23 23:56:57 +01:00
|
|
|
<script src="/res/script/Chart.min.js"></script>
|
2019-09-17 23:38:40 +02:00
|
|
|
<script>
|
2019-12-23 23:56:57 +01:00
|
|
|
var apiEndpoint = '{{.APIEndpoint}}';
|
|
|
|
|
|
2020-01-21 17:01:26 +01:00
|
|
|
{{template `util.js`}}
|
|
|
|
|
|
2019-09-17 23:38:40 +02:00
|
|
|
Chart.defaults.global.defaultFontColor = "#b3b3b3";
|
|
|
|
|
Chart.defaults.global.defaultFontSize = 15;
|
|
|
|
|
Chart.defaults.global.defaultFontFamily = "Ubuntu";
|
2020-03-10 17:06:52 +01:00
|
|
|
Chart.defaults.global.maintainAspectRatio = false;
|
2019-09-17 23:38:40 +02:00
|
|
|
Chart.defaults.global.elements.point.radius = 0;
|
|
|
|
|
Chart.defaults.global.tooltips.mode = "index";
|
|
|
|
|
Chart.defaults.global.tooltips.axis = "x";
|
|
|
|
|
Chart.defaults.global.tooltips.intersect = false;
|
2019-07-16 22:07:10 +02:00
|
|
|
|
2019-09-17 23:38:40 +02:00
|
|
|
var graph = new Chart(
|
|
|
|
|
document.getElementById('bandwidth_chart'),
|
|
|
|
|
{
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
|
|
|
|
datasets: [
|
2019-07-16 22:07:10 +02:00
|
|
|
{
|
2019-09-17 23:38:40 +02:00
|
|
|
label: "Bandwidth",
|
2020-03-10 17:06:52 +01:00
|
|
|
backgroundColor: "rgba(64, 255, 64, .01)",
|
|
|
|
|
borderColor: "rgba(96, 255, 96, 1)",
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
lineTension: 0.2,
|
2019-09-17 23:38:40 +02:00
|
|
|
fill: true,
|
|
|
|
|
yAxisID: "y_bandwidth"
|
|
|
|
|
}, {
|
|
|
|
|
label: "Views",
|
2020-03-10 17:06:52 +01:00
|
|
|
backgroundColor: "rgba(64, 64, 255, .01)",
|
|
|
|
|
borderColor: "rgba(64, 64, 255, 1)",
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
lineTension: 0.2,
|
2019-09-17 23:38:40 +02:00
|
|
|
fill: true,
|
|
|
|
|
yAxisID: "y_views"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
scales: {
|
|
|
|
|
yAxes: [
|
|
|
|
|
{
|
|
|
|
|
type: "linear",
|
2019-07-16 22:07:10 +02:00
|
|
|
display: true,
|
2019-09-17 23:38:40 +02:00
|
|
|
position: "left",
|
|
|
|
|
id: "y_bandwidth",
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
display: true,
|
|
|
|
|
labelString: "Bandwidth"
|
|
|
|
|
},
|
|
|
|
|
ticks: {
|
|
|
|
|
callback: function(value, index, values) {
|
2020-01-21 17:01:26 +01:00
|
|
|
return formatDataVolume(value, 3);
|
2019-09-17 23:38:40 +02:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
gridLines: {
|
2020-03-10 17:06:52 +01:00
|
|
|
color: "rgba(100, 255, 100, .05)"
|
2019-07-07 10:11:18 +02:00
|
|
|
}
|
2019-09-17 23:38:40 +02:00
|
|
|
}, {
|
|
|
|
|
type: "linear",
|
2019-07-16 22:07:10 +02:00
|
|
|
display: true,
|
2019-09-17 23:38:40 +02:00
|
|
|
position: "right",
|
|
|
|
|
id: "y_views",
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
display: true,
|
|
|
|
|
labelString: "Views"
|
|
|
|
|
},
|
|
|
|
|
gridLines: {
|
2020-03-10 17:06:52 +01:00
|
|
|
color: "rgba(128, 128, 255, .05)"
|
2019-09-17 23:38:40 +02:00
|
|
|
}
|
2019-07-07 10:11:18 +02:00
|
|
|
}
|
2019-09-17 23:38:40 +02:00
|
|
|
],
|
|
|
|
|
xAxes: [
|
|
|
|
|
{
|
|
|
|
|
ticks: {
|
|
|
|
|
maxRotation: 20
|
|
|
|
|
},
|
|
|
|
|
gridLines: {
|
|
|
|
|
display: false
|
|
|
|
|
}
|
2019-07-16 22:07:10 +02:00
|
|
|
}
|
2019-09-17 23:38:40 +02:00
|
|
|
]
|
|
|
|
|
}
|
2019-07-07 10:11:18 +02:00
|
|
|
}
|
2019-07-16 22:07:10 +02:00
|
|
|
}
|
2019-09-17 23:38:40 +02:00
|
|
|
);
|
2019-07-16 22:07:10 +02:00
|
|
|
|
2020-05-21 21:42:50 +02:00
|
|
|
function setData(days, interval){
|
|
|
|
|
let today = new Date()
|
|
|
|
|
let start = new Date()
|
|
|
|
|
start.setDate(start.getDate()-days)
|
|
|
|
|
|
|
|
|
|
fetch(
|
|
|
|
|
apiEndpoint+"/admin/files/timeseries" +
|
|
|
|
|
"?start="+start.toISOString() +
|
|
|
|
|
"&end="+today.toISOString() +
|
|
|
|
|
"&interval="+interval
|
|
|
|
|
).then(resp => {
|
2020-01-20 19:55:51 +01:00
|
|
|
if (!resp.ok) { return Promise.reject("Error: "+resp.status);}
|
|
|
|
|
return resp.json();
|
|
|
|
|
}).then(resp => {
|
|
|
|
|
if (resp.success) {
|
|
|
|
|
window.graph.data.labels = resp.labels;
|
|
|
|
|
window.graph.data.datasets[0].data = resp.downloads;
|
|
|
|
|
window.graph.data.datasets[1].data = resp.views;
|
2019-09-17 23:38:40 +02:00
|
|
|
window.graph.update();
|
|
|
|
|
}
|
2020-01-20 19:55:51 +01:00
|
|
|
}).catch(e => {
|
|
|
|
|
alert("Error requesting time series: "+e);
|
|
|
|
|
})
|
2019-09-17 23:38:40 +02:00
|
|
|
}
|
2019-07-16 22:07:10 +02:00
|
|
|
|
2020-05-21 21:42:50 +02:00
|
|
|
setData(7, 60);
|
2019-09-17 23:38:40 +02:00
|
|
|
</script>
|
2019-07-07 10:11:18 +02:00
|
|
|
|
2019-12-17 19:28:30 +01:00
|
|
|
<hr/>
|
|
|
|
|
<div class="limit_width">
|
|
|
|
|
<a href="/admin/globals">Update global settings</a>
|
2020-05-25 15:30:23 +02:00
|
|
|
<h3>Query statistics</h3>
|
|
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<td onclick="getStats('query_name')">Query</td>
|
2020-05-25 18:09:29 +02:00
|
|
|
<td onclick="getStats('calls')">Calls</td>
|
2020-05-25 15:30:23 +02:00
|
|
|
<td onclick="getStats('average_duration')">Average Duration</td>
|
|
|
|
|
<td onclick="getStats('total_duration')">Total Duration</td>
|
|
|
|
|
<td>Callers</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
2020-05-25 18:09:29 +02:00
|
|
|
<tbody id="tstat_body"></tbody>
|
2020-05-25 15:30:23 +02:00
|
|
|
</table>
|
|
|
|
|
<script>
|
|
|
|
|
function getStats(order) {
|
|
|
|
|
fetch(apiEndpoint+"/status").then(
|
|
|
|
|
resp => resp.json()
|
|
|
|
|
).then(resp => {
|
|
|
|
|
let t = document.getElementById("tstat_body")
|
|
|
|
|
t.innerHTML = ""
|
|
|
|
|
|
|
|
|
|
resp.query_statistics.sort((a, b) => {
|
|
|
|
|
if (typeof(a[order]) === "number") {
|
|
|
|
|
// Sort ints from high to low
|
|
|
|
|
return b[order] - a[order]
|
|
|
|
|
} else {
|
|
|
|
|
// Sort strings alphabetically
|
|
|
|
|
return a[order].localeCompare(b[order])
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
resp.query_statistics.forEach((v) => {
|
|
|
|
|
let callers = ""
|
2020-05-25 18:09:29 +02:00
|
|
|
v.callers.sort((a, b) => b.count - a.count)
|
2020-05-25 15:30:23 +02:00
|
|
|
v.callers.forEach((v1) => {
|
|
|
|
|
callers += `${v1.count}x ${v1.name}<br/>`
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
let row = document.createElement("tr")
|
|
|
|
|
row.innerHTML = `\
|
|
|
|
|
<td>${v.query_name}</td>
|
2020-05-25 18:09:29 +02:00
|
|
|
<td>${v.calls}</td>
|
2020-05-25 20:40:16 +02:00
|
|
|
<td>${formatDuration(v.average_duration)}</td>
|
|
|
|
|
<td>${formatDuration(v.total_duration)}</td>
|
2020-05-25 15:30:23 +02:00
|
|
|
<td>${callers}</td>`
|
|
|
|
|
t.appendChild(row)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
getStats("average_duration")
|
|
|
|
|
</script>
|
2019-12-17 19:28:30 +01:00
|
|
|
</div>
|
2020-05-25 15:30:23 +02:00
|
|
|
|
2019-09-17 23:38:40 +02:00
|
|
|
{{else}}
|
|
|
|
|
<h1 style="text-align: center;">;)</h1>
|
|
|
|
|
{{end}}
|
|
|
|
|
</div>
|
|
|
|
|
{{template "page_bottom" .}}
|
2019-02-25 22:53:09 +01:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
{{end}}
|
