Merge pull request #136 from jaredevantabor/simplify-jobs-page

Simplify jobs page

awx/ui/static/js/app.js

@@ -123,7 +123,7 @@ var tower = angular.module('Tower', [
     'PermissionListDefinition',
     'PermissionsHelper',
     'CompletedJobsDefinition',
-    'RunningJobsDefinition',
+    'AllJobsDefinition',
     'JobFormDefinition',
     'JobSummaryDefinition',
     'ParseHelper',
@@ -152,7 +152,6 @@ var tower = angular.module('Tower', [
     'AngularScheduler',
     'Timezones',
     'SchedulesHelper',
-    'QueuedJobsDefinition',
     'JobsListDefinition',
     'LogViewerStatusDefinition',
     'LogViewerHelper',
@@ -728,69 +727,6 @@ var tower = angular.module('Tower', [
                     });
                 };
 
-                // html = "<a href=\"\" ng-click=\"socketHelp()\" aw-pop-over=\"{{ socketTip }}\" aw-pop-over-watch=\"socketTip\" data-placement=\"bottom\" data-trigger=\"hover\" " +
-                //     "data-popover-title=\"Live Events\" data-container=\"body\" style=\"font-size: 10px;\"><i class=\"fa icon-socket-{{ socketStatus }}\"></i></a>";
-                // e = angular.element(document.getElementById('socket-beacon-div'));
-                // e.empty().append(html);
-                // $compile(e)($rootScope);
-
-                // e = angular.element(document.getElementById('socket-beacon-li'));
-                // e.empty().append(html);
-                // $compile(e)($rootScope);
-
-                // // Listen for job changes and issue callbacks to initiate
-                // // DOM updates
-                // function openSocket() {
-                //     sock = Socket({ scope: $rootScope, endpoint: "jobs" });
-                //     sock.init();
-                //     sock.on("status_changed", function(data) {
-                //         $log.debug('Job ' + data.unified_job_id + ' status changed to ' + data.status);
-                //         $rootScope.$emit('JobStatusChange', data);
-                //     });
-                //     sock.on("summary_complete", function(data) {
-                //         $log.debug('Job summary_complete ' + data.unified_job_id);
-                //         $rootScope.$emit('JobSummaryComplete', data);
-                //     });
-                //     sock.on("schedule_change", function(data) {
-                //         $log.debug('schedule changed to ' + data.status);
-                //         $rootScope.$emit('ScheduleChange', data);
-                //     });
-                // }
-
-                // if ($rootScope.removeOpenSocket) {
-                //     $rootScope.removeOpenSocket();
-                // }
-                // $rootScope.removeOpenSocket = $rootScope.$on('OpenSocket', function() {
-
-                //     openSocket();
-
-                //     setTimeout(function() {
-                //         $rootScope.$apply(function() {
-                //             sock.checkStatus();
-                //             $log.debug('socket status: ' + $rootScope.socketStatus);
-                //         });
-                //     },2000);
-
-                //     // monitor socket status
-                //     checkCount = 0;
-                //     setInterval(function() {
-                //         if (sock.checkStatus() === 'error' || checkCount > 5) {
-                //             // there's an error or we're stuck in a 'connecting' state. attempt to reconnect
-                //             $log.debug('socket status: ' + sock.checkStatus());
-                //             $log.debug('attempting new socket connection');
-                //             sock = null;
-                //             openSocket();
-                //             checkCount = 0;
-                //         }
-                //         else if (sock.checkStatus() === 'connecting') {
-                //             checkCount++;
-                //         }
-                //         else {
-                //             checkCount = 0;
-                //         }
-                //     }, 5000);
-                // });
-
             }); // end of 'ConfigReady'
 
 

awx/ui/static/js/controllers/Jobs.js

@@ -14,12 +14,13 @@
 */
 
 
-export function JobsListController ($rootScope, $log, $scope, $compile, $routeParams, ClearScope, Breadcrumbs, LoadBreadCrumbs, LoadSchedulesScope,
+export function JobsListController ($rootScope, $log, $scope, $compile, $routeParams,
-    LoadJobsScope, RunningJobsList, CompletedJobsList, QueuedJobsList, ScheduledJobsList, GetChoices, GetBasePath, Wait, Socket) {
+    ClearScope, Breadcrumbs, LoadBreadCrumbs, LoadSchedulesScope,
+    LoadJobsScope, AllJobsList, ScheduledJobsList, GetChoices, GetBasePath, Wait, Socket) {
 
     ClearScope();
 
-    var completed_scope, running_scope, queued_scope, scheduled_scope,
+    var jobs_scope, scheduled_scope,
         choicesCount = 0,
         listCount = 0,
         api_complete = false,
@@ -33,10 +34,10 @@ export function JobsListController ($rootScope, $log, $scope, $compile, $routePa
             endpoint: "jobs"
         });
         job_socket.init();
-        job_socket.on("status_changed", function(data) {
+        job_socket.on("status_changed", function() {
-            if (api_complete) {
+            // if (api_complete) {
-                processEvent(data);
+                jobs_scope.refreshJobs();
-            }
+            // }
         });
         schedule_socket = Socket({
             scope: $scope,
@@ -50,28 +51,6 @@ export function JobsListController ($rootScope, $log, $scope, $compile, $routePa
         });
     }
 
-    function processEvent(event) {
-        switch(event.status) {
-            case 'running':
-                running_scope.search('running_job');
-                queued_scope.search('queued_job');
-                break;
-            case 'new':
-            case 'pending':
-            case 'waiting':
-                queued_scope.search('queued_job');
-                completed_scope.search('completed_job');
-                break;
-            case 'successful':
-            case 'failed':
-            case 'error':
-            case 'canceled':
-                completed_scope.search('completed_job');
-                running_scope.search('running_job');
-                queued_scope.search('queued_job');
-        }
-    }
-
     LoadBreadCrumbs();
 
     if ($scope.removeListLoaded) {
@@ -79,7 +58,7 @@ export function JobsListController ($rootScope, $log, $scope, $compile, $routePa
     }
     $scope.removeListLoaded = $scope.$on('listLoaded', function() {
         listCount++;
-        if (listCount === 4) {
+        if (listCount === 2) {
             api_complete = true;
             openSockets();
         }
@@ -92,71 +71,47 @@ export function JobsListController ($rootScope, $log, $scope, $compile, $routePa
     $scope.removeBuildJobsList = $scope.$on('buildJobsList', function() {
         var opt, search_params;
 
-        if (CompletedJobsList.fields.type) {
+        if (AllJobsList.fields.type) {
-            CompletedJobsList.fields.type.searchOptions = $scope.type_choices;
+            AllJobsList.fields.type.searchOptions = $scope.type_choices;
-        }
-        if (RunningJobsList.fields.type) {
-            RunningJobsList.fields.type.searchOptions = $scope.type_choices;
-        }
-        if (QueuedJobsList.fields.type) {
-            QueuedJobsList.fields.type.searchOptions = $scope.type_choices;
         }
         if ($routeParams.status) {
-            search_params[CompletedJobsList.iterator + 'SearchField'] = 'status';
+            search_params[AllJobsList.iterator + 'SearchField'] = 'status';
-            search_params[CompletedJobsList.iterator + 'SelectShow'] = true;
+            search_params[AllJobsList.iterator + 'SelectShow'] = true;
-            search_params[CompletedJobsList.iterator + 'SearchSelectOpts'] = CompletedJobsList.fields.status.searchOptions;
+            search_params[AllJobsList.iterator + 'SearchSelectOpts'] = AllJobsList.fields.status.searchOptions;
-            search_params[CompletedJobsList.iterator + 'SearchFieldLabel'] = CompletedJobsList.fields.status.label.replace(/<br\>/g,' ');
+            search_params[AllJobsList.iterator + 'SearchFieldLabel'] = AllJobsList.fields.status.label.replace(/<br\>/g,' ');
-            search_params[CompletedJobsList.iterator + 'SearchType'] = '';
+            search_params[AllJobsList.iterator + 'SearchType'] = '';
-            for (opt in CompletedJobsList.fields.status.searchOptions) {
+            for (opt in AllJobsList.fields.status.searchOptions) {
-                if (CompletedJobsList.fields.status.searchOptions[opt].value === $routeParams.status) {
+                if (AllJobsList.fields.status.searchOptions[opt].value === $routeParams.status) {
-                    search_params[CompletedJobsList.iterator + 'SearchSelectValue'] = CompletedJobsList.fields.status.searchOptions[opt];
+                    search_params[AllJobsList.iterator + 'SearchSelectValue'] = AllJobsList.fields.status.searchOptions[opt];
                     break;
                 }
             }
         }
-        completed_scope = $scope.$new(true);
+        jobs_scope = $scope.$new(true);
-        completed_scope.showJobType = true;
+        jobs_scope.showJobType = true;
         LoadJobsScope({
             parent_scope: $scope,
-            scope: completed_scope,
+            scope: jobs_scope,
-            list: CompletedJobsList,
+            list: AllJobsList,
-            id: 'completed-jobs',
-            url: GetBasePath('unified_jobs') + '?or__status=successful&or__status=failed&or__status=error&or__status=canceled',
-            searchParams: search_params,
-            pageSize: max_rows
-        });
-        running_scope = $scope.$new(true);
-        LoadJobsScope({
-            parent_scope: $scope,
-            scope: running_scope,
-            list: RunningJobsList,
             id: 'active-jobs',
-            url: GetBasePath('unified_jobs') + '?status=running',
+            url: GetBasePath('unified_jobs') + '?status__in=pending,running,completed,failed,successful,error,canceled',
-            pageSize: max_rows
+            pageSize: max_rows,
-        });
+            spinner: false
-        queued_scope = $scope.$new(true);
-        LoadJobsScope({
-            parent_scope: $scope,
-            scope: queued_scope,
-            list: QueuedJobsList,
-            id: 'queued-jobs',
-            url: GetBasePath('unified_jobs') + '?or__status=pending&or__status=waiting&or__status=new',
-            pageSize: max_rows
         });
         scheduled_scope = $scope.$new(true);
         LoadSchedulesScope({
             parent_scope: $scope,
             scope: scheduled_scope,
             list: ScheduledJobsList,
-            id: 'scheduled-jobs',
+            id: 'scheduled-jobs-tab',
             url: GetBasePath('schedules') + '?next_run__isnull=false',
             pageSize: max_rows
         });
 
         $scope.refreshJobs = function() {
-            queued_scope.search('queued_job');
+            jobs_scope.search('queued_job');
-            running_scope.search('running_job');
+            jobs_scope.search('running_job');
-            completed_scope.search('completed_job');
+            jobs_scope.search('completed_job');
             scheduled_scope.search('schedule');
         };
 
@@ -201,55 +156,40 @@ export function JobsListController ($rootScope, $log, $scope, $compile, $routePa
             available_height,
             search_row, page_row, height, header, row_height;
         $log.debug('docw: ' + docw);
-        if (docw > 1200) {
+
-            // customize the container height and # of rows based on available viewport height
+        // customize the container height and # of rows based on available viewport height
-            available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - 80;
+        available_height = $(window).height() - $('#main-menu-container .navbar').outerHeight() - 80;
-            if (docw < 1350) {
+        if (docw < 1350) {
-                available_height = (available_height < 800) ? 800 : available_height;
+            available_height = (available_height < 800) ? 800 : available_height;
-            } else {
+        } else {
-                available_height = (available_height < 550) ? 550 : available_height;
+            available_height = (available_height < 550) ? 550 : available_height;
-            }
-            $log.debug('available_height: ' + available_height);
-            $('.jobs-list-container').each(function() {
-                $(this).height(Math.floor(available_height / 2));
-            });
-            search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50);
-            page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
-            header = Math.max($('#completed_jobs_table thead').height(), 24);
-            height = Math.floor(available_height / 2) - header - page_row - search_row - 30;
-            // row_height = (docw < 1350) ? 47 : 44;
-            if(docw < 1424){
-                row_height = 55;
-            }
-            else {
-                row_height = 44;
-            }
-            max_rows = Math.floor(height / row_height);
-            max_rows = (max_rows < 5) ? 5 : max_rows;
-        }
-        else {
-            // when width < 1240px || height < 800px put things back to their default state
-            $('.jobs-list-container').each(function() {
-                $(this).css({ 'height': 'auto' });
-            });
-            max_rows = 5;
         }
+        $log.debug('available_height: ' + available_height);
+        $('.jobs-list-container').each(function() {
+            $(this).height(Math.floor(available_height));
+        });
+        search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50);
+        page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
+        header = Math.max($('#active_jobs_table thead').height(), 24);
+        height = Math.floor(available_height ) - header - page_row - search_row - 30;
+        row_height = 44;
+
+        max_rows = Math.floor(height / row_height);
+        max_rows = (max_rows < 5) ? 5 : max_rows;
+
         $log.debug('max_rows: ' + max_rows);
     }
 
     // Set container height and return the number of allowed rows
     function resizeContainers() {
         setHeight();
-        completed_scope[CompletedJobsList.iterator + '_page_size'] = max_rows;
+        jobs_scope[AllJobsList.iterator + '_page_size'] = max_rows;
-        completed_scope.changePageSize(CompletedJobsList.name, CompletedJobsList.iterator);
+        jobs_scope.changePageSize(AllJobsList.name, AllJobsList.iterator);
-        running_scope[RunningJobsList.iterator + '_page_size'] = max_rows;
-        running_scope.changePageSize(RunningJobsList.name, RunningJobsList.iterator);
-        queued_scope[QueuedJobsList.iterator + '_page_size'] = max_rows;
-        queued_scope.changePageSize(QueuedJobsList.name, QueuedJobsList.iterator);
         scheduled_scope[ScheduledJobsList.iterator + '_page_size'] = max_rows;
         scheduled_scope.changePageSize(ScheduledJobsList.name, ScheduledJobsList.iterator);
     }
 }
 
-JobsListController.$inject = ['$rootScope', '$log', '$scope', '$compile', '$routeParams', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'LoadSchedulesScope', 'LoadJobsScope', 'RunningJobsList', 'CompletedJobsList',
+JobsListController.$inject = ['$rootScope', '$log', '$scope', '$compile', '$routeParams',
-    'QueuedJobsList', 'ScheduledJobsList', 'GetChoices', 'GetBasePath', 'Wait', 'Socket'];
+'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'LoadSchedulesScope', 'LoadJobsScope',
+'AllJobsList', 'ScheduledJobsList', 'GetChoices', 'GetBasePath', 'Wait', 'Socket'];

awx/ui/static/js/filters.js

@@ -1,5 +1,7 @@
-import sanitizeFilters from 'tower/filters/sanitize/xss-sanitizer.filter';
+import sanitizeFilter from 'tower/filters/sanitize/xss-sanitizer.filter';
+import capitalizeFilter from 'tower/filters/capitalize.filter';
 
 export {
-  sanitizeFilters
+  sanitizeFilter,
+  capitalizeFilter
 };

awx/ui/static/js/filters/capitalize.filter.js

@@ -0,0 +1,6 @@
+angular.module('capitalizeFilter', []).filter('capitalize', function() {
+  return function(input) {
+    input = input.charAt(0).toUpperCase() + input.substr(1).toLowerCase();
+    return input;
+  };
+});

awx/ui/static/js/helpers/Jobs.js

@@ -28,8 +28,8 @@ export default
         function($location, Find, DeleteJob, RelaunchJob, LogViewer, $window) {
             return function(params) {
                 var scope = params.scope,
-                    iterator = (params.iterator) ? params.iterator : scope.iterator,
+                    iterator = (params.iterator) ? params.iterator : scope.iterator;
-                    base = $location.path().replace(/^\//, '').split('/')[0];
+                    //base = $location.path().replace(/^\//, '').split('/')[0];
 
                 scope.deleteJob = function(id) {
                     DeleteJob({ scope: scope, id: id });
@@ -55,6 +55,9 @@ export default
                     else if (scope.jobs) {
                         list = scope.jobs;
                     }
+                    else if(scope.all_jobs){
+                        list = scope.all_jobs;
+                    }
                     job = Find({ list: list, key: 'id', val: id });
                     if (job.type === 'inventory_update') {
                         typeId = job.inventory_source;
@@ -69,9 +72,9 @@ export default
                 };
 
                 scope.refreshJobs = function() {
-                    if (base !== 'jobs') {
+                    // if (base !== 'jobs') {
                         scope.search(iterator);
-                    }
+                    // }
 
                 };
 
@@ -89,6 +92,9 @@ export default
                     else if (scope.jobs) {
                         list = scope.jobs;
                     }
+                    else if(scope.all_jobs){
+                        list = scope.all_jobs;
+                    }
                     else if(scope.portal_jobs){
                         list=scope.portal_jobs;
                     }
@@ -456,6 +462,9 @@ export default
                 else if (scope.queued_jobs) {
                     jobs = scope.queued_jobs;
                 }
+                else if (scope.all_jobs) {
+                    jobs = scope.all_jobs;
+                }
                 else if (scope.jobs) {
                     jobs = scope.jobs;
                 }

awx/ui/static/js/helpers/Schedules.js

@@ -562,8 +562,8 @@ export default
          *
          */
         .factory('LoadSchedulesScope', ['$compile', '$location', '$routeParams','SearchInit', 'PaginateInit', 'generateList', 'SchedulesControllerInit',
-            'SchedulesListInit', 'SearchWidget',
+            'SchedulesListInit',
-            function($compile, $location, $routeParams, SearchInit, PaginateInit, GenerateList, SchedulesControllerInit, SchedulesListInit, SearchWidget) {
+            function($compile, $location, $routeParams, SearchInit, PaginateInit, GenerateList, SchedulesControllerInit, SchedulesListInit) {
             return function(params) {
                 var parent_scope = params.parent_scope,
                     scope = params.scope,
@@ -571,37 +571,17 @@ export default
                     id = params.id,
                     url = params.url,
                     pageSize = params.pageSize || 5,
-                    spinner = (params.spinner === undefined) ? true : params.spinner,
+                    spinner = (params.spinner === undefined) ? true : params.spinner;
-                    base = $location.path().replace(/^\//, '').split('/')[0],
-                    e, html;
 
-                if (base === 'jobs') {
+
-                    // on jobs page the search widget appears on the right
+                GenerateList.inject(list, {
-                    html = SearchWidget({
+                    mode: 'edit',
-                        iterator: list.iterator,
+                    id: id,
-                        template: params.list,
+                    breadCrumbs: false,
-                        includeSize: false
+                    scope: scope,
-                    });
+                    searchSize: 'col-lg-6 col-md-6 col-sm-6 col-xs-12',
-                    e = angular.element(document.getElementById(id + '-search-container')).append(html);
+                    showSearch: true
-                    $compile(e)(scope);
+                });
-                    GenerateList.inject(list, {
-                        mode: 'edit',
-                        id: id,
-                        breadCrumbs: false,
-                        scope: scope,
-                        showSearch: false
-                    });
-                }
-                else {
-                    GenerateList.inject(list, {
-                        mode: 'edit',
-                        id: id,
-                        breadCrumbs: false,
-                        scope: scope,
-                        searchSize: 'col-lg-6 col-md-6 col-sm-6 col-xs-12',
-                        showSearch: true
-                    });
-                }
 
                 SearchInit({
                     scope: scope,

awx/ui/static/js/lists.js

@@ -1,6 +1,7 @@
 import Admins from "tower/lists/Admins";
 import CloudCredentials from "tower/lists/CloudCredentials";
 import CompletedJobs from "tower/lists/CompletedJobs";
+import AllJobs from "tower/lists/AllJobs";
 import ConfigureTowerJobs from "tower/lists/ConfigureTowerJobs";
 import Credentials from "tower/lists/Credentials";
 import CustomInventory from "tower/lists/CustomInventory";
@@ -20,8 +21,6 @@ import Permissions from "tower/lists/Permissions";
 import PortalJobTemplates from "tower/lists/PortalJobTemplates";
 import PortalJobs from "tower/lists/PortalJobs";
 import Projects from "tower/lists/Projects";
-import QueuedJobs from "tower/lists/QueuedJobs";
-import RunningJobs from "tower/lists/RunningJobs";
 import ScanJobsList from "tower/lists/ScanJobs";
 import ScheduledJobs from "tower/lists/ScheduledJobs";
 import Schedules from "tower/lists/Schedules";
@@ -33,6 +32,7 @@ export
     {   Admins,
         CloudCredentials,
         CompletedJobs,
+        AllJobs,
         ConfigureTowerJobs,
         Credentials,
         CustomInventory,
@@ -52,8 +52,6 @@ export
         PortalJobTemplates,
         PortalJobs,
         Projects,
-        QueuedJobs,
-        RunningJobs,
         ScanJobsList,
         ScheduledJobs,
         Schedules,

awx/ui/static/js/lists/AllJobs.js

@@ -0,0 +1,121 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ *  AllJobs.js
+ *
+ *
+ */
+
+
+
+export default
+    angular.module('AllJobsDefinition', ['sanitizeFilter', 'capitalizeFilter'])
+    .value( 'AllJobsList', {
+
+        name: 'all_jobs',
+        iterator: 'all_job',
+        editTitle: 'All Jobs',
+        index: false,
+        hover: true,
+        well: false,
+
+        fields: {
+            id: {
+                label: 'ID',
+                ngClick:"viewJobLog(all_job.id)",
+                searchType: 'int',
+                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2',
+                awToolTip: "{{ all_job.status_tip }}",
+                dataPlacement: 'top'
+            },
+            status: {
+                label: 'Status',
+                columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-2',
+                awToolTip: "{{ all_job.status_tip }}",
+                awTipPlacement: "top",
+                dataTitle: "{{ all_job.status_popover_title }}",
+                icon: 'icon-job-{{ all_job.status }}',
+                alt_text: "{{all_job.status | capitalize}}",
+                iconOnly: true,
+                ngClick:"viewJobLog(all_job.id)",
+                searchable: true,
+                searchType: 'select',
+                nosort: true,
+                searchOptions: [
+                    { name: "Success", value: "successful" },
+                    { name: "Error", value: "error" },
+                    { name: "Failed", value: "failed" },
+                    { name: "Canceled", value: "canceled" }
+                ]
+            },
+            finished: {
+                label: 'Finished',
+                noLink: true,
+                searchable: false,
+                filter: "date:'MM/dd HH:mm:ss'",
+                columnClass: "col-lg-2 col-md-2 hidden-xs",
+                key: true,
+                desc: true
+            },
+            type: {
+                label: 'Type',
+                ngBind: 'all_job.type_label',
+                link: false,
+                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
+                columnShow: "showJobType",
+                searchable: true,
+                searchType: 'select',
+                searchOptions: []    // populated via GetChoices() in controller
+            },
+            name: {
+                label: 'Name',
+                columnClass: 'col-md-3 col-sm-4 col-xs-4',
+                ngClick: "viewJobLog(all_job.id, all_job.nameHref)",
+                defaultSearchField: true,
+                awToolTip: "{{ all_job.name | sanitize }}",
+                dataPlacement: 'top'
+            },
+            failed: {
+                label: 'Job failed?',
+                searchSingleValue: true,
+                searchType: 'boolean',
+                searchValue: 'true',
+                searchOnly: true,
+                nosort: true
+            }
+        },
+
+        actions: { },
+
+        fieldActions: {
+            submit: {
+                icon: 'icon-rocket',
+                mode: 'all',
+                ngClick: 'relaunchJob($event, all_job.id)',
+                awToolTip: 'Relaunch using the same parameters',
+                dataPlacement: 'top',
+                ngHide: "all_job.type == 'system_job' "
+            },
+            cancel: {
+                mode: 'all',
+                ngClick: 'deleteJob(all_job.id)',
+                awToolTip: 'Cancel the job',
+                dataPlacement: 'top',
+                ngShow: "all_job.status === 'running'|| all_job.status == 'waiting' || all_job.status == 'pending'"
+            },
+            "delete": {
+                mode: 'all',
+                ngClick: 'deleteJob(all_job.id)',
+                awToolTip: 'Delete the job',
+                dataPlacement: 'top',
+                ngShow: "all_job.status !== 'running' && all_job.status !== 'waiting' && all_job.status !== 'pending'"
+            },
+            stdout: {
+                mode: 'all',
+                href: '/#/jobs/{{ all_job.id }}/stdout',
+                awToolTip: 'View standard output',
+                dataPlacement: 'top',
+                ngShow: "all_job.type == 'job'"
+            }
+        }
+    });

awx/ui/static/js/lists/Jobs.js

@@ -102,12 +102,6 @@ export default
                 dataPlacement: 'top',
                 ngShow: "job.status != 'running'"
             },
-            // job_details: {
-            //     mode: 'all',
-            //     ngClick: "viewJobLog(job.id)",
-            //     awToolTip: 'View job details',
-            //     dataPlacement: 'top'
-            // },
             stdout: {
                 mode: 'all',
                 href: '/#/jobs/{{ job.id }}/stdout',

awx/ui/static/js/lists/QueuedJobs.js

@@ -1,96 +0,0 @@
-/*********************************************
- *  Copyright (c) 2014 AnsibleWorks, Inc.
- *
- *  QueuedJobs.js
- *
- *
- */
-
-
-
-export default
-    angular.module('QueuedJobsDefinition', ['sanitizeFilter'])
-    .value( 'QueuedJobsList', {
-
-        name: 'queued_jobs',
-        iterator: 'queued_job',
-        editTitle: 'Queued Jobs',
-        'class': 'table-condensed',
-        index: false,
-        hover: true,
-        well: false,
-
-        fields: {
-            id: {
-                label: 'ID',
-                ngClick:"viewJobLog(queued_job.id)",
-                key: true,
-                searchType: 'int',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2',
-                awToolTip: "{{ queued_job.status_tip }}",
-                awTipPlacement: "top",
-            },
-            status: {
-                label: 'Status',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
-                awToolTip: "{{ queued_job.status_tip }}",
-                awTipPlacement: "top",
-                dataTitle: "{{ queued_job.status_popover_title }}",
-                icon: 'icon-job-{{ queued_job.status }}',
-                iconOnly: true,
-                ngClick:"viewJobLog(queued_job.id)",
-                searchable: false,
-                nosort: true
-            },
-            created: {
-                label: 'Created',
-                noLink: true,
-                searchable: false,
-                filter: "date:'MM/dd HH:mm:ss'",
-                columnClass: 'col-lg-2 col-md-2 hidden-xs'
-            },
-            type: {
-                label: 'Type',
-                ngBind: 'queued_job.type_label',
-                link: false,
-                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
-                searchable: true,
-                searchType: 'select',
-                searchOptions: []    // populated via GetChoices() in controller
-            },
-            name: {
-                label: 'Name',
-                columnClass: 'col-md-3 col-sm-4 col-xs-4',
-                ngClick: "viewJobLog(queued_job.id, queued_job.nameHref)",
-                defaultSearchField: true,
-                awToolTip: "{{ queued_job.name | sanitize }}",
-                awTipPlacement: "top"
-            }
-        },
-
-        actions: { },
-
-        fieldActions: {
-            submit: {
-                icon: 'icon-rocket',
-                mode: 'all',
-                ngClick: 'relaunchJob($event, queued_job.id)',
-                awToolTip: 'Relaunch using the same parameters',
-                dataPlacement: 'top',
-                ngHide: "queued_job.type == 'system_job' "
-            },
-            'cancel': {
-                mode: 'all',
-                ngClick: 'deleteJob(queued_job.id)',
-                awToolTip: 'Cancel the job',
-                dataPlacement: 'top'
-            },
-            // job_details: {
-            //     mode: 'all',
-            //     ngClick: "viewJobLog(queued_job.id)",
-            //     awToolTip: 'View job details',
-            //     dataPlacement: 'top',
-            //     ngShow: "queued_job.type == 'job'"
-            // }
-        }
-    });

awx/ui/static/js/lists/RunningJobs.js

@@ -1,103 +0,0 @@
-/*********************************************
- *  Copyright (c) 2014 AnsibleWorks, Inc.
- *
- *  RunningJobs.js
- *
- *
- */
-
-
-
-export default
-    angular.module('RunningJobsDefinition', ['sanitizeFilter'])
-    .value( 'RunningJobsList', {
-
-        name: 'running_jobs',
-        iterator: 'running_job',
-        editTitle: 'Completed Jobs',
-        'class': 'table-condensed',
-        index: false,
-        hover: true,
-        well: false,
-
-        fields: {
-            id: {
-                label: 'ID',
-                ngClick:"viewJobLog(running_job.id)",
-                key: true,
-                desc: true,
-                searchType: 'int',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2',
-                awToolTip: "{{ running_job.status_tip }}",
-                awTipPlacement: "top",
-            },
-            status: {
-                label: 'Status',
-                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
-                awToolTip: "{{ running_job.status_tip }}",
-                awTipPlacement: "top",
-                dataTitle: "{{ running_job.status_popover_title }}",
-                icon: 'icon-job-{{ running_job.status }}',
-                iconOnly: true,
-                ngClick:"viewJobLog(running_job.id)",
-                searchable: false,
-                nosort: true
-            },
-            started: {
-                label: 'Started',
-                noLink: true,
-                searchable: false,
-                filter: "date:'MM/dd HH:mm:ss'",
-                columnClass: "col-lg-2 col-md-2 hidden-xs"
-            },
-            type: {
-                label: 'Type',
-                ngBind: 'running_job.type_label',
-                link: false,
-                columnClass: "col-lg-2 col-md-2 hidden-sm hidden-xs",
-                searchable: true,
-                searchType: 'select',
-                searchOptions: []    // populated via GetChoices() in controller
-            },
-            name: {
-                label: 'Name',
-                columnClass: 'col-md-3 col-sm-4 col-xs-4',
-                ngClick: "viewJobLog(running_job.id, running_job.nameHref)",
-                defaultSearchField: true,
-                awToolTip: "{{ running_job.name | sanitize }}",
-                awTipPlacement: "top"
-            }
-        },
-
-        actions: { },
-
-        fieldActions: {
-            submit: {
-                icon: 'icon-rocket',
-                mode: 'all',
-                ngClick: 'relaunchJob($event, running_job.id)',
-                awToolTip: 'Relaunch using the same parameters',
-                dataPlacement: 'top',
-                ngHide: "running_job.type == 'system_job' "
-            },
-            cancel: {
-                mode: 'all',
-                ngClick: 'deleteJob(running_job.id)',
-                awToolTip: 'Cancel the job',
-                dataPlacement: 'top'
-            },
-            // job_details: {
-            //     mode: 'all',
-            //     ngClick: "viewJobLog(running_job.id)",
-            //     awToolTip: 'View job details',
-            //     dataPlacement: 'top'
-            // },
-            stdout: {
-                mode: 'all',
-                href: '/#/jobs/{{ running_job.id }}/stdout',
-                awToolTip: 'View standard output',
-                dataPlacement: 'top',
-                ngShow: "running_job.type == 'job'"
-            }
-        }
-    });

awx/ui/static/js/shared/generator-helpers.js

@@ -481,6 +481,9 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             html += field.text;
         }
         html += "</a>";
+        if (field.alt_text) {
+            html += " " + field.alt_text;
+        }
         return html;
     };
 }])

awx/ui/static/js/widgets/DashboardJobs.js

@@ -76,7 +76,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
                 scope: jobs_scope,
                 list: JobsList,
                 id: 'active-jobs',
-                url: GetBasePath('unified_jobs') + '?status__in=running,completed,failed,successful,error,canceled',
+                url: GetBasePath('unified_jobs') + '?status__in=pending,running,completed,failed,successful,error,canceled',
                 pageSize: max_rows,
                 spinner: false
             });

awx/ui/static/partials/jobs.html

@@ -13,54 +13,31 @@
             </div>
         </div>
         
-        <div class="row">
+        <div >
-            <div class="col-lg-6 left-side">
+            <ul id="jobs_tabs" class="nav nav-tabs">
-                <div class="jobs-list-container completed">
+                <li class="active"><a id="active_jobs_link" ng-click="toggleTab($event, 'active_jobs_link', 'jobs_tabs')" href="#active-jobs-tab" data-toggle="tab">Jobs</a></li>
-                    <div class="row search-row">
+                <li><a id="scheduled_jobs_link" ng-click="toggleTab($event, 'scheduled_jobs_link', 'job_status_tabs')" href="#scheduled-jobs-tab" data-toggle= "tab">Schedule</a></li>
-                        <div class="col-md-6"><div class="title">Completed</div></div>
+            </ul>
-                        <div class="col-md-6" id="completed-jobs-search-container"></div>
+            <div  id="jobs-tab-content" class= "tab-content">
+                <div class="tab-pane active" id= "active-jobs-tab">
+                    <div class= "row search-row">
+                        <div class="col-lg-6 col-md-6 " id="active-jobs-search-container">
+                        </div>
                     </div>
-                    <div class="job-list" id="completed-jobs-container">
+                    <div class= "job-list" id="active-jobs-container">
-                        <div id="completed-jobs" class="job-list-target"></div>
+                        <div id="active-jobs" class= "job-list-target">
+                        </div>
+                    </div>
+                </div>
+                <div class= "tab-pane" id="scheduled-jobs-tab">
+                    <div class= "row search-row">
+                        <div class="col-lg-6 col-md-6 " id="scheduled-jobs-tab-search-container">
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="col-lg-6 right-side">
+        </div>
-                <div class="jobs-list-container">
+
-                    <div class="row search-row">
-                        <div class="col-md-6"><div class="title">Active</div></div>
-                        <div class="col-md-6" id="active-jobs-search-container"></div>
-                    </div>
-                    <div class="job-list" id="active-jobs-container">
-                        <div id="active-jobs" class="job-list-target"></div>
-                    </div>
-                </div>
-            </div>
-        </div><!-- row -->
-        <div class="row bottom-row">
-            <div class="col-lg-6 left-side">
-                <div class="jobs-list-container">
-                    <div class="row search-row">
-                        <div class="col-md-6"><div class="title">Queued</div></div>
-                        <div class="col-md-6" id="queued-jobs-search-container"></div>
-                    </div>
-                    <div class="job-list" id="queued-jobs-container">
-                        <div id="queued-jobs" class="job-list-target"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-lg-6 right-side">
-                <div class="jobs-list-container">
-                    <div class="row search-row">
-                        <div class="col-md-6"><div class="title">Scheduled</div></div>
-                        <div class="col-md-6" id="scheduled-jobs-search-container"></div>
-                    </div>
-                    <div class="job-list" id="scheduled-jobs-container">
-                        <div id="scheduled-jobs" class="job-list-target"></div>
-                    </div>
-                </div>
-            </div>
-        </div><!-- row -->
 
         <div id="schedule-dialog-target"></div>
         <div ng-include="'/static/partials/logviewer.html'"></div>