Fixes to annotations editor

src/app/controllers/annotationsEditorCtrl.js

@@ -20,15 +20,10 @@ function (angular, _, $) {
     };
 
     $scope.init = function() {
-      $scope.currentAnnotation = angular.copy(annotationDefaults);
-      $scope.currentIsNew = true;
       $scope.editor = { index: 0 };
       $scope.datasources = datasourceSrv.getAnnotationSources();
       $scope.annotations = $scope.dashboard.annotations.list;
-
-      if ($scope.datasources.length > 0) {
-        $scope.currentDatasource = $scope.datasources[0];
-      }
+      $scope.reset();
 
       $scope.$watch('editor.index', function(newVal) {
         if (newVal !== 2) {
@@ -37,18 +32,17 @@ function (angular, _, $) {
       });
     };
 
-    $scope.setDatasource = function() {
-      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
+    $scope.datasourceChanged = function() {
+      $scope.currentDatasource = _.findWhere($scope.datasources, { name: $scope.currentAnnotation.datasource });
+      if (!$scope.currentDatasource) {
+        $scope.currentDatasource = $scope.datasources[0];
+      }
     };
 
     $scope.edit = function(annotation) {
       $scope.currentAnnotation = annotation;
       $scope.currentIsNew = false;
-      $scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource });
-
-      if (!$scope.currentDatasource) {
-        $scope.currentDatasource = $scope.datasources[0];
-      }
+      $scope.datasourceChanged();
 
       $scope.editor.index = 2;
       $(".tooltip.in").remove();
@@ -57,6 +51,13 @@ function (angular, _, $) {
     $scope.reset = function() {
       $scope.currentAnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;
+      $scope.datasourceChanged();
+      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
+    };
+
+    $scope.update = function() {
+      $scope.reset();
+      $scope.editor.index = 0;
     };
 
     $scope.add = function() {

src/app/partials/annotations_editor.html

@@ -19,7 +19,7 @@
 				<table class="grafana-options-table">
 					<tr ng-repeat="annotation in annotations">
 						<td style="width:90%">
-							<i class="icon-bolt"></i>
+							<i class="icon-bolt"></i> &nbsp;
 							{{annotation.name}}
 						</td>
 						<td style="width: 1%">
@@ -31,7 +31,7 @@
 						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
 						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
 						<td style="width: 1%">
-							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
+							<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
 								<i class="icon-remove"></i>
 							</a>
 						</td>
@@ -48,7 +48,7 @@
 				</div>
 				<div class="editor-option">
 					<label class="small">Datasource</label>
-					<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
+					<select ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
 				</div>
 				<div class="editor-option">
 					<label class="small">Icon color</label>
@@ -71,11 +71,12 @@
 			<div ng-include src="currentDatasource.editorSrc">
 			</div>
 
-			<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
 		</div>
 	</div>
 
 	<div class="dashboard-editor-footer">
+		<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
+		<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
 		<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
 	</div>
 </div>

src/app/partials/roweditor.html

@@ -29,29 +29,32 @@
 	</div>
   <div class="row-fluid" ng-if="editor.index == 1">
     <div class="span12">
-      <h4>Panels</h4>
-      <table class="table table-condensed table-striped">
+			<table class="grafana-options-table" style="max-width: 400px; width: auto">
         <thead>
           <th>Title</th>
           <th>Type</th>
-          <th>Span <span class="small">({{dashboard.rowSpan(row)}}/12)</span></th>
-          <th>Delete</th>
-          <th>Move</th>
+          <th>Span</span></th>
           <th></th>
+          <th></th>
+					<th></th>
         </thead>
         <tr ng-repeat="panel in row.panels">
-          <td>{{panel.title}}</td>
+          <td style="width: 95%">{{panel.title}}</td>
           <td>{{panel.type}}</td>
-          <td><select ng-hide="panel.sizeable == false" class="input-mini" ng-model="panel.span" ng-options="size for size in [1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
-          <td><i ng-click="row.panels = _.without(row.panels,panel)" class="pointer icon-remove"></i></td>
-          <td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
-          <td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
-        </tr>
-      </table>
-    </div>
-  </div>
+          <td><select ng-hide="panel.sizeable == false" class="input-mini" style="margin-bottom: 0;" ng-model="panel.span" ng-options="size for size in [1,2,3,4,5,6,7,8,9,10,11,12]"></select></td>
+					<td><i ng-click="_.move(row.panels,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
+					<td><i ng-click="_.move(row.panels,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
+					<td>
+						<a ng-click="row.panels = _.without(row.panels,panel)" class="btn btn-danger btn-mini">
+							<i class="icon-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</table>
+		</div>
+	</div>
 </div>
 
 <div class="dashboard-editor-footer">
-  <button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
+	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
 </div>