public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

addded graphiteUrl to config.js

Browse Source
This commit is contained in:
Torkel Ödegaard
2013-12-07 14:40:14 +01:00
parent d760468c84
commit 54eae2e34a
13 changed files with 25 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -1,4 +1,5 @@
node_modules
.aws-config.json
dist
web.config
web.config
config.dev.js
src/app/components/require.config.js
+1 -1
View File
@@ -5,7 +5,7 @@ require.config({
baseUrl: 'app',
// urlArgs: 'r=@REV@',
paths: {
config: '../config',
config: '../config.dev',
settings: 'components/settings',
kbn: 'components/kbn',
src/app/components/settings.js
+2 -1
View File
@@ -12,7 +12,8 @@ function (_) {
var defaults = {
elasticsearch : "http://"+window.location.hostname+":9200",
panel_names : [],
kibana_index : 'kibana-int'
kibana_index : 'kibana-int',
graphiteUrl : null,
};
// This initializes a new hash on purpose, to avoid adding parameters to
src/app/dashboards/default.json
+1 -85
View File
@@ -37,7 +37,7 @@
"rows": [
{
"title": "Intro",
"height": "150px",
"height": "400px",
"editable": true,
"collapse": false,
"collapsable": false,
@@ -55,90 +55,6 @@
}
],
"notice": true
},
{
"title": "Intro",
"height": "150px",
"editable": true,
"collapse": false,
"collapsable": false,
"panels": [
{
"span": 12,
"editable": true,
"group": [
"default"
],
"type": "histogram",
"mode": "count",
"time_field": "@timestamp",
"value_field": null,
"x-axis": true,
"y-axis": true,
"scale": 1,
"y_format": "none",
"grid": {
"max": null,
"min": 0
},
"queries": {
"mode": "all",
"ids": [
0
]
},
"annotate": {
"enable": false,
"query": "*",
"size": 20,
"field": "_type",
"sort": [
"_score",
"desc"
]
},
"auto_int": true,
"resolution": 100,
"interval": "30s",
"intervals": [
"auto",
"1s",
"1m",
"5m",
"10m",
"30m",
"1h",
"3h",
"12h",
"1d",
"1w",
"1y"
],
"lines": false,
"fill": 0,
"linewidth": 3,
"points": false,
"pointradius": 5,
"bars": true,
"stack": true,
"spyable": true,
"zoomlinks": true,
"options": true,
"legend": true,
"show_query": true,
"interactive": true,
"legend_counts": true,
"timezone": "browser",
"percentage": false,
"zerofill": true,
"derivative": false,
"tooltip": {
"value_type": "cumulative",
"query_as_alias": true
}
}
],
"notice": true
}
],
"editable": true,
src/app/panels/graph/editor.html
-11
View File
@@ -1,11 +0,0 @@
<div>
<div class="row-fluid">
<div class="span4">
<label class="small">Graphite Url</label>
<input type="text" class="input-large" ng-model="panel.graphiteUrl"></input>
</div>
</div>
<label class=small>Targets</label>
<textarea ng-model="panel.targets" rows="6" style="width:95%"></textarea>
</div>
src/app/panels/graph/module.html
-13
View File
@@ -1,13 +0,0 @@
<div ng-controller='graph' ng-init="init()">
<h2>{{panel.someprop}}</h2>
<ul>
<li>{{panel.graphiteUrl}}</li>
<li>{{panel.targets}}</li>
</ul>
<mychart ng-model='data'></mychart>
<div class="chart_container flot" id="chart_container_flot">
<div class="chart" id="chart_flot" height="300px" width="700px"></div>
<div class="legend" id="legend_flot_simple"></div>
</div>
</div>
src/app/panels/graph/module.js
-74
View File
@@ -1,74 +0,0 @@
define([
'jquery',
'angular',
'app',
'underscore',
'ts-widget'
],
function ($, angular, app, _) {
'use strict';
var module = angular.module('kibana.panels.graph', []);
app.useModule(module);
module.controller('graph', function($scope) {
$scope.panelMeta = {
status : "Unstable",
description : "A graphite graph module"
};
// Set and populate defaults
var _d = {
};
_.defaults($scope.panel,_d);
$scope.init = function() {
$scope.ready = false;
$scope.saySomething = "something!";
};
});
angular
.module('kibana.directives')
.directive('mychart', function () {
return {
restrict: 'E',
link: function (scope, elem) {
var tsData = {
from: '-30d',
until: 'now',
height: '300',
width: '740',
targets: [
{
name: 'series 1',
color: '#CC6699',
target: 'randomWalk("random1")',
},
{
name: 'series 2',
color: '#006699',
target: 'randomWalk("random2")',
}
],
title: 'horizontal title',
vtitle: 'vertical title',
drawNullAsZero: false,
state: 'stacked',
hover_details: true,
legend: { container: '#legend_flot_simple', noColumns: 4 },
};
$("#chart_flot").graphiteFlot(tsData, function(err) {
console.log(err);
});
console.log('asd');
$(elem).html('NJEEEJ!');
}
};
});
});
src/app/panels/graphite/module.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div ng-controller='histogram' ng-init="init()" style="min-height:{{panel.height || row.height}}">
<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}">
<style>
.histogram-legend {
display:inline-block;
src/app/panels/graphite/module.js
+9 -18
View File
@@ -20,6 +20,7 @@ define([
'moment',
'./timeSeries',
'./graphiteUtil',
'config',
'jquery.flot',
'jquery.flot.events',
'jquery.flot.selection',
@@ -28,14 +29,14 @@ define([
'jquery.flot.stack',
'jquery.flot.stackpercent'
],
function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil, config) {
'use strict';
var module = angular.module('kibana.panels.histogram', []);
var module = angular.module('kibana.panels.graphite', []);
app.useModule(module);
module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) {
module.controller('graphite', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = {
modals : [
{
@@ -48,11 +49,11 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
editorTabs : [
{
title:'Style',
src:'app/panels/histogram/styleEditor.html'
src:'app/panels/graphite/styleEditor.html'
},
{
title:'Queries',
src:'app/panels/histogram/queriesEditor.html'
src:'app/panels/graphite/queriesEditor.html'
},
],
status : "Stable",
@@ -268,11 +269,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
};
var graphOptions = {
graphite_url: 'http://metrics.prod.tradera.com/render/',
from: '-1h',
until: 'now',
height: '300',
width: '740',
targets: [
{
name: 'series 1',
@@ -281,12 +278,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
//target: 'integral(prod.apps.touchweb.snake.counters.login.success.count)',
//target: "randomWalk('random1')",
}
],
title: 'horizontal title',
vtitle: 'vertical title',
drawNullAsZero: false,
state: 'stacked',
hover_details: true,
]
};
$scope.getGraphiteData = function (options, parameters) {
@@ -294,7 +286,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
accepts: { text: 'application/json' },
cache: false,
dataType: 'json',
url: options['graphite_url'],
url: config.graphiteUrl,
type: "POST",
data: parameters.join('&'),
error: function(xhr, textStatus, errorThrown) {
@@ -327,7 +319,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
var range = $scope.get_time_range();
var interval = $scope.get_interval(range);
console.log('interval: ' + interval);
graphOptions.from = $.plot.formatDate(range.from, '%H%:%M_%Y%m%d');
@@ -513,7 +504,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
// Silly, but fixes bug in stacked percentages
fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
lineWidth: scope.panel.linewidth,
steps: true
steps: false
},
bars: {
show: scope.panel.bars,
src/app/panels/histogram/module.js
-10
View File
@@ -291,16 +291,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
return $scope.panel.interval;
};
$scope.colors = [
"#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", //1
"#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477", //2
"#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0", //3
"#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93", //4
"#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7", //5
"#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B", //6
"#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7" //7
];
/**
* Fetch the data for a chunk of a queries results. Multiple segments occur when several indicies
* need to be consulted (like timestamped logstash indicies)
src/app/partials/dasheditor.html
+6 -50
View File
@@ -2,7 +2,7 @@
<div class="pull-right editor-title">Dashboard settings</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General','Index','Rows','Controls']" data-title="{{tab}}">
<div ng-repeat="tab in ['General', 'Rows','Controls']" data-title="{{tab}}">
</div>
<div ng-repeat="tab in dashboard.current.nav" data-title="{{tab.type}}">
</div>
@@ -24,52 +24,8 @@
</div>
</div>
</div>
<div ng-show="editor.index == 1">
<div class="row-fluid">
<h4>Index Settings</h4>
<div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
<div class="span12">
<p class="small">
Time stamped indices use your selected time range to create a list of
indices that match a specified timestamp pattern. This can be very
efficient for some data sets (eg, logs) For example, to match the
default logstash index pattern you might use
<code>[logstash-]YYYY.MM.DD</code>. The [] in "[logstash-]" are
important as they instruct Kibana not to treat those letters as a
pattern.
Please also note that indices should rollover at midnight <strong>UTC</strong>.
</p>
<p class="small">
See <a href="http://momentjs.com/docs/#/displaying/format/">http://momentjs.com/docs/#/displaying/format/</a>
for documentation on date formatting.
</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<h6>Timestamping</h6><select class="input-small" ng-model="dashboard.current.index.interval" ng-options="f for f in ['none','hour','day','week','month','year']"></select>
</div>
<div class="span4" ng-show="dashboard.current.index.interval != 'none'">
<h6>Index pattern <small>Absolutes in []</small></h6>
<input type="text" class="input-medium" ng-model="dashboard.current.index.pattern">
</div>
<div class="span2" ng-show="dashboard.current.index.interval != 'none'">
<h6>Failover <i class="icon-question-sign" bs-tooltip="'If no indices match the pattern, failover to default index *NOT RECOMMENDED*'"></i></h6>
<input type="checkbox" ng-model="dashboard.current.failover" ng-checked="dashboard.current.failover" />
</div>
<div class="span4" ng-show="dashboard.current.failover || dashboard.current.index.interval == 'none'">
<h6>Default Index <small ng-show="dashboard.current.index.interval != 'none'">If index not found</small></h6>
<input type="text" class="input-medium" ng-model="dashboard.current.index.default">
</div>
<div class="span2">
<h6>Preload Fields <i class="icon-question-sign" bs-tooltip="'Preload available fields for the purpose of autocomplete. Turn this off if you have many fields'"></i></h6>
<input type="checkbox" ng-model="dashboard.current.index.warm_fields" ng-checked="dashboard.current.index.warm_fields" />
</div>
</div>
</div>
<div ng-show="editor.index == 2">
<div ng-show="editor.index == 1">
<div class="row-fluid">
<div class="span12">
<table class="table table-condensed table-striped">
@@ -105,7 +61,7 @@
</div>
</div>
<div ng-show="editor.index == 3">
<div ng-show="editor.index == 2">
<h5>Pulldowns</h5>
<div class="row-fluid">
<div class="span2" ng-repeat="pulldown in dashboard.current.pulldowns">
@@ -117,7 +73,7 @@
</div>
</div>
<div ng-show="editor.index == 3" ng-controller="dashLoader">
<div ng-show="editor.index == 2" ng-controller="dashLoader">
<h5>Save to</h5>
<div class="row-fluid">
<div class="span2">
@@ -162,7 +118,7 @@
</div>
</div>
<div ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="editor.index == 4+$index">
<div ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="editor.index == 3+$index">
<ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
</div>
@@ -171,6 +127,6 @@
</div>
<div class="modal-footer">
<button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 2">Create Row</button>
<button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 1">Create Row</button>
<button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
</div>
src/config.js
+2 -2
View File
@@ -38,10 +38,10 @@ function (Settings) {
* dashboard, but this list is used in the "add panel" interface.
*/
panel_names: [
'graph',
'text',
'column',
'histogram'
'histogram',
'graphite'
]
});
});
src/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Kibana 3</title>
<title>Grafana</title>
<link rel="stylesheet" href="css/bootstrap.light.min.css" title="Light">
<link rel="stylesheet" href="css/timepicker.css">
<link rel="stylesheet" href="css/animate.min.css">