mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
Break out index.js into seperate directories and files
This commit is contained in:
Rashid Khan
parent
360a1f2821
commit
5e6cc7979d
8 changed files with 180 additions and 267 deletions
105
src/kibana/apps/dashboard/directives/grid.js
Normal file
105
src/kibana/apps/dashboard/directives/grid.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
define(function (require) {
|
||||
var angular = require('angular');
|
||||
var _ = require('lodash');
|
||||
var $ = require('jquery');
|
||||
|
||||
require('gridster');
|
||||
require('css!../../../../bower_components/gridster/dist/jquery.gridster.css');
|
||||
|
||||
var app = angular.module('app/dashboard');
|
||||
|
||||
app.directive('dashboardGrid', function ($compile) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope : {
|
||||
grid: '=',
|
||||
control: '='
|
||||
},
|
||||
link: function ($scope, elem) {
|
||||
var width,
|
||||
gridster,
|
||||
widgets;
|
||||
|
||||
if (_.isUndefined($scope.control) || _.isUndefined($scope.grid)) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.addClass('gridster');
|
||||
|
||||
width = elem.width();
|
||||
|
||||
var init = function () {
|
||||
initGrid();
|
||||
elem.on('click', 'li i.remove', function (event) {
|
||||
var target = event.target.parentNode;
|
||||
gridster.remove_widget(event.target.parentNode);
|
||||
});
|
||||
|
||||
$scope.control.unserializeGrid($scope.grid);
|
||||
};
|
||||
|
||||
var initGrid = function () {
|
||||
gridster = elem.gridster({
|
||||
autogenerate_stylesheet: false,
|
||||
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');
|
||||
gridster.generate_stylesheet({namespace: '.gridster'});
|
||||
};
|
||||
|
||||
$scope.control.clearGrid = function (cb) {
|
||||
gridster.remove_all_widgets();
|
||||
};
|
||||
|
||||
$scope.control.unserializeGrid = function (grid) {
|
||||
_.each(grid, function (panel) {
|
||||
$scope.control.addWidget(panel);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.control.serializeGrid = function () {
|
||||
console.log(gridster.serialize());
|
||||
return gridster.serialize();
|
||||
};
|
||||
|
||||
$scope.control.addWidget = function (panel) {
|
||||
panel = panel || {};
|
||||
_.defaults(panel, {
|
||||
size_x: 3,
|
||||
size_y: 2,
|
||||
params: {
|
||||
type: 'new'
|
||||
}
|
||||
});
|
||||
var wgd = gridster.add_widget('<li />',
|
||||
panel.size_x, panel.size_y, panel.col, panel.row);
|
||||
wgd.append('<dashboard-panel params=\'' + JSON.stringify(panel.params) + '\' />');
|
||||
wgd.data('params', panel.params);
|
||||
|
||||
$compile(wgd)($scope);
|
||||
};
|
||||
|
||||
// Start the directive
|
||||
init();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
});
|
||||
18
src/kibana/apps/dashboard/directives/panel.js
Normal file
18
src/kibana/apps/dashboard/directives/panel.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
define(function (require) {
|
||||
var angular = require('angular');
|
||||
|
||||
var app = angular.module('app/dashboard');
|
||||
|
||||
app.directive('dashboardPanel', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
params: '@'
|
||||
},
|
||||
compile: function (elem, attrs) {
|
||||
var params = JSON.parse(attrs.params);
|
||||
elem.replaceWith(params.type + '<i class="link pull-right fa fa-times remove" />');
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
<div ng-controller="dashboard" class="dashboard-container">
|
||||
<nav class="navbar navbar-default navbar-static-top">
|
||||
<div class="navbar-brand">
|
||||
{{dashboard.title}}
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<span class="navbar-brand pull-left">
|
||||
{{dashboard.title}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a class="link" ng-click="gridControl.addWidget()"><i class="fa fa-plus"></i></a></li>
|
||||
<li><a class="link" ng-click="openSave()"><i class="fa fa-save"></i></a></li>
|
||||
<li><a class="link" ng-click="openLoad()"><i class="fa fa-folder-open"></i></a></li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav pull-left">
|
||||
<li><a class="navbar-link" ng-click="openSave()"><i class="fa fa-save"></i></a></li>
|
||||
<li><a class="navbar-link" ng-click="openLoad()"><i class="fa fa-folder-open"></i></a></li>
|
||||
<li><a class="navbar-link" ng-click="gridControl.addWidget()"><i class="fa fa-plus"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<config config-template="configTemplate" config-object="configurable" config-close="configClose" config-submit="configSubmit"></config>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@ define(function (require) {
|
|||
var $ = require('jquery');
|
||||
var configFile = require('../../../config');
|
||||
|
||||
|
||||
require('css!./styles/main.css');
|
||||
require('css!../../../bower_components/gridster/dist/jquery.gridster.css');
|
||||
require('directives/config');
|
||||
require('gridster');
|
||||
require('apps/dashboard/directives/grid');
|
||||
require('apps/dashboard/directives/panel');
|
||||
|
||||
//require('apps/dashboard/services/dashboard');
|
||||
|
||||
|
||||
|
||||
var app = angular.module('app/dashboard');
|
||||
|
|
@ -19,23 +21,38 @@ define(function (require) {
|
|||
|
||||
// Passed in the grid attr to the directive so we can access the directive's function from
|
||||
// the controller and view
|
||||
$scope.gridControl = {foo: true};
|
||||
$scope.gridControl = {};
|
||||
|
||||
$scope.openSave = function () {
|
||||
$scope.configTemplate = 'kibana/apps/dashboard/partials/saveDashboard.html';
|
||||
$scope.configClose = function () {
|
||||
console.log('SAVE close');
|
||||
};
|
||||
var template = 'kibana/apps/dashboard/partials/saveDashboard.html';
|
||||
|
||||
// Close if already open
|
||||
$scope.configTemplate = $scope.configTemplate === template ? undefined : template;
|
||||
|
||||
$scope.configSubmit = function () {
|
||||
$scope.save($scope.dashboard.title);
|
||||
};
|
||||
};
|
||||
|
||||
$scope.openLoad = function () {
|
||||
$scope.configTemplate = 'kibana/apps/dashboard/partials/loadDashboard.html';
|
||||
$scope.configClose = function () {
|
||||
console.log('LOAD close');
|
||||
};
|
||||
var template = 'kibana/apps/dashboard/partials/loadDashboard.html';
|
||||
|
||||
// Close if already open
|
||||
$scope.configTemplate = $scope.configTemplate === template ? undefined : template;
|
||||
|
||||
var search = courier.createSource('search')
|
||||
.index(configFile.kibanaIndex)
|
||||
.type('dashboard')
|
||||
.size(20)
|
||||
.$scope($scope)
|
||||
.inherits(courier.rootSearchSource)
|
||||
.on('results', function (res) {
|
||||
console.log(res.hits);
|
||||
$scope.configurable.searchResults = res.hits.hits;
|
||||
});
|
||||
|
||||
// TODO: Find out why results is fired twice
|
||||
search.fetch();
|
||||
};
|
||||
|
||||
$scope.save = function (title) {
|
||||
|
|
@ -50,23 +67,11 @@ define(function (require) {
|
|||
});
|
||||
};
|
||||
|
||||
$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.load = function (schema) {
|
||||
_.assign($scope.dashboard, schema);
|
||||
|
||||
$scope.gridControl.clearGrid();
|
||||
$scope.gridControl.unserializeGrid($scope.dashboard.panels);
|
||||
};
|
||||
|
||||
$scope.dashboard = {
|
||||
|
|
@ -133,107 +138,8 @@ define(function (require) {
|
|||
|
||||
$scope.configurable = {
|
||||
dashboard: $scope.dashboard,
|
||||
load: $scope.load
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
|
||||
app.directive('dashboardPanel', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
params: '@'
|
||||
},
|
||||
compile: function (elem, attrs) {
|
||||
var params = JSON.parse(attrs.params);
|
||||
elem.replaceWith(params.type + '<i class="link pull-right fa fa-times remove" />');
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
app.directive('dashboardGrid', function ($compile) {
|
||||
return {
|
||||
restrict: 'A',
|
||||
scope : {
|
||||
grid: '=',
|
||||
control: '='
|
||||
},
|
||||
link: function ($scope, elem) {
|
||||
var width, gridster;
|
||||
|
||||
if (_.isUndefined($scope.control) || _.isUndefined($scope.grid)) {
|
||||
return;
|
||||
}
|
||||
|
||||
elem.addClass('gridster');
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
$scope.control.unserializeGrid($scope.grid);
|
||||
};
|
||||
|
||||
$scope.control.clearGrid = function (cb) {
|
||||
gridster.remove_all_widgets(cb);
|
||||
};
|
||||
|
||||
$scope.control.unserializeGrid = function (grid) {
|
||||
_.each(grid, function (panel) {
|
||||
$scope.control.addWidget(panel);
|
||||
});
|
||||
};
|
||||
|
||||
$scope.control.serializeGrid = function () {
|
||||
console.log(gridster.serialize());
|
||||
return gridster.serialize();
|
||||
};
|
||||
|
||||
$scope.control.addWidget = function (panel) {
|
||||
panel = panel || {};
|
||||
_.defaults(panel, {
|
||||
size_x: 3,
|
||||
size_y: 2,
|
||||
params: {
|
||||
type: 'new'
|
||||
}
|
||||
});
|
||||
var wgd = gridster.add_widget('<li />',
|
||||
panel.size_x, panel.size_y, panel.col, panel.row);
|
||||
wgd.append('<dashboard-panel params=\'' + JSON.stringify(panel.params) + '\' />');
|
||||
wgd.data('params', panel.params);
|
||||
$compile(wgd)($scope);
|
||||
};
|
||||
|
||||
// Start the directive
|
||||
init();
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Load</label>
|
||||
<input type="text" ng-model="configObject.dashboard.title" class="form-control" placeholder="Dashboard title">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Load</button>
|
||||
<ul class="nav nav-pills">
|
||||
<li ng-repeat="res in configObject.searchResults | orderBy:'_source.title'" ng-class="{active: configObject.dashboard.title == res._source.title}">
|
||||
<a ng-click="configObject.load(res._source)">{{res._source.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
0
src/kibana/apps/dashboard/services/dashboard.js
Normal file
0
src/kibana/apps/dashboard/services/dashboard.js
Normal file
|
|
@ -5606,9 +5606,7 @@ button.close {
|
|||
.panel-body:before,
|
||||
.panel-body:after,
|
||||
.modal-footer:before,
|
||||
.modal-footer:after,
|
||||
.config:before,
|
||||
.config:after {
|
||||
.modal-footer:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
|
@ -5625,8 +5623,7 @@ button.close {
|
|||
.navbar-collapse:after,
|
||||
.pager:after,
|
||||
.panel-body:after,
|
||||
.modal-footer:after,
|
||||
.config:after {
|
||||
.modal-footer:after {
|
||||
clear: both;
|
||||
}
|
||||
.center-block {
|
||||
|
|
@ -6144,120 +6141,6 @@ div.application div.dashboard-container {
|
|||
[dashboard-grid] i.remove {
|
||||
cursor: pointer;
|
||||
}
|
||||
.config {
|
||||
position: relative;
|
||||
min-height: 50px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid transparent;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #e7e7e7;
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
|
||||
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
|
||||
z-index: 1000;
|
||||
border-width: 0 0 1px;
|
||||
border-radius: 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.config {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.config .navbar-brand {
|
||||
color: #777777;
|
||||
}
|
||||
.config .navbar-brand:hover,
|
||||
.config .navbar-brand:focus {
|
||||
color: #5e5e5e;
|
||||
background-color: transparent;
|
||||
}
|
||||
.config .navbar-text {
|
||||
color: #777777;
|
||||
}
|
||||
.config .navbar-nav > li > a {
|
||||
color: #777777;
|
||||
}
|
||||
.config .navbar-nav > li > a:hover,
|
||||
.config .navbar-nav > li > a:focus {
|
||||
color: #333333;
|
||||
background-color: transparent;
|
||||
}
|
||||
.config .navbar-nav > .active > a,
|
||||
.config .navbar-nav > .active > a:hover,
|
||||
.config .navbar-nav > .active > a:focus {
|
||||
color: #555555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.config .navbar-nav > .disabled > a,
|
||||
.config .navbar-nav > .disabled > a:hover,
|
||||
.config .navbar-nav > .disabled > a:focus {
|
||||
color: #cccccc;
|
||||
background-color: transparent;
|
||||
}
|
||||
.config .navbar-toggle {
|
||||
border-color: #dddddd;
|
||||
}
|
||||
.config .navbar-toggle:hover,
|
||||
.config .navbar-toggle:focus {
|
||||
background-color: #dddddd;
|
||||
}
|
||||
.config .navbar-toggle .icon-bar {
|
||||
background-color: #888888;
|
||||
}
|
||||
.config .navbar-collapse,
|
||||
.config .navbar-form {
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
.config .navbar-nav > .open > a,
|
||||
.config .navbar-nav > .open > a:hover,
|
||||
.config .navbar-nav > .open > a:focus {
|
||||
background-color: #e7e7e7;
|
||||
color: #555555;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.config .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: #777777;
|
||||
}
|
||||
.config .navbar-nav .open .dropdown-menu > li > a:hover,
|
||||
.config .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
color: #333333;
|
||||
background-color: transparent;
|
||||
}
|
||||
.config .navbar-nav .open .dropdown-menu > .active > a,
|
||||
.config .navbar-nav .open .dropdown-menu > .active > a:hover,
|
||||
.config .navbar-nav .open .dropdown-menu > .active > a:focus {
|
||||
color: #555555;
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
.config .navbar-nav .open .dropdown-menu > .disabled > a,
|
||||
.config .navbar-nav .open .dropdown-menu > .disabled > a:hover,
|
||||
.config .navbar-nav .open .dropdown-menu > .disabled > a:focus {
|
||||
color: #cccccc;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.config .navbar-link {
|
||||
color: #777777;
|
||||
}
|
||||
.config .navbar-link:hover {
|
||||
color: #333333;
|
||||
}
|
||||
.config .navbar-nav > .active > a {
|
||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
|
||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
|
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.config {
|
||||
border-radius: 0;
|
||||
}
|
||||
.dashboard-load {
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,9 +38,6 @@ div.application div.dashboard-container {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.config {
|
||||
.navbar;
|
||||
.navbar-default;
|
||||
.navbar-static-top;
|
||||
padding: 10px 15px;
|
||||
.dashboard-load {
|
||||
margin: 10px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue