Dashboard

Built the job status dashboard widget.

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

@@ -20,7 +20,7 @@ function JobsListController ($scope, $compile, $routeParams, ClearScope, Breadcr
         listCount = 0,
         api_complete = false,
         event_socket,
-        event_queue = [{"status":"pending","endpoint":"/socket.io/jobs","unified_job_id":4129,"event":"status_changed"}],
+        event_queue = [],
         expecting = 0,
         max_rows;
 

awx/ui/static/js/helpers/JobSubmission.js

@@ -372,7 +372,6 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
         return function (params) {
             var scope = params.scope,
                 id = params.id,
-                base = $location.path().replace(/^\//, '').split('/')[0],
                 url,
                 job_template,
                 new_job_id,
@@ -381,13 +380,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
                 prompt_for_vars = false,
                 passwords;
 
-            if (!Empty($routeParams.template_id)) {
+            url = GetBasePath('jobs') + id + '/';
-                // launching a job from job_template detail page
-                url = GetBasePath('jobs') + id + '/';
-            }
-            else {
-                url = GetBasePath(base) + id + '/';
-            }
 
             if (scope.removePostTheJob) {
                 scope.removePostTheJob();

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

@@ -46,7 +46,12 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
                 else if (scope.queued_jobs) {
                     list = scope.queued_jobs;
                 }
+                else if (scope.jobs) {
+                    list = scope.jobs;
+                }
                 job = Find({ list: list, key: 'id', val: id });
+                console.log('found job:');
+                console.log(job);
                 if (job.type === 'inventory_update') {
                     typeId = job.inventory_source;
                 }
@@ -81,6 +86,9 @@ angular.module('JobsHelper', ['Utilities', 'RestServices', 'FormGenerator', 'Job
                     else if (scope.queued_jobs) {
                         list = scope.queued_jobs;
                     }
+                    else if (scope.jobs) {
+                        list = scope.jobs;
+                    }
                     job = Find({ list: list, key: 'id', val: id });
                     if (job.type === 'job') {
                         $location.url('/jobs/' + job.id);
@@ -432,6 +440,9 @@ function(Find, GetBasePath, Rest, Wait, ProcessErrors, Prompt, Alert){
         else if (scope.queued_jobs) {
             jobs = scope.queued_jobs;
         }
+        else if (scope.jobs) {
+            jobs = scope.jobs;
+        }
         job = Find({list: jobs, key: 'id', val: id });
 
         if (job.status === 'pending' || job.status === 'running' || job.status === 'waiting') {

awx/ui/static/js/lists/CompletedJobs.js

@@ -105,20 +105,8 @@ angular.module('CompletedJobsDefinition', [])
             stdout: {
                 mode: 'all',
                 href: '/#/jobs/{{ completed_job.id }}/stdout',
-                awToolTip: 'View standard output. Opens in a new window or tab.',
+                awToolTip: 'View standard output',
                 dataPlacement: 'top'
             }
-            /*dropdown: {
-                type: 'DropDown',
-                ngShow: "completed_job.type === 'job'",
-                label: 'View',
-                icon: 'fa-search-plus',
-                'class': 'btn-default btn-xs',
-                options: [
-                    //{ ngHref: '/#/jobs/{{ completed_job.id }}', label: 'Status' },
-                    { ngHref: '/#/job_events/{{ completed_job.id }}', label: 'Events', ngHide: "completed_job.status == 'new'" },
-                    { ngHref: '/#/job_host_summaries/{{ completed_job.id }}', label: 'Host Summary' }
-                ]
-            }*/
         }
     });

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

@@ -2,8 +2,10 @@
  *  Copyright (c) 2014 AnsibleWorks, Inc.
  *
  *  Jobs.js
- *  List view object for Team data model.
+ *  List view object for job data model.
  *
+ *  Used on dashboard to provide a list of all jobs, regardless of
+ *  status.
  *
  */
 
@@ -15,112 +17,92 @@ angular.module('JobsListDefinition', [])
         name: 'jobs',
         iterator: 'job',
         editTitle: 'Jobs',
-        showTitle: false,
+        'class': 'table-condensed',
         index: false,
         hover: true,
         well: false,
-        "class": 'jobs-table',
 
         fields: {
             id: {
                 label: 'ID',
+                ngClick:"viewJobLog(job.id)",
                 key: true,
                 desc: true,
-                searchType: 'int'
-            },
-            inventory: {
-                label: 'Inventory ID',
                 searchType: 'int',
-                searchOnly: true
+                columnClass: 'col-md-1 col-sm-2 col-xs-2',
-            },
+                awToolTip: "{{ job.status_tip }}",
-            created: {
+                awTipPlacement: "top",
-                label: 'Create On',
-                link: false,
-                searchable: false,
-                filter: "date:'MM/dd HH:mm:ss'"
-            },
-            name: {
-                label: 'Name',
-                link: false
-            },
-            failed: {
-                label: 'Job failed?',
-                searchSingleValue: true,
-                searchType: 'boolean',
-                searchValue: 'true',
-                searchOnly: true,
-                nosort: true
             },
             status: {
                 label: 'Status',
-                "class": 'job-{{ job.status }}',
+                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
+                awToolTip: "{{ job.status_tip }}",
+                awTipPlacement: "top",
+                dataTitle: "{{ job.status_popover_title }}",
+                icon: 'icon-job-{{ job.status }}',
+                iconOnly: true,
+                ngClick:"viewJobLog(job.id)",
+                searchable: false
+            },
+            started: {
+                label: 'Started On',
+                noLink: true,
+                searchable: false,
+                filter: "date:'MM/dd HH:mm:ss'",
+                columnClass: "col-lg-1 col-md-2 hidden-xs"
+            },
+            type: {
+                label: 'Type',
+                ngBind: 'job.type_label',
+                link: false,
+                columnClass: "col-lg-1 col-md-2 hidden-sm hidden-xs",
+                searchable: true,
                 searchType: 'select',
-                linkTo: "{{ job.statusLinkTo }}",
+                searchOptions: []    // populated via GetChoices() in controller
-                searchOptions: [
+            },
-                    { name: "new", value: "new" },
+            name: {
-                    { name: "waiting", value: "waiting" },
+                label: 'Name',
-                    { name: "pending", value: "pending" },
+                columnClass: 'col-md-3 col-xs-5',
-                    { name: "running", value: "running" },
+                ngClick: "viewJobLog(job.id, job.nameHref)",
-                    { name: "successful", value: "successful" },
+                defaultSearchField: true
-                    { name: "error", value: "error" },
-                    { name: "failed", value: "failed" },
-                    { name: "canceled", value: "canceled" }
-                ],
-                badgeIcon: 'fa icon-job-{{ job.status }}',
-                badgePlacement: 'left',
-                badgeToolTip: "{{ job.statusBadgeToolTip }}",
-                badgeTipPlacement: 'top',
-                badgeNgHref: "{{ job.statusLinkTo }}",
-                awToolTip: "{{ job.statusBadgeToolTip }}",
-                dataPlacement: 'top'
             }
         },
 
-        actions: {
+        actions: { },
-            refresh: {
-                mode: 'all',
-                awToolTip: "Refresh the page",
-                ngClick: "refresh()"
-            }
-        },
 
         fieldActions: {
             submit: {
-                label: 'Relaunch',
-                icon: 'icon-rocket',
                 mode: 'all',
-                ngClick: 'submitJob(job.id, job.summary_fields.job_template.name)',
+                icon: 'icon-rocket',
-                awToolTip: 'Start the job',
+                ngClick: 'relaunchJob($event, job.id)',
+                awToolTip: 'Relaunch using the same parameters',
                 dataPlacement: 'top'
             },
             cancel: {
-                label: 'Stop',
                 mode: 'all',
                 ngClick: 'deleteJob(job.id)',
-                awToolTip: 'Cancel a running or pending job',
+                awToolTip: 'Cancel the job',
-                ngShow: "job.status == 'pending' || job.status == 'running' || job.status == 'waiting'",
+                dataPlacement: 'top',
-                dataPlacement: 'top'
+                ngShow: "job.status == 'running'"
             },
             "delete": {
-                label: 'Delete',
                 mode: 'all',
                 ngClick: 'deleteJob(job.id)',
                 awToolTip: 'Delete the job',
-                ngShow: "job.status != 'pending' && job.status != 'running' && job.status != 'waiting'",
+                dataPlacement: 'top',
+                ngShow: "job.status != 'running'"
+            },
+            job_details: {
+                mode: 'all',
+                href: '/#/jobs/{{ job.id }}',
+                awToolTip: 'View job details',
                 dataPlacement: 'top'
             },
-            dropdown: {
+            stdout: {
-                type: 'DropDown',
+                mode: 'all',
-                label: 'View',
+                href: '/#/jobs/{{ job.id }}/stdout',
-                icon: 'fa-search-plus',
+                awToolTip: 'View standard output',
-                'class': 'btn-default btn-xs',
+                dataPlacement: 'top'
-                options: [
-                    { ngClick: 'editJob(job.id, job.summary_fields.job_template.name)', label: 'Status' },
-                    { ngClick: 'viewEvents(job.id, job.summary_fields.job_template.name)', label: 'Events',
-                        ngHide: "job.status == 'new'" },
-                    { ngClick: 'viewSummary(job.id, job.summary_fields.job_template.name)', label: 'Host Summary',
-                        ngHide: "job.status == 'new'" }
-                ]
             }
         }
     });

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

@@ -90,7 +90,7 @@ angular.module('RunningJobsDefinition', [])
             stdout: {
                 mode: 'all',
                 href: '/#/jobs/{{ running_job.id }}/stdout',
-                awToolTip: 'View standard output. Opens in a new window or tab.',
+                awToolTip: 'View standard output',
                 dataPlacement: 'top'
             }
             /*dropdown: {

awx/ui/static/js/lists/ScheduledJobs.js

@@ -22,7 +22,7 @@ angular.module('ScheduledJobsDefinition', [])
         fields: {
             status: {
                 label: 'Status',
-                columnClass: 'col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-2',
                 awToolTip: "{{ schedule.status_tip }}",
                 awTipPlacement: "top",
                 icon: 'icon-job-{{ schedule.status }}',
@@ -35,14 +35,14 @@ angular.module('ScheduledJobsDefinition', [])
                 label: 'Next Run',
                 noLink: true,
                 searchable: false,
-                columnClass: "col-md-2 hidden-xs",
+                columnClass: "col-lg-1 col-md-2 hidden-xs",
                 filter: "date:'MM/dd HH:mm:ss'",
                 key: true
             },
             type: {
                 label: 'Type',
                 noLink: true,
-                columnClass: "col-md-2 hidden-sm hidden-xs",
+                columnClass: "col-lg-1 col-md-2 hidden-sm hidden-xs",
                 sourceModel: 'unified_job_template',
                 sourceField: 'unified_job_type',
                 ngBind: 'schedule.type_label',

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

@@ -10,13 +10,19 @@
 'use strict';
 
 angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
-.factory('DashboardJobs', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', function ($rootScope, $compile) {
+.factory('DashboardJobs', ['$rootScope', '$compile', 'LoadSchedulesScope', 'LoadJobsScope', 'JobsList', 'ScheduledJobsList', 'GetChoices', 'GetBasePath',
+    function ($rootScope, $compile, LoadSchedulesScope, LoadJobsScope, JobsList, ScheduledJobsList, GetChoices, GetBasePath) {
     return function (params) {
-
         var scope = params.scope,
             target = params.target,
+            choicesCount = 0,
+            listCount = 0,
+            jobs_scope = scope.$new(true),
+            scheduled_scope = scope.$new(true),
+            max_rows = 15,
             html, e;
 
+        html = '';
         html += "<ul id=\"job_status_tabs\" class=\"nav nav-tabs\">\n";
         html += "<li class=\"active\"><a id=\"active_jobs_link\" ng-click=\"toggleTab($event, 'active_jobs_link', 'job_status_tabs')\"\n";
         html += " href=\"#active-jobs-tab\" data-toggle=\"tab\">Jobs</a></li>\n";
@@ -31,7 +37,68 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
         e = angular.element(document.getElementById(target));
         e.html(html);
         $compile(e)(scope);
-        scope.$emit('WidgetLoaded');
 
+        if (scope.removeListLoaded) {
+            scope.removeListLoaded();
+        }
+        scope.removeListLoaded = scope.$on('listLoaded', function() {
+            listCount++;
+            if (listCount === 1) {
+                //api_complete = true;
+                scope.$emit('WidgetLoaded');
+            }
+        });
+
+        // After all choices are ready, load up the lists and populate the page
+        if (scope.removeBuildJobsList) {
+            scope.removeBuildJobsList();
+        }
+        scope.removeBuildJobsList = scope.$on('buildJobsList', function() {
+            if (JobsList.fields.type) {
+                JobsList.fields.type.searchOptions = scope.type_choices;
+            }
+            LoadJobsScope({
+                parent_scope: scope,
+                scope: jobs_scope,
+                list: JobsList,
+                id: 'active-jobs-tab',
+                url: GetBasePath('unified_jobs') + '?status__in=running,completed,failed,successful,error,canceled',
+                pageSize: max_rows
+            });
+            LoadSchedulesScope({
+                parent_scope: scope,
+                scope: scheduled_scope,
+                list: ScheduledJobsList,
+                id: 'scheduled-jobs-tab',
+                url: GetBasePath('schedules') + '?next_run__isnull=false',
+                pageSize: max_rows
+            });
+        });
+
+        if (scope.removeChoicesReady) {
+            scope.removeChoicesReady();
+        }
+        scope.removeChoicesReady = scope.$on('choicesReady', function() {
+            choicesCount++;
+            if (choicesCount === 2) {
+                scope.$emit('buildJobsList');
+            }
+        });
+
+        GetChoices({
+            scope: scope,
+            url: GetBasePath('unified_jobs'),
+            field: 'status',
+            variable: 'status_choices',
+            callback: 'choicesReady'
+        });
+
+        GetChoices({
+            scope: scope,
+            url: GetBasePath('unified_jobs'),
+            field: 'type',
+            variable: 'type_choices',
+            callback: 'choicesReady'
+        });
     };
 }]);

awx/ui/static/partials/home.html

@@ -1,21 +1,22 @@
+
 <div class="tab-pane" id="home">
    <div ng-cloak id="htmlTemplate">
-   <div id="refresh-row" class="row">
+      <div id="refresh-row" class="row">
-      <div class="col-lg-12">
+         <div class="col-lg-12">
-        <div id="home-list-actions" class="list-actions pull-right"></div>
+            <div id="home-list-actions" class="list-actions pull-right"></div>
+         </div>
+      </div>
+
+      <div class="row">
+         <div id="container1" class="col-lg-12"></div>
+      </div>
+      <div class="row">
+         <div id="container2" class="col-lg-12"></div>
+      </div>
+      <div class="row">
+         <div id="container3" class="col-lg-12"></div>
       </div>
    </div>
-
-   <div class="row">
-      <div id="container1" class="col-lg-12"></div>
-   </div>
-   <div class="row">
-      <div id="container2" class="col-lg-12"></div>
-   </div>
-   <div class="row">
-      <div id="container3" class="col-lg-12"></div>
-   </div>
-
-
-   </div>
 </div>
+
+<div ng-include="'/static/partials/schedule_dialog.html'"></div>