cloudron-box/src/views/system.html

<div class="content">

  <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>

  <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>
        <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">
            <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="col-md-12">
              <h3>
                <!-- <span>{{ disk.filesystem }}</span>  <span>({{ disk.mountpoint }})</span> -->
                <span ng-bind-html="'system.diskUsage.mountedAt' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint }"></span>
                <span class="pull-right small" ng-show="disk.available && disk.size" ng-bind-html="'system.diskUsage.usedInfo' | tr:{ used: ((disk.size - disk.available) | prettyDiskSize), size: (disk.size | prettyDiskSize) }"></span>
                <span class="pull-right small" ng-hide="disk.available && disk.size">{{ 'system.diskUsage.notAvailableYet' | tr }}</span>
              </h3>
              <div class="progress">
                <div class="progress-bar" ng-repeat="content in disk.contains" style="width: {{ content.usage / disk.size * 100 }}%; background-color: {{ content.color }};" uib-tooltip="{{ content.label + ' ' + (content.usage | prettyDiskSize) }}"></div>
              </div>
              <br/>
              <p>{{ 'system.diskUsage.diskContent' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint } }}:</p>
              <ul>
                <li ng-repeat="content in disk.contains">
                  <span ng-show="content.type === 'standard'">{{ content.label }} <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
                  <span ng-show="content.type === 'app'"><a href="https://{{ content.app.fqdn }}" target="_blank">{{ content.app.label || content.app.fqdn }}</a> <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
                  <span ng-show="content.type === 'volume'"><a href="/#/volumes">{{ content.volume.name }}</a> <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span> <small class="text-muted">{{ content.usage | prettyDiskSize }}</small></span>
                </li>
              </ul>
            </div>
          </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>

  </uib-tabset>
</div>