feature: import dashboards from graphite (WIP)

src/app/controllers/all.js

@@ -5,5 +5,6 @@ define([
   './pulldown',
   './search',
   './metricKeys',
-  './graphiteTarget'
+  './graphiteTarget',
+  './graphiteImport',
 ], function () {});

src/app/controllers/graphiteImport.js

@@ -0,0 +1,90 @@
+define([
+  'angular',
+  'app',
+  'underscore'
+],
+function (angular, app, _) {
+  'use strict';
+
+  var module = angular.module('kibana.controllers');
+
+  module.controller('GraphiteImportCtrl', function($scope, $rootScope, $timeout, graphiteSrv, dashboard) {
+
+    $scope.init = function() {
+      console.log('hej!');
+    };
+
+    $scope.listAll = function(query) {
+      delete $scope.error;
+
+      graphiteSrv.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;
+
+      graphiteSrv.loadDashboard(dashName)
+        .then(function(results) {
+          if (!results.data || !results.data.state) {
+            throw { message: 'no dashboard state received from graphite' };
+          }
+
+          graphiteToGrafanaTranslator(results.data.state);
+        })
+        .then(null, function(err) {
+          $scope.error = err.message || 'Failed to import dashboard';
+        });
+    };
+
+    function graphiteToGrafanaTranslator(state) {
+      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(dashboard.current);
+      newDashboard.rows = [];
+      newDashboard.title = state.name;
+      newDashboard.rows.push(currentRow);
+
+      _.each(state.graphs, function(graph) {
+        if (currentRow.panels.length === graphsPerRow) {
+          currentRow = angular.copy(rowTemplate);
+        }
+
+        panel = {
+          type: 'graphite',
+          span: 12 / graphsPerRow,
+          targets: []
+        };
+
+        _.each(graph[1].target, function(target) {
+          panel.targets.push({
+            target: target
+          });
+        });
+
+        currentRow.panels.push(panel);
+      });
+
+      dashboard.dash_load(newDashboard);
+    }
+
+  });
+
+});

src/app/partials/dashboard.html

@@ -77,7 +77,7 @@
       <div class="row-fluid" ng-show='dashboard.current.editable && dashboard.current.panel_hints'>
         <div class="span12" style="text-align:right;">
           <span style="margin-left: 0px;" class="pointer btn btn-mini" bs-modal="'app/partials/dasheditor.html'">
-            <span ng-click="editor.index = 2"><i class="icon-plus-sign"></i> ADD A ROW</span>
+            <span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
           </span>
         </div>
       </div>

src/app/partials/dasheditor.html

@@ -2,7 +2,7 @@
   <div class="pull-right editor-title">Dashboard settings</div>
 
   <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-    <div ng-repeat="tab in ['General', 'Rows','Controls', 'Metrics']" data-title="{{tab}}">
+    <div ng-repeat="tab in ['General', 'Rows','Controls', 'Metrics', 'Import']" data-title="{{tab}}">
     </div>
     <div ng-repeat="tab in dashboard.current.nav" data-title="{{tab.type}}">
     </div>
@@ -124,11 +124,15 @@
     </div>
   </div>
 
-  <div ng-show="editor.index == 3">
+  <div ng-if="editor.index == 3">
     <ng-include src="'app/partials/loadmetrics.html'"></ng-include>
   </div>
 
-  <div ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="editor.index == 4+$index">
+  <div ng-if="editor.index == 4">
+    <ng-include src="'app/partials/import.html'"></ng-include>
+  </div>
+
+  <div ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="editor.index == 5+$index">
     <ng-include ng-show="pulldown.enable" src="edit_path(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

@@ -0,0 +1,22 @@
+<div ng-controller="GraphiteImportCtrl" ng-init="init()">
+  <h5>Import dashboards from graphite webb</h5>
+
+  <div class="editor-row">
+    <div class="section">
+      <button ng-click="listAll()" class="btn btn-primary">List all dashboards</button>
+    </div>
+  </div>
+
+  <div class="editor-row" style="margin-top: 10px;">
+    <table class="table table-condensed table-striped">
+      <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="width: 100%; vertical-align: middle;">{{dash.name}}</td>
+      </tr>
+    </table>
+  </div>
+
+  <div ng-show="error" style="margin-top: 20px" class="alert alert-error">
+    {{error}}
+  </div>
+</div>

src/app/services/graphite/graphiteSrv.js

@@ -71,6 +71,18 @@ function (angular, _, $, config) {
         });
     };
 
+    this.listDashboards = function(query) {
+      var url = config.graphiteUrl + '/dashboard/find/';
+      return $http.get(url, {params: {query: query || ''}})
+        .then(function(results) {
+          return results.data.dashboards;
+        });
+    };
+
+    this.loadDashboard = function(dashName) {
+      var url = config.graphiteUrl + '/dashboard/load/' + encodeURIComponent(dashName);
+      return $http.get(url);
+    };
 
     function buildGraphitePostParams(options) {
       var clean_options = [];