Merge pull request #14 from rashidkpc/master

Refactor into isolate scope, add params object, add add/remove. Skeleton...
elastic · Feb 26, 2014 · c4c14f1 · c4c14f1
2 parents 2a2ac4e + 9955638
commit c4c14f1
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 65 deletions.
diff --git a/src/kibana/apps/dashboard/index.html b/src/kibana/apps/dashboard/index.html
@@ -1,14 +1,17 @@
 <div ng-controller="dashboard">
   <nav class="navbar navbar-default navbar-static-top">
+    <div class="navbar-brand">
+      {{dashboard.title}}
+    </div>
+
     <ul class="nav navbar-nav pull-right">
-      <li>
-        <a class="link" ng-click="serializeGrid()"><i class="fa fa-save"></i></a>
-      </li>
+      <li><a class="link" ng-click="gridControl.addWidget()"><i class="fa fa-plus"></i></a></li>
+      <li><a class="link" ng-click="gridControl.serializeGrid()"><i class="fa fa-save"></i></a></li>
     </ul>
   </nav>
 
   <div class="container-default">
-    <ul dashboard-grid></ul>
+    <ul dashboard-grid grid="dashboard.panels" control="gridControl"></ul>
   </div>
 
 </div>
diff --git a/src/kibana/apps/dashboard/index.js b/src/kibana/apps/dashboard/index.js
@@ -11,94 +11,136 @@ define(function (require) {
   var app = angular.module('app/dashboard', []);
 
   app.controller('dashboard', function ($scope) {
-    $scope.gridSettings = {
 
+    $scope.gridControl = {};
+
+    $scope.dashboard = {
+      title: 'Logstash Dashboard',
+      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.panels = [
-      {
-        col: 1,
-        row: 1,
-        size_x: 5,
-        size_y: 2
-      },
-      {
-        col: 6,
-        row: 1,
-        size_x: 4,
-        size_y: 2
-      },
-      {
-        col: 10,
-        row: 1,
-        size_x: 3,
-        size_y: 1
-      },
-      {
-        col: 10,
-        row: 2,
-        size_x: 3,
-        size_y: 1
-      },
-      {
-        col: 1,
-        row: 3,
-        size_x: 3,
-        size_y: 1
-      },
-      {
-        col: 4,
-        row: 3,
-        size_x: 3,
-        size_y: 1
-      },
-      {
-        col: 7,
-        row: 3,
-        size_x: 3,
-        size_y: 1
-      },
-      {
-        col: 10,
-        row: 3,
-        size_x: 3,
-        size_y: 1
-      }
-    ];
 
-    $scope.serializeGrid = function () {
-      console.log($scope.gridster.serialize());
+  });
+
+  app.directive('dashboardPanel', function () {
+    return {
+      template: '<li />'
     };
   });
 
   app.directive('dashboardGrid', function () {
     return {
       restrict: 'A',
+      scope : {
+        grid: '=',
+        control: '='
+      },
       link: function ($scope, elem) {
-        var width;
+        var width, gridster;
 
         elem.addClass('gridster');
 
         width = elem.width();
 
-        $scope.gridster = elem.gridster({
+        $scope.control.serializeGrid = function () {
+          console.log(gridster.serialize());
+          return gridster.serialize();
+        };
+
+        $scope.control.addWidget = function () {
+          gridster.add_widget('<li><div class="content"></div></li>', 3, 2);
+        };
+
+        gridster = elem.gridster({
           widget_margins: [5, 5],
           widget_base_dimensions: [((width - 80) / 12), 100],
           min_cols: 12,
           max_cols: 12,
           resize: {
             enabled: true,
             stop: function (event, ui, widget) {
-              console.log(widget.height());
-              widget.children('.content').text('height: ' + widget.height() + ' / width: ' + widget.width());
+              console.log(widget.height(), widget.width());
             }
+          },
+          serialize_params: function (el, wgd) {
+            return {
+              col: wgd.col,
+              row: wgd.row,
+              size_x: wgd.size_x,
+              size_y: wgd.size_y,
+              params: el.data('params')
+            };
           }
         }).data('gridster');
 
-        _.each($scope.panels, function (panel, i) {
-          $scope.gridster.add_widget('<li><div class="content"><h1><center>' +
-            i +
-            '</center></h1></div></li>', panel.size_x, panel.size_y, panel.col, panel.row);
+        _.each($scope.grid, function (panel) {
+          console.log(panel);
+          var wgd = gridster.add_widget('<li />',
+            panel.size_x, panel.size_y, panel.col, panel.row);
+          wgd.html(panel.params.type + ' <i class="link pull-right fa fa-times remove" />');
+          wgd.data('params', panel.params);
+        });
+
+        elem.on('click', 'li i.remove', function (event) {
+          var target = event.target.parentNode;
+          gridster.remove_widget(event.target.parentNode);
         });
       }
     };