Fixup system memory and cpu graphs

This commit is contained in:
Johannes Zellner
2022-10-11 21:22:56 +02:00
parent 78f0da0b50
commit e56585df10
2 changed files with 83 additions and 66 deletions

View File

@@ -9,7 +9,23 @@
</div>
<uib-tabset active="activeTab">
<uib-tab index="0" heading="{{ 'system.diskUsage.title' | tr }}">
<uib-tab index="0" heading="{{ 'system.systemMemory.title' | tr }}">
<div class="card card-large" style="min-height: 300px;">
<label>Megabyte</label>
<canvas id="graphsSystemMemoryChart" style="width: 100%;"></canvas>
<br/>
<div class="text-muted text-center text-small">{{ 'system.systemMemory.graphSubtext' | tr }}</div>
</div>
</uib-tab>
<uib-tab index="1" 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>
</div>
</uib-tab>
<uib-tab index="2" heading="{{ 'system.diskUsage.title' | tr }}">
<div class="card card-large">
<div class="row" ng-show="busy">
<div class="col-md-12 text-center">
@@ -43,29 +59,14 @@
</div>
</uib-tab>
<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>
<br/>
<div class="text-muted text-center text-small">{{ 'system.systemMemory.graphSubtext' | tr }}</div>
</div>
</uib-tab>
<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>
</div>
</uib-tab>
<div class="dropdown pull-right" ng-hide="activeTab === 0">
<div class="dropdown pull-right" ng-hide="activeTab === 2">
<button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
{{ period | trKeyFromPeriod | tr }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="" ng-click="setPeriod(6)">{{ 6 | trKeyFromPeriod | tr }}</a></li>
<li><a href="" ng-click="setPeriod(12)">{{ 12 | 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>