github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Refactor into isolate scope, add params object, add add/remove. Skeleton for panel directive

Browse source
This commit is contained in:
Rashid Khan 2014-02-26 16:51:37 -07:00
parent b58b604889
commit 49e51e2e20
2 changed files with 110 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/kibana/apps/dashboard/index.html
View file

@ -1,14 +1,17 @@
<div ng-controller="dashboard">
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-brand">
{{dashboard.title}}
</div>
<ul class="nav navbar-nav pull-right">
<li>
<a class="link" ng-click="serializeGrid()"><i class="fa fa-save"></i></a>
</li>
<li><a class="link" ng-click="gridControl.addWidget()"><i class="fa fa-plus"></i></a></li>
<li><a class="link" ng-click="gridControl.serializeGrid()"><i class="fa fa-save"></i></a></li>
</ul>
</nav>
<div class="container-default">
<ul dashboard-grid></ul>
<ul dashboard-grid grid="dashboard.panels" control="gridControl"></ul>
</div>
</div>

164
src/kibana/apps/dashboard/index.js
View file

@ -11,77 +11,104 @@ define(function (require) {
var app = angular.module('app/dashboard', []);
app.controller('dashboard', function ($scope) {
$scope.gridSettings = {
$scope.gridControl = {};
$scope.dashboard = {
title: 'Logstash Dashboard',
panels: [
{
col: 1,
row: 1,
size_x: 5,
size_y: 2,
params: { type: 'line' }
},
{
col: 6,
row: 1,
size_x: 4,
size_y: 2,
params: { type: 'bar' }
},
{
col: 10,
row: 1,
size_x: 3,
size_y: 1,
params: { type: 'table' }
},
{
col: 10,
row: 2,
size_x: 3,
size_y: 1,
params: { type: 'pie' }
},
{
col: 1,
row: 3,
size_x: 3,
size_y: 1,
params: { type: 'scatter' }
},
{
col: 4,
row: 3,
size_x: 3,
size_y: 1,
params: { type: 'map' }
},
{
col: 7,
row: 3,
size_x: 3,
size_y: 1,
params: { type: 'sparkline' }
},
{
col: 10,
row: 3,
size_x: 3,
size_y: 1,
params: { type: 'heatmap' }
}
]
};
$scope.panels = [
{
col: 1,
row: 1,
size_x: 5,
size_y: 2
},
{
col: 6,
row: 1,
size_x: 4,
size_y: 2
},
{
col: 10,
row: 1,
size_x: 3,
size_y: 1
},
{
col: 10,
row: 2,
size_x: 3,
size_y: 1
},
{
col: 1,
row: 3,
size_x: 3,
size_y: 1
},
{
col: 4,
row: 3,
size_x: 3,
size_y: 1
},
{
col: 7,
row: 3,
size_x: 3,
size_y: 1
},
{
col: 10,
row: 3,
size_x: 3,
size_y: 1
}
];
$scope.serializeGrid = function () {
console.log($scope.gridster.serialize());
});
app.directive('dashboardPanel', function () {
return {
template: '<li />'
};
});
app.directive('dashboardGrid', function () {
return {
restrict: 'A',
scope : {
grid: '=',
control: '='
},
link: function ($scope, elem) {
var width;
var width, gridster;
elem.addClass('gridster');
width = elem.width();
$scope.gridster = elem.gridster({
$scope.control.serializeGrid = function () {
console.log(gridster.serialize());
return gridster.serialize();
};
$scope.control.addWidget = function () {
gridster.add_widget('<li><div class="content"></div></li>', 3, 2);
};
gridster = elem.gridster({
widget_margins: [5, 5],
widget_base_dimensions: [((width - 80) / 12), 100],
min_cols: 12,
@ -89,16 +116,31 @@ define(function (require) {
resize: {
enabled: true,
stop: function (event, ui, widget) {
console.log(widget.height());
widget.children('.content').text('height: ' + widget.height() + ' / width: ' + widget.width());
console.log(widget.height(), widget.width());
}
},
serialize_params: function (el, wgd) {
return {
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y,
params: el.data('params')
};
}
}).data('gridster');
_.each($scope.panels, function (panel, i) {
$scope.gridster.add_widget('<li><div class="content"><h1><center>' +
i +
'</center></h1></div></li>', panel.size_x, panel.size_y, panel.col, panel.row);
_.each($scope.grid, function (panel) {
console.log(panel);
var wgd = gridster.add_widget('<li />',
panel.size_x, panel.size_y, panel.col, panel.row);
wgd.html(panel.params.type + ' <i class="link pull-right fa fa-times remove" />');
wgd.data('params', panel.params);
});
elem.on('click', 'li i.remove', function (event) {
var target = event.target.parentNode;
gridster.remove_widget(event.target.parentNode);
});
}
};