Creating a Simple Linux Dashboard with Oracle Jet - Part 2 the Oracle Jet HTML Module Code
Here is the
loadavg.html module which is situated in the views folder of my Oracle JET simple Linux dashboard project:
Code :
<style>
.neo-netdown {
color: black;
}
.circular-status-meter-common {
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
width: auto;
}
.circular-status-meter-large {
height: 100px;
}
.circular-status-meter-small {
height: 50px;
}
.neo-gauge {
display: inline-block;
}
.neo-oj-gauge {
background-color: white;
}
</style>
<div class="neo-netdown oj-flex">
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="load1" color="green" step="1" outer-radius="0.5" label="[[lable1]]"
min="0" max="5" value="[[load1]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large neo-oj-gauge">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Load Avg 1m</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="load5" color="green" label="[[lable5]]" min="0" max="5" value="[[load5]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Load Avg 5m</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="load15" color="green" label="[[lable15]]" min="0" max="5" value="[[load15]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Load Avg 15m</h5>
</div>
<div class="neo-gauge mysqldump oj-flex-item">
<oj-status-meter-gauge readonly="true" inner-radius="0" id="mysqldump" color="red" min="0" max="1" value="[[mysqldump]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">mysqldump</h5>
</div>
</div>
<div class="neo-netdown oj-flex">
<div class="neo-gauge oj-flex-item" style="display:none">
<oj-status-meter-gauge readonly="true" id="activeprocs" label="[[processes]]" color="green" min="0" max="10"
value="[[activeprocs]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large"
converter='{value:{
"type":"text",
"options": {"style": "text"}'>
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Active Processes</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="alltheprocs" label="[[processes]]" color="green" min="0" max="600"
value="[[alltheprocs]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Server</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="apache2count" label="[[processes]]" color="green" min="0" max="150"
value="[[apache2count]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Apache</h5>
</div>
<div class="neo-gauge oj-flex-item" style="display:none;">
<oj-status-meter-gauge readonly="true" id="lastpid" color="green" min="7000" max="30000" value="[[lastpid]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Last PID</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="wolval" label="[[users]]" color="green" min="0" max="5000" value="[[wolval]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">WOL Total</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" inner-radius="0" id="gzip" color="red" min="0" max="1" value="[[gzip]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">gzip</h5>
</div>
</div>
<div class="neo-netdown oj-flex">
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" d="allcpus" label="[[cpu]]" metric-label="[[customMetricLabel]]" color="green"
min="0" max="100" value="[[all]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large"
readonly="true">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Server</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="apache2" label="[[cpu]]" metric-label="[[customMetricLabel]]" color="green"
min="0" max="100" value="[[apache2]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Apache</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="mysqld" readonly=true label="[[cpu]]" metric-label="[[customMetricLabel]]"
color="green" min="0" max="100" value="[[mysqld]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">MySQL</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" inner-radius="0" id="rsync" color="red" min="0" max="1" value="[[rsync]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">rsync</h5>
</div>
</div>
<div class="neo-netdown oj-flex">
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="diskusage" label="[[diskname]]" metric-label="[[customMetricLabel]]"
color="green" min="0" max="100" value="[[diskusage]]" orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Disk Usage</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="freemem" label="[[kb]]" color="green" min="0" max="65842320" value="[[freemem]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Free Mem</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" id="cachedmem" label="[[kb]]" color="green" min="0" max="65842320" value="[[cachedmem]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">Cached Mem</h5>
</div>
<div class="neo-gauge oj-flex-item">
<oj-status-meter-gauge readonly="true" inner-radius="0" id="find" color="red" min="0" max="1" value="[[find]]"
orientation="circular" class="circular-status-meter-common circular-status-meter-large">
</oj-status-meter-gauge>
<h5 class="circular-status-meter-common neo-netdown">find</h5>
</div>
</div>