diff --git a/pkg/api/dashboard_snapshot.go b/pkg/api/dashboard_snapshot.go index 38415e64fdc..03aaeee9942 100644 --- a/pkg/api/dashboard_snapshot.go +++ b/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) { diff --git a/src/app/features/dashboard/partials/shareDashboard.html b/src/app/features/dashboard/partials/shareDashboard.html index 320042b64bf..a27e63cda58 100644 --- a/src/app/features/dashboard/partials/shareDashboard.html +++ b/src/app/features/dashboard/partials/shareDashboard.html @@ -47,17 +47,20 @@
-

- +

+

+ A snapshot is an instant way to share 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 + anyone that have the link and can reach the URL. Read more. +

+
-
-
+
+
    -
  • +
  • Snapshot name
  • @@ -66,42 +69,43 @@
+
+
    +
  • + Expire +
    • +
  • + +
    • +
+
+
-
+

-
- +
+ - - -

- - - 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. - -

+ +
-
diff --git a/src/app/features/dashboard/shareSnapshotCtrl.js b/src/app/features/dashboard/shareSnapshotCtrl.js index 5c41b0ee649..dbb46ecb2cf 100644 --- a/src/app/features/dashboard/shareSnapshotCtrl.js +++ b/src/app/features/dashboard/shareSnapshotCtrl.js @@ -1,7 +1,8 @@ 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; }); diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html index c466d2b486e..a5d82bba262 100644 --- a/src/app/panels/graph/styleEditor.html +++ b/src/app/panels/graph/styleEditor.html @@ -32,10 +32,8 @@ -
-
Rendering
diff --git a/src/css/less/bootswatch.dark.less b/src/css/less/bootswatch.dark.less index 28c48cb1cb5..bb216b38c2d 100644 --- a/src/css/less/bootswatch.dark.less +++ b/src/css/less/bootswatch.dark.less @@ -376,7 +376,7 @@ div.subnav { } .btn-large { - padding: 22px 30px; + padding: 14px 23px; } .btn-small { diff --git a/src/css/less/bootswatch.light.less b/src/css/less/bootswatch.light.less index f555d17d96f..a369be152c7 100644 --- a/src/css/less/bootswatch.light.less +++ b/src/css/less/bootswatch.light.less @@ -322,7 +322,7 @@ div.subnav { } .btn-large { - padding: 22px 30px; + padding: 14px 23px; } .btn-small { diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 6b6e17ce834..3599d939f33 100644 --- a/src/css/less/grafana.less +++ b/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 { diff --git a/src/css/less/tightform.less b/src/css/less/tightform.less index 799d6119279..dd9a29246e7 100644 --- a/src/css/less/tightform.less +++ b/src/css/less/tightform.less @@ -197,4 +197,11 @@ select.tight-form-input { } } - +.tight-form-radio { + input[type=radio] { + margin: 0; + } + label { + display: inline; + } +}