Import views are now consolidated into one view, and found through one navigation (dashboard search -> Import, Closes #1511

src/app/controllers/all.js

@@ -3,7 +3,6 @@ define([
   './pulldown',
   './search',
   './metricKeys',
-  './graphiteImport',
   './inspectCtrl',
   './jsonEditorCtrl',
   './loginCtrl',

src/app/controllers/graphiteImport.js

@@ -1,108 +0,0 @@
-define([
-  'angular',
-  'app',
-  'lodash',
-  'kbn'
-],
-function (angular, app, _, kbn) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, datasourceSrv, $location) {
-
-    $scope.init = function() {
-      $scope.datasources = datasourceSrv.getMetricSources();
-      $scope.setDatasource(null);
-    };
-
-    $scope.setDatasource = function(datasource) {
-      $scope.datasource = datasourceSrv.get(datasource);
-
-      if (!$scope.datasource) {
-        $scope.error = "Cannot find datasource " + datasource;
-        return;
-      }
-    };
-
-    $scope.listAll = function(query) {
-      delete $scope.error;
-
-      $scope.datasource.listDashboards(query)
-        .then(function(results) {
-          $scope.dashboards = results;
-        })
-        .then(null, function(err) {
-          $scope.error = err.message || 'Error while fetching list of dashboards';
-        });
-    };
-
-    $scope.import = function(dashName) {
-      delete $scope.error;
-
-      $scope.datasource.loadDashboard(dashName)
-        .then(function(results) {
-          if (!results.data || !results.data.state) {
-            throw { message: 'no dashboard state received from graphite' };
-          }
-
-          graphiteToGrafanaTranslator(results.data.state, $scope.datasource.name);
-        })
-        .then(null, function(err) {
-          $scope.error = err.message || 'Failed to import dashboard';
-        });
-    };
-
-    function graphiteToGrafanaTranslator(state, datasource) {
-      var graphsPerRow = 2;
-      var rowHeight = 300;
-      var rowTemplate;
-      var currentRow;
-      var panel;
-
-      rowTemplate = {
-        title: '',
-        panels: [],
-        height: rowHeight
-      };
-
-      currentRow = angular.copy(rowTemplate);
-
-      var newDashboard = angular.copy($scope.dashboard);
-      newDashboard.rows = [];
-      newDashboard.title = state.name;
-      newDashboard.rows.push(currentRow);
-
-      _.each(state.graphs, function(graph, index) {
-        if (currentRow.panels.length === graphsPerRow) {
-          currentRow = angular.copy(rowTemplate);
-          newDashboard.rows.push(currentRow);
-        }
-
-        panel = {
-          type: 'graph',
-          span: 12 / graphsPerRow,
-          title: graph[1].title,
-          targets: [],
-          datasource: datasource,
-          id: index + 1
-        };
-
-        _.each(graph[1].target, function(target) {
-          panel.targets.push({
-            target: target
-          });
-        });
-
-        currentRow.panels.push(panel);
-      });
-
-      window.grafanaImportDashboard = newDashboard;
-      $location.path('/dashboard/import/' + kbn.slugifyForUrl(newDashboard.title));
-
-      $scope.dismiss();
-    }
-
-  });
-
-});

src/app/features/dashboard/all.js

@@ -13,5 +13,6 @@ define([
   './timeSrv',
   './unsavedChangesSrv',
   './directives/dashSearchView',
+  './graphiteImportCtrl',
   './importCtrl',
 ], function () {});

src/app/features/dashboard/graphiteImportCtrl.js

@@ -0,0 +1,94 @@
+define([
+  'angular',
+  'app',
+  'lodash',
+  'kbn'
+],
+function (angular, app, _, kbn) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('GraphiteImportCtrl', function($scope, datasourceSrv, dashboardSrv, $location) {
+
+    $scope.init = function() {
+      $scope.datasources = [];
+      _.each(datasourceSrv.getAll(), function(ds) {
+        if (ds.type === 'graphite') {
+          $scope.sourceName = ds.name;
+          $scope.datasources.push(ds.name);
+        }
+      });
+    };
+
+    $scope.listAll = function() {
+      $scope.datasource = datasourceSrv.get($scope.sourceName);
+
+      $scope.datasource.listDashboards('').then(function(results) {
+        $scope.dashboards = results;
+      }, function(err) {
+        var message = err.message || err.statusText || 'Error';
+        $scope.appEvent('alert-error', ['Failed to load dashboard list from graphite', message]);
+      });
+    };
+
+    $scope.import = function(dashName) {
+      $scope.datasource.loadDashboard(dashName).then(function(results) {
+        if (!results.data || !results.data.state) {
+          throw { message: 'no dashboard state received from graphite' };
+        }
+
+        graphiteToGrafanaTranslator(results.data.state, $scope.datasource.name);
+      }, function(err) {
+        var message = err.message || err.statusText || 'Error';
+        $scope.appEvent('alert-error', ['Failed to load dashboard from graphite', message]);
+      });
+    };
+
+    function graphiteToGrafanaTranslator(state, datasource) {
+      var graphsPerRow = 2;
+      var rowHeight = 300;
+      var rowTemplate;
+      var currentRow;
+      var panel;
+
+      rowTemplate = {
+        title: '',
+        panels: [],
+        height: rowHeight
+      };
+
+      currentRow = angular.copy(rowTemplate);
+
+      var newDashboard = dashboardSrv.create({});
+      newDashboard.rows = [];
+      newDashboard.title = state.name;
+      newDashboard.rows.push(currentRow);
+
+      _.each(state.graphs, function(graph, index) {
+        if (currentRow.panels.length === graphsPerRow) {
+          currentRow = angular.copy(rowTemplate);
+          newDashboard.rows.push(currentRow);
+        }
+
+        panel = {
+          type: 'graph',
+          span: 12 / graphsPerRow,
+          title: graph[1].title,
+          targets: [],
+          datasource: datasource,
+          id: index + 1
+        };
+
+        _.each(graph[1].target, function(target) {
+          panel.targets.push({ target: target });
+        });
+
+        currentRow.panels.push(panel);
+      });
+
+      window.grafanaImportDashboard = newDashboard;
+      $location.path('/dashboard/import/' + kbn.slugifyForUrl(newDashboard.title));
+    }
+  });
+});

src/app/features/dashboard/partials/graphiteImport.html

@@ -0,0 +1,34 @@
+<div ng-controller="GraphiteImportCtrl" ng-init="init()">
+
+	<div ng-if="datasources.length > 0">
+		<h2 style="margin-top: 30px;">Load dashboard from Graphite-Web</h2>
+
+		<div class="tight-form last">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 150px">
+					<strong>Data source</strong>
+				</li>
+				<li>
+					<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
+					</select>
+				</li>
+				<li style="float: right">
+					<button class="btn btn-inverse tight-form-btn" ng-click="listAll()">List dashboards</button>
+				</li>
+				<div class="clearfix"></div>
+			</ul>
+		</div>
+
+		<table class="grafana-options-table" style="margin-top: 20px;">
+			<tr ng-repeat="dash in dashboards">
+				<td style="">{{dash.name}}</td>
+				<td>
+					<button class="btn btn-inverse pull-right" ng-click="import(dash.name)">
+						Load
+					</a>
+				</td>
+			</tr>
+		</table>
+
+	</div>
+</div>

src/app/features/dashboard/partials/import.html

@@ -7,7 +7,7 @@
 <div class="page-container">
 	<div class="page">
 		<h2>
-			Import dashboard
+			Import file
 			<span><tip>Load dashboard JSON layout from file</tip></span>
 		</h2>
 
@@ -23,7 +23,7 @@
 
 		<h2>Migrate dashboards</h2>
 
-		<div class="tight-form">
+		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 150px">
 					<strong>Dashboard source</strong>
@@ -62,6 +62,9 @@
 				</div>
 			</section>
 		</div>
+
+		<div ng-include="'app/features/dashboard/partials/graphiteImport.html'"></div>
+
 	</div>
 </div>
 

src/app/partials/dasheditor.html

@@ -5,7 +5,7 @@
 	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['General', 'Rows', 'Import']" data-title="{{tab}}">
+		<div ng-repeat="tab in ['General', 'Rows']" data-title="{{tab}}">
 		</div>
 		<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
 		</div>
@@ -70,11 +70,7 @@
 			</div>
 		</div>
 
-		<div ng-if="editor.index == 2">
+		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 2+$index">
-			<ng-include src="'app/partials/import.html'"></ng-include>
-		</div>
-
-		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
 			<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
 			<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
 		</div>

src/app/partials/import.html

@@ -1,35 +0,0 @@
-<div ng-controller="GraphiteImportCtrl" ng-init="init()">
-  <h5>Import dashboards from graphite web</h5>
-
-  <div class="editor-row">
-    <div class="section">
-      <div class="btn-group">
-        <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" bs-tooltip="'Datasource'">{{datasource.name}} <span class="caret"></span></button>
-
-        <ul class="dropdown-menu" role="menu">
-          <li ng-repeat="datasource in datasources" role="menuitem">
-            <a ng-click="setDatasource(datasource.value);">{{datasource.name}}</a>
-          </li>
-        </ul>
-      </div>
-      <button ng-click="listAll()" class="btn btn-success">List all dashboards</button>
-    </div>
-  </div>
-
-  <div class="editor-row" style="margin-top: 10px;max-height: 400px; overflow-y: scroll;max-width: 500px;">
-    <table class="grafana-options-table">
-      <tr ng-repeat="dash in dashboards">
-        <td style="">{{dash.name}}</td>
-				<td style="padding-left: 20px;">
-					<a class="pointer" ng-click="import(dash.name)">
-						import
-					</a>
-				</td>
-      </tr>
-    </table>
-  </div>
-
-  <div ng-show="error" style="margin-top: 20px" class="alert alert-error">
-    {{error}}
-  </div>
-</div>