apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Testing map before crontroller refactor

Browse Source
pull/7/head
Rashid Khan 13 years ago
parent 4191737d91
commit 59503c5e22
14 changed files with 254 additions and 52 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 39
      common/css/jquery-jvectormap.css
  2. 1
      common/lib/jquery-jvectormap-world-mill-en.js
  3. 8
      common/lib/jquery.jvectormap.min.js
  4. 3
      common/lib/settings.js
  5. 8
      config.js
  6. 19
      dashboards.js
  7. 48
      index.html
  8. 19
      js/app.js
  9. 4
      js/controllers.js
  10. 4
      js/directives.js
  11. 2
      js/filters.js
  12. 146
      js/panels.js
  13. 2
      js/services.js
  14. 3
      partials/dashboard.html

39
common/css/jquery-jvectormap.css
Unescape View 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
View File

File diff suppressed because one or more lines are too long

8
common/lib/jquery.jvectormap.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
common/lib/settings.js
Unescape View File

@ -16,7 +16,8 @@ var Settings = function (s) {
indexpattern : 'logstash-%Y.%m.%d', indexpattern : 'logstash-%Y.%m.%d',
indexlimit : 150, indexlimit : 150,
indexdefault : 'logstash-*', indexdefault : 'logstash-*',
primaryfield : '_all' primaryfield : '_all',
modules : []
} }
// This initializes a new hash on purpose, to avoid adding parameters to // This initializes a new hash on purpose, to avoid adding parameters to

8
config.js
Unescape View File

@ -23,12 +23,14 @@ PLEASE SEE js/
var config = new Settings( var config = new Settings(
{ {
timespan: '15m', timespan: '15m',
refresh: 30000, refresh: 10000,
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','piequery','pieterms','stackedquery','map'],
defaultfields: ['line_text'], defaultfields: ['line_text'],
perpage: 50, perpage: 50,

19
dashboards.js
Unescape View File

@ -24,27 +24,28 @@ var dashboards =
} }
}, },
row2: { row2: {
height: "250px", height: "300px",
panels: { panels: {
"Royal Decrees": { "Royal Decrees": {
type : "stackedquery", type : "stackedquery",
span : 4, span : 3,
donut : true, donut : true,
queries : ['king','queen','duke'], queries : ['king','queen','duke'],
}, },
"Person: Thy vs Thou": { "Remote Monkey Activity": {
type : "piequery", type : "map",
span : 4, span : 6,
donut : true, size : 20,
queries : ['thy','thou'], field : 'country',
query : '',
colors : ['#B07737','#85004B','#7BA4AF'], colors : ['#B07737','#85004B','#7BA4AF'],
}, },
"Main Characters": { "Main Characters": {
type : "pieterms", type : "pieterms",
donut : true, donut : true,
legend : true, legend : true,
field : "speaker", field : "country",
span : 4, span : 3,
size : 5, size : 5,
query : "*", query : "*",
} }

48
index.html
Unescape View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!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 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-dash" 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-dash"> <![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-dash"> <!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en" ng-app="kibana"> <!--<![endif]-->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <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/bootstrap-responsive.min.css">
<link rel="stylesheet" href="/common/css/elasticjs.css"> <link rel="stylesheet" href="/common/css/elasticjs.css">
<link rel="stylesheet" href="/common/css/datepicker.css"> <link rel="stylesheet" href="/common/css/datepicker.css">
<link rel="stylesheet" href="/common/css/jquery-jvectormap.css">
<!-- project dependency libs --> <!-- project dependency libs -->
<script src="/common/lib/jquery-1.8.0.min.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/modernizr-2.6.1.min.js"></script>
<script src="/common/lib/underscore.min.js"></script> <script src="common/lib/underscore.min.js"></script>
<script src="/common/lib/angular.min.js"></script> <script src="common/lib/angular.min.js"></script>
<script src="/common/lib/elastic.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/elastic-angular-client.min.js"></script>
<script src="/common/lib/dateformat.js"></script> <script src="common/lib/dateformat.js"></script>
<script src="/common/lib/jquery.flot.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.time.js"></script>
<script src="/common/lib/jquery.flot.stack.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.flot.pie.js"></script>
<script src="/common/lib/date.js"></script> <script src="common/lib/jquery.jvectormap.min.js"></script>
<script src="/common/lib/datepicker.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="common/lib/settings.js"></script>
<script src="/config.js"></script> <script src="config.js"></script>
<script src="/common/lib/shared.js"></script> <script src="common/lib/shared.js"></script>
<script src="/dashboards.js"></script> <script src="dashboards.js"></script>
<!-- project specific files --> <!-- project specific files -->
@ -52,7 +54,7 @@
</head> </head>
<body ng-controller="SearchCtrl"> <body ng-controller="DashCtrl">
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">

19
js/app.js
Unescape View File

@ -2,15 +2,18 @@
/*global angular:true */ /*global angular:true */
'use strict'; 'use strict';
/* Application level module which depends on filters, controllers, and services */ // Base modules
angular.module('kibana-dash', [ var modules = [
'kibana-dash.controllers', 'kibana.controllers',
'kibana-dash.filters', 'kibana.filters',
'kibana-dash.services', 'kibana.services',
'kibana-dash.directives', 'kibana.directives',
'elasticjs.service', 'elasticjs.service',
'kibana-dash.panels' 'kibana.panels',
]).config(['$routeProvider', function($routeProvider) { ]
/* Application level module which depends on filters, controllers, and services */
angular.module('kibana', modules).config(['$routeProvider', function($routeProvider) {
$routeProvider $routeProvider
.when('/dashboard', { .when('/dashboard', {
templateUrl: 'partials/dashboard.html' templateUrl: 'partials/dashboard.html'

4
js/controllers.js
Unescape View File

@ -2,8 +2,8 @@
/*global angular:true */ /*global angular:true */
'use strict'; 'use strict';
angular.module('kibana-dash.controllers', []) angular.module('kibana.controllers', [])
.controller('SearchCtrl', function($scope, $location, $http, $timeout, ejsResource) { .controller('DashCtrl', function($scope, $location, $http, $timeout, ejsResource) {
$scope.config = config; $scope.config = config;

4
js/directives.js
Unescape View File

@ -2,7 +2,7 @@
/*global angular:true */ /*global angular:true */
'use strict'; 'use strict';
angular.module('kibana-dash.directives', []) angular.module('kibana.directives', [])
.directive('panel', function($compile) { .directive('panel', function($compile) {
return { return {
restrict: 'A', restrict: 'A',
@ -12,7 +12,7 @@ angular.module('kibana-dash.directives', [])
return (attrs.panel && scope.index) ? true : false; return (attrs.panel && scope.index) ? true : false;
}, function (ready) { }, function (ready) {
if (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
js/filters.js
Unescape View File

@ -2,7 +2,7 @@
/*global angular:true */ /*global angular:true */
'use strict'; 'use strict';
angular.module('kibana-dash.filters', []) angular.module('kibana.filters', [])
.filter('dateformat', ['dateformat', function(date) { .filter('dateformat', ['dateformat', function(date) {
return function(date) { return function(date) {
console.log(date) console.log(date)

146
js/panels.js
Unescape View File

@ -73,7 +73,7 @@
*/ */
angular.module('kibana-dash.panels', []) angular.module('kibana.panels', [])
.directive('histogram', function() { .directive('histogram', function() {
return { return {
restrict: 'A', 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
js/services.js
Unescape View File

@ -2,4 +2,4 @@
/*global angular:true */ /*global angular:true */
'use strict'; 'use strict';
angular.module('kibana-dash.services', []); angular.module('kibana.services', []);

3
partials/dashboard.html
Unescape View File

@ -6,8 +6,9 @@
</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="(panel_name, panel) in row.panels"> <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> <h4>{{panel_name}}</h4>
<div panel="{{panel.type}}"></div>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save