energylink/public/app/features/datasources/partials/edit.html

<navbar
	title="Data Sources"
	title-url="datasources"
	icon="icon-gf icon-gf-datasources">
</navbar>

<div class="page-container">
	<div class="page-header">
		<h1 ng-show="isNew">Add data source</h1>
		<h1 ng-show="!isNew">Edit data source</h1>
	</div>

	<form name="editForm">
		<div class="gf-form-group">
			<div class="gf-form">
				<span class="gf-form-label width-7">Name</span>
				<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
			</div>

			<div class="gf-form">
				<span class="gf-form-label width-7">Type</span>
				<div class="gf-form-select-wrapper">
					<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
				</div>
			</div>
		</div>

		<rebuild-on-change property="datasourceMeta.id">
			<plugin-component type="datasource-config-ctrl">
			</plugin-component>
		</rebuild-on-change>

		<div ng-if="testing" style="margin-top: 25px">
			<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
			<h5 ng-show="testing.done">Test results</h5>
			<div class="alert-{{testing.status}} alert">
				<div class="alert-title">{{testing.title}}</div>
				<div ng-bind='testing.message'></div>
			</div>
		</div>

		<div class="gf-form-button-row">
			<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
			<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
			<button type="submit" class="btn btn-secondary" ng-show="!isNew" ng-click="saveChanges(true)">
				Test Connection
			</button>
			<a class="btn btn-link" href="datasources">Cancel</a>
		</div>
	</form>
</div>