feat(export): began working on export modal

pkg/plugins/dashboard_importer.go

@@ -109,7 +109,7 @@ func (this *DashTemplateEvaluator) findInput(varName string, varType string) *Im
 func (this *DashTemplateEvaluator) Eval() (*simplejson.Json, error) {
 	this.result = simplejson.New()
 	this.variables = make(map[string]string)
-	this.varRegex, _ = regexp.Compile(`(\$\{\w+\})`)
+	this.varRegex, _ = regexp.Compile(`(\$\{.+\})`)
 
 	// check that we have all inputs we need
 	for _, inputDef := range this.template.Get("__inputs").MustArray() {

public/app/features/dashboard/all.js

@@ -18,4 +18,5 @@ define([
   './impression_store',
   './upload',
   './import/import',
+  './export/export_modal',
 ], function () {});

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

@@ -33,6 +33,11 @@
 					<i class="icon-gf icon-gf-snapshot"></i>Snapshot sharing
 				</a>
 			</li>
+      <li>
+				<a class="pointer" ng-click="shareExport()">
+					<i class="fa fa-cloud-upload"></i>Export
+				</a>
+			</li>
 		</ul>
 	</li>
 	<li ng-show="::dashboardMeta.canSave">

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

@@ -4,7 +4,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import angular from 'angular';
 
-import {DashboardExporter} from '../exporter';
+import {DashboardExporter} from '../export/exporter';
 
 export class DashNavCtrl {
 
@@ -14,7 +14,6 @@ export class DashNavCtrl {
     $scope.init = function() {
       $scope.onAppEvent('save-dashboard', $scope.saveDashboard);
       $scope.onAppEvent('delete-dashboard', $scope.deleteDashboard);
-      $scope.onAppEvent('export-dashboard', $scope.snapshot);
       $scope.onAppEvent('quick-snapshot', $scope.quickSnapshot);
 
       $scope.showSettingsMenu = $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor;
@@ -60,6 +59,12 @@ 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');
     };
@@ -181,7 +186,6 @@ export class DashNavCtrl {
       $rootScope.$broadcast('refresh');
 
       $timeout(function() {
-        $scope.exportDashboard();
         $scope.dashboard.snapshot = false;
         $scope.appEvent('dashboard-snapshot-cleanup');
       }, 1000);

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

@@ -0,0 +1,74 @@
+<div class="modal-body">
+
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-cloud-upload"></i>
+			<span class="p-l-1">Export Dashboard</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content" ng-cloak>
+		<p>
+			Exporting will export a cleaned sharable dashboard that can be imported
+			into another Grafana instance.
+		</p>
+
+		<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-heading">
+			Dashboard data sources
+		</h3>
+
+		<div class="gf-form-group">
+			<div class="gf-form-inline" ng-repeat="input in ctrl.dash.__inputs">
+				<div class="gf-form width-25">
+					<label class="gf-form-label width-8">Name</label>
+					<input type="text" class="gf-form-input" ng-model="input.name">
+					<label class="gf-form-label text-success" ng-show="input.name">
+						<i class="fa fa-check"></i>
+					</label>
+				</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()">
+				<i class="fa fa-download"></i> Export
+			</button>
+			<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
+		</div>
+
+	</div>
+</div>
+</div>
+

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

@@ -0,0 +1,40 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import kbn from 'app/core/utils/kbn';
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import config from 'app/core/config';
+import _ from 'lodash';
+
+import {DashboardExporter} from './exporter';
+
+export class DashExportCtrl {
+  dash: any;
+  exporter: DashboardExporter;
+
+  /** @ngInject */
+  constructor(private backendSrv, dashboardSrv, datasourceSrv, $scope) {
+    this.exporter = new DashboardExporter(datasourceSrv);
+
+    var current = dashboardSrv.getCurrent().getSaveModelClone();
+
+    this.exporter.makeExportable(current).then(dash => {
+      $scope.$apply(() => {
+        this.dash = dash;
+      });
+    });
+  }
+
+}
+
+export function dashExportDirective() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/export/export_modal.html',
+    controller: DashExportCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+  };
+}
+
+coreModule.directive('dashExportModal', dashExportDirective);

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

@@ -1,10 +1,10 @@
-///<reference path="../../headers/common.d.ts" />
+///<reference path="../../../headers/common.d.ts" />
 
 import config from 'app/core/config';
 import angular from 'angular';
 import _ from 'lodash';
 
-import {DynamicDashboardSrv} from './dynamic_dashboard_srv';
+import {DynamicDashboardSrv} from '../dynamic_dashboard_srv';
 
 export class DashboardExporter {
 

public/app/features/dashboard/keybindings.js

@@ -68,10 +68,6 @@ function(angular, $) {
         scope.appEvent('shift-time-forward', evt);
       }, { inputDisabled: true });
 
-      keyboardManager.bind('ctrl+e', function(evt) {
-        scope.appEvent('export-dashboard', evt);
-      }, { inputDisabled: true });
-
       keyboardManager.bind('ctrl+i', function(evt) {
         scope.appEvent('quick-snapshot', evt);
       }, { inputDisabled: true });

public/app/features/dashboard/specs/exporter_specs.ts

@@ -2,7 +2,7 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/co
 
 import _ from 'lodash';
 import config from 'app/core/config';
-import {DashboardExporter} from '../exporter';
+import {DashboardExporter} from '../export/exporter';
 
 describe.only('given dashboard with repeated panels', function() {
   var dash, exported;

public/app/partials/help_modal.html

@@ -40,10 +40,6 @@
 				<td><span class="label label-info">CTRL+S</span></td>
 				<td>Save dashboard</td>
 			</tr>
-			<tr>
-				<td><span class="label label-info">CTRL+E</span></td>
-				<td>Export dashboard</td>
-			</tr>
 			<tr>
 				<td><span class="label label-info">CTRL+H</span></td>
 				<td>Hide row controls</td>