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

<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">

	<div class="gf-box-header">
		<div class="gf-box-title">
			<i class="fa fa-bolt"></i>
			Annotations
		</div>

		<div class="tabs">
			<ul class="nav nav-tabs">
				<li ng-class="{active: mode === 'list'}">
					<a ng-click="mode = 'list';">
						List
					</a>
				</li>

				<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
					<a>
						{{currentAnnotation.name}}
					</a>
				</li>

				<li ng-class="{active: mode === 'new'}">
					<a ng-click="mode = 'new';">
						<i class="fa fa-plus"></i>
						New
					</a>
				</li>
			</ul>
		</div>

		<button class="gf-box-header-close-btn" ng-click="dismiss();">
			<i class="fa fa-remove"></i>
		</button>
	</div>
	<div class="gf-box-body">
		<div class="editor-row row" ng-if="mode === 'list'">
			<div class="span6">
				<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%" class="nobg">
							<a ng-click="edit(annotation)" class="btn btn-inverse btn-mini">
								<i class="fa fa-edit"></i>
								Edit
							</a>
						</td>
						<td style="width: 1%" class="nobg">
							<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
								<i class="fa fa-remove"></i>
							</a>
						</td>
					</tr>
				</table>
			</div>
		</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 width-10">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>
						<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-inline last-row">
					<div class="gf-form gf-size-max-xl">
						<span class="gf-form-label width-10">Icon size</span>
						<select class="gf-form-input gf-size-md" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
					</div>
					<div class="gf-form max-width-10">
						<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
						<span class="checkbox-label">Icon color</span>
					</div>
					<div class="gf-form max-width-10">
						<editor-checkbox text="Grid line" model="currentAnnotation.showLine"></editor-checkbox>
					</div>
					<div class="gf-form max-width-10">
						<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
						<span class="checkbox-label">Line color</span>
					</div>
				</div>
			</div>

			<rebuild-on-change property="currentAnnotation.datasource">
				<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>