Polishing. Batch #1.

apps/st2-actions/controller.js

@@ -6,18 +6,19 @@ angular.module('main')
       .state('actions', {
         abstract: true,
         url: '/actions',
+        icon: 'st2-icon__actions',
         controller: 'st2ActionsCtrl',
         templateUrl: 'apps/st2-actions/template.html',
         title: 'Actions'
       })
       .state('actions.list', {
-        url: '?page'
+        url: ''
       })
       .state('actions.summary', {
-        url: '/{id:\\w+}?page'
+        url: '/{id:\\w+}'
       })
       .state('actions.details', {
-        url: '/{id:\\w+}/details?page'
+        url: '/{id:\\w+}/details'
       })
 
       ;
@@ -34,9 +35,7 @@ angular.module('main')
       $scope.groups = list && _.groupBy(list, 'content_pack');
     });
 
-    $scope.$watch('$root.state.params.page', function (page) {
-      st2Api.actions.fetch(page);
-    });
+    st2Api.actions.fetchAll();
 
     $scope.$watch('$root.state.params.id', function (id) {
       // TODO: figure out why you can't use $filter('unwrap')(...) here
@@ -45,12 +44,7 @@ angular.module('main')
 
         $scope.payload = {};
 
-        st2Api.executions.find({
-          'action_id': action.id,
-          'limit': 5
-        }).then(function (executions) {
-          $scope.executions = executions;
-        });
+        $scope.reloadExecutions(action.id);
 
         if ($scope.actionHasFile(action)) {
           st2Api.actionEntryPoints.get(id).then(function (file) {
@@ -61,6 +55,18 @@ angular.module('main')
       });
     });
 
+    $scope.reloadExecutions = function (action_id) {
+      $scope.inProgress = true;
+
+      st2Api.executions.find({
+        'action_id': action_id,
+        'limit': 5
+      }).then(function (executions) {
+        $scope.inProgress = false;
+        $scope.executions = executions;
+      });
+    };
+
     // Running an action
     $scope.runAction = function (actionName, payload) {
       var retry = function (fn, condition) {
@@ -74,7 +80,11 @@ angular.module('main')
               if (condition(result)) {
                 defer.resolve(result);
               } else {
-                retry(fn, condition);
+                retry(fn, condition).then(function (result) {
+                  // this function would be launched once for every retry which may be an
+                  // unpleasant overhead on some long running tasks. TODO: refactor eventually.
+                  defer.resolve(result);
+                });
               }
             });
         }, TIMEOUT);
@@ -100,9 +110,13 @@ angular.module('main')
             });
         };
 
+        $scope.inProgress = true;
+
         retry(updateExecution, function (execution) {
           var finalStates = ['succeeded', 'failed'];
           return _.contains(finalStates, execution.status);
+        }).finally(function () {
+          $scope.inProgress = false;
         });
       });
     };

apps/st2-actions/template.html

@@ -35,17 +35,6 @@ <h2 class="st2-panel__heading-title">{{ name }}</h2>
       </div>
     </div>
 
-    <button class="st2-panel__prev-button"
-        ng-click="prevPage()"
-        ng-if="$root.page > 1">
-      Previous page
-    </button>
-    <button class="st2-panel__next-button"
-        ng-click="nextPage()"
-        ng-if="($root.page || 1) < $root.maxPage">
-      Next page
-    </button>
-
     <div class="st2-panel__back-button"
       ng-click="$root.state.go('^.summary', {id: action.id, page: $root.page})">
     </div>
@@ -115,7 +104,15 @@ <h2 class="st2-details__panel-title">Parameters</h2>
 
   <div class="st2-details__panel">
     <div class="st2-details__panel-heading">
-      <h2 class="st2-details__panel-title">Executions</h2>
+      <h2 class="st2-details__panel-title">
+        Executions
+        <i class="st2-details__reload-button st2-icon__reload"
+          ng-class="{
+            'animate-spin': inProgress,
+            'st2-details__reload-button--in-progress': inProgress
+          }"
+          ng-click="inProgress || reloadExecutions(action.id)"></i>
+      </h2>
     </div>
     <div class="st2-details__panel-body">
       <table class="st2-details__table">
@@ -132,7 +129,10 @@ <h2 class="st2-details__panel-title">Executions</h2>
           </tr>
         </tbody>
       </table>
-      <a href="#" class="st2-details__button">See all executions</a>
+      <a class="st2-details__button"
+          ui-sref="history.list({action_id: action.id})">
+        See all executions
+      </a>
     </div>
   </div>
 

apps/st2-history/controller.js

@@ -6,18 +6,19 @@ angular.module('main')
       .state('history', {
         abstract: true,
         url: '/history',
+        icon: 'st2-icon__history',
         controller: 'st2HistoryCtrl',
         templateUrl: 'apps/st2-history/template.html',
         title: 'History'
       })
       .state('history.list', {
-        url: '?page'
+        url: '?page&action_id'
       })
       .state('history.summary', {
-        url: '/{id:\\w+}?page'
+        url: '/{id:\\w+}?page&action_id'
       })
       .state('history.details', {
-        url: '/{id:\\w+}/details?page'
+        url: '/{id:\\w+}/details?page&action_id'
       })
 
       ;
@@ -49,7 +50,8 @@ angular.module('main')
 
     $scope.$watch('$root.state.params.page', function (page) {
       st2Api.history.fetch(page, {
-        parent: 'null'
+        parent: 'null',
+        action_id: $scope.$root.state.params.action_id
       });
     });
 
@@ -67,27 +69,29 @@ angular.module('main')
           }).value();
 
         $scope.payload = _.clone(record.execution.parameters);
-
-        st2Api.history.find({
-          'parent': record.parent || record.id
-        }).then(function (records) {
-          $scope.children = records;
-        });
       });
     });
 
+    $scope.expand = function (record) {
+      record._expanded = true;
+
+      return st2Api.history.find({
+        'parent': record.id
+      }).then(function (records) {
+        record._children = records;
+      });
+    };
+
+    $scope.contract = function (record) {
+      record._expanded = false;
+      return true;
+    };
+
     // helpers
     $scope.isExpandable = function (record) {
       var runnerWithChilds = ['workflow', 'action-chain'];
       return runnerWithChilds.indexOf(record.action.runner_type) !== -1;
     };
-
-    $scope.isCurrent = function (record) {
-      if (record) {
-        var current = $scope.record;
-        return current && (record.id === current.id || record.id === current.parent);
-      }
-    };
   })
 
   ;

apps/st2-history/template.html

@@ -61,10 +61,11 @@ <h2 class="st2-panel__heading-title">{{ group.period | date:'fullDate'}}</h2>
             ng-class-odd="'st2-flex-table__row--odd'"
             ng-class-even="'st2-flex-table__row--even'"
             ng-repeat-start="record in group.records"
-            ng-click="$root.state.go('^.summary', {id: record.id})"
-            tabindex="-1">
-          <div class="st2-flex-table__column st2-history__column-utility">
-            <i ng-class="isCurrent(record) && 'st2-icon__expanded' || 'st2-icon__contracted'"
+            ng-click="$root.state.go('^.summary', {id: record.id})">
+          <div class="st2-flex-table__column st2-history__column-utility"
+              ng-click="isExpandable(record) &&
+                (record._expanded && contract(record) || expand(record))">
+            <i ng-class="record._expanded && 'st2-icon__expanded' || 'st2-icon__contracted'"
                 ng-if="isExpandable(record)">
             </i>
           </div>
@@ -84,12 +85,12 @@ <h2 class="st2-panel__heading-title">{{ group.period | date:'fullDate'}}</h2>
           </div>
         </div>
         <div class="st2-history-child"
-            children="children | unwrap"
-            ng-if="isExpandable(record) && isCurrent(record)">
+            children="record._children"
+            ng-if="isExpandable(record) && record._expanded">
         </div>
         <div ng-repeat-end
             class="st2-flex-table__header"
-            ng-if="isExpandable(record) && isCurrent(record) && !$last">
+            ng-if="isExpandable(record) && record._expanded && !$last">
           <div class="st2-flex-table__column st2-history__column-utility"></div>
           <div class="st2-flex-table__column st2-history__column-time">Started At</div>
           <div class="st2-flex-table__column st2-history__column-action">Action Name</div>

apps/st2-rules/controller.js

@@ -7,6 +7,7 @@ angular.module('main')
       .state('rules', {
         abstract: true,
         url: '/rules',
+        icon: 'st2-icon__rules',
         controller: 'st2RulesCtrl',
         templateUrl: 'apps/st2-rules/template.html',
         title: 'Rules'

fontello.json

@@ -6,6 +6,36 @@
 	"units_per_em": 1000,
 	"ascent": 850,
 	"glyphs": [
+		{
+			"uid": "2a6740fc2f9d0edea54205963f662594",
+			"css": "reload",
+			"code": 59398,
+			"src": "fontelico"
+		},
+		{
+			"uid": "d4816c0845aa43767213d45574b3b145",
+			"css": "history",
+			"code": 59401,
+			"src": "fontawesome"
+		},
+		{
+			"uid": "9755f76110ae4d12ac5f9466c9152031",
+			"css": "rules",
+			"code": 59400,
+			"src": "fontawesome"
+		},
+		{
+			"uid": "8aa99bc60f3553bb3e31b73dd6e744c8",
+			"css": "actions",
+			"code": 59397,
+			"src": "fontawesome"
+		},
+		{
+			"uid": "898ddc67cb7d9ae53dbd4cce78043e9e",
+			"css": "flow-cascade",
+			"code": 59399,
+			"src": "entypo"
+		},
 		{
 			"uid": "499b745a2e2485bdd059c3a53d048e5f",
 			"css": "cancel",
@@ -37,5 +67,5 @@
 			"src": "elusive"
 		}
 	],
-	"session": "eff524e2e453a88deb9329222544e349"
+	"session": "9ea686d9c5a3391ae73c8f29950711c5"
 }

less/fonts.less

@@ -1,6 +1,7 @@
 @import (inline) "http://fonts.googleapis.com/css?family=Oswald:400,300,700";
 @import (inline) "http://fonts.googleapis.com/css?family=PT+Sans:400,700";
 @import (inline) "font/ststanley-embedded.css";
+@import (inline) "font/animation.css";
 @import "colors";
 
 #st2-fonts {

modules/st2-api/service.js

@@ -51,6 +51,18 @@ angular.module('main')
         return promise;
       };
 
+      scope.fetchAll = function (params) {
+        promise = $http.get(HOST + url, {
+          params: params
+        });
+
+        promise.then(function () {
+          list = promise.then(function (response) {
+            return response.data;
+          });
+        });
+      };
+
       scope.fetchOne = function (id) {
         return $http.get(HOST + url + '/' + id);
       };

modules/st2-details/style.less

@@ -8,6 +8,7 @@
 @import (reference) '/components/bootstrap/less/buttons.less';
 @import (reference) '/components/bootstrap/less/utilities.less';
 @import (reference) '/components/bootstrap/less/wells.less';
+@import (reference) '/font/ststanley.css';
 
 .st2-details {
   #st2-layout > #panel;
@@ -157,4 +158,12 @@
     &--right:extend(.pull-right) {}
     &--left:extend(.pull-left) {}
   }
+
+  &__reload-button {
+    cursor: pointer;
+
+    &--in-progress {
+      cursor: default;
+    }
+  }
 }