cloudron-box/src/views/system.html

<!-- Modal reboot server -->
<div class="modal fade" id="rebootModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Really reboot server?</h4>
      </div>
      <div class="modal-body">
        <p class="text-danger">Rebooting the server will cause temporary downtime for all apps installed on this Cloudron!</p>
        <p>Use this to apply security updates or if you experience unexpected behaviour. All apps and services currently running on this Cloudron will automatically start when the reboot is complete.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" ng-click="reboot.submit()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> Reboot now</button>
      </div>
    </div>
  </div>
</div>

<div class="content">

  <div class="text-left">
    <h1>
      System Info
      <a class="btn btn-default pull-right" href="/logs.html?id=box" target="_blank">Show Logs</a>
      <button class="btn btn-default pull-right" ng-click="reboot.show()" ng-disabled="reboot.busy"><i class="fa fa-circle-notch fa-spin" ng-show="reboot.busy"></i> Reboot</button>
    </h1>
  </div>

  <uib-tabset active="activeTab">
    <uib-tab index="0" heading="Disk Usage">
      <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="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 class="col-md-12">
              <h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="pull-right small"><b>{{ disk.available | prettyDiskSize }}</b> of <b>{{ disk.size | prettyDiskSize }}</b> available</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>This {{ disk.type }} disk contains:</p>
              <ul>
                <li ng-repeat="content in disk.contains">
                  <span ng-hide="content.app">{{ 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.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>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </uib-tab>

    <uib-tab index="1" heading="System Memory" select="graphs.show()">
      <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>
        App values are not stacked up
      </div>
    </uib-tab>

    <uib-tab index="2" heading="CPU Usage" select="graphs.show()">
      <div class="card card-large" style="min-height: 300px;">
        <label>Percentage</label>
        <canvas id="graphsCPUChart" style="width: 100%;"></canvas>
      </div>
    </uib-tab>

    <div class="dropdown pull-right" ng-hide="activeTab === 0">
      <button class="btn btn-sm 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>

  </uib-tabset>
</div>