Fix UI bugs related to instance groups views

* Fix bug where capacity_adjustment sets to "1.00" when instance is toggled
* Hookup websockets for instance group jobs and instance jobs
* Add Wait spinner to Capacity_Adjuster, Instance association modal, and Instance group delete
* Add updateDataset event listener to update instance and instanceGroups list after smartSearch query
This commit is contained in:
Marliana Lara 2018-02-05 15:48:38 -05:00
parent 4002f2071d
commit d743faf33e
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
9 changed files with 112 additions and 32 deletions

View File

@ -1,4 +1,4 @@
function CapacityAdjuster (templateUrl) {
function CapacityAdjuster (templateUrl, ProcessErrors, Wait) {
return {
scope: {
state: '='
@ -23,6 +23,7 @@ function CapacityAdjuster (templateUrl) {
const vm = this || {};
vm.slide = (state) => {
Wait('start');
const data = {
"capacity_adjustment": `${state.capacity_adjustment}`
};
@ -31,7 +32,16 @@ function CapacityAdjuster (templateUrl) {
url: state.url,
data
};
$http(req);
$http(req)
.catch(({data, status}) => {
ProcessErrors(data, status, null, {
hdr: 'Error!',
msg: 'Call failed. Return status: ' + status
});
})
.finally(() => {
Wait('stop');
});
};
},
controllerAs: 'vm'
@ -39,7 +49,9 @@ function CapacityAdjuster (templateUrl) {
}
CapacityAdjuster.$inject = [
'templateUrl'
'templateUrl',
'ProcessErrors',
'Wait'
];
export default CapacityAdjuster;

View File

@ -1,7 +1,8 @@
function InstanceJobsController ($scope, $filter, $state, model, strings, jobStrings) {
function InstanceJobsController ($scope, $filter, $state, model, strings, jobStrings, Instance) {
const vm = this || {};
const { instance } = model;
let { instance } = model;
const instance_id = instance.get('id');
init();
@ -62,6 +63,17 @@ function InstanceJobsController ($scope, $filter, $state, model, strings, jobStr
}
};
$scope.$on('ws-jobs', () => {
new Instance(['get', 'options'], [instance_id, instance_id])
.then((data) => {
return data.extend('get', 'jobs', {params: {page_size: "10", order_by: "-finished"}});
})
.then((data) => {
instance = data;
init();
});
});
}
InstanceJobsController.$inject = [
@ -70,7 +82,8 @@ InstanceJobsController.$inject = [
'$state',
'resolvedModels',
'InstanceGroupsStrings',
'JobStrings'
'JobStrings',
'InstanceModel'
];
export default InstanceJobsController;

View File

@ -1,4 +1,4 @@
function InstanceModalController ($scope, $state, models, strings, ProcessErrors) {
function InstanceModalController ($scope, $state, models, strings, ProcessErrors, Wait) {
const { instance, instanceGroup } = models;
const vm = this || {};
@ -39,6 +39,7 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
}, true);
vm.submit = () => {
Wait('start');
const associate = vm.selectedRows
.map(instance => ({id: instance.id}));
const disassociate = vm.deselectedRows
@ -60,6 +61,9 @@ function InstanceModalController ($scope, $state, models, strings, ProcessErrors
hdr: 'Error!',
msg: 'Call failed. Return status: ' + status
});
})
.finally(() => {
Wait('stop');
});
};
@ -73,7 +77,8 @@ InstanceModalController.$inject = [
'$state',
'resolvedModels',
'InstanceGroupsStrings',
'ProcessErrors'
'ProcessErrors',
'Wait'
];
export default InstanceModalController;

View File

@ -14,10 +14,10 @@
<smart-search
class="at-List-search"
django-model="instances"
base-path="instances"
base-path="{{list.basePath}}"
iterator="instance"
list="list"
dataset="vm.instances"
dataset="instance_dataset"
collection="collection"
search-tags="searchTags">
</smart-search>

View File

@ -10,15 +10,25 @@ function InstancesController ($scope, $state, $http, models, Instance, strings,
function init() {
$scope.list = {
name: 'instances',
iterator: 'instance',
name: 'instances'
basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
};
$scope.collection = {
basepath: 'instances',
iterator: 'instance'
iterator: 'instance',
basePath: `/api/v2/instance_groups/${vm.instance_group_id}/instances/`
};
$scope[`${$scope.list.iterator}_dataset`] = Dataset.data;
$scope[$scope.list.name] = $scope[`${$scope.list.iterator}_dataset`].results;
$scope.instances = vm.instances;
$scope.$on('updateDataset', function(e, dataset) {
$scope[`${$scope.list.iterator}_dataset`] = dataset;
$scope[$scope.list.name] = dataset.results;
vm.instances = dataset.results;
});
}
vm.tab = {
@ -42,6 +52,7 @@ function InstancesController ($scope, $state, $http, models, Instance, strings,
instance.enabled = !instance.enabled;
const data = {
"capacity_adjustment": instance.capacity_adjustment,
"enabled": instance.enabled
};

View File

@ -27,11 +27,8 @@
ng-class="{'at-Row--active': (job.id === vm.activeId)}"
job-id="{{ job.id }}">
<div class="at-RowStatus">
<a href="{{ job.detailsUrl }}" ng-if="isSuccessful(job.status)" aw-tool-tip="Job successful. Click for details." aw-tip-placement="right">
<i class="fa DashboardList-status DashboardList-status--success icon-job-successful"></i>
</a>
<a href="{{ job.detailsUrl }}" ng-if="!isSuccessful(job.status)" aw-tool-tip="Job failed. Click for details." aw-tip-placement="right">
<i class="fa DashboardList-status DashboardList-status--failed icon-job-failed"></i>
<a ng-click="vm.viewJobResults(job)" aw-tool-tip="{{ job.status_tip }}" data-tip-watch="job.status_tip" aw-tip-placement="right" >
<i class="fa icon-job-{{ job.status }}"></i>
</a>
</div>
<div class="at-Row-items">

View File

@ -1,12 +1,12 @@
function InstanceGroupJobsController ($scope, $filter, $state, model, strings, jobStrings) {
function InstanceGroupJobsController ($scope, $filter, $state, model, strings, jobStrings, InstanceGroup) {
const vm = this || {};
const { instanceGroup } = model;
let { instanceGroup } = model;
const instance_group_id = instanceGroup.get('id');
init();
function init(){
const instance_group_id = instanceGroup.get('id');
vm.strings = strings;
vm.jobStrings = jobStrings;
vm.queryset = { page_size: '10', order_by: '-finished', instance_group_id: instance_group_id };
@ -72,8 +72,19 @@ function InstanceGroupJobsController ($scope, $filter, $state, model, strings, j
goTojobResults('workflowResults');
break;
}
};
$scope.$on('ws-jobs', () => {
new InstanceGroup(['get', 'options'], [instance_group_id, instance_group_id])
.then((instance_group) => {
return instance_group.extend('get', 'jobs', {params: {page_size: "10", order_by: "-finished"}});
})
.then((instance_group) => {
instanceGroup = instance_group;
init();
});
});
}
InstanceGroupJobsController.$inject = [
@ -82,7 +93,8 @@ InstanceGroupJobsController.$inject = [
'$state',
'resolvedModels',
'InstanceGroupsStrings',
'JobStrings'
'JobStrings',
'InstanceGroupModel'
];
export default InstanceGroupJobsController;

View File

@ -1,27 +1,40 @@
export default ['$scope', 'InstanceGroupList', 'resolvedModels', 'Dataset', '$state', 'ComponentsStrings', 'ProcessErrors',
function($scope, InstanceGroupList, resolvedModels, Dataset, $state, strings, ProcessErrors) {
const list = InstanceGroupList;
export default ['$scope', 'resolvedModels', 'Dataset', '$state', 'ComponentsStrings', 'ProcessErrors', 'Wait',
function($scope, resolvedModels, Dataset, $state, strings, ProcessErrors, Wait) {
const vm = this;
const { instanceGroup } = resolvedModels;
vm.strings = strings;
$scope.selection = {};
init();
function init(){
$scope.list = list;
$scope[`${list.iterator}_dataset`] = Dataset.data;
$scope[list.name] = $scope[`${list.iterator}_dataset`].results;
$scope.instanceGroupCount = Dataset.data.count;
}
$scope.list = {
iterator: 'instance_group',
name: 'instance_groups'
};
$scope.selection = {};
$scope.collection = {
basePath: 'instance_groups',
iterator: 'instance_group'
};
$scope[`${$scope.list.iterator}_dataset`] = Dataset.data;
$scope[$scope.list.name] = $scope[`${$scope.list.iterator}_dataset`].results;
$scope.instanceGroupCount = Dataset.data.count;
$scope.$on('updateDataset', function(e, dataset) {
$scope[`${$scope.list.iterator}_dataset`] = dataset;
$scope[$scope.list.name] = dataset.results;
});
}
$scope.$watch('$state.params.instance_group_id', () => {
vm.activeId = parseInt($state.params.instance_group_id);
});
vm.delete = () => {
Wait('start');
let deletables = $scope.selection;
deletables = Object.keys(deletables).filter((n) => deletables[n]);
@ -33,6 +46,9 @@ export default ['$scope', 'InstanceGroupList', 'resolvedModels', 'Dataset', '$st
hdr: 'Error!',
msg: 'Call failed. Return status: ' + status
});
})
.finally(() => {
Wait('stop');
});
});
};

View File

@ -278,6 +278,13 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) {
dynamic: true
},
},
data: {
socket: {
"groups": {
"jobs": ["status_changed"],
}
}
},
resolvedModels: InstanceGroupsResolve
});
@ -297,6 +304,13 @@ function InstanceGroupsRun ($stateExtender, strings, ComponentsStrings) {
dynamic: true
}
},
data: {
socket: {
"groups": {
"jobs": ["status_changed"],
}
}
},
views: {
'jobs@instanceGroups': {
templateUrl: JobsTemplate,