Skip to content

N
nexpie-grafana-theme
Commit 7614ddb3 by Torkel Ödegaard
Options

Updated design for snapshot sharing dialog, #1596

parent a5fac17f
Showing with 85 additions and 34 deletions
pkg/api/api.go
...@@ -43,6 +43,7 @@ func Register(r *macaron.Macaron) { ...@@ -43,6 +43,7 @@ func Register(r *macaron.Macaron) {
// dashboard snapshots // dashboard snapshots
r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot) r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot)
r.Get("/dashboard/snapshots/*", Index)
r.Get("/api/snapshots/:key", GetDashboardSnapshot) r.Get("/api/snapshots/:key", GetDashboardSnapshot)
// authed api // authed api
......
src/app/features/dashboard/dashboardSrv.js
...@@ -67,6 +67,16 @@ function (angular, $, kbn, _, moment) { ...@@ -67,6 +67,16 @@ function (angular, $, kbn, _, moment) {
return max + 1; return max + 1;
}; };
p.forEachPanel = function(callback) {
var i, j, row;
for (i = 0; i < this.rows.length; i++) {
row = this.rows[i];
for (j = 0; j < row.panels.length; j++) {
callback(row.panels[j], row);
}
}
};
p.rowSpan = function(row) { p.rowSpan = function(row) {
return _.reduce(row.panels, function(p,v) { return _.reduce(row.panels, function(p,v) {
return p + v.span; return p + v.span;
......
src/app/features/dashboard/partials/shareDashboard.html
<div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl"> <div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl">
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title"> <div class="gf-box-title">
<i class="fa fa-share"></i> <i class="fa fa-share-square-o"></i>
Share Dashboard Share Dashboard
</div> </div>
...@@ -45,48 +45,65 @@ ...@@ -45,48 +45,65 @@
</div> </div>
</div> </div>
<div class="gf-box-body" ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl"> <div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl">
<h5>Share dashboard and data with anyone</h5>
<p>
<em>
This will create a snapshot of the dashboard and the data currently visible. It will be saved and you will
get a link, anyone with this link will be able view view the dashboard and the data currently visible.
</em>
</p>
<div ng-if="!snapshotUrl" style="margin-bottom: 20px;"> <h4 class="share-snapshot-header">
<div class="tight-form last"> <i ng-if="!loading" class="fa fa-camera"></i>
<ul class="tight-form-list"> <i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<li class="tight-form-item" style="width: 100px"> Create dashboard with embedded data and share with anyone
Snapshot name </h4>
</li>
<li>
<input type="text" ng-model="snapshot.name" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="gf-form" ng-if="snapshotUrl"> <div class="editor-row" style="margin: 11px 20px 33px 20px">
<div class="gf-form-row"> <div class="section">
<button class="btn btn-inverse pull-right" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
<span class="gf-fluid-input"> <div ng-if="!snapshotUrl">
<input type="text" data-share-panel-url class="input" ng-model='snapshotUrl'></input> <div class="tight-form last">
</span> <ul class="tight-form-list">
<li class="tight-form-item">
<strong>Snapshot name</strong>
</li>
<li>
<input type="text" ng-model="snapshot.name" class="input-large tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="gf-form" ng-if="snapshotUrl">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
<br>
<br>
<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
</div>
</div>
</div> </div>
</div> </div>
<button class="btn btn-success btn" ng-click="createSnapshot()" ng-if="!snapshotUrl" ng-disabled="loading"> <button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-if="!snapshotUrl" ng-disabled="loading">
Create snapshot <i class="fa fa-save"></i>
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> Local Snapshot
</button> </button>
<button class="btn btn-primary btn" ng-click="createSnapshot(true)" ng-if="!snapshotUrl" ng-disabled="loading"> <button class="btn btn-primary btn-large" ng-click="createSnapshot(true)" ng-if="!snapshotUrl" ng-disabled="loading">
Create Public snapshot (snapshots.raintank.io) <i class="fa fa-cloud-upload"></i>
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> Publish Snapshot <i class="fa fa-long-arrow-right"></i> snapshots.raintank.io
</button> </button>
<p style="margin: 50px 30px">
<em class="large">
<i class="fa fa-info-circle"></i>
This will create a snapshot of the dashboard and the data currently visible. It will be saved and you will
get a link, anyone with this link will be able view view the dashboard and the data currently visible.
Panel metric queries and panel drilldown links are removed.
</em>
</p>
</div> </div>
</div> </div>
......
src/app/features/dashboard/shareSnapshotCtrl.js
...@@ -21,6 +21,11 @@ function (angular) { ...@@ -21,6 +21,11 @@ function (angular) {
var dash = angular.copy($scope.dashboard); var dash = angular.copy($scope.dashboard);
dash.title = $scope.snapshot.name; dash.title = $scope.snapshot.name;
dash.forEachPanel(function(panel){
panel.targets = [];
panel.links = [];
});
var apiUrl = '/api/snapshots'; var apiUrl = '/api/snapshots';
if (makePublic) { if (makePublic) {
......
src/css/less/gfbox.less
...@@ -96,3 +96,21 @@ ...@@ -96,3 +96,21 @@
} }
} }
} }
.share-snapshot {
text-align: center;
.share-snapshot-header {
.fa {
position: absolute;
font-size: 600%;
left: 41%;
color: @grafanaTargetFuncBackground;
z-index: -1;
}
position: relative;
z-index: 1000;
line-height: 106px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment