Merge branch 'help-text' of https://github.com/utkarshcmu/grafana into utkarshcmu-help-text

public/app/features/panel/panel_menu.js

@@ -9,15 +9,26 @@ function (angular, $, _, Tether) {
 
   angular
     .module('grafana.directives')
-    .directive('panelMenu', function($compile, linkSrv) {
+    .directive('panelMenu', function($sanitize, $compile, linkSrv) {
       var linkTemplate =
           '<span class="panel-title drag-handle pointer">' +
             '<span class="icon-gf panel-alert-icon"></span>' +
             '<span class="panel-title-text drag-handle">{{ctrl.panel.title | interpolateTemplateVars:this}}</span>' +
+            '<span class="panel-help-text"><info-popover mode="bold">{{ctrl.panel.helpText}}</info-popover></span>' +
             '<span class="panel-links-btn"><i class="fa fa-external-link"></i></span>' +
             '<span class="panel-time-info" ng-show="ctrl.timeInfo"><i class="fa fa-clock-o"></i> {{ctrl.timeInfo}}</span>' +
           '</span>';
 
+      function sanitizeString(str) {
+        try {
+          return $sanitize(str);
+        }
+        catch(err) {
+          console.log('Could not sanitize annotation string, html escaping instead');
+          return _.escape(str);
+        }
+      }
+
       function createExternalLinkMenu(ctrl) {
         var template = '<div class="panel-menu small">';
         template += '<div class="panel-menu-row">';
@@ -78,6 +89,7 @@ function (angular, $, _, Tether) {
           var $link = $(linkTemplate);
           var $panelLinksBtn = $link.find(".panel-links-btn");
           var $panelContainer = elem.parents(".panel-container");
+          var $panelHelpDrop = $link.find(".panel-help-text");
           var menuScope = null;
           var ctrl = $scope.ctrl;
           var timeout = null;
@@ -92,6 +104,12 @@ function (angular, $, _, Tether) {
             $panelLinksBtn.css({display: showIcon ? 'inline' : 'none'});
           });
 
+          $scope.$watch('ctrl.panel.helpText', function(helpText) {
+            helpText = sanitizeString(helpText);
+            var showIcon = (helpText ? helpText.length > 0 : false) && ctrl.panel.title !== '';
+            $panelHelpDrop.css({display: showIcon ? 'inline' : 'none'});
+          });
+
           function dismiss(time, force) {
             clearTimeout(timeout);
             timeout = null;

public/app/partials/panelgeneral.html

@@ -27,6 +27,12 @@
 			</select>
 		</div>
 	</div>
+	<div class="gf-form-inline">
+   	<div class="gf-form max-width-42">
+   		<span class="gf-form-label width-8">Help Text</span>
+  		<input type="text" class="gf-form-input width-30" ng-model='ctrl.panel.helpText'></input>
+   	</div>
+   </div>
 </div>
 
 <panel-links-editor panel="ctrl.panel"></panel-links-editor>

public/sass/components/_gf-form.scss

@@ -244,6 +244,11 @@ $gf-form-margin: 0.25rem;
   padding-left: $spacer;
   color: $text-color-weak;
 
+  &--bold {
+    color: $text-color-emphasis;
+    padding-left: 0;
+  }
+
   &--right-absolute {
     position: absolute;
     right: $spacer;

public/sass/pages/_dashboard.scss

@@ -73,6 +73,11 @@ div.flot-text {
   display: none;
 }
 
+.panel-help-text {
+  margin-left: 10px;
+  display: none; 
+}
+
 .panel-loading {
   position:absolute;
   top: -3px;