Better error handling on dev tools

public/controllers/dev-tools.js

@@ -46,7 +46,7 @@ app.controller('devToolsController', function($scope, $rootScope, errorHandler,
                 const cursor = apiInputBox.getSearchCursor(tmp[0])
 
                 if(cursor.findNext()) start = cursor.from().line
-                else return false;
+                else return [];
 
                 end = start + tmp.length;
 
@@ -84,7 +84,7 @@ app.controller('devToolsController', function($scope, $rootScope, errorHandler,
             
             return tmpgroups;
         } catch(error){
-            return false;
+            return [];
         }
     }
 
@@ -96,6 +96,7 @@ app.controller('devToolsController', function($scope, $rootScope, errorHandler,
         if(currentGroup){
             const hasWidget = widgets.filter(item => item.start === currentGroup.start)
             if(hasWidget.length) apiInputBox.removeLineWidget(hasWidget[0].widget)
+            setTimeout(() => checkJsonParseError(),450)
         }
     })
 
@@ -128,20 +129,23 @@ app.controller('devToolsController', function($scope, $rootScope, errorHandler,
                     jsonLint.parse(item.requestTextJson)
                 } catch(error) { 
                     affectedGroups.push(item.requestText);               
-                    var msg = document.createElement("div");
-                    var icon = msg.appendChild(document.createElement("span"));
-                    icon.innerHTML = "!";
+                    const msg = document.createElement("div");
+                    msg.id = new Date().getTime()/1000;
+                    const icon = msg.appendChild(document.createElement("div"));
+          
                     icon.className = "lint-error-icon";
-                    msg.onmouseover = () => {
-                        msg.removeChild(msg.lastChild)
-                        msg.appendChild(document.createTextNode(error.message));
+                    icon.id = new Date().getTime()/1000;
+                    icon.onmouseover = () => {
+                        const advice = msg.appendChild(document.createElement("span"));
+                        advice.id = new Date().getTime()/1000;
+                        advice.innerText = error.message || 'Error parsing query'
+                        advice.className = 'lint-block-wz'
                     }
-                    msg.onmouseleave = () => {
+
+                    icon.onmouseleave = () => {
                         msg.removeChild(msg.lastChild)
-                        msg.appendChild(document.createTextNode('Invalid query'));
                     }
-                    msg.appendChild(document.createTextNode('Invalid query'));
-                    msg.className = "lint-error";
+
                     widgets.push({start:item.start,widget:apiInputBox.addLineWidget(item.start, msg, {coverGutter: false, noHScroll: true})});
                 }
             }
@@ -194,12 +198,11 @@ app.controller('devToolsController', function($scope, $rootScope, errorHandler,
             
             const desiredGroup   = calculateWhichGroup();
             if(!desiredGroup) throw Error('not desired');
-
-            if(!firstTime){
-                const affectedGroups         = checkJsonParseError();
-                const filteredAffectedGroups = affectedGroups.filter(item => item === desiredGroup.requestText);
-                if(filteredAffectedGroups.length) {apiOutputBox.setValue('Error parsing JSON query'); return;}
-            }
+     
+            const affectedGroups         = checkJsonParseError();
+            const filteredAffectedGroups = affectedGroups.filter(item => item === desiredGroup.requestText);
+            if(filteredAffectedGroups.length) {apiOutputBox.setValue('Error parsing JSON query'); return;}
+      
 
             const method = desiredGroup.requestText.startsWith('GET') ? 
                            'GET' :

public/templates/dev-tools/dev-tools.html

@@ -1,5 +1,5 @@
 
-<div flex ng-controller="devToolsController" layout="column">
+<div flex ng-controller="devToolsController" layout="column" class="dev-tools-max-height">
 
     <wz-menu ng-init="menuNavItem = 'wazuh-dev'"></wz-menu>
     <md-content flex layout="column" class="md-padding" layout-align="start">

public/utils/codemirror/codemirror.css

@@ -349,4 +349,42 @@ span.CodeMirror-selectedtext { background: none; }
 
 
 .lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
-.lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
+.lint-error-icon {    
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUM2OEZDQTQ4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUM2OEZDQTU4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQzY4RkNBMjhFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQzY4RkNBMzhFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkgXxbAAAAJbSURBVHjapFNNaBNBFH4zs5vdZLP5sQmNpT82QY209heh1ioWisaDRcSKF0WKJ0GQnrzrxasHsR6EnlrwD0TagxJabaVEpFYxLWlLSS822tr87m66ccfd2GKyVhA6MMybgfe97/vmPUQphd0sZjto9XIn9OOsvlu2nkqRzVU+6vvlzPf8W6bk8dxQ0NPbxAALgCgg2JkaQuhzQau/El0zbmUA7U0Es8v2CiYmKQJHGO1QICCLoqilMhkmurDAyapKgqItezi/USRdJqEYY4D5jCy03ht2yMkkvL91jTTX10qzyyu2hruPRN7jgbH+EOsXcMLgYiThEgAMhABW85oqy1DXdRIdvP1AHJ2acQXvDIrVHcdQNrEKNYSVMSZGMjEzIIAwDXIo+6G/FxcGnzkC3T2oMhLjre49sBB+RRcHLqdafK6sYdE/GGBwU1VpFNj0aN8pJbe+BkZyevUrvLl6Xmm0W9IuTc0DxrDNAJd5oEvI/KRsNC3bQyNjPO9yQ1YHcfj2QvfQc/5TUhJTBc2iM0U7AWDQtc1nJHvD/cfO2s7jaGkiTEfa/Ep8coLu7zmNmh8+dc5lZDuUeFAGUNA/OY6JVaypQ0vjr7XYjUvJM37vt+j1vuTK5DgVfVUoTjVe+y3/LxMxY2GgU+CSLy4cpfsYorRXuXIOi0Vt40h67uZFTdIo6nLaZcwUJWAzwNS0tBnqqKzQDnjdG/iPyZxo46HaKUpbvYkj8qYRTZsBhge+JHhZyh0x9b95JqjVJkT084kZIPwu/mPWqPgfQ5jXh2+92Ay7HedfAgwA6KDWafb4w3cAAAAASUVORK5CYII=");
+  background-repeat: no-repeat;
+  background-position: 2px center;
+  height: 15px;
+  width:18px;
+  cursor:help;
+}
+.lint-default-msg {
+  padding-left:19px;
+}
+.lint-block-wz {
+  background-color: #FFF;
+  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.1));
+  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));
+  border: 1px solid gray;
+  border-radius: 1px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  color: black;
+  display: inline-block;
+  max-width: 500px;
+  padding: 4px;
+  /*position: fixed;*/
+  z-index: 999999;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: default;
+  white-space: pre-line;
+  word-wrap: break-word;
+  line-height: normal;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+}
+
+.dev-tools-max-height {
+  height: -webkit-fill-available;
+}