Import: Fixes to import from json file and import from graphite. Issues was lingering state from previous dashboard. Closes #840, Closes #853

CHANGELOG.md

@@ -5,6 +5,8 @@
 **Fixes**
 - [Issue #847](https://github.com/grafana/grafana/issues/847). Graph: Fix for series draw order not being the same after hiding/unhiding series
 - [Issue #851](https://github.com/grafana/grafana/issues/851). Annotations: Fix for annotations not reloaded when switching between 2 dashboards with annotations
+- [Issue #846](https://github.com/grafana/grafana/issues/846). Edit panes: Issue when open row or json editor when scrolled down the page, unable to scroll and you did not see editor
+- [Issue #840](https://github.com/grafana/grafana/issues/840). Import: Fixes to import from json file and import from graphite. Issues was lingering state from previous dashboard.
 
 # 1.8.0 (2014-09-22)
 

src/app/controllers/dashboardCtrl.js

@@ -19,19 +19,18 @@ function (angular, $, config, _) {
       dashboardSrv,
       dashboardViewStateSrv,
       panelMoveSrv,
-      timer,
       $timeout) {
 
     $scope.editor = { index: 0 };
     $scope.panelNames = config.panels;
     var resizeEventTimeout;
 
-    $scope.init = function() {
+    this.init = function(dashboardData) {
       $scope.availablePanels = config.panels;
-      $scope.onAppEvent('setup-dashboard', $scope.setupDashboard);
-      $scope.onAppEvent('show-json-editor', $scope.showJsonEditor);
       $scope.reset_row();
       $scope.registerWindowResizeEvent();
+      $scope.onAppEvent('show-json-editor', $scope.showJsonEditor);
+      $scope.setupDashboard(dashboardData);
     };
 
     $scope.registerWindowResizeEvent = function() {
@@ -41,7 +40,7 @@ function (angular, $, config, _) {
       });
     };
 
-    $scope.setupDashboard = function(event, dashboardData) {
+    $scope.setupDashboard = function(dashboardData) {
       $rootScope.performance.dashboardLoadStart = new Date().getTime();
       $rootScope.performance.panelsInitialized = 0;
       $rootScope.performance.panelsRendered = 0;
@@ -129,6 +128,5 @@ function (angular, $, config, _) {
       return $scope.editorTabs;
     };
 
-    $scope.init();
   });
 });

src/app/controllers/grafanaCtrl.js

@@ -10,7 +10,7 @@ function (angular, config, _, $, store) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope) {
+  module.controller('GrafanaCtrl', function($scope, alertSrv, grafanaVersion, $rootScope, $controller) {
 
     $scope.grafanaVersion = grafanaVersion[0] === '@' ? 'master' : grafanaVersion;
     $scope.consoleEnabled = store.getBool('grafanaConsole');
@@ -32,6 +32,10 @@ function (angular, config, _, $, store) {
       store.set('grafanaConsole', $scope.consoleEnabled);
     };
 
+    $scope.initDashboard = function(dashboardData, viewScope) {
+      $controller('DashboardCtrl', { $scope: viewScope }).init(dashboardData);
+    };
+
     $rootScope.onAppEvent = function(name, callback) {
       var unbind = $rootScope.$on(name, callback);
       this.$on('$destroy', unbind);

src/app/controllers/graphiteImport.js

@@ -1,14 +1,15 @@
 define([
   'angular',
   'app',
-  'lodash'
+  'lodash',
+  'kbn'
 ],
-function (angular, app, _) {
+function (angular, app, _, kbn) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, datasourceSrv) {
+  module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, datasourceSrv, $location) {
 
     $scope.init = function() {
       $scope.datasources = datasourceSrv.getMetricSources();
@@ -79,7 +80,7 @@ function (angular, app, _) {
         }
 
         panel = {
-          type: 'graphite',
+          type: 'graph',
           span: 12 / graphsPerRow,
           title: graph[1].title,
           targets: [],
@@ -95,7 +96,9 @@ function (angular, app, _) {
         currentRow.panels.push(panel);
       });
 
-      $scope.emitAppEvent('setup-dashboard', newDashboard);
+      window.grafanaImportDashboard = newDashboard;
+      $location.path('/dashboard/import/' + kbn.slugifyForUrl(newDashboard.title));
+
       $scope.dismiss();
     }
 

src/app/controllers/row.js

@@ -13,6 +13,7 @@ function (angular, app, _) {
       title: "Row",
       height: "150px",
       collapse: false,
+      editable: true,
       panels: [],
     };
 

src/app/directives/dashUpload.js

@@ -1,12 +1,13 @@
 define([
-  'angular'
+  'angular',
+  'kbn'
 ],
-function (angular) {
+function (angular, kbn) {
   'use strict';
 
   var module = angular.module('grafana.directives');
 
-  module.directive('dashUpload', function(timer, alertSrv) {
+  module.directive('dashUpload', function(timer, alertSrv, $location) {
     return {
       restrict: 'A',
       link: function(scope) {
@@ -14,9 +15,10 @@ function (angular) {
           var files = evt.target.files; // FileList object
           var readerOnload = function() {
             return function(e) {
-              var dashboard = JSON.parse(e.target.result);
               scope.$apply(function() {
-                scope.emitAppEvent('setup-dashboard', dashboard);
+                window.grafanaImportDashboard = JSON.parse(e.target.result);
+                var title = kbn.slugifyForUrl(window.grafanaImportDashboard.title);
+                $location.path('/dashboard/import/' + title);
               });
             };
           };

src/app/partials/dashboard.html

@@ -1,4 +1,4 @@
-<div ng-controller="DashboardCtrl" body-class class="dashboard" ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
+<div body-class class="dashboard" ng-class="{'dashboard-fullscreen': dashboardViewState.fullscreen}">
 
 	<div ng-include="'app/partials/dashboard_topnav.html'">
 	</div>

src/app/partials/import.html

@@ -16,11 +16,15 @@
     </div>
   </div>
 
-  <div class="editor-row" style="margin-top: 10px;">
+  <div class="editor-row" style="margin-top: 10px;max-height: 400px; overflow-y: scroll;max-width: 500px;">
-    <table class="table table-condensed table-striped">
+    <table class="grafana-options-table">
       <tr ng-repeat="dash in dashboards">
-        <td style="padding-right: 20px;"><button class="btn btn-success" ng-click="import(dash.name)">Import</button>
+        <td style="">{{dash.name}}</td>
-        <td style="width: 100%; vertical-align: middle;">{{dash.name}}</td>
+				<td style="padding-left: 20px;">
+					<a class="pointer" ng-click="import(dash.name)">
+						import
+					</a>
+				</td>
       </tr>
     </table>
   </div>

src/app/routes/dashboard-from-db.js

@@ -22,7 +22,13 @@ function (angular) {
         templateUrl: 'app/partials/dashboard.html',
         controller : 'DashFromDBProvider',
         reloadOnSearch: false,
+      })
+      .when('/dashboard/import/:id', {
+        templateUrl: 'app/partials/dashboard.html',
+        controller : 'DashFromImportCtrl',
+        reloadOnSearch: false,
       });
+
   });
 
   module.controller('DashFromDBProvider', function($scope, $rootScope, datasourceSrv, $routeParams, alertSrv) {
@@ -31,12 +37,23 @@ function (angular) {
     var isTemp = window.location.href.indexOf('dashboard/temp') !== -1;
 
     db.getDashboard($routeParams.id, isTemp)
-      .then(function(dashboard) {
+    .then(function(dashboard) {
-        $scope.emitAppEvent('setup-dashboard', dashboard);
+      $scope.initDashboard(dashboard, $scope);
-      }).then(null, function(error) {
+    }).then(null, function(error) {
-        $scope.emitAppEvent('setup-dashboard', { title: 'Grafana'});
+      $scope.initDashboard({ title: 'Grafana'}, $scope);
-        alertSrv.set('Error', error, 'error');
+      alertSrv.set('Error', error, 'error');
-      });
+    });
+  });
+
+  module.controller('DashFromImportCtrl', function($scope, $location, alertSrv) {
+
+    if (!window.grafanaImportDashboard) {
+      alertSrv.set('Not found', 'Cannot reload page with unsaved imported dashboard', 'warning', 7000);
+      $location.path('');
+      return;
+    }
+
+    $scope.initDashboard(window.grafanaImportDashboard, $scope);
   });
 
 });

src/app/routes/dashboard-from-file.js

@@ -52,7 +52,7 @@ function (angular, $, config, _) {
     };
 
     file_load($routeParams.jsonFile).then(function(result) {
-      $scope.emitAppEvent('setup-dashboard', result);
+      $scope.initDashboard(result, $scope);
     });
 
   });

src/app/routes/dashboard-from-script.js

@@ -53,7 +53,7 @@ function (angular, $, config, _, kbn, moment) {
     };
 
     script_load($routeParams.jsFile).then(function(result) {
-      $scope.emitAppEvent('setup-dashboard', result.data);
+      $scope.initDashboard(result.data, $scope);
     });
 
   });