cloudron-box/src/views/addons.html

<div class="content">

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

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

  <div class="card" style="margin-bottom: 15px;">
    <div class="row">
      <div class="col-xs-12">
        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>.
      </div>
    </div>
  </div>

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

  <div class="card" style="margin-bottom: 15px;">
    <div class="row">
      <div class="col-xs-12">
        <div class="row ng-hide" ng-show="!ready">
          <div class="col-xs-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-xs-12">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th style="width: 0.5%;"></th>
                  <th style="width:45%">Addon</th>
                  <th style="width:49.5%">Memory</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.state }}" ng-style="{ color: addon.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
                  </td>
                  <td class="elide-table-cell">
                    {{ addon.name }}
                  </td>
                  <td class="elide-table-cell">
                    -
                  </td>
                  <td class="text-right no-wrap" style="vertical-align: bottom">
                    <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-success" ng-click="startAddon(addon.name)" uib-tooltip="Start" ng-show="addon.state === 'inactive'"><i class="fa fa-play"></i></button>
                    <button class="btn btn-xs btn-danger" ng-click="stopAddon(addon.name)" uib-tooltip="Stop" ng-show="addon.state === 'active'"><i class="fa fa-stop"></i></button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>