Add basic UI controls for start, stop, logs and show status

src/views/addons.html

@@ -26,7 +26,7 @@
       <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-o-notch fa-spin"></i></h2>
+            <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
           </div>
         </div>
         <div class="row animateMeOpacity ng-hide" ng-show="ready">
@@ -36,14 +36,14 @@
                 <tr>
                   <th style="width: 0.5%;"></th>
                   <th style="width:45%">Addon</th>
-                  <th style="width:49.5%">Status</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-briefcase" uib-tooltip="Active"></i>
+                    <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 }}
@@ -52,9 +52,9 @@
                     -
                   </td>
                   <td class="text-right no-wrap" style="vertical-align: bottom">
-                    <button class="btn btn-xs btn-default" ng-click="" title="Start"><i class="fa fa-paper-plane"></i></button>
-                    <button class="btn btn-xs btn-default" ng-click="" title="Stop"><i class="fa fa-pencil-alt"></i></button>
-                    <button class="btn btn-xs btn-danger" ng-click="" title="Logs"><i class="far fa-trash-alt"></i></button>
+                    <a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + addon.name }}" target="_blank" title="Logs"><i class="fa fa-file-alt"></i></a>
+                    <button class="btn btn-xs btn-success" ng-click="startAddon(addon.name)" title="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)" title="Stop" ng-show="addon.state === 'active'"><i class="fa fa-stop"></i></button>
                   </td>
                 </tr>
               </tbody>

src/views/addons.js

@@ -1,17 +1,37 @@
 'use strict';
 
+/* global angular */
+
 angular.module('Application').controller('AddonsController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
 
     $scope.ready = false;
     $scope.addons = [];
 
-    Client.onReady(function () {
+    function refresh() {
         Client.getAddons(function (error, result) {
             if (error) return Client.error(error);
 
-            $scope.addons = result.map(function (a) { return { name: a }; });
+            $scope.addons = result.map(function (a) { return { name: a, state: 'active' }; });
             $scope.ready = true;
         });
-    });
+    }
+
+    $scope.startAddon = function (addonName) {
+        Client.startAddon(addonName, function (error) {
+            if (error) return Client.error(error);
+
+            refresh();
+        });
+    };
+
+    $scope.stopAddon = function (addonName) {
+        Client.stopAddon(addonName, function (error) {
+            if (error) return Client.error(error);
+
+            refresh();
+        });
+    };
+
+    Client.onReady(refresh);
 }]);