AC-232 License viewer completed.

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

@@ -77,6 +77,10 @@
     padding-left: 10px;
  }
 
+ .break {
+    word-wrap: break-word;
+ }
+
  .login-alert {
     font-weight: normal;
     font-size: 14px;
@@ -419,6 +423,22 @@
     color: #5bb75b;
  }
 
+ .field-success {
+    color: #5bb75b;
+ }
+
+ .field-success input {
+    border-color: #5bb75b;
+ }
+
+ .field-failure {
+    color: #FF0000;
+ }
+
+ .field-failure input {
+    border-color: #FF0000;
+ } 
+ 
  .job-changed,
  .license-warning,
  .license-demo {

awx/ui/static/js/forms/License.js

@@ -32,34 +32,36 @@ angular.module('LicenseFormDefinition', [])
                 readonly: true
                 },
             license_date: {
-                label: 'Activated On',
+                label: 'Expires On',
                 type: 'text',
                 readonly: true,
                 section: 'License'
                 },
             time_remaining: {
-                label: 'Days Left',
+                label: 'Time Left',
                 type: 'text',
                 readonly: true,
                 section: 'License'
                 },
             available_instances: {
-                label: 'License Count',
+                label: 'Available',
                 type: 'text',
                 readonly: true,
-                section: 'Available Servers'
+                section: 'Managed Hosts'
                 },
             current_instances: {
                 label: 'Used',
                 type: 'text',
                 readonly: true,
-                section: 'Available Servers'
+                section: 'Managed Hosts'
                 },
             free_instances: {
                 label: 'Remaining',
                 type: 'text',
                 readonly: true,
-                section: 'Available Servers'
+                section: 'Managed Hosts',
+                controlNGClass: 'free_instances_class',
+                labelNGClass: 'free_instances_class'
                 },
             company_name: {
                 label: 'Company',

awx/ui/static/js/helpers/Lookup.js

@@ -72,7 +72,6 @@ angular.module('LookUpHelper', [ 'RestServices', 'Utilities', 'SearchHelper', 'P
                 }
 
             listScope['toggle_' + list.iterator] = function(id) {
-                console.log('here!');
                 for (var i=0; i < scope[list.name].length; i++) {
                     if (listScope[list.name][i]['id'] == id) {
                        listScope[list.name][i]['checked'] = '1';

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

@@ -233,13 +233,17 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              html += (field.ngShow) ? this.attr(field,'ngShow') : "";
              html += (field.ngHide) ? this.attr(field,'ngHide') : "";
              html += ">\n";
-             html += "<label class=\"control-label"; 
+             html += "<label ";
+             html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
+             html += "class=\"control-label"; 
              html += (field.labelClass) ? " " + field.labelClass : "";
              html += "\" for=\"" + fld + '">';
              html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
              html += (field.icon) ? this.icon(field.icon) : "";
              html += field.label + '</label>' + "\n";
-             html += "<div class=\"controls\">\n"; 
+             html += "<div ";
+             html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : ""; 
+             html += "class=\"controls\">\n"; 
              html += (field.clear || field.genMD5) ? "<div class=\"input-append\">\n" : "";
              if (field.control === null || field.control === undefined || field.control) {
                 html += "<input ";

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

@@ -7,9 +7,10 @@
 
 'use strict';
 
-angular.module('License', ['LicenseFormDefinition', 'RestServices', 'Utilities', 'FormGenerator'])
+angular.module('License', ['LicenseFormDefinition', 'RestServices', 'Utilities', 'FormGenerator', 'PromptDialog'])
    .factory('ViewLicense', ['$location', 'LicenseForm', 'GenerateForm', 'Rest', 'Alert', 'GetBasePath', 'ProcessErrors',
-   function($location, LicenseForm, GenerateForm, Rest, Alert, GetBasePath, ProcessErrors) {
+       'FormatDate', 'Prompt',
+   function($location, LicenseForm, GenerateForm, Rest, Alert, GetBasePath, ProcessErrors, FormatDate, Prompt) {
    return function() {
    
    var defaultUrl=GetBasePath('config');
@@ -20,16 +21,30 @@ angular.module('License', ['LicenseFormDefinition', 'RestServices', 'Utilities',
    // load the form
    var scope = generator.inject(form, { mode: 'edit', modal: true, related: false});
    generator.reset();
+   
    scope.formModalAction = function() {
        $('#form-modal').modal("hide");
        }
+   
    scope.formModalActionLabel = 'OK';
    scope.formModalCancelShow = false;
-   scope.formModalInfo = false;
+   scope.formModalInfo = 'Purchase/Extend License';
    $('#form-modal .btn-success').removeClass('btn-success').addClass('btn-none');
    $('#form-modal').addClass('skinny-modal');
    scope.formModalHeader = 'AWX License';
 
+   // Respond to View JSON button
+   scope.formModalInfoAction = function() {
+       Prompt({
+           hdr: 'AWX Licensing',
+           body: "<p class=\"break\">AWX licenses can be purchased, renewed or extended by visiting <a id=\"license-link\" " +
+               "target=\"_blank\" href=\"http://www.ansibleworks.com/ansibleworks-awx/\">" +
+               "ansibleworks.com/ansibleworks-awx</a>.</p><p>Would you like to visit the AWX licensing site now?</p>",
+           'class': 'btn-primary', 
+           action: function() { var href = $('#license-link').attr('href'); window.location = href; }
+           });
+       }
+                
    // Retrieve detail record and prepopulate the form
    Rest.setUrl(defaultUrl); 
    Rest.get()
@@ -39,7 +54,31 @@ angular.module('License', ['LicenseFormDefinition', 'RestServices', 'Utilities',
                  scope[fld] = data['license_info'][fld];
               }
            }
-           var license = data['license_info'][fld];
+           var dt = new Date(parseInt(scope['license_date']));
+           if (dt.getFullYear() == '1970') {
+              // date was passed in seconds rather than milliseconds
+              dt = new Date(parseInt(scope['license_date']) * 1000);
+              scope['time_remaining'] = scope['time_remaining'] + '000';
+           } 
+           scope['license_date'] = FormatDate(dt);
+
+           var days = parseInt(scope['time_remaining'] / 86400000);
+           var remainder = scope['time_remaining'] - (days * 86400000);
+           var hours = parseInt(remainder / 3600000);
+           remainder = remainder - (hours * 3600000);
+           var minutes = parseInt(remainder / 60000);
+           remainder = remainder - (minutes * 60000);
+           var seconds = parseInt(remainder / 1000);
+           scope['time_remaining'] = days + ' days ' + ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2) + ':' + ('0' + seconds).slice(-2); 
+
+           if (parseInt(scope['free_instances']) <= 0) {
+              scope['free_instances_class'] = 'field-failure';
+           }
+           else {
+              scope['free_instances_class'] = 'field-success';
+           }
+
+           var license = data['license_info'];
            if (license['valid_key'] !== undefined && license['valid_key'] == false) {
               scope['license_status'] = 'Invalid';
               scope['status_color'] = 'license-invalid';
@@ -53,13 +92,14 @@ angular.module('License', ['LicenseFormDefinition', 'RestServices', 'Utilities',
               scope['status_color'] = 'license-expired';
            }
            else if (license['free_instances'] !== undefined && parseInt(license['free_instances']) <= 0) {
-              scope['license_status'] = 'No available servers';
+              scope['license_status'] = 'No available managed hosts';
-              scope['status_color'] = 'license-warning';
+              scope['status_color'] = 'license-invalid';
            }
            else {
               scope['license_status'] = 'Valid';
               scope['status_color'] = 'license-valid';
            }
+
            })
        .error( function(data, status, headers, config) {
            ProcessErrors(scope, data, status, form,

awx/ui/templates/ui/index.html

@@ -139,21 +139,6 @@
       </div>
     </div>
 
-    <!-- Confirmation Dialog -->
-    <div id="prompt-modal" class="modal hide">
-      <div class="modal-header">
-        <button type="button" class="close" data-target="#prompt-modal" 
-                        data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h3 ng-bind="promptHeader" id="prompt-header"></h3>
-      </div>
-      <div class="modal-body" ng-bind="promptBody" id="prompt-body">
-      </div>
-      <div class="modal-footer">
-        <a href="#" data-target="#prompt-modal" data-dismiss="modal" class="btn">No</a>
-        <a href="" ng-click="promptAction()" id="prompt-action-btn" class="btn">Yes</a>
-      </div>
-    </div>
-
     <!-- Password Dialog -->
     <div id="password-modal" class="modal hide">
       <div class="modal-header">
@@ -213,6 +198,21 @@
       </div>
     </div>
 
+    <!-- Confirmation Dialog -->
+    <div id="prompt-modal" class="modal hide">
+      <div class="modal-header">
+        <button type="button" class="close" data-target="#prompt-modal" 
+                        data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h3 ng-bind="promptHeader" id="prompt-header"></h3>
+      </div>
+      <div class="modal-body" ng-bind-html-unsafe="promptBody" id="prompt-body">
+      </div>
+      <div class="modal-footer">
+        <a href="#" data-target="#prompt-modal" data-dismiss="modal" class="btn">No</a>
+        <a href="" ng-click="promptAction()" id="prompt-action-btn" class="btn">Yes</a>
+      </div>
+    </div>
+
     <!-- Alerts/error handling dialogs -->
     <div id="alert-modal" class="modal hide">
       <div class="modal-header">