From 430d7fad3084959f945cb9f80a2b4968947e1796 Mon Sep 17 00:00:00 2001
From: Rashid Khan <rashidkpc@gmail.com>
Date: Thu, 24 Apr 2014 17:07:44 -0700
Subject: [PATCH] Simplify kibanaPanel directive, fix css that stopped
 overflow:scroll from working on the table panel

---
 src/app/dashboards/default.json   |   2 +-
 src/app/directives/kibanaPanel.js |   5 +-
 src/app/panels/table/module.html  | 201 +++++++++++++++---------------
 src/app/partials/dashboard.html   |  18 +--
 4 files changed, 114 insertions(+), 112 deletions(-)

diff --git a/src/app/dashboards/default.json b/src/app/dashboards/default.json
index 1f38ed88ed5a4..ae9eceef1d5aa 100644
--- a/src/app/dashboards/default.json
+++ b/src/app/dashboards/default.json
@@ -24,7 +24,7 @@
   "rows": [
     {
       "title": "Intro",
-      "height": "450px",
+      "height": "700px",
       "editable": false,
       "collapse": false,
       "collapsable": false,
diff --git a/src/app/directives/kibanaPanel.js b/src/app/directives/kibanaPanel.js
index f9e7fd6718ef8..610083fb5a081 100644
--- a/src/app/directives/kibanaPanel.js
+++ b/src/app/directives/kibanaPanel.js
@@ -66,7 +66,8 @@ function (angular,$) {
         '</div>\n'+
       '</div>';
       return {
-        restrict: 'E',
+        restrict: 'A',
+        replace: true,
         link: function($scope, elem, attr) {
           // once we have the template, scan it for controllers and
           // load the module.js if we have any
@@ -83,7 +84,7 @@ function (angular,$) {
           // compile the module and uncloack. We're done
           function loadModule($module) {
             $module.appendTo(elem);
-            elem.wrap(container);
+            elem.wrapInner(container);
             /* jshint indent:false */
             $compile(elem.contents())(newScope);
             elem.removeClass("ng-cloak");
diff --git a/src/app/panels/table/module.html b/src/app/panels/table/module.html
index cfb426ad6a341..a182cf5065091 100644
--- a/src/app/panels/table/module.html
+++ b/src/app/panels/table/module.html
@@ -57,7 +57,7 @@
   <div class="table-container">
 
     <div bindonce ng-class="{'table-sidebar':panel.field_list}" ng-if="panel.field_list">
-      <div class="sidebar-nav">
+      <div style="{{panel.overflow}}:{{row.height}};overflow-y:auto">
 
         <strong>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'"></i></strong><p>
 
@@ -78,14 +78,14 @@
           in your source document.
         </div>
 
-        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="panel.all_fields">
+        <ul class="unstyled" ng-if="panel.all_fields">
           <li class="table-fieldname" ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity">
             <i class="pointer" ng-class="{'icon-check': columns[field],'icon-check-empty': _.isUndefined(columns[field])}" ng-click="toggle_field(field)"></i>
             <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: columns[field]}" bo-text="field"></a>
           </li>
         </ul>
 
-        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="!panel.all_fields">
+        <ul class="unstyled" ng-if="!panel.all_fields">
           <li class="table-fieldname"  ng-style="panel.style" ng-repeat="field in current_fields|filter:fieldFilter|orderBy:identity">
             <i class="pointer" ng-class="{'icon-check': columns[field],'icon-check-empty': _.isUndefined(columns[field])}" ng-click="toggle_field(field)"></i>
             <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: columns[field]}" bo-text="field"></a>
@@ -95,107 +95,106 @@
       </div>
     </div>
 
-    <div style="{{panel.overflow}}:{{panel.height || row.height}};" ng-class="{'table-main':panel.field_list}" class="table-doc-table">
-
-      <div class="table-facet" ng-if="modalField">
-
-
-
-        <h4>
-          <button class="btn btn-mini btn-danger" ng-click="closeFacet();">close</button>
-          {{adhocOpts.title}}
-          <span class="pointer ng-scope ng-pristine ng-valid ui-draggable" bs-tooltip="'Drag to add to dashboard'"
-            data-drag="true"
-            data-jqyoui-options="kbnJqUiDraggableOptions"
-            jqyoui-draggable="{animate:false,mutate:false,onStart:'panelMoveStart',onStop:'panelMoveStop',embedded:true}"
-            ng-model="adhocOpts"
-            data-original-title=""
-            title=""
-            aria-disabled="false" style="position: relative;"><i class="icon-move"></i></span>
-        </h4>
-        <kibana-simple-panel type="'{{facetType}}'" panel='{{facetPanel}}' ng-cloak></kibana-simple-panel>
-      </div>
-
-      <i class="pull-left icon-chevron-sign-right pointer" ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Show field list'" ng-show="!panel.field_list"></i>
-      <div class="row-fluid" ng-show="panel.paging">
-        <div class="span1 offset1" style="text-align:right">
-          <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
-          <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
+    <div ng-class="{'table-main':panel.field_list}" class="table-doc-table">
+
+      <div style="{{panel.overflow}}:{{row.height}};overflow-y:auto">
+        <div class="table-facet" ng-if="modalField">
+          <h4>
+            <button class="btn btn-mini btn-danger" ng-click="closeFacet();">close</button>
+            {{adhocOpts.title}}
+            <span class="pointer ng-scope ng-pristine ng-valid ui-draggable" bs-tooltip="'Drag to add to dashboard'"
+              data-drag="true"
+              data-jqyoui-options="kbnJqUiDraggableOptions"
+              jqyoui-draggable="{animate:false,mutate:false,onStart:'panelMoveStart',onStop:'panelMoveStop',embedded:true}"
+              ng-model="adhocOpts"
+              data-original-title=""
+              title=""
+              aria-disabled="false" style="position: relative;"><i class="icon-move"></i></span>
+          </h4>
+          <kibana-simple-panel type="'{{facetType}}'" panel='{{facetPanel}}' ng-cloak></kibana-simple-panel>
         </div>
-        <div class="span8" style="text-align:center">
-          <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
-          <small> of {{data.length}} available for paging</small>
-        </div>
-        <div class="span1" style="text-align:left">
-          <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+
+        <i class="pull-left icon-chevron-sign-right pointer" ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Show field list'" ng-show="!panel.field_list"></i>
+        <div class="row-fluid" ng-show="panel.paging">
+          <div class="span1 offset1" style="text-align:right">
+            <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
+            <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
+          </div>
+          <div class="span8" style="text-align:center">
+            <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
+            <small> of {{data.length}} available for paging</small>
+          </div>
+          <div class="span1" style="text-align:left">
+            <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+          </div>
         </div>
-      </div>
-      <table class="table-hover table table-condensed" ng-style="panel.style">
-        <thead ng-show="panel.header">
-          <th ng-show="panel.fields.length<1">_source (select columns from the list to the left)</th>
-          <th style="white-space:nowrap" ng-repeat="field in panel.fields">
-            <i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
-
-            <span  class="pointer" ng-click="set_sort(field)" ng-show='panel.sortable'>
-              {{field}}
-              <i ng-show='field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
-            </span>
-            <span ng-show='!panel.sortable'>{{field}}</span>
-            <i ng-show="!$last" class="pointer link icon-caret-right" ng-click="_.move(panel.fields,$index,$index+1)"></i>
-          </th>
-
-        </thead>
-        <tbody bindonce ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
-          <tr ng-click="toggle_details(event)" class="pointer">
-            <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
-            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields">
-              <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length" class="table-field-value"></span>
-              <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event" class="table-field-value"></span>
-            </td>
-          </tr>
-          <tr ng-if="event.kibana.details">
-            <td colspan={{panel.fields.length}} ng-switch="event.kibana.view">
-              <span>
-                View:
-                <a class="link" ng-class="{'strong':event.kibana.view == 'table'}" ng-click="event.kibana.view = 'table'">Table</a> /
-                <a class="link" ng-class="{'strong':event.kibana.view == 'json'}" ng-click="event.kibana.view = 'json'">JSON</a> /
-                <a class="link" ng-class="{'strong':event.kibana.view == 'raw'}" ng-click="event.kibana.view = 'raw'">Raw</a>
-                <i class="link pull-right icon-chevron-up" ng-click="toggle_details(event)"></i>
+        <table class="table-hover table table-condensed" ng-style="panel.style">
+          <thead ng-show="panel.header">
+            <th ng-show="panel.fields.length<1">_source (select columns from the list to the left)</th>
+            <th style="white-space:nowrap" ng-repeat="field in panel.fields">
+              <i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
+
+              <span  class="pointer" ng-click="set_sort(field)" ng-show='panel.sortable'>
+                {{field}}
+                <i ng-show='field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
               </span>
-              <table class='table table-bordered table-condensed table-details' ng-switch-when="table">
-                <thead>
-                  <th class="table-details-field">Field</th>
-                  <th class="table-details-action">Action</th>
-                  <th class="table-details-value">Value</th>
-                </thead>
-                <tr ng-repeat="(key,value) in event.kibana._source track by $index" ng-class-odd="'odd'">
-                  <td style="word-wrap:break-word" bo-text="key"></td>
-                  <td style="white-space:nowrap">
-                    <i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
-                    <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
-                    <i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
-                  </td>
-                  <!-- At some point we need to create a more efficient way of applying the filter pipeline -->
-                  <td style="white-space:pre-wrap;word-wrap:break-word" bo-html="value|noXml|urlLink|stringify"></td>
-                </tr>
-              </table>
-              <pre style="white-space:pre-wrap;word-wrap:break-word"  bo-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
-              <pre bo-html="without_kibana(event)|tableJson:1" ng-switch-when="raw"></pre>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="row-fluid" ng-show="panel.paging">
-        <div class="span1 offset3" style="text-align:right">
-          <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
-          <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
-        </div>
-        <div class="span4" style="text-align:center">
-          <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
-          <small> of {{data.length}} available for paging</small>
-        </div>
-        <div class="span1" style="text-align:left">
-          <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+              <span ng-show='!panel.sortable'>{{field}}</span>
+              <i ng-show="!$last" class="pointer link icon-caret-right" ng-click="_.move(panel.fields,$index,$index+1)"></i>
+            </th>
+
+          </thead>
+          <tbody bindonce ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
+            <tr ng-click="toggle_details(event)" class="pointer">
+              <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
+              <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields">
+                <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length" class="table-field-value"></span>
+                <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event" class="table-field-value"></span>
+              </td>
+            </tr>
+            <tr ng-if="event.kibana.details">
+              <td colspan={{panel.fields.length}} ng-switch="event.kibana.view">
+                <span>
+                  View:
+                  <a class="link" ng-class="{'strong':event.kibana.view == 'table'}" ng-click="event.kibana.view = 'table'">Table</a> /
+                  <a class="link" ng-class="{'strong':event.kibana.view == 'json'}" ng-click="event.kibana.view = 'json'">JSON</a> /
+                  <a class="link" ng-class="{'strong':event.kibana.view == 'raw'}" ng-click="event.kibana.view = 'raw'">Raw</a>
+                  <i class="link pull-right icon-chevron-up" ng-click="toggle_details(event)"></i>
+                </span>
+                <table class='table table-bordered table-condensed table-details' ng-switch-when="table">
+                  <thead>
+                    <th class="table-details-field">Field</th>
+                    <th class="table-details-action">Action</th>
+                    <th class="table-details-value">Value</th>
+                  </thead>
+                  <tr ng-repeat="(key,value) in event.kibana._source track by $index" ng-class-odd="'odd'">
+                    <td style="word-wrap:break-word" bo-text="key"></td>
+                    <td style="white-space:nowrap">
+                      <i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
+                      <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
+                      <i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
+                    </td>
+                    <!-- At some point we need to create a more efficient way of applying the filter pipeline -->
+                    <td style="white-space:pre-wrap;word-wrap:break-word" bo-html="value|noXml|urlLink|stringify"></td>
+                  </tr>
+                </table>
+                <pre style="white-space:pre-wrap;word-wrap:break-word"  bo-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
+                <pre bo-html="without_kibana(event)|tableJson:1" ng-switch-when="raw"></pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="row-fluid" ng-show="panel.paging">
+          <div class="span1 offset3" style="text-align:right">
+            <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
+            <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
+          </div>
+          <div class="span4" style="text-align:center">
+            <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
+            <small> of {{data.length}} available for paging</small>
+          </div>
+          <div class="span1" style="text-align:left">
+            <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/partials/dashboard.html b/src/app/partials/dashboard.html
index 51d970a9698ff..fbe36f10c08ce 100644
--- a/src/app/partials/dashboard.html
+++ b/src/app/partials/dashboard.html
@@ -48,16 +48,18 @@
           </div>
           <div style="padding-top:0px" ng-if="!row.collapse">
 
-            <!-- Panels -->
-            <div resizable ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':!panel.span?'100%':((panel.span/1.2)*10)+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
-
-              <!-- Content Panel -->
-              <div style="position:relative">
-                <kibana-panel type="panel.type" ng-cloak></kibana-panel>
-              </div>
+            <!-- All the panels in the row -->
+            <div
+              ng-repeat="(name, panel) in row.panels|filter:isPanel"
+              ng-cloak ng-hide="panel.hide"
+              kibana-panel type='panel.type' resizable
+              class="panel nospace" ng-class="{'dragInProgress':dashboard.panelDragging}"
+              style="position:relative"  ng-style="{'width':!panel.span?'100%':((panel.span/1.2)*10)+'%'}"
+              data-drop="true" ng-model="row.panels" data-jqyoui-options
+              jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}">
             </div>
 
-
+            <!-- A suggestion filler panel that appears when a panel is being dragged, but there is no panels in the row to drop it on -->
             <div ng-show="dashboard.panelDragging && row.panels.length == 0" class="panel panel-filler" style="" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
               <h1>Drop here to add to this row</h1>
               Or drop on top of any other panel to insert in that row