Commit 06b8dc38 by Rashid Khan

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/
parent e54982d4
...@@ -12,4 +12,15 @@ ...@@ -12,4 +12,15 @@
[ng\:cloak], [ng-cloak], .ng-cloak { [ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important; display: none !important;
}
.panel-error {
opacity: 0.9;
position:absolute;
top:10px;
z-index: 99999;
}
.pointer {
cursor: pointer;
} }
\ No newline at end of file
...@@ -24,13 +24,13 @@ json. ...@@ -24,13 +24,13 @@ json.
var config = new Settings( var config = new Settings(
{ {
timespan: '15m', timespan: '15m',
refresh: 10000, refresh: 30000,
elasticsearch: 'http://localhost:9200', elasticsearch: 'http://localhost:9200',
timeformat: 'mm/dd HH:MM:ss', timeformat: 'mm/dd HH:MM:ss',
timefield: '@timestamp', timefield: '@timestamp',
//indexpattern: '"logstash-"yyyy.mm.dd', //indexpattern: '"logstash-"yyyy.mm.dd',
indexpattern: '"shakespeare"', indexpattern: '"shakespeare"',
modules: ['histogram','map','pie','table','stringquery'], modules: ['histogram','map','pie','table','stringquery','sort'],
defaultfields: ['line_text'], defaultfields: ['line_text'],
perpage: 50, perpage: 50,
......
...@@ -3,12 +3,17 @@ var dashboards = ...@@ -3,12 +3,17 @@ var dashboards =
title: "Infinite Monkey Dashboard", title: "Infinite Monkey Dashboard",
rows: [ rows: [
{ {
height: "30px", height: "20px",
panels: [ panels: [
{ {
type : "stringquery", type : "stringquery",
span : 12, span : 9,
group : "mainsearch" group : "main"
},
{
type : "sort",
span : 3,
group : "main"
} }
] ]
}, },
...@@ -22,17 +27,17 @@ var dashboards = ...@@ -22,17 +27,17 @@ var dashboards =
show : ['lines','stack'], show : ['lines','stack'],
fill : 1, fill : 1,
query : [{ label : "lines", query : "*", color: '#86B32D' } ], query : [{ label : "lines", query : "*", color: '#86B32D' } ],
group : "mainsearch" group : "main"
}, },
{ {
title : "World Monkeys", title : "Monkey Typists Worldwide",
type : "map", type : "map",
map : 'world', map : 'world',
field : "country", field : "country",
span : 6, span : 6,
size : 500, size : 500,
query : "*", query : "*",
group : "mainsearch" group : "main"
} }
] ]
...@@ -50,7 +55,7 @@ var dashboards = ...@@ -50,7 +55,7 @@ var dashboards =
field : 'country', field : 'country',
//query : { query: "*", field: "country"} //query : { query: "*", field: "country"}
query : { field : "play_name", query : "*" }, query : { field : "play_name", query : "*" },
group : "mainsearch" group : "main"
}, },
{ {
title : "Newest Lines", title : "Newest Lines",
...@@ -58,7 +63,7 @@ var dashboards = ...@@ -58,7 +63,7 @@ var dashboards =
span : 8, span : 8,
query : "*", query : "*",
fields : ['@timestamp','speaker','text_entry'], fields : ['@timestamp','speaker','text_entry'],
group : "mainsearch" group : "main"
} }
] ]
} }
......
<div ng-controller='stringquery'> <div ng-controller='stringquery'>
<h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4> <h4 ng-hide="_.isUndefined(panel.title)">{{panel.title}}</h4>
<form class="form-search"> <form class="form-search">
<input type="text" class="input-medium search-query" ng-model="query" style="width:90%"> <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> <button type="submit" class="btn" ng-click="send_query(query)">Search</button>
</form> </form>
</div> </div>
\ No newline at end of file
...@@ -3,7 +3,10 @@ ...@@ -3,7 +3,10 @@
<div style="height:{{row.height}};overflow-y:auto;overflow-x:hidden"> <div style="height:{{row.height}};overflow-y:auto;overflow-x:hidden">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<thead> <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> </thead>
<tr ng-repeat="row in data"> <tr ng-repeat="row in data">
<td ng-repeat="field in panel.fields">{{row['_source'][field]}}</td> <td ng-repeat="field in panel.fields">{{row['_source'][field]}}</td>
......
angular.module('kibana.table', []) angular.module('kibana.table', [])
.controller('table', function($scope, $location) { .controller('table', function($scope, $rootScope, $location) {
// Set and populate defaults // Set and populate defaults
var _d = { var _d = {
...@@ -12,13 +12,19 @@ angular.module('kibana.table', []) ...@@ -12,13 +12,19 @@ angular.module('kibana.table', [])
? _d[k] : $scope.panel[k]; ? _d[k] : $scope.panel[k];
}); });
// Events which this panel receives and sends
if (!(_.isUndefined($scope.panel.group))) { if (!(_.isUndefined($scope.panel.group))) {
// Receives these events
$scope.$on($scope.panel.group+"-query", function(event, query) { $scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query = query; $scope.panel.query = query;
$scope.get_data(); $scope.get_data();
}); });
} }
$scope.toggle_sort = function() {
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
}
$scope.get_data = function() { $scope.get_data = function() {
var request = $scope.ejs.Request().indices($scope.index); var request = $scope.ejs.Request().indices($scope.index);
...@@ -37,26 +43,28 @@ angular.module('kibana.table', []) ...@@ -37,26 +43,28 @@ angular.module('kibana.table', [])
// Populate scope when we have results // Populate scope when we have results
results.then(function(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.hits = results.hits.total;
$scope.data = results.hits.hits; $scope.data = results.hits.hits;
/*
_.each(results.facets.pie.terms, function(v) { // Broadcast a list of all fields. Note that receivers of field array
var slice = { label : v.term, data : v.count }; // events should be able to receive from multiple sources, merge, dedupe
$scope.data.push(); // and sort on the fly.
if(!(_.isUndefined($scope.panel.colors)) if (!(_.isUndefined($scope.panel.group)))
&& _.isArray($scope.panel.colors) $rootScope.$broadcast(
&& $scope.panel.colors.length > 0) { $scope.panel.group+"-fields", {
slice.color = $scope.panel.colors[k%$scope.panel.colors.length]; all : get_all_fields(results),
} sort : $scope.panel.sort
$scope.data.push(slice) });
k = k + 1;
});
*/
}); });
} }
$scope.$watch(function() { $scope.$watch(function() {
return angular.toJson([$scope.from, $scope.to]) return angular.toJson([$scope.from, $scope.to, $scope.panel.sort])
}, function(){ }, function(){
$scope.get_data(); $scope.get_data();
}); });
......
...@@ -6,7 +6,13 @@ ...@@ -6,7 +6,13 @@
</div> </div>
<div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows" style="height:{{row.height}}"> <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 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">&times;</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> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment