charts maybe?
This commit is contained in:
parent
1098664814
commit
9fe15a8afa
|
@ -12,6 +12,10 @@ let lockDash;
|
||||||
//non-option var
|
//non-option var
|
||||||
let statRequest;
|
let statRequest;
|
||||||
//stat vars
|
//stat vars
|
||||||
|
let hitmiss,
|
||||||
|
byte,
|
||||||
|
cached,
|
||||||
|
req;
|
||||||
|
|
||||||
//dockable things
|
//dockable things
|
||||||
let config = {
|
let config = {
|
||||||
|
@ -180,12 +184,102 @@ jQuery(document).ready(function () {
|
||||||
$(this).text("");
|
$(this).text("");
|
||||||
$('#console_text').scrollTop($("#console_text")[0].scrollHeight)
|
$('#console_text').scrollTop($("#console_text")[0].scrollHeight)
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
statRequest = setInterval(function () {
|
loadStuff();
|
||||||
requestStats();
|
fetch("/api/allStats")
|
||||||
}, refreshRate);
|
.then(response => async function () {
|
||||||
|
let respj = JSON.parse(await response.text());
|
||||||
|
updateValues(respj);
|
||||||
|
console.log(respj);
|
||||||
|
});
|
||||||
|
statRequest = setInterval(getStats, refreshRate);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function loadStuff() {
|
||||||
|
hitmiss = new Chart(document.getElementById('hitpie').getContext('2d'), {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
data: [0, 0]
|
||||||
|
}],
|
||||||
|
labels: [
|
||||||
|
'Hits',
|
||||||
|
'Misses'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: {}
|
||||||
|
});
|
||||||
|
req = new Chart(document.getElementById('requestsserved').getContext('2d'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Requests Served',
|
||||||
|
backgroundColor: "#f00",
|
||||||
|
borderColor: "#f00",
|
||||||
|
data: [],
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
byte = new Chart(document.getElementById('bytessent').getContext('2d'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [1, 2, 3, 4],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Bytes Sent',
|
||||||
|
backgroundColor: "#f00",
|
||||||
|
borderColor: "#f00",
|
||||||
|
data: [36, 98, 45, 67],
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
cached = new Chart(document.getElementById('browsercached').getContext('2d'), {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [1, 2, 3, 4],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Cached',
|
||||||
|
backgroundColor: "#f00",
|
||||||
|
borderColor: "#f00",
|
||||||
|
data: [36, 98, 45, 67],
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scales: {
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
//site functions, no connections involved
|
//site functions, no connections involved
|
||||||
|
|
||||||
$(window).on("click", function () {
|
$(window).on("click", function () {
|
||||||
|
@ -491,17 +585,51 @@ function updateWithMessage(m) {
|
||||||
|
|
||||||
function getStats() {
|
function getStats() {
|
||||||
fetch("/api/stats")
|
fetch("/api/stats")
|
||||||
.then(response => parseResponse(response));
|
.then(response => async function () {
|
||||||
|
let respj = JSON.parse(await response.text());
|
||||||
|
parseResponse(respj);
|
||||||
|
console.log(respj);
|
||||||
|
});
|
||||||
//TODO: use values and update web info
|
//TODO: use values and update web info
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseResponse(x) {
|
function parseResponse(x) {
|
||||||
let respj = JSON.parse(x);
|
hitmiss.data.datasets[0].data[0] = (x.cache_hits);
|
||||||
console.log(x);
|
hitmiss.data.datasets[0].data[1] = (x.misses);
|
||||||
|
req.data.labels.push(x.snap_time);
|
||||||
|
req.data.datasets.forEach((dataset) => {
|
||||||
|
dataset.data.push(x.requests_served);
|
||||||
|
});
|
||||||
|
byte.data.labels.push(x.snap_time);
|
||||||
|
byte.data.datasets.forEach((dataset) => {
|
||||||
|
dataset.data.push(x.bytes_sent);
|
||||||
|
});
|
||||||
|
cached.data.labels.push(x.snap_time);
|
||||||
|
cached.data.datasets.forEach((dataset) => {
|
||||||
|
dataset.data.push(x.browser_cached);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateValues() {
|
function updateValues(data) {
|
||||||
|
for (let key in data) {
|
||||||
|
if (data.hasOwnProperty(key)) {
|
||||||
|
let x = data[key];
|
||||||
|
hitmiss.data.datasets[0].data[0] = (x.cache_hits);
|
||||||
|
hitmiss.data.datasets[0].data[1] = (x.misses);
|
||||||
|
req.data.labels.push(key);
|
||||||
|
req.data.datasets.forEach((dataset) => {
|
||||||
|
dataset.data.push(x.requests_served);
|
||||||
|
});
|
||||||
|
byte.data.labels.push(key);
|
||||||
|
byte.data.datasets.forEach((dataset) => {
|
||||||
|
dataset.data.push(x.bytes_sent);
|
||||||
|
});
|
||||||
|
cached.data.labels.push(key);
|
||||||
|
cached.data.datasets.forEach((dataset) => {
|
||||||
|
dataset.data.push(x.browser_cached);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//console functions
|
//console functions
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>MD@H Client</title>
|
<title>MD@H Client</title>
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
||||||
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
|
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
|
||||||
<script src="dataReceive.js"></script>
|
<script src="dataReceive.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="layout.css">
|
<link rel="stylesheet" type="text/css" href="layout.css">
|
||||||
|
@ -43,14 +44,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div id="dashb" class="content">
|
<div id="dashb" class="content" style="overflow-y: scroll">
|
||||||
<div class="contentHeader">
|
<div class="contentHeader">
|
||||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
||||||
</div>
|
</div>
|
||||||
<div id="dashboard"></div>
|
<div id="dashboard" hidden></div>
|
||||||
<div id="gDat" hidden>
|
<div id="pleasejustwork" style="height: calc(100% - 140px); width: calc(100% - 40px); margin: 20px">
|
||||||
|
<div id="thelonelynumber" style="position: absolute; width: 30%; margin: 20px;">
|
||||||
|
<div class="line_graph_data">
|
||||||
|
<canvas id="hitpie"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="thegraphfamily"
|
||||||
|
style="position: absolute; width: calc(70% - 80px); margin: 20px; left: calc(30% + 40px); top: 100px">
|
||||||
|
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
|
||||||
|
<canvas id="bytessent" style="height: 250px"></canvas>
|
||||||
|
</div>
|
||||||
|
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
|
||||||
|
<canvas id="requestsserved" style="height: 250px"></canvas>
|
||||||
|
</div>
|
||||||
|
<div style="margin: 20px; width: calc(100% - 40px)" class="line_graph_data">
|
||||||
|
<canvas id="browsercached" style="height: 250px"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="console" class="content" hidden>
|
<div id="console" class="content" hidden>
|
||||||
<div class="contentHeader">
|
<div class="contentHeader">
|
||||||
|
|
|
@ -145,10 +145,10 @@ body {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.line_graph_data {
|
/*.line_graph_data {*/
|
||||||
height: 100%;
|
/* height: 100%;*/
|
||||||
width: 100%;
|
/* width: 100%;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
/*Console and options positions*/
|
/*Console and options positions*/
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue