Use string instead of path in directives to take advantage of requirejs cache busting

src/kibana/apps/dashboard/directives/grid.js

@@ -31,8 +31,8 @@ define(function (require) {
         var init = function () {
           initGrid();
           elem.on('click', 'li i.remove', function (event) {
-            var target = event.target.parentNode;
+            var target = event.target.parentNode.parentNode;
-            gridster.remove_widget(event.target.parentNode);
+            gridster.remove_widget(target);
           });
 
           $scope.control.unserializeGrid($scope.grid);
@@ -75,7 +75,6 @@ define(function (require) {
         };
 
         $scope.control.serializeGrid = function () {
-          console.log(gridster.serialize());
           return gridster.serialize();
         };
 
@@ -90,10 +89,13 @@ define(function (require) {
           });
           var wgd = gridster.add_widget('<li />',
               panel.size_x, panel.size_y, panel.col, panel.row);
-          wgd.append('<dashboard-panel params=\'' + JSON.stringify(panel.params) + '\' />');
+
+          var template = '<dashboard-panel params=\'' + JSON.stringify(panel.params) + '\'></dashboard-panel>';
+
+          var element = $compile(template)($scope);
+          wgd.append(element);
           wgd.data('params', panel.params);
 
-          $compile(wgd)($scope);
         };
 
         // Start the directive

src/kibana/apps/dashboard/directives/panel.js

@@ -11,7 +11,7 @@ define(function (require) {
       },
       compile: function (elem, attrs) {
         var params = JSON.parse(attrs.params);
-        elem.replaceWith(params.type + '<i class="link pull-right fa fa-times remove" />');
+        elem.html(params.type + '<i class="link pull-right fa fa-times remove" />');
       }
     };
   });

src/kibana/apps/dashboard/index.js

@@ -23,11 +23,18 @@ define(function (require) {
     // the controller and view
     $scope.gridControl = {};
 
-    $scope.openSave = function () {
+    var setConfigTemplate = function (template) {
-      var template = 'kibana/apps/dashboard/partials/save_dashboard.html';
-
       // Close if already open
-      $scope.configTemplate = $scope.configTemplate === template ? undefined : template;
+      if ($scope.configTemplate === template) {
+        delete $scope.configTemplate;
+        return;
+      } else {
+        $scope.configTemplate = template;
+      }
+    };
+
+    $scope.openSave = function () {
+      setConfigTemplate(require('text!./partials/save_dashboard.html'));
 
       $scope.configSubmit = function () {
         $scope.save($scope.dashboard.title);
@@ -35,10 +42,7 @@ define(function (require) {
     };
 
     $scope.openLoad = function () {
-      var template = 'kibana/apps/dashboard/partials/load_dashboard.html';
+      setConfigTemplate(require('text!./partials/load_dashboard.html'));
-
-      // Close if already open
-      $scope.configTemplate = $scope.configTemplate === template ? undefined : template;
 
       var search = courier.createSource('search')
         .index(configFile.kibanaIndex)
@@ -75,65 +79,8 @@ define(function (require) {
     };
 
     $scope.dashboard = {
-      title: 'Logstash Dashboard',
+      title: 'New Dashboard',
-      panels: [
+      panels: []
-        {
-          col: 1,
-          row: 1,
-          size_x: 5,
-          size_y: 2,
-          params: { type: 'line' }
-        },
-        {
-          col: 6,
-          row: 1,
-          size_x: 4,
-          size_y: 2,
-          params: { type: 'bar' }
-        },
-        {
-          col: 10,
-          row: 1,
-          size_x: 3,
-          size_y: 1,
-          params: { type: 'table' }
-        },
-        {
-          col: 10,
-          row: 2,
-          size_x: 3,
-          size_y: 1,
-          params: { type: 'pie' }
-        },
-        {
-          col: 1,
-          row: 3,
-          size_x: 3,
-          size_y: 1,
-          params: { type: 'scatter' }
-        },
-        {
-          col: 4,
-          row: 3,
-          size_x: 3,
-          size_y: 1,
-          params: { type: 'map' }
-        },
-        {
-          col: 7,
-          row: 3,
-          size_x: 3,
-          size_y: 1,
-          params: { type: 'sparkline' }
-        },
-        {
-          col: 10,
-          row: 3,
-          size_x: 3,
-          size_y: 1,
-          params: { type: 'heatmap' }
-        }
-      ]
     };
 
     $scope.configurable = {

src/kibana/controllers/kibana.js

@@ -34,7 +34,7 @@ define(function (require) {
       };
 
       $scope.configure = function () {
-        $scope.configureTemplateUrl = 'kibana/partials/global_config.html';
+        $scope.configureTemplateUrl = require('text!../partials/global_config.html');
       };
 
       /**

src/kibana/directives/config.js

@@ -14,7 +14,7 @@ define(function (require) {
    * ```
    */
 
-  module.directive('config', function () {
+  module.directive('config', function ($compile) {
     return {
       restrict: 'E',
       scope: {
@@ -25,12 +25,30 @@ define(function (require) {
       },
       link: function ($scope, element, attr) {
         $scope[attr.configObject] = $scope.configObject;
+
+        $scope.$watch('configTemplate', function (newTemplate, oldTemplate) {
+          if (_.isString($scope.configTemplate) && oldTemplate !== newTemplate) {
+
+            var template = '' +
+              '<div class="config" ng-show="configTemplate">' +
+              '  <form role="form" class="container-fluid" ng-submit="configSubmit()">' +
+                $scope.configTemplate +
+              '  </form>' +
+              '  <div class="config-close remove" ng-click="close()">' +
+              '    <i class="fa fa-chevron-up"></i>' +
+              '  </div>' +
+              '</div>' +
+              '';
+
+            element.html($compile(template)($scope));
+          }
+        });
+
         $scope.close = function () {
           if (_.isFunction($scope.configClose)) $scope.configClose();
           $scope.configTemplate = undefined;
         };
-      },
+      }
-      templateUrl: 'kibana/partials/nav_config.html'
     };
   });
 });

src/kibana/partials/nav_config.html

@@ -1,6 +1,6 @@
 <div class="config" ng-show="configTemplate">
   <form role="form" class="container-fluid" ng-submit="configSubmit()">
-    <div ng-include="configTemplate" />
+    <div ng-bind-template="{{configTemplate}}" />
   </form>
   <div class="config-close remove" ng-click="close()">
     <i class="fa fa-chevron-up" />