feat(export): export dashboard modal

docs/sources/reference/dashboard.md

@@ -26,7 +26,6 @@ When a user creates a new dashboard, a new dashboard JSON object is initialized
 {
   "id": null,
   "title": "New dashboard",
-  "originalTitle": "New dashboard",
   "tags": [],
   "style": "dark",
   "timezone": "browser",
@@ -59,7 +58,6 @@ Each field in the dashboard JSON is explained below with its usage:
 | ---- | ----- |
 | **id** | unique dashboard id, an integer |
 | **title** | current title of dashboard |
-| **originalTitle** | title of dashboard when saved for the first time |
 | **tags** | tags associated with dashboard, an array of strings |
 | **style** | theme of dashboard, i.e. `dark` or `light` |
 | **timezone** | timezone of dashboard, i.e. `utc` or `browser` |

public/app/features/dashboard/dashboardSrv.js

@@ -22,7 +22,6 @@ function (angular, $, _, moment) {
 
       this.id = data.id || null;
       this.title = data.title || 'No Title';
-      this.originalTitle = this.title;
       this.tags = data.tags || [];
       this.style = data.style || "dark";
       this.timezone = data.timezone || '';

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

@@ -35,7 +35,7 @@
 			</li>
       <li>
 				<a class="pointer" ng-click="shareExport()">
-					<i class="fa fa-cloud-upload"></i>Export
+					<i class="fa fa-cloud-upload"></i>Export for sharing
 				</a>
 			</li>
 		</ul>

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

@@ -12,10 +12,10 @@
 	</div>
 
 	<div class="modal-content" ng-cloak>
-		<p>
+		<!-- <p> -->
-			Exporting will export a cleaned sharable dashboard that can be imported
+		<!-- 	Exporting will export a cleaned sharable dashboard that can be imported -->
-			into another Grafana instance.
+		<!-- 	into another Grafana instance. -->
-		</p>
+		<!-- </p> -->
 
 		<h3 class="section-heading">
 			Options
@@ -38,37 +38,29 @@
 			</div>
 		</div>
 
-		<h3 class="section-heading">
+		<!-- <h3 class="section&#45;heading"> -->
-			Dashboard data sources
+		<!-- 	Dashboard data sources -->
-		</h3>
+		<!-- </h3> -->
-
+		<!--  -->
-		<div class="gf-form-group">
+		<!-- <div class="gf&#45;form&#45;group"> -->
-			<div class="gf-form-inline" ng-repeat="input in ctrl.dash.__inputs">
+		<!-- 	<div class="gf&#45;form&#45;inline" ng&#45;repeat="input in ctrl.dash.__inputs"> -->
-				<div class="gf-form width-25">
+		<!-- 		<div class="gf&#45;form width&#45;25"> -->
-					<label class="gf-form-label width-8">Name</label>
+		<!-- 			<label class="gf&#45;form&#45;label width&#45;8">Name</label> -->
-					<input type="text" class="gf-form-input" ng-model="input.name">
+		<!-- 			<input type="text" class="gf&#45;form&#45;input" ng&#45;model="input.name"> -->
-					<label class="gf-form-label text-success" ng-show="input.name">
+		<!-- 		</div> -->
-						<i class="fa fa-check"></i>
+		<!-- 	</div> -->
-					</label>
+		<!-- </div> -->
-				</div>
-				<div class="gf-form width-25">
-					<label class="gf-form-label width-8">Description</label>
-					<input type="text" class="gf-form-input" ng-model="input.desc">
-					<label class="gf-form-label text-success" ng-show="input.desc">
-						<i class="fa fa-check"></i>
-					</label>
-				</div>
-			</div>
-		</div>
 
 		<div class="gf-form-button-row">
-			<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.export()">
+			<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.save()">
-				<i class="fa fa-download"></i> Export
+				<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>
-</div>
 

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

@@ -1,6 +1,7 @@
 ///<reference path="../../../headers/common.d.ts" />
 
 import kbn from 'app/core/utils/kbn';
+import angular from 'angular';
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
 import config from 'app/core/config';
@@ -25,6 +26,18 @@ export class DashExportCtrl {
     });
   }
 
+  save() {
+    var blob = new Blob([angular.toJson(this.dash, true)], { type: "application/json;charset=utf-8" });
+    var wnd: any = window;
+    wnd.saveAs(blob, this.dash.title + '-' + new Date().getTime() + '.json');
+  }
+
+  saveJson() {
+    var html = angular.toJson(this.dash, true);
+    var uri = "data:application/json," + encodeURIComponent(html);
+    var newWindow = window.open(uri);
+  }
+
 }
 
 export function dashExportDirective() {

public/app/features/dashboard/export/exporter.ts

@@ -15,6 +15,8 @@ export class DashboardExporter {
     var dynSrv = new DynamicDashboardSrv();
     dynSrv.process(dash, {cleanUpOnly: true});
 
+    dash.id = null;
+
     var inputs = [];
     var requires = {};
     var datasources = {};
@@ -63,10 +65,14 @@ export class DashboardExporter {
         return req;
       });
 
-      dash["__inputs"] = inputs;
+      // make inputs and requires a top thing
-      dash["__requires"] = requires;
+      var newObj = {};
+      newObj["__inputs"] = inputs;
+      newObj["__requires"] = requires;
 
-      return dash;
+      _.defaults(newObj, dash);
+
+      return newObj;
     }).catch(err => {
       console.log('Export failed:', err);
       return {};

public/dashboards/home.json

@@ -1,7 +1,6 @@
 {
   "id": null,
   "title": "Home",
-  "originalTitle": "Home",
   "tags": [],
   "style": "dark",
   "timezone": "browser",

public/dashboards/template_vars.json

@@ -1,7 +1,6 @@
 {
   "id": null,
   "title": "Templated Graphs Nested",
-  "originalTitle": "Templated Graphs Nested",
   "tags": [
     "showcase",
     "templated"