ux: working on how to show form in popover

public/app/core/components/switch.ts

@@ -9,7 +9,7 @@ import Drop from 'tether-drop';
 var template = `
 <label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer">
   {{ctrl.label}}
-  <info-popover mode="right-normal" ng-if="ctrl.tooltip">
+  <info-popover mode="right-normal" ng-if="ctrl.tooltip" position="top center">
     {{ctrl.tooltip}}
   </info-popover>
 </label>

public/app/features/dashboard/all.js

@@ -22,4 +22,5 @@ define([
   './ad_hoc_filters',
   './row/row_ctrl',
   './repeat_option/repeat_option',
+  './event_editor',
 ], function () {});

public/app/features/dashboard/event_editor.ts

+///<reference path="../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import coreModule from 'app/core/core_module';
+
+export class EventEditorCtrl {
+  /** @ngInject */
+  constructor() {
+  }
+}
+
+export function eventEditor() {
+  return {
+    restrict: 'E',
+    controller: EventEditorCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    templateUrl: 'public/app/features/dashboard/partials/event_editor.html',
+  };
+}
+
+coreModule.directive('eventEditor', eventEditor);

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

+<div class="gf-form-group">
+	<h5 class="section-heading">Add annotation event</h5>
+
+	<div class="gf-form">
+		<span class="gf-form-label width-8">Title</span>
+		<input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20">
+	</div>
+	<div class="gf-form">
+		<span class="gf-form-label width-8">Time</span>
+		<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20">
+	</div>
+	<div class="gf-form" ng-if="ctrl.event.isRegion">
+		<span class="gf-form-label width-8">To</span>
+		<input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20">
+	</div>
+	<div class="gf-form gf-form--v-stretch">
+		<span class="gf-form-label width-7">Description</span>
+		<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.event.description"  placeholder="Panel description, supports markdown & links"></textarea>
+	</div>
+</div>
+
+<div class="gf-form-button-row">
+	<button class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.addAnnotation()">
+		<i class="fa fa-pencil"></i>
+		Add Annotation
+	</button>
+</div>

public/app/plugins/panel/graph/graph.ts

@@ -19,7 +19,7 @@ import GraphTooltip from './graph_tooltip';
 import {ThresholdManager} from './threshold_manager';
 import {convertValuesToHistogram, getSeriesValues} from './histogram';
 
-coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
+coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
   return {
     restrict: 'A',
     template: '',
@@ -91,10 +91,23 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
             to: null
           };
 
-          ctrl.showAddAnnotationModal(timeRange);
+          showAddAnnotationView(timeRange);
         }
       }, scope);
 
+      function showAddAnnotationView(timeRange) {
+        popoverSrv.show({
+          element: elem[0],
+          position: 'bottom center',
+          openOn: 'click',
+          template: '<event-editor panelCtrl="ctrl" timeRange="timeRange"></event-editor>',
+          model: {
+            timeRange: timeRange,
+            panelCtrl: ctrl,
+          },
+        });
+      }
+
       function getLegendHeight(panelHeight) {
         if (!panel.legend.show || panel.legend.rightSide) {
           return 0;
@@ -658,7 +671,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
         if (ranges.ctrlKey || ranges.metaKey) {
           // Create new annotation from time range
           let timeRange = ranges.xaxis;
-          ctrl.showAddAnnotationModal(timeRange);
+          showAddAnnotationView(timeRange);
           plot.clearSelection();
         } else {
           scope.$apply(function() {