feat(panel): refinements for panel help text, made the inspector the home for the model version

public/app/core/controllers/inspect_ctrl.js

@@ -48,13 +48,13 @@ function (angular, _, $, coreModule) {
       }
 
       if (model.error.stack) {
-        $scope.editor.index = 2;
+        $scope.editor.index = 3;
         $scope.stack_trace = model.error.stack;
         $scope.message = model.error.message;
       }
 
       if (model.error.config && model.error.config.data) {
-        $scope.editor.index = 1;
+        $scope.editor.index = 2;
 
         if (_.isString(model.error.config.data)) {
           $scope.request_parameters = getParametersFromQueryString(model.error.config.data);

public/app/features/dashboard/partials/inspector.html

 <div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
 	<div class="modal-header">
 		<h2 class="modal-header-title">
-			<i class="fa fa-frown-o"></i>
+			<i class="fa fa-info-circle"></i>
 			<span class="p-l-1">Inspector</span>
 		</h2>
 
 		<ul class="gf-tabs">
-			<li class="gf-tabs-item" ng-repeat="tab in ['Request', 'Response', 'JS Error']">
+			<li class="gf-tabs-item" ng-repeat="tab in ['Panel Description', 'Request', 'Response', 'JS Error']">
 				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
 					{{::tab}}
 				</a>
@@ -19,8 +19,10 @@
 	</div>
 
 	<div class="modal-content">
+		<div ng-if="editor.index == 0" ng-bind-html="panelInfoHtml">
+		</div>
 
-		<div ng-if="editor.index == 0">
+		<div ng-if="editor.index == 1">
 			<h5 class="section-heading">Request details</h5>
 			<table class="filter-table gf-form-group">
 				<tr>
@@ -54,14 +56,14 @@
 			</table>
 		</div>
 
-		<div ng-if="editor.index == 1">
+		<div ng-if="editor.index == 2">
 			<h5 ng-show="message">{{message}}</h5>
  			<pre class="small">
 {{response}}
 			</pre>
 		</div>
 
-		<div ng-if="editor.index == 2">
+		<div ng-if="editor.index == 3">
 
 			<label>Message:</label>
 <pre>

public/app/features/dashboard/partials/panel_info.html

-<div class="modal-body">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-info-circle"></i>
-			<span class="p-l-1">Panel Description</span>
-		</h2>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content markdown-html" ng-bind-html="html">
-	</div>
-
-</div>
-

public/app/features/panel/panel_ctrl.ts

@@ -258,8 +258,13 @@ export class PanelCtrl {
     return '';
   }
 
-  getInfoContent() {
-    var markdown = this.error || this.panel.description;
+  getInfoContent(options) {
+    var markdown = this.panel.description;
+
+    if (options.mode === 'tooltip') {
+      markdown = this.error || this.panel.description;
+    }
+
     var linkSrv = this.$injector.get('linkSrv');
     var templateSrv = this.$injector.get('templateSrv');
     var interpolatedMarkdown = templateSrv.replace(markdown, this.panel.scopedVars);
@@ -279,23 +284,16 @@ export class PanelCtrl {
     return html + '</div>';
   }
 
-  openInfo() {
+  openInspector() {
     var modalScope = this.$scope.$new();
     modalScope.panel = this.panel;
     modalScope.dashboard = this.dashboard;
+    modalScope.panelInfoHtml = this.getInfoContent({mode: 'inspector'});
 
-    if (this.error) {
-      modalScope.inspector = $.extend(true, {}, this.inspector);
-      this.publishAppEvent('show-modal', {
-        src: 'public/app/features/dashboard/partials/inspector.html',
-        scope: modalScope
-      });
-    } else {
-      modalScope.html = this.getInfoContent();
-      this.publishAppEvent('show-modal', {
-        src: 'public/app/features/dashboard/partials/panel_info.html',
-        scope: modalScope
-      });
-    }
+    modalScope.inspector = $.extend(true, {}, this.inspector);
+    this.publishAppEvent('show-modal', {
+      src: 'public/app/features/dashboard/partials/inspector.html',
+      scope: modalScope
+    });
   }
 }

public/app/features/panel/panel_directive.ts

@@ -10,7 +10,7 @@ var module = angular.module('grafana.directives');
 var panelTemplate = `
   <div class="panel-container">
     <div class="panel-header">
-      <span class="panel-info-corner" ng-click="ctrl.openInfo()">
+      <span class="panel-info-corner">
         <i class="fa"></i>
         <span class="panel-info-corner-inner"></span>
       </span>
@@ -65,7 +65,7 @@ module.directive('grafanaPanel', function($rootScope) {
     scope: { ctrl: "=" },
     link: function(scope, elem) {
       var panelContainer = elem.find('.panel-container');
-      var cornerInfoElem = elem.find('.panel-info-corner')[0];
+      var cornerInfoElem = elem.find('.panel-info-corner');
       var ctrl = scope.ctrl;
       var infoDrop;
 
@@ -144,7 +144,7 @@ module.directive('grafanaPanel', function($rootScope) {
 
       function updatePanelCornerInfo() {
         var cornerMode = ctrl.getInfoMode();
-        cornerInfoElem.className = 'panel-info-corner + panel-info-corner--' + cornerMode;
+        cornerInfoElem[0].className = 'panel-info-corner + panel-info-corner--' + cornerMode;
 
         if (cornerMode) {
           if (infoDrop) {
@@ -152,8 +152,10 @@ module.directive('grafanaPanel', function($rootScope) {
           }
 
           infoDrop = new Drop({
-            target: cornerInfoElem,
-            content: ctrl.getInfoContent.bind(ctrl),
+            target: cornerInfoElem[0],
+            content: function() {
+              return ctrl.getInfoContent({mode: 'tooltip'});
+            },
             position: 'right middle',
             classes: ctrl.error ? 'drop-error' : 'drop-help',
             openOn: 'hover',
@@ -165,11 +167,17 @@ module.directive('grafanaPanel', function($rootScope) {
       scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
       scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
 
+      cornerInfoElem.on('click', function() {
+        infoDrop.close();
+        scope.$apply(ctrl.openInspector.bind(ctrl));
+      });
+
       elem.on('mouseenter', mouseEnter);
       elem.on('mouseleave', mouseLeave);
 
       scope.$on('$destroy', function() {
         elem.off();
+        cornerInfoElem.off();
 
         if (infoDrop) {
           infoDrop.destroy();