More refinements of dashboard snapshot dialog, #1623

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

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

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