Closes #265, Graphite errors are now easier to troubleshoot with the new inspector!

src/app/controllers/inspectCtrl.js

@@ -7,26 +7,39 @@ function (angular) {
   var module = angular.module('kibana.controllers');
 
   module.controller('InspectCtrl', function($scope) {
+    var model = $scope.inspector;
+
+    function getParametersFromQueryString(queryString) {
+      var result = [];
+      var parameters = queryString.split("&");
+      for (var i = 0; i < parameters.length; i++) {
+        var keyValue = parameters[i].split("=");
+        if (keyValue[1].length > 0) {
+          result.push({ key: keyValue[0], value: window.unescape(keyValue[1]) });
+        }
+      }
+      return result;
+    }
 
     $scope.init = function () {
+      $scope.editor = { index: 0 };
 
-      if ($scope.inspector_info) {
+      if (!model.error)  {
-        $scope.init_model($scope.inspector_info);
+        return;
       }
 
-    };
+      if (model.error.stack) {
+        $scope.editor.index = 2;
+        $scope.stack_trace = model.error.stack;
+        $scope.message = model.error.message;
+      }
+      else if (model.error.config && model.error.config.data) {
+        $scope.editor.index = 1;
 
-    $scope.init_model = function(info) {
+        $scope.request_parameters = getParametersFromQueryString(model.error.config.data);
-      if (info.error) {
-        console.log(info.error);
-        if (info.error.config && info.error.config.data) {
-          $scope.request_parameters = info.error.config.data.split('&');
-        }
 
-        if (info.error.data) {
+        if (model.error.data.indexOf('DOCTYPE') !== -1) {
-          if (info.error.data.indexOf('DOCTYPE') !== -1) {
+          $scope.response_html = model.error.data;
-            $scope.response_html = info.error.data;
-          }
         }
       }
     };

src/app/directives/kibanaPanel.js

@@ -16,7 +16,7 @@ function (angular, $, _) {
       var panelHeader =
       '<div class="panel-header">'+
         '<div class="row-fluid">' +
-          '<div class="span12 alert-error panel-error small" ng-if="panel.error">' +
+          '<div class="span12 alert-error panel-error small" ng-show="panel.error">' +
             '<a class="close" ng-click="panel.error=false">&times;</a>' +
             '<span><i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}} </span>' +
             '<span class="pointer panel-error-inspector-link" config-modal="app/partials/inspector.html">View details</span>' +
@@ -223,6 +223,7 @@ function (angular, $, _) {
               }
             ];
 
+            scope.inspector = {};
             scope.panelMeta.menu = _.where(menu, { condition: true });
           };
         }

src/app/panels/graphite/module.js

@@ -262,8 +262,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         .then($scope.dataHandler)
         .then(null, function(err) {
           $scope.panelMeta.loading = false;
-          $scope.inspector_info = { error: err };
           $scope.panel.error = err.message || "Graphite HTTP Request Error";
+          $scope.inspector.error = err;
           $scope.render([]);
         });
     };

src/app/partials/inspector.html

@@ -2,22 +2,22 @@
   <div class="pull-right editor-title">Inspector</div>
 
   <div ng-model="editor.index" bs-tabs>
-    <div ng-repeat="tab in ['Request','Response']" data-title="{{tab}}">
+    <div ng-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}">
     </div>
   </div>
 
-  <div class="editor-row" ng-if="editor.index == 0">
+  <div ng-if="editor.index == 0">
-
+    <h5>Request details</h5>
-    <table class="table table-striped">
+    <table class="table table-striped small inspector-request-table">
       <tr>
         <td>Url</td>
-        <td>{{inspector_info.error.config.url}}</td>
+        <td>{{inspector.error.config.url}}</td>
       </tr>
       <tr>
         <td>Method</td>
-        <td>{{inspector_info.error.config.method}}</td>
+        <td>{{inspector.error.config.method}}</td>
       </tr>
-      <tr ng-repeat="(key, value) in inspector_info.error.config.headers">
+      <tr ng-repeat="(key, value) in inspector.error.config.headers">
         <td>
           {{key}}
         </td>
@@ -25,21 +25,44 @@
           {{value}}
         </td>
       </tr>
-      <tr>
-        <td>Data</td>
-        <td>{{inspector_info.error.config.data}}</td>
-      </tr>
     </table>
 
+    <h5>Request parameters</h5>
+    <table class="table table-striped small inspector-request-table">
+        <tr ng-repeat="param in request_parameters">
+          <td>
+            {{param.key}}
+          </td>
+          <td>
+            {{param.value}}
+          </td>
+        </tr>
+    </table>
   </div>
 
-  <div class="editor-row" ng-if="editor.index == 1">
+  <div ng-if="editor.index == 1">
+
     <div ng-if="response_html">
       <div iframe-content="response_html"></div>
     </div>
+
+  </div>
+
+  <div ng-if="editor.index == 2">
+
+    <label>Message:</label>
+    <pre>
+      {{message}}
+    </pre>
+
+    <label>Stack trace:</label>
+    <pre>
+      {{stack_trace}}
+    </pre>
+
   </div>
 
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="dismiss()">Close</button>
+  <button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
 </div>

src/css/less/overrides.less

@@ -588,3 +588,21 @@ div.flot-text {
 .save-dashboard-dropdown-save-form {
   margin-bottom: 5px;
 }
+
+
+// inspector
+.inspector-request-table {
+  td {
+     padding: 5px;
+  }
+
+  td:first-child {
+    white-space: nowrap;
+  }
+}
+
+// pre
+code, pre {
+  background-color: @kibanaPanelBackground;
+  color: @textColor;
+}