cloudron-box/src/views/graphs.html

<div class="content content-large">

  <div class="row" ng-if="errorMessage">
    <br>
    <div class="alert alert-danger text-center">
      {{ errorMessage }}
    </div>
  </div>

  <div class="text-left">
      <h2>Memory</h2>
  </div>

  <div class="card card-large text-center">
    <div class="row">
      <div class="col-md-6">
        <h3>Apps</h3>
        <div style="width: 200px; height: 200px; margin: auto;">
          <canvas id="memoryUsageAppsChart" style="width: 200px; height: 200px;"></canvas>
        </div>
      </div>
      <div class="col-md-6">
        <h3>System</h3>
        <div style="width: 200px; height: 200px; margin: auto;">
          <canvas id="memoryUsageSystemChart" style="width: 200px; height: 200px;"></canvas>
        </div>
      </div>
    </div>

    <br/>

    <div class="row">
      <div class="col-md-12">
        <h4 ng-show="activeApp === 'system'">System</h4>
        <h4 ng-show="activeApp !== 'system'">{{ activeApp.fqdn }}</h4>
        <br/>
        <canvas id="memoryAppChart" width="900" height="300"></canvas>
        <p>Memory consumption in MB.</p>
      </div>
    </div>
  </div>

  <br/>

  <div class="text-left">
    <h2>Disk Usage</h2>
  </div>

  <div class="card card-large">
    <div class="row" ng-repeat="disk in disks" style="margin-bottom: 20px;">
      <div class="col-md-12">
        <h3>{{ disk.filesystem }} <small>mounted at</small> {{ disk.mountpoint }} <span class="badge pull-right">{{ disk.size | prettyDiskSize }}</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>