Row filtering, view mode accessibility dependant on row count and refresh time

This commit is contained in:
Rashid Khan 2014-01-07 14:29:34 -07:00
parent ff2b9ec393
commit ba459389d1
2 changed files with 33 additions and 9 deletions

View file

@ -35,14 +35,15 @@
</style>
<div class="pull-left marvel-header marvel-table" ng-show="rows.length > 0">
<span class="count">{{rows.length}} {{panel.mode}}</span> / Last 10m </span>
<input type="text" class="input-medium" placeholder="Filter {{panel.mode}}..." ng-model="panel.rowFilter"> <span class="count">{{(rows|filter:panel.rowFilter).length}} {{panel.mode}}</span> / Last 10m </span>
</div>
<!--<div class="pull-right">
<div class="pull-right" ng-if="viewSelect">
<a href="" ng-class="{strong:!panel.compact}" ng-click="panel.compact=false">Full</a> /
<a href="" ng-class="{strong:panel.compact}" ng-click="panel.compact=true">Compact</a>
</div>-->
</div>
<table bindonce class="table table-bordered" ng-if="rows.length < 10">
<!-- full view -->
<table bindonce class="table table-bordered" ng-if="!panel.compact">
<thead>
<th class="pointer" ng-click="set_sort('__name__')">
{{panel.mode}}
@ -55,7 +56,7 @@
<i ng-show='metric.field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
</th>
</thead>
<tr ng-repeat="row in rows | orderBy:get_sort_value:panel.sort[1]=='desc'">
<tr ng-repeat="row in rows | filter:panel.rowFilter | orderBy:get_sort_value:panel.sort[1]=='desc'">
<td>
<div class="checkbox">
<label>
@ -80,7 +81,8 @@
</tr>
</table>
<table bindonce class="table table-bordered table-condensed marvel-table" ng-if="rows.length >= 10">
<!-- compact view -->
<table bindonce class="table table-bordered table-condensed marvel-table" ng-if="panel.compact">
<thead>
<th class="pointer" ng-click="set_sort('__name__')">
{{panel.mode}}
@ -93,7 +95,7 @@
<i ng-show='metric.field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
</th>
</thead>
<tr ng-repeat="row in rows | orderBy:get_sort_value:panel.sort[1]=='desc'">
<tr ng-repeat="row in rows | filter:panel.rowFilter | orderBy:get_sort_value:panel.sort[1]=='desc'">
<td>
<div class="checkbox">
<label>
@ -106,7 +108,7 @@
<div class="pointer" ng-click="rowClick(row,metric)">
<span bo-text='data[row.id+"_"+metric.field].mean | metric_format:metric'></span>
<!--<div class="marvel-stats-sparkline pointer" ng-click="rowClick(row,metric)" panel='panel' field="metric.field" series="data[row.id+'_'+metric.field+'_history'].series"></div>-->
<div ng-if="sparkLines" class="marvel-stats-sparkline pointer" ng-click="rowClick(row,metric)" panel='panel' field="metric.field" series="data[row.id+'_'+metric.field+'_history'].series"></div>
</div>
</td>
</tr>

View file

@ -182,7 +182,6 @@ define([
return metricDefaults(m);
});
$scope.$watch('panel.mode', function (m) {
if (_.isUndefined(m)) {
return;
@ -195,11 +194,26 @@ define([
_.throttle($scope.get_rows(), 500);
});
$scope.$watch('(rows|filter:panel.rowFilter).length', function(l) {
//Compute view based on number of rows
if(l > 5 && kbn.interval_to_seconds(dashboard.current.refresh) < 120) {
$scope.panel.compact = true;
$scope.sparkLines = false;
$scope.viewSelect = false;
} else {
$scope.viewSelect = true;
$scope.sparkLines = true;
}
});
$scope.$watch('panel.show_hidden', function () {
_.throttle($scope.get_rows(), 500);
});
$scope.init = function () {
$scope.sparkLines = true;
$scope.viewSelect = true;
$scope.warnLevels = {};
$scope.rows = [];
$scope.$on('refresh', function () {
@ -442,6 +456,14 @@ define([
}
};
$scope.showFullTable = function() {
if($scope.panel.compact) {
return false;
} else {
return true;
}
};
$scope.rowClick = function (row, metric) {
var current = window.location.href;
var i = current.indexOf('#');