jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor the system/graphs view logic

Browse Source
This commit is contained in:
Johannes Zellner
2022-09-16 17:09:54 +02:00
parent 7fbfe4ec98
commit f25158b295
3 changed files with 68 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/system.html
+10 -17
View File
@@ -11,20 +11,13 @@
<uib-tabset active="activeTab">
<uib-tab index="0" heading="{{ 'system.diskUsage.title' | tr }}">
<div class="card card-large">
<div class="row" ng-if="disks.errorMessage">
<br>
<div class="alert alert-warning text-center">
{{ disks.errorMessage }}
</div>
</div>
<div class="row" ng-show="disks.busy">
<div class="row" ng-show="busy">
<div class="col-md-12 text-center">
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
</div>
</div>
<div ng-show="!disks.busy" class="ng-hide">
<div class="row" ng-repeat="disk in disks.disks" style="margin-bottom: 20px;">
<div ng-show="!busy" class="ng-hide">
<div class="row" ng-repeat="disk in disks" style="margin-bottom: 20px;">
<div class="col-md-12">
<h3>
<!-- <span>{{ disk.filesystem }}</span> <span>({{ disk.mountpoint }})</span> -->
@@ -50,7 +43,7 @@
</div>
</uib-tab>
<uib-tab index="1" heading="{{ 'system.systemMemory.title' | tr }}" select="graphs.show()">
<uib-tab index="1" heading="{{ 'system.systemMemory.title' | tr }}">
<div class="card card-large" style="min-height: 300px;">
<label style="display: block">Megabyte <span class="pull-right">RAM ({{ memory.memory | prettyByteSize }}) + Swap ({{ memory.swap | prettyByteSize }})</span></label>
<canvas id="graphsSystemMemoryChart" style="width: 100%;"></canvas>
@@ -59,7 +52,7 @@
</div>
</uib-tab>
<uib-tab index="2" heading="{{ 'system.cpuUsage.title' | tr }}" select="graphs.show()">
<uib-tab index="2" heading="{{ 'system.cpuUsage.title' | tr }}">
<div class="card card-large" style="min-height: 300px;">
<label>{{ 'system.cpuUsage.graphTitle' | tr }}</label>
<canvas id="graphsCPUChart" style="width: 100%;"></canvas>
@@ -68,14 +61,14 @@
<div class="dropdown pull-right" ng-hide="activeTab === 0">
<button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
{{ graphs.period | trKeyFromPeriod | tr }}
{{ period | trKeyFromPeriod | tr }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" ng-click="graphs.setPeriod(6)">{{ 6 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="graphs.setPeriod(24)">{{ 24 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="graphs.setPeriod(24*7)">{{ 24*7 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="graphs.setPeriod(24*30)">{{ 24*30 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="setPeriod(6)">{{ 6 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="setPeriod(24)">{{ 24 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="setPeriod(24*7)">{{ 24*7 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="setPeriod(24*30)">{{ 24*30 | trKeyFromPeriod | tr }}</a></li>
</ul>
</div>