major improvement to how modals are loaded, much more reuse in html dom elements, hopefully solves #109.

src/app/directives/configModal.js

@@ -1,48 +1,44 @@
 define([
   'angular',
-  'underscore'
+  'underscore',
+  'jquery'
 ],
-function (angular, _) {
+function (angular, _, $) {
   'use strict';
 
   angular
     .module('kibana.directives')
-    .directive('configModal', function($modal,$q) {
+    .directive('configModal', function($modal, $q, $timeout) {
       return {
         restrict: 'A',
         link: function(scope, elem, attrs) {
-          var
+          var partial = attrs.configModal;
-            model = attrs.kbnModel,
+          var id = '#' + partial.replace('.html', '').replace(/[\/|\.|:]/g, '-') + '-' + scope.$id;
-            partial = attrs.configModal;
 
-
+          elem.bind('click',function() {
-          // create a new modal. Can't reuse one modal unforunately as the directive will not
+            if ($(id).length) {
-          // re-render on show.
+              elem.attr('data-target', id).attr('data-toggle', 'modal');
-          elem.bind('click',function(){
+              return;
-
+            }
-            // Create a temp scope so we can discard changes to it if needed
-            var tmpScope = scope.$new();
-            tmpScope[model] = angular.copy(scope[model]);
-
-            tmpScope.editSave = function(panel) {
-              // Correctly set the top level properties of the panel object
-              _.each(panel,function(v,k) {
-                scope[model][k] = panel[k];
-              });
-            };
 
             var panelModal = $modal({
               template: partial,
               persist: true,
               show: false,
-              scope: tmpScope,
+              scope: scope,
               keyboard: false
             });
 
-            // and show it
             $q.when(panelModal).then(function(modalEl) {
-              modalEl.modal('show');
+              elem.attr('data-target', id).attr('data-toggle', 'modal');
+
+              $timeout(function () {
+                if (!modalEl.data('modal').isShown) {
+                  modalEl.modal('show');
+                }
+              }, 50);
             });
+
             scope.$apply();
           });
         }

src/app/directives/kibanaPanel.js

@@ -45,7 +45,7 @@ function (angular, $) {
             '</span>'+
 
             '<span ng-if="!panelMeta.menuItems" config-modal="./app/partials/paneleditor.html" ' +
-                  ' kbn-model="panel" class="panel-text panel-title pointer" >' +
+                  ' class="panel-text panel-title pointer" >' +
               '{{panel.title}}' +
             '</span>'+
 

src/app/panels/annotations/editor.html

@@ -4,20 +4,20 @@
   <div class="editor-row">
     <table class="table table-striped annotation-editor-table">
       <thead>
+        <th width="1%"></th>
         <th width="1%">Type</th>
         <th width="90%">Name</th>
         <th width="1%"></th>
         <th width="1%"></th>
         <th width="1%"></th>
-        <th width="1%"></th>
       </thead>
       <tr ng-repeat="annotation in panel.annotations">
+        <td><a ng-click="edit(annotation)"><i class="icon-pencil" /></a></td>
         <td>{{annotation.type}}</td>
         <td>{{annotation.name}}</td>
         <td><i ng-click="_.move(panel.annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
         <td><i ng-click="_.move(panel.annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
         <td><i ng-click="panel.annotations = _.without(panel.annotations, annotation)" class="pointer icon-remove"></i></td>
-        <td><a ng-click="edit(annotation)"><i class="icon-pencil" /></a></td>
       </tr>
     </table>
   </div>
@@ -32,7 +32,7 @@
     </div>
     <div class="editor-option">
       <label class="small">Type</label>
-      <select ng-model="currentAnnnotation.type" ng-options="f for f in ['graphite metric']"></select>
+      <select ng-model="currentAnnnotation.type" ng-options="f for f in ['graphite metric', 'graphite events']"></select>
     </div>
   </div>
 
@@ -53,8 +53,7 @@
 </div>
 
 <div class="modal-footer">
-  <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
   <button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
   <button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
-  <button type="button" class="btn btn-danger" ng-click="editSave(panel);close_edit();dismiss()">Close</button>
+  <button type="button" class="btn btn-danger" ng-click="close_edit();dismiss()">Close</button>
 </div>

src/app/panels/annotations/module.js

@@ -38,19 +38,11 @@ function (angular, app, _) {
       $scope.currentIsNew = true;
     };
 
-    $scope.getAnnotationInfo = function(annotation) {
-      return annotation.target;
-    };
-
     $scope.edit = function(annotation) {
       $scope.currentAnnnotation = annotation;
       $scope.currentIsNew = false;
     };
 
-    $scope.getInfo = function(annotation) {
-      return annotation.target;
-    };
-
     $scope.update = function() {
       $scope.currentAnnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;

src/app/panels/graphite/editor.html

@@ -68,7 +68,7 @@
                 focus-me="segment.focus"
                 ng-bind-html-unsafe="segment.html">
             </a>
-            <ul class="dropdown-menu scrollable" role="menu">
+            <ul class="dropdown-menu scrollable grafana-segment-dropdown-menu" role="menu">
               <li ng-repeat="altSegment in altSegments" role="menuitem">
                 <a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
               </li>

src/app/partials/dashLoader.html

@@ -68,5 +68,5 @@
 
 <li ng-show="showDropdown('share')"><a bs-tooltip="'Share'" data-placement="bottom" ng-click="elasticsearch_save('temp',dashboard.current.loader.save_temp_ttl)" bs-modal="'app/partials/dashLoaderShare.html'"><i class='icon-share'></i></a></li>
 
-<li ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a href='#' bs-modal="'app/partials/dasheditor.html'"><i class='icon-cog pointer'></i></a></li>
+<li ng-show="dashboard.current.editable" bs-tooltip="'Configure dashboard'" data-placement="bottom"><a class="link" config-modal="app/partials/dasheditor.html"><i class='icon-cog pointer'></i></a></li>
 

src/app/partials/dashboard.html

@@ -19,7 +19,7 @@
         <div class="row-control">
           <div class="grafana-row" style="padding:0px;margin:0px;position:relative;">
             <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
-              <span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
+              <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
                 <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
               </span>
               <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
@@ -33,7 +33,7 @@
                 <i bs-tooltip="'Collapse row'" data-placement="right"  class="icon-caret-right" ></i>
                 <br>
               </div>
-              <div bs-modal="'app/partials/roweditor.html'" class='row-tab bgWarning' ng-show="row.editable">
+              <div config-modal="app/partials/roweditor.html" class='row-tab bgWarning' ng-show="row.editable">
                 <i bs-tooltip="'Configure row'" data-placement="right"  class="icon-cog pointer"></i>
                 <br>
               </div>
@@ -58,7 +58,7 @@
             <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
             </div>
 
-            <span bs-modal="'app/partials/roweditor.html'" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
+            <span config-modal="app/partials/roweditor.html" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
               <i ng-hide="rowSpan(row) >= 10" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
             </span>
 
@@ -70,7 +70,7 @@
 
       <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
         <div class="span12" style="text-align:right;">
-          <span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
+          <span style="margin-left: 0px;" class="pointer btn btn-mini" config-modal="app/partials/dasheditor.html">
             <span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
           </span>
         </div>

src/app/partials/paneleditor.html

@@ -19,6 +19,5 @@
 
 <div class="modal-footer">
   <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
-  <button type="button" class="btn btn-success" ng-click="editor.index=0;editSave(panel);close_edit();dismiss()">Save</button>
   <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss()">Cancel</button>
 </div>