Commit 54eae2e3 by Torkel Ödegaard

addded graphiteUrl to config.js

parent d760468c
...@@ -2,3 +2,4 @@ node_modules ...@@ -2,3 +2,4 @@ node_modules
.aws-config.json .aws-config.json
dist dist
web.config web.config
config.dev.js
\ No newline at end of file
...@@ -5,7 +5,7 @@ require.config({ ...@@ -5,7 +5,7 @@ require.config({
baseUrl: 'app', baseUrl: 'app',
// urlArgs: 'r=@REV@', // urlArgs: 'r=@REV@',
paths: { paths: {
config: '../config', config: '../config.dev',
settings: 'components/settings', settings: 'components/settings',
kbn: 'components/kbn', kbn: 'components/kbn',
......
...@@ -12,7 +12,8 @@ function (_) { ...@@ -12,7 +12,8 @@ function (_) {
var defaults = { var defaults = {
elasticsearch : "http://"+window.location.hostname+":9200", elasticsearch : "http://"+window.location.hostname+":9200",
panel_names : [], panel_names : [],
kibana_index : 'kibana-int' kibana_index : 'kibana-int',
graphiteUrl : null,
}; };
// This initializes a new hash on purpose, to avoid adding parameters to // This initializes a new hash on purpose, to avoid adding parameters to
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
"rows": [ "rows": [
{ {
"title": "Intro", "title": "Intro",
"height": "150px", "height": "400px",
"editable": true, "editable": true,
"collapse": false, "collapse": false,
"collapsable": false, "collapsable": false,
...@@ -55,90 +55,6 @@ ...@@ -55,90 +55,6 @@
} }
], ],
"notice": true "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, "editable": true,
......
<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>
\ No newline at end of file
<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>
\ No newline at end of file
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!');
}
};
});
});
\ No newline at end of file
<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> <style>
.histogram-legend { .histogram-legend {
display:inline-block; display:inline-block;
......
...@@ -20,6 +20,7 @@ define([ ...@@ -20,6 +20,7 @@ define([
'moment', 'moment',
'./timeSeries', './timeSeries',
'./graphiteUtil', './graphiteUtil',
'config',
'jquery.flot', 'jquery.flot',
'jquery.flot.events', 'jquery.flot.events',
'jquery.flot.selection', 'jquery.flot.selection',
...@@ -28,14 +29,14 @@ define([ ...@@ -28,14 +29,14 @@ define([
'jquery.flot.stack', 'jquery.flot.stack',
'jquery.flot.stackpercent' 'jquery.flot.stackpercent'
], ],
function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil, config) {
'use strict'; 'use strict';
var module = angular.module('kibana.panels.histogram', []); var module = angular.module('kibana.panels.graphite', []);
app.useModule(module); app.useModule(module);
module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) { module.controller('graphite', function($scope, querySrv, dashboard, filterSrv) {
$scope.panelMeta = { $scope.panelMeta = {
modals : [ modals : [
{ {
...@@ -48,11 +49,11 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -48,11 +49,11 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
editorTabs : [ editorTabs : [
{ {
title:'Style', title:'Style',
src:'app/panels/histogram/styleEditor.html' src:'app/panels/graphite/styleEditor.html'
}, },
{ {
title:'Queries', title:'Queries',
src:'app/panels/histogram/queriesEditor.html' src:'app/panels/graphite/queriesEditor.html'
}, },
], ],
status : "Stable", status : "Stable",
...@@ -268,11 +269,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -268,11 +269,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
}; };
var graphOptions = { var graphOptions = {
graphite_url: 'http://metrics.prod.tradera.com/render/',
from: '-1h',
until: 'now', until: 'now',
height: '300',
width: '740',
targets: [ targets: [
{ {
name: 'series 1', name: 'series 1',
...@@ -281,12 +278,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -281,12 +278,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
//target: 'integral(prod.apps.touchweb.snake.counters.login.success.count)', //target: 'integral(prod.apps.touchweb.snake.counters.login.success.count)',
//target: "randomWalk('random1')", //target: "randomWalk('random1')",
} }
], ]
title: 'horizontal title',
vtitle: 'vertical title',
drawNullAsZero: false,
state: 'stacked',
hover_details: true,
}; };
$scope.getGraphiteData = function (options, parameters) { $scope.getGraphiteData = function (options, parameters) {
...@@ -294,7 +286,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -294,7 +286,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
accepts: { text: 'application/json' }, accepts: { text: 'application/json' },
cache: false, cache: false,
dataType: 'json', dataType: 'json',
url: options['graphite_url'], url: config.graphiteUrl,
type: "POST", type: "POST",
data: parameters.join('&'), data: parameters.join('&'),
error: function(xhr, textStatus, errorThrown) { error: function(xhr, textStatus, errorThrown) {
...@@ -327,7 +319,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -327,7 +319,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
var range = $scope.get_time_range(); var range = $scope.get_time_range();
var interval = $scope.get_interval(range); var interval = $scope.get_interval(range);
console.log('interval: ' + interval);
graphOptions.from = $.plot.formatDate(range.from, '%H%:%M_%Y%m%d'); graphOptions.from = $.plot.formatDate(range.from, '%H%:%M_%Y%m%d');
...@@ -513,7 +504,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) { ...@@ -513,7 +504,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
// Silly, but fixes bug in stacked percentages // Silly, but fixes bug in stacked percentages
fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10, fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
lineWidth: scope.panel.linewidth, lineWidth: scope.panel.linewidth,
steps: true steps: false
}, },
bars: { bars: {
show: scope.panel.bars, show: scope.panel.bars,
......
...@@ -291,16 +291,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -291,16 +291,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
return $scope.panel.interval; 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 * Fetch the data for a chunk of a queries results. Multiple segments occur when several indicies
* need to be consulted (like timestamped logstash indicies) * need to be consulted (like timestamped logstash indicies)
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="pull-right editor-title">Dashboard settings</div> <div class="pull-right editor-title">Dashboard settings</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <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>
<div ng-repeat="tab in dashboard.current.nav" data-title="{{tab.type}}"> <div ng-repeat="tab in dashboard.current.nav" data-title="{{tab.type}}">
</div> </div>
...@@ -24,52 +24,8 @@ ...@@ -24,52 +24,8 @@
</div> </div>
</div> </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="row-fluid">
<div class="span12"> <div class="span12">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
...@@ -105,7 +61,7 @@ ...@@ -105,7 +61,7 @@
</div> </div>
</div> </div>
<div ng-show="editor.index == 3"> <div ng-show="editor.index == 2">
<h5>Pulldowns</h5> <h5>Pulldowns</h5>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2" ng-repeat="pulldown in dashboard.current.pulldowns"> <div class="span2" ng-repeat="pulldown in dashboard.current.pulldowns">
...@@ -117,7 +73,7 @@ ...@@ -117,7 +73,7 @@
</div> </div>
</div> </div>
<div ng-show="editor.index == 3" ng-controller="dashLoader"> <div ng-show="editor.index == 2" ng-controller="dashLoader">
<h5>Save to</h5> <h5>Save to</h5>
<div class="row-fluid"> <div class="row-fluid">
<div class="span2"> <div class="span2">
...@@ -162,7 +118,7 @@ ...@@ -162,7 +118,7 @@
</div> </div>
</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> <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> <button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
</div> </div>
...@@ -171,6 +127,6 @@ ...@@ -171,6 +127,6 @@
</div> </div>
<div class="modal-footer"> <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> <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
</div> </div>
\ No newline at end of file
...@@ -38,10 +38,10 @@ function (Settings) { ...@@ -38,10 +38,10 @@ function (Settings) {
* dashboard, but this list is used in the "add panel" interface. * dashboard, but this list is used in the "add panel" interface.
*/ */
panel_names: [ panel_names: [
'graph',
'text', 'text',
'column', 'column',
'histogram' 'histogram',
'graphite'
] ]
}); });
}); });
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width"> <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/bootstrap.light.min.css" title="Light">
<link rel="stylesheet" href="css/timepicker.css"> <link rel="stylesheet" href="css/timepicker.css">
<link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/animate.min.css">
......
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