energylink/public/app/features/annotations/partials/editor.html

<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
	<div class="tabbed-view-header">
		<h2 class="tabbed-view-title">
			Annotations
		</h2>

		<ul class="gf-tabs">
			<li class="gf-tabs-item" >
				<a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">
					List
				</a>
			</li>
			<li class="gf-tabs-item" ng-show="mode === 'edit'">
				<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
					{{currentAnnotation.name}}
				</a>
			</li>
			<li class="gf-tabs-item" >
				<a class="gf-tabs-link" ng-click="mode = 'new';" ng-class="{active: mode === 'new'}">
					<i class="fa fa-plus"></i>
					New
				</a>
			</li>
		</ul>

		<button class="tabbed-view-close-btn" ng-click="dismiss();">
			<i class="fa fa-remove"></i>
		</button>
	</div>

	<div class="tabbed-view-body">
		<div class="editor-row row" ng-if="mode === 'list'">
			<div ng-if="annotations.length === 0">
				<em>No annotations defined</em>
			</div>
			<table class="grafana-options-table">
				<tr ng-repeat="annotation in annotations">
					<td style="width:90%">
						<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i> &nbsp;
						{{annotation.name}}
					</td>
					<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
					<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>

					<td style="width: 1%">
						<a ng-click="edit(annotation)" class="btn btn-inverse btn-mini">
							<i class="fa fa-edit"></i>
							Edit
						</a>
					</td>
					<td style="width: 1%">
						<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
							<i class="fa fa-remove"></i>
						</a>
					</td>
				</tr>
			</table>
		</div>

		<div class="annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'">
			<div class="gf-form-group">
				<div class="gf-form-inline">
					<div class="gf-form gf-size-max-xxl">
						<span class="gf-form-label">Name</span>
						<input type="text" class="gf-form-input" ng-model='currentAnnotation.name' placeholder="name"></input>
					</div>
					<div class="gf-form">
						<span class="gf-form-label max-width-10">Datasource</span>
						<div class="gf-form-select-wrapper">
							<select class="gf-form-input gf-size-auto" ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
						</div>
					</div>
					<div class="gf-form">
						<label class="gf-form-label">
							<span>Color</span>
							<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
						</label>
					</div>
				</div>
			</div>

			<rebuild-on-change property="currentDatasource">
				<plugin-component type="annotations-query-ctrl">
				</plugin-component>
			</rebuild-on-change>

			<div class="gf-form">
				<div class="gf-form-button-row">
					<button ng-show="mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="add()">Add</button>
					<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
				</div>
			</div>
		</div>
	</div>
</div>