charts maybe?
This commit is contained in:
M
parent
1098664814
commit
9fe15a8afa
|
|
@ -12,6 +12,10 @@ let lockDash;
|
|||
//non-option var
|
||||
let statRequest;
|
||||
//stat vars
|
||||
let hitmiss,
|
||||
byte,
|
||||
cached,
|
||||
req;
|
||||
|
||||
//dockable things
|
||||
let config = {
|
||||
|
|
@ -113,7 +117,7 @@ function loadDash() {
|
|||
if (savedState !== null) {
|
||||
dashlayout = new GoldenLayout(JSON.parse(savedState), $("#dashboard"));
|
||||
} else {
|
||||
dashlayout = new GoldenLayout(config, $("#dashboard"));
|
||||
dashlayout = new GoldenLayout(config, $("#dashboard"));
|
||||
}
|
||||
//graphs
|
||||
dashlayout.registerComponent('Network Utilization', function (container, state) {
|
||||
|
|
@ -180,12 +184,102 @@ jQuery(document).ready(function () {
|
|||
$(this).text("");
|
||||
$('#console_text').scrollTop($("#console_text")[0].scrollHeight)
|
||||
}
|
||||
})
|
||||
statRequest = setInterval(function () {
|
||||
requestStats();
|
||||
}, refreshRate);
|
||||
});
|
||||
loadStuff();
|
||||
fetch("/api/allStats")
|
||||
.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
|
||||
|
||||
$(window).on("click", function () {
|
||||
|
|
@ -491,17 +585,51 @@ function updateWithMessage(m) {
|
|||
|
||||
function getStats() {
|
||||
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
|
||||
}
|
||||
|
||||
function parseResponse(x) {
|
||||
let respj = JSON.parse(x);
|
||||
console.log(x);
|
||||
hitmiss.data.datasets[0].data[0] = (x.cache_hits);
|
||||
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
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>MD@H Client</title>
|
||||
<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 src="dataReceive.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="layout.css">
|
||||
|
|
@ -43,13 +44,30 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="dashb" class="content">
|
||||
<div id="dashb" class="content" style="overflow-y: scroll">
|
||||
<div class="contentHeader">
|
||||
<h1 style="margin: 0;position:absolute; top: 42px; padding-left: 30px">Dashboard</h1>
|
||||
</div>
|
||||
<div id="dashboard"></div>
|
||||
<div id="gDat" hidden>
|
||||
<div id="dashboard" hidden></div>
|
||||
<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 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 id="console" class="content" hidden>
|
||||
|
|
|
|||
|
|
@ -145,10 +145,10 @@ body {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.line_graph_data {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/*.line_graph_data {*/
|
||||
/* height: 100%;*/
|
||||
/* width: 100%;*/
|
||||
/*}*/
|
||||
|
||||
/*Console and options positions*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue