Created an Angular slider directive to support JQueryUI slider widget. Job Template page now uses a slider for Forks value. User can set the value with the slider or type in a value btwn 0 and 100. Additionally turned verbosity into a drop-down.

ansibleworks/ui/static/css/ansible-ui.css

@@ -353,3 +353,10 @@
  #tree-view {
     min-height: 100px;
  }
+
+ .slider {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100px;
+    margin: 0 10px;
+ }

ansibleworks/ui/static/js/controllers/JobTemplates.js

@@ -168,6 +168,15 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
    var form = JobTemplateForm;
    var generator = GenerateForm;
    var scope = generator.inject(form, {mode: 'add', related: false});
+   
+   scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
+   scope.verbosity_options = [
+       { value: '0', label: 'Silent' },
+       { value: '1', label: 'Whisper' },
+       { value: '2', label: 'Talk' },
+       { value: '3', label: 'Scream' }];
+   scope.playbook_options = []; 
+
    generator.reset();
    LoadBreadCrumbs();
 
@@ -223,9 +232,6 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
        field: 'project'
        });        
 
-   scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
-   scope.playbook_options = [];         
-
    // Save
    scope.formSave = function() {
       try {
@@ -261,7 +267,6 @@ function JobTemplatesAdd ($scope, $rootScope, $compile, $location, $log, $routeP
       // Defaults
       generator.reset();
       };
-
 }
 
 JobTemplatesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm',
@@ -281,13 +286,24 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
    var generator = GenerateForm;
    var form = JobTemplateForm;
    var scope = generator.inject(form, {mode: 'edit', related: true});
+
+   // Our job type options
+   scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
+   scope.verbosity_options = [
+       { value: '0', label: 'Silent' },
+       { value: '1', label: 'Whisper' },
+       { value: '2', label: 'Talk' },
+       { value: '3', label: 'Scream' }];
+   scope.playbook_options = null;
+   scope.playbook = null; 
+
    generator.reset();
+
    var base = $location.path().replace(/^\//,'').split('/')[0];
    var master = {};
    var id = $routeParams.id;
    var relatedSets = {}; 
 
-
    function getPlaybooks(project) {
        if (project !== null && project !== '' && project !== undefined) {
            var url = GetBasePath('projects') + project + '/playbooks/';
@@ -326,13 +342,9 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
            scope.search(relatedSets[set].iterator);
        }
        getPlaybooks(scope.project);
+       $('#forks-slider').slider('value',scope.forks);   // align slider handle with value.
        });
 
-   // Our job type options
-   scope.job_type_options = [{ value: 'run', label: 'Run' }, { value: 'check', label: 'Check' }];
-   scope.playbook_options = null;
-   scope.playbook = null; 
-
    // Retrieve detail record and prepopulate the form
    Rest.setUrl(defaultUrl + ':id/'); 
    Rest.get({ params: {id: id} })
@@ -442,6 +454,7 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
       for (var fld in master) {
           scope[fld] = master[fld];
       }
+      $('#forks-slider').slider("option", "value", scope.forks);
       };
 
    // Related set: Add button
@@ -481,7 +494,6 @@ function JobTemplatesEdit ($scope, $rootScope, $compile, $location, $log, $route
                 });
        
       }
-
 }
 
 JobTemplatesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$log', '$routeParams', 'JobTemplateForm', 

ansibleworks/ui/static/js/forms/JobTemplates.js

@@ -35,7 +35,7 @@ angular.module('JobTemplateFormDefinition', [])
                 label: 'Job Type',
                 type: 'select',
                 ngOptions: 'type.label for type in job_type_options',
-                default: 'run',
+                default: 0,
                 addRequired: true, 
                 editRequired: true,
                 column: 1
@@ -81,11 +81,14 @@ angular.module('JobTemplateFormDefinition', [])
                 },
             forks: {
                 label: 'Forks',
+                id: 'forks-number',
                 type: 'number', 
                 integer: true,
                 min: 0,
                 max: 100,
-                default: 0,
+                slider: true, 
+                class: 'input-mini',
+                default: '0',
                 addRequired: false, 
                 editRequired: false,
                 column: 2
@@ -99,13 +102,11 @@ angular.module('JobTemplateFormDefinition', [])
                 },
             verbosity: {
                 label: 'Verbosity',
-                type: 'number',
+                type: 'select',
-                integer: true,
+                ngOptions: 'v.label for v in verbosity_options',
                 default: 0,
-                min: 0,
+                addRequired: true, 
-                max: 3,
+                editRequired: true,
-                addRequired: false, 
-                editRequired: false,
                 column: 2
                 },
             extra_vars: {

ansibleworks/ui/static/lib/ansible/directives.js

@@ -165,7 +165,45 @@ angular.module('AWDirectives', ['RestServices'])
            $(element).popover({ placement: placement, delay: 0, title: title, 
                content: attrs.awPopOver, delay: 0, trigger: 'click', html: true });
        }
-       });
+       })
+
+    //
+    // Enable jqueryui slider widget on a numeric input field
+    //
+    // <input type="number" ng-slider name="myfield" min="0" max="100" />
+    //
+    .directive('ngSlider', [ function() {
+        return {
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            var name = elm.attr('name');
+            $('#' + name + '-slider').slider({
+                value: 0,
+                step: 1,
+                min: elm.attr('min'),
+                max: elm.attr('max'),
+                slide: function(e, u) {
+                   ctrl.$setViewValue(u.value);
+                   ctrl.$setValidity('required',true);
+                   ctrl.$setValidity('min', true);
+                   ctrl.$setValidity('max', true);
+                   ctrl.$dirty = true;
+                   ctrl.$render();
+                   scope['job_templates_form'].$dirty = true;
+                   if (!scope.$$phase) {
+                       scope.$digest();
+                   }
+                   }
+                });
+
+            $('#' + name + '-number').change( function() {
+                $('#' + name + '-slider').slider('value', parseInt( $(this).val() ));
+                });
+
+            
+            }
+        }
+        }]);
 
 
 

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

@@ -107,7 +107,12 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
     applyDefaults: function() {
        for (fld in this.form.fields) {
            if (this.form.fields[fld].default || this.form.fields[fld].default == 0) {
-              this.scope[fld] = this.form.fields[fld].default;
+              if (this.form.fields[fld].type == 'select' && this.scope[fld + '_options']) {
+                 this.scope[fld] = this.scope[fld + '_options'][this.form.fields[fld].default];
+              }
+              else {
+                 this.scope[fld] = this.form.fields[fld].default;
+              }
            }
        }
        },
@@ -311,18 +316,22 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
              html += "<label class=\"control-label\" for=\"" + fld + '">' + field.label + '</label>' + "\n";
              html += "<div class=\"controls\">\n"; 
              // Use 'text' rather than 'number' so that our integer directive works correctly
-             html += "<input type=\"text\" value=\"" + field.default + "\" class=\"spinner\" ";
+             html += (field.slider) ? "<div class=\"slider\" id=\"" + fld + "-slider\"></div>\n" : "";
+             html += "<input type=\"text\" value=\"" + field.default + "\" ";
+             html += (field.class) ? this.attr(field, 'class') : "";
+             html += (field.slider) ? "ng-slider=\"" + fld + "\" " : ""; 
              html += "ng-model=\"" + fld + '" ';
              html += 'name="' + fld + '" ';
              html += (field.min || field.min == 0) ? this.attr(field, 'min') : "";
              html += (field.max) ? this.attr(field, 'max') : "";
              html += (field.ngChange) ? this.attr(field,'ngChange') : "";
-             html += (field.id) ? this.attr(field,'id') : "";
+             html += (field.slider) ? "id=\"" + fld + "-number\"" : (field.id) ? this.attr(field,'id') : "";
              html += (options.mode == 'edit' && field.editRequired) ? "required " : "";
              html += (options.mode == 'add' && field.addRequired) ? "required " : "";
              html += (field.readonly) ? "readonly " : "";
              html += (field.integer) ? "integer " : "";
-             html += "/><br />\n";
+             html += "/>\n";
+             html += "<br />\n";
              // Add error messages
              if ( (options.mode == 'add' && field.addRequired) || (options.mode == 'edit' && field.editRequired) ) {
                 html += "<span class=\"error\" ng-show=\"" + this.form.name + '_form.' + fld + ".$dirty && " + 
@@ -535,8 +544,7 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                  var button = this.form.buttons[btn];
                  //button
                  html += "<button ";
-                 html += "class=\"btn"; 
+                 html += "class=\"btn btn-small";
-                 html += (this.form.twoColumns) ? "" : " btn-small";
                  html += (button.class) ? " " + button.class : "";
                  html += "\" ";
                  if (button.ngClick) {

ansibleworks/ui/templates/ui/index.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap.min.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}css/font-awesome.min.css" />
+  <link rel="stylesheet" href="{{ STATIC_URL }}css/redmond/jquery-ui-1.10.3.custom.min.css" />
   <link rel="stylesheet" href="{{ STATIC_URL }}css/ansible-ui.css" />
   <link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
   <script src="{{ STATIC_URL }}js/config.js"></script>
@@ -214,13 +215,13 @@
   </div><!-- site footer --> 
   
   <script src="{{ STATIC_URL }}lib/jquery/jquery-1.9.1.min.js"></script>
+  <script src="{{ STATIC_URL }}lib/jquery/jquery-ui-1.10.3.custom.min.js"></script>
   <script src="{{ STATIC_URL }}lib/twitter/bootstrap.min.js"></script>
   <script src="{{ STATIC_URL }}lib/jstree/jquery.jstree.js"></script>
   <script>
       $('a[data-toggle="tab"]').on('show', function (e) {
           var url = $(e.target).text();
           var regx = new RegExp('/\#\/' + url.toLowerCase().replace(/ /g,'_') + '/');
-
           var loc = window.location.toString();
           if (! regx.test(loc)) {
              window.location = '#/' + url.toLowerCase().replace(/ /g,'_');