AC-175 Added date conversion utility. Date on Jobs and Job Events pages is now converted to local timezone and formatted in a more readable manner. Improved performance of auto expansion on Job Events page.

awx/ui/static/css/ansible-ui.css

@@ -51,11 +51,15 @@
     padding-right: 10px;
  }
 
+ .icon-plus {
+    font-size: 10px;
+ }
+
 /* End btn heights */
 
  
- .icon-plus {
+ .controls {
-    font-size: 10px;
+    min-height: 15px;
  }
 
  .container-fluid {
@@ -232,6 +236,10 @@
     font-size: 22px;
  }
 
+ .status-fields {
+    margin-top: 15px;
+ }
+
  .search-widget label {
     display:inline-block;
     vertical-align: middle;

awx/ui/static/js/config.js

@@ -16,4 +16,5 @@ var $AnsibleConfig =
    tooltip_delay: 2000,               // Default number of milliseconds to delay displaying/hiding tooltips    
 
    debug_mode: true                   // Enable console logging messages
+   
 }

awx/ui/static/js/controllers/JobEvents.js

@@ -12,7 +12,8 @@
 
 function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobEventList,
                         GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
-                        ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren, EventView)
+                        ClearScope, ProcessErrors, GetBasePath, LookUpInit, ToggleChildren, EventView,
+                        FormatDate)
 {
     ClearScope('htmlTemplate');
     var list = JobEventList;
@@ -23,6 +24,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
     var view = GenerateList;
     var base = $location.path().replace(/^\//,'').split('/')[0];
     var scope = view.inject(list, { mode: 'edit' });
+    
     $rootScope.flashMessage = null;
     scope.selected = [];
     scope.expand = true;    //on load, automatically expand all nodes
@@ -33,6 +35,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
     scope.RemovePostRefresh = scope.$on('PostRefresh', function() {
         // Initialize the parent levels
         var set = scope[list.name];
+        var cDate;
         for (var i=0; i < set.length; i++) {
             set[i].event_display = set[i].event_display.replace(/^\u00a0*/g,'');
             if (set[i].parent == null && set[i]['ngclick'] === undefined && set[i]['ngicon'] == undefined) {
@@ -43,16 +46,19 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
                set[i]['spaces'] = 0;
             }
             scope.jobevents[i].status = (scope.jobevents[i].failed) ? 'error' : 'success';
+            cDate = new Date(set[i].created);
+            set[i].created = FormatDate(cDate);
         }
 
         // Expand all parent nodes
         if (scope.removeSetExpanded) {
            scope.removeSetExpanded();
         }
-        scope.removeSetExpanded = scope.$on('setExpanded', function() {
+        scope.removeSetExpanded = scope.$on('setExpanded', function(event, latest_node) {
             // After ToggleChildren completes, look for the next parent that needs to be expanded
             var found = false; 
-            for (var i=0; i < set.length && found == false && scope.expand; i++) {
+            var start = (latest_node) ? latest_node : 0;
+            for (var i=start; i < set.length && found == false && scope.expand; i++) {
                 if (set[i]['related']['children'] && (set[i]['ngicon'] == undefined || set[i]['ngicon'] == 'icon-expand-alt')) {
                    found = true;
                    ToggleChildren({
@@ -127,7 +133,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
 
 JobEventsList.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobEventList',
                            'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
-                           'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'EventView'
+                           'ProcessErrors','GetBasePath', 'LookUpInit', 'ToggleChildren', 'EventView', 'FormatDate'
                            ];
 
 function JobEventsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobEventForm, GenerateForm,

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

@@ -12,7 +12,7 @@
 
 function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest, Alert, JobList,
                        GenerateList, LoadBreadCrumbs, Prompt, SearchInit, PaginateInit, ReturnToCaller,
-                       ClearScope, ProcessErrors, GetBasePath, LookUpInit, SubmitJob)
+                       ClearScope, ProcessErrors, GetBasePath, LookUpInit, SubmitJob, FormatDate)
 {
     ClearScope('htmlTemplate');
     var list = JobList;
@@ -32,6 +32,13 @@ function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest,
             var ngc = $(this).attr('ng-class');
             scope[ngc] = "";
             });
+
+        // Convert created date to local time zone 
+        var cDate;
+        for (var i=0; i < scope[list.name].length; i++) {
+            cDate = new Date(scope[list.name][i].created);
+            scope[list.name][i].created = FormatDate(cDate);
+        }
         });
     
     SearchInit({ scope: scope, set: 'jobs', list: list, url: defaultUrl });
@@ -135,14 +142,14 @@ function JobsListCtrl ($scope, $rootScope, $location, $log, $routeParams, Rest,
 
 JobsListCtrl.$inject = [ '$scope', '$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'JobList',
                          'GenerateList', 'LoadBreadCrumbs', 'Prompt', 'SearchInit', 'PaginateInit', 'ReturnToCaller', 'ClearScope',
-                         'ProcessErrors','GetBasePath', 'LookUpInit', 'SubmitJob'
+                         'ProcessErrors','GetBasePath', 'LookUpInit', 'SubmitJob', 'FormatDate'
                          ];
 
 
 function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams, JobForm, 
                   GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit,
                   RelatedPaginateInit, ReturnToCaller, ClearScope, InventoryList, CredentialList,
-                  ProjectList, LookUpInit, PromptPasswords, GetBasePath, md5Setup) 
+                  ProjectList, LookUpInit, PromptPasswords, GetBasePath, md5Setup, FormatDate) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -274,13 +281,21 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
            
            for (var fld in form.statusFields) {
                if (data[fld] !== null && data[fld] !== undefined) {
-                  scope[fld] = data[fld];
+                  if (fld == 'created') {
+                     // Convert created date to local time zone 
+                     var cDate = new Date(data.created);
+                     scope.created = FormatDate(cDate);
+                  }
+                  else {
+                     scope[fld] = data[fld];
+                  }
                }
            }
             
            $('input[type="text"], textarea').attr('readonly','readonly');
            $('select').prop('disabled', 'disabled');
            $('.lookup-btn').prop('disabled', 'disabled');
+           $('.controls.buttons, hr').hide();
 
            scope.url = data.url; 
            var related = data.related;
@@ -423,5 +438,5 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
 JobsEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobForm', 
                      'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                      'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'InventoryList', 'CredentialList',
-                     'ProjectList', 'LookUpInit', 'PromptPasswords', 'GetBasePath', 'md5Setup'
+                     'ProjectList', 'LookUpInit', 'PromptPasswords', 'GetBasePath', 'md5Setup', 'FormatDate'
                      ];

awx/ui/static/js/forms/Jobs.js

@@ -182,6 +182,11 @@ angular.module('JobFormDefinition', [])
                 readonly: true,
                 control: false
                 },
+            created: {
+                label: 'Date',
+                type: 'text',
+                readonly: true
+                },
             result_stdout: {
                 label: 'Standard Out', 
                 type: 'textarea',

awx/ui/static/js/helpers/Children.js

@@ -8,9 +8,10 @@
  */
                        
 angular.module('ChildrenHelper', ['RestServices', 'Utilities'])  
-    .factory('ToggleChildren', ['Alert', 'Rest', 'GetBasePath','ProcessErrors', 
+    .factory('ToggleChildren', ['Alert', 'Rest', 'GetBasePath','ProcessErrors','FormatDate',
-    function(Alert, Rest, GetBasePath, ProcessErrors) {
+    function(Alert, Rest, GetBasePath, ProcessErrors, FormatDate) {
     return function(params) {
+        
         var scope = params.scope;
         var list = params.list;
         var id = params.id; 
@@ -48,6 +49,8 @@ angular.module('ChildrenHelper', ['RestServices', 'Utilities'])
                        data.results[j].spaces = spaces;
                        data.results[j].status = (data.results[j].failed) ? 'error' : 'success';
                        data.results[j].event_display = data.results[j].event_display.replace(/^\u00a0*/g,'');
+                       cDate = new Date(data.results[j].created);
+                       data.results[j].created = FormatDate(cDate);
                        if (data.results[j].related.children) {
                           data.results[j]['ngclick'] = "toggleChildren(" + data.results[j].id + ", \"" + data.results[j].related.children + "\")";
                           data.results[j]['ngicon'] = 'icon-expand-alt';
@@ -60,7 +63,7 @@ angular.module('ChildrenHelper', ['RestServices', 'Utilities'])
                        }
                        clicked++;
                    } 
-                   scope.$emit('setExpanded');          
+                   scope.$emit('setExpanded', clicked - 1);          
                    })
                .error( function(data, status, headers, config) {
                    ProcessErrors(scope, data, status, null,

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

@@ -35,7 +35,8 @@ angular.module('JobsListDefinition', [])
                 },
             created: {
                 label: 'Date',
-                link: true
+                link: true,
+                searchable: false
                 },
             status: {
                 label: 'Status',

awx/ui/static/lib/ansible/form-generator.js

@@ -588,10 +588,12 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
               html += "</div>\n";
               html += "<div class=\"status-spin\"><i class=\"icon-spinner icon-spin\" ng-show=\"statusSearchSpin == true\"></i></div>\n";
           }
+          html += "<div class=\"status-fields\">\n";
           for (var fld in this.form.statusFields) {
               field = this.form.statusFields[fld];
               html += this.buildField(fld, field, options);
           }
+          html += "</div><!-- status fields -->\n";
           html += "</div><!-- well -->\n";
        }
 

awx/ui/static/lib/ansible/utilities.js

@@ -149,4 +149,18 @@ angular.module('Utilities',[])
       }
       $location.path(newpath);
       }
+   }])
+
+   .factory('FormatDate', [ function() {
+      return function(dt) {
+      var result = dt.getFullYear() + '-'; 
+      result += ('0' + (dt.getMonth() + 1)).slice(-2) + '-';
+      result += ('0' + dt.getDate()).slice(-2) + ' ';
+      result += ('0' + dt.getHours()).slice(-2) + ':';
+      result += ('0' + dt.getMinutes()).slice(-2) + ':';
+      result += ('0' + dt.getSeconds()).slice(-2) + ':';
+      result += ('000' + dt.getMilliseconds()).slice(-3);
+      return result;
+      }
    }]);
+