cloudron-box/dashboard/public/views/system.html

<div>

  <h1 class="section-header">
    {{ 'system.title' | tr }}
    <div style="flex-grow: 1;"></div>
    <a class="btn btn-default" href="/logs.html?id=box" target="_blank">{{ 'main.action.logs' | tr }}</a>
    <button class="btn btn-default" ng-click="$parent.reboot.show()">{{ 'main.action.reboot' | tr }}</button>
  </h1>

  <h3 class="graphs-toolbar">
    {{ 'system.info.title' | tr }}
  </h3>

  <div class="card card-expand">
    <div class="row">
      <div class="col-xs-4 text-muted">{{ 'system.info.platformVersion' | tr }}</div>
      <div class="col-xs-8 text-right">v{{ config.version }} ({{ config.ubuntuVersion }})</div>
    </div>
    <div class="row">
      <div class="col-xs-4 text-muted">{{ 'system.info.vendor' | tr }}</div>
      <div class="col-xs-8 text-right">{{ info.sysVendor }}</div>
    </div>
    <div class="row">
      <div class="col-xs-4 text-muted">{{ 'system.info.product' | tr }}</div>
      <div class="col-xs-8 text-right">{{ info.productName }}</div>
    </div>
    <div class="row">
      <div class="col-xs-4 text-muted">CPU</div>
      <div class="col-xs-8 text-right">{{ cpus.length + ' Core "' + cpus[0].model + '"' }}</div>
    </div>
    <div class="row">
      <div class="col-xs-4 text-muted">{{ 'system.info.memory' | tr }}</div>
      <div class="col-xs-8 text-right">{{ memory.memory | prettyDiskSize }} RAM <span ng-show="memory.swap">&amp; {{ memory.swap | prettyDiskSize }} Swap</span></div>
    </div>
    <div class="row">
      <div class="col-xs-4 text-muted">{{ 'system.info.uptime' | tr }}</div>
      <div class="col-xs-8 text-right">{{ info.uptimeSecs }}</div>
    </div>
    <div class="row" ng-show="info.activationTime">
      <div class="col-xs-4 text-muted">{{ 'system.info.activationTime' | tr }}</div>
      <div class="col-xs-8 text-right">{{ info.activationTime | prettyDate }}</div>
    </div>
  </div>

  <div style="display: flex; flex-wrap: wrap; gap: 20px;">
    <div style="flex-grow: 1;">
      <h3 class="graphs-toolbar">
        {{ 'system.graphs.title' | tr }}
        <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 card-expand" style="min-height: 300px;">
        <label>{{ 'system.cpuUsage.title' | tr }}</label>
        <canvas id="graphsCPUChart" style="width: 100%;"></canvas>
        <div class="text-muted text-center text-small">{{ 'system.cpuUsage.graphSubtext' | tr:{ threshold: '20 %'} }}</div>

        <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:{ threshold: '1 GiB'} }}</div>
      </div>
    </div>

    <div style="flex-grow: 1; flex-basis: 500px;">
      <h3 class="graphs-toolbar">
        {{ 'system.diskUsage.title' | tr }}
        <span class="small disks-last-updated" ng-show="!disks.busy && disks.ts">Last updated: {{ disks.ts | prettyDate }}</span>
        <div class="graphs-toolbar-actions">
          <button class="btn btn-sm btn-default" style="margin-right: 5px;" ng-click="disks.refresh()" ng-disabled="disks.busy || disks.busyRefresh"><i class="fas fa-sync-alt" ng-class="{ 'fa-spin': disks.busyRefresh }"></i></button>
        </div>
      </h3>

      <div class="card card-expand">
        <div class="row" ng-show="disks.busy">
          <div class="col-md-12 text-center">
            <h2 style="margin: 60px 0;"><i class="fa fa-circle-notch fa-spin"></i></h2>
          </div>
        </div>
        <div class="row" ng-show="!disks.busy && !disks.ts">
          <div class="col-md-12 text-center">
            <button class="btn btn-primary" style="margin: 60px 0;" ng-click="disks.refresh()" ng-disabled="disks.busyRefresh"><i class="fas fa-sync-alt fa-spin" ng-show="disks.busyRefresh"></i> Analyze Disk</button>
          </div>
        </div>
        <div ng-hide="disks.busy" class="ng-hide">
          <div class="row" ng-repeat="disk in disks.disks" style="margin-bottom: 20px;">
            <hr style="margin: 5px 0px;" ng-show="$index !== 0"/>
            <div class="col-md-12">
              <div style="display: flex; align-items: baseline; justify-content: space-between;">
                <h3 class="no-wrap" style="font-size: 20px;" ng-bind-html="'system.diskUsage.mountedAt' | tr:{ filesystem: disk.filesystem, mountpoint: disk.mountpoint }"></h3>
                <div class="text-muted" style="white-space:nowrap;" ng-show="disk.available && disk.size" ng-bind-html="'system.diskUsage.usedInfo' | tr:{ used: (disk.used | prettyDiskSize), size: (disk.size | prettyDiskSize) }"></div>
                <div class="text-muted" style="white-space:nowrap;" ng-hide="disk.available && disk.size">{{ 'system.diskUsage.notAvailableYet' | tr }}</div>
              </div>
              <div class="progress">
                <div class="progress-bar" ng-repeat="content in disk.contents" style="width: {{ content.usage / disk.size * 100 }}%; background-color: {{ content.color }};" uib-tooltip="{{ content.label + ' ' + (content.usage | prettyDiskSize) }}"></div>
                <div class="text-center text-muted" style="font-size: 12px; line-height: 20px;">{{ disk.available | prettyDiskSize }}</div>
              </div>
              <div class="text-right text-muted" style="margin-top: 10px;" ng-show="disk.speed !== -1">{{ 'system.diskUsage.diskSpeed' | tr:{ speed: disk.speed } }}</div>
              <p ng-hide="disk.volume">{{ 'system.diskUsage.diskContent' | tr }}:</p>
              <p ng-show="disk.volume" ng-bind-html="'system.diskUsage.volumeContent' | tr:{ name: disk.volume.name }"></p>
              <div ng-repeat="content in disk.contents" class="disk-content">
                <span class="color-indicator" style="background-color: {{ content.color }};">&nbsp;</span>
                <span ng-show="content.type === 'cloudron-backup-default'">{{ content.path }} (Old Backups)</span>
                <span ng-show="content.type === 'standard'">{{ content.label }}</span>
                <span ng-show="content.type === 'swap'">{{ content.label }}</span>
                <span ng-show="content.type === 'app'">
                  <a href="/#/app/{{ content.app.id }}/storage" ng-hide="content.uninstalled">{{ content.label }}</a>
                  <span ng-show="content.uninstalled">{{ 'system.diskUsage.uninstalledApp' | tr }}</span>
                </span>
                <span ng-show="content.type === 'volume'"><a href="/#/volumes">{{ content.label }}</a></span>
                <small class="text-muted">{{ content.usage | prettyDiskSize }}</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>