[Dashboard] Implement custom title for panels.

src/plugins/kibana/public/dashboard/components/panel/panel.html

@@ -1,8 +1,59 @@
 <div class="panel panel-default" ng-switch on="panel.type" ng-if="savedObj || error">
   <div class="panel-heading">
-    <span class="panel-title" title="{{::savedObj.title}}">
-      {{::savedObj.title}}
-    </span>
+    <div class="panel-title" title="{{::savedObj.title}}">
+      <i
+        class="fa"
+        ng-class="savedObj.vis.type.icon"
+        aria-label="{{::savedObj.vis.type.title}} Icon"
+        title="{{::savedObj.vis.type.title}}">
+      </i>
+      <a class="action panel-title-edit" ng-hide="showFormTitle" ng-click="setTitle()">
+        <span ng-if="panel.title">{{panel.title}}</span>
+        <span ng-hide="panel.title">{{::savedObj.title}}</span>
+      </a>
+
+      <div ng-if="showFormTitle" >
+        <form class="inline-form" ng-show="chrome.getVisible()" role="form">
+            <input type="text" name="title" ng-model="panel.title"
+              placeholder="{{::savedObj.title}}" input-focus
+              ng-keyup="maybeCancel($event, conf)"
+              class="form-control">
+        </form>
+      </div>
+      <div ng-if="showFormTitle" class="panel-title-edit" >
+        <kbn-tooltip text="Set Title" placement="bottom" append-to-body="1">
+          <button
+            ng-click="confirmTitle()"
+            class="btn btn-success"
+            aria-label="Confirm"
+            data-test-subj="confirmButton">
+            <span class="sr-only">Confirm</span>
+            <i aria-hidden="true" class="fa fa-save"></i>
+          </button>
+        </kbn-tooltip>
+        <kbn-tooltip text="Cancel Title" placement="bottom" append-to-body="1">
+          <button
+            ng-click="cancelTitle()"
+            class="btn btn-default"
+            aria-label="Cancel"
+            data-test-subj="cancelButton">
+            <span class="sr-only">Cancel</span>
+            <i aria-hidden="true" class="fa fa-times"></i>
+          </button>
+        </kbn-tooltip>
+        <kbn-tooltip text="Restore Title" placement="bottom" append-to-body="1">
+          <button
+            ng-click="resetTitle()"
+            class="btn btn-default"
+            aria-label="Undo"
+            data-test-subj="undoButton">
+            <span class="sr-only">Undo</span>
+            <i aria-hidden="true" class="fa fa-undo"></i>
+          </button>
+        </kbn-tooltip>
+      </div>
+    </div>
+
     <div class="btn-group">
       <a aria-label="Edit" ng-show="chrome.getVisible() && editUrl" ng-href="{{::editUrl}}">
         <i aria-hidden="true" class="fa fa-pencil"></i>

src/plugins/kibana/public/dashboard/components/panel/panel.js

@@ -1,88 +1,114 @@
-import moment from 'moment';
-import $ from 'jquery';
-import _ from 'lodash';
-import 'ui/visualize';
-import 'ui/doc_table';
-import PluginsKibanaDashboardComponentsPanelLibLoadPanelProvider from 'plugins/kibana/dashboard/components/panel/lib/load_panel';
-import FilterManagerProvider from 'ui/filter_manager';
-import UtilsBrushEventProvider from 'ui/utils/brush_event';
-import uiModules from 'ui/modules';
-import panelTemplate from 'plugins/kibana/dashboard/components/panel/panel.html';
-uiModules
-.get('app/dashboard')
-.directive('dashboardPanel', function (savedVisualizations, savedSearches, Notifier, Private, $injector) {
-  const loadPanel = Private(PluginsKibanaDashboardComponentsPanelLibLoadPanelProvider);
-  const filterManager = Private(FilterManagerProvider);
-  const notify = new Notifier();
-
-  const services = require('plugins/kibana/settings/saved_object_registry').all().map(function (serviceObj) {
-    const service = $injector.get(serviceObj.service);
-    return {
-      type: service.type,
-      name: serviceObj.service
+define(function (require) {
+  var moment = require('moment');
+  var $ = require('jquery');
+  require('ui/modules')
+  .get('app/dashboard')
+  .directive('dashboardPanel', function (savedVisualizations, savedSearches, Notifier, Private, $injector) {
+    var _ = require('lodash');
+    var loadPanel = Private(require('plugins/kibana/dashboard/components/panel/lib/load_panel'));
+    var filterManager = Private(require('ui/filter_manager'));
+    var notify = new Notifier();
+
+    var services = require('plugins/kibana/settings/saved_object_registry').all().map(function (serviceObj) {
+      var service = $injector.get(serviceObj.service);
+      return {
+        type: service.type,
+        name: serviceObj.service
+      };
+    });
+
+    require('ui/visualize');
+    require('ui/doc_table');
+
+    var brushEvent = Private(require('ui/utils/brush_event'));
+
+    var getPanelId = function (panel) {
+      return ['P', panel.panelIndex].join('-');
     };
-  });
 
+    return {
+      restrict: 'E',
+      template: require('plugins/kibana/dashboard/components/panel/panel.html'),
+      requires: '^dashboardGrid',
+      link: function ($scope, $el) {
+        // using $scope inheritance, panels are available in AppState
+        var $state = $scope.state;
 
-  const brushEvent = Private(UtilsBrushEventProvider);
-
-  const getPanelId = function (panel) {
-    return ['P', panel.panelIndex].join('-');
-  };
-
-  return {
-    restrict: 'E',
-    template: panelTemplate,
-    requires: '^dashboardGrid',
-    link: function ($scope, $el) {
-      // using $scope inheritance, panels are available in AppState
-      const $state = $scope.state;
-
-      // receives $scope.panel from the dashboard grid directive, seems like should be isolate?
-      $scope.$watch('id', function () {
-        if (!$scope.panel.id || !$scope.panel.type) return;
-
-        loadPanel($scope.panel, $scope)
-        .then(function (panelConfig) {
-          // These could be done in loadPanel, putting them here to make them more explicit
-          $scope.savedObj = panelConfig.savedObj;
-          $scope.editUrl = panelConfig.editUrl;
-          $scope.$on('$destroy', function () {
-            panelConfig.savedObj.destroy();
-            $scope.parentUiState.removeChild(getPanelId(panelConfig.panel));
-          });
+        // receives $scope.panel from the dashboard grid directive, seems like should be isolate?
+        $scope.$watch('id', function () {
+          if (!$scope.panel.id || !$scope.panel.type) return;
 
-          // create child ui state from the savedObj
-          const uiState = panelConfig.uiState || {};
-          $scope.uiState = $scope.parentUiState.createChild(getPanelId(panelConfig.panel), uiState, true);
+          loadPanel($scope.panel, $scope)
+          .then(function (panelConfig) {
+            // These could be done in loadPanel, putting them here to make them more explicit
+            $scope.savedObj = panelConfig.savedObj;
+            $scope.editUrl = panelConfig.editUrl;
+            $scope.$on('$destroy', function () {
+              panelConfig.savedObj.destroy();
+              $scope.parentUiState.removeChild(getPanelId(panelConfig.panel));
+            });
+
+            // create child ui state from the savedObj
+            var uiState = panelConfig.uiState || {};
+            $scope.uiState = $scope.parentUiState.createChild(getPanelId(panelConfig.panel), uiState, true);
+
+            if ($scope.uiState) {
+              $scope.panel.title = $scope.uiState.get('title');
+              // sync external uiState changes
+              var syncUIState = function () {$scope.panel.title = $scope.uiState.get('title');};
+              $scope.uiState.on('change', syncUIState);
+              $scope.$on('$destroy', function () {$scope.uiState.off('change', syncUIState);});
+            }
+
+            $scope.filter = function (field, value, operator) {
+              var index = $scope.savedObj.searchSource.get('index').id;
+              filterManager.add(field, value, operator, index);
+            };
+          })
+          .catch(function (e) {
+            $scope.error = e.message;
+
+            // If the savedObjectType matches the panel type, this means the object itself has been deleted,
+            // so we shouldn't even have an edit link. If they don't match, it means something else is wrong
+            // with the object (but the object still exists), so we link to the object editor instead.
+            var objectItselfDeleted = e.savedObjectType === $scope.panel.type;
+            if (objectItselfDeleted) return;
+
+            var type = $scope.panel.type;
+            var id = $scope.panel.id;
+            var service = _.find(services, { type: type });
+            if (!service) return;
+
+            $scope.editUrl = '#settings/objects/' + service.name + '/' + id + '?notFound=' + e.savedObjectType;
+          });
 
-          $scope.filter = function (field, value, operator) {
-            const index = $scope.savedObj.searchSource.get('index').id;
-            filterManager.add(field, value, operator, index);
-          };
-        })
-        .catch(function (e) {
-          $scope.error = e.message;
-
-          // If the savedObjectType matches the panel type, this means the object itself has been deleted,
-          // so we shouldn't even have an edit link. If they don't match, it means something else is wrong
-          // with the object (but the object still exists), so we link to the object editor instead.
-          const objectItselfDeleted = e.savedObjectType === $scope.panel.type;
-          if (objectItselfDeleted) return;
-
-          const type = $scope.panel.type;
-          const id = $scope.panel.id;
-          const service = _.find(services, { type: type });
-          if (!service) return;
-
-          $scope.editUrl = '#settings/objects/' + service.name + '/' + id + '?notFound=' + e.savedObjectType;
         });
 
-      });
+        $scope.remove = function () {
+          _.pull($state.panels, $scope.panel);
+        };
 
-      $scope.remove = function () {
-        _.pull($state.panels, $scope.panel);
-      };
-    }
-  };
+        $scope.setTitle = function () {
+          $scope.showFormTitle = !$scope.showFormTitle;
+          // save the panel title to the UI state
+          if (!_.isString($scope.panel.title)) $scope.panel.title = null;
+          $scope.uiState.set('title', $scope.panel.title);
+        };
+        $scope.confirmTitle = function () {$scope.setTitle();};
+        $scope.cancelTitle = function () {
+          $scope.panel.title = $scope.uiState.get('title');
+          $scope.showFormTitle = false;
+        };
+        $scope.resetTitle = function () {$scope.panel.title = null;};
+        $scope.maybeCancel = function ($event) {
+          const keyCodes = {
+            ESC: 27
+          };
+          if ($event.keyCode === keyCodes.ESC) {
+            $scope.cancelTitle();
+          }
+        };
+      }
+    };
+  });
 });

src/plugins/kibana/public/dashboard/styles/main.less

@@ -101,6 +101,10 @@ dashboard-grid {
           // http://stackoverflow.com/questions/22008135/internet-explorer-10-does-not-apply-flexbox-on-inline-elements
           display: inline-block;
 
+          div {
+            display: inline-block;
+          }
+
           .ellipsis();
           flex: 1 1 auto;
 
@@ -109,6 +113,18 @@ dashboard-grid {
             font-size: 1.2em;
             margin-right: 4px;
           }
+
+          .panel-title-edit {
+            i {
+              opacity: 1;
+            }
+          }
+
+          &:hover {
+            .panel-title-edit {
+              cursor: pointer;
+            }
+          }
         }
 
         .panel-move:hover {