export(): moved to share modal

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

@@ -30,12 +30,12 @@
 			</li>
 			<li>
 				<a class="pointer" ng-click="shareDashboard(1)">
-					<i class="icon-gf icon-gf-snapshot"></i>Snapshot sharing
+					<i class="icon-gf icon-gf-snapshot"></i>Snapshot
 				</a>
 			</li>
       <li>
-				<a class="pointer" ng-click="shareExport()">
+				<a class="pointer" ng-click="shareDashboard(2)">
-					<i class="fa fa-cloud-upload"></i>Export for sharing
+					<i class="fa fa-cloud-upload"></i>Export
 				</a>
 			</li>
 		</ul>
@@ -49,8 +49,6 @@
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
 			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
-			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="exportDashboard();">Export</a></li>
-			<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="editJson();">View JSON</a></li>
 			<li ng-if="contextSrv.isEditor && !dashboard.editable"><a class="pointer" ng-click="makeEditable();">Make Editable</a></li>
 			<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
 			<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>

public/app/features/dashboard/dashnav/dashnav.ts

@@ -59,12 +59,6 @@ export class DashNavCtrl {
       $scope.shareDashboard(1);
     };
 
-    $scope.shareExport = function() {
-      $scope.appEvent('show-modal', {
-        templateHtml: '<dash-export-modal></dash-export-modal>',
-      });
-    };
-
     $scope.openSearch = function() {
       $scope.appEvent('show-dash-search');
     };

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

@@ -1,66 +1,59 @@
-<div class="modal-body">
 
-	<div class="modal-header">
+<!-- <p> -->
-		<h2 class="modal-header-title">
+<!-- 	Exporting will export a cleaned sharable dashboard that can be imported -->
-			<i class="fa fa-cloud-upload"></i>
+<!-- 	into another Grafana instance. -->
-			<span class="p-l-1">Export Dashboard</span>
+<!-- </p> -->
-		</h2>
 
-		<a class="modal-header-close" ng-click="dismiss();">
+<div class="share-modal-big-icon">
-			<i class="fa fa-remove"></i>
+	<i class="fa fa-cloud-upload"></i>
-		</a>
+</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">
-	<div class="modal-content" ng-cloak>
+		<label class="gf-form-label width-8">Description</label>
-		<!-- <p> -->
+		<input type="text" class="gf-form-input" ng-model="ctrl.dash.description" ng-change="ctrl.titleChanged()">
-		<!-- 	Exporting will export a cleaned sharable dashboard that can be imported -->
+		<label class="gf-form-label text-success" ng-show="ctrl.dash.description">
-		<!-- 	into another Grafana instance. -->
+			<i class="fa fa-check"></i>
-		<!-- </p> -->
+		</label>
-
-		<h3 class="section-heading">
-			Options
-		</h3>
-
-		<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>
-
-		<!-- <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>
 
+<!-- <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>

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

@@ -45,6 +45,10 @@
 	</div>
 </script>
 
+<script type="text/ng-template" id="shareExport.html">
+	<dash-export-modal></dash-export-modal>
+</script>
+
 <script type="text/ng-template" id="shareLinkOptions.html">
 	<div class="gf-form-group section">
 		<gf-form-switch class="gf-form"

public/app/features/dashboard/shareModalCtrl.js

@@ -22,11 +22,15 @@ function (angular, _, require, config) {
         $scope.modalTitle = 'Share Panel';
         $scope.tabs.push({title: 'Embed', src: 'shareEmbed.html'});
       } else {
-        $scope.modalTitle = 'Share Dashboard';
+        $scope.modalTitle = 'Share';
       }
 
       if (!$scope.dashboard.meta.isSnapshot) {
-        $scope.tabs.push({title: 'Snapshot sharing', src: 'shareSnapshot.html'});
+        $scope.tabs.push({title: 'Snapshot', src: 'shareSnapshot.html'});
+      }
+
+      if (!$scope.dashboard.meta.isSnapshot) {
+        $scope.tabs.push({title: 'Export', src: 'shareExport.html'});
       }
 
       $scope.buildUrl();