Add memory and disk graphs to app view

This commit is contained in:
Johannes Zellner
2020-05-13 00:42:27 +02:00
parent 8799882f09
commit abd9ea9ec5
3 changed files with 102 additions and 1 deletions

View File

@@ -464,6 +464,7 @@
<div ng-click="setView('location')" ng-class="{ 'active': view === 'location' }">Location</div>
<div ng-click="setView('access')" ng-class="{ 'active': view === 'access' }">Access Control</div>
<div ng-click="setView('resources')" ng-class="{ 'active': view === 'resources' }">Resources</div>
<div ng-click="setView('graphs')" ng-class="{ 'active': view === 'graphs' }">Graphs</div>
<div ng-click="setView('security')" ng-class="{ 'active': view === 'security' }">Security</div>
<div ng-click="setView('email')" ng-class="{ 'active': view === 'email' }" ng-show="app.manifest.addons.sendmail || app.manifest.addons.recvmail">Email</div>
<div ng-click="setView('updates')" ng-class="{ 'active': view === 'updates' }">Updates</div>
@@ -805,6 +806,29 @@
</div>
</div>
<div class="card" ng-show="view === 'graphs'">
<div class="row">
<div class="col-md-12">
<div class="dropdown pull-right">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Period {{ graphs.periodLabel }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" ng-click="graphs.setPeriod(6, '6 hours')">6 hours</a></li>
<li><a href="" ng-click="graphs.setPeriod(24, '24 hours')">24 hours</a></li>
<li><a href="" ng-click="graphs.setPeriod(24*7, '7 days')">7 days</a></li>
<li><a href="" ng-click="graphs.setPeriod(24*30, '30 days')">30 days</a></li>
</ul>
</div>
<label>Memory Usage</label>
<canvas id="graphsMemoryChart" style="width: 100%; height: 200px;"></canvas>
<label>Disk Usage</label>
<canvas id="graphsDiskChart" style="width: 100%; height: 200px;"></canvas>
</div>
</div>
</div>
<div class="card" ng-show="view === 'email'">
<div class="row">
<div class="col-md-12">