Updated design for snapshot sharing dialog, #1596

pkg/api/api.go

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

src/app/features/dashboard/dashboardSrv.js

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

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

@@ -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">
+	<div class="gf-box-body share-snapshot ng-cloak" ng-cloak ng-if="editor.index === 1" ng-controller="ShareSnapshotCtrl">
-		<h5>Share dashboard and data with anyone</h5>
+
-		<p>
+		<h4 class="share-snapshot-header">
-			<em>
+			<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>

src/app/features/dashboard/shareSnapshotCtrl.js

@@ -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) {

src/css/less/gfbox.less

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