cloudron-box/src/views/system.html

<!-- Modal service configure -->
<div class="modal fade" id="serviceConfigureModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Configure {{ serviceConfigure.service.displayName }}</h4>
      </div>
      <div class="modal-body">
        <form name="serviceConfigureForm" role="form" novalidate ng-submit="serviceConfigure.submit()" autocomplete="off">
          <fieldset>
            <p class="has-error text-center" ng-show="serviceConfigure.error">{{ serviceConfigure.error }}</p>

            <div class="form-group">
              <label class="control-label" for="memoryLimit">Memory Limit : <b>{{ serviceConfigure.memoryLimit / 1024 / 1024 + 'MB' }}</b></label>
              <p><small>Cloudron allocates 50% of this value as RAM and 50% as swap.</small></p>
              <div style="padding: 0 10px;">
                <slider id="memoryLimit" ng-model="serviceConfigure.memoryLimit" step="134217728" tooltip="hide" ticks="serviceConfigure.memoryTicks" ticks-snap-bounds="67108864"></slider>
              </div>
            </div>

            <input class="ng-hide" type="submit" ng-disabled="serviceConfigureForm.$invalid || serviceConfigure.busy"/>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer ">
        <button type="button" class="btn btn-default pull-left" ng-click="serviceConfigure.submit(0)" ng-disabled="serviceConfigureForm.$invalid || serviceConfigure.busy">
          <i class="fa fa-circle-notch fa-spin" ng-show="serviceConfigure.busy"></i> Reset to defaults
        </button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-outline btn-success pull-right" ng-click="serviceConfigure.submit(serviceConfigure.memoryLimit)" ng-disabled="serviceConfigureForm.$invalid || serviceConfigure.busy">
          <i class="fa fa-circle-notch fa-spin" ng-show="serviceConfigure.busy"></i> Save
        </button>
      </div>
    </div>
  </div>
</div>

<!-- 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 only when you experience unexpected behavior. All services and apps will be automatically started.</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>RAM ({{ memory.memory | prettyDiskSize }}) + Swap ({{ memory.swap | prettyDiskSize }}) in MB</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 class="text-left">
    <h3>Services</h3>
  </div>

  <div class="card" style="margin-bottom: 15px;">
    <div class="row">
      <div class="col-md-12">
        <p>
          Cloudron services implement functionality such as databases, email and authentication.<br/>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="row ng-hide" ng-show="!servicesReady">
          <div class="col-md-12 text-center">
            <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
          </div>
        </div>
        <div class="row animateMeOpacity ng-hide" ng-show="servicesReady">
          <div class="col-md-12">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th style="width: 5%;"></th>
                  <th style="width: 20%">Service</th>
                  <th style="width: 50%">Memory Usage</th>
                  <th style="width: 20%" class="text-center">Memory Limit</th>
                  <th style="width: 5%" class="text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><i class="fa fa-circle" uib-tooltip="active" style="color: #27CE65"></i></td>
                  <td class="elide-table-cell">cloudron</td>
                  <td class="elide-table-cell"></td>
                  <td class="elide-table-cell text-center"></td>
                  <td class="text-right no-wrap" style="vertical-align: bottom">
                    <a class="btn btn-xs btn-default" href="/logs.html?id=box" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
                  </td>
                </tr>
                <tr ng-repeat="service in services | filter:{ isRedis: false } | orderBy:'name'">
                  <td>
                    <i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: service.status === 'active' ? '#27CE65' : (service.status === 'starting' ? '#f0ad4e' : '#d9534f') }" ng-show="service.status"></i>
                    <i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
                  </td>
                  <td class="elide-table-cell">
                    {{ service.displayName }}
                  </td>
                  <td class="elide-table-cell">
                    <div class="progress progress-striped" ng-show="service.config.memory">
                      <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ service.memoryPercent }}%"></div>
                    </div>
                  </td>
                  <td class="elide-table-cell text-center">
                    <span ng-show="service.config.memory">{{ service.config.memorySwap / 1024 / 1024 + ' MB' }}</span>
                  </td>
                  <td class="text-right no-wrap" style="vertical-align: bottom">
                    <button class="btn btn-xs btn-default" ng-click="serviceConfigure.show(service)" uib-tooltip="Configure Memory Limit" ng-show="service.config.memory"><i class="fa fa-pencil-alt"></i></button>
                    <button class="btn btn-xs btn-default" ng-click="restartService(service.name)" uib-tooltip="Restart"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': service.status === 'starting' }"></i></button>
                    <a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + service.name }}" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
                  </td>
                </tr>
                <tr ng-show="hasRedisServices" ng-click="redisServicesExpanded = !redisServicesExpanded" class="hand">
                  <td>
                    <i class="fas fa-angle-right" ng-class="{'fa-rotate-90': redisServicesExpanded }"></i>
                  </td>
                  <td colspan="4">redis</td>
                </tr>
                <tr ng-show="redisServicesExpanded" ng-repeat="service in services | filter:{ isRedis: true } | orderBy:'name'">
                  <td>
                    <i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-style="{ color: service.status === 'active' ? '#27CE65' : (service.status === 'starting' ? '#f0ad4e' : '#d9534f') }" ng-show="service.status"></i>
                    <i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
                  </td>
                  <td class="elide-table-cell">
                    {{ service.displayName }}
                  </td>
                  <td class="elide-table-cell">
                    <div class="progress progress-striped" ng-show="service.config.memory">
                      <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ service.memoryPercent }}%"></div>
                    </div>
                  </td>
                  <td class="elide-table-cell text-center">
                    <span ng-show="service.config.memory">{{ service.config.memorySwap / 1024 / 1024 + ' MB' }}</span>
                  </td>
                  <td class="text-right no-wrap" style="vertical-align: bottom">
                    <button class="btn btn-xs btn-default" ng-click="serviceConfigure.show(service)" uib-tooltip="Configure Memory Limit" ng-show="service.config.memory"><i class="fa fa-pencil-alt"></i></button>
                    <button class="btn btn-xs btn-default" ng-click="restartService(service.name)" uib-tooltip="Restart"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': service.status === 'starting' }"></i></button>
                    <a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + service.name }}" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>