mirror of
https://github.com/grafana/grafana.git
synced 2025-01-12 09:02:30 -06:00
Added sorting
modified: common/css/main.css modified: config.js modified: dashboards.js modified: panels/stringquery/module.html modified: panels/table/module.html modified: panels/table/module.js modified: partials/dashboard.html panels/sort/
This commit is contained in:
Rashid Khan
parent
e54982d42d
commit
06b8dc3809
@ -12,4 +12,15 @@
|
||||
|
||||
[ng\:cloak], [ng-cloak], .ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
opacity: 0.9;
|
||||
position:absolute;
|
||||
top:10px;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -24,13 +24,13 @@ json.
|
||||
var config = new Settings(
|
||||
{
|
||||
timespan: '15m',
|
||||
refresh: 10000,
|
||||
refresh: 30000,
|
||||
elasticsearch: 'http://localhost:9200',
|
||||
timeformat: 'mm/dd HH:MM:ss',
|
||||
timefield: '@timestamp',
|
||||
//indexpattern: '"logstash-"yyyy.mm.dd',
|
||||
indexpattern: '"shakespeare"',
|
||||
modules: ['histogram','map','pie','table','stringquery'],
|
||||
modules: ['histogram','map','pie','table','stringquery','sort'],
|
||||
|
||||
defaultfields: ['line_text'],
|
||||
perpage: 50,
|
||||
|
||||
@ -3,12 +3,17 @@ var dashboards =
|
||||
title: "Infinite Monkey Dashboard",
|
||||
rows: [
|
||||
{
|
||||
height: "30px",
|
||||
height: "20px",
|
||||
panels: [
|
||||
{
|
||||
type : "stringquery",
|
||||
span : 12,
|
||||
group : "mainsearch"
|
||||
span : 9,
|
||||
group : "main"
|
||||
},
|
||||
{
|
||||
type : "sort",
|
||||
span : 3,
|
||||
group : "main"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -22,17 +27,17 @@ var dashboards =
|
||||
show : ['lines','stack'],
|
||||
fill : 1,
|
||||
query : [{ label : "lines", query : "*", color: '#86B32D' } ],
|
||||
group : "mainsearch"
|
||||
group : "main"
|
||||
},
|
||||
{
|
||||
title : "World Monkeys",
|
||||
title : "Monkey Typists Worldwide",
|
||||
type : "map",
|
||||
map : 'world',
|
||||
field : "country",
|
||||
span : 6,
|
||||
size : 500,
|
||||
query : "*",
|
||||
group : "mainsearch"
|
||||
group : "main"
|
||||
|
||||
}
|
||||
]
|
||||
@ -50,7 +55,7 @@ var dashboards =
|
||||
field : 'country',
|
||||
//query : { query: "*", field: "country"}
|
||||
query : { field : "play_name", query : "*" },
|
||||
group : "mainsearch"
|
||||
group : "main"
|
||||
},
|
||||
{
|
||||
title : "Newest Lines",
|
||||
@ -58,7 +63,7 @@ var dashboards =
|
||||
span : 8,
|
||||
query : "*",
|
||||
fields : ['@timestamp','speaker','text_entry'],
|
||||
group : "mainsearch"
|
||||
group : "main"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div ng-controller='stringquery'>
|
||||
<h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
|
||||
<form class="form-search">
|
||||
<input type="text" class="input-medium search-query" ng-model="query" style="width:90%">
|
||||
<button type="submit" class="btn" ng-click="send_query(query)">Search</button>
|
||||
</form>
|
||||
<form class="form-search">
|
||||
<input type="text" class="input-medium search-query" ng-model="query" style="width:85%">
|
||||
<button type="submit" class="btn" ng-click="send_query(query)">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -3,7 +3,10 @@
|
||||
<div style="height:{{row.height}};overflow-y:auto;overflow-x:hidden">
|
||||
<table class="table table-condensed table-striped">
|
||||
<thead>
|
||||
<th ng-repeat="field in panel.fields">{{field}}</th>
|
||||
<th ng-repeat="field in panel.fields" class="pointer" ng-click="panel.sort[0] = field">
|
||||
{{field}}
|
||||
<i ng-show='field == panel.sort[0]' ng-click="toggle_sort()" class="pointer" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
|
||||
</th>
|
||||
</thead>
|
||||
<tr ng-repeat="row in data">
|
||||
<td ng-repeat="field in panel.fields">{{row['_source'][field]}}</td>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
angular.module('kibana.table', [])
|
||||
.controller('table', function($scope, $location) {
|
||||
.controller('table', function($scope, $rootScope, $location) {
|
||||
|
||||
// Set and populate defaults
|
||||
var _d = {
|
||||
@ -12,13 +12,19 @@ angular.module('kibana.table', [])
|
||||
? _d[k] : $scope.panel[k];
|
||||
});
|
||||
|
||||
// Events which this panel receives and sends
|
||||
if (!(_.isUndefined($scope.panel.group))) {
|
||||
// Receives these events
|
||||
$scope.$on($scope.panel.group+"-query", function(event, query) {
|
||||
$scope.panel.query = query;
|
||||
$scope.get_data();
|
||||
});
|
||||
}
|
||||
|
||||
$scope.toggle_sort = function() {
|
||||
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
|
||||
}
|
||||
|
||||
$scope.get_data = function() {
|
||||
var request = $scope.ejs.Request().indices($scope.index);
|
||||
|
||||
@ -37,26 +43,28 @@ angular.module('kibana.table', [])
|
||||
|
||||
// Populate scope when we have results
|
||||
results.then(function(results) {
|
||||
if(_.isUndefined(results)) {
|
||||
$scope.panel.error = 'Your query was unsuccessful';
|
||||
return;
|
||||
}
|
||||
$scope.panel.error = false;
|
||||
$scope.hits = results.hits.total;
|
||||
$scope.data = results.hits.hits;
|
||||
/*
|
||||
_.each(results.facets.pie.terms, function(v) {
|
||||
var slice = { label : v.term, data : v.count };
|
||||
$scope.data.push();
|
||||
if(!(_.isUndefined($scope.panel.colors))
|
||||
&& _.isArray($scope.panel.colors)
|
||||
&& $scope.panel.colors.length > 0) {
|
||||
slice.color = $scope.panel.colors[k%$scope.panel.colors.length];
|
||||
}
|
||||
$scope.data.push(slice)
|
||||
k = k + 1;
|
||||
});
|
||||
*/
|
||||
|
||||
// Broadcast a list of all fields. Note that receivers of field array
|
||||
// events should be able to receive from multiple sources, merge, dedupe
|
||||
// and sort on the fly.
|
||||
if (!(_.isUndefined($scope.panel.group)))
|
||||
$rootScope.$broadcast(
|
||||
$scope.panel.group+"-fields", {
|
||||
all : get_all_fields(results),
|
||||
sort : $scope.panel.sort
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$scope.$watch(function() {
|
||||
return angular.toJson([$scope.from, $scope.to])
|
||||
return angular.toJson([$scope.from, $scope.to, $scope.panel.sort])
|
||||
}, function(){
|
||||
$scope.get_data();
|
||||
});
|
||||
|
||||
@ -6,7 +6,13 @@
|
||||
</div>
|
||||
<div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows" style="height:{{row.height}}">
|
||||
<div ng-repeat="(name, panel) in row.panels">
|
||||
<div class="span{{panel.span}}" style="padding: 10px;height={{row.height}}" ng-include="'panels/'+panel.type+'/module.html'">
|
||||
<div class="span{{panel.span}}" style="position:relative">
|
||||
<div class="span12 alert alert-error panel-error" ng-class="{'ng-cloak': !panel.error}">
|
||||
<a class="close" ng-click="panel.error=false">×</a>
|
||||
<i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}}
|
||||
</div>
|
||||
<div class="span12" style="padding: 10px;height={{row.height}}" ng-include="'panels/'+panel.type+'/module.html'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user