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-bold">Rebooting the server will cause temporary downtime for all apps installed on this Cloudron!</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>

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

            <div class="form-group">
              <label class="control-label" for="memoryLimit">Memory Limit <sup><a ng-href="/" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup> : <b>{{ addonConfigure.memoryLimit / 1024 / 1024 + 'MB' }}</b></label>
              <br/>
              <div style="padding: 0 10px;">
                <slider id="memoryLimit" ng-model="addonConfigure.memoryLimit" step="134217728" tooltip="hide" ticks="addonConfigure.memoryTicks" ticks-snap-bounds="67108864"></slider>
              </div>
            </div>

            <input class="ng-hide" type="submit" ng-disabled="addonConfigureForm.$invalid || addonConfigure.busy"/>
          </fieldset>
        </form>
      </div>
      <div class="modal-footer ">
        <button type="button" class="btn btn-default pull-left" ng-click="addonConfigure.submit(0)" ng-disabled="addonConfigureForm.$invalid || addonConfigure.busy">
          <i class="fa fa-circle-notch fa-spin" ng-show="addonConfigure.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="addonConfigure.submit(addonConfigure.memoryLimit)" ng-disabled="addonConfigureForm.$invalid || addonConfigure.busy">
          <i class="fa fa-circle-notch fa-spin" ng-show="addonConfigure.busy"></i> Save
        </button>
      </div>
    </div>
  </div>
</div>

<div class="content">

  <div class="text-left">
    <h1>System</h1>
  </div>

  <div class="text-left">
    <h3>Server</h3>
  </div>

  <div class="card" style="margin-bottom: 15px;">
    <div class="row">
      <div class="col-md-12">
        <p class="text-danger text-bold" ng-show="isRebootRequired">
          This Cloudron requires a reboot, to finalize security updates.
        </p>
        <p>
          If this Cloudron expericences unexpected behavior, please restart the docker addon below first as an attempt to fix any issues, before triggering a server reboot.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-right">
        <a class="btn btn-primary" href="/logs.html?id=box" target="_blank">Show Logs</a>
        <button class="btn btn-danger" ng-click="reboot.show()">Reboot</button>
      </div>
    </div>
  </div>

  <div class="text-left">
    <h3>Addons</h3>
  </div>

  <div class="card" style="margin-bottom: 15px;">
    <div class="row">
      <div class="col-md-12">
        <p>
          Cloudron addons are addons for the apps. These include for example databases and authentication modules.<br/>
          A full list of available addons can be found <a href="https://cloudron.io/developer/addons/" target="_blank">here</a>.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="row ng-hide" ng-show="!ready">
          <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="ready">
          <div class="col-md-12">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th style="width: 5%;"></th>
                  <th style="width: 20%">Addon</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 ng-repeat="addon in addons">
                  <td>
                    <i class="fa fa-circle" uib-tooltip="{{ addon.status }}" ng-style="{ color: addon.status === 'active' ? '#27CE65' : (addon.status === 'starting' ? '#f0ad4e' : '#d9534f') }" ng-show="addon.status"></i>
                    <i class="fa fa-circle-notch fa-spin" ng-hide="addon.status"></i>
                  </td>
                  <td class="elide-table-cell">
                    {{ addon.name }}
                  </td>
                  <td class="elide-table-cell">
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ addon.memoryPercent }}%"></div>
                    </div>
                  </td>
                  <td class="elide-table-cell text-center">
                    <span ng-show="addon.config.memory">{{ addon.config.memory / 1024 / 1024 + ' MB' }}</span>
                  </td>
                  <td class="text-right no-wrap" style="vertical-align: bottom">
                    <button class="btn btn-xs btn-default" ng-click="addonConfigure.show(addon)" uib-tooltip="Configure Memory Limit" ng-show="addon.config.memory"><i class="fa fa-pencil-alt"></i></button>
                    <a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + addon.name }}" target="_blank" uib-tooltip="Logs"><i class="fa fa-file-alt"></i></a>
                    <button class="btn btn-xs btn-default" ng-click="restartAddon(addon.name)" uib-tooltip="Restart"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': addon.status === 'starting' }"></i></button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>