1
0
Fork 1
mirror of https://gitlab.com/mangadex-pub/mangadex_at_home.git synced 2024-01-19 02:48:37 +00:00

Commit the roughest POC of an UI ever

This commit is contained in:
carbotaniuman 2020-06-13 16:09:03 -05:00
parent 9fe15a8afa
commit 1818175d4a
6 changed files with 46 additions and 82 deletions

View file

@ -1,8 +1,12 @@
{
"client_secret": "7rc7p00md0n0xsvqnv4rv17fthvjjrzpdghak1yq45833zvdvnb0",
"client_secret": "s76t1dazfctvtgq9dyvgw9herxc4gcz39q0q0y3taxpkgg0ahq8g",
"max_cache_size_mib": 2048,
"client_port": 8080,
"max_burst_rate_kib_per_second": 100,
"max_bandwidth_mib_per_hour": 1,
"threads_per_cpu": 32
"client_port": 443,
"max_burst_rate_kib_per_second": 0,
"max_bandwidth_mib_per_hour": 0,
"threads_per_cpu": 32,
"web_settings":
{
"ui_port": 8080
}
}

View file

@ -64,8 +64,7 @@ public class MangaDexClient {
if (snapshot != null) {
String json = snapshot.getString(0);
snapshot.close();
statistics.set(GSON.fromJson(json, new TypeToken<ArrayList<Statistics>>() {
}.getType()));
statistics.set(GSON.fromJson(json, Statistics.class));
} else {
statistics.set(new Statistics());
}
@ -85,6 +84,16 @@ public class MangaDexClient {
}
statsMap.put(Instant.now(), statistics.get());
try {
DiskLruCache.Editor editor = cache.edit("statistics");
if (editor != null) {
String json = GSON.toJson(statistics.get(), Statistics.class);
editor.setString(0, json);
editor.setString(1, "");
editor.setString(2, "");
editor.commit();
}
} catch (IOException ignored) {}
if (clientSettings.getWebSettings() != null) {
webUi = WebUiKt.getUiServer(clientSettings.getWebSettings(), statistics, statsMap);

View file

@ -7,5 +7,6 @@ data class Statistics(
@field:SerializedName("cache_hits") val cacheHits: Int = 0,
@field:SerializedName("cache_misses") val cacheMisses: Int = 0,
@field:SerializedName("browser_cached") val browserCached: Int = 0,
@field:SerializedName("bytes_sent") val bytesSent: Long = 0
@field:SerializedName("bytes_sent") val bytesSent: Long = 0,
@field:SerializedName("bytes_on_disk") val bytesOnDisk: Long = 0
)

View file

@ -25,7 +25,6 @@ fun getUiServer(
statistics: AtomicReference<Statistics>,
statsMap: Map<Instant, Statistics>
): Http4kServer {
val statisticsLens = Body.auto<Statistics>().toLens()
val statsMapLens = Body.auto<Map<Instant, Statistics>>().toLens()
return catchAllHideDetails()
@ -34,7 +33,7 @@ fun getUiServer(
.then(
routes(
"/api/stats" bind Method.GET to {
statisticsLens(statistics.get(), Response(Status.OK))
statsMapLens(mapOf(Instant.now() to statistics.get()), Response(Status.OK))
},
"/api/pastStats" bind Method.GET to {
synchronized(statsMap) {

View file

@ -200,11 +200,12 @@ function loadStuff() {
type: 'doughnut',
data: {
datasets: [{
data: [0, 0]
data: [0, 0, 0]
}],
labels: [
'Hits',
'Misses'
'Misses',
'Browser Cached'
]
},
options: {}
@ -235,12 +236,12 @@ function loadStuff() {
byte = new Chart(document.getElementById('bytessent').getContext('2d'), {
type: 'line',
data: {
labels: [1, 2, 3, 4],
labels: [],
datasets: [{
label: 'Bytes Sent',
backgroundColor: "#f00",
borderColor: "#f00",
data: [36, 98, 45, 67],
data: [],
fill: false
}]
},
@ -258,12 +259,12 @@ function loadStuff() {
cached = new Chart(document.getElementById('browsercached').getContext('2d'), {
type: 'line',
data: {
labels: [1, 2, 3, 4],
labels: [],
datasets: [{
label: 'Cached',
label: 'Bytes On Disk',
backgroundColor: "#f00",
borderColor: "#f00",
data: [36, 98, 45, 67],
data: [],
fill: false
}]
},
@ -585,49 +586,38 @@ function updateWithMessage(m) {
function getStats() {
fetch("/api/stats")
.then(response => async function () {
let respj = JSON.parse(await response.text());
parseResponse(respj);
console.log(respj);
.then(response => response.json())
.then(response => {
updateValues(response);
console.log(response);
});
//TODO: use values and update web info
}
function parseResponse(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(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);
hitmiss.data.datasets[0].data[0] = x.cache_hits;
hitmiss.data.datasets[0].data[1] = x.cache_misses;
hitmiss.data.datasets[0].data[2] = x.browser_cached;
hitmiss.update()
req.data.labels.push(key);
req.data.datasets.forEach((dataset) => {
dataset.data.push(x.requests_served);
});
req.update()
byte.data.labels.push(key);
byte.data.datasets.forEach((dataset) => {
dataset.data.push(x.bytes_sent);
});
byte.update()
cached.data.labels.push(key);
cached.data.datasets.forEach((dataset) => {
dataset.data.push(x.browser_cached);
dataset.data.push(x.bytes_on_disk);
});
cached.update()
}
}
}

View file

@ -21,7 +21,7 @@
<div id="consoleLatest" hidden></div>
<button id="connection" class="connecting button" onclick="reconnect()">Disconnected</button>
</div>
<div id="sideBar">
<div id="sideBar" >
<div id="expSide" class="sideOption" onclick="expSide()">
<img src="icons/showmore.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
<h2 style="position: absolute; left: 50px; top: 0; margin: calc((50px - 29px)/2)">Menu</h2>
@ -30,17 +30,9 @@
<img src="icons/dashboard.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
<h2 style="position: absolute; left: 50px; top: 50px; margin: calc((50px - 29px)/2)">Dashboard</h2>
</div>
<div id="cons" class="sideOption" onclick="selectTab('cons','console')">
<img src="icons/console.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
<h2 style="position: absolute; left: 50px; top: 100px; margin: calc((50px - 29px)/2)">Console</h2>
</div>
<div id="opt" class="sideOption" onclick="selectTab('opt','dashOptions')">
<img src="icons/options.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
<h2 style="position: absolute; left: 50px; top: 150px; margin: calc((50px - 29px)/2)">Options</h2>
</div>
<div id="inf" class="sideOption" onclick="selectTab('inf','info')">
<img src="icons/info.png" alt="dash" width="30px" height="30px" style="padding: 10px" class="img">
<h2 style="position: absolute; left: 50px; top: 200px; margin: calc((50px - 29px)/2)">Info</h2>
<h2 style="position: absolute; left: 50px; top: 100px; margin: calc((50px - 29px)/2)">Options</h2>
</div>
</div>
<div id="content">
@ -93,23 +85,6 @@
<h4>Data Refresh Rate</h4>
<label><input id="dataRefreshRate" type="number" class="optionInput input" placeholder="5000" min="500"></label>
</div>
<div class="option">
<h4>Websocket Port</h4>
<label><input id="port" type="number" class="optionInput input" placeholder="33333"></label>
</div>
<div class="option">
<h4>Client IP</h4>
<label><input id="ip" type="text" class="optionInput input" placeholder="localhost"></label>
</div>
<div class="option">
<h4>Max Console Lines</h4>
<label><input id="maxConsoleLines" type="number" class="optionInput input" placeholder="1000" min="100"></label>
</div>
<div class="option">
<h4>Graph Time Frame</h4>
<label><input id="graphTimeFrame" type="number" class="optionInput input" placeholder="30000"
min="5000"></label>
</div>
<h3>Display</h3>
<div class="option">
<h4>Theme</h4>
@ -127,13 +102,6 @@
<option value="softStyle">Soft</option>
</select></label>
</div>
<div class="option">
<h4>Show Console Latest</h4>
<label class="switch switchInput">
<input id="newestconsole" type="checkbox">
<span id="newestconsolecb" class="slider"></span>
</label>
</div>
<div class="option">
<h4>Animations</h4>
<label class="switch switchInput">
@ -141,13 +109,6 @@
<span id="doAnimationscb" class="slider"></span>
</label>
</div>
<div class="option">
<h4>Lock Dashboard <br>(does not work)</h4>
<label class="switch switchInput">
<input id="lockDash" type="checkbox">
<span id="lockDashcb" class="slider"></span>
</label>
</div>
</div>
<button id="apply" class="button" onclick="applyOptions()">Apply</button>
<button id="reset" class="button" onclick="resetOptions()">Reset</button>