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

Style tweaks, add save/load. Refactor directive

Browse source
This commit is contained in:
Rashid Khan 2014-02-27 12:20:23 -07:00
parent 49e51e2e20
commit 6d26b6b5a3
7 changed files with 151 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/index.html
View file

@ -14,7 +14,7 @@
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body ng-controller="kibana">
<div>
<div class="content">
<nav class="navbar navbar-inverse navbar-static-top">
<ul class="nav navbar-nav">
<li ng-repeat="app in apps" ng-class="{active: activeApp == app.id}">
@ -22,7 +22,9 @@
</li>
</ul>
</nav>
<div kbn-view></div>
<div class="application" kbn-view></div>
<footer style="position:absolute;bottom:0px"></footer>
</div>
</body>
</html>

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

@ -1,4 +1,4 @@
<div ng-controller="dashboard">
<div ng-controller="dashboard" class="dashboard-container">
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-brand">
{{dashboard.title}}
@ -6,7 +6,9 @@
<ul class="nav navbar-nav pull-right">
<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>
<li><a class="link" ng-click="save(dashboard.title)"><i class="fa fa-save"></i></a></li>
<li><a class="link" ng-click="load(dashboard.title)"><i class="fa fa-folder-open"></i></a></li>
</ul>
</nav>

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

@ -2,6 +2,8 @@ define(function (require) {
var angular = require('angular');
var _ = require('lodash');
var $ = require('jquery');
var configFile = require('../../../config');
require('css!./styles/main.css');
require('css!../../../bower_components/gridster/dist/jquery.gridster.css');
@ -10,10 +12,43 @@ define(function (require) {
var app = angular.module('app/dashboard', []);
app.controller('dashboard', function ($scope) {
app.controller('dashboard', function ($scope, courier) {
// Passed in the grid attr to the directive so we can access the directive's function from
// the controller and view
$scope.gridControl = {};
$scope.save = function (title) {
var doc = courier.createSource('doc')
.index(configFile.kibanaIndex)
.type('dashboard')
.id(title);
doc.doIndex({title: title, panels: $scope.gridControl.serializeGrid()}, function (err) {
if (_.isUndefined(err)) { return; }
else { throw new Error(err); }
});
};
$scope.load = function (title) {
var doc = courier.createSource('doc')
.index(configFile.kibanaIndex)
.type('dashboard')
.id(title);
doc.on('results', function loadDash(resp) {
console.log(resp);
if (resp.found) {
$scope.dashboard = resp._source;
$scope.$apply();
}
doc.removeListener('results', loadDash);
});
courier.fetch();
};
$scope.dashboard = {
title: 'Logstash Dashboard',
panels: [
@ -99,49 +134,62 @@ define(function (require) {
width = elem.width();
var init = function () {
gridster = elem.gridster({
widget_margins: [5, 5],
widget_base_dimensions: [((width - 80) / 12), 100],
min_cols: 12,
max_cols: 12,
resize: {
enabled: true,
stop: function (event, ui, widget) {
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');
elem.on('click', 'li i.remove', function (event) {
var target = event.target.parentNode;
gridster.remove_widget(event.target.parentNode.parentNode);
});
$scope.control.unserializeGrid($scope.grid);
};
$scope.control.unserializeGrid = function (grid) {
_.each(grid, function (panel) {
var wgd = gridster.add_widget('<li><div class="content"></div></li>',
panel.size_x, panel.size_y, panel.col, panel.row);
wgd.children('.content').html('<beer></beer>');
//panel.params.type + ' <i class="link pull-right fa fa-times remove" />''
wgd.data('params', panel.params);
});
};
$scope.control.clearGrid = function (cb) {
gridster.remove_all_widgets(cb);
};
$scope.control.serializeGrid = function () {
console.log(gridster.serialize());
return gridster.serialize();
};
$scope.control.addWidget = function () {
$scope.control.addWidget = function (params) {
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,
max_cols: 12,
resize: {
enabled: true,
stop: function (event, ui, widget) {
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.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);
});
// Start the directive
init();
}
};
});

26
src/kibana/apps/dashboard/styles/main.css
View file

@ -338,16 +338,32 @@
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
}
div.application div.dashboard-container {
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
background-color: #1e6d74;
}
.gridster {
list-style-type: none;
display: block;
background-color: #1e6d74;
padding-bottom: 50px;
}
.gridster .preview-holder {
border: none!important;
background: #999999 !important;
}
.gridster li.gs-w {
border: 1px solid #999999;
background: #eeeeee;
background: #fff;
padding: 5px;
color: #1e6d74;
font-weight: bold;
font-size: 20px;
padding: 10px;
overflow: hidden;
}
.gridster {
list-style-type: none;
display: block;
ul.gridster {
margin-bottom: 0;
}

31
src/kibana/apps/dashboard/styles/main.less
View file

@ -1,18 +1,39 @@
@import "../../../../bower_components/bootstrap/less/variables.less";
@import "../../../../bower_components/bootstrap/less/theme.less";
@dashboard-background: #1E6D74;
// Dashboard app container stretches to fill height. Required because gridster is not full height
div.application div.dashboard-container {
position: absolute;
top: @navbar-height;
bottom: 0;
width: 100%;
background-color: @dashboard-background;
}
.gridster {
list-style-type: none;
display: block;
background-color: @dashboard-background;
padding-bottom:50px;
}
.gridster .preview-holder {
border: none!important;
background: @gray-light!important;
}
.gridster li.gs-w {
border: 1px solid @gray-light;
background: @gray-lighter;
background: #fff;
padding: 5px;
color: @dashboard-background;
font-weight: bold;
font-size: 20px;
padding: 10px;
overflow: hidden;
}
.gridster {
list-style-type: none;
display: block;
ul.gridster {
margin-bottom: 0;
}

6
src/kibana/styles/main.css
View file

@ -6115,6 +6115,12 @@ button.close {
body {
margin: 0px;
}
body div.content {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}
.navbar-nav li a {
cursor: pointer;
}

6
src/kibana/styles/main.less
View file

@ -4,6 +4,12 @@ body {
margin: 0px;
}
body div.content {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
}
//== Subnav
//