Make dashboards embeddedable

This commit is contained in:
Rashid Khan 2014-06-12 09:51:47 -07:00
parent b7b933cee0
commit b923a3db5d
5 changed files with 26 additions and 5 deletions

View file

@ -1,5 +1,5 @@
<div dashboard-app class="dashboard-container">
<nav class="navbar navbar-default navbar-static-top">
<nav ng-show="!appEmbedded" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand pull-left">
@ -11,6 +11,7 @@
<li><a class="navbar-link" ng-click="openAdd()"><i class="fa fa-plus"></i></a></li>
<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="openShare()"><i class="fa fa-code"></i></a></li>
<li><a class="navbar-link" ng-click="refresh()"><i class="fa fa-refresh"></i></a></li>
</ul>
</div>

View file

@ -62,10 +62,12 @@ define(function (require) {
$scope.configTemplate = new ConfigTemplate({
save: require('text!./partials/save_dashboard.html'),
load: require('text!./partials/load_dashboard.html'),
share: require('text!./partials/share.html'),
pickVis: require('text!./partials/pick_visualization.html')
});
$scope.openSave = _.partial($scope.configTemplate.toggle, 'save');
$scope.openShare = _.partial($scope.configTemplate.toggle, 'share');
$scope.openLoad = _.partial($scope.configTemplate.toggle, 'load');
$scope.openAdd = _.partial($scope.configTemplate.toggle, 'pickVis');
$scope.refresh = _.bindKey(courier, 'fetch');
@ -115,7 +117,14 @@ define(function (require) {
$scope.opts = {
dashboard: dash,
save: $scope.save,
addVis: $scope.addVis
addVis: $scope.addVis,
shareData: function () {
return {
link: $location.absUrl(),
// This sucks, but seems like the cleanest way. Uhg.
embed: $location.absUrl().replace('?', '?embed&')
};
}
};
$scope.$broadcast('application.load');

View file

@ -2,8 +2,8 @@
<div class="panel-heading">
<span class="panel-title">{{vis.title}}</span>
<div class="btn-group pull-right">
<a ng-href="#visualize/edit/{{vis.title}}"><i class="fa fa-pencil"></i></a>
<a ng-click="remove()"><i class="fa fa-times"></i></a>
<a ng-show="!appEmbedded" ng-href="#visualize/edit/{{vis.title}}"><i class="fa fa-pencil"></i></a>
<a ng-show="!appEmbedded" ng-click="remove()"><i class="fa fa-times"></i></a>
</div>
<div class="clearfix"></div>
</div>

View file

@ -0,0 +1,11 @@
<form role="form" class="vis-share">
<div class="form-group">
<label>Embed this dashboard. <small>Copy code into your html source. Note all clients must still be able to access kibana</small></label>
<div class="form-control" disabled>&lt;iframe src="{{opts.shareData().embed}}" height="600" width="800"&gt;&lt;/iframe&gt;</div>
</div>
<div class="form-group">
<label>Share a link</label>
<div class="form-control" disabled>{{opts.shareData().link}}</div>
</div>
</form>

View file

@ -1,7 +1,7 @@
<form role="form" class="vis-share">
<div class="form-group">
<label>Embed this visualization. <small>Copy code into your html source. Note all clients must still be able to access kibana</small></label>
<div class="form-control" disabled>&lt;iframe src="{{conf.shareData().embed}}" height="400" width="600"&gt;</iframe></div>
<div class="form-control" disabled>&lt;iframe src="{{conf.shareData().embed}}" height="400" width="600"&gt;&lt;/iframe&gt;</div>
</div>
<div class="form-group">