IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Updated design for snapshot sharing dialog, #1596

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-03-23 13:58:30 -04:00
parent a5fac17f2b
commit 7614ddb318
5 changed files with 89 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/api/api.go
View File

@ -43,6 +43,7 @@ func Register(r *macaron.Macaron) {
// dashboard snapshots
r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot)
r.Get("/dashboard/snapshots/*", Index)
r.Get("/api/snapshots/:key", GetDashboardSnapshot)
// authed api

10
src/app/features/dashboard/dashboardSrv.js
View File

@ -67,6 +67,16 @@ function (angular, $, kbn, _, moment) {
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) {
return _.reduce(row.panels, function(p,v) {
return p + v.span;

93
src/app/features/dashboard/partials/shareDashboard.html
View File

@ -1,7 +1,7 @@
<div class="modal-body gf-box gf-box-no-margin" ng-controller="SharePanelCtrl">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-share"></i>
<i class="fa fa-share-square-o"></i>
Share Dashboard
</div>
@ -45,48 +45,65 @@
</div>
</div>
<div class="gf-box-body" ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl">
<h5>Share dashboard and data with anyone</h5>
<p>
<em>
<div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl">
<h4 class="share-snapshot-header">
<i ng-if="!loading" class="fa fa-camera"></i>
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
Create dashboard with embedded data and share with anyone
</h4>
<div class="editor-row" style="margin: 11px 20px 33px 20px">
<div class="section">
<div ng-if="!snapshotUrl">
<div class="tight-form last">
<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>
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-if="!snapshotUrl" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
</button>
<button class="btn btn-primary btn-large" ng-click="createSnapshot(true)" ng-if="!snapshotUrl" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
Publish Snapshot <i class="fa fa-long-arrow-right"></i> snapshots.raintank.io
</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 ng-if="!snapshotUrl" style="margin-bottom: 20px;">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Snapshot name
</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="gf-form-row">
<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">
<input type="text" data-share-panel-url class="input" ng-model='snapshotUrl'></input>
</span>
</div>
</div>
<button class="btn btn-success btn" ng-click="createSnapshot()" ng-if="!snapshotUrl" ng-disabled="loading">
Create snapshot
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
</button>
<button class="btn btn-primary btn" ng-click="createSnapshot(true)" ng-if="!snapshotUrl" ng-disabled="loading">
Create Public snapshot (snapshots.raintank.io)
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
</button>
</div>
</div>

5
src/app/features/dashboard/shareSnapshotCtrl.js
View File

@ -21,6 +21,11 @@ function (angular) {
var dash = angular.copy($scope.dashboard);
dash.title = $scope.snapshot.name;
dash.forEachPanel(function(panel){
panel.targets = [];
panel.links = [];
});
var apiUrl = '/api/snapshots';
if (makePublic) {

18
src/css/less/gfbox.less
View File

@ -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;
}
}