Added panelMeta object for extra panel details, moved add panel button, tweaked editors

13fc14ff · Rashid Khan · 34f8c88c · 13fc14ff · 13fc14ff · 13fc14ff
Commit 13fc14ff authored Jul 25, 2013 by Rashid Khan
25 changed files
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -18,6 +18,7 @@ module.exports = function (grunt) {
      files: ['Gruntfile.js', 'js/*.js', 'panels/*/*.js' ],
      options: {
        bitwise: true,
+        maxlen: 140,
        curly: true,
        eqeqeq: true,
        immed: true,

--- a/js/controllers.js
+++ b/js/controllers.js
@@ -129,6 +129,7 @@ angular.module('kibana.controllers', [])
  };
  $scope.reset_panel = function() {
    $scope.panel = {
      loading : false,
      error   : false,

--- a/js/directives.js
+++ b/js/directives.js
@@ -8,8 +8,9 @@ angular.module('kibana.directives', [])
    restrict: 'E',
    link: function(scope, elem, attrs) {
      var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true">'+
-        ' <span class="editlink panelextra pointer" style="right:15px;top:0px" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
+        ' <span class="editlink panelextra pointer" style="right:15px;top:0px" ' + 
-          '<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+
+        'bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
+        '<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+
        '</span><h4>{{panel.title}}</h4>';
      elem.prepend($compile(angular.element(template))(scope));
    }
@@ -21,7 +22,10 @@ angular.module('kibana.directives', [])
    link: function(scope, elem, attrs) {
      scope.$watch('panel.type', function(n,o) {
        if(!_.isUndefined(scope.panel.type)) {
-          var template = '<div ng-controller="'+scope.panel.type+'" ng-include src="\''+scope.edit_path(scope.panel.type)+'\'"></div>';
+          var template = '<div>'+
+          '<div ng-controller="'+scope.panel.type+'" ng-include src="\'partials/panelgeneral.html\'"></div>'+
+          '<div ng-controller="'+scope.panel.type+'" ng-include src="\''+scope.edit_path(scope.panel.type)+'\'">'+
+          '</div>';
          elem.html($compile(angular.element(template))(scope));
        }
      });

--- a/panels/bettermap/editor.html
+++ b/panels/bettermap/editor.html
-  <div class="row-fluid">
-    <div class="span11">
-    This panel uses geoJSON points in a field to place markers on a map. 
-    Coordinates <strong>must be stored as an array in Elasticsearch</strong>. 
-    Also note that geoJSON is <strong>long,lat NOT lat,long</strong>.
-    </div>
-  </div>
  <div class="row-fluid">    
    <div class="span4">
      <form>
-        <h6>Coordinate Field</h6>
+        <h6>Coordinate Field <i class="icon-question-sign" bs-tooltip="'geoJSON array! Long,Lat NOT Lat,Long'"></i></h6>
        <input  bs-typeahead="fields.list" type="text" class="input-small" ng-model="panel.field">
      </form>
    </div>

--- a/panels/bettermap/module.js
+++ b/panels/bettermap/module.js
@@ -5,10 +5,6 @@
  ## Better maps
-  So the cavaet for this panel is that, for better or worse, it does NOT use the terms facet and it
-  DOES query sequentially. This however means that it transfer more data and is generally heavier
-  to computer, while showing less actual data
  ### Parameters
  * size :: How many results to show, more results = slower
  * field :: field containing a 2 element array in the format [lon,lat]
@@ -21,9 +17,17 @@
 angular.module('kibana.bettermap', [])
 .controller('bettermap', function($scope, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Experimental",
+    description : "Displays geo points in clustered groups on a map. The cavaet for this panel is"+
+      " that, for better or worse, it does NOT use the terms facet and it <b>does</b> query "+
+      "sequentially. This however means that it transfers more data and is generally heavier to"+
+      " compute, while showing less actual data. If you have a time filter, it will attempt to"+
+      " show to most recent points in your search, up to your defined limit"
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Experimental",
    queries     : {
      mode        : 'all',
      ids         : []
@@ -31,8 +35,7 @@ angular.module('kibana.bettermap', [])
    size    : 1000,
    spyable : true,
    tooltip : "_id",
-    field   : null,
+    field   : null
-    group   : "default"
  };
  _.defaults($scope.panel,_d);

--- a/panels/column/module.js
+++ b/panels/column/module.js
@@ -4,10 +4,6 @@
  ## Column
-  The column panel is sort of a hack to allow you to put multiple, veritcal, 
-  panels next to a bigger panel. Note that it has no group, and setting a group
-  for the panel itself will do nothing
  ### Parameters
  * panels :: an array of panel objects. All of their spans should be set to 12
@@ -17,9 +13,15 @@
 angular.module('kibana.column', [])
 .controller('column', function($scope, $rootScope, $timeout) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "A pseudo panel that lets you add other panels to be arranged in a column with"+
+      "defined heights."
+  };
  // Set and populate defaults
  var _d = {
-    status: "Stable",
    panels : []
  };
  _.defaults($scope.panel,_d);

--- a/panels/dashcontrol/module.js
+++ b/panels/dashcontrol/module.js
@@ -5,10 +5,6 @@
  ## Dashcontrol
-  Dash control allows for saving, loading and sharing of dashboards. Do not
-  disable the dashcontrol module as a special instance of it allows for loading
-  the default dashboard from dashboards/default
  ### Parameters
  * save
  ** gist :: Allow saving to gist. Requires registering an oauth domain with Github
@@ -30,11 +26,14 @@
 angular.module('kibana.dashcontrol', [])
 .controller('dashcontrol', function($scope, $http, timer, dashboard) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "This panel allows for saving, loading, exporting and sharing dashboard schemas."
+  };
  $scope.panel = $scope.panel || {};
  // Set and populate defaults
  var _d = {
-    status  : "Stable",
-    group   : "default",
    save : {
      gist: false,
      elasticsearch: true,
@@ -138,7 +137,8 @@ angular.module('kibana.dashcontrol', [])
      function(link) {
      if(!_.isUndefined(link)) {
        $scope.gist.last = link;
-        $scope.alert('Gist saved','You will be able to access your exported dashboard file at <a href="'+link+'">'+link+'</a> in a moment','success');
+        $scope.alert('Gist saved','You will be able to access your exported dashboard file at '+
+          '<a href="'+link+'">'+link+'</a> in a moment','success');
      } else {
        $scope.alert('Save failed','Gist could not be saved','error',5000);
      }

--- a/panels/derivequeries/editor.html
+++ b/panels/derivequeries/editor.html
@@ -17,10 +17,4 @@
      <input array-join type="text" style="width:90%" ng-change="set_refresh(true)" ng-model='panel.exclude'></input>
    </div>
  </div>
-  <div class="row-fluid">    
-    <div class="span12">
-      The derive queries panel takes a query and a field, runs a terms facet, then creates queries based on them. For example, you might want to see a histogram of the top 5 requests that return a 404. <strong>You should be careful not to select a high cardinality field</strong> as Elasticsearch must load all of these values into memory.<p>
-      Query Mode allows to optionally append original query to each term in the list.
-    </div>
-  </div>
 </div>
--- a/panels/derivequeries/module.js
+++ b/panels/derivequeries/module.js
@@ -4,8 +4,6 @@
  ## Derivequeries
-  Broadcasts an array of queries based on the results of a terms facet
  ### Parameters
  * label :: The label to stick over the field 
  * query :: A string to use as a filter for the terms facet
@@ -21,14 +19,21 @@
 angular.module('kibana.derivequeries', [])
 .controller('derivequeries', function($scope, $rootScope, querySrv, fields, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Experimental",
+    description : "Creates a new set of queries using the Elasticsearch terms facet. For example,"+
+     " you might want to create 5 queries showing the most frequent HTTP response codes. Be "+
+     "careful not to select a high cardinality field, as Elasticsearch must load all unique values"+
+     " into memory."
+  };
  // Set and populate defaults
  var _d = {
    loading : false,
-    status  : "Beta",
    label   : "Search",
    query   : "*",
    ids     : [],
-    group   : "default",
    field   : '_type',
    fields  : [],
    spyable : true,

--- a/panels/fields/module.js
+++ b/panels/fields/module.js
@@ -5,8 +5,6 @@
  ## Fields
-  Allows for enabling and disabling of fields in the table panel as well as a 
-  micro anaylsis panel for analyzing the events in the table panel
  ### Parameters
  * style :: a hash containing css styles
@@ -26,9 +24,16 @@
 angular.module('kibana.fields', [])
 .controller('fields', function($scope, eventBus, $timeout, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Deprecating Soon",
+    description : "Allows for enabling and disabling of fields in the table panel as well as a "+
+      "micro anaylsis panel for analyzing the events in the table panel. This panel will soon be"+
+      "combined with the table panel"
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Beta",
    group   : "default",
    style   : {},
    arrange : 'vertical',

--- a/panels/filtering/module.js
+++ b/panels/filtering/module.js
@@ -4,8 +4,6 @@
  ## filtering
-  An experimental for interacting with the filter service
 */
 'use strict';
@@ -13,9 +11,14 @@
 angular.module('kibana.filtering', [])
 .controller('filtering', function($scope, filterSrv, $rootScope, dashboard) {
+  $scope.panelMeta = {
+    status  : "Beta",
+    description : "A controllable list of all filters currently applied to the dashboard. You "+
+      "almost certainly want one of these on your dashboard somewhere."
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Beta"
  };
  _.defaults($scope.panel,_d);

--- a/panels/histogram/module.js
+++ b/panels/histogram/module.js
@@ -5,10 +5,6 @@
  ## Histogram
-  A bucketted time series representation of the current query or queries. Note that this
-  panel uses facetting. I tried to make it safe by using sequential/serial querying but,
-  yeah, you should know that it uses facetting. It should be pretty safe.
  ### Parameters
  * auto_int :: Auto calculate data point interval?
  * resolution ::  If auto_int is enables, shoot for this many data points, rounding to
@@ -40,9 +36,15 @@
 angular.module('kibana.histogram', [])
 .controller('histogram', function($scope, eventBus, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "A bucketed time series chart of the current query or queries. Uses the "+
+      "Elasticsearch date_histogram facet. If using time stamped indices this panel will query"+
+      " them sequentially to attempt to apply the lighest possible load to your Elasticsearch cluster"
+  };
  // Set and populate defaults
  var _d = {
-    status      : "Stable",
    mode        : 'count',
    time_field  : '@timestamp',
    queries     : {

--- a/panels/hits/module.js
+++ b/panels/hits/module.js
@@ -5,8 +5,6 @@
  ## Hits
-  A variety of representations of the hits a query matches
  ### Parameters
  * style :: A hash of css styles
  * arrangement :: How should I arrange the query results? 'horizontal' or 'vertical'
@@ -22,9 +20,14 @@
 angular.module('kibana.hits', [])
 .controller('hits', function($scope, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "The total hits for a query or set of queries. Can be a pie chart, bar chart, "+
+      "list, or absolute total of all queries combined"
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Beta",
    queries     : {
      mode        : 'all',
      ids         : []
@@ -219,7 +222,8 @@ angular.module('kibana.hits', [])
                      show: scope.panel.labels,
                      radius: 2/3,
                      formatter: function(label, series){
-                        return '<div ng-click="build_search(panel.query.field,\''+label+'\') "style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
+                        return '<div ng-click="build_search(panel.query.field,\''+label+'\')'+
+                          ' "style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
                          label+'<br/>'+Math.round(series.percent)+'%</div>';
                      },
                      threshold: 0.1 

--- a/panels/map/editor.html
+++ b/panels/map/editor.html
@@ -21,9 +21,4 @@
    <div class="span2"> 
      <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
    </div>
-    <div class="span9 small">
-      The panel spy shows 'behind the scenes' information about a panel. It can
-      be accessed by clicking the <i class='icon-eye-open'></i> in the top right
-      of the panel.
-    </div>
  </div>
--- a/panels/map/module.js
+++ b/panels/map/module.js
@@ -5,12 +5,6 @@
  ## Map
-  LOL. Should this even be documented? Zach's map panel is going to ruin this one. 
-  For serious. This shades a map of the world, the US or Europe with the number of 
-  events that match the query. Uses 2 letter country codes and nothing else. This uses
-  a terms facet. Its probably safe as long as you point it at the right field. Nach.
-  There's no way to query sequentially here, so I'm going to hit them all at once!
  ### Parameters
  * map :: 'world', 'us' or 'europe'
  * colors :: an array of colors to use for the regions of the map. If this is a 2 
@@ -28,9 +22,15 @@
 angular.module('kibana.map', [])
 .controller('map', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "Displays a map of shaded regions using a field containing a 2 letter country "+
+     ", or US state, code. Regions with more hit are shaded darker. Node that this does use the"+
+     " Elasticsearch terms facet, so it is important that you set it to the correct field."
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Beta",
    queries     : {
      mode        : 'all',
      ids         : []

--- a/panels/pie/module.js
+++ b/panels/pie/module.js
@@ -4,12 +4,6 @@
  ## Pie
-  This panel is probably going away. For now its has 2 modes: 
-    * terms: Run a terms facet on the query. You're gonna have a bad (ES crashing) day
-    if you run in this mode on a high cardinality field
-    * goal: Compare the query to this number and display the percentage that the query
-    represents
  ### Parameters
  * query :: An object with 2 possible parameters depends on the mode:
  ** field: Fields to run a terms facet on. Only does anything in terms mode
@@ -30,9 +24,15 @@
 angular.module('kibana.pie', [])
 .controller('pie', function($scope, $rootScope, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Deprecating Soon",
+    description : "Uses an Elasticsearch terms facet to create a pie chart. You should really only"+
+      " point this at not_analyzed fields for that reason. This panel is going away soon, to be"+
+      " replaced with a panel that can represent a terms facet in a variety of ways."
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Deprecating Soon",
    query   : { field:"_type", goal: 100}, 
    queries     : {
      mode        : 'all',
@@ -45,7 +45,6 @@ angular.module('kibana.pie', [])
    legend  : "above",
    labels  : true,
    mode    : "terms",
-    group   : "default",
    default_field : 'DEFAULT',
    spyable : true,
  };
@@ -291,7 +290,8 @@ angular.module('kibana.pie', [])
      elem.bind("plothover", function (event, pos, item) {
        if (item) {
          var percent = parseFloat(item.series.percent).toFixed(1) + "%";
-          tt(pos.pageX, pos.pageY, "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> " + 
+          tt(pos.pageX, pos.pageY, "<div "+"style='vertical-align:middle;display:inline-block;"+
+            "background:"+item.series.color+";height:15px;width:15px;border-radius:10px;'></div> "+
            (item.series.label||"")+ " " + percent);
        } else {
          $("#pie-tooltip").remove();

--- a/panels/query/module.js
+++ b/panels/query/module.js
@@ -4,8 +4,6 @@
  ## query
-  An experimental panel for the query service
  ### Parameters
  * label ::  The label to stick over the field 
  * query ::  A string or an array of querys. String if multi is off, array if it is on
@@ -18,13 +16,17 @@
 angular.module('kibana.query', [])
 .controller('query', function($scope, querySrv, $rootScope) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "Manage all of the queries on the dashboard. You almost certainly need one of "+
+      "these somewhere. This panel allows you to add, remove, label, pin and color queries"
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Beta",
    label   : "Search",
    query   : "*",
    pinned  : true,
-    group   : "default",
    history : [],
    remember: 10 // max: 100, angular strap can't take a variable for items param
  };

--- a/panels/table/module.js
+++ b/panels/table/module.js
@@ -4,8 +4,6 @@
  ## Table
-  A paginated table of events matching a query
  ### Parameters
  * size :: Number of events per page to show
  * pages :: Number of pages to show. size * pages = number of cached events. 
@@ -31,6 +29,12 @@
 angular.module('kibana.table', [])
 .controller('table', function($rootScope, $scope, eventBus, fields, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status: "Stable",
+    description: "A paginated table of records matching your query or queries. Click on a row to "+
+      "expand it and review all of the fields associated with that document. <p>"
+  };
  // Set and populate defaults
  var _d = {
    status  : "Stable",

--- a/panels/text/module.js
+++ b/panels/text/module.js
@@ -5,8 +5,6 @@
  ## Text
-  A simple panel of static content
  ### Parameters
  * mode :: 'text', 'html', 'markdown'
  * content :: Content of the panel
@@ -19,10 +17,15 @@
 angular.module('kibana.text', [])
 .controller('text', function($scope, $rootScope) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
+  };
  // Set and populate defaults
  var _d = {
    status  : "Stable",
-    group   : "default",
    mode    : "markdown",
    content : "",
    style: {},

--- a/panels/timepicker/module.js
+++ b/panels/timepicker/module.js
@@ -4,10 +4,6 @@
  ## Timepicker
-  The timepicker panel is used to select time ranges and inform other panel of 
-  them. It also handles searching for indices that match the given time range and 
-  a pattern
  ### Parameters
  * mode :: The default mode of the panel. Options: 'relative', 'absolute' 'since' Default: 'relative'
  * time_options :: An array of possible time options. Default: ['5m','15m','1h','6h','12h','24h','2d','7d','30d']
@@ -24,6 +20,13 @@
 angular.module('kibana.timepicker', [])
 .controller('timepicker', function($scope, $rootScope, $timeout, timer, $http, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Stable",
+    description : "A panel for controlling the time range filters. If you have time based data, "+
+      " or if you're using time stamped indices, you need one of these"
+  };
  // Set and populate defaults
  var _d = {
    status        : "Stable",
@@ -32,7 +35,6 @@ angular.module('kibana.timepicker', [])
    timespan      : '15m',
    timefield     : '@timestamp',
    timeformat    : "",
-    group         : "default",
    refresh       : {
      enable  : false, 
      interval: 30,

--- a/panels/trends/module.js
+++ b/panels/trends/module.js
@@ -4,8 +4,6 @@
  ## Trends
-  Shows how queries are moving from a specified time ago
  ### Parameters
  * style :: A hash of css styles
  * arrangement :: How should I arrange the query results? 'horizontal' or 'vertical'
@@ -18,14 +16,21 @@
 angular.module('kibana.trends', [])
 .controller('trends', function($scope, kbnIndex, querySrv, dashboard, filterSrv) {
+  $scope.panelMeta = {
+    status  : "Beta",
+    description : "A stock-ticker style representation of how queries are moving over time. "+
+    "For example, if the time is 1:10pm, your time picker was set to \"Last 10m\", and the \"Time "+
+    "Ago\" parameter was set to '1h', the panel would show how much the query results have changed"+
+    " since 12:00-12:10pm"
+  };
  // Set and populate defaults
  var _d = {
-    status  : "Beta",
    queries     : {
      mode        : 'all',
      ids         : []
    },
-    group   : "default",
    style   : { "font-size": '14pt'},
    ago     : '1d',
    arrangement : 'vertical',

--- a/partials/dasheditor.html
+++ b/partials/dasheditor.html
@@ -89,5 +89,5 @@
  </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
+  <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
 </div>
\ No newline at end of file
--- a/partials/paneleditor.html
+++ b/partials/paneleditor.html
 <div class="modal-body" >
-  <div class="pull-right editor-title"><small>({{panel.status}})</small> {{panel.type}} settings</div>
+  <div class="pull-right editor-title">{{panel.type}} settings</div>
  <div ng-model="editor.index" bs-tabs>
    <div ng-repeat="tab in ['General','Panel']" data-title="{{tab}}">
@@ -16,5 +16,5 @@
 </div>
 <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;close_edit();dismiss()">Close</button>
+  <button type="button" class="btn btn-danger" ng-click="editor.index=0;close_edit();dismiss()">Close</button>
 </div>
\ No newline at end of file
--- a/partials/panelgeneral.html
+++ b/partials/panelgeneral.html
  <div class="row-fluid">
+    <div class="span12">
+      <strong>{{panelMeta.status}}</strong> // <span ng-bind-html="panelMeta.description"></span>
+    </div>
+  </div>
+  <div class="row-fluid">
    <div class="span4">
      <label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
    </div>
    <div class="span2" ng-hide="panel.sizeable == false">
      <label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
    </div>
-    <div class="span1"> 
+    <div class="span2"> 
      <label class="small">Editable</label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
    </div>
  </div>
\ No newline at end of file
--- a/partials/roweditor.html
+++ b/partials/roweditor.html
@@ -2,7 +2,7 @@
  <div class="pull-right editor-title">Row settings</div>
  <div ng-model="editor.index" bs-tabs>
-    <div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
+    <div ng-repeat="tab in ['General','Panels','Add Panel']" data-title="{{tab}}">
    </div>
  </div>
@@ -21,18 +21,6 @@
    </div>
  </div>
  <div class="row-fluid" ng-show="editor.index == 1">
-    <h4>New Panel</h4>
-    <form class="input-append">
-    <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select>
-    <small ng-show="!panel.type">Select Type</small> <button ng-show="panel.type" ng-click="add_panel(row,panel); reset_panel();" class="btn btn-success ">Add <i class="icon-plus"></i></button></form>
-    <div ng-show="!(_.isUndefined(panel.type))">
-      <div ng-include src="'partials/panelgeneral.html'"></div>
-      <div add-panel="{{panel.type}}"></div>
-    </div>
-  </div>
-  <div class="row-fluid" ng-show="editor.index == 1">
    <div class="span12">
      <h4>Panels</h4>
      <table class="table table-condensed table-striped">
@@ -57,7 +45,18 @@
      </table>
    </div>
  </div>
+  <div class="row-fluid" ng-show="editor.index == 2">
+    <h4>Select Panel Type</h4>
+    <form class="input-append">
+    <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select>
+    <small ng-show="!panel.type">Select Type</small></form>
+    <div ng-show="!(_.isUndefined(panel.type))">
+      <div add-panel="{{panel.type}}"></div>
+    </div>
+  </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
+  <button ng-show="panel.type && editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index == 1;" class="btn btn-success ">Add Panel</button>
+  <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
 </div>
\ No newline at end of file