Skip to content

N
nexpie-grafana-theme
Commit 8e154148 by Rashid Khan
Options

Added column panel, refactored panel adding from rows to include panel specific… 

Added column panel, refactored panel adding from rows to include panel specific parameters. Moved call to init function to template to avoid double init
parent 30f036ad
Showing with 214 additions and 70 deletions
config.js
/*
elasticsearch: URL to your elasticsearch server
kibana_index: The default ES index to use for storing Kibana specific object
such as stored dashboards
timeformat: Format for time in histograms (might go away)
modules: Panel modules to load. In the future these will be inferred
from your initial dashboard, though if you share dashboards you
......@@ -13,9 +15,11 @@ If you need to configure the default dashboard, please see dashboard.js
*/
var config = new Settings(
{
elasticsearch: 'http://localhost:9200',
elasticsearch: 'http://demo.kibana.org',
kibana_index: "kibana-int",
timeformat: 'mm/dd HH:MM:ss',
modules: ['histogram','map','pie','table','stringquery','sort',
'timepicker','text','fields','hits','dashcontrol'],
'timepicker','text','fields','hits','dashcontrol',
'column'],
}
);
js/controllers.js
......@@ -65,6 +65,11 @@ angular.module('kibana.controllers', [])
$scope.global_alert = []
}
$scope.edit_path = function(type) {
if(type)
return 'panels/'+type+'/editor.html';
}
$scope.init();
})
......
js/filters.js
......@@ -3,3 +3,8 @@
'use strict';
angular.module('kibana.filters', [])
.filter('stringSort', function() {
return function(input) {
return input.sort();
}
});
\ No newline at end of file
panels/column/editor.html 0 → 100644
<div ng-controller="column">
<div class="row-fluid">
<h4>Add Panel to Column</h4>
<select class="input-medium" ng-model="new_panel.type" ng-options="f for f in _.without(config.modules,'column')| stringSort" ng-change="reset_panel(new_panel.type);send_render();"></select>
<small>Select Type</small>
<div ng-show="!(_.isUndefined(new_panel.type))">
<div column-edit panel="new_panel" config="config" row="row" dashboards="dashboards" type="new_panel.type"></div>
<button ng-click="add_panel(new_panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4>Panels</h4>
<table class="table table-condensed table-striped">
<thead>
<th>Title</th>
<th>Type</th>
<th>Height</th>
<th>Delete</th>
<th>Move</th>
</thead>
<tr ng-repeat="app in panel.panels">
<td>{{app.title}}</td>
<td>{{app.type}}</td>
<td><input type="text" class="input-small" ng-model="app.height"></input></td>
<td><i ng-click="panel.panels = _.without(panel.panels,app)" class="pointer icon-remove"></i></td>
<td><i ng-click="_.move(panel.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(panel.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
</tr>
</table>
</div>
</div>
</div>
\ No newline at end of file
panels/column/module.html 0 → 100644
<kibana-panel ng-controller="column" ng-init="init();">
<!-- Panels -->
<div ng-repeat="(name, panel) in panel.panels" ng-hide="panel.height == '0px'" class="row-fluid panel" style="min-height:{{panel.height}}; position:relative">
<!-- Error Panel -->
<div class="row-fluid">
<div class="span12 alert alert-error panel-error" ng-hide="!panel.error">
<a class="close" ng-click="panel.error=false">&times;</a>
<i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}}
</div>
</div>
<!-- Content Panel -->
<div class="row-fluid">
<div class="span12" style="margin-top:0px" ng-include="'panels/'+panel.type+'/module.html'"></div>
</div>
</div>
</kibana-panel>
\ No newline at end of file
panels/column/module.js 0 → 100644
angular.module('kibana.column', [])
.controller('column', function($scope, $rootScope) {
// Set and populate defaults
var _d = {
panels : [
]
}
_.defaults($scope.panel,_d);
$scope.init = function(){
$scope.reset_panel();
}
$scope.toggle_row = function(panel) {
panel.collapse = panel.collapse ? false : true;
if (!panel.collapse) {
$timeout(function() {
$scope.send_render();
});
}
}
$scope.send_render = function() {
$scope.$broadcast('render');
}
$scope.add_panel = function(panel) {
$scope.panel.panels.push(panel);
}
$scope.reset_panel = function(type) {
$scope.new_panel = {
loading: false,
error: false,
sizeable: false,
span: 12,
height: "150px",
editable: true,
group: ['default'],
type: type,
};
};
})
.directive('columnEdit', function($compile,$timeout) {
return {
scope : {
new_panel:"=panel",
row:"=",
config:"=",
dashboards:"=",
type:"=type"
},
link: function(scope, elem, attrs, ctrl) {
scope.$on('render', function () {
// Make sure the digest has completed and populated the attributes
$timeout(function() {
// Create a reference to the new_panel as panel so that the existing
// editors work with our isolate scope
scope.panel = scope.new_panel
var template = '<div ng-include src="\'panels/column/panelgeneral.html\'"></div>'
if(!(_.isUndefined(scope.type)) && scope.type != "")
template = template+'<div ng-include src="\'panels/'+scope.type+'/editor.html\'"></div>';
//var new_elem = $compile(angular.element(template))(scope))
elem.html($compile(angular.element(template))(scope));
})
})
}
}
}).filter('withoutColumn', function() {
return function() {
return _.without(config.modules,'column');
};
});
\ No newline at end of file
panels/column/panelgeneral.html 0 → 100644
<div class="row-fluid">
<div class="span4">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='panel.title'></input>
</div>
<div class="span4">
<label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
</div>
<div class="span2">
<label class="small">Height</label> <input type="text" class="input-mini" ng-model='panel.height'></input>
</div>
<div class="span1">
<label class="small"> Editable </label><input type="checkbox" ng-model="panel.editable" ng-checked="panel.editable">
</div>
</div>
\ No newline at end of file
panels/dashcontrol/editor.html
<div>
<div ng-controller="dashcontrol">
<h5>Allow saving to</h5>
<div class="row-fluid">
<div class="span2">
......
panels/dashcontrol/module.html
<kibana-panel ng-controller='dashcontrol'>
<kibana-panel ng-controller='dashcontrol' ng-init="init()">
<label class='small'>Dashboard Control</label>
<button class='btn' ng-show="panel.load.gist || panel.load.elasticsearch || panel.load.local" data-placement="bottom" data-unique="1" ng-click="elasticsearch_dblist(elasticsearch.query)" bs-popover="'panels/dashcontrol/load.html'"><i class='icon-folder-open'></i> <i class='icon-caret-down'></i></button>
<button class='btn' ng-show="panel.save.gist || panel.save.elasticsearch || panel.save.local || panel.save.default" data-placement="bottom" data-unique="1" bs-popover="'panels/dashcontrol/save.html'"><i class='icon-save'></i> <i class='icon-caret-down'></i></button>
......
panels/dashcontrol/module.js
......@@ -245,9 +245,6 @@ angular.module('kibana.dashcontrol', [])
return false
}
$scope.init();
})
.directive('dashUpload', function(timer, eventBus){
return {
......
panels/fields/editor.html
<div class="row-fluid">
<div class="row-fluid" ng-controller="fields">
<div class="span3"><h6>Popup Position</h6>
<select class="input-small" ng-model="panel.micropanel_position" ng-options="f for f in ['top','right','bottom','left']" ng-change="reload_list();"></select></span>
</div>
......
panels/fields/module.html
<kibana-panel ng-controller='fields'>
<kibana-panel ng-controller='fields' ng-init="init()">
<ul class="unstyled" style="height:{{row.height}};overflow-y:auto;overflow-x:hidden;" ng-class="{'inline': panel.arrange == 'horizontal'}">
<li ng-style="panel.style" ng-repeat="field in fields" >
<i class="pointer" ng-class="{'icon-check': _.indexOf(active,field)>-1,'icon-check-empty': _.indexOf(active,field)<0}" ng-click="toggle_field(field)"></i>
......
panels/fields/module.js
......@@ -64,5 +64,4 @@ angular.module('kibana.fields', [])
return _.indexOf($scope.active,field) > -1 ? ['label','label-info'] : '';
}
$scope.init();
})
\ No newline at end of file
panels/histogram/editor.html
<div class="row-fluid">
<div class="row-fluid" ng-controller='histogram'>
<div class="span3">
<form style="margin-bottom: 0px">
<h6>Label</h6>
......
panels/histogram/module.html
<kibana-panel ng-controller='histogram' style="height:{{row.height}}">
<div histogram params="{{panel}}" style="height:{{row.height}};position:relative"></div>
<kibana-panel ng-controller='histogram' ng-init="init()" style="height:{{row.height}}">
<div histogram params="{{panel}}" style="height:{{panel.height}};position:relative"></div>
</kibana-panel>
\ No newline at end of file
panels/histogram/module.js
......@@ -7,6 +7,7 @@ angular.module('kibana.histogram', [])
interval: secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
show : ['bars','y-axis','x-axis','legend'],
fill : 3,
height : $scope.panel.height || $scope.row.height,
timezone: 'browser', // browser, utc or a standard timezone
group : "default",
}
......@@ -128,9 +129,6 @@ angular.module('kibana.histogram', [])
$scope.get_data();
}
// Ready, init
$scope.init();
})
.directive('histogram', function() {
return {
......@@ -173,7 +171,7 @@ angular.module('kibana.histogram', [])
// Populate element. Note that jvectormap appends, does not replace.
scripts.wait(function(){
// Populate element
$.plot(elem, scope.data, {
try { $.plot(elem, scope.data, {
legend: {
show: show.legend,
position: "nw",
......@@ -206,6 +204,9 @@ angular.module('kibana.histogram', [])
hoverable: true,
}
})
} catch(e) {
console.log(e)
}
})
function tt(x, y, contents) {
......
panels/hits/editor.html
<div class="row-fluid">
<div class="row-fluid" ng-controller="hits">
<div class="span11">
The hits panel shows a simple count of how many records match your filtered query. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
</div>
......
panels/hits/module.html
<kibana-panel ng-controller='hits'>
<kibana-panel ng-controller='hits' ng-init="init()">
<p ng-style="panel.style">{{hits}}</p>
</kibana-panel>
\ No newline at end of file
panels/hits/module.js
......@@ -56,6 +56,4 @@ angular.module('kibana.hits', [])
$scope.get_data();
}
$scope.init();
})
panels/map/editor.html
<div class="row-fluid">
<div class="row-fluid" ng-controller="map">
<div class="span11">
The map panel uses 2 letter country or US state codes to plot concentrations on a map. Darker terroritories mean more records matched that area. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<form>
<h6>Field</h6>
<input type="text" class="input-small" ng-model="panel.field">
</form>
</div>
<div class="span6">
<form class="input-append">
<h6>Query</h6>
......@@ -12,13 +18,6 @@
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
</form>
</div>
<div class="span4">
<form class="input-append">
<h6>Field</h6>
<input type="text" class="input-small" ng-model="panel.field">
<button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
</form>
</div>
<div class="span1"><h6>Map</h6>
<select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
</div>
......
panels/map/module.html
<kibana-panel ng-controller='map'>
<div map params="{{panel}}" style="height:{{row.height}}"></div>
<kibana-panel ng-controller='map' ng-init="init()">
<div map params="{{panel}}" style="height:{{panel.height}}"></div>
</kibana-panel>
\ No newline at end of file
panels/map/module.js
......@@ -8,6 +8,7 @@ angular.module('kibana.map', [])
colors : ['#C8EEFF', '#0071A4'],
size : 100,
exclude : [],
height : $scope.panel.height || $scope.row.height,
group : "default",
}
_.defaults($scope.panel,_d)
......@@ -63,8 +64,6 @@ angular.module('kibana.map', [])
$scope.get_data();
}
$scope.init()
})
.directive('map', function() {
return {
......
panels/pie/editor.html
<div class="row-fluid" ng-switch="panel.mode">
<div class="row-fluid" ng-switch="panel.mode" ng-controller="pie">
<div ng-switch-when="terms">
<div class="row-fluid">
<div class="span4">
......
panels/pie/module.html
<kibana-panel ng-controller='pie'>
<div pie params="{{panel}}" style="height:{{row.height}};position:relative"></div>
<kibana-panel ng-controller='pie' ng-init="init()">
<div pie params="{{panel}}" style="height:{{panel.height}};position:relative"></div>
</kibana-panel>
\ No newline at end of file
panels/pie/module.js
......@@ -4,6 +4,7 @@ angular.module('kibana.pie', [])
// Set and populate defaults
var _d = {
query : { field:"_all", query:"*", goal: 1},
height : $scope.panel.height || $scope.row.height,
size : 10,
exclude : [],
donut : false,
......@@ -179,9 +180,6 @@ angular.module('kibana.pie', [])
$scope.get_data();
}
// Ready, init
$scope.init()
})
.directive('pie', function() {
return {
......
panels/sort/module.html
<kibana-panel ng-controller='sort' style="white-space: nowrap;">
<kibana-panel ng-controller='sort' ng-init="init()" style="white-space: nowrap;">
<label><small>{{panel.label}}</small></label>
<select style="width:85%" ng-model="panel.sort[0]" ng-change="set_sort()" ng-options="f for f in fields"></select>
<i ng-click="toggle_sort()" class="pointer" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
......
panels/sort/module.js
......@@ -25,6 +25,4 @@ angular.module('kibana.sort', [])
$scope.panel.sort[1] = $scope.panel.sort[1] == 'asc' ? 'desc' : 'asc';
$scope.set_sort();
}
$scope.init();
})
\ No newline at end of file
panels/stringquery/editor.html
<div>
<div ng-controller="stringquery">
<div class="row-fluid">
<div class="span3">
<label class="small">Mulit Query</label><input type="checkbox" ng-change="set_multi(panel.multi) "ng-model="panel.multi" ng-checked="panel.multi">
......
panels/stringquery/module.html
<kibana-panel ng-controller='stringquery'>
<kibana-panel ng-controller='stringquery' ng-init="init()">
<div ng-show="!panel.multi">
<form>
<table class="form-horizontal">
......
panels/stringquery/module.js
......@@ -58,5 +58,4 @@ angular.module('kibana.stringquery', [])
$scope.panel.query.splice(index,1);
}
$scope.init();
});
\ No newline at end of file
panels/table/editor.html
<div class="row-fluid">
<div class="row-fluid" ng-controller="table">
<div class="span12">
<form class="input-append">
<h5>Query</h5>
......
panels/table/module.html
<kibana-panel ng-controller='table'>
<div style="height:{{row.height}};overflow-y:auto;overflow-x:auto">
<kibana-panel ng-controller='table' ng-init='init()'>
<div style="height:{{panel.height}};overflow-y:auto;overflow-x:auto">
<div class="row-fluid">
<div class="span1 offset3" style="text-align:right">
<i ng-click="panel.offset = 0;get_data();" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
......
panels/table/module.js
......@@ -6,6 +6,7 @@ angular.module('kibana.table', [])
query : "*",
size : 100,
offset : 0,
height : $scope.panel.height || $scope.row.height,
sort : ['@timestamp','desc'],
group : "default",
style : {},
......@@ -137,6 +138,4 @@ angular.module('kibana.table', [])
$scope.get_data();
}
$scope.init();
});
\ No newline at end of file
panels/text/editor.html
<div>
<div ng-controller="text">
<label class="small">Font Size</label> <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['6pt','7pt','8pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select>
<label class=small>Content</label>
<textarea ng-model="panel.content" rows="6" style="width:95%"></textarea>
......
panels/text/module.html
<kibana-panel ng-controller='text'>
<kibana-panel ng-controller='text' ng-init="init()">
<p ng-show='!panel.allowhtml' ng-style="panel.style" ng-bind-html-unsafe="panel.content | striphtml | newlines"></p>
</kibana-panel>
\ No newline at end of file
panels/text/module.js
......@@ -11,7 +11,7 @@ angular.module('kibana.text', [])
$scope.init = function() {
}
$scope.init();
})
.filter('newlines', function(){
return function (input) {
......
panels/timepicker/editor.html
<div class="row-fluid">
<div class="row-fluid" ng-controller="timepicker">
<div class="span3">
<h6>Default Mode</h6>
<select style="width:85%" ng-model="panel.mode" ng-options="f for f in ['relative','absolute','since']"></select>
......
panels/timepicker/module.html
<kibana-panel ng-controller='timepicker' style="white-space: nowrap;">
<kibana-panel ng-controller='timepicker' ng-init="init()" style="white-space: nowrap;">
<div class="row-fluid" ng-switch="panel.mode">
<div ng-switch-when="absolute">
<div class="span5">
......
panels/timepicker/module.js
......@@ -271,7 +271,4 @@ angular.module('kibana.timepicker', [])
}
}
// Great, every function is ready, init.
$scope.init();
})
\ No newline at end of file
partials/dashboard.html
<div class="row-fluid container" style="margin-top:50px">
<!-- Rows -->
<div ng-controller="dashcontrol"></div>
<div ng-controller="dashcontrol" ng-init="init()"></div>
<div class="row-fluid" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows">
<div class="span12">
<div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
......
partials/paneleditor.html
......@@ -9,9 +9,9 @@
<h4 style="text-transform: capitalize;">{{panel.type}} <small> panel settings</small></h4>
<div ng-include src="'panels/'+panel.type+'/editor.html'">No additional settings are available for this type of panel.</div>
<div ng-include src="edit_path(panel.type)">No additional settings are available for this type of panel.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" ng-click="dismiss();$broadcast('render')">Close</button>
<button type="button" class="btn btn-success" ng-click="dismiss();send_render()">Close</button>
</div>
\ No newline at end of file
partials/panelgeneral.html
......@@ -5,7 +5,7 @@
<div class="span4">
<label class="small">Group(s) (comma seperated)</label><input array-join type="text" class="input-medium" ng-model='panel.group'></input>
</div>
<div class="span2">
<div class="span2" ng-hide="panel.sizeable == false">
<label class="small">Span</label> <select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
</div>
<div class="span1">
......
partials/roweditor.html
......@@ -17,12 +17,12 @@
</div>
<div class="row-fluid">
<h4>New Panel</h4>
<select class="input-medium" ng-model="panel.type" ng-options="f for f in config.modules"></select>
<select class="input-medium" ng-model="panel.type" ng-options="f for f in config.modules|stringSort"></select>
<small>Select Type</small>
<div ng-show="!(_.isUndefined(panel.type))">
<div ng-include src="'partials/panelgeneral.html'"></div>
<!--<div ng-include src="'panels/'+panel.type+'/editor.html'"></div>-->
<div ng-include src="edit_path(panel.type)"></div>
<button ng-click="add_panel(row,panel); reset_panel();" class="btn btn-primary">Create Panel</button><br>
</div>
</div>
......@@ -40,7 +40,7 @@
<tr ng-repeat="panel in row.panels">
<td>{{panel.title}}</td>
<td>{{panel.type}}</td>
<td><select class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
<td><select ng-hide="panel.sizeable == false" class="input-mini" ng-model="panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
<td><i ng-click="row.panels = _.without(row.panels,panel)" class="pointer icon-remove"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
......
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