Skip to content
This repository was archived by the owner on May 14, 2025. It is now read-only.

Commit 8caf9a6

Browse files
ghillertilayaperumalg
ghillert
authored and
ilayaperumalg
committed
gh-133 Add sorting capabilities to list pages
* Add sorting to Stream List page * Add sorting to Task List and Execution page * Add proper loading indicator to Runtime Apps page
1 parent 7014974 commit 8caf9a6

File tree

11 files changed

+143
-61
lines changed

11 files changed

+143
-61
lines changed

‎ui/app/scripts/directives.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -393,5 +393,40 @@ define(['angular', 'xregexp', 'moment'], function(angular) {
393393
});
394394
}
395395
};
396+
})
397+
.directive('tableSort', function() {
398+
function applySort(scope) {
399+
if( scope.sortState.sortProperty.toString() === scope.sortProperty.toString() && scope.sortState.sortOrder === 'DESC' ) {
400+
scope.sortState.sortOrder = 'ASC';
401+
}
402+
else if( scope.sortState.sortProperty.toString() === scope.sortProperty.toString() && scope.sortState.sortOrder === 'ASC' ) {
403+
scope.sortState.sortOrder = 'DESC';
404+
}
405+
else {
406+
scope.sortState.sortOrder = 'ASC';
407+
}
408+
scope.sortState.sortProperty = scope.sortProperty;
409+
scope.sortOrderChangeHandler()(scope.sortState);
410+
}
411+
return {
412+
restrict: 'A',
413+
transclude: true,
414+
template :
415+
'<a ng-click="onClick()">'+
416+
'<span ng-transclude></span> '+
417+
'<i class="glyphicon" ng-class="{\'glyphicon-triangle-bottom\' : sortState.sortOrder === \'DESC\' && sortProperty.toString() === sortState.sortProperty.toString(), \'glyphicon-triangle-top\' : sortState.sortOrder===\'ASC\' && sortProperty.toString() === sortState.sortProperty.toString()}"></i>'+
418+
'</a>',
419+
scope: {
420+
sortOrderChangeHandler: '&',
421+
sortProperty: '=',
422+
sortState: '='
423+
},
424+
link: function(scope) {
425+
scope.onClick = function () {
426+
applySort(scope);
427+
};
428+
429+
},
430+
};
396431
});
397432
});

‎ui/app/scripts/runtime/controllers/runtime-apps.js

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2013-2014 the original author or authors.
2+
* Copyright 2013-2016 the original author or authors.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -24,21 +24,29 @@ define(['model/pageable'], function (Pageable) {
2424
'use strict';
2525
return ['$scope', 'RuntimeService', 'DataflowUtils', '$timeout', '$rootScope',
2626
function ($scope, runtimeService, utils, $timeout, $rootScope) {
27-
function loadRuntimeAppsWithTimeout() {
28-
$scope.runtimeTimeOutPromise = $timeout(function() {
29-
loadRuntimeApps($scope.pageable);
30-
}, $rootScope.pageRefreshTime);
31-
}
32-
function loadRuntimeApps(pageable) { // jshint ignore:line
33-
utils.$log.info('pageable', pageable);
34-
runtimeService.getRuntimeApps(pageable).$promise.then(
35-
function (result) {
36-
var apps = result._embedded ? result._embedded.appStatusResourceList : [];
37-
utils.$log.info('Retrieved runtimeApps...', apps);
38-
$scope.pageable.items = apps;
39-
$scope.pageable.total = result.page.totalElements;
40-
loadRuntimeAppsWithTimeout();
41-
}
27+
28+
var runtimeAppsTimeoutPromise;
29+
30+
function loadRuntimeApps(pageable, showGrowl) {
31+
var runtimeAppsPromise = runtimeService.getRuntimeApps(pageable).$promise;
32+
if (showGrowl || showGrowl === undefined) {
33+
utils.addBusyPromise(runtimeAppsPromise);
34+
}
35+
runtimeAppsPromise.then(
36+
function (result) {
37+
var apps = result._embedded ? result._embedded.appStatusResourceList : [];
38+
utils.$log.info('Retrieved runtimeApps...', apps);
39+
$scope.pageable.items = apps;
40+
$scope.pageable.total = result.page.totalElements;
41+
runtimeAppsTimeoutPromise = $timeout(function() {
42+
loadRuntimeApps($scope.pageable, false);
43+
}, $rootScope.pageRefreshTime);
44+
$scope.$on('$destroy', function(){
45+
$timeout.cancel(runtimeAppsTimeoutPromise);
46+
});
47+
}, function (result) {
48+
utils.growl.addErrorMessage(result.data[0].message);
49+
}
4250
);
4351
}
4452
$scope.pageable = new Pageable();

‎ui/app/scripts/shared/model/pageable.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,25 @@ define(function() {
3737
}
3838
this.pageNumber = 0;
3939
this.pageSize = 10;
40+
this.sortProperty = [''];
41+
this.sortOrder = ''; //ASC or DESC
42+
43+
this.calculateSortParameter = function calculateSortParameter() {
44+
var arrayLength = this.sortProperty.length;
45+
var sortParam = '';
46+
for (var i = 0; i < arrayLength; i++) {
47+
var sortPropertyValue = this.sortProperty[i];
48+
if (i === 0) {
49+
sortParam = sortPropertyValue;
50+
}
51+
else {
52+
sortParam = sortParam + ',' + sortPropertyValue;
53+
}
54+
if (i === arrayLength - 1) {
55+
sortParam = sortParam + ',' + this.sortOrder;
56+
}
57+
}
58+
return sortParam;
59+
};
4060
};
41-
});
61+
});

‎ui/app/scripts/stream/controllers/definitions.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,10 @@ define(['model/pageable'], function (Pageable) {
3131
var getStreamDefinitions;
3232

3333
function loadStreamDefinitions(pageable, showGrowl) {
34-
//utils.$log.info('pageable', pageable);
3534
var streamDefinitionsPromise = streamService.getDefinitions(pageable).$promise;
3635
if (showGrowl || showGrowl === undefined) {
3736
utils.addBusyPromise(streamDefinitionsPromise);
3837
}
39-
utils.$log.info(streamDefinitionsPromise);
4038
streamDefinitionsPromise.then(
4139
function (result) {
4240
if (!!result._embedded) {
@@ -58,6 +56,9 @@ define(['model/pageable'], function (Pageable) {
5856
var expandedState = $cookieStore.get(EXPANDED_STATE_COOKIE_KEY) || {};
5957

6058
$scope.pageable = new Pageable();
59+
$scope.pageable.sortOrder = 'ASC';
60+
$scope.pageable.sortProperty = ['DEFINITION_NAME', 'DEFINITION'];
61+
6162
$scope.pagination = {
6263
current: 1
6364
};
@@ -91,6 +92,11 @@ define(['model/pageable'], function (Pageable) {
9192
loadStreamDefinitions($scope.pageable);
9293
};
9394

95+
$scope.sortChanged = function(sortState) {
96+
console.log('sortState: ', sortState);
97+
loadStreamDefinitions($scope.pageable);
98+
};
99+
94100
$scope.deployStream = function (streamDefinition) {
95101
$state.go('home.streams.deployStream', {definitionName: streamDefinition.name});
96102
};

‎ui/app/scripts/stream/services.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ define(function(require) {
3939
'page': pageable.pageNumber,
4040
'size': pageable.pageSize
4141
};
42+
43+
params.sort = pageable.calculateSortParameter();
4244
}
4345
return $resource($rootScope.dataflowServerUrl + '/streams/definitions', params, {
4446
query: {

‎ui/app/scripts/stream/views/definitions.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
<thead>
2929
<tr>
3030
<th></th>
31-
<th>Name</th>
32-
<th>Definition</th>
31+
<th table-sort sort-property="['DEFINITION_NAME', 'DEFINITION']" sort-state="pageable" sort-order-change-handler="sortChanged">Name</th>
32+
<th table-sort sort-property="['DEFINITION','DEFINITION_NAME']" sort-state="pageable" sort-order-change-handler="sortChanged">Definition</th>
3333
<th>Status <a class="status-help" dataflow-popover=".status-help-content" title="Available Deployment Statuses"><span class="glyphicon glyphicon-question-sign"></span></a></th>
3434
<th colspan="4" class="text-center">Actions</th>
3535
</tr>

‎ui/app/scripts/task/controllers/definitions.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,38 +24,44 @@ define(['model/pageable'], function (Pageable) {
2424
'use strict';
2525
return ['$scope', 'TaskDefinitions', 'TaskDefinitionService', 'DataflowUtils', '$state', '$timeout', '$rootScope',
2626
function ($scope, taskDefinitions, taskDefinitionService, utils, $state, $timeout, $rootScope) {
27+
28+
var getTaskDefinitions;
29+
2730
function loadTaskDefinitions(pageable, showGrowl) {
28-
utils.$log.info('pageable', pageable);
2931
var taskDefinitionsPromise = taskDefinitions.getAllTaskDefinitions(pageable).$promise;
32+
if (showGrowl || showGrowl === undefined) {
33+
utils.addBusyPromise(taskDefinitionsPromise);
34+
}
3035
taskDefinitionsPromise.then(
3136
function (result) {
32-
utils.$log.info(result);
33-
3437
if (!!result._embedded) {
3538
$scope.pageable.items = result._embedded.taskDefinitionResourceList;
3639
}
3740
$scope.pageable.total = result.page.totalElements;
38-
39-
var getTaskDefinitions = $timeout(function() {
41+
getTaskDefinitions = $timeout(function() {
4042
loadTaskDefinitions($scope.pageable, false);
4143
}, $rootScope.pageRefreshTime);
4244
$scope.$on('$destroy', function(){
4345
$timeout.cancel(getTaskDefinitions);
4446
});
47+
}, function (result) {
48+
utils.growl.addErrorMessage(result.data[0].message);
4549
}
4650
);
47-
if (showGrowl || showGrowl === undefined) {
48-
utils.addBusyPromise(taskDefinitionsPromise);
49-
}
5051
}
5152
$scope.pageable = new Pageable();
53+
$scope.pageable.sortOrder = 'ASC';
54+
$scope.pageable.sortProperty = ['DEFINITION_NAME', 'DEFINITION'];
5255
$scope.pagination = {
5356
current: 1
5457
};
5558
$scope.pageChanged = function(newPage) {
5659
$scope.pageable.pageNumber = newPage-1;
5760
loadTaskDefinitions($scope.pageable);
5861
};
62+
$scope.sortChanged = function(sortState) {
63+
loadTaskDefinitions(sortState);
64+
};
5965
$scope.clickModal = function (streamDefinition) {
6066
$scope.destroyItem = streamDefinition;
6167
};

‎ui/app/scripts/task/controllers/executions.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,20 @@ define(['model/pageable'], function (Pageable) {
4040
});
4141
}
4242
$scope.pageable = new Pageable();
43+
$scope.pageable.sortOrder = 'DESC';
44+
$scope.pageable.sortProperty = ['TASK_EXECUTION_ID'];
45+
4346
$scope.pagination = {
4447
current: 1
4548
};
4649
$scope.pageChanged = function(newPage) {
4750
$scope.pageable.pageNumber = newPage-1;
4851
loadTaskExecutions($scope.pageable);
4952
};
53+
$scope.sortChanged = function(sortState) {
54+
console.log('sortState: ', sortState);
55+
loadTaskExecutions(sortState);
56+
};
5057

5158
loadTaskExecutions($scope.pageable);
5259
}];

‎ui/app/scripts/task/services.js

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,19 @@ define(function(require) {
3737
});
3838
},
3939
getAllTaskDefinitions: function (pageable) {
40+
var params = {};
4041
if (pageable === 'undefined') {
4142
$log.info('Getting all task definitions.');
42-
return $resource($rootScope.dataflowServerUrl + '/tasks/definitions', {}).get();
4343
}
4444
else {
4545
$log.info('Getting task definitions for pageable:', pageable);
46-
return $resource($rootScope.dataflowServerUrl + '/tasks/definitions',
47-
{
48-
'page': pageable.pageNumber,
49-
'size': pageable.pageSize
50-
},
51-
{
52-
query: {
53-
method: 'GET',
54-
isArray: true
55-
}
56-
}).get();
46+
params = {
47+
'page': pageable.pageNumber,
48+
'size': pageable.pageSize
49+
};
50+
params.sort = pageable.calculateSortParameter();
5751
}
58-
$log.info('Getting all task definitions.');
59-
return $resource($rootScope.dataflowServerUrl + '/tasks/definitions', {}, {
52+
return $resource($rootScope.dataflowServerUrl + '/tasks/definitions', params, {
6053
query: {
6154
method: 'GET',
6255
isArray: true
@@ -105,7 +98,7 @@ define(function(require) {
10598
}
10699
},
107100
getSingleApp: function (appName) {
108-
$log.info('Getting details for app222 ' + appName);
101+
$log.info('Getting details for app ' + appName);
109102
return $resource($rootScope.dataflowServerUrl + '/apps/task/' + appName + '?unprefixedPropertiesOnly=true').get();
110103
},
111104
createDefinition: function (name, definition) {
@@ -134,24 +127,26 @@ define(function(require) {
134127
.factory('TaskExecutions', function ($resource, $rootScope, $log) {
135128
return {
136129
getAllTaskExecutions: function (pageable) {
137-
if (pageable === 'undefined') {
130+
var params = {};
131+
if (pageable === undefined) {
138132
$log.info('Getting all task executions.');
139-
return $resource($rootScope.dataflowServerUrl + '/tasks/executions', {}).get();
140133
}
141134
else {
142135
$log.info('Getting task definitions for pageable:', pageable);
143-
return $resource($rootScope.dataflowServerUrl + '/tasks/executions',
144-
{
145-
'page': pageable.pageNumber,
146-
'size': pageable.pageSize
147-
},
148-
{
149-
query: {
150-
method: 'GET',
151-
isArray: true
152-
}
153-
}).get();
136+
params = {
137+
'page': pageable.pageNumber,
138+
'size': pageable.pageSize
139+
};
140+
141+
params.sort = pageable.calculateSortParameter();
142+
console.log('>>' + params.sort);
154143
}
144+
return $resource($rootScope.dataflowServerUrl + '/tasks/executions', params, {
145+
query: {
146+
method: 'GET',
147+
isArray: true
148+
}
149+
}).get();
155150
}
156151
};
157152
})

‎ui/app/scripts/task/views/definitions.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
<table class="table table-striped table-hover">
2424
<thead>
2525
<tr>
26-
<th>Name</th>
27-
<th>Definition</th>
26+
<th table-sort sort-property="['DEFINITION_NAME', 'DEFINITION']" sort-state="pageable" sort-order-change-handler="sortChanged">Name</th>
27+
<th table-sort sort-property="['DEFINITION','DEFINITION_NAME']" sort-state="pageable" sort-order-change-handler="sortChanged">Definition</th>
2828
<th>Status <a class="status-help" dataflow-popover=".status-help-content" title="Available Deployment Statuses"><span class="glyphicon glyphicon-question-sign"></span></a></th>
2929
<th colspan="3" class="text-center">Actions</th>
3030
</tr>

0 commit comments

Comments
 (0)