Changed to using a tabbed layout instead of separate pages for everything
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
c451237ab9
commit
c878447c45
@ -1,6 +1,6 @@
|
|||||||
si = require('systeminformation')
|
si = require('systeminformation')
|
||||||
|
|
||||||
window.onload = () ->
|
window.addEventListener('load', () ->
|
||||||
# Grab the static CPU information
|
# Grab the static CPU information
|
||||||
si.cpu()
|
si.cpu()
|
||||||
.then((data) ->
|
.then((data) ->
|
||||||
@ -16,6 +16,7 @@ window.onload = () ->
|
|||||||
|
|
||||||
# Start the CPU temperature loop
|
# Start the CPU temperature loop
|
||||||
setCpuTemp()
|
setCpuTemp()
|
||||||
|
, false)
|
||||||
|
|
||||||
setCpuTemp = () ->
|
setCpuTemp = () ->
|
||||||
si.cpuTemperature()
|
si.cpuTemperature()
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
si = require('systeminformation')
|
si = require('systeminformation')
|
||||||
|
|
||||||
window.onload = () ->
|
window.addEventListener('load', () ->
|
||||||
# Set the option selector to trigger an info grab on element change
|
# Set the option selector to trigger an info grab on element change
|
||||||
document.getElementById('gpuSelector').addEventListener('change', () ->
|
document.getElementById('gpuSelector').addEventListener('change', () ->
|
||||||
updateGpuInfo(@value)
|
updateGpuInfo(@value)
|
||||||
@ -11,6 +11,7 @@ window.onload = () ->
|
|||||||
|
|
||||||
# Run the updateGpuInfo function with the default value of 0
|
# Run the updateGpuInfo function with the default value of 0
|
||||||
updateGpuInfo()
|
updateGpuInfo()
|
||||||
|
, false)
|
||||||
|
|
||||||
loadGpus = () ->
|
loadGpus = () ->
|
||||||
si.graphics()
|
si.graphics()
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
si = require('systeminformation')
|
si = require('systeminformation')
|
||||||
|
|
||||||
window.onload = () ->
|
window.addEventListener('load', () ->
|
||||||
# Grab the static CPU information
|
# Grab the static CPU information
|
||||||
si.mem()
|
si.mem()
|
||||||
.then((data) ->
|
.then((data) ->
|
||||||
@ -11,6 +11,7 @@ window.onload = () ->
|
|||||||
|
|
||||||
# Start the CPU temperature loop
|
# Start the CPU temperature loop
|
||||||
getMemoryUsage()
|
getMemoryUsage()
|
||||||
|
, false)
|
||||||
|
|
||||||
getMemoryUsage = () ->
|
getMemoryUsage = () ->
|
||||||
si.mem()
|
si.mem()
|
||||||
|
@ -1,5 +1,12 @@
|
|||||||
@loadPage = (pagePath) ->
|
@openTab = (tab) ->
|
||||||
window.location.href = pagePath + '.html'
|
displays = document.querySelectorAll('.component-display')
|
||||||
|
i = 0
|
||||||
|
while i < displays.length
|
||||||
|
if displays[i].getAttribute('data-component') == tab
|
||||||
|
displays[i].classList.add('active')
|
||||||
|
else
|
||||||
|
displays[i].classList.remove('active')
|
||||||
|
i++
|
||||||
|
|
||||||
@formatBytes = (bytes, decimals = 2) ->
|
@formatBytes = (bytes, decimals = 2) ->
|
||||||
if bytes == 0
|
if bytes == 0
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
si = require('systeminformation')
|
si = require('systeminformation')
|
||||||
|
|
||||||
window.onload = () ->
|
window.addEventListener('load', () ->
|
||||||
# Set the option selector to trigger an info grab on element change
|
# Set the option selector to trigger an info grab on element change
|
||||||
document.getElementById('diskSelector').addEventListener('change', () ->
|
document.getElementById('diskSelector').addEventListener('change', () ->
|
||||||
updateDiskInfo(@value)
|
updateDiskInfo(@value)
|
||||||
@ -14,6 +14,7 @@ window.onload = () ->
|
|||||||
|
|
||||||
# Start running our function to update the drive's temperature
|
# Start running our function to update the drive's temperature
|
||||||
setDiskTemp()
|
setDiskTemp()
|
||||||
|
, false)
|
||||||
|
|
||||||
loadDisks = () ->
|
loadDisks = () ->
|
||||||
si.diskLayout()
|
si.diskLayout()
|
||||||
|
@ -34,6 +34,11 @@ button
|
|||||||
.container.fluid
|
.container.fluid
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
|
|
||||||
|
.component-display
|
||||||
|
display: none
|
||||||
|
&.active
|
||||||
|
display: block
|
||||||
|
|
||||||
.pageLink
|
.pageLink
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
i
|
i
|
||||||
|
@ -1,11 +1,3 @@
|
|||||||
{% extends 'layout.twig' %}
|
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
<script src="./js/cpu.js" charset="utf-8"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
<header class="row">
|
<header class="row">
|
||||||
<div class="columns twelve u-text-center">
|
<div class="columns twelve u-text-center">
|
||||||
<h1>Sentry CPU Info</h1>
|
<h1>Sentry CPU Info</h1>
|
||||||
@ -44,11 +36,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="row">
|
|
||||||
<div class="columns twelve">
|
|
||||||
<a href="index.html">Back</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
@ -1,11 +1,3 @@
|
|||||||
{% extends 'layout.twig' %}
|
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
<script src="./js/gpu.js" charset="utf-8"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
<header class="row">
|
<header class="row">
|
||||||
<div class="columns twelve u-text-center">
|
<div class="columns twelve u-text-center">
|
||||||
<h1>GPU Info</h1>
|
<h1>GPU Info</h1>
|
||||||
@ -34,11 +26,3 @@
|
|||||||
</table>
|
</table>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="row">
|
|
||||||
<div class="columns twelve">
|
|
||||||
<a href="index.html">Back</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
@ -8,11 +8,35 @@
|
|||||||
<link rel="stylesheet" href="./styles/sentry.css">
|
<link rel="stylesheet" href="./styles/sentry.css">
|
||||||
<title>Sentry System Monitor</title>
|
<title>Sentry System Monitor</title>
|
||||||
<script src="./js/sentry.js" charset="utf-8"></script>
|
<script src="./js/sentry.js" charset="utf-8"></script>
|
||||||
{% block scripts %}{% endblock %}
|
<script src="./js/cpu.js"></script>
|
||||||
|
<script src="./js/memory.js"></script>
|
||||||
|
<script src="./js/storage.js"></script>
|
||||||
|
<script src="./js/gpu.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container fluid">
|
||||||
{% block content %}{% endblock %}
|
<!-- tab buttons -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="columns twelve">
|
||||||
|
<button class="tab-button" onclick="openTab('cpu')">CPU</button>
|
||||||
|
<button class="tab-button" onclick="openTab('memory')">Memory</button>
|
||||||
|
<button class="tab-button" onclick="openTab('storage')">Storage</button>
|
||||||
|
<button class="tab-button" onclick="openTab('gpu')">GPU</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="component-display active" data-component="cpu">
|
||||||
|
{% include 'cpu.twig' %}
|
||||||
|
</div>
|
||||||
|
<div class="component-display" data-component="memory">
|
||||||
|
{% include 'memory.twig' %}
|
||||||
|
</div>
|
||||||
|
<div class="component-display" data-component="storage">
|
||||||
|
{% include 'storage.twig' %}
|
||||||
|
</div>
|
||||||
|
<div class="component-display" data-component="gpu">
|
||||||
|
{% include 'gpu.twig' %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer id="footer">
|
<footer id="footer">
|
||||||
|
@ -1,11 +1,3 @@
|
|||||||
{% extends 'layout.twig' %}
|
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
<script src="./js/memory.js" charset="utf-8"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
<header class="row">
|
<header class="row">
|
||||||
<div class="columns twelve u-text-center">
|
<div class="columns twelve u-text-center">
|
||||||
<h1>Memory Info</h1>
|
<h1>Memory Info</h1>
|
||||||
@ -16,11 +8,3 @@
|
|||||||
<p><span id="memoryFree">N/a</span> free out of <span id="memoryTotal">N/a</span>.</p>
|
<p><span id="memoryFree">N/a</span> free out of <span id="memoryTotal">N/a</span>.</p>
|
||||||
<p><span id="memoryActive">N/a</span> is actively used | <span id="memoryBuffCache">N/a</span> is used in buffers/cache.</p>
|
<p><span id="memoryActive">N/a</span> is actively used | <span id="memoryBuffCache">N/a</span> is used in buffers/cache.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="row">
|
|
||||||
<div class="columns twelve">
|
|
||||||
<a href="index.html">Back</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
@ -1,11 +1,3 @@
|
|||||||
{% extends 'layout.twig' %}
|
|
||||||
|
|
||||||
{% block scripts %}
|
|
||||||
<script src="./js/storage.js" charset="utf-8"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{% block content %}
|
|
||||||
|
|
||||||
<header class="row">
|
<header class="row">
|
||||||
<div class="columns twelve u-text-center">
|
<div class="columns twelve u-text-center">
|
||||||
<h1>Storage Device Info</h1>
|
<h1>Storage Device Info</h1>
|
||||||
@ -42,11 +34,3 @@
|
|||||||
</table>
|
</table>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="row">
|
|
||||||
<div class="columns twelve">
|
|
||||||
<a href="index.html">Back</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% endblock %}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user