Skip to content

N
nexpie-grafana-theme
Commit 1095373a by Rashid Khan
Options

Fixed interpanel communication

parent 834e63a1
Showing with 282 additions and 214 deletions
config.js
......@@ -28,7 +28,6 @@ var config = new Settings(
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','sort',
'timepicker'],
......
dashboards.js
......@@ -9,8 +9,6 @@ var dashboards =
{
type : "stringquery",
span : 12,
group : "main",
query : "wine"
}
]
},
......@@ -23,18 +21,18 @@ var dashboards =
type : "timepicker",
span : 5,
mode : 'relative',
index : "\"shakespeare\"",
refresh : {
enable : false,
interval: 30,
min : 10
},
timespan: '1h',
group : "main"
timespan : '1h',
timefield: '@timestamp',
},
{
type : "sort",
span : 4,
group : "main"
}
]
},
......@@ -47,14 +45,13 @@ var dashboards =
title : "Monkey Shakespeare Lines",
type : "histogram",
span : 6,
show : ['lines','points'],
fill : 0,
show : ['lines'],
fill : 0.3,
query : [
{ label : "Query", query : "*", color: '#86B32D' },
{ label : "Hamlet", query : "play_name:Hamlet" },
{ label : "Macbeth", query : "play_name:macbeth" },
],
group : "main"
},
{
title : "Monkey Typists Worldwide",
......@@ -64,8 +61,6 @@ var dashboards =
span : 6,
size : 500,
query : "*",
group : "main"
}
]
},
......@@ -83,7 +78,6 @@ var dashboards =
field : 'country',
//query : { query: "*", field: "country"}
query : { field : "play_name", query : "*" },
group : "main"
},
{
title : "Newest Lines",
......@@ -91,7 +85,6 @@ var dashboards =
span : 8,
query : "*",
fields : ['@timestamp','play_name','speaker','text_entry'],
group : "main"
}
]
}
......
js/controllers.js
......@@ -8,6 +8,8 @@ angular.module('kibana.controllers', [])
$scope.config = config;
$scope.dashboards = dashboards
/*
$scope.timespan = config.timespan
$scope.time = {
from : time_ago($scope.timespan),
......@@ -46,6 +48,7 @@ angular.module('kibana.controllers', [])
$scope.index = p.join();
});
});
*/
// point to your ElasticSearch server
var ejs = $scope.ejs = ejsResource(config.elasticsearch);
......
panels/histogram/module.js
angular.module('kibana.histogram', [])
.controller('histogram', function($scope, $rootScope) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
query : "*",
......@@ -8,25 +10,34 @@ angular.module('kibana.histogram', [])
color : "#27508C",
show : ['bars'],
fill : false,
group : "default",
}
_.defaults($scope.panel,_d)
$scope.init = function() {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query[0].query = query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
$scope.get_data = function() {
// Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.time))
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
return
var request = $scope.ejs.Request().indices($scope.index);
var request = $scope.ejs.Request().indices($scope.panel.index);
// Build the question part of the query
var queries = [];
_.each($scope.panel.query, function(v) {
queries.push($scope.ejs.FilteredQuery(
ejs.QueryStringQuery(v.query || '*'),
ejs.RangeFilter(config.timefield)
ejs.RangeFilter($scope.panel.time.field)
.from($scope.panel.time.from)
.to($scope.panel.time.to)
.cache(false))
......@@ -37,7 +48,7 @@ angular.module('kibana.histogram', [])
_.each(queries, function(v) {
request = request
.facet($scope.ejs.DateHistogramFacet(_.indexOf(queries,v))
.field(config.timefield)
.field($scope.panel.time.field)
.interval($scope.panel.interval)
.facetFilter($scope.ejs.QueryFilter(v))
).size(0)
......@@ -49,19 +60,20 @@ angular.module('kibana.histogram', [])
// Populate scope when we have results
results.then(function(results) {
$scope.hits = results.hits.total;
// Null values at each end of the time range make sure we see entire range
$scope.data = [];
_.each(results.facets, function(v, k) {
var series = {};
// Null values at each end of the time range ensure we see entire range
var data = [[$scope.panel.time.from.getTime(), null]];
_.each(v.entries, function(v, k) {
data.push([v['time'],v['count']])
});
data.push([$scope.panel.time.to.getTime(), null])
series.data = {
var series = { data: {
label: $scope.panel.query[k].label,
data: data,
};
data: data,
}};
if (!(_.isUndefined($scope.panel.query[k].color)))
series.data.color = $scope.panel.query[k].color;
$scope.data.push(series.data)
......@@ -69,22 +81,16 @@ angular.module('kibana.histogram', [])
});
}
if (!(_.isUndefined($scope.panel.group))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query[0].query = query;
$scope.get_data();
});
$scope.$on($scope.panel.group+"-time", function(event, time) {
$scope.panel.time = time;
$scope.panel.interval = secondsToHms(
calculate_interval(time.from,time.to,50,0)/1000),
$scope.get_data();
});
function set_time(time) {
$scope.panel.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
$scope.panel.interval = secondsToHms(
calculate_interval(time.from,time.to,50,0)/1000),
$scope.get_data();
}
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time")
// Ready, init
$scope.init();
})
.directive('histogram', function() {
......
panels/map/module.js
angular.module('kibana.map', [])
.controller('map', function($scope, $rootScope) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
query : "*",
map : "world",
colors : ['#C8EEFF', '#0071A4'],
size : 100,
exclude : []
exclude : [],
group : "default",
}
_.defaults($scope.panel,_d)
$scope.init = function() {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query = query;
$scope.get_data();
});
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
$scope.get_data = function() {
// Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.time))
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
return
var request = $scope.ejs.Request().indices($scope.index);
var request = $scope.ejs.Request().indices($scope.panel.index);
// Then the insert into facet and make the request
var results = request
......@@ -47,19 +58,13 @@ angular.module('kibana.map', [])
});
}
if (!(_.isUndefined($scope.panel.group))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query = query;
$scope.get_data();
});
$scope.$on($scope.panel.group+"-time", function(event, time) {
$scope.panel.time = time;
$scope.get_data();
});
function set_time(time) {
$scope.panel.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
$scope.get_data();
}
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time")
$scope.init()
})
.directive('map', function() {
......@@ -81,7 +86,6 @@ angular.module('kibana.map', [])
});
function render_panel(scope,elem,attrs) {
// Using LABjs, wait until all scripts are loaded before rendering panel
var scripts = $LAB.script("common/lib/panels/jquery.jvectormap.min.js")
.script("common/lib/panels/map."+scope.panel.map+".js")
......
panels/pie/module.js
......@@ -4,6 +4,8 @@ labjs = labjs.script("common/lib/panels/jquery.flot.js")
angular.module('kibana.pie', [])
.controller('pie', function($scope, $rootScope) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
query : "*",
......@@ -12,24 +14,29 @@ angular.module('kibana.pie', [])
donut : false,
tilt : false,
legend : true,
group : "default"
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
if (!(_.isUndefined($scope.panel.group)) && !(_.isArray($scope.panel.query))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query.query = query;
$scope.get_data();
});
_.defaults($scope.panel,_d)
$scope.init = function() {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
if(!(_.isArray($scope.panel.query))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query.query = query;
$scope.get_data();
});
}
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
}
$scope.get_data = function() {
if(_.isUndefined($scope.panel.time))
// Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
return
var request = $scope.ejs.Request().indices($scope.index);
var request = $scope.ejs.Request().indices($scope.panel.index);
// If we have an array, use query facet
if(_.isArray($scope.panel.query)) {
......@@ -103,19 +110,14 @@ angular.module('kibana.pie', [])
}
}
if (!(_.isUndefined($scope.panel.group))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query.query = query;
$scope.get_data();
});
$scope.$on($scope.panel.group+"-time", function(event, time) {
$scope.panel.time = time;
$scope.get_data();
});
function set_time(time) {
$scope.panel.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
$scope.get_data();
}
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time")
// Ready, init
$scope.init()
})
.directive('pie', function() {
......
panels/sort/module.js
angular.module('kibana.sort', [])
.controller('sort', function($scope, $rootScope) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
label : "Sort",
query : "*",
size : 100,
sort : [config.timefield,'desc'],
group : "default"
}
_.defaults($scope.panel,_d);
$scope.init = function() {
$scope.fields = [];
$scope.$on($scope.panel.group+"-fields", function(event, fields) {
$scope.panel.sort = fields.sort;
$scope.fields = _.union(fields.all,$scope.fields);
});
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
$scope.toggle_sort = function() {
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
}
$scope.fields = [];
$scope.$on($scope.panel.group+"-fields", function(event, fields) {
$scope.panel.sort = fields.sort;
$scope.fields = _.union(fields.all,$scope.fields);
});
$scope.init();
})
\ No newline at end of file
panels/stringquery/module.js
angular.module('kibana.stringquery', [])
.controller('stringquery', function($scope, $rootScope) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
label : "Search",
query : "*",
size : 100,
sort : [config.timefield,'desc'],
group : "default"
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
_.defaults($scope.panel,_d);
if (!(_.isUndefined($scope.panel.group))) {
$scope.init = function() {
$scope.send_query = function(query) {
$rootScope.$broadcast($scope.panel.group+"-query", query)
}
}
})
\ No newline at end of file
$scope.init();
});
\ No newline at end of file
panels/table/module.js
angular.module('kibana.table', [])
.controller('table', function($scope, $rootScope, $location) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
query : "*",
size : 100,
sort : [config.timefield,'desc'],
sort : ['@timestamp','desc'],
group : "default",
}
_.defaults($scope.panel,_d)
$scope.init = function () {
$scope.$on(_id+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-time", function(event,time){set_time(time)});
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query = query;
$scope.get_data();
});
$scope.$watch(function() {
return angular.toJson($scope.panel.sort)
}, function(){$scope.get_data()});
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time",_id)
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
$scope.toggle_sort = function() {
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
......@@ -18,10 +32,10 @@ angular.module('kibana.table', [])
$scope.get_data = function() {
// Make sure we have everything for the request to complete
if(_.isUndefined($scope.panel.time))
if(_.isUndefined($scope.panel.index) || _.isUndefined($scope.panel.time))
return
var request = $scope.ejs.Request().indices($scope.index);
var request = $scope.ejs.Request().indices($scope.panel.index);
var results = request
.query(ejs.FilteredQuery(
......@@ -58,22 +72,12 @@ angular.module('kibana.table', [])
});
}
$scope.$watch(function() {
return angular.toJson($scope.panel.sort)
}, function(){$scope.get_data()});
if (!(_.isUndefined($scope.panel.group))) {
$scope.$on($scope.panel.group+"-query", function(event, query) {
$scope.panel.query = query;
$scope.get_data();
});
$scope.$on($scope.panel.group+"-time", function(event, time) {
$scope.panel.time = time;
$scope.get_data();
});
function set_time(time) {
$scope.panel.time = time;
$scope.panel.index = _.isUndefined(time.index) ? $scope.panel.index : time.index
$scope.get_data();
}
// Now that we're all setup, request the time from our group
$rootScope.$broadcast($scope.panel.group+"-get_time")
$scope.init();
})
panels/timepicker/module.js
/*
## Timepicker
The timepicker panel is used to select time ranges and inform other panel of
them. It also handles searching for indices that match the given time range and
a pattern
### Parameters
* mode :: The default mode of the panel. Options: 'relative', 'absolute' 'since' Default: 'relative'
* time_options :: An array of possible time options. Default: ['5m','15m','1h','6h','12h','24h','2d','7d','30d']
* timespan :: The default options selected for the relative view. Default: '15m'
* timefield :: The field in which time is stored in the document.
* index :: Index pattern to match. Literals should be double quoted. Default: '"logstash-"yyyy.mm.dd'
* refresh: Object containing refresh parameters
* enable :: true/false, enable auto refresh by default. Default: false
* interval :: Seconds between auto refresh. Default: 30
* min :: The lowest interval a user may set
### Group Events
#### Sends
* time :: Object Includes from, to and index
#### Receives
* get_time :: Receives an object containing a uniqueid, broadcasts to it.
*/
angular.module('kibana.timepicker', [])
.controller('timepicker', function($scope, $rootScope, $timeout) {
.controller('timepicker', function($scope, $rootScope, $timeout, $http) {
var _id = _.uniqueId();
// Set and populate defaults
var _d = {
mode : "relative",
time_options : ['5m','15m','1h','6h','12h','24h','2d','7d','30d'],
timespan : '15m',
refresh : {
enable: false,
interval: 3,
min: 3
},
time : {
from : $scope.time.from,
to : $scope.time.to
mode : "relative",
time_options : ['5m','15m','1h','6h','12h','24h','2d','7d','30d'],
timespan : '15m',
index : '"logstash-"yyyy.mm.dd',
group : "default",
refresh : {
enable : false,
interval: 30,
min : 3
}
}
_.each(_d, function(v, k) {
$scope.panel[k] = _.isUndefined($scope.panel[k])
? _d[k] : $scope.panel[k];
});
// Private refresh interval that we can use for view display without causing
// unnecessary refreshes during changes
$scope.refresh_interval = $scope.panel.refresh.interval
// Init a private time object with Date() objects depending on mode
switch($scope.panel.mode) {
case 'absolute':
$scope.time = {
from : Date.parse($scope.panel.time.from),
to : Date.parse($scope.panel.time.to)
}
break;
case 'since':
$scope.time = {
from : Date.parse($scope.panel.time.from),
to : new Date()
}
break;
case 'relative':
$scope.time = {
from : time_ago($scope.panel.timespan),
to : new Date()
}
break;
}
_.defaults($scope.panel,_d)
$scope.init = function() {
// Private refresh interval that we can use for view display without causing
// unnecessary refreshes during changes
$scope.refresh_interval = $scope.panel.refresh.interval
// Init a private time object with Date() objects depending on mode
switch($scope.panel.mode) {
case 'absolute':
$scope.time = {
from : Date.parse($scope.panel.time.from),
to : Date.parse($scope.panel.time.to)
}
break;
case 'since':
$scope.time = {
from : Date.parse($scope.panel.time.from),
to : new Date()
}
break;
case 'relative':
$scope.time = {
from : time_ago($scope.panel.timespan),
to : new Date()
}
break;
}
$scope.time.field = $scope.panel.timefield;
$scope.time_apply();
// Init the values for the time/date pickers
$scope.timepicker = {
from : {
time : $scope.time.from.format("HH:MM:ss"),
date : $scope.time.from.format("mm/dd/yyyy")
},
to : {
time : $scope.time.to.format("HH:MM:ss"),
date : $scope.time.to.format("mm/dd/yyyy")
}
}
// In the case that a panel is not ready to receive a time event, it may
// request one be sent by broadcasting a 'get_time' even to its group
if (!(_.isUndefined($scope.panel.group))) {
// Broadcast time when initializing
$rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
// And whenever it is requested
$scope.$on($scope.panel.group+"-get_time", function(event) {
$rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
// In the case that a panel is not ready to receive a time event, it may
// request one be sent by broadcasting a 'get_time' with its _id to its group
$scope.$on($scope.panel.group+"-get_time", function(event,id) {
console.log('time request: '+id)
$rootScope.$broadcast(id+"-time", $scope.time)
});
}
$scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
$scope.$watch('panel.refresh.interval', function() {
$timeout(function(){
if(_.isNumber($scope.panel.refresh.interval)) {
if($scope.panel.refresh.interval < $scope.panel.refresh.min) {
$scope.panel.refresh.interval = $scope.panel.refresh.min
$scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
$scope.$watch('panel.refresh.interval', function() {
$timeout(function(){
if(_.isNumber($scope.panel.refresh.interval)) {
if($scope.panel.refresh.interval < $scope.panel.refresh.min) {
$scope.panel.refresh.interval = $scope.panel.refresh.min
$timeout.cancel($scope.panel.refresh.timer)
return;
}
$timeout.cancel($scope.panel.refresh.timer)
$scope.refresh()
} else {
$timeout.cancel($scope.panel.refresh.timer)
return;
}
$timeout.cancel($scope.panel.refresh.timer)
$scope.refresh()
} else {
$timeout.cancel($scope.panel.refresh.timer)
}
});
});
});
}
$scope.refresh = function() {
if ($scope.panel.refresh.enable) {
......@@ -145,24 +153,67 @@ angular.module('kibana.timepicker', [])
}
}
});
}
$scope.time_apply = function() {
$scope.time_check();
// Update internal time object
$scope.time = {
from : Date.parse($scope.timepicker.from.date + " " + $scope.timepicker.from.time),
to : Date.parse($scope.timepicker.to.date + " " + $scope.timepicker.to.time)
return {
from : from,
to : to
};
}
// Broadcast time
$rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
$scope.time_apply = function() {
// Update internal time object
$scope.time = $scope.time_check();
$scope.time.field = $scope.panel.timefield
// Get indices for the time period, then broadcast time range and index list
// in a single object. Not sure if I like this.
indices($scope.time.from,$scope.time.to).then(function (p) {
$scope.time.index = p.join();
// Broadcast time
$rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
});
// Update panel's string representation of the time object
$scope.panel.time = {
from : $scope.time.from.format("mm/dd/yyyy HH:MM:ss"),
to : $scope.time.to.format("mm/dd/yyyy HH:MM:ss")
to : $scope.time.to.format("mm/dd/yyyy HH:MM:ss"),
index : $scope.time.index,
};
};
// returns a promise containing an array of all indices matching the index
// pattern that exist in a given range
function indices(from,to) {
var possible = [];
_.each(date_range(from,to.add_days(1)),function(d){
possible.push(d.format($scope.panel.index));
});
return all_indices().then(function(p) {
return _.intersection(p,possible);
})
};
// returns a promise containing an array of all indices in an elasticsearch
// cluster
function all_indices() {
var something = $http({
url: config.elasticsearch + "/_aliases",
method: "GET"
}).error(function(data, status, headers, config) {
$scope.error = status;
});
return something.then(function(p) {
var indices = [];
_.each(p.data, function(v,k) {
indices.push(k)
});
return indices;
});
}
// Great, every function is ready, init.
$scope.init();
})
\ No newline at end of file
scripts/load.sh
#!/usr/bin/env bash
echo "Generating bulk indexable shakespeare lines with timestamp 3 hours in the past and 5 hours into the future"
echo "Generating bulk indexable shakespeare lines with timestamp 3 hours in the past and 10 hours into the future"
node reader.js > indexme.json
echo "Setting mapping for shakespeare index"
curl -XPUT http://localhost:9200/_template/shakespeare -d '
......
scripts/reader.js
......@@ -21,7 +21,7 @@ fs.readFile('shakespeare.json', 'utf8', function (err,data) {
}
function print_obj(o) {
var randomnumber=Math.floor(Math.random()*28800000)
var randomnumber=Math.floor(Math.random()*57600000)
var command = {index:{_index: "shakespeare", _type: "line", _id: i}};
o['@timestamp'] = new Date((new Date()).getTime() -9000000 + randomnumber);
o.geo = [getRandomInRange(-90, 90, 3),getRandomInRange(-180, 180, 3)]
......
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