AC-503 latest UI work on cloud inventory

awx/ui/static/css/bootstrap.css

@@ -11,7 +11,7 @@
 /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
 
 article,
-aside,
+aside,.table
 details,
 figcaption,
 figure,

awx/ui/static/js/controllers/Groups.js

@@ -163,7 +163,8 @@ function InventoryGroups ($scope, $rootScope, $compile, $location, $log, $routeP
          scope.groupDeleteHide = true;
          scope.createButtonShow = false;
          scope.group_id = null;
-         InventoryStatus();
+         scope.inventory_name = node.attr('name');
+         InventoryStatus({ scope: scope });
          $('#tree-form').show();
       }
 

awx/ui/static/js/controllers/Home.js

@@ -27,7 +27,6 @@ function Home ($routeParams, $scope, $rootScope, $location, Wait, ObjectCount, C
      
     $rootScope.$on('WidgetLoaded', function() {
         // Once all the widget report back 'loaded', turn off Wait widget
-        console.log('got here!');
         loadedCount++; 
         if ( loadedCount == waitCount ) {
            Wait('stop');

awx/ui/static/js/helpers/Groups.js

@@ -9,7 +9,7 @@
  
 angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'GroupListDefinition',
                                  'SearchHelper', 'PaginateHelper', 'ListGenerator', 'AuthService', 'GroupsHelper',
-                                 'InventoryHelper', 'SelectionHelper'
+                                 'InventoryHelper', 'SelectionHelper', 'JobSubmissionHelper'
                                  ])
 
     .factory('getSourceTypeOptions', [ function() {
@@ -233,9 +233,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         }])
 
     .factory('GroupsEdit', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'GroupForm', 'GenerateForm', 
-        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'getSourceTypeOptions',
+        'Prompt', 'ProcessErrors', 'GetBasePath', 'RefreshGroupName', 'ParseTypeChange', 'getSourceTypeOptions', 'InventoryUpdate',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, GroupForm, GenerateForm, Prompt, ProcessErrors,
-        GetBasePath, RefreshGroupName, ParseTypeChange, getSourceTypeOptions) {
+        GetBasePath, RefreshGroupName, ParseTypeChange, getSourceTypeOptions, InventoryUpdate) {
     return function(params) {
         
         var group_id = params.group_id;
@@ -348,7 +348,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                               scope[fld] = data[fld];
                               master[fld] = scope[fld];
                            }
-                       }           
+                       }
+                       scope['group_update_url'] = data.related['update'];           
                        })
                    .error( function(data, status, headers, config) {
                        scope.source = null;
@@ -564,6 +565,21 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
             scope[form.name + '_form'][associated].$setValidity('awpassmatch', true);
             scope[form.name + '_form'].$setDirty();
             }
+        
+        // Start the update process
+        scope.updateGroup = function() {
+            if (scope['source'] == null || scope['source'] == '') {
+               Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group, provide Source settings, ' + 
+                  'and then run an update.', 'alert-info');
+            }
+            else {
+               InventoryUpdate({
+                   scope: scope, 
+                   group_id: group_id,
+                   url: scope['group_update_url']
+                   });
+            }
+            }
 
         // Cancel
         scope.formReset = function() {

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

@@ -5,7 +5,7 @@
  * 
  */
 angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'CredentialFormDefinition', 'CredentialsListDefinition',
-    'LookUpHelper', 'ProjectFormDefinition', 'JobSubmissionHelper'])
+    'LookUpHelper', 'ProjectFormDefinition', 'JobSubmissionHelper', 'GroupFormDefinition'])
 
     .factory('PromptPasswords', ['CredentialForm', 'JobTemplateForm', 'ProjectsForm', '$compile', 'Rest', '$location', 'ProcessErrors', 'GetBasePath',
         'Alert',
@@ -350,7 +350,89 @@ angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'Credential
             })
             .error( function(data, status, headers, config) {
                 ProcessErrors(scope, data, status, null,
-                    { hdr: 'Error!', msg: 'Failed to get job template details. GET returned status: ' + status });
+                    { hdr: 'Error!', msg: 'Failed to get project update details: ' +  url + ' GET status: ' + status });
+            });
+            };
+    }])
+
+
+    // Sumbit Inventory Update request
+    .factory('InventoryUpdate',['PromptPasswords', '$compile', 'Rest', '$location', 'GetBasePath', 'ProcessErrors', 'Alert', 'GroupForm',
+    function(PromptPasswords, $compile, Rest, $location, GetBasePath, ProcessErrors, Alert, GroupForm) { 
+    return function(params) {
+        
+        var scope = params.scope; 
+        var inventory_id = params.inventory_id;
+        var url = params.url;
+        
+        if (scope.removeUpdateSubmitted) {
+           scope.removeUpdateSubmitted();
+        }
+        scope.removeUpdateSubmitted = scope.$on('UpdateSubmitted', function() {
+            // Refresh the project list after update request submitted
+            scope.refresh();
+            });
+        
+        if (scope.removeInventorySubmit) {
+           scope.removeInventorySubmit();
+        }
+        scope.removeInventorySubmit = scope.$on('InventorySubmit', function(e, passwords_needed_to_update, extra_html) {
+            // After the call to update, kick off the job.
+            PromptPasswords({
+                       scope: scope,
+                       passwords: passwords_needed_to_update,
+                       start_url: url, 
+                       form: GroupForm,
+                       extra_html: extra_html
+                       });
+            });
+        
+        // Check to see if we have permission to perform the update and if any passwords are needed
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                if (data.can_update) {
+                   var extra_html = '';
+                   /*
+                   for (var i=0; i < scope.projects.length; i++) {
+                       if (scope.projects[i].id == project_id) {
+                          extra_html += "<div class=\"form-group\">\n";
+                          extra_html += "<label class=\"control-label col-lg-3 normal-weight\" for=\"scm_url\">SCM URL</label>\n";
+                          extra_html += "<div class=\"col-lg-9\">\n"; 
+                          extra_html += "<input type=\"text\" readonly";
+                          extra_html += ' name=\"scm_url\" ';
+                          extra_html += "class=\"form-control\" ";
+                          extra_html += "value=\"" + scope.projects[i].scm_url + "\" ";
+                          extra_html += "/>";
+                          extra_html += "</div>\n";
+                          extra_html += "</div>\n";
+                          if (scope.projects[i].scm_username) {
+                             extra_html += "<div class=\"form-group\">\n";
+                             extra_html += "<label class=\"control-label col-lg-3 normal-weight\" for=\"scm_username\">SCM Username</label>\n";
+                             extra_html += "<div class=\"col-lg-9\">\n"; 
+                             extra_html += "<input type=\"text\" readonly";
+                             extra_html += ' name=\"scm_username\" ';
+                             extra_html += "class=\"form-control\" ";
+                             extra_html += "value=\"" + scope.projects[i].scm_username + "\" ";
+                             extra_html += "/>";
+                             extra_html += "</div>\n";
+                             extra_html += "</div>\n"; 
+                          }                        
+                          break;
+                       }
+                   }
+                   extra_html += "</p>";
+                   */
+                   scope.$emit('InventorySubmit', data.passwords_needed_to_update, extra_html);
+                } 
+                else {
+                   Alert('Permission Denied', 'You do not have access to run the update. Please contact your system administrator.', 
+                       'alert-danger');
+                }   
+            })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, null,
+                    { hdr: 'Error!', msg: 'Failed to get inventory_source details. ' + url + 'GET status: ' + status });
             });
             };
     }]);

awx/ui/static/js/helpers/inventory.js

@@ -669,42 +669,82 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
     }
     }])
 
-    .factory('InventoryStatus', [ 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary', 'GenerateList',
+    .factory('InventoryStatus', [ '$rootScope', 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary',
-    function(Rest, Aler, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList) {
+        'GenerateList', 'ClearScope',
+    function($rootScope, Rest, Aler, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope) {
     return function(params) {
         //Build a summary of a given inventory
-    
+        
+        ClearScope('tree-form');
+        
         $('#tree-form').hide().empty();
         var view = GenerateList;
         var scope = view.inject(InventorySummary, { mode: 'summary', id: 'tree-form', breadCrumbs: false });
-        scope['groups'] = [];
+        var total;
+        var cnt=0;
+        var groups = new Array();
+        
+        if (scope.RemoveGroupsLoaded) {
+           scope.RemoveGroupsLoaded();
+        }
+        scope.RemoveGroupsLoaded = scope.$on('GroupsLoaded', function() {
+            // Using this sort of indirect method of updating scope['groups'] works. Pushing data directly into
+            // scope['groups'] directly causes it to grow exponentially with duplicates each time user navigates away
+            // and comes back -despite emptying/resetting/initializing.
+            scope['groups'] = groups;
+            if (!scope.$$phase) {
+               scope.$apply();
+            }
+            });
         
         function checkSource(url) {
             Rest.setUrl(url);
             Rest.get()
                 .success( function(data, status, headers, config) {
-                    //console.log(data);
+
-                    var last_update = (data.last_updated == null) ? 'n/a' : FormatDate(new Date(data.last_updated));    
+                    var last_update = (data.last_updated == null) ? '' : FormatDate(new Date(data.last_updated));    
                     var source = 'Manual';
+                    var stat;
+                    
+                    switch (data.status) {
+                        case 'never updated':
+                            stat = 'never';
+                            break;
+                        case 'none':
+                            stat = 'na';
+                            break;
+                        default: 
+                            stat = data.status;
+                        }
+
                     switch(data.source) {
-                       case 'file':
+                        case 'file':
-                           source = 'File';
+                            source = 'File';
-                           break;
+                            break;
-                       case 'ec2':
+                        case 'ec2':
-                           source = 'Amazon EC2';
+                            source = 'Amazon EC2';
-                           break;
+                            break;
-                       case 'rackspace': 
+                        case 'rackspace': 
-                           source = 'Rackspace';
+                            source = 'Rackspace';
-                           break;   
+                            break;   
-                    }
+                        }
-                    scope['groups'].push({
+                    
+                    groups.push({
                         name: data.summary_fields.group.name, 
                         description: data.summary_fields.group.description, 
                         failures: data.summary_fields.group.hosts_with_active_failures, 
                         source: source,
                         last_update: last_update,
-                        status: data.status
+                        status: stat,
+                        has_active_failures: data.summary_fields.group.has_active_failures
                         });
+                    
+                    cnt++;
+                    
+                    if (cnt >= total) {
+                       scope.$emit('GroupsLoaded');
+                    }
+
                     })
                 .error( function(data, status, headers, config) {
                     ProcessErrors(scope, data, status, null,
@@ -716,11 +756,12 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
         Rest.setUrl(url);
         Rest.get()
             .success( function(data, status, headers, config) {
+                total = data.count;
                 for (var i=0; i < data.results.length; i++) {
                     if (data.results[i].related.inventory_source) {
                        checkSource(data.results[i].related.inventory_source);
                     }
-                } 
+                }
                 })
             .error( function(data, status, headers, config) {
                 ProcessErrors(scope, data, status, null,

awx/ui/static/js/lists/InventorySummary.js

@@ -12,26 +12,40 @@ angular.module('InventorySummaryDefinition', [])
 
         name: 'groups',
         iterator: 'group',
-        editTitle: 'Inventory Summary',
+        editTitle: 'Inventory Summary: {{ inventory_name }}',
+        showTitle: true,
+        well: false,
         index: false,
         hover: true,
         
         fields: {
             name: {
                 key: true,
-                label: 'Name'
+                label: 'Group',
+                noLink: true,
+                badges: [
+                    { //Active Failures
+                      icon: "\{\{ 'icon-failures-' + group.has_active_failures \}\}",
+                      toolTip: 'Indicates if inventory contains hosts with active failures',
+                      toolTipPlacement: 'bottom'
+                      },
+                    { //Cloud Status
+                      icon: "\{\{ 'icon-cloud-' + group.status \}\}",
+                      toolTip: 'Indicates if inventory contains hosts with active failures',
+                      toolTipPlacement: 'bottom'
+                      }]
                 },
             failures: {
-                label: 'Hosts Failures'
+                label: 'Active<br />Failures'
                 },
             source: {
                 label: 'Source'
                 },
             last_update: {
-                label: 'Last Update'
+                label: 'Last<br />Updated'
                 },
             status: {
-                label: 'Update Status'
+                label: 'Update<br />Status'
                 }
             },
 

awx/ui/static/less/ansible-ui.less

@@ -10,6 +10,7 @@
 @black:      #171717;
 @warning:    #FF9900;
 @red:        #FF0000;
+@green:      #5bb75b;
 @blue:       #1778c3;   /* logo blue */
 @blue-link:  #0088cc;
 @grey:       #A9A9A9;
@@ -591,6 +592,19 @@ select.field-mini-height {
   background-color: #dff0d8;
 }
 
+.table-summary thead > tr > th,
+.table-summary tbody > tr > th,
+.table-summary tfoot > tr > th,
+.table-summary thead > tr > td,
+.table-summary tbody > tr > td,
+.table-summary tfoot > tr > td {
+  border-top: 1px solid #ccc;
+}
+
+.table-summary thead > tr > th {
+  border-bottom: 1px solid #ccc;
+}
+
 /* Jobs pages */
 
   .job-error,
@@ -646,6 +660,31 @@ select.field-mini-height {
     content: "\f111";
   }
 
+
+/* Cloud inventory status. i.e. inventory_source.status values */
+  
+  .icon-cloud-na:before,
+  .icon-cloud-never:before,
+  .icon-cloud-updating:before,
+  .icon-cloud-failed:before,
+  .icon-cloud-success:before {
+    content: "\f0c2";
+  }
+  .icon-cloud-na {
+    color: #e3e3e3;
+  }
+  .icon-cloud-never {
+    color: #888;
+  }
+  .icon-cloud-updating,
+  .icon-cloud-success {
+    color: #5bb75b;
+  }
+  .icon-cloud-failed {
+    color: @red;
+  }
+  
+
   .field-success {
     color: #5bb75b;
   }
@@ -813,7 +852,7 @@ select.field-mini-height {
       background-color: #ccc;
       height: 1px;
       margin-top: 5px;
-      margin-bottom: 30px;
+      margin-bottom: 15px;
     }
   }
 

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

@@ -1220,7 +1220,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "<button type=\"button\" id=\"create_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
               "aw-tool-tip=\"Create a brand new group and add it to the selected group\" data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-plus\"></i> Create New</button>\n";
           html += "<button type=\"button\" id=\"update_group_btn\" class=\"btn btn-success btn-sm\" ng-click=\"updateGroup()\" ng-hide=\"groupUpdateHide\" " +
-              "aw-tool-tip=\"Start the inventory update process, refreshing the group.\" " +
+              "aw-tool-tip=\"Start the inventory update process to refresh the group.\" " +
               "data-placement=\"bottom\" ng-disabled=\"grpBtnDisable\"><i class=\"icon-cloud-download\"></i> Update</button>\n";
           html += "<button type=\"button\" id=\"delete_group_btn\" class=\"btn btn-danger btn-sm\" ng-click=\"deleteGroup()\" ng-hide=\"groupDeleteHide\" " +
               "aw-tool-tip=\"Permanently delete the selected group. Any hosts in the group will still be available in All Hosts.\" " +

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

@@ -232,25 +232,43 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
     return function(field) {
         
         var html = '';
-
-        if (field.badgeToolTip) {
-           html += "<a href=\"\" aw-tool-tip=\"" + field.badgeToolTip + "\"";
-           html += (field.badgeTipPlacement) ? " data-placement=\"" + field.badgeTipPlacement + "\"" : "";
-           html += (field.badgeShow) ? " ng-show=\"" + field.badgeShow + "\"" : "";
-           html += ">";
-        } 
         
-        html += "<i ";
+        if (field.badges) {
-        html += (field.badgeShow) ? "ng-show=\"" + field.badgeShow + "\" " : "";
+           for (var i=0; i < field.badges.length; i++) {
-        html += " class=\"field-badge " + field.badgeIcon;
+               if (field.badges[i].toolTip) {
-        html += (field.badgeClass) ? " " + field.badgeClass : "";
+                   html += "<a href=\"\" aw-tool-tip=\"" + field.badges[i].toolTip + "\"";
-        html += "\"></i>";
+                   html += (field.badges[i].toolTipPlacement) ? " data-placement=\"" + field.badges[i].toolTipPlacement + "\"" : "";
-
+                   html += (field.badges[i].badgeShow) ? " ng-show=\"" + field.badges[i].badgeShow + "\"" : "";
-        if (field.badgeToolTip) {
+                   html += ">";
-           html += "</a>";
+               }
+               html += "<i ";
+               html += (field.badges[i].badgeShow) ? "ng-show=\"" + field.badges[i].badgeShow + "\" " : "";
+               html += " class=\"field-badge " + field.badges[i].icon;
+               html += (field.badges[i].badgeClass) ? " " + field.badges[i].badgeClass : "";
+               html += "\"></i>";
+               if (field.badges[i].toolTip) {
+                  html += "</a>";
+               }      
+               html += "\n";
+           }
+        }
+        else {
+           if (field.badgeToolTip) {
+              html += "<a href=\"\" aw-tool-tip=\"" + field.badgeToolTip + "\"";
+              html += (field.badgeTipPlacement) ? " data-placement=\"" + field.badgeTipPlacement + "\"" : "";
+              html += (field.badgeShow) ? " ng-show=\"" + field.badgeShow + "\"" : "";
+              html += ">";
+           } 
+           html += "<i ";
+           html += (field.badgeShow) ? "ng-show=\"" + field.badgeShow + "\" " : "";
+           html += " class=\"field-badge " + field.badgeIcon;
+           html += (field.badgeClass) ? " " + field.badgeClass : "";
+           html += "\"></i>";
+           if (field.badgeToolTip) {
+              html += "</a>";
+           }      
+           html += "\n";
         }
-        
-        html += "\n";
 
         return html;
 
@@ -284,7 +302,7 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
            html += (field.ngShow) ? "<span " + Attr(field,'ngShow') + ">" : "";
 
            // Badge
-           if (options.mode !== 'lookup' && field.badgeIcon && field.badgePlacement && field.badgePlacement == 'left') {
+           if ( options.mode !== 'lookup' && (field.badges || (field.badgeIcon && field.badgePlacement && field.badgePlacement == 'left')) ) {
               html += Badge(field);
            }
             
@@ -296,7 +314,8 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
            }
 
            // Start the Link
-           if ((field.key || field.link || field.linkTo || field.ngClick ) && options['mode'] != 'lookup' && options['mode'] != 'select') {
+           if ( (field.key || field.link || field.linkTo || field.ngClick ) &&
+                options['mode'] != 'lookup' && options['mode'] != 'select' && !field.noLink ) {
               var cap=false;
               if (field.linkTo) {
                  html += "<a href=\"#" + field.linkTo + "\" ";
@@ -349,11 +368,10 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
            }
             
            // close the link
-           if ((field.key || field.link || field.linkTo || field.ngClick )
+           if ( (field.key || field.link || field.linkTo || field.ngClick )
-               && options.mode != 'lookup' && options.mode != 'select') {
+                && options.mode != 'lookup' && options.mode != 'select' && !field.noLink ) {
-               html += "</a>";
+              html += "</a>";
            }
-
            // close ngShow
            html += (field.ngShow) ? "</span>" : "";
      

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

@@ -67,15 +67,11 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        $('.tooltip').each( function(index) {
            $(this).remove();
            });
+       
        $('.popover').each(function(index) {
               // remove lingering popover <div>. Seems to be a bug in TB3 RC1
               $(this).remove();
               });
-       
-       // Remove leftover timer, if any
-       //if (options.mode != 'lookup' && this.scope.timer) {
-       //   clearInterval(this.scope.timer);
-       //}
 
        if (options.mode == 'lookup') {
           // options should include {hdr: <dialog header>, action: <function...> }
@@ -169,6 +165,18 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        if (options.mode != 'lookup' && (list.well == undefined || list.well == 'true')) {
           html += "<div class=\"well\">\n";
        }
+       
+       // Add a title and optionally a close button (used on Inventory->Groups)
+       if (options.mode !== 'lookup' && list.showTitle) {
+          html += "<div class=\"form-title\">";
+          html += (options.mode == 'edit' || options.mode == 'summary') ? list.editTitle : list.addTitle;
+          if (list.cancelButton) {
+             html += "<button type=\"button\" ng-click=\"closeForm()\" class=\"close form-cancel\" aria-hidden=\"true\">" + 
+                 "&times;</button>\n";
+          }
+          html += "</div>\n";
+          html += "<hr class=\"form-title-hr\">\n";
+       }
 
        if (options.mode !== 'summary') {
           
@@ -226,9 +234,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        html += "<table id=\"" + list.name + "_table\" ";
        html += "class=\"table"
        html += (list['class']) ? " " + list['class'] : "";
-       html += (options.mode == 'lookup' || options.id) ? ' table-hover-inverse' : '';
+       html += (options.mode !== 'summary' && (options.mode == 'lookup' || options.id)) ? ' table-hover-inverse' : '';
        html += (list.hover) ? ' table-hover' : '';
-       
+       html += (options.mode == 'summary') ? ' table-summary' : '';
        html += "\" ";
        html += ">\n";
        html += "<thead>\n";
@@ -354,7 +362,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
           html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true, mode: 'lookup' });
        }
        else {
-          html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });  
+          if (options.mode !== 'summary') {
+             html += PaginateWidget({ set: list.name, iterator: list.iterator, mini: true });
+          } 
        }
       
        return html;