feat(): started work on new import system

public/app/core/components/search/search.html

@@ -64,12 +64,17 @@
 	<div class="search-button-row">
 		<button class="btn btn-inverse pull-left" ng-click="ctrl.newDashboard()" ng-show="ctrl.contextSrv.isEditor">
 			<i class="fa fa-plus"></i>
-			New
+			Create New
 		</button>
-		<a class="btn btn-inverse pull-left" href="import/dashboard" ng-show="ctrl.contextSrv.isEditor">
-			<i class="fa fa-download"></i>
-			Import
-		</a>
+
+    <form class="pull-left p-r-1">
+			<input type="file" id="dashupload" dash-upload name="dashupload" class="hide"/>
+			<label class="btn btn-inverse" for="dashupload">
+        <i class="fa fa-upload"></i>
+        Upload Dashboard
+      </label>
+		</form>
+
 		<div class="clearfix"></div>
 	</div>
 </div>

public/app/core/core.ts

@@ -5,7 +5,6 @@ import "./directives/annotation_tooltip";
 import "./directives/dash_class";
 import "./directives/confirm_click";
 import "./directives/dash_edit_link";
-import "./directives/dash_upload";
 import "./directives/dropdown_typeahead";
 import "./directives/grafana_version_check";
 import "./directives/metric_segment";

public/app/core/directives/dash_upload.js

@@ -1,46 +0,0 @@
-define([
-  '../core_module',
-  'app/core/utils/kbn',
-],
-function (coreModule, kbn) {
-  'use strict';
-
-  coreModule.default.directive('dashUpload', function(timer, alertSrv, $location) {
-    return {
-      restrict: 'A',
-      link: function(scope) {
-        function file_selected(evt) {
-          var files = evt.target.files; // FileList object
-          var readerOnload = function() {
-            return function(e) {
-              scope.$apply(function() {
-                try {
-                  window.grafanaImportDashboard = JSON.parse(e.target.result);
-                } catch (err) {
-                  console.log(err);
-                  scope.appEvent('alert-error', ['Import failed', 'JSON -> JS Serialization failed: ' + err.message]);
-                  return;
-                }
-                var title = kbn.slugifyForUrl(window.grafanaImportDashboard.title);
-                window.grafanaImportDashboard.id = null;
-                $location.path('/dashboard-import/' + title);
-              });
-            };
-          };
-          for (var i = 0, f; f = files[i]; i++) {
-            var reader = new FileReader();
-            reader.onload = (readerOnload)(f);
-            reader.readAsText(f);
-          }
-        }
-        // Check for the various File API support.
-        if (window.File && window.FileReader && window.FileList && window.Blob) {
-          // Something
-          document.getElementById('dashupload').addEventListener('change', file_selected, false);
-        } else {
-          alertSrv.set('Oops','Sorry, the HTML5 File APIs are not fully supported in this browser.','error');
-        }
-      }
-    };
-  });
-});

public/app/features/dashboard/all.js

@@ -16,4 +16,5 @@ define([
   './graphiteImportCtrl',
   './importCtrl',
   './impression_store',
+  './upload',
 ], function () {});

public/app/features/dashboard/upload.ts

@@ -0,0 +1,65 @@
+///<reference path="../../headers/common.d.ts" />
+
+import kbn from 'app/core/utils/kbn';
+import coreModule from 'app/core/core_module';
+
+var wnd: any = window;
+
+class DashboardImporter {
+
+  prepareForImport(dash) {
+    dash.id = null;
+    return Promise.resolve(dash);
+  }
+
+}
+
+
+/** @ngInject */
+function uploadDashboardDirective(timer, alertSrv, $location) {
+  return {
+    restrict: 'A',
+    link: function(scope) {
+      function file_selected(evt) {
+        var files = evt.target.files; // FileList object
+        var readerOnload = function() {
+          return function(e) {
+            var dash;
+            try {
+              dash = JSON.parse(e.target.result);
+            } catch (err) {
+              console.log(err);
+              scope.appEvent('alert-error', ['Import failed', 'JSON -> JS Serialization failed: ' + err.message]);
+              return;
+            }
+
+            var importer = new DashboardImporter();
+            importer.prepareForImport(dash).then(modified => {
+              wnd.grafanaImportDashboard = modified;
+              var title = kbn.slugifyForUrl(dash.title);
+
+              scope.$apply(function() {
+                $location.path('/dashboard-import/' + title);
+              });
+            });
+          };
+        };
+
+        for (var i = 0, f; f = files[i]; i++) {
+          var reader = new FileReader();
+          reader.onload = readerOnload();
+          reader.readAsText(f);
+        }
+      }
+      // Check for the various File API support.
+      if (wnd.File && wnd.FileReader && wnd.FileList && wnd.Blob) {
+        // Something
+        document.getElementById('dashupload').addEventListener('change', file_selected, false);
+      } else {
+        alertSrv.set('Oops','Sorry, the HTML5 File APIs are not fully supported in this browser.','error');
+      }
+    }
+  };
+}
+
+coreModule.directive('dashUpload', uploadDashboardDirective);