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

Rework tab based sysinfo view into one wide view

Browse Source
This commit is contained in:
Johannes Zellner
2022-10-12 16:00:41 +02:00
parent b88ee3ed05
commit 51ecb708c7
3 changed files with 208 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/views/system.html
View File

@@ -1,39 +1,66 @@
<div class="content">
<div class="container">
<div class="text-left">
<h1>
{{ 'system.title' | tr }}
<a class="btn btn-default pull-right" href="/logs.html?id=box" target="_blank">{{ 'main.action.logs' | tr }}</a>
<button class="btn btn-default pull-right" ng-click="$parent.reboot.show()">{{ 'main.action.reboot' | tr }}</button>
</h1>
<div class="row">
<div class="col-md-12">
<h1>
{{ 'system.title' | tr }}
<a class="btn btn-default pull-right" href="/logs.html?id=box" target="_blank">{{ 'main.action.logs' | tr }}</a>
<button class="btn btn-default pull-right" ng-click="$parent.reboot.show()">{{ 'main.action.reboot' | tr }}</button>
</h1>
</div>
</div>
<uib-tabset active="activeTab">
<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>
<div class="row">
<div class="col-md-6">
<h3 class="graphs-toolbar">
Graphs
<div class="graphs-toolbar-actions">
<button class="btn btn-sm btn-default" style="margin-right: 5px;" ng-click="graphs.refresh()" ng-disabled="graphs.busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': graphs.busy }"></i></button>
<div class="dropdown">
<button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
{{ graphs.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(12)">{{ 12 | 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>
</ul>
</div>
</div>
</h3>
<div class="card" style="min-height: 300px;">
<label>{{ 'system.cpuUsage.title' | tr }}</label>
<canvas id="graphsCPUChart" style="width: 100%;"></canvas>
<br/>
<label>{{ 'system.systemMemory.title' | tr }}</label>
<canvas id="graphsSystemMemoryChart" style="width: 100%;"></canvas>
<div class="text-muted text-center text-small">{{ 'system.systemMemory.graphSubtext' | tr }}</div>
</div>
</uib-tab>
</div>
<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>
<div class="col-md-6">
<h3 class="graphs-toolbar">
{{ 'system.diskUsage.title' | tr }}
<div class="graphs-toolbar-actions">
<button class="btn btn-sm btn-default" style="margin-right: 5px;" ng-click="disks.refresh()" ng-disabled="disks.busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': disks.busy }"></i></button>
</div>
</h3>
<uib-tab index="2" heading="{{ 'system.diskUsage.title' | tr }}">
<div class="card card-large">
<div class="row" ng-show="busy">
<div class="card">
<div class="row" ng-show="disks.busy">
<div class="col-md-12 text-center">
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
</div>
</div>
<div ng-show="!busy" class="ng-hide">
<div class="row" ng-repeat="disk in disks" style="margin-bottom: 20px;">
<div class="row" ng-repeat="disk in disks.disks" style="margin-bottom: 20px;">
<div class="col-md-12">
<h3>
<!-- <span>{{ disk.filesystem }}</span> <span>({{ disk.mountpoint }})</span> -->
@@ -57,22 +84,7 @@
</div>
</div>
</div>
</uib-tab>
<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>
</ul>
</div>
<button class="btn btn-sm btn-default pull-right" style="margin-right: 5px" ng-click="refresh()" ng-disabled="busy"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': busy }"></i></button>
</div>
</uib-tabset>
</div>
</div>