energylink/public/app/features/plugins/partials/ds_edit.html

<div class="scroll-canvas">
	<div gemini-scrollbar>
		<navbar model="ctrl.navModel"></navbar>
		<div class="page-container">
			<div class="page-header">
				<page-h1 model="ctrl.navModel"></page-h1>

				<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>

				<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
					<ul class="gf-tabs">
						<li class="gf-tabs-item">
							<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
								Config
							</a>
						</li>
						<li class="gf-tabs-item">
							<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
								Dashboards
							</a>
						</li>
					</ul>
				</div>
			</div>

			<div ng-if="ctrl.tabIndex === 0" class="tab-content">

				<form name="ctrl.editForm" ng-if="ctrl.current">
					<div class="gf-form-group">
						<div class="gf-form-inline">
							<div class="gf-form max-width-30">
								<span class="gf-form-label width-7">Name</span>
								<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
								<info-popover offset="0px -135px" mode="right-absolute">
									The name is used when you select the data source in panels.
									The <em>Default</em> data source is preselected in new
									panels.
								</info-popover>
							</div>
							<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
						</div>

						<div class="gf-form">
							<span class="gf-form-label width-7">Type</span>
							<div class="gf-form-select-wrapper max-width-23">
								<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.userChangedType()"></select>
							</div>
						</div>
					</div>

					<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
						This plugin is marked as being in alpha state, which means it is in early development phase and
						updates will include breaking changes.
					</div>

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

					<div ng-if="ctrl.testing" class="gf-form-group section">
						<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
						<div class="alert-{{ctrl.testing.status}} alert" ng-show="ctrl.testing.done">
							<div class="alert-icon">
								<i class="fa fa-exclamation-triangle" ng-show="ctrl.testing.status === 'error'"></i>
								<i class="fa fa-check" ng-show="ctrl.testing.status !== 'error'"></i>
							</div>
							<div class="alert-body">
								<div class="alert-title">{{ctrl.testing.message}}</div>
							</div>
						</div>
					</div>

					<div class="gf-form-button-row">
						<button type="submit" class="btn btn-success" ng-disabled="ctrl.current.readOnly"  ng-click="ctrl.saveChanges()">Save</button>
						<button type="submit" class="btn btn-danger" ng-disabled="ctrl.current.readOnly"  ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
							Delete
						</button>
						<a class="btn btn-link" href="datasources">Cancel</a>
					</div>

					<br />
					<br />
					<br />

				</form>
			</div>
		</div>
	</div>
</div>