Skip to content

Commit

Permalink
fixing panel scrolling based on ctrl height (#22)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yesoreyeram
yesoreyeram authored Apr 11, 2018
1 parent f22e976 commit a8dd65e
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 87 deletions.
7 changes: 7 additions & 0 deletions dist/module.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/module.js.map
View file

Large diffs are not rendered by default.

89 changes: 46 additions & 43 deletions dist/partials/module.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,50 @@
<div class="boom-table">
<div data-ng-if="ctrl.panel.error">
<h4 class="text-warning">{{ctrl.panel.error.name}}</h4>
<p ng-bind-html="ctrl.panel.error.message"></p>
</div>
<div data-ng-if="!ctrl.panel.error && ctrl.panel.groupedData">
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">{{ctrl.panel.default_title_for_rows}}</th>
<th style="padding:4px;text-align:center" data-ng-repeat="col in ctrl.panel.cols">{{col}}</th>
</tr>
</thead>
<tr data-ng-repeat="data in ctrl.panel.groupedData">
<td style="padding:4px;">{{data.row}}</td>
<td style="padding:4px;background-color:{{col.bgColor}};" data-ng-repeat="col in data.cols">{{col.displayValue}}</td>
</tr>
</table>
</div>
<div data-ng-if="ctrl.panel.debug_mode === true" class="debug">
<h5 class="text-warning">WARNING: Panel running in debug mode </h5>
<div data-ng-if="ctrl.panel.data && ctrl.panel.data.length >0">
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">Metric</th>
<th style="padding:4px;text-align:center">Pattern</th>
<th style="padding:4px;text-align:center">Value</th>
<th style="padding:4px;text-align:center">Row Name</th>
<th style="padding:4px;text-align:center">Col Name</th>
<th style="padding:4px;text-align:center">Thresholds</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in ctrl.panel.data">
<td style="padding:4px;" width="40%">{{data.alias}}</td>
<td style="padding:4px;">{{data.pattern.pattern || "Default"}}</td>
<td style="padding:4px;background-color:{{data.bgColor}}">{{data.displayValue}}</td>
<td style="padding:4px;">{{data.row_name}}</td>
<td style="padding:4px;">{{data.col_name}}</td>
<td style="padding:4px;">{{data.thresholds}}</td>
<div data-ng-if="ctrl.panel.debug_mode === true" class="debug">
<h5 class="text-warning">WARNING: Panel running in debug mode </h5>
</div>
<div data-ng-if="ctrl.panel.error">
<h4 class="text-warning">{{ctrl.panel.error.name}}</h4>
<p ng-bind-html="ctrl.panel.error.message"></p>
</div>
<div data-ng-if="!ctrl.panel.error && ctrl.panel.groupedData">
<div class="table-panel-scroll" style="overflow:auto;">
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">{{ctrl.panel.default_title_for_rows}}</th>
<th style="padding:4px;text-align:center" data-ng-repeat="col in ctrl.panel.cols">{{col}}</th>
</tr>
</thead>
<tr data-ng-repeat="data in ctrl.panel.groupedData">
<td style="padding:4px;">{{data.row}}</td>
<td style="padding:4px;background-color:{{col.bgColor}};" data-ng-repeat="col in data.cols">{{col.displayValue}}</td>
</tr>
</tbody>
</table>
</table>
<div data-ng-if="ctrl.panel.debug_mode === true" class="debug">
<h5 class="text-warning">WARNING: Panel running in debug mode </h5>
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">Metric</th>
<th style="padding:4px;text-align:center">Pattern</th>
<th style="padding:4px;text-align:center">Value</th>
<th style="padding:4px;text-align:center">Row Name</th>
<th style="padding:4px;text-align:center">Col Name</th>
<th style="padding:4px;text-align:center">Thresholds</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in ctrl.panel.data">
<td style="padding:4px;" width="40%">{{data.alias}}</td>
<td style="padding:4px;">{{data.pattern.pattern || "Default"}}</td>
<td style="padding:4px;background-color:{{data.bgColor}}">{{data.displayValue}}</td>
<td style="padding:4px;">{{data.row_name}}</td>
<td style="padding:4px;">{{data.col_name}}</td>
<td style="padding:4px;">{{data.thresholds}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
9 changes: 9 additions & 0 deletions src/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ class GrafanaBoomTableCtrl extends MetricsPanelCtrl {
unitFormats: any = kbn.getUnitFormats();
valueNameOptions: Object = config.valueNameOptions;
dataReceived: any;
ctrl:any;
elem:any;
constructor($scope, $injector, $sce) {
super($scope, $injector);
_.defaults(this.panel, config.panelDefaults);
Expand Down Expand Up @@ -154,6 +156,10 @@ class GrafanaBoomTableCtrl extends MetricsPanelCtrl {
}
return text;
}
link (scope, elem, attrs, ctrl) {
this.ctrl = ctrl;
this.elem = elem;
}
}

GrafanaBoomTableCtrl.prototype.render = function () {
Expand Down Expand Up @@ -307,6 +313,9 @@ GrafanaBoomTableCtrl.prototype.render = function () {
// Assigning computed data to output panel
this.panel.data = this.dataComputed;
}
var rootElem = this.elem.find('.table-panel-scroll');
var maxheightofpanel = this.panel.debug_mode ? this.ctrl.height - 71 : this.ctrl.height - 31;
rootElem.css({ 'max-height': maxheightofpanel+ "px" });
}
};

Expand Down
89 changes: 46 additions & 43 deletions src/partials/module.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,50 @@
<div class="boom-table">
<div data-ng-if="ctrl.panel.error">
<h4 class="text-warning">{{ctrl.panel.error.name}}</h4>
<p ng-bind-html="ctrl.panel.error.message"></p>
</div>
<div data-ng-if="!ctrl.panel.error && ctrl.panel.groupedData">
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">{{ctrl.panel.default_title_for_rows}}</th>
<th style="padding:4px;text-align:center" data-ng-repeat="col in ctrl.panel.cols">{{col}}</th>
</tr>
</thead>
<tr data-ng-repeat="data in ctrl.panel.groupedData">
<td style="padding:4px;">{{data.row}}</td>
<td style="padding:4px;background-color:{{col.bgColor}};" data-ng-repeat="col in data.cols">{{col.displayValue}}</td>
</tr>
</table>
</div>
<div data-ng-if="ctrl.panel.debug_mode === true" class="debug">
<h5 class="text-warning">WARNING: Panel running in debug mode </h5>
<div data-ng-if="ctrl.panel.data && ctrl.panel.data.length >0">
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">Metric</th>
<th style="padding:4px;text-align:center">Pattern</th>
<th style="padding:4px;text-align:center">Value</th>
<th style="padding:4px;text-align:center">Row Name</th>
<th style="padding:4px;text-align:center">Col Name</th>
<th style="padding:4px;text-align:center">Thresholds</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in ctrl.panel.data">
<td style="padding:4px;" width="40%">{{data.alias}}</td>
<td style="padding:4px;">{{data.pattern.pattern || "Default"}}</td>
<td style="padding:4px;background-color:{{data.bgColor}}">{{data.displayValue}}</td>
<td style="padding:4px;">{{data.row_name}}</td>
<td style="padding:4px;">{{data.col_name}}</td>
<td style="padding:4px;">{{data.thresholds}}</td>
<div data-ng-if="ctrl.panel.debug_mode === true" class="debug">
<h5 class="text-warning">WARNING: Panel running in debug mode </h5>
</div>
<div data-ng-if="ctrl.panel.error">
<h4 class="text-warning">{{ctrl.panel.error.name}}</h4>
<p ng-bind-html="ctrl.panel.error.message"></p>
</div>
<div data-ng-if="!ctrl.panel.error && ctrl.panel.groupedData">
<div class="table-panel-scroll" style="overflow:auto;">
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">{{ctrl.panel.default_title_for_rows}}</th>
<th style="padding:4px;text-align:center" data-ng-repeat="col in ctrl.panel.cols">{{col}}</th>
</tr>
</thead>
<tr data-ng-repeat="data in ctrl.panel.groupedData">
<td style="padding:4px;">{{data.row}}</td>
<td style="padding:4px;background-color:{{col.bgColor}};" data-ng-repeat="col in data.cols">{{col.displayValue}}</td>
</tr>
</tbody>
</table>
</table>
<div data-ng-if="ctrl.panel.debug_mode === true" class="debug">
<h5 class="text-warning">WARNING: Panel running in debug mode </h5>
<table class="table-panel-table">
<thead>
<tr>
<th style="padding:4px;text-align:center">Metric</th>
<th style="padding:4px;text-align:center">Pattern</th>
<th style="padding:4px;text-align:center">Value</th>
<th style="padding:4px;text-align:center">Row Name</th>
<th style="padding:4px;text-align:center">Col Name</th>
<th style="padding:4px;text-align:center">Thresholds</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="data in ctrl.panel.data">
<td style="padding:4px;" width="40%">{{data.alias}}</td>
<td style="padding:4px;">{{data.pattern.pattern || "Default"}}</td>
<td style="padding:4px;background-color:{{data.bgColor}}">{{data.displayValue}}</td>
<td style="padding:4px;">{{data.row_name}}</td>
<td style="padding:4px;">{{data.col_name}}</td>
<td style="padding:4px;">{{data.thresholds}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

0 comments on commit a8dd65e

Please sign in to comment.