diff --git a/awx/ui/client/src/management-jobs/list/list.controller.js b/awx/ui/client/src/management-jobs/card/card.controller.js similarity index 89% rename from awx/ui/client/src/management-jobs/list/list.controller.js rename to awx/ui/client/src/management-jobs/card/card.controller.js index fbc098f0b1..e9d5c4409c 100644 --- a/awx/ui/client/src/management-jobs/list/list.controller.js +++ b/awx/ui/client/src/management-jobs/card/card.controller.js @@ -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 }); }; diff --git a/awx/ui/client/src/management-jobs/card/card.partial.html b/awx/ui/client/src/management-jobs/card/card.partial.html new file mode 100644 index 0000000000..3b4cfec9ba --- /dev/null +++ b/awx/ui/client/src/management-jobs/card/card.partial.html @@ -0,0 +1,24 @@ +
+
+
+ +
+

{{ card.name }}

+
+ + +
+
+ + +

{{card.description || "Place organization description here"}}

+ +
+
\ No newline at end of file diff --git a/awx/ui/client/src/management-jobs/list/list.route.js b/awx/ui/client/src/management-jobs/card/card.route.js similarity index 85% rename from awx/ui/client/src/management-jobs/list/list.route.js rename to awx/ui/client/src/management-jobs/card/card.route.js index 7301ebffe2..7f177b9b5a 100644 --- a/awx/ui/client/src/management-jobs/list/list.route.js +++ b/awx/ui/client/src/management-jobs/card/card.route.js @@ -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' diff --git a/awx/ui/client/src/management-jobs/list/main.js b/awx/ui/client/src/management-jobs/card/main.js similarity index 61% rename from awx/ui/client/src/management-jobs/list/main.js rename to awx/ui/client/src/management-jobs/card/main.js index 85c1367893..e21f7f7e73 100644 --- a/awx/ui/client/src/management-jobs/list/main.js +++ b/awx/ui/client/src/management-jobs/card/main.js @@ -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); }]); diff --git a/awx/ui/client/src/management-jobs/card/mgmtcards.block.less b/awx/ui/client/src/management-jobs/card/mgmtcards.block.less new file mode 100644 index 0000000000..1f83e43df2 --- /dev/null +++ b/awx/ui/client/src/management-jobs/card/mgmtcards.block.less @@ -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; + } +} diff --git a/awx/ui/client/src/management-jobs/list/list.partial.html b/awx/ui/client/src/management-jobs/list/list.partial.html deleted file mode 100644 index 4a42a0a48d..0000000000 --- a/awx/ui/client/src/management-jobs/list/list.partial.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
diff --git a/awx/ui/client/src/management-jobs/main.js b/awx/ui/client/src/management-jobs/main.js index 392e5edd41..b374b84857 100644 --- a/awx/ui/client/src/management-jobs/main.js +++ b/awx/ui/client/src/management-jobs/main.js @@ -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);