Move default panel components to directive

src/kibana/apps/dashboard/index.html

@@ -16,4 +16,4 @@
     <ul dashboard-grid grid="dashboard.panels" control="gridControl"></ul>
   </div>
 
-</div>
+</div>

src/kibana/apps/dashboard/index.js

@@ -16,7 +16,7 @@ define(function (require) {
 
     // Passed in the grid attr to the directive so we can access the directive's function from
     // the controller and view
-    $scope.gridControl = {};
+    $scope.gridControl = {foo: true};
 
     $scope.save = function (title) {
       var doc = courier.createSource('doc')
@@ -116,11 +116,18 @@ define(function (require) {
 
   app.directive('dashboardPanel', function () {
     return {
-      template: '<li />'
+      restrict: 'E',
+      scope: {
+        params: '@'
+      },
+      compile: function (elem, attrs) {
+        var params = JSON.parse(attrs.params);
+        elem.replaceWith(params.type + '<i class="link pull-right fa fa-times remove" />');
+      }
     };
   });
 
-  app.directive('dashboardGrid', function () {
+  app.directive('dashboardGrid', function ($compile) {
     return {
       restrict: 'A',
       scope : {
@@ -130,6 +137,10 @@ define(function (require) {
       link: function ($scope, elem) {
         var width, gridster;
 
+        if (_.isUndefined($scope.control) || _.isUndefined($scope.grid)) {
+          return;
+        }
+
         elem.addClass('gridster');
 
         width = elem.width();
@@ -159,33 +170,41 @@ define(function (require) {
 
           elem.on('click', 'li i.remove', function (event) {
             var target = event.target.parentNode;
-            gridster.remove_widget(event.target.parentNode.parentNode);
+            gridster.remove_widget(event.target.parentNode);
           });
 
           $scope.control.unserializeGrid($scope.grid);
         };
 
+        $scope.control.clearGrid = function (cb) {
+          gridster.remove_all_widgets(cb);
+        };
+
         $scope.control.unserializeGrid = function (grid) {
           _.each(grid, function (panel) {
-            var wgd = gridster.add_widget('<li><div class="content"></div></li>',
-              panel.size_x, panel.size_y, panel.col, panel.row);
-            wgd.children('.content').html('<beer></beer>');
-            //panel.params.type + ' <i class="link pull-right fa fa-times remove" />''
-            wgd.data('params', panel.params);
+            $scope.control.addWidget(panel);
           });
         };
 
-        $scope.control.clearGrid = function (cb) {
-          gridster.remove_all_widgets(cb);
-        };
-
         $scope.control.serializeGrid = function () {
           console.log(gridster.serialize());
           return gridster.serialize();
         };
 
-        $scope.control.addWidget = function (params) {
-          gridster.add_widget('<li><div class="content"></div></li>', 3, 2);
+        $scope.control.addWidget = function (panel) {
+          panel = panel || {};
+          _.defaults(panel, {
+            size_x: 3,
+            size_y: 2,
+            params: {
+              type: 'new'
+            }
+          });
+          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) + '\' />');
+          wgd.data('params', panel.params);
+          $compile(wgd)($scope);
         };
 
         // Start the directive

src/kibana/apps/dashboard/styles/main.css

@@ -345,17 +345,17 @@ div.application div.dashboard-container {
   width: 100%;
   background-color: #1e6d74;
 }
-.gridster {
+[dashboard-grid].gridster {
   list-style-type: none;
   display: block;
   background-color: #1e6d74;
-  padding-bottom: 50px;
+  margin-bottom: 0;
 }
-.gridster .preview-holder {
+[dashboard-grid].gridster .preview-holder {
   border: none!important;
   background: #999999 !important;
 }
-.gridster li.gs-w {
+[dashboard-grid].gridster li.gs-w {
   background: #fff;
   padding: 5px;
   color: #1e6d74;
@@ -364,6 +364,6 @@ div.application div.dashboard-container {
   padding: 10px;
   overflow: hidden;
 }
-ul.gridster {
-  margin-bottom: 0;
+[dashboard-grid] i.remove {
+  cursor: pointer;
 }

src/kibana/apps/dashboard/styles/main.less

@@ -12,19 +12,19 @@ div.application div.dashboard-container {
   background-color: @dashboard-background;
 }
 
-.gridster {
+[dashboard-grid].gridster {
   list-style-type: none;
   display: block;
   background-color: @dashboard-background;
-  padding-bottom:50px;
+  margin-bottom: 0;
 }
 
-.gridster .preview-holder {
+[dashboard-grid].gridster .preview-holder {
     border: none!important;
     background: @gray-light!important;
 }
 
-.gridster li.gs-w {
+[dashboard-grid].gridster li.gs-w {
   background: #fff;
   padding: 5px;
   color: @dashboard-background;
@@ -34,6 +34,6 @@ div.application div.dashboard-container {
   overflow: hidden;
 }
 
-ul.gridster {
-  margin-bottom: 0;
+[dashboard-grid] i.remove {
+  cursor: pointer;
 }