Small updates to share dashboard snapshot feature

pkg/api/dashboard_snapshot.go

@@ -9,7 +9,7 @@ import (
 )
 
 func CreateDashboardSnapshot(c *middleware.Context, cmd m.CreateDashboardSnapshotCommand) {
-	cmd.Key = util.GetRandomString(20)
+	cmd.Key = util.GetRandomString(32)
 
 	if err := bus.Dispatch(&cmd); err != nil {
 		c.JsonApiErr(500, "Failed to create snaphost", err)

src/app/features/dashboard/partials/shareDashboard.html

@@ -50,36 +50,33 @@
 		<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
+			Snapshot dashboard & visible 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 class="section"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 class="gf-form" ng-if="snapshotUrl">
+				<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>

src/app/features/dashboard/shareSnapshotCtrl.js

@@ -6,7 +6,7 @@ function (angular) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('ShareSnapshotCtrl', function($scope, $rootScope, $location, backendSrv, $timeout) {
+  module.controller('ShareSnapshotCtrl', function($scope, $rootScope, $location, backendSrv, $timeout, timeSrv) {
 
     $scope.snapshot = {
       name: $scope.dashboard.title
@@ -24,8 +24,11 @@ function (angular) {
 
     $scope.saveSnapshot = function(makePublic) {
       var dash = angular.copy($scope.dashboard);
+      // change title
       dash.title = $scope.snapshot.name;
-
+      // make relative times absolute
+      dash.time = timeSrv.timeRange();
+      // remove panel queries & links
       dash.forEachPanel(function(panel) {
         panel.targets = [];
         panel.links = [];

src/css/less/gfbox.less

@@ -97,20 +97,4 @@
   }
 }
 
-.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;
-  }
-}

src/css/less/grafana.less

@@ -294,3 +294,30 @@
     }
   }
 }
+
+.share-snapshot {
+  text-align: center;
+
+  .share-snapshot-header {
+    .fa {
+      position: absolute;
+      font-size: 600%;
+      left: 42%;
+      color: @grafanaTargetFuncBackground;
+      z-index: -1;
+    }
+
+    position: relative;
+    z-index: 1000;
+    line-height: 106px;
+    margin: 45px 0 22px 0;
+  }
+
+  .share-snapshot-link {
+    max-width: 716px;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+}