diff --git a/apps/st2-actions/controller.js b/apps/st2-actions/controller.js index 78e58449e..a62e9e9a5 100644 --- a/apps/st2-actions/controller.js +++ b/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; }); }); }; diff --git a/apps/st2-actions/template.html b/apps/st2-actions/template.html index 4680d81d7..2493234ef 100644 --- a/apps/st2-actions/template.html +++ b/apps/st2-actions/template.html @@ -35,17 +35,6 @@

{{ name }}

- - -
@@ -115,7 +104,15 @@

Parameters

-

Executions

+

+ Executions + +

@@ -132,7 +129,10 @@

Executions

- See all executions + + See all executions +
diff --git a/apps/st2-history/controller.js b/apps/st2-history/controller.js index 3dc60d4ee..8b6fd602e 100644 --- a/apps/st2-history/controller.js +++ b/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); - } - }; }) ; diff --git a/apps/st2-history/template.html b/apps/st2-history/template.html index a6222c756..8a925b3f6 100644 --- a/apps/st2-history/template.html +++ b/apps/st2-history/template.html @@ -61,10 +61,11 @@

{{ group.period | date:'fullDate'}}

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"> -
- +
+
@@ -84,12 +85,12 @@

{{ group.period | date:'fullDate'}}

+ children="record._children" + ng-if="isExpandable(record) && record._expanded">
+ ng-if="isExpandable(record) && record._expanded && !$last">
Started At
Action Name
diff --git a/apps/st2-rules/controller.js b/apps/st2-rules/controller.js index c18937ffb..f8589f0eb 100644 --- a/apps/st2-rules/controller.js +++ b/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' diff --git a/fontello.json b/fontello.json index 6f830f48f..6d352c43f 100644 --- a/fontello.json +++ b/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" } \ No newline at end of file diff --git a/less/fonts.less b/less/fonts.less index a7a952399..cd6295379 100644 --- a/less/fonts.less +++ b/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 { diff --git a/modules/st2-api/service.js b/modules/st2-api/service.js index 1e5f1233b..ecd2af2b8 100644 --- a/modules/st2-api/service.js +++ b/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); }; diff --git a/modules/st2-details/style.less b/modules/st2-details/style.less index 98a789a17..9b11eec37 100644 --- a/modules/st2-details/style.less +++ b/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; + } + } } diff --git a/modules/st2-menu/style.less b/modules/st2-menu/style.less index 9c3483073..aba7a7825 100644 --- a/modules/st2-menu/style.less +++ b/modules/st2-menu/style.less @@ -2,15 +2,24 @@ @import "colors"; .st2-menu { - padding: 10px; - background-color: #222; + background-color: #000; color: #eee; display: flex; align-items: center; + border-top: 5px solid #ff8300; + &__logo { - width: 30px; + padding: 10px 20px; + + // Hides Alt text while svg is still loading + color: transparent; + text-decoration: none; + + img { + width: 30px; + } } &__nav { @@ -19,44 +28,62 @@ display: flex; flex: 1; - margin: 0 20px; + margin: 10px 20px; } &__nav-item { - margin-right: 5px; + margin: 0 10px; a { - color: #eee; + text-align: center; + color: #737373; text-decoration: none; - padding: 8px 10px; + padding: 6px 10px; border-radius: 5px; display: block; + min-width: 40px; + border: 1px solid transparent; } &:hover a { - background-color: #eee; - color: #222; + color: #ff8300; } &--active a { - background-color: #428BCA; + background-color: #292929; + color: #ff8300; + border-color: #333; + box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); + text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } } + &__icon { + display: block; + font-size: 24px; + line-height: 34px; + } + &__server { + position: relative; + width: 120px; + + color: #737373; + &-current { - padding: 10px; - cursor: pointer; + cursor: default; + padding: 10px 20px; } &-list { position: absolute; - right: 0; + top: -15px; + left: 0; z-index: 10; - margin: 5px; - padding: 5px; background-color: #222; display: none; + border-radius: 5px; + padding: 5px 0; } &:hover &-list { @@ -64,11 +91,11 @@ } &-item { - padding: 5px 10px; + padding: 10px 20px; cursor: pointer; &:hover { - text-decoration: underline; + color: #ff8300; } } } diff --git a/modules/st2-menu/template.html b/modules/st2-menu/template.html index 41d149e40..594b032b6 100644 --- a/modules/st2-menu/template.html +++ b/modules/st2-menu/template.html @@ -1,17 +1,24 @@ - - +
{{ getServer() }}
+
+ {{ getServer() }} +