energylink/src/app/features/admin/partials/datasources.html

<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin'"></div>

<div class="dashboard-edit-view" style="min-height: 500px">
	<div class="editor-row">
		<div class="section">

			<div class="dashboard-editor-header">
				<div class="dashboard-editor-title">
					<i class="icon icon-sitemap"></i>
					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 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="fa fa-edit"></i>
											Edit
										</a>
									</td>
									<td style="width: 1%">
										<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
											<i class="fa fa-remove"></i>
										</a>
									</td>
								</tr>
							</table>
						</div>
					</div>

					<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" 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-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>

					<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>
			</div>
		</div>
	</div>
</div>