puppet-validator 0.0.9 → 0.1.0

data/public/scripts.js

@@ -8,11 +8,16 @@ function toggleMenu() {
   $('#checks-menu').slideToggle();
 }
 
+function loadPaste() {
+  var location = $('#location').val();
+  window.location = "/load/"+location;
+}
+
 function gist() {
-  var code = $('#code').text();
+  var code = $('#code').val();
   if (typeof(code) == 'string' && $.trim(code).length != 0) {
     var data = {
-      "description": "Validated by puppetlinter.com",
+      "description": "Validated by " + window.location.origin + '/load/referer',
       "public": true,
       "files": {
         "init.pp": {
@@ -28,71 +33,234 @@ function gist() {
       })
       .success(function(response) {
         console.log(response);
-        popup(null, 'Gist posted to:', response['html_url']);
+        popup(null, { text: 'Gist posted to:', url: response['html_url'] } );
       })
       .error(function(error) {
         console.warn("Cannot save gist: ", error);
-        popup('Gist save failed.', error);
+        popup('Gist save failed.', { text: error });
       });
   }
 }
 
-function popup(title, text, url) {
+function popup(title, options) {
   var dialog = $('<div id="popup" />');
-  $(dialog).append( $("<p/>").text(text) );
-
-  if(url) {
-    $(dialog).append( '<ul><li id="url"></li></ul>' )
-    $(dialog).find('li#url').append( $("<a />", { href: url, text: url }) );
-  }
-
-  $(dialog).dialog({
+  var params = {
       modal: true,
       title: title,
-      width: 425,
       buttons: {
           Ok: function () {
               $(this).dialog("close");
               $("#popup").remove();
           }
       }
+  };
+
+  if (typeof options === 'object') {
+    if('html' in options) {
+       dialog.append( $(options.html) );
+    }
+    if('text' in options) {
+       dialog.append( $("<p/>").text(options.text) );
+    }
+    if('url' in options) {
+      dialog.append( '<ul><li id="url"></li></ul>' )
+      dialog.find('li#url').append( $("<a />", { href: options.url, text: options.url }) );
+    }
+
+    if('height' in options) {
+      params.height = options.height;
+    }
+    if('width' in options) {
+      params.width = options.width;
+    }
+  }
+
+  $(dialog).dialog(params);
+}
+
+function showRelationships() {
+  if(typeof editor != 'undefined' ) { editor.save(); }
+
+  $('#relationships').prop("disabled",true);
+  $('html,body').css('cursor','wait');
+
+  $.post('/api/v0/validate/relationships', {code: $('#code').val()}, function(data) {
+    popup('Resource Relationships', {
+        html: '<center>'+data+'</center>',
+       width: $(window).width() * .8,
+      height: $(window).height() * .8
+    });
+
+  }).fail(function(jqXHR) {
+    alert("Unknown API error:\n" + jqXHR.responseText);
+
+  }).always(function() {
+    $('html,body').css('cursor','default');
+    $('#relationships').prop("disabled",false);
   });
 }
 
+function puppet_validator(cm, updateLinting, options) {
+  if(typeof editor == 'undefined' ) { return null; }
+
+  // propogates text to the textarea
+  editor.save();
+
+  var output  = $('#results');
+  var spinner = $('#spinner');
+  var message = $('#message');
+  var version = $('#version');
+  var wrapper = $('form');
+  var params  = {
+       code: $('#code').val(),
+    version: $('#versions').val(),
+  };
+
+  if( $('input#lint').is(':checked') ) {
+    params['lint']   = true;
+    params['checks'] = $('#checks input:checked').map(function() { return this.value; }).get();
+  }
+
+  message.empty();
+  spinner.show();
+  output.removeClass('hidden');
+  output.removeClass('validated');
+  $('#validate').prop("disabled",true);
+
+  var errors = [];
+  $.post('/api/v0/validate', params, function(data) {
+    console.log(data);
+    var results = jQuery.parseJSON(data);
+
+    spinner.hide();
+    message.text(results['message']);
+    version.text(results['version']);
+    wrapper.addClass('validated');
+    output.addClass('validated');
+
+    if(results.success) {
+      wrapper.removeClass('failed');
+      output.removeClass('failed');
+      $('#share').show();
+    }
+    else {
+      wrapper.addClass('failed');
+      output.addClass('failed');
+      $('#share').hide();
+
+      if('line' in results) {
+        var min = Math.max(results['line'] - 3, 0);
+        var max = Math.min(results['line'] + 3, editor.lineCount());
+        editor.scrollIntoView(min, max);
+      }
+    }
+
+    if ('messages' in results) {
+      var messages = results['messages'];
+      for ( var i = 0; i < messages.length; i++) {
+        var item = messages[i];
+        errors.push({
+              from: CodeMirror.Pos(item.from[0], item.from[1]),
+                to: CodeMirror.Pos(item.to[0],   item.to[1]  ),
+           message: item.message,
+          severity: item.severity
+        });
+      }
+      updateLinting(errors);
+    }
+  }).fail(function(jqXHR) {
+    alert("Unknown API error:\n" + jqXHR.responseText);
+  }).always(function() {
+    spinner.hide();
+    $('#validate').prop("disabled",false);
+  });
+}
+
+
 $( document ).ready(function() {
   toggleChecks();
+  $('#checks-menu').hide();
 
-  $("textarea#code").keydown(function(e) {
-      if(e.keyCode === 9) { // tab was pressed
-          // get caret position/selection
-          var start = this.selectionStart;
-          var end = this.selectionEnd;
+  $("input#load").on('click', function(event){
+    event.preventDefault();
+    loadPaste();
+  });
 
-          var $this = $(this);
-          var value = $this.val();
+  $("input#relationships").on('click', function(event){
+    event.preventDefault();
+    showRelationships();
+  });
 
-          // set textarea value to: text before caret + tab + text after caret
-          $this.val(value.substring(0, start)
-                      + "\t"
-                      + value.substring(end));
+  // don't fail if the theme doesn't load codemirror
+  if(typeof CodeMirror != 'undefined') {
+    var textbox = $("textarea#code")[0]
+    editor = CodeMirror.fromTextArea(textbox, {
+         lineNumbers: true,
+         smartIndent: true,
+      indentWithTabs: true,
+     styleActiveLine: true,
+                mode: 'puppet',
+             gutters: ["CodeMirror-lint-markers"],
+                lint: {
+                        getAnnotations: puppet_validator,
+                          lintOnChange: false,
+                                 async: true
+                      },
+    });
 
-          // put caret at right position again (add one for the tab)
-          this.selectionStart = this.selectionEnd = start + 1;
+    // this is slow as crap. There must be a faster way.
+    editor.on("renderLine", function(cm, lineHandle, element) {
+      if(element.querySelector('.CodeMirror-lint-mark-error')) {
+        //cm.getDoc().addLineClass(lineHandle, 'wrap', 'CodeMirror-lint-mark-error');
+        element.classList.add('CodeMirror-lint-mark-error');
+      }
 
-          // prevent the loss of focus
-          e.preventDefault();
+      if(element.querySelector('.CodeMirror-lint-mark-warning')) {
+        //cm.getDoc().addLineClass(lineHandle, 'wrap', 'CodeMirror-lint-mark-warning');
+        element.classList.add('CodeMirror-lint-mark-warning');
       }
-  });
+    });
 
-  if ($('select#versions option').length == 1) {
-    $('select#versions').attr('disabled', true);
+    // indent with spaces to match style guide
+    editor.setOption("extraKeys", {
+      Tab: function(cm) {
+        var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+        cm.replaceSelection(spaces);
+      }
+    });
+
+    $("input#validate").on('click', function(event){
+      event.preventDefault();
+      editor.performLint();
+    });
   }
   else {
-    $('select#versions').change(function() {
-      var action = ('/' + $( this ).val() + '/validate').replace(/^\/+/, '/');
-      $('form').attr('action', action );
+    $("textarea#code").keydown(function(e) {
+        if(e.keyCode === 9) { // tab was pressed
+            // get caret position/selection
+            var start = this.selectionStart;
+            var end = this.selectionEnd;
+
+            var $this = $(this);
+            var value = $this.val();
+
+            // set textarea value to: text before caret + tab + text after caret
+            $this.val(value.substring(0, start)
+                        + "\t"
+                        + value.substring(end));
+
+            // put caret at right position again (add one for the tab)
+            this.selectionStart = this.selectionEnd = start + 1;
+
+            // prevent the loss of focus
+            e.preventDefault();
+        }
     });
   }
 
+  if ($('select#versions option').length == 1) {
+    $('select#versions').attr('disabled', true);
+  }
+
   $('.share_icon').tooltip();
 });

data/public/styles.css

@@ -3,51 +3,47 @@ body {
   padding: 0 2em;
 }
 
-/* keeps the tooltip from clipping to the pre */
-pre[class*="language-"] {
-  overflow: visible;
-}
-div.line-highlight {
-  /* Cannot use opacity, because that affects tooltip children as well */
-  background-color: rgba(255, 181, 181, 0.25);
-  color: black;
-  font-weight: bold;
-}
-div.line-highlight.with-tooltip {
-  background-color: rgba(255, 255, 0, 0.25);
-  pointer-events: auto;
-}
-  div.line-highlight.with-tooltip .marker {
-    width: 0px;
-    height: 0px;
-    border-top: 0.5em solid #000;
-    border-left: 0.5em solid transparent;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  div.line-highlight.with-tooltip .line-highlight-tooltip {
-    position: absolute;
-    top: -1.75em;
-    right: 0;
-    background-color: #aaccaa;
-    border: 1px solid black;
-    border-radius: 5px;
-    padding: 0 3px;
-    display: none;
+/* css only line numbers for the fallback no-js results */
+pre#highlighted {
+  counter-reset: line;
+  background-color: #f7f7f7;
+  line-height: 0;
+}
+  pre#highlighted code {
+    counter-increment: line;
+    line-height: 1.25em;
   }
-  div.line-highlight.with-tooltip:hover .line-highlight-tooltip {
-    display: block;
+  pre#highlighted code:before {
+    content: counter(line);
+    -webkit-user-select: none;
+    display: inline-block;
+    width: 2em;
+    border-right: 2px solid #ccc;
+    text-align: right ;
+    padding-right: 0.5em;
+    margin-right: 0.5em;
   }
 
+#location {
+  width: 60%;
+}
+
 .results,
 .warning {
   width: 65%;
+  min-height: 3.5em;
   border: 1px solid black;
   border-radius: 0.25em;
   padding: 0.5em;
-  margin: 0 auto;
+  margin: 1em auto;
+  background-color: #fcfcfc;
+  transition: opacity 1s, background-color 1s, border: 1s;
 }
+
+  .results.hidden {
+    opacity: 0;
+  }
+
   .results legend {
     text-align: right;
     padding: 3px;
@@ -55,19 +51,21 @@ div.line-highlight.with-tooltip {
     border: 1px solid #ccc;
     border-radius: 3px;
   }
-  .results.success {
-    background-color: #61ff6e;
+  .results.validated {
+    border: 2px solid #1dd12d;
   }
-  .results.fail {
-    background-color: #ffb6b6;
+  .results.validated.failed {
+    border: 2px solid #981818;
   }
 
   .results p {
-    margin: 0;
+    margin: 0 3em 0 0;
   }
   .results img.share_icon {
+    display: none;
     float: right;
     cursor: pointer;
+    height: 2em;
   }
   .results hr {
     clear: both;
@@ -104,7 +102,21 @@ div.links {
 div.entry {
   width: 80%;
   margin: 0 auto;
+  border: 1px solid #ccc;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  background-color: #f7f7f7;
 }
+
+  form.validated div.entry {
+    background-color: #f1ffe8;
+    border: 1px solid #1dd12d;
+  }
+  form.validated.failed div.entry {
+    background-color: #ffd4d4;
+    border: 1px solid #981818;
+  }
+
   div.entry textarea {
     width: 100%;
     font-family: monospace;
@@ -113,6 +125,13 @@ div.row {
   text-align: center;
 }
 
+.CodeMirror-line.CodeMirror-lint-mark-warning {
+  background-color: #fff9d2;
+}
+.CodeMirror-line.CodeMirror-lint-mark-error {
+  background-color: #ffefed;
+}
+
 input#validate,
 select#versions,
 a#customize {
@@ -123,7 +142,7 @@ a.button {
   font-size: small;
   background-color: #fff;
   padding: 0 2px;
-  border: 1px solid #fff;
+  border: 1px solid #ccc;
   border-radius: 3px;
   text-decoration: none;
 }
@@ -132,23 +151,31 @@ a.button:hover {
   border-color: #bbb;
 }
 fieldset.menu {
-  display: none;
   border-radius: 0.5em;
+  background-color: #fff;
 }
-fieldset.menu ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  -moz-column-count: 2;
-  -moz-column-gap: 20px;
-  -webkit-column-count: 2;
-  -webkit-column-gap: 20px;
-  column-count: 2;
-  column-gap: 20px;
-}
+  fieldset.menu legend {
+    background-color: #ffffff;
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+    border-radius: 3px 3px 0 0;
+  }
+
+  fieldset.menu ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    -moz-column-count: 2;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 2;
+    -webkit-column-gap: 20px;
+    column-count: 2;
+    column-gap: 20px;
+  }
 
 .info {
-    background: #fefefe url('info.png') no-repeat 5px 5px !important;
+    background: #fefefe;
     border: 1px solid #efefef;
     padding: 0.5em;
     padding-left: 50px;
@@ -159,6 +186,10 @@ fieldset.menu ul {
     -khtml-border-radius: 0.5em;
     border-radius: 0.5em;
 }
+  .info i.fa {
+    float: left;
+    margin-left: -45px;
+  }
 
 /* jquery UI overrides */
 .ui-widget {