Skip to content

N
nexpie-grafana-theme
Commit f4280ca5 by Torkel Ödegaard
Options

More refinements of dashboard snapshot dialog, #1623

parent afeb65b3
Showing with 99 additions and 44 deletions
pkg/api/dashboard_snapshot.go
......@@ -30,7 +30,7 @@ func CreateDashboardSnapshot(c *middleware.Context, cmd m.CreateDashboardSnapsho
metrics.M_Api_Dashboard_Snapshot_Create.Inc(1)
c.JSON(200, util.DynMap{"key": cmd.Key, "url": setting.ToAbsUrl("/dashboard/snapshot/" + cmd.Key)})
c.JSON(200, util.DynMap{"key": cmd.Key, "url": setting.ToAbsUrl("dashboard/snapshot/" + cmd.Key)})
}
func createExternalSnapshot(c *middleware.Context, cmd m.CreateDashboardSnapshotCommand) {
......
src/app/features/dashboard/partials/shareDashboard.html
......@@ -47,17 +47,20 @@
<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>
<div class="share-snapshot-header" ng-if="step === 1">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
Snapshot dashboard & visible data and share with anyone
</h4>
<p class="share-snapshot-info-text">
A snapshot is an instant way to <strong>share</strong> a dashboard publicly. The visible data and series names
are embedded into the dashboard while metric queries and panel links are stripped. The snapshot can be viewed by
<strong>anyone</strong> that have the link and can reach the URL. <a href="http://docs.grafana.org/reference/snapshot" target="_blank">Read more</a>.
</p>
</div>
<div class="editor-row" style="margin: 11px 20px 33px 20px">
<div class="section"ng-if="!snapshotUrl">
<div class="tight-form last">
<div class="section" ng-if="step === 1">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<li class="tight-form-item" style="width: 110px;">
<strong>Snapshot name</strong>
</li>
<li>
......@@ -66,42 +69,43 @@
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 110px">
<strong>Expire</strong>
</li>
<li>
<select class="input-small tight-form-input last" style="width: 211px" ng-model="snapshot.expire" ng-options="f.value as f.text for f in expireOptions"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="gf-form" ng-if="snapshotUrl">
<div class="gf-form" ng-if="step === 2" style="margin-top: 55px">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-snapshot-link" 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 Link</button>
</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>
<div ng-if="step === 1">
<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i>
Local Snapshot
</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>
<button class="btn btn-primary btn-large" ng-click="createSnapshot(true)" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
Publish to snapshot.raintank.io
</button>
</div>
</div>
</div>
src/app/features/dashboard/shareSnapshotCtrl.js
define([
'angular',
'lodash',
],
function (angular) {
function (angular, _) {
'use strict';
var module = angular.module('grafana.controllers');
......@@ -9,23 +10,36 @@ function (angular) {
module.controller('ShareSnapshotCtrl', function($scope, $rootScope, $location, backendSrv, $timeout, timeSrv) {
$scope.snapshot = {
name: $scope.dashboard.title
name: $scope.dashboard.title,
expire: 0,
external: false,
};
$scope.step = 1;
$scope.expireOptions = [
{text: '1 Hour', value: 60*60},
{text: '1 Day', value: 60*60*24},
{text: '7 Days', value: 60*60*7},
{text: 'Never', value: 0},
];
$scope.createSnapshot = function(external) {
$scope.dashboard.snapshot = {
timestamp: new Date()
};
$scope.loading = true;
$scope.snapshot.external = external;
$rootScope.$broadcast('refresh');
$timeout(function() {
$scope.saveSnapshot(external);
$scope.saveSnapshot();
}, 3000);
};
$scope.saveSnapshot = function(external) {
$scope.saveSnapshot = function() {
var dash = angular.copy($scope.dashboard);
// change title
dash.title = $scope.snapshot.name;
......@@ -36,6 +50,13 @@ function (angular) {
panel.targets = [];
panel.links = [];
});
// remove annotations
dash.annotations.list = [];
// remove template queries
_.each(dash.templating.list, function(variable) {
variable.query = "";
variable.refresh = false;
});
// cleanup snapshotData
delete $scope.dashboard.snapshot;
......@@ -43,15 +64,23 @@ function (angular) {
delete panel.snapshotData;
});
backendSrv.post('/api/snapshots', {dashboard: dash, external: external}).then(function(results) {
var cmdData = {
dashboard: dash,
external: $scope.snapshot.external,
expires: $scope.snapshot.expires,
};
backendSrv.post('/api/snapshots', cmdData).then(function(results) {
$scope.loading = false;
if (external) {
if ($scope.snapshot.external) {
$scope.snapshotUrl = results.url;
} else {
var baseUrl = $location.absUrl().replace($location.url(), "");
$scope.snapshotUrl = baseUrl + '/dashboard/snapshot/' + results.key;
}
$scope.step = 2;
}, function() {
$scope.loading = false;
});
......
src/app/panels/graph/styleEditor.html
......@@ -32,10 +32,8 @@
<editor-opt-bool text="Stack" model="panel.stack" change="render()"></editor-opt-bool>
<editor-opt-bool text="Percent" model="panel.percentage" change="render()" tip="Stack as a percentage of total"></editor-opt-bool>
</div>
<div class="section">
<h5>Rendering</h5>
<div class="editor-option">
......
src/css/less/bootswatch.dark.less
......@@ -376,7 +376,7 @@ div.subnav {
}
.btn-large {
padding: 22px 30px;
padding: 14px 23px;
}
.btn-small {
......
src/css/less/bootswatch.light.less
......@@ -322,7 +322,7 @@ div.subnav {
}
.btn-large {
padding: 22px 30px;
padding: 14px 23px;
}
.btn-small {
......
src/css/less/grafana.less
......@@ -298,19 +298,36 @@
.share-snapshot {
text-align: center;
.share-snapshot-header {
.share-snapshot-info-text {
margin: 10px 143px;
}
.share-snapshot-warning {
background-color: @grafanaTargetFuncBackground;
padding: 5px;
.fa {
color: @orange;
}
}
.share-snapshot-header {
.fa-spinner {
position: absolute;
font-size: 600%;
left: 42%;
left: 44%;
color: @grafanaTargetFuncBackground;
z-index: -1;
}
position: relative;
z-index: 1000;
line-height: 106px;
margin: 45px 0 22px 0;
margin: 20px 0 22px 0;
}
.tight-form {
text-align: left;
label {
display: inline;
}
}
.share-snapshot-link {
......
src/css/less/tightform.less
......@@ -197,4 +197,11 @@ select.tight-form-input {
}
}
.tight-form-radio {
input[type=radio] {
margin: 0;
}
label {
display: inline;
}
}
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