mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
Merge pull request #900 from leigh-johnson/ManagementJobCardView
Fixes #632, replace managementJobsListController with NEW managementJobsCardController
This commit is contained in:
Leigh
commit
20161b7ac4
@ -7,49 +7,37 @@
|
||||
// import listGenerator from 'tower/shared/list-generator/main';
|
||||
|
||||
export default
|
||||
[ 'Wait', '$location' , '$compile', 'CreateDialog', 'generateList',
|
||||
[ 'Wait', '$location' , '$compile', 'CreateDialog',
|
||||
'GetBasePath' , 'SearchInit' , 'PaginateInit',
|
||||
'SchedulesList',
|
||||
'Rest' , 'ProcessErrors', 'managementJobsListObject', '$rootScope',
|
||||
'$state', 'Stream',
|
||||
function( Wait, $location, $compile, CreateDialog, GenerateList,
|
||||
'$state','$scope',
|
||||
function( Wait, $location, $compile, CreateDialog,
|
||||
GetBasePath, SearchInit, PaginateInit,
|
||||
SchedulesList,
|
||||
Rest, ProcessErrors, managementJobsListObject, $rootScope,
|
||||
$state, Stream) {
|
||||
$state, $scope) {
|
||||
|
||||
var defaultUrl = GetBasePath('system_job_templates');
|
||||
|
||||
var getManagementJobs = function(){
|
||||
Rest.setUrl(defaultUrl);
|
||||
Rest.get()
|
||||
.success(function(data){
|
||||
$scope.mgmtCards = data.results;
|
||||
Wait('stop');
|
||||
})
|
||||
.error(function(data, status){
|
||||
ProcessErrors($scope, data, status, null, {hdr: 'Error!',
|
||||
msg: 'Call to '+ defaultUrl + ' failed. Return status: '+ status});
|
||||
});
|
||||
};
|
||||
getManagementJobs();
|
||||
var scope = $rootScope.$new(),
|
||||
parent_scope = scope,
|
||||
defaultUrl = GetBasePath('system_job_templates'),
|
||||
list = managementJobsListObject,
|
||||
view = GenerateList;
|
||||
|
||||
list = managementJobsListObject;
|
||||
scope.cleanupJob = true;
|
||||
|
||||
view.inject( list, {
|
||||
mode: 'edit',
|
||||
scope: scope,
|
||||
showSearch: true
|
||||
});
|
||||
|
||||
SearchInit({
|
||||
scope: scope,
|
||||
set: 'configure_jobs',
|
||||
list: list,
|
||||
url: defaultUrl
|
||||
});
|
||||
|
||||
PaginateInit({
|
||||
scope: scope,
|
||||
list: list,
|
||||
url: defaultUrl
|
||||
});
|
||||
|
||||
scope.search(list.iterator);
|
||||
|
||||
scope.showActivity = function () {
|
||||
Stream({ scope: scope });
|
||||
};
|
||||
|
||||
// Cancel
|
||||
scope.cancelConfigure = function () {
|
||||
@ -71,7 +59,7 @@ export default
|
||||
}
|
||||
};
|
||||
|
||||
scope.submitCleanupJob = function(id, name){
|
||||
$scope.submitCleanupJob = function(id, name){
|
||||
defaultUrl = GetBasePath('system_job_templates')+id+'/launch/';
|
||||
CreateDialog({
|
||||
id: 'prompt-for-days-facts',
|
||||
@ -174,7 +162,7 @@ export default
|
||||
});
|
||||
};
|
||||
|
||||
scope.submitJob = function (id, name) {
|
||||
$scope.submitJob = function (id, name) {
|
||||
Wait('start');
|
||||
if(this.configure_job.job_type === "cleanup_facts"){
|
||||
scope.submitCleanupJob(id, name);
|
||||
@ -250,10 +238,10 @@ export default
|
||||
}
|
||||
};
|
||||
|
||||
scope.configureSchedule = function() {
|
||||
$scope.configureSchedule = function() {
|
||||
$state.transitionTo('managementJobsSchedule', {
|
||||
management_job: this.configure_job,
|
||||
management_job_id: this.configure_job.id
|
||||
management_job: this.job_type,
|
||||
management_job_id: this.card.id
|
||||
});
|
||||
};
|
||||
|
||||
24
awx/ui/client/src/management-jobs/card/card.partial.html
Normal file
24
awx/ui/client/src/management-jobs/card/card.partial.html
Normal file
@ -0,0 +1,24 @@
|
||||
<div class="tab-pane" id="management_jobs">
|
||||
<div class="MgmtCards">
|
||||
<div class="MgmtCards-card"
|
||||
ng-repeat="card in mgmtCards track by card.id">
|
||||
<!-- Begin Card Header -->
|
||||
<div class="MgmtCards-header">
|
||||
<h3 class="MgmtCards-label"> {{ card.name }}</h3>
|
||||
<div class="MgmtCards-actionItems">
|
||||
<button class="MgmtCards-actionItem List-actionButton"
|
||||
ng-click='submitCleanupJob(card.id, card.name)'>
|
||||
<i class="MgmtCards-actionItemIcon fa fa-rocket"></i>
|
||||
</button>
|
||||
<button class="MgmtCards-actionItem List-actionButton"
|
||||
ng-click='configureSchedule()'>
|
||||
<i class="MgmtCards-actionItemIcon fa fa-calendar"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Card Header -->
|
||||
<!-- Begin Card Body -->
|
||||
<p>{{card.description || "Place organization description here"}}</p>
|
||||
<!-- End Card Body -->
|
||||
</div>
|
||||
</div>
|
||||
@ -9,8 +9,8 @@ import {templateUrl} from '../../shared/template-url/template-url.factory';
|
||||
export default {
|
||||
name: 'managementJobsList',
|
||||
route: '/management_jobs',
|
||||
templateUrl: templateUrl('management-jobs/list/list'),
|
||||
controller: 'managementJobsListController',
|
||||
templateUrl: templateUrl('management-jobs/card/card'),
|
||||
controller: 'managementJobsCardController',
|
||||
data: {
|
||||
activityStream: true,
|
||||
activityStreamTarget: 'management_job'
|
||||
@ -4,12 +4,12 @@
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
import route from './list.route';
|
||||
import controller from './list.controller';
|
||||
import route from './card.route';
|
||||
import controller from './card.controller';
|
||||
|
||||
export default
|
||||
angular.module('managementJobsList', [])
|
||||
.controller('managementJobsListController', controller)
|
||||
angular.module('managementJobsCard', [])
|
||||
.controller('managementJobsCardController', controller)
|
||||
.run(['$stateExtender', function($stateExtender) {
|
||||
$stateExtender.addState(route);
|
||||
}]);
|
||||
116
awx/ui/client/src/management-jobs/card/mgmtcards.block.less
Normal file
116
awx/ui/client/src/management-jobs/card/mgmtcards.block.less
Normal file
@ -0,0 +1,116 @@
|
||||
/** @define MgmtCards */
|
||||
|
||||
.MgmtCards {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.MgmtCards-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.MgmtCards-card--selected {
|
||||
padding-left: 16px;
|
||||
border-left: 5px solid #1678C4;
|
||||
}
|
||||
|
||||
.MgmtCards-header {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.MgmtCards-label {
|
||||
margin-top: 0px;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #848992;
|
||||
margin-bottom: 25px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.MgmtCards-actionItems {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.MgmtCards-actionItem {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.MgmtCards-description {
|
||||
margin-bottom: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.MgmtCards-links {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.MgmtCards-link {
|
||||
flex: initial;
|
||||
width: ~"calc(50% - 20px)";
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.MgmtCards-linkBadge {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 1179px) {
|
||||
.MgmtCards-card {
|
||||
width: ~"calc(25% - 15px)";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.MgmtCards-card:nth-child(4n+4) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) and (max-width: 1178px) {
|
||||
.MgmtCards-card {
|
||||
width: ~"calc(33% - 11px)";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.MgmtCards-card:nth-child(3n+3) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 616px) and (max-width: 900px) {
|
||||
.MgmtCards-card {
|
||||
width: ~"calc(50% - 10px)";
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.MgmtCards-card:nth-child(2n+2) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 615px) {
|
||||
.MgmtCards-card {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
<div class="tab-pane" id="management_jobs">
|
||||
<div ng-cloak id="htmlTemplate" class="Panel"></div>
|
||||
</div>
|
||||
@ -4,13 +4,13 @@
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
import managementJobsList from './list/main';
|
||||
import managementJobsCard from './card/main';
|
||||
import managementJobsSchedule from './schedule/main';
|
||||
import list from './management-jobs.list';
|
||||
|
||||
export default
|
||||
angular.module('managementJobs', [
|
||||
managementJobsList.name,
|
||||
managementJobsCard.name,
|
||||
managementJobsSchedule.name
|
||||
])
|
||||
.factory('managementJobsListObject', list);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user