Added button to remove panels without using the row editor

src/app/controllers/all.js

@@ -1,5 +1,5 @@
 define([
   './dash',
   './dashLoader',
-  './row',
+  './row'
 ], function () {});

src/app/directives/all.js

@@ -5,5 +5,6 @@ define([
   './kibanaPanel',
   './ngBlur',
   './ngModelOnBlur',
-  './tip'
+  './tip',
+  './confirmClick'
 ], function () {});

src/app/directives/confirmClick.js

@@ -0,0 +1,26 @@
+define([
+  'angular',
+  'kbn'
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('kibana.directives');
+
+  module.directive('confirmClick', function() {
+    return {
+      restrict: 'A',
+      link: function(scope, elem, attrs) {
+        elem.bind('click', function() {
+          var message = attrs.confirmation || "Are you sure you want to do that?";
+          if (window.confirm(message)) {
+            var action = attrs.confirmClick;
+            if (action) {
+              scope.$apply(scope.$eval(action));
+            }
+          }
+        });
+      },
+    };
+  });
+});

src/app/directives/kibanaPanel.js

@@ -11,10 +11,8 @@ function (angular) {
         '<i class="icon-spinner small icon-spin icon-large panel-loading"' +
           'ng-show="panelMeta.loading == true && !panel.title"></i>' +
 
-        // Editor link
         '<span class="panelextra">' +
 
-
           '<span ng-repeat="task in panelMeta.modals" ng-show="task.show">' +
             '<span bs-modal="task.partial" class="pointer"><i ' +
               'bs-tooltip="task.description" ng-class="task.icon" class="pointer"></i></span>'+
@@ -25,6 +23,12 @@ function (angular) {
             '<i class="icon-cog pointer" bs-tooltip="\'Configure\'"></i></span>'+
           ' / </span>' +
 
+          '<span ng-show="panel.editable != false">' +
+            '<span confirm-click="row.panels = _.without(row.panels,panel)" '+
+            'confirmation="Are you sure you want to remove this {{panel.type}} panel?" class="pointer">'+
+            '<i class="icon-remove-sign pointer" bs-tooltip="\'Remove\'"></i></span>'+
+          ' / </span>' +
+
           '<span class="small strong">{{panel.type}}</span> ' +
         '</span>' +
 

src/app/partials/roweditor.html

@@ -36,7 +36,7 @@
         <tr ng-repeat="panel in row.panels">
           <td>{{panel.title}}</td>
           <td>{{panel.type}}</td>
-          <td><select ng-hide="panel.sizeable == false" 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></td>
+          <td><select ng-hide="panel.sizeable == false" class="input-mini" ng-model="panel.span" ng-options="size for size in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
           <td><i ng-click="row.panels = _.without(row.panels,panel)" class="pointer icon-remove"></i></td>
           <td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
           <td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
@@ -48,7 +48,7 @@
   <div class="row-fluid" ng-show="editor.index == 2">
     <h4>Select Panel Type</h4>
     <form class="form-inline">
-      <select class="input-medium input-append" ng-model="panel.type" ng-options="f for f in config.panel_names|stringSort"></select>
+      <select class="input-medium input-append" ng-model="panel.type" ng-options="panelType for panelType in config.panel_names|stringSort"></select>
       <small ng-show="rowSpan(row) > 11">
         Note: This row is full, new panels will wrap to a new line. You should add another row.
       </small>