Skip to content

Commit

Permalink
Simplify kibanaPanel directive, fix css that stopped overflow:scroll …
Browse files Browse the repository at this point in the history 
…from working on the table panel
  • Loading branch information
Rashid Khan committed Apr 25, 2014
1 parent e1bdd26 commit 430d7fa
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 112 deletions.
2 changes: 1 addition & 1 deletion src/app/dashboards/default.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"rows": [
{
"title": "Intro",
"height": "450px",
"height": "700px",
"editable": false,
"collapse": false,
"collapsable": false,
Expand Down
5 changes: 3 additions & 2 deletions src/app/directives/kibanaPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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");
Expand Down
201 changes: 100 additions & 101 deletions src/app/panels/table/module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand All @@ -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>
Expand Down
18 changes: 10 additions & 8 deletions src/app/partials/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 430d7fa

Please sign in to comment.