mirror of
https://github.com/grafana/grafana.git
synced 2025-02-12 16:45:43 -06:00
Testing map before crontroller refactor
This commit is contained in:
Rashid Khan
parent
4191737d91
commit
59503c5e22
39
common/css/jquery-jvectormap.css
Normal file
39
common/css/jquery-jvectormap.css
Normal file
@ -0,0 +1,39 @@
|
||||
.jvectormap-label {
|
||||
position: absolute;
|
||||
display: none;
|
||||
border: solid 1px #CDCDCD;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #292929;
|
||||
color: white;
|
||||
font-family: sans-serif, Verdana;
|
||||
font-size: smaller;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.jvectormap-zoomin, .jvectormap-zoomout {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #292929;
|
||||
padding: 3px;
|
||||
color: white;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
cursor: pointer;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jvectormap-zoomin {
|
||||
display: none;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.jvectormap-zoomout {
|
||||
display: none;
|
||||
top: 30px;
|
||||
}
|
||||
1
common/lib/jquery-jvectormap-world-mill-en.js
vendored
Normal file
1
common/lib/jquery-jvectormap-world-mill-en.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
common/lib/jquery.jvectormap.min.js
vendored
Normal file
8
common/lib/jquery.jvectormap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -16,7 +16,8 @@ var Settings = function (s) {
|
||||
indexpattern : 'logstash-%Y.%m.%d',
|
||||
indexlimit : 150,
|
||||
indexdefault : 'logstash-*',
|
||||
primaryfield : '_all'
|
||||
primaryfield : '_all',
|
||||
modules : []
|
||||
}
|
||||
|
||||
// This initializes a new hash on purpose, to avoid adding parameters to
|
||||
|
||||
@ -23,12 +23,14 @@ PLEASE SEE js/
|
||||
var config = new Settings(
|
||||
{
|
||||
timespan: '15m',
|
||||
refresh: 30000,
|
||||
refresh: 10000,
|
||||
elasticsearch: 'http://localhost:9200',
|
||||
timeformat: 'mm/dd HH:MM:ss',
|
||||
timefield: '@timestamp',
|
||||
indexpattern: '"logstash-"yyyy.mm.dd',
|
||||
//indexpattern: '"shakespeare"',
|
||||
//indexpattern: '"logstash-"yyyy.mm.dd',
|
||||
indexpattern: '"shakespeare"',
|
||||
modules: ['histogram','piequery','pieterms','stackedquery','map'],
|
||||
|
||||
|
||||
defaultfields: ['line_text'],
|
||||
perpage: 50,
|
||||
|
||||
@ -24,27 +24,28 @@ var dashboards =
|
||||
}
|
||||
},
|
||||
row2: {
|
||||
height: "250px",
|
||||
height: "300px",
|
||||
panels: {
|
||||
"Royal Decrees": {
|
||||
type : "stackedquery",
|
||||
span : 4,
|
||||
span : 3,
|
||||
donut : true,
|
||||
queries : ['king','queen','duke'],
|
||||
},
|
||||
"Person: Thy vs Thou": {
|
||||
type : "piequery",
|
||||
span : 4,
|
||||
donut : true,
|
||||
queries : ['thy','thou'],
|
||||
"Remote Monkey Activity": {
|
||||
type : "map",
|
||||
span : 6,
|
||||
size : 20,
|
||||
field : 'country',
|
||||
query : '',
|
||||
colors : ['#B07737','#85004B','#7BA4AF'],
|
||||
},
|
||||
"Main Characters": {
|
||||
type : "pieterms",
|
||||
donut : true,
|
||||
legend : true,
|
||||
field : "speaker",
|
||||
span : 4,
|
||||
field : "country",
|
||||
span : 3,
|
||||
size : 5,
|
||||
query : "*",
|
||||
}
|
||||
|
||||
48
index.html
48
index.html
@ -1,8 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ng-app:kibana-dash" lang="en" id="ng-app"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ng-app:kibana-dash" lang="en" id="ng-app"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" ng-app="kibana-dash"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" ng-app="kibana-dash"> <!--<![endif]-->
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 ng-app:kibana" lang="en" id="ng-app"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ng-app:kibana" lang="en" id="ng-app"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" ng-app="kibana"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" ng-app="kibana"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
@ -17,29 +17,31 @@
|
||||
<link rel="stylesheet" href="/common/css/bootstrap-responsive.min.css">
|
||||
<link rel="stylesheet" href="/common/css/elasticjs.css">
|
||||
<link rel="stylesheet" href="/common/css/datepicker.css">
|
||||
|
||||
<link rel="stylesheet" href="/common/css/jquery-jvectormap.css">
|
||||
|
||||
|
||||
<!-- project dependency libs -->
|
||||
<script src="/common/lib/jquery-1.8.0.min.js"></script>
|
||||
<script src="/common/lib/modernizr-2.6.1.min.js"></script>
|
||||
<script src="/common/lib/underscore.min.js"></script>
|
||||
<script src="/common/lib/angular.min.js"></script>
|
||||
<script src="/common/lib/elastic.min.js"></script>
|
||||
<script src="/common/lib/elastic-angular-client.min.js"></script>
|
||||
<script src="/common/lib/dateformat.js"></script>
|
||||
<script src="/common/lib/jquery.flot.js"></script>
|
||||
<script src="/common/lib/jquery.flot.time.js"></script>
|
||||
<script src="/common/lib/jquery.flot.stack.js"></script>
|
||||
<script src="/common/lib/jquery.flot.pie.js"></script>
|
||||
<script src="/common/lib/date.js"></script>
|
||||
<script src="/common/lib/datepicker.js"></script>
|
||||
<script src="common/lib/jquery-1.8.0.min.js"></script>
|
||||
<script src="common/lib/modernizr-2.6.1.min.js"></script>
|
||||
<script src="common/lib/underscore.min.js"></script>
|
||||
<script src="common/lib/angular.min.js"></script>
|
||||
<script src="common/lib/elastic.min.js"></script>
|
||||
<script src="common/lib/elastic-angular-client.min.js"></script>
|
||||
<script src="common/lib/dateformat.js"></script>
|
||||
<script src="common/lib/jquery.flot.js"></script>
|
||||
<script src="common/lib/jquery.flot.time.js"></script>
|
||||
<script src="common/lib/jquery.flot.stack.js"></script>
|
||||
<script src="common/lib/jquery.flot.pie.js"></script>
|
||||
<script src="common/lib/jquery.jvectormap.min.js"></script>
|
||||
<script src="common/lib/jquery-jvectormap-world-mill-en.js"></script>
|
||||
<script src="common/lib/date.js"></script>
|
||||
<script src="common/lib/datepicker.js"></script>
|
||||
|
||||
|
||||
<script src="/common/lib/settings.js"></script>
|
||||
<script src="/config.js"></script>
|
||||
<script src="/common/lib/shared.js"></script>
|
||||
<script src="/dashboards.js"></script>
|
||||
<script src="common/lib/settings.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="common/lib/shared.js"></script>
|
||||
<script src="dashboards.js"></script>
|
||||
|
||||
|
||||
<!-- project specific files -->
|
||||
@ -52,7 +54,7 @@
|
||||
|
||||
</head>
|
||||
|
||||
<body ng-controller="SearchCtrl">
|
||||
<body ng-controller="DashCtrl">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container-fluid">
|
||||
|
||||
19
js/app.js
19
js/app.js
@ -2,15 +2,18 @@
|
||||
/*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',
|
||||
// Base modules
|
||||
var modules = [
|
||||
'kibana.controllers',
|
||||
'kibana.filters',
|
||||
'kibana.services',
|
||||
'kibana.directives',
|
||||
'elasticjs.service',
|
||||
'kibana-dash.panels'
|
||||
]).config(['$routeProvider', function($routeProvider) {
|
||||
'kibana.panels',
|
||||
]
|
||||
|
||||
/* Application level module which depends on filters, controllers, and services */
|
||||
angular.module('kibana', modules).config(['$routeProvider', function($routeProvider) {
|
||||
$routeProvider
|
||||
.when('/dashboard', {
|
||||
templateUrl: 'partials/dashboard.html'
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.controllers', [])
|
||||
.controller('SearchCtrl', function($scope, $location, $http, $timeout, ejsResource) {
|
||||
angular.module('kibana.controllers', [])
|
||||
.controller('DashCtrl', function($scope, $location, $http, $timeout, ejsResource) {
|
||||
|
||||
|
||||
$scope.config = config;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.directives', [])
|
||||
angular.module('kibana.directives', [])
|
||||
.directive('panel', function($compile) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
@ -12,7 +12,7 @@ angular.module('kibana-dash.directives', [])
|
||||
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);
|
||||
$compile("<div "+attrs.panel+" params={{panel}} style='height:{{row.height}}'></div>")(scope).replaceAll(element);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.filters', [])
|
||||
angular.module('kibana.filters', [])
|
||||
.filter('dateformat', ['dateformat', function(date) {
|
||||
return function(date) {
|
||||
console.log(date)
|
||||
|
||||
146
js/panels.js
146
js/panels.js
@ -73,7 +73,7 @@
|
||||
*/
|
||||
|
||||
|
||||
angular.module('kibana-dash.panels', [])
|
||||
angular.module('kibana.panels', [])
|
||||
.directive('histogram', function() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
@ -641,4 +641,148 @@ angular.module('kibana-dash.panels', [])
|
||||
}
|
||||
}
|
||||
};
|
||||
})
|
||||
.directive('map', 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'],
|
||||
size : 100,
|
||||
exclude : []
|
||||
}
|
||||
|
||||
// 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.TermsFacet('worldmap')
|
||||
.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.worldmap.terms;
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
var values = {}
|
||||
_.each(scope.data, function(v) {
|
||||
values[v.term.toUpperCase()] = v.count;
|
||||
});
|
||||
console.log(values)
|
||||
|
||||
// Populate element
|
||||
$('.jvectormap-label,.jvectormap-zoomin,.jvectormap-zoomout').remove();
|
||||
elem.text('');
|
||||
elem.vectorMap({
|
||||
map: 'world_mill_en',
|
||||
regionStyle: {initial: {fill: '#eee'}},
|
||||
zoomOnScroll: false,
|
||||
backgroundColor: '#fff',
|
||||
series: {
|
||||
regions: [{
|
||||
values: values,
|
||||
scale: ['#C8EEFF', '#0071A4'],
|
||||
normalizeFunction: 'polynomial'
|
||||
}]
|
||||
}
|
||||
});
|
||||
//elem.show();
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
/*global angular:true */
|
||||
'use strict';
|
||||
|
||||
angular.module('kibana-dash.services', []);
|
||||
angular.module('kibana.services', []);
|
||||
|
||||
@ -6,8 +6,9 @@
|
||||
</div>
|
||||
<div class="row-fluid" ng-repeat="(row_name, row) in dashboards.rows" style="height:{{row.height}}">
|
||||
<div ng-repeat="(panel_name, panel) in row.panels">
|
||||
<div class="span{{panel.span}}" style="padding: 10px;height={{row.height}}" panel="{{panel.type}}" >
|
||||
<div class="span{{panel.span}}" style="padding: 10px;height={{row.height}}">
|
||||
<h4>{{panel_name}}</h4>
|
||||
<div panel="{{panel.type}}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user