Initial import
This commit is contained in:
Rashid Khan
@@ -0,0 +1,21 @@
|
||||
/*jshint globalstrict:true */
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
/* Application level module which depends on filters, controllers, and services */
|
||||
angular.module('kibana-dash', [
|
||||
'kibana-dash.controllers',
|
||||
'kibana-dash.filters',
|
||||
'kibana-dash.services',
|
||||
'kibana-dash.directives',
|
||||
'elasticjs.service',
|
||||
'kibana-dash.panels'
|
||||
]).config(['$routeProvider', function($routeProvider) {
|
||||
$routeProvider
|
||||
.when('/dashboard', {
|
||||
templateUrl: 'partials/dashboard.html'
|
||||
})
|
||||
.otherwise({
|
||||
redirectTo: '/dashboard'
|
||||
});
|
||||
}]);
|
||||
@@ -0,0 +1,116 @@
|
||||
/*jshint globalstrict:true */
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.controllers', [])
|
||||
.controller('SearchCtrl', function($scope, $location, $http, $timeout, ejsResource) {
|
||||
|
||||
|
||||
$scope.config = config;
|
||||
$scope.dashboards = dashboards
|
||||
$scope.timespan = config.timespan
|
||||
$scope.from = time_ago($scope.timespan);
|
||||
$scope.to = new Date();
|
||||
|
||||
$scope.time_options = ['5m','15m','1h','6h','12h','24h','2d','7d','30d'];
|
||||
|
||||
$scope.counter = 0;
|
||||
$scope.playing = true;
|
||||
$scope.play = function(){
|
||||
$scope.counter++;
|
||||
$scope.to = new Date();
|
||||
$scope.from = time_ago($scope.timespan);
|
||||
$scope.$root.$eval()
|
||||
mytimeout = $timeout($scope.play,config.refresh);
|
||||
}
|
||||
|
||||
$scope.pause = function(){
|
||||
if($scope.playing) {
|
||||
$scope.playing = false;
|
||||
$timeout.cancel(mytimeout);
|
||||
} else {
|
||||
$scope.playing = true;
|
||||
mytimeout = $timeout($scope.play,config.refresh);
|
||||
}
|
||||
}
|
||||
var mytimeout = $timeout($scope.play,config.refresh);
|
||||
|
||||
|
||||
|
||||
// If from/to to change, update index list
|
||||
$scope.$watch(function() {
|
||||
return angular.toJson([$scope.from, $scope.to])
|
||||
}, function(){
|
||||
indices($scope.from,$scope.to).then(function (p) {
|
||||
$scope.index = p.join();
|
||||
});
|
||||
});
|
||||
|
||||
// point to your ElasticSearch server
|
||||
var ejs = $scope.ejs = ejsResource(config.elasticsearch);
|
||||
|
||||
$scope.set_timespan = function(timespan) {
|
||||
$scope.timespan = timespan;
|
||||
$scope.from = time_ago($scope.timespan);
|
||||
}
|
||||
|
||||
// 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(config.indexpattern));
|
||||
});
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
/*jshint globalstrict:true */
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.directives', [])
|
||||
.directive('panel', function($compile) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
compile: function(element, attrs) {
|
||||
return function(scope, element, attrs) {
|
||||
scope.$watch(function () {
|
||||
return (attrs.panel && scope.index) ? true : false;
|
||||
}, function (ready) {
|
||||
if (ready) {
|
||||
$compile("<div "+attrs.panel+" params={{panel}} style='height:{{row.height}}'></div>")(scope).appendTo(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.directive('upload', function(){
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, elem, attrs) {
|
||||
console.log(elem);
|
||||
function file_selected(evt) {
|
||||
var files = evt.target.files; // FileList object
|
||||
|
||||
// files is a FileList of File objects. List some properties.
|
||||
var output = [];
|
||||
for (var i = 0, f; f = files[i]; i++) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = (function(theFile) {
|
||||
return function(e) {
|
||||
// Render thumbnail.
|
||||
scope.dashboards = JSON.parse(e.target.result)
|
||||
scope.$apply();
|
||||
};
|
||||
})(f);
|
||||
reader.readAsText(f);
|
||||
}
|
||||
}
|
||||
|
||||
// Check for the various File API support.
|
||||
if (window.File && window.FileReader && window.FileList && window.Blob) {
|
||||
// Something
|
||||
document.getElementById('upload').addEventListener('change', file_selected, false);
|
||||
} else {
|
||||
alert('Sorry, the HTML5 File APIs are not fully supported in this browser.');
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.directive('datepicker', function(){
|
||||
return {
|
||||
restrict: 'A',
|
||||
require: 'ngModel',
|
||||
link: function(scope, elem, attrs) {
|
||||
elem.datepicker({
|
||||
noDefault: false, // set this to true if you don't want the current date inserted if the value-attribute is empty
|
||||
format: 'mm/dd/yyyy hh:ii:ss'
|
||||
});
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('date', function(dateFilter) {
|
||||
return {
|
||||
require: 'ngModel',
|
||||
link: function(scope, elm, attrs, ctrl) {
|
||||
|
||||
var dateFormat = attrs['date'] || 'yyyy-MM-dd HH:mm:ss';
|
||||
var minDate = Date.parse(attrs['min']) || 0;
|
||||
var maxDate = Date.parse(attrs['max']) || 9007199254740992;
|
||||
|
||||
ctrl.$parsers.unshift(function(viewValue) {
|
||||
var parsedDateMilissec = Date.parse(viewValue);
|
||||
if (parsedDateMilissec > 0) {
|
||||
if (parsedDateMilissec >= minDate && parsedDateMilissec <= maxDate) {
|
||||
ctrl.$setValidity('date', true);
|
||||
return new Date(parsedDateMilissec);
|
||||
}
|
||||
}
|
||||
|
||||
// in all other cases it is invalid, return undefined (no model update)
|
||||
ctrl.$setValidity('date', false);
|
||||
return undefined;
|
||||
});
|
||||
|
||||
ctrl.$formatters.unshift(function(modelValue) {
|
||||
return dateFilter(modelValue, dateFormat);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
/*jshint globalstrict:true */
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.filters', [])
|
||||
.filter('dateformat', ['dateformat', function(date) {
|
||||
return function(date) {
|
||||
console.log(date)
|
||||
return "ahoy!"
|
||||
//return String(date).replace(/\%VERSION\%/mg, version);
|
||||
}
|
||||
}]);
|
||||
+644
@@ -0,0 +1,644 @@
|
||||
/*jshint globalstrict:true */
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
/* NOTE: This is very much a preview, many things will change. In fact, this
|
||||
file will probably go away
|
||||
*/
|
||||
|
||||
/*
|
||||
METAPARAMETERS
|
||||
|
||||
If you're implementing a panel, these are used by default. You need not handle
|
||||
them in your directive.
|
||||
|
||||
span: The grid is made up of N rows, however there are only 12 columns. Span
|
||||
is a number, 1-12
|
||||
type: This is the name of your directive.
|
||||
*/
|
||||
|
||||
/*
|
||||
Histogram
|
||||
|
||||
Draw a histogram of a single query
|
||||
|
||||
NOTE: This will likely be renamed or get a setting that allows for non-time
|
||||
based keys. It may also be updated to allow multiple stacked or unstacked
|
||||
queries.
|
||||
|
||||
query: query to execute
|
||||
interval: Bucket size in the standard Nunit (eg 1d, 5m, 30s) Attempts to auto
|
||||
scale itself based on timespan
|
||||
color: line/bar color.
|
||||
show: array of what to show, (eg ['bars','lines','points'])
|
||||
*/
|
||||
|
||||
/*
|
||||
Piequery
|
||||
|
||||
Use a query facets to compare counts of for different queries, then show them
|
||||
on a pie chart
|
||||
|
||||
queries: An array of queries
|
||||
donut: Make a hole in the middle?
|
||||
tilt: Tilt the pie in a 3dish way
|
||||
legend: Show it or not?
|
||||
colors: An array of colors to use for slices. These map 1-to-1 with the #
|
||||
of queries in your queries array
|
||||
*/
|
||||
|
||||
/* Pieterms
|
||||
|
||||
Use a terms facet to calculate the most popular terms for a field
|
||||
|
||||
query: Query to perform the facet on
|
||||
size: Limit to this many terms
|
||||
exclude: An array of terms to exclude from the results
|
||||
donut: Make a hole in the middle?
|
||||
tilt: Tilt the pie in a 3dish way
|
||||
legend: Show it or not?
|
||||
*/
|
||||
|
||||
/* Stackedquery
|
||||
|
||||
Use date histograms to assemble stacked bar or line charts representing
|
||||
multple queries over time
|
||||
|
||||
queries: An array of queries
|
||||
interval: Bucket size in the standard Nunit (eg 1d, 5m, 30s) Attempts to auto
|
||||
scale itself based on timespan
|
||||
colors: An array of colors to use for slices. These map 1-to-1 with the #
|
||||
of queries in your queries array
|
||||
show: array of what to show, (eg ['bars','lines','points'])
|
||||
*/
|
||||
|
||||
|
||||
angular.module('kibana-dash.panels', [])
|
||||
.directive('histogram', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, elem, attrs) {
|
||||
|
||||
// Specify defaults for ALL directives
|
||||
var _d = {
|
||||
query : "*",
|
||||
interval: secondsToHms(calculate_interval(scope.from,scope.to,40,0)/1000),
|
||||
color : "#27508C",
|
||||
show : ['bars']
|
||||
}
|
||||
|
||||
// Set ready flag and fill parameters (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function () {
|
||||
return (attrs.params && scope.index) ? true : false;
|
||||
}, function (ready) {
|
||||
scope.ready = ready;
|
||||
if(ready) {
|
||||
scope.params = JSON.parse(attrs.params);
|
||||
_.each(_d, function(v, k) {
|
||||
scope.params[k] = _.isUndefined(scope.params[k])
|
||||
? _d[k] : scope.params[k];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Also get the data if time frame changes.
|
||||
// (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function() {
|
||||
return angular.toJson([scope.from, scope.to, scope.ready])
|
||||
}, function(){
|
||||
if(scope.ready)
|
||||
if (_.isUndefined(attrs.params.interval))
|
||||
scope.params.interval = secondsToHms(
|
||||
calculate_interval(scope.from,scope.to,50,0)/1000),
|
||||
get_data(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Re-rending the panel if it is resized,
|
||||
scope.$watch('data', function() {
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Or if the model changes
|
||||
angular.element(window).bind('resize', function(){
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Function for getting data
|
||||
function get_data(scope,elem,attrs) {
|
||||
var params = scope.params;
|
||||
var ejs = scope.ejs;
|
||||
var request = ejs.Request().indices(scope.index);
|
||||
|
||||
// Build the question part of the query
|
||||
var query = ejs.FilteredQuery(
|
||||
ejs.QueryStringQuery(params.query || '*'),
|
||||
ejs.RangeFilter(config.timefield)
|
||||
.from(scope.from)
|
||||
.to(scope.to)
|
||||
.cache(false)
|
||||
);
|
||||
|
||||
// Then the insert into facet and make the request
|
||||
var results = request
|
||||
.facet(ejs.DateHistogramFacet('histogram')
|
||||
.field(config.timefield)
|
||||
.interval(params.interval)
|
||||
.facetFilter(ejs.QueryFilter(query))
|
||||
)
|
||||
.doSearch();
|
||||
|
||||
// Populate scope when we have results
|
||||
results.then(function(results) {
|
||||
scope.hits = results.hits.total;
|
||||
scope.data = results.facets.histogram.entries;
|
||||
});
|
||||
}
|
||||
|
||||
// Function for rendering panel
|
||||
function render_panel(scope,elem,attrs) {
|
||||
// Parse our params object
|
||||
var params = scope.params;
|
||||
|
||||
// Determine format
|
||||
var show = _.isUndefined(params.show) ? {
|
||||
bars: true, lines: false, points: false
|
||||
} : {
|
||||
lines: _.indexOf(params.show,'lines') < 0 ? false : true,
|
||||
bars: _.indexOf(params.show,'bars') < 0 ? false : true,
|
||||
points: _.indexOf(params.show,'points') < 0 ? false : true,
|
||||
}
|
||||
|
||||
// Push null values at beginning and end of timeframe
|
||||
scope.graph = [
|
||||
[scope.from.getTime(), null],[scope.to.getTime(), null]];
|
||||
|
||||
// Create FLOT value array
|
||||
_.each(scope.data, function(v, k) {
|
||||
scope.graph.push([v['time'],v['count']])
|
||||
});
|
||||
|
||||
// Set barwidth based on specified interval
|
||||
var barwidth = interval_to_seconds(params.interval)*1000
|
||||
|
||||
// Populate element
|
||||
$.plot(elem, [{
|
||||
label: _.isUndefined(params.label) ? params.query: params.label,
|
||||
data: scope.graph
|
||||
}], {
|
||||
legend: {
|
||||
position: "nw",
|
||||
labelFormatter: function(label, series) {
|
||||
return '<span class="legend">' + label + ' / ' + params.interval
|
||||
+ '</span>';
|
||||
}
|
||||
},
|
||||
series: {
|
||||
lines: { show: show.lines, fill: false },
|
||||
bars: { show: show.bars, fill: 1, barWidth: barwidth/1.8 },
|
||||
points: { show: show.points },
|
||||
color: params.color,
|
||||
shadowSize: 1
|
||||
},
|
||||
yaxis: { min: 0, color: "#000" },
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timeformat: "%H:%M:%S<br>%m-%d",
|
||||
label: "Datetime",
|
||||
color: "#000",
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 0,
|
||||
borderColor: '#eee',
|
||||
color: "#eee",
|
||||
hoverable: true,
|
||||
}
|
||||
});
|
||||
//elem.show();
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('pieterms', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, elem, attrs) {
|
||||
|
||||
// Specify defaults for ALL directives
|
||||
var _d = {
|
||||
size : 5,
|
||||
query : "*",
|
||||
exclude : [],
|
||||
donut : false,
|
||||
tilt : false,
|
||||
legend : true,
|
||||
}
|
||||
|
||||
// Set ready flag and fill parameters (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function () {
|
||||
return (attrs.params && scope.index) ? true : false;
|
||||
}, function (ready) {
|
||||
scope.ready = ready;
|
||||
if(ready) {
|
||||
scope.params = JSON.parse(attrs.params);
|
||||
_.each(_d, function(v, k) {
|
||||
scope.params[k] = _.isUndefined(scope.params[k])
|
||||
? _d[k] : scope.params[k];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Also get the data if time frame changes.
|
||||
// (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function() {
|
||||
return angular.toJson([scope.from, scope.to, scope.ready])
|
||||
}, function(){
|
||||
if(scope.ready)
|
||||
get_data(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Re-rending the panel if it is resized,
|
||||
scope.$watch('data', function() {
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Or if the model changes
|
||||
angular.element(window).bind('resize', function(){
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Function for getting data
|
||||
function get_data(scope,elem,attrs) {
|
||||
var params = scope.params;
|
||||
var ejs = scope.ejs;
|
||||
var request = ejs.Request().indices(scope.index);
|
||||
|
||||
// Build the question part of the query
|
||||
var query = ejs.FilteredQuery(
|
||||
ejs.QueryStringQuery(params.query || '*'),
|
||||
ejs.RangeFilter(config.timefield)
|
||||
.from(scope.from)
|
||||
.to(scope.to)
|
||||
.cache(false)
|
||||
);
|
||||
|
||||
// Then the insert into facet and make the request
|
||||
var results = request
|
||||
.facet(ejs.TermsFacet('termpie')
|
||||
.field(params.field)
|
||||
.size(params['size'])
|
||||
.exclude(params.exclude)
|
||||
.facetFilter(ejs.QueryFilter(query))
|
||||
)
|
||||
.doSearch();
|
||||
|
||||
// Populate scope when we have results
|
||||
results.then(function(results) {
|
||||
scope.hits = results.hits.total;
|
||||
scope.data = results.facets.termpie.terms;
|
||||
});
|
||||
}
|
||||
|
||||
// Function for rendering panel
|
||||
function render_panel(scope,elem,attrs) {
|
||||
// Parse our params object
|
||||
var params = scope.params;
|
||||
|
||||
// Create graph array
|
||||
scope.graph = [];
|
||||
_.each(scope.data, function(v, k) {
|
||||
if(!_.isUndefined(params.only) && _.indexOf(params.only,v['term']) < 0)
|
||||
return
|
||||
|
||||
var point = {
|
||||
label : v['term'],
|
||||
data : v['count']
|
||||
}
|
||||
|
||||
if(!_.isUndefined(params.colors))
|
||||
point.color = params.colors[_.indexOf(params.only,v['term'])]
|
||||
|
||||
scope.graph.push(point)
|
||||
});
|
||||
|
||||
var pie = {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: params.donut ? 0.4 : 0,
|
||||
tilt: params.tilt ? 0.45 : 1,
|
||||
radius: 1,
|
||||
show: true,
|
||||
combine: {
|
||||
color: '#999',
|
||||
label: 'The Rest'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
|
||||
label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
//grid: { hoverable: true, clickable: true },
|
||||
legend: { show: params.legend }
|
||||
};
|
||||
|
||||
// Populate element
|
||||
$.plot(elem, scope.graph, pie);
|
||||
//elem.show();
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('piequery', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, elem, attrs) {
|
||||
|
||||
// Specify defaults for ALL directives
|
||||
var _d = {
|
||||
queries : ["*"],
|
||||
donut : false,
|
||||
tilt : false,
|
||||
legend : true,
|
||||
}
|
||||
|
||||
// Set ready flag and fill parameters (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function () {
|
||||
return (attrs.params && scope.index) ? true : false;
|
||||
}, function (ready) {
|
||||
scope.ready = ready;
|
||||
if(ready) {
|
||||
scope.params = JSON.parse(attrs.params);
|
||||
_.each(_d, function(v, k) {
|
||||
scope.params[k] = _.isUndefined(scope.params[k])
|
||||
? _d[k] : scope.params[k];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Also get the data if time frame changes.
|
||||
// (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function() {
|
||||
return angular.toJson([scope.from, scope.to, scope.ready])
|
||||
}, function(){
|
||||
if(scope.ready)
|
||||
get_data(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Re-rending the panel if it is resized,
|
||||
scope.$watch('data', function() {
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Or if the model changes
|
||||
angular.element(window).bind('resize', function(){
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Function for getting data
|
||||
function get_data(scope,elem,attrs) {
|
||||
var params = scope.params;
|
||||
var ejs = scope.ejs;
|
||||
var request = ejs.Request().indices(scope.index);
|
||||
|
||||
|
||||
var queries = [];
|
||||
// Build the question part of the query
|
||||
_.each(params.queries, function(v) {
|
||||
queries.push(ejs.FilteredQuery(
|
||||
ejs.QueryStringQuery(v || '*'),
|
||||
ejs.RangeFilter(config.timefield)
|
||||
.from(scope.from)
|
||||
.to(scope.to)
|
||||
.cache(false))
|
||||
)
|
||||
});
|
||||
|
||||
_.each(queries, function(v) {
|
||||
request = request.facet(ejs.QueryFacet(_.indexOf(queries,v))
|
||||
.query(v)
|
||||
.facetFilter(ejs.QueryFilter(v))
|
||||
)
|
||||
})
|
||||
// Then the insert into facet and make the request
|
||||
var results = request.doSearch();
|
||||
|
||||
// Populate scope when we have results
|
||||
results.then(function(results) {
|
||||
scope.hits = results.hits.total;
|
||||
scope.data = results.facets;
|
||||
});
|
||||
}
|
||||
|
||||
// Function for rendering panel
|
||||
function render_panel(scope,elem,attrs) {
|
||||
// Parse our params object
|
||||
var params = scope.params;
|
||||
|
||||
// Create graph array
|
||||
scope.graph = [];
|
||||
_.each(scope.data, function(v, k) {
|
||||
var point = {
|
||||
label : params.queries[k],
|
||||
data : v['count']
|
||||
}
|
||||
if(!_.isUndefined(params.colors))
|
||||
point.color = params.colors[k%params.colors.length];
|
||||
scope.graph.push(point)
|
||||
});
|
||||
|
||||
// Populate element
|
||||
$.plot(elem, scope.graph, {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: params.donut ? 0.4 : 0,
|
||||
tilt: params.tilt ? 0.45 : 1,
|
||||
radius: 1,
|
||||
show: true,
|
||||
combine: {
|
||||
color: '#999',
|
||||
label: 'The Rest'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: function(label, series){
|
||||
return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
|
||||
label+'<br/>'+Math.round(series.percent)+'%</div>';
|
||||
},
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
//grid: { hoverable: true, clickable: true },
|
||||
legend: { show: params.legend }
|
||||
});
|
||||
//elem.show();
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('stackedquery', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: function(scope, elem, attrs) {
|
||||
|
||||
// Specify defaults for ALL directives
|
||||
var _d = {
|
||||
queries : ["*"],
|
||||
interval: secondsToHms(calculate_interval(scope.from,scope.to,40,0)/1000),
|
||||
colors : ["#BF3030","#1D7373","#86B32D","#A98A21","#411F73"],
|
||||
show : ['bars']
|
||||
}
|
||||
|
||||
// Set ready flag and fill parameters (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function () {
|
||||
return (attrs.params && scope.index) ? true : false;
|
||||
}, function (ready) {
|
||||
scope.ready = ready;
|
||||
if(ready) {
|
||||
scope.params = JSON.parse(attrs.params);
|
||||
_.each(_d, function(v, k) {
|
||||
scope.params[k] = _.isUndefined(scope.params[k])
|
||||
? _d[k] : scope.params[k];
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Also get the data if time frame changes.
|
||||
// (REQUIRED IN EVERY PANEL)
|
||||
scope.$watch(function() {
|
||||
return angular.toJson([scope.from, scope.to, scope.ready])
|
||||
}, function(){
|
||||
if(scope.ready)
|
||||
if (_.isUndefined(attrs.params.interval))
|
||||
scope.params.interval = secondsToHms(
|
||||
calculate_interval(scope.from,scope.to,50,0)/1000),
|
||||
get_data(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Re-rending the panel if it is resized,
|
||||
scope.$watch('data', function() {
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Or if the model changes
|
||||
angular.element(window).bind('resize', function(){
|
||||
render_panel(scope,elem,attrs);
|
||||
});
|
||||
|
||||
// Function for getting data
|
||||
function get_data(scope,elem,attrs) {
|
||||
var params = scope.params;
|
||||
var ejs = scope.ejs;
|
||||
var request = ejs.Request().indices(scope.index);
|
||||
|
||||
// Build the question part of the query
|
||||
var queries = [];
|
||||
_.each(params.queries, function(v) {
|
||||
queries.push(ejs.FilteredQuery(
|
||||
ejs.QueryStringQuery(v || '*'),
|
||||
ejs.RangeFilter(config.timefield)
|
||||
.from(scope.from)
|
||||
.to(scope.to)
|
||||
.cache(false))
|
||||
)
|
||||
});
|
||||
|
||||
// Build the facet part
|
||||
_.each(queries, function(v) {
|
||||
request = request
|
||||
.facet(ejs.DateHistogramFacet(_.indexOf(queries,v))
|
||||
.field(config.timefield)
|
||||
.interval(params.interval)
|
||||
.facetFilter(ejs.QueryFilter(v))
|
||||
)
|
||||
})
|
||||
|
||||
// Then run it
|
||||
var results = request.doSearch();
|
||||
|
||||
// Populate scope when we have results
|
||||
results.then(function(results) {
|
||||
scope.hits = results.hits.total;
|
||||
scope.data = results.facets;
|
||||
});
|
||||
}
|
||||
|
||||
// Function for rendering panel
|
||||
function render_panel(scope,elem,attrs) {
|
||||
// Parse our params object
|
||||
var params = scope.params;
|
||||
|
||||
// Determine format
|
||||
var show = _.isUndefined(params.show) ? {
|
||||
bars: true, lines: false, points: false, fill: false
|
||||
} : {
|
||||
lines: _.indexOf(params.show,'lines') < 0 ? false : true,
|
||||
bars: _.indexOf(params.show,'bars') < 0 ? false : true,
|
||||
points: _.indexOf(params.show,'points') < 0 ? false : true,
|
||||
fill: _.indexOf(params.show,'fill') < 0 ? false : true
|
||||
}
|
||||
|
||||
scope.graph = [];
|
||||
// Push null values at beginning and end of timeframe
|
||||
_.each(scope.data, function(v, k) {
|
||||
var series = {};
|
||||
var data = [[scope.from.getTime(), null]];
|
||||
_.each(v.entries, function(v, k) {
|
||||
data.push([v['time'],v['count']])
|
||||
});
|
||||
data.push([scope.to.getTime(), null])
|
||||
series.data = {
|
||||
label: params.queries[k],
|
||||
data: data,
|
||||
color: params.colors[k%params.colors.length]
|
||||
};
|
||||
scope.graph.push(series.data)
|
||||
});
|
||||
|
||||
// Set barwidth based on specified interval
|
||||
var barwidth = interval_to_seconds(params.interval)*1000
|
||||
|
||||
// Populate element
|
||||
$.plot(elem, scope.graph, {
|
||||
legend: {
|
||||
position: "nw",
|
||||
labelFormatter: function(label, series) {
|
||||
return '<span class="legend">' + label + ' / ' + params.interval
|
||||
+ '</span>';
|
||||
}
|
||||
},
|
||||
series: {
|
||||
stack: 0,
|
||||
lines: { show: show.lines, fill: show.fill },
|
||||
bars: { show: show.bars, fill: 1, barWidth: barwidth/1.8 },
|
||||
points: { show: show.points },
|
||||
color: params.color,
|
||||
shadowSize: 1
|
||||
},
|
||||
yaxis: { min: 0, color: "#000" },
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timeformat: "%H:%M:%S<br>%m-%d",
|
||||
label: "Datetime",
|
||||
color: "#000",
|
||||
},
|
||||
grid: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 0,
|
||||
borderColor: '#eee',
|
||||
color: "#eee",
|
||||
hoverable: true,
|
||||
}
|
||||
});
|
||||
//elem.show();
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
/*jshint globalstrict:true */
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.services', []);
|
||||
Reference in New Issue
Block a user