Update datasource now works, #8

src/app/controllers/pro/datasourcesCtrl.js

@@ -17,17 +17,62 @@ function (angular) {
     };
 
     $scope.init = function() {
+      $scope.reset();
+      $scope.editor = {index: 0};
+      $scope.datasources = [];
+      $scope.getDatasources();
+
+      $scope.$watch('editor.index', function(newVal) {
+        if (newVal !== 2) {
+          $scope.reset();
+        }
+      });
+    };
+
+    $scope.reset = function() {
       $scope.current = angular.copy(defaults);
+      $scope.currentIsNew = true;
+    };
+
+    $scope.edit = function(ds) {
+      $scope.current = ds;
+      $scope.currentIsNew = false;
+      $scope.editor.index = 2;
+    };
+
+    $scope.cancel = function() {
+      $scope.reset();
+      $scope.editor.index = 0;
+    };
+
+    $scope.getDatasources = function() {
+      backendSrv.get('/api/admin/datasources/list').then(function(results) {
+        $scope.datasources = results;
+      });
+    };
+
+    $scope.remove = function(ds) {
+      backendSrv.delete('/api/admin/datasources/' + ds.id).then(function() {
+        $scope.getDatasources();
+      });
+    };
+
+    $scope.update = function() {
+      backendSrv.post('/api/admin/datasources', $scope.current).then(function() {
+        $scope.editor.index = 0;
+        $scope.getDatasources();
+      });
     };
 
-    $scope.addDatasource = function() {
+    $scope.add = function() {
       if (!$scope.editForm.$valid) {
         return;
       }
 
-      backendSrv.post('/api/admin/datasources/add', $scope.current)
-        .then(function(result) {
-          console.log('add datasource result', result);
+      backendSrv.put('/api/admin/datasources', $scope.current)
+        .then(function() {
+          $scope.editor.index = 0;
+          $scope.getDatasources();
         });
     };
 

src/app/partials/pro/datasources.html

@@ -1,4 +1,4 @@
-<div ng-include="'app/partials/pro/navbar.html'" ng-init="pageTitle='Data sources'"></div>
+<div ng-include="'app/partials/pro/navbar.html'" ng-init="pageTitle='Admin'"></div>
 
 <div class="dashboard-edit-view" style="min-height: 500px">
 	<div class="editor-row">
@@ -7,43 +7,81 @@
 			<div class="dashboard-editor-header">
 				<div class="dashboard-editor-title">
 					<i class="icon icon-sitemap"></i>
-					Add data source
+					Data sources
 				</div>
+
+				<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+					<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
+					</div>
+				</div>
+
 			</div>
 
 			<form name="editForm">
-
 				<div class="dashboard-editor-body">
 
-					<div class="editor-row">
-						<div class="editor-option">
-							<label class="small">Data source name</label>
-							<input type="text" class="input-large" required ng-model='current.name' placeholder="name" required></input>
-						</div>
-						<div class="editor-option">
-							<label class="small">Type</label>
-							<select class="input-medium" ng-model="current.type" ng-options="f for f in ['graphite', 'influxdb', 'opentsdb']" ng-change="typeChanged()"></select>
+					<div class="editor-row row" ng-if="editor.index == 0">
+						<div class="span8">
+							<div ng-if="datasources.length === 0">
+								<em>No datasources defined</em>
+							</div>
+							<table class="grafana-options-table">
+								<tr ng-repeat="ds in datasources">
+									<td style="width:1%">
+										<i class="icon-hdd"></i> &nbsp;
+										{{ds.name}}
+									</td>
+									<td style="width:90%">
+										{{ds.url}}
+									</td>
+									<td style="width: 1%">
+										<a ng-click="edit(ds)" class="btn btn-success btn-mini">
+											<i class="icon-edit"></i>
+											Edit
+										</a>
+									</td>
+									<td style="width: 1%">
+										<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
+											<i class="icon-remove"></i>
+										</a>
+									</td>
+								</tr>
+							</table>
 						</div>
 					</div>
 
-					<div class="editor-row">
-						<div class="editor-option">
-							<label class="small">Url</label>
-							<input type="text" class="input-xxlarge" required ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
+					<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
+						<div class="editor-row">
+							<div class="editor-option">
+								<label class="small">Data source name</label>
+								<input type="text" class="input-large" required ng-model='current.name' placeholder="production" required></input>
+							</div>
+							<div class="editor-option">
+								<label class="small">Type</label>
+								<select class="input-medium" ng-model="current.type" ng-options="f for f in ['graphite', 'influxdb', 'opentsdb']" ng-change="typeChanged()"></select>
+							</div>
 						</div>
-						<div class="editor-option">
-							<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
-							<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
+
+						<div class="editor-row">
+							<div class="editor-option">
+								<label class="small">Url</label>
+								<input type="text" class="input-xxlarge" required ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
+							</div>
+							<div class="editor-option">
+								<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
+								<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
+							</div>
 						</div>
 					</div>
 
-				</div>
-
-				<div class="dashboard-editor-footer">
-					<button type="submit" class="btn btn-success" ng-click="addDatasource()">Add</button>
-				</div>
+					<div class="dashboard-editor-footer" style="margin-top: 20px">
+						<button type="submit" class="btn btn-success" ng-show="editor.index === 1" ng-click="add()">Add</button>
+						<button type="submit" class="btn btn-success" ng-show="editor.index === 2 && !currentIsNew" ng-click="update()">Update</button>
+						<button type="submit" class="btn btn-info" ng-show="editor.index === 2 && !currentIsNew" ng-click="cancel()">Cancel</button>
+					</div>
 
-			</form>
+				</form>
+			</div>
 		</div>
 	</div>
 </div>

src/app/services/pro/backendSrv.js

@@ -13,6 +13,10 @@ function (angular, _) {
       return this.request({ method: 'GET', url: url });
     };
 
+    this.delete = function(url) {
+      return this.request({ method: 'DELETE', url: url });
+    };
+
     this.post = function(url, data) {
       return this.request({ method: 'POST', url: url, data: data });
     };