Better addon restart feedback

src/views/addons.html

@@ -79,7 +79,7 @@
               <tbody>
                 <tr ng-repeat="addon in addons">
                   <td>
-                    <i class="fa fa-circle" uib-tooltip="{{ addon.status }}" ng-style="{ color: addon.status === 'active' ? '#27CE65' : '#d9534f' }" ng-show="addon.status"></i>
+                    <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">
@@ -92,7 +92,7 @@
                   <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" 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-show="addon.status === 'active'"></i><i class="fa fa-play" ng-hide="addon.status === 'active'"></i></button>
+                    <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>

src/views/addons.js

@@ -9,11 +9,14 @@ angular.module('Application').controller('AddonsController', ['$scope', '$locati
     $scope.ready = false;
     $scope.addons = {};
 
-    function refresh(addonName) {
-        Client.getAddon(addonName, function (error, result) {
-            if (error) return Client.error(error);
+    function refresh(addonName, callback) {
+        callback = callback || function () {};
 
-            $scope.addons[addonName] = result;
+        Client.getAddon(addonName, function (error, result) {
+            if (error) Client.error(error);
+            else $scope.addons[addonName] = result;
+
+            callback();
         });
     }
 
@@ -24,10 +27,18 @@ angular.module('Application').controller('AddonsController', ['$scope', '$locati
     }
 
     $scope.restartAddon = function (addonName) {
+        function waitForActive(addonName) {
+            refresh(addonName, function () {
+                if ($scope.addons[addonName].status === 'active') return;
+
+                setTimeout(function () { waitForActive(addonName); }, 1000);
+            });
+        }
+
         Client.restartAddon(addonName, function (error) {
             if (error) return Client.error(error);
 
-            refresh(addonName);
+            waitForActive(addonName);
         });
     };
 
@@ -71,13 +82,12 @@ angular.module('Application').controller('AddonsController', ['$scope', '$locati
                     return;
                 }
 
-                // reload the addon
                 refresh($scope.addonConfigure.addon.name);
 
                 $('#addonConfigureModal').modal('hide');
                 $scope.addonConfigure.reset();
             });
-        }
+        },
 
         reset: function () {
             $scope.addonConfigure.busy = false;
@@ -103,8 +113,6 @@ angular.module('Application').controller('AddonsController', ['$scope', '$locati
             // just kick off the status fetching
             refreshAll();
 
-            $interval(refreshAll, 5000);
-
             $scope.ready = true;
         });
     });