This closes #161
diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js b/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js
index 76183e7..f6d3426 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-tree.directive.js
@@ -43,11 +43,14 @@
return {
restrict: 'E',
template: entityTreeTemplate,
- controller: ['$scope', '$state', 'applicationApi', 'iconService', 'brWebNotifications', controller],
+ scope: {
+ sortReverse: '=',
+ },
+ controller: ['$scope', '$state', 'applicationApi', 'entityApi', 'iconService', 'brWebNotifications', controller],
controllerAs: 'vm'
};
- function controller($scope, $state, applicationApi, iconService, brWebNotifications) {
+ function controller($scope, $state, applicationApi, entityApi, iconService, brWebNotifications) {
$scope.$emit(HIDE_INTERSTITIAL_SPINNER_EVENT);
let vm = this;
diff --git a/ui-modules/app-inspector/app/components/entity-tree/entity-tree.html b/ui-modules/app-inspector/app/components/entity-tree/entity-tree.html
index a6c1a01..67c0ce1 100644
--- a/ui-modules/app-inspector/app/components/entity-tree/entity-tree.html
+++ b/ui-modules/app-inspector/app/components/entity-tree/entity-tree.html
@@ -16,7 +16,7 @@
specific language governing permissions and limitations
under the License.
-->
-<entity-node ng-repeat="application in vm.applications track by application.id" entity="application" application-id="application.id"></entity-node>
+<entity-node ng-repeat="application in vm.applications | orderBy: sortReverse? '-creationTimeUtc': 'creationTimeUtc' track by application.id" entity="application" application-id="application.id"></entity-node>
<p class="expand-tree-message text-center" ng-if="vm.applications.length > 0"><small><kbd>shift</kbd> + <kbd>{{navigator.appVersion.indexOf("Mac") !== -1 ? '⌘' : '⊞'}}</kbd> + click to expand all children</small></p>
<div class="empty-tree text-muted text-center" ng-if="vm.applications.length === 0">
<hr />
diff --git a/ui-modules/app-inspector/app/views/main/main.controller.js b/ui-modules/app-inspector/app/views/main/main.controller.js
index 07280f8..c691a10 100644
--- a/ui-modules/app-inspector/app/views/main/main.controller.js
+++ b/ui-modules/app-inspector/app/views/main/main.controller.js
@@ -27,11 +27,16 @@
controllerAs: 'ctrl'
};
+const savedSortReverse = 'app-inspector-sort-reverse';
+
export function mainController($scope, $q, brWebNotifications) {
$scope.$emit(HIDE_INTERSTITIAL_SPINNER_EVENT);
let ctrl = this;
+ ctrl.sortReverse = localStorage && localStorage.getItem(savedSortReverse) !== null ?
+ JSON.parse(localStorage.getItem(savedSortReverse)) :
+ true;
brWebNotifications.supported.then(() => {
ctrl.isNotificationsSupported = true;
}).catch(() => {
@@ -48,6 +53,17 @@
ctrl.isNotificationsBlocked = permission === 'denied';
});
+ ctrl.toggleSortOrder = () => {
+ ctrl.sortReverse = !ctrl.sortReverse;
+ if (localStorage) {
+ try {
+ localStorage.setItem(savedSortReverse, JSON.stringify(ctrl.sortReverse));
+ } catch (ex) {
+ $log.error('Cannot save app sort preferences: ' + ex.message);
+ }
+ }
+ }
+
ctrl.toggleNotifications = () => {
brWebNotifications.isEnabled().then(() => {
return brWebNotifications.setEnable(false);
diff --git a/ui-modules/app-inspector/app/views/main/main.less b/ui-modules/app-inspector/app/views/main/main.less
index d14fed7..527554f 100644
--- a/ui-modules/app-inspector/app/views/main/main.less
+++ b/ui-modules/app-inspector/app/views/main/main.less
@@ -20,11 +20,9 @@
.entity-tree-header {
display: flex;
+ justify-content: space-between;
- .entity-tree-title {
- flex-grow: 1;
- }
- .entity-tree-action {
+ .entity-tree-title, .entity-tree-sort-action, .entity-tree-action {
flex-shrink: 1;
vertical-align: middle;
margin-left: 0.5em;
diff --git a/ui-modules/app-inspector/app/views/main/main.template.html b/ui-modules/app-inspector/app/views/main/main.template.html
index 0911647..c7a90cd 100644
--- a/ui-modules/app-inspector/app/views/main/main.template.html
+++ b/ui-modules/app-inspector/app/views/main/main.template.html
@@ -22,29 +22,36 @@
<br-card>
<br-card-content class="entity-tree">
<div class="entity-tree-header">
- <h2 class="entity-tree-title">Applications</h2>
-
- <button class="btn btn-link entity-tree-action"
+ <div class="entity-tree-header-section">
+ <h2 class="entity-tree-title">Applications</h2>
+ <button class="btn btn-sm btn-default entity-tree-sort-action" ng-click="ctrl.toggleSortOrder($event)">
+ <div>
+ <span class="glyphicon" ng-class="ctrl.sortReverse ? 'fa fa-sort-amount-desc' : 'fa fa-sort-amount-asc'"></span>
+ </div>
+ </button>
+ </div>
+ <div class="entity-tree-header-section">
+ <button class="btn btn-link entity-tree-action"
ng-class="{'btn-sm': !ctrl.isNotificationsBlocked, 'btn-xs': ctrl.isNotificationsBlocked}"
ng-if="ctrl.isNotificationsSupported"
ng-disabled="ctrl.isNotificationsBlocked"
ng-click="ctrl.toggleNotifications()">
- <i class="fa fa-bell notifications" ng-if="!ctrl.isNotificationsBlocked"
- ng-class="{'active': ctrl.isNotificationsEnabled}"></i>
- <span class="fa-stack" ng-if="ctrl.isNotificationsBlocked"
- uib-tooltip="Notifications are currently blocked. You can allow them in your browser settings"
- tooltip-placement="left">
- <i class="fa fa-bell fa-stack-1x"></i>
- <i class="fa fa-ban fa-stack-2x text-danger"></i>
- </span>
- </button>
-
- <a href="/brooklyn-ui-blueprint-composer" class="btn btn-sm btn-default entity-tree-action">
- <i class="fa fa-plus"></i>
- </a>
+ <i class="fa fa-bell notifications" ng-if="!ctrl.isNotificationsBlocked"
+ ng-class="{'active': ctrl.isNotificationsEnabled}"></i>
+ <span class="fa-stack" ng-if="ctrl.isNotificationsBlocked"
+ uib-tooltip="Notifications are currently blocked. You can allow them in your browser settings"
+ tooltip-placement="left">
+ <i class="fa fa-bell fa-stack-1x"></i>
+ <i class="fa fa-ban fa-stack-2x text-danger"></i>
+ </span>
+ </button>
+ <a href="/brooklyn-ui-blueprint-composer" class="btn btn-sm btn-default entity-tree-action">
+ <i class="fa fa-plus"></i>
+ </a>
+ </div>
</div>
- <entity-tree></entity-tree>
+ <entity-tree sort-reverse="ctrl.sortReverse"></entity-tree>
</br-card-content>
</br-card>
