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"> <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="container-fluid">
<div class="navbar-header"> <div class="navbar-header">
<span class="navbar-brand pull-left"> <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="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="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="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> <li><a class="navbar-link" ng-click="refresh()"><i class="fa fa-refresh"></i></a></li>
</ul> </ul>
</div> </div>

View file

@ -62,10 +62,12 @@ define(function (require) {
$scope.configTemplate = new ConfigTemplate({ $scope.configTemplate = new ConfigTemplate({
save: require('text!./partials/save_dashboard.html'), save: require('text!./partials/save_dashboard.html'),
load: require('text!./partials/load_dashboard.html'), load: require('text!./partials/load_dashboard.html'),
share: require('text!./partials/share.html'),
pickVis: require('text!./partials/pick_visualization.html') pickVis: require('text!./partials/pick_visualization.html')
}); });
$scope.openSave = _.partial($scope.configTemplate.toggle, 'save'); $scope.openSave = _.partial($scope.configTemplate.toggle, 'save');
$scope.openShare = _.partial($scope.configTemplate.toggle, 'share');
$scope.openLoad = _.partial($scope.configTemplate.toggle, 'load'); $scope.openLoad = _.partial($scope.configTemplate.toggle, 'load');
$scope.openAdd = _.partial($scope.configTemplate.toggle, 'pickVis'); $scope.openAdd = _.partial($scope.configTemplate.toggle, 'pickVis');
$scope.refresh = _.bindKey(courier, 'fetch'); $scope.refresh = _.bindKey(courier, 'fetch');
@ -115,7 +117,14 @@ define(function (require) {
$scope.opts = { $scope.opts = {
dashboard: dash, dashboard: dash,
save: $scope.save, 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'); $scope.$broadcast('application.load');

View file

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