Merge pull request #16 from rashidkpc/master

Add config directive

src/kibana/apps/dashboard/index.html

@@ -4,13 +4,13 @@
       {{dashboard.title}}
     </div>
 
-    <ul class="nav navbar-nav pull-right">
+    <ul class="nav navbar-nav">
       <li><a class="link" ng-click="gridControl.addWidget()"><i class="fa fa-plus"></i></a></li>
-      <li><a class="link" ng-click="save(dashboard.title)"><i class="fa fa-save"></i></a></li>
-      <li><a class="link" ng-click="load(dashboard.title)"><i class="fa fa-folder-open"></i></a></li>
-
+      <li><a class="link" ng-click="openSave()"><i class="fa fa-save"></i></a></li>
+      <li><a class="link" ng-click="openLoad()"><i class="fa fa-folder-open"></i></a></li>
     </ul>
   </nav>
+  <config config-template="configTemplate" config-object="configurable" config-close="configClose" config-submit="configSubmit"></config>
 
   <div class="container-default">
     <ul dashboard-grid grid="dashboard.panels" control="gridControl"></ul>

src/kibana/apps/dashboard/index.js

@@ -7,17 +7,37 @@ define(function (require) {
 
   require('css!./styles/main.css');
   require('css!../../../bower_components/gridster/dist/jquery.gridster.css');
+  require('directives/config');
   require('gridster');
 
 
-  var app = angular.module('app/dashboard', []);
+  var app = angular.module('app/dashboard');
 
   app.controller('dashboard', function ($scope, courier) {
 
+    $scope.$broadcast('application.load');
+
     // Passed in the grid attr to the directive so we can access the directive's function from
     // the controller and view
     $scope.gridControl = {foo: true};
 
+    $scope.openSave = function () {
+      $scope.configTemplate = 'kibana/apps/dashboard/partials/saveDashboard.html';
+      $scope.configClose = function () {
+        console.log('SAVE close');
+      };
+      $scope.configSubmit = function () {
+        $scope.save($scope.dashboard.title);
+      };
+    };
+
+    $scope.openLoad = function () {
+      $scope.configTemplate = 'kibana/apps/dashboard/partials/loadDashboard.html';
+      $scope.configClose = function () {
+        console.log('LOAD close');
+      };
+    };
+
     $scope.save = function (title) {
       var doc = courier.createSource('doc')
         .index(configFile.kibanaIndex)
@@ -111,6 +131,10 @@ define(function (require) {
       ]
     };
 
+    $scope.configurable = {
+      dashboard: $scope.dashboard,
+    };
+
 
   });
 

src/kibana/apps/dashboard/partials/loadDashboard.html

@@ -0,0 +1,5 @@
+<div class="form-group">
+  <label for="exampleInputEmail1">Load</label>
+  <input type="text" ng-model="configObject.dashboard.title" class="form-control" placeholder="Dashboard title">
+</div>
+<button type="submit" class="btn btn-default">Load</button>

src/kibana/apps/dashboard/partials/saveDashboard.html

@@ -0,0 +1,5 @@
+<div class="form-group">
+  <label for="exampleInputEmail1">Save As</label>
+  <input type="text" ng-model="configObject.dashboard.title" class="form-control" placeholder="Dashboard title">
+</div>
+<button type="submit" class="btn btn-primary">Save</button>

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

@@ -1,4 +1,4 @@
-@import "../../../../bower_components/bootstrap/less/variables.less";
+@import "../../../../bower_components/bootstrap/less/bootstrap.less";
 @import "../../../../bower_components/bootstrap/less/theme.less";
 
 @dashboard-background: #1E6D74;
@@ -36,4 +36,11 @@ div.application div.dashboard-container {
 
 [dashboard-grid] i.remove {
   cursor: pointer;
+}
+
+.config {
+  .navbar;
+  .navbar-default;
+  .navbar-static-top;
+  padding: 10px 15px;
 }

src/kibana/directives/config.js

@@ -0,0 +1,35 @@
+define(function (require) {
+  var html = require('text!partials/table.html');
+  var angular = require('angular');
+  var _ = require('lodash');
+
+  var module = angular.module('kibana/directives');
+
+  /**
+   * config directive
+   *
+   * Creates a full width horizonal config section, usually under a nav/subnav.
+   * ```
+   * <config config-template="configTemplate" config-object="configurable"></config>
+   * ```
+   */
+
+  module.directive('config', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        configTemplate: '=',
+        configClose: '=',
+        configSubmit: '=',
+        configObject: '='
+      },
+      link: function ($scope) {
+        $scope.close = function () {
+          if (_.isFunction($scope.configClose)) $scope.configClose();
+          $scope.configTemplate = undefined;
+        };
+      },
+      templateUrl: 'kibana/partials/navConfig.html'
+    };
+  });
+});

src/kibana/partials/navConfig.html

@@ -0,0 +1,6 @@
+<div class="config" ng-show="configTemplate">
+  <i class="pull-right fa fa-times remove" ng-click="close()" />
+  <form role="form" ng-submit="configSubmit()">
+    <div ng-include="configTemplate" />
+  </form>
+</div>