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
parent
9fe15a8afa
commit
1818175d4a
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue