Export dashboard bulletfactory (#5160)

* create descriptions and styles for share dropdown

* Updating actual modal layout for Sharing

* Updated the modals to follow the new styles, fixed the wrapping issue on the main menu. Standardized buttons.

public/app/features/dashboard/dashnav/dashnav.html

@@ -26,16 +26,19 @@
 			<li>
 				<a class="pointer" ng-click="shareDashboard(0)">
 					<i class="fa fa-link"></i> Link to Dashboard
+					<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
 				</a>
 			</li>
 			<li>
 				<a class="pointer" ng-click="shareDashboard(1)">
 					<i class="icon-gf icon-gf-snapshot"></i>Snapshot
+					<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
 				</a>
 			</li>
       <li>
 				<a class="pointer" ng-click="shareDashboard(2)">
 					<i class="fa fa-cloud-upload"></i>Export
+					<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.net</div>
 				</a>
 			</li>
 		</ul>

public/app/features/dashboard/export/export_modal.html

@@ -4,56 +4,56 @@
 <!-- 	into another Grafana instance. -->
 <!-- </p> -->
 
-<div class="share-modal-big-icon">
-	<i class="fa fa-cloud-upload"></i>
-</div>
-
-<div class="share-snapshot-header">
-	<p class="share-snapshot-info-text">
-		Export the dashboard to a JSON file. The exporter will templatize the
-		dashboard's data sources to make it easy for other's to to import and reuse.
-		You can share dashboards on <a class="external-link" href="https://grafana.net">Grafana.net</a>
-	</p>
-</div>
-
-<div class="gf-form-group">
-	<div class="gf-form">
-		<label class="gf-form-label width-8">Title</label>
-		<input type="text" class="gf-form-input" ng-model="ctrl.dash.title" ng-change="ctrl.titleChanged()">
-		<label class="gf-form-label text-success" ng-show="ctrl.dash.title">
-			<i class="fa fa-check"></i>
-		</label>
-	</div>
-	<div class="gf-form gf-form--grow">
-		<label class="gf-form-label width-8">Description</label>
-		<input type="text" class="gf-form-input" ng-model="ctrl.dash.description" ng-change="ctrl.titleChanged()">
-		<label class="gf-form-label text-success" ng-show="ctrl.dash.description">
-			<i class="fa fa-check"></i>
-		</label>
+<div class="share-modal-header">
+	<div class="share-modal-big-icon">
+		<i class="fa fa-cloud-upload"></i>
 	</div>
-</div>
+	<div>
+		<p class="share-modal-info-text">
+			Export the dashboard to a JSON file. The exporter will templatize the
+			dashboard's data sources to make it easy for other's to to import and reuse.
+			You can share dashboards on <a class="external-link" href="https://grafana.net">Grafana.net</a>
+		</p>
 
-<!-- <h3 class="section&#45;heading"> -->
-<!-- 	Dashboard data sources -->
-<!-- </h3> -->
-<!--  -->
-<!-- <div class="gf&#45;form&#45;group"> -->
-<!-- 	<div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
-<!-- 		<div class="gf&#45;form width&#45;25"> -->
-<!-- 			<label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
-<!-- 			<input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
-<!-- 		</div> -->
-<!-- 	</div> -->
-<!-- </div> -->
+		<div class="gf-form-group">
+			<div class="gf-form">
+				<label class="gf-form-label width-8">Title</label>
+				<input type="text" class="gf-form-input" ng-model="ctrl.dash.title" ng-change="ctrl.titleChanged()">
+				<label class="gf-form-label text-success" ng-show="ctrl.dash.title">
+					<i class="fa fa-check"></i>
+				</label>
+			</div>
+			<div class="gf-form gf-form--grow">
+				<label class="gf-form-label width-8">Description</label>
+				<input type="text" class="gf-form-input" ng-model="ctrl.dash.description" ng-change="ctrl.titleChanged()">
+				<label class="gf-form-label text-success" ng-show="ctrl.dash.description">
+					<i class="fa fa-check"></i>
+				</label>
+			</div>
+		</div>
 
-<div class="gf-form-button-row">
-	<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
-		<i class="fa fa-save"></i> Save to file
-	</button>
-	<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.saveJson()">
-		<i class="fa fa-file-text-o"></i> View JSON
-	</button>
-	<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
-</div>
+		<!-- <h3 class="section&#45;heading"> -->
+		<!-- 	Dashboard data sources -->
+		<!-- </h3> -->
+		<!--  -->
+		<!-- <div class="gf&#45;form&#45;group"> -->
+		<!-- 	<div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
+		<!-- 		<div class="gf&#45;form width&#45;25"> -->
+		<!-- 			<label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
+		<!-- 			<input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
+		<!-- 		</div> -->
+		<!-- 	</div> -->
+		<!-- </div> -->
 
+		<div class="gf-form-button-row">
+			<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
+				<i class="fa fa-save"></i> Save to file
+			</button>
+			<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.saveJson()">
+				<i class="fa fa-file-text-o"></i> View JSON
+			</button>
+			<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
+		</div>
+
+	</div>
 </div>

public/app/features/dashboard/partials/shareModal.html

@@ -25,22 +25,23 @@
 </div>
 
 <script type="text/ng-template" id="shareEmbed.html">
-	<div class="share-modal-big-icon">
-		<i class="fa fa-code"></i>
-	</div>
-
-	<div class="share-snapshot-header">
-		<p class="share-snapshot-info-text">
-			The html code below can be pasted and included in another web page. Unless anonymous access
-			is enabled the user viewing that page need to be signed into grafana for the graph to load.
-		</p>
-	</div>
+	<div class="share-modal-header">
+		<div class="share-modal-big-icon">
+			<i class="fa fa-code"></i>
+		</div>
+		<div>
+			<p class="share-modal-info-text">
+				The html code below can be pasted and included in another web page. Unless anonymous access
+				is enabled the user viewing that page need to be signed into grafana for the graph to load.
+			</p>
 
-	<div ng-include src="'shareLinkOptions.html'"></div>
+			<div ng-include src="'shareLinkOptions.html'"></div>
 
-	<div class="gf-form-group section">
-		<div class="gf-form width-30">
-			<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
+			<div class="gf-form-group section">
+				<div class="gf-form width-30">
+					<textarea rows="5" data-share-panel-url class="gf-form-input width-30" ng-model='iframeHtml'></textarea>
+				</div>
+			</div>
 		</div>
 	</div>
 </script>
@@ -69,91 +70,98 @@
 </script>
 
 <script type="text/ng-template" id="shareLink.html">
-	<div class="share-modal-big-icon">
-		<i class="fa fa-link"></i>
-	</div>
-
-	<div ng-include src="'shareLinkOptions.html'"></div>
-	<div>
-		<div class="gf-form-group section">
-			<div class="gf-form-inline">
-				<div class="gf-form width-30">
-					<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
-				</div>
-				<div class="gf-form pull-right">
-					<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+	<div class="share-modal-header">
+		<div class="share-modal-big-icon">
+			<i class="fa fa-link"></i>
+		</div>
+		<div>
+			<p class="share-modal-info-text">
+				Create a direct link to this dashboard or panel, customized with the options below. 
+			</p>
+			<div ng-include src="'shareLinkOptions.html'"></div>
+			<div>
+				<div class="gf-form-group section">
+					<div class="gf-form-inline">
+						<div class="gf-form width-30">
+							<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
+						</div>
+						<div class="gf-form pull-right">
+							<button class="btn btn-inverse pull-right" data-clipboard-text="{{shareUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy</button>
+						</div>
+					</div>
 				</div>
 			</div>
+			<div class="gf-form section" ng-show="modeSharePanel">
+				<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
+			</div>
 		</div>
-	</div>
-	<div class="gf-form section" ng-show="modeSharePanel">
-		<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
-	</div>
 </script>
 
 <script type="text/ng-template" id="shareSnapshot.html">
 	<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
-		<div class="share-modal-big-icon">
-			<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
-			<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
-		</div>
-
-		<div class="share-snapshot-header" ng-if="step === 1">
-			<p class="share-snapshot-info-text">
-				A snapshot is an instant way to share an interactive dashboard publicly.
-				When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
-				leaving only the visible metric data and series names embedded into your dashboard.
-			</p>
-			<p class="share-snapshot-info-text">
-				Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
-				Share wisely.
-			</p>
-		</div>
-
-		<div class="share-snapshot-header" ng-if="step === 3">
-			<p class="share-snapshot-info-text">
-				The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
-				browser caches or CDN caches.
-			</p>
-		</div>
-
-		<div class="gf-form-group share-modal-options">
-			<div class="gf-form" ng-if="step === 1">
-				<span class="gf-form-label width-12">Snapshot name</span>
-				<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
+		<div class="share-modal-header" ng-if="step === 1">
+			<div class="share-modal-big-icon">
+				<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
+				<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
 			</div>
-			<div class="gf-form" ng-if="step === 1">
-				<span class="gf-form-label width-12">Expire</span>
-				<div class="gf-form-select-wrapper max-width-15">
-					<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
+			<div>
+				<p class="share-modal-info-text">
+					A snapshot is an instant way to share an interactive dashboard publicly.
+					When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
+					leaving only the visible metric data and series names embedded into your dashboard.
+				</p>
+				<p class="share-modal-info-text">
+					Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
+					Share wisely.
+				</p>
+
+				<div class="share-modal-header" ng-if="step === 3">
+					<p class="share-modal-info-text">
+						The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
+						browser caches or CDN caches.
+					</p>
 				</div>
-			</div>
 
-			<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
-				<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>
-					<button class="btn btn-inverse btn-large" data-clipboard-text="{{snapshotUrl}}" clipboard-button><i class="fa fa-clipboard"></i> Copy Link</button>
+				<div class="gf-form-group share-modal-options">
+					<div class="gf-form" ng-if="step === 1">
+						<span class="gf-form-label width-12">Snapshot name</span>
+						<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
+					</div>
+					<div class="gf-form" ng-if="step === 1">
+						<span class="gf-form-label width-12">Expire</span>
+						<div class="gf-form-select-wrapper max-width-15">
+							<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
+						</div>
+					</div>
+
+					<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
+						<div class="gf-form-row">
+							<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
+								<i class="fa fa-external-link-square"></i>
+								{{snapshotUrl}}
+							</a>
+							<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>
-			</div>
-		</div>
 
-		<div ng-if="step === 1" class="gf-form-buttons-row">
-			<button class="btn btn-success btn-large" ng-click="createSnapshot()" ng-disabled="loading">
-				<i class="fa fa-save"></i>
-				Local Snapshot
-			</button>
-			<button class="btn btn-primary btn-large" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
-				<i class="fa fa-cloud-upload"></i>
-				{{sharingButtonText}}
-			</button>
-		</div>
+				<div ng-if="step === 1" class="gf-form-button-row">
+					<button class="btn gf-form-btn width-10 btn-success" ng-click="createSnapshot()" ng-disabled="loading">
+						<i class="fa fa-save"></i>
+						Local Snapshot
+					</button>
+					<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
+						<i class="fa fa-cloud-upload"></i>
+						{{sharingButtonText}}
+					</button>
+					<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
+				</div>
 
-		<div class="pull-right" ng-if="step === 2" style="padding: 5px">
-			Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
+				<div class="pull-right" ng-if="step === 2" style="padding: 5px">
+					Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
+				</div>
+			</div>
 		</div>
 	</div>
 

public/sass/components/_dropdown.scss

@@ -17,6 +17,16 @@
   outline: 0;
 }
 
+.dropdown-desc {
+    position: relative;
+    top: -3px;
+    width: 250px;
+    font-size: 80%;
+    margin-left: 22px;
+    color: $gray-2;
+    white-space: normal;
+}
+
 // Dropdown arrow/caret
 // --------------------
 .caret {

public/sass/components/_modals.scss

@@ -118,7 +118,6 @@
 }
 
 .share-modal-body {
-  text-align: center;
   padding: 10px 0;
 
   .tight-form {
@@ -126,35 +125,36 @@
   }
 
   .share-modal-options {
-    margin: 11px 20px 33px 20px;
+    margin: 11px 0px 33px 0px;
     display: inline-block;
   }
 
   .share-modal-big-icon {
-    margin-bottom: 2rem;
-
+    margin-bottom: 10px;
+    margin-right: 2rem;
     .fa, .icon-gf {
-      font-size: 70px;
+      font-size: 50px;
     }
   }
 
-  .share-snapshot-info-text {
-    margin: 10px 105px;
+  .share-modal-info-text {
+    margin-top: 5px;
     strong {
       color: $headings-color;
       font-weight: 500;
     }
   }
 
-  .share-snapshot-header {
-    margin: 20px 0 22px 0;
+  .share-modal-header {
+    display: flex;
+    margin: 0px 0 22px 0;
   }
 
   .tight-form {
     text-align: left;
   }
 
-  .share-snapshot-link {
+  .share-modal-link {
     max-width: 716px;
     white-space: nowrap;
     overflow: hidden;
@@ -162,4 +162,3 @@
     text-overflow: ellipsis;
   }
 }
-