shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 23:51:09 +03:00
Code Releases Activity

Merge pull request #3367 from marshmalien/feat-toolbar-sort-jobs-list

Browse Source 
Add toolbar sort to Jobs lists

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
This commit is contained in:
softwarefactory-project-zuul[bot] 2019-03-08 14:18:15 +00:00 committed by GitHub
commit 7b570b59c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 94 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
awx/ui/client/features/jobs/jobs.strings.js
View File

@ -4,6 +4,13 @@ function JobsStrings (BaseString) {
const { t } = this;
const ns = this.jobs;
ns.sort = {
NAME_ASCENDING: t.s('Name (Ascending)'),
NAME_DESCENDING: t.s('Name (Descending)'),
START_TIME: t.s('Start Time'),
FINISH_TIME: t.s('Finish Time')
};
ns.list = {
PANEL_TITLE: t.s('JOBS'),
ROW_ITEM_LABEL_STARTED: t.s('Started'),

58
awx/ui/client/features/jobs/jobsList.controller.js
View File

@ -28,6 +28,7 @@ function ListJobsController (
// smart-search
const name = 'jobs';
const iterator = 'job';
let paginateQuerySet = {};
let launchModalOpen = false;
let refreshAfterLaunchClose = false;
@ -40,6 +41,63 @@ function ListJobsController (
vm.job_dataset = Dataset.data;
vm.jobs = Dataset.data.results;
$scope.$watch('$state.params', () => {
setToolbarSort();
}, true);
const toolbarSortDefault = {
label: `${strings.get('sort.FINISH_TIME')}`,
value: '-finished'
};
function setToolbarSort () {
const orderByValue = _.get($state.params, 'job_search.order_by');
const sortValue = _.find(vm.toolbarSortOptions, (option) => option.value === orderByValue);
if (sortValue) {
vm.toolbarSortValue = sortValue;
} else {
vm.toolbarSortValue = toolbarSortDefault;
}
}
vm.toolbarSortOptions = [
{ label: `${strings.get('sort.NAME_ASCENDING')}`, value: 'name' },
{ label: `${strings.get('sort.NAME_DESCENDING')}`, value: '-name' },
{ label: `${strings.get('sort.START_TIME')}`, value: 'finished' },
toolbarSortDefault
];
vm.toolbarSortValue = toolbarSortDefault;
// Temporary hack to retrieve $scope.querySet from the paginate directive.
// Remove this event listener once the page and page_size params
// are represented in the url.
$scope.$on('updateDataset', (event, dataset, queryset) => {
paginateQuerySet = queryset;
});
vm.onToolbarSort = (sort) => {
vm.toolbarSortValue = sort;
const queryParams = Object.assign(
{},
$state.params.job_search,
paginateQuerySet,
{ order_by: sort.value }
);
// Update URL with params
$state.go('.', {
job_search: queryParams
}, { notify: false, location: 'replace' });
qs.search(SearchBasePath, queryParams)
.then(({ data }) => {
vm.jobs = data.results;
vm.job_dataset = data;
});
};
$scope.$watch('vm.job_dataset.count', () => {
$scope.$emit('updateCount', vm.job_dataset.count, 'jobs');
});

9
awx/ui/client/features/jobs/jobsList.view.html
View File

@ -14,10 +14,13 @@
</div>
<at-list-toolbar
ng-if="vm.jobs.length > 0"
sort-only="false"
on-collapse="vm.onCollapse"
on-expand="vm.onExpand"
is-collapsed="vm.isCollapsed">
on-collapse="vm.onCollapse"
is-collapsed="vm.isCollapsed"
sort-only="false"
sort-value="vm.toolbarSortValue"
sort-options="vm.toolbarSortOptions"
on-sort="vm.onToolbarSort">
</at-list-toolbar>
<at-list results="vm.jobs" empty-list-reason="{{ vm.emptyListReason }}">
<!-- TODO: implement resources are missing red indicator as present in mockup -->

15
awx/ui/client/features/projects/projectsList.controller.js
View File

@ -13,6 +13,7 @@ function projectsListController (
) {
const vm = this || {};
const [ProjectModel] = resolvedModels;
let paginateQuerySet = {};
$scope.canAdd = ProjectModel.options('actions.POST');
vm.strings = strings;
@ -75,14 +76,28 @@ function projectsListController (
vm.toolbarSortValue = toolbarSortDefault;
// Temporary hack to retrieve $scope.querySet from the paginate directive.
// Remove this event listener once the page and page_size params
// are represented in the url.
$scope.$on('updateDataset', (event, dataset, queryset) => {
paginateQuerySet = queryset;
});
vm.onToolbarSort = (sort) => {
vm.toolbarSortValue = sort;
const queryParams = Object.assign(
{},
$state.params.project_search,
paginateQuerySet,
{ order_by: sort.value }
);
// Update URL with params
$state.go('.', {
project_search: queryParams
}, { notify: false, location: 'replace' });
qs.search(GetBasePath(vm.list.basePath), queryParams)
.then(({ data }) => {
vm.dataset = data;

1
awx/ui/client/lib/components/layout/_index.less
View File

@ -200,7 +200,6 @@
&-main {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
padding-bottom: @at-space-4x;

19
awx/ui/client/lib/components/list/_index.less
View File

@ -71,25 +71,12 @@
.at-List-toolbar-item {
padding: 2px 10px;
border-left: 1px solid @at-color-list-border;
border-right: 1px solid @at-color-list-border;
&:hover {
cursor: pointer;
background: @at-gray-f2;
}
&:first-of-type {
border-right: none;
}
&:last-of-type {
border: none;
}
&:first-child {
border-left: 1px solid @at-color-list-border;
}
&.active {
background: @at-blue;
color: @at-white;
@ -98,12 +85,6 @@
.at-List-toolbarDropdown {
border-top-right-radius: @at-border-radius;
padding: 2px 10px;
&:hover {
cursor: pointer;
background: @at-gray-f2;
}
&-toggle {
background: none;

2
awx/ui/client/lib/components/list/list-toolbar.partial.html
View File

@ -1,7 +1,7 @@
<div class="at-List-toolbar--attached">
<div ng-class="isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onCollapse()">{{ vm.strings.get('toolbar.COMPACT') }}</div>
<div ng-class="!isCollapsed ? 'active' : ''" ng-if="!sortOnly" class="at-List-toolbar-item" ng-click="onExpand()">{{ vm.strings.get('toolbar.EXPANDED') }}</div>
<div ng-if="sortOptions" class="at-List-toolbarDropdown dropdown">
<div ng-if="sortOptions" class="at-List-toolbar-item at-List-toolbarDropdown dropdown">
<button
class="at-List-toolbarDropdown-toggle dropdown-toggle"
data-display="static"

2
awx/ui/client/src/shared/paginate/paginate.controller.js
View File

@ -55,7 +55,7 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
}
$scope.dataset = res.data;
$scope.collection = res.data.results;
$scope.$emit('updateDataset', res.data);
$scope.$emit('updateDataset', res.data, queryset);
});
};

2
awx/ui/client/src/shared/paginate/paginate.directive.js
View File

@ -8,7 +8,7 @@ export default ['templateUrl',
dataset: '=',
iterator: '@',
basePath: '@',
querySet: '=',
querySet: '=?',
maxVisiblePages: '@',
hideViewPerPage: '='
},

11
awx/ui/client/src/shared/smart-search/smart-search.controller.js
View File

@ -46,7 +46,7 @@ function SmartSearchController (
qs.search(path, queryset).then((res) => {
$scope.dataset = res.data;
$scope.collection = res.data.results;
$scope.$emit('updateDataset', res.data);
$scope.$emit('updateDataset', res.data, queryset);
});
$scope.searchTerm = null;
@ -77,7 +77,7 @@ function SmartSearchController (
}
$scope.dataset = res.data;
$scope.collection = res.data.results;
$scope.$emit('updateDataset', res.data);
$scope.$emit('updateDataset', res.data, queryset);
});
$scope.searchTerm = null;
@ -164,7 +164,6 @@ function SmartSearchController (
$scope.searchPlaceholder = i18n._('Search');
}
});
listenForTransitionSuccess();
});
@ -205,7 +204,7 @@ function SmartSearchController (
}
$scope.dataset = data;
$scope.collection = data.results;
$scope.$emit('updateDataset', data);
$scope.$emit('updateDataset', data, queryset);
})
.catch(() => revertSearch(unmodifiedQueryset));
@ -241,7 +240,7 @@ function SmartSearchController (
}
$scope.dataset = data;
$scope.collection = data.results;
$scope.$emit('updateDataset', data);
$scope.$emit('updateDataset', data, queryset);
});
generateSearchTags();
@ -271,7 +270,7 @@ function SmartSearchController (
}
$scope.dataset = data;
$scope.collection = data.results;
$scope.$emit('updateDataset', data);
$scope.$emit('updateDataset', data, queryset);
});
$scope.searchTags = qs.stripDefaultParams(queryset, defaults);