mirror of https://github.com/grafana/grafana
Rewrote and redesign how the data source edit views look and work so they conform better to how account views look, removed tabs and put top nav items to add data source etc, made list, edit and new seperate url routes, #1483
Torkel Ödegaard
11 years ago
parent
ed0fabd9de
commit
f6c07fdabd
@ -0,0 +1,69 @@ |
||||
define([ |
||||
'angular', |
||||
'lodash', |
||||
], |
||||
function (angular) { |
||||
'use strict'; |
||||
|
||||
var module = angular.module('grafana.controllers'); |
||||
|
||||
module.controller('DataSourceEditCtrl', function($scope, $http, backendSrv, $routeParams, $location) { |
||||
|
||||
var defaults = { |
||||
name: '', |
||||
type: 'graphite', |
||||
url: '', |
||||
access: 'proxy' |
||||
}; |
||||
|
||||
$scope.types = [ |
||||
{ name: 'Graphite', type: 'graphite' }, |
||||
{ name: 'InfluxDB', type: 'influxdb' }, |
||||
{ name: 'Elasticsearch', type: 'elasticsearch' }, |
||||
{ name: 'OpenTSDB', type: 'opentsdb' }, |
||||
]; |
||||
|
||||
$scope.init = function() { |
||||
$scope.isNew = true; |
||||
$scope.datasources = []; |
||||
|
||||
if ($routeParams.id) { |
||||
$scope.isNew = false; |
||||
$scope.getDatasourceById($routeParams.id); |
||||
} else { |
||||
$scope.current = angular.copy(defaults); |
||||
} |
||||
}; |
||||
|
||||
$scope.getDatasourceById = function(id) { |
||||
backendSrv.get('/api/datasources/' + id).then(function(ds) { |
||||
$scope.current = ds; |
||||
}); |
||||
}; |
||||
|
||||
$scope.update = function() { |
||||
if (!$scope.editForm.$valid) { |
||||
return; |
||||
} |
||||
|
||||
backendSrv.post('/api/datasources', $scope.current).then(function() { |
||||
$location.path("account/datasources"); |
||||
}); |
||||
}; |
||||
|
||||
$scope.add = function() { |
||||
if (!$scope.editForm.$valid) { |
||||
return; |
||||
} |
||||
|
||||
backendSrv.put('/api/datasources', $scope.current) |
||||
.then(function() { |
||||
$scope.editor.index = 0; |
||||
$scope.getDatasources(); |
||||
}); |
||||
}; |
||||
|
||||
$scope.init(); |
||||
|
||||
}); |
||||
}); |
||||
@ -0,0 +1,74 @@ |
||||
<topnav title="Data sources" icon="fa fa-database" subnav="true"> |
||||
<ul class="nav"> |
||||
<li><a href="account/datasources">Overview</a></li> |
||||
<li ng-class="{active: isNew}"><a href="account/datasources/new">Add new</a></li> |
||||
<li class="active" ng-show="!isNew"><a href="account/datasources/edit/{{current.name}}">Edit</a></li> |
||||
</ul> |
||||
</topnav> |
||||
|
||||
<div class="page-container"> |
||||
<div class="page"> |
||||
<h2 ng-show="isNew">Add data source</h2> |
||||
<h2 ng-show="!isNew">Edit {{current.name}}</h2> |
||||
|
||||
<form name="editForm"> |
||||
<div class="editor-row"> |
||||
<div class="editor-option"> |
||||
<label class="small">Data source name</label> |
||||
<input type="text" class="input-large" 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.type as f.name for f in types" ng-change="typeChanged()"></select> |
||||
</div> |
||||
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool> |
||||
</div> |
||||
|
||||
<div class="editor-row"> |
||||
<div class="editor-option"> |
||||
<label class="small">Url</label> |
||||
<input type="text" class="input-xxlarge" 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 class="editor-row" ng-if="current.type === 'influxdb'"> |
||||
<div class="section"> |
||||
<h5>InfluxDB Details</h5> |
||||
<div class="editor-option"> |
||||
<label class="small">Database name</label> |
||||
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input> |
||||
</div> |
||||
<div class="editor-option"> |
||||
<label class="small">User</label> |
||||
<input type="text" class="input-large" ng-model='current.user' placeholder=""></input> |
||||
</div> |
||||
<div class="editor-option"> |
||||
<label class="small">Password</label> |
||||
<input type="password" class="input-large" ng-model='current.password' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="editor-row" ng-if="current.type === 'elasticsearch'"> |
||||
<div class="section"> |
||||
<h5>Elastic search details</h5> |
||||
<div class="editor-option"> |
||||
<label class="small">Index name</label> |
||||
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<br> |
||||
|
||||
<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="add()">Add</button> |
||||
<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="update()">Update</button> |
||||
<a class="btn btn-inverse" ng-show="!isNew" href="account/datasources">Cancel</a> |
||||
<br> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue