2019-02-24 08:25:39 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2019-03-03 01:41:13 +00:00
|
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<meta content="utf-8" http-equiv="encoding">
|
2019-04-02 06:43:57 +01:00
|
|
|
<title>Home | GoNAS</title>
|
2019-02-24 08:25:39 +00:00
|
|
|
<link rel="stylesheet" href="/assets/styles.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
|
|
|
|
<div>
|
2019-04-02 06:43:57 +01:00
|
|
|
<h1 style="display: inline-block">GoNAS</h1>
|
|
|
|
|
<p>Hot Storage Usage (<span id="hotUsagePercent"></span>%)</p>
|
|
|
|
|
<progress max="100" id="hotUsage"></progress>
|
|
|
|
|
<p>Cold Storage Usage (<span id="coldUsagePercent"></span>%)</p>
|
|
|
|
|
<progress max="100" id="coldUsage"></progress>
|
2019-02-24 08:25:39 +00:00
|
|
|
</div>
|
2019-02-24 10:59:16 +00:00
|
|
|
<div class="content index">
|
|
|
|
|
<a href="/files/">
|
2019-02-24 18:10:08 +00:00
|
|
|
<img src="/assets/svgs/hotfiles.svg" alt="">Hot Files</a><br>
|
2019-02-24 10:59:16 +00:00
|
|
|
<a href="/archive/">
|
2019-02-24 18:10:08 +00:00
|
|
|
<img src="/assets/svgs/coldfiles.svg" alt="">Cold Files</a>
|
2019-02-24 08:25:39 +00:00
|
|
|
</div>
|
|
|
|
|
</main>
|
2019-04-02 06:43:57 +01:00
|
|
|
<script>
|
|
|
|
|
const $ = selector => document.querySelector(selector);
|
|
|
|
|
|
|
|
|
|
const init = event => {
|
|
|
|
|
getUsages();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const getUsages = () => {
|
|
|
|
|
fetch('/api/diskusage')
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
return response.json();
|
|
|
|
|
})
|
|
|
|
|
.then(function (jsonResult) {
|
|
|
|
|
console.log(jsonResult);
|
|
|
|
|
let hot = (jsonResult.HotStorage.Free) / (jsonResult.HotStorage.Total) * 100;
|
|
|
|
|
let cold = (jsonResult.ColdStorage.Free) / (jsonResult.ColdStorage.Total) * 100;
|
|
|
|
|
// Flip values to reflect % used rather than % free.
|
|
|
|
|
$("#hotUsage").value = 100 - hot;
|
|
|
|
|
$("#hotUsagePercent").innerText = Math.floor(100 - hot);
|
|
|
|
|
$("#coldUsage").value = 100 - cold;
|
|
|
|
|
$("#coldUsagePercent").innerText = Math.floor(100 - cold);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener('load', init);
|
|
|
|
|
</script>
|
2019-02-24 08:25:39 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
