moved custom timepicker from modal to edit pane

src/app/controllers/submenuCtrl.js

@@ -8,7 +8,7 @@ function (angular, app, _) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('SubmenuCtrl', function($scope, $q, datasourceSrv) {
+  module.controller('SubmenuCtrl', function($scope, $q, $rootScope, datasourceSrv) {
     var _d = {
       enable: true
     };
@@ -77,6 +77,11 @@ function (angular, app, _) {
         });
     };
 
+    $scope.disableAnnotation = function (annotation) {
+      annotation.enable = !annotation.enable;
+      $rootScope.$broadcast('refresh');
+    };
+
     $scope.init();
 
   });

src/app/panels/annotations/editor.js

@@ -1,63 +0,0 @@
-/*
-
-*/
-define([
-  'angular',
-  'app',
-  'lodash'
-],
-function (angular, app, _) {
-  'use strict';
-
-  var module = angular.module('grafana.panels.annotations', []);
-  app.useModule(module);
-
-  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) {
-
-    var annotationDefaults = {
-      name: '',
-      datasource: null,
-      showLine: true,
-      iconColor: '#C0C6BE',
-      lineColor: 'rgba(255, 96, 96, 0.592157)',
-      iconSize: 13,
-      enable: true
-    };
-
-    $scope.init = function() {
-      $scope.currentAnnotation = angular.copy(annotationDefaults);
-      $scope.currentIsNew = true;
-      $scope.datasources = datasourceSrv.getAnnotationSources();
-
-      if ($scope.datasources.length > 0) {
-        $scope.currentDatasource = $scope.datasources[0];
-      }
-    };
-
-    $scope.setDatasource = function() {
-      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
-    };
-
-    $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.update = function() {
-      $scope.currentAnnotation = angular.copy(annotationDefaults);
-      $scope.currentIsNew = true;
-    };
-
-    $scope.add = function() {
-      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
-      $scope.panel.annotations.push($scope.currentAnnotation);
-      $scope.currentAnnotation = angular.copy(annotationDefaults);
-    };
-
-  });
-});

src/app/panels/annotations/module.html

@@ -1,12 +0,0 @@
-<div ng-controller='AnnotationsCtrl' ng-init="init()">
-
-  <div class="submenu-toggle" ng-repeat="annotation in panel.annotations" ng-class="{'annotation-disabled': !annotation.enable }">
-    <i class="annotation-color-icon icon-minus"></i>
-    <a ng-click="hide(annotation)" class="small">{{annotation.name}}</a>
-  </div>
-
-  <div class="submenu-control-edit">
-    <i class="icon-cog pointer" config-modal="app/panels/annotations/editor.html" bs-tooltip="'Edit annotations'" ></i>
-  </div>
-
-</div>

src/app/panels/annotations/module.js

@@ -1,39 +0,0 @@
-/*
-
-  ## annotations
-
-*/
-define([
-  'angular',
-  'app',
-  'lodash',
-  './editor'
-],
-function (angular, app, _) {
-  'use strict';
-
-  var module = angular.module('grafana.panels.annotations', []);
-  app.useModule(module);
-
-  module.controller('AnnotationsCtrl', function($scope, datasourceSrv, $rootScope) {
-
-    $scope.panelMeta = {
-      status  : "Stable",
-      description : "Annotations"
-    };
-
-    // Set and populate defaults
-    var _d = {
-      annotations: []
-    };
-
-    _.defaults($scope.panel, _d);
-
-    $scope.hide = function (annotation) {
-      annotation.enable = !annotation.enable;
-      $rootScope.$broadcast('refresh');
-    };
-
-  });
-
-});

src/app/panels/timepicker/custom.html

@@ -1,78 +1,84 @@
-  <div class="modal-body">
-    <style>
-      .timepicker-to-column {
-        margin-top: 10px;
-      }
+<div class="dashboard-editor-header">
+	<div class="dashboard-editor-title">
+		<i class="icon icon-calendar-empty"></i>
+		Custom time range
+	</div>
+</div>
 
-      .timepicker-input input {
-        outline: 0 !important;
-        border: 0px !important;
-        -webkit-box-shadow: 0;
-        -moz-box-shadow: 0;
-        box-shadow: 0;
-        position: relative;
-      }
+<div class="dashboard-editor-body">
+	<style>
+		.timepicker-to-column {
+			margin-top: 10px;
+		}
 
-      .timepicker-input input::-webkit-outer-spin-button,
-      .timepicker-input input::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-      }
+		.timepicker-input input {
+			outline: 0 !important;
+			border: 0px !important;
+			-webkit-box-shadow: 0;
+			-moz-box-shadow: 0;
+			box-shadow: 0;
+			position: relative;
+		}
 
-      input.timepicker-date {
-        width: 90px;
-      }
-      input.timepicker-hms {
-        width: 20px;
-      }
-      input.timepicker-ms {
-        width: 25px;
-      }
-      div.timepicker-now {
-        float: right;
-      }
-    </style>
+		.timepicker-input input::-webkit-outer-spin-button,
+		.timepicker-input input::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
 
-    <div class="timepicker form-horizontal">
-        <form name="input">
+		input.timepicker-date {
+			width: 90px;
+		}
+		input.timepicker-hms {
+			width: 20px;
+		}
+		input.timepicker-ms {
+			width: 25px;
+		}
+		div.timepicker-now {
+			float: right;
+		}
+	</style>
 
-        <div class="timepicker-from-column">
-          <label class="small">From</label>
-          <div class="fake-input timepicker-input">
-            <input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
-            <input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
-            <input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
-            <input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
-            <input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond"  onClick="this.select();"/>
-          </div>
-        </div>
+	<div class="timepicker form-horizontal">
+		<form name="input">
 
-        <div class="timepicker-to-column">
+			<div class="timepicker-from-column">
+				<label class="small">From</label>
+				<div class="fake-input timepicker-input">
+					<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
+					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
+					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
+					<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
+					<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond"  onClick="this.select();"/>
+				</div>
+			</div>
 
-          <label class="small">To (<a class="link" ng-class="{'strong':tempnow}" ng-click="setNow();tempnow=true">now</a>)</label>
+			<div class="timepicker-to-column">
 
-          <div class="fake-input timepicker-input">
-            <div ng-hide="tempnow">
-              <input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
-              <input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
-              <input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
-              <input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
-              <input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
-            </div>
-            <span type="text" ng-show="tempnow" ng-disabled="tempnow">&nbsp <i class="pointer icon-remove-sign" ng-click="setNow();tempnow=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
-          </div>
-        </div>
+				<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="setNow();temptime.now=true">now</a>)</label>
 
-        </form>
-        <div class="clearfix"></div>
-    </div>
-  </div>
+				<div class="fake-input timepicker-input">
+					<div ng-hide="temptime.now">
+						<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
+						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
+						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
+						<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
+						<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
+					</div>
+					<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">&nbsp <i class="pointer icon-remove-sign" ng-click="setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
+				</div>
+			</div>
 
-  <div class="modal-footer">
-    <form name="input" style="margin-bottom:0">
-    <span class="" ng-hide="input.$valid">Invalid date or range</span>
-    <button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();" ng-disabled="!input.$valid" class="btn btn-success">Apply</button>
-    <button ng-click="dismiss();" class="btn btn-danger">Cancel</button>
+		</form>
+		<div class="clearfix"></div>
+	</div>
+</div>
 
-    </form>
-  </div>
+<div class="dashboard-editor-footer">
+	<form name="input" style="margin-bottom:0">
+		<span class="" ng-hide="input.$valid">Invalid date or range</span>
+		<button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();" ng-disabled="!input.$valid" class="btn btn-success">Apply</button>
+		<button ng-click="dismiss();" class="btn btn-success pull-right">Cancel</button>
+	</form>
+</div>

src/app/panels/timepicker/module.js

@@ -65,20 +65,10 @@ function (angular, app, _, moment, kbn) {
     };
 
     $scope.customTime = function() {
-      if (!customTimeModal) {
-        customTimeModal = $modal({
-          template: './app/panels/timepicker/custom.html',
-          persist: true,
-          show: false,
-          scope: $scope,
-          keyboard: false
-        });
-      }
-
       // Assume the form is valid since we're setting it to something valid
       $scope.input.$setValidity("dummy", true);
       $scope.temptime = cloneTime($scope.time);
-      $scope.tempnow = $scope.panel.now;
+      $scope.temptime.now = $scope.panel.now;
 
       $scope.temptime.from.date.setHours(0,0,0,0);
       $scope.temptime.to.date.setHours(0,0,0,0);
@@ -89,9 +79,7 @@ function (angular, app, _, moment, kbn) {
         $scope.temptime.to.date = moment($scope.temptime.to.date).add('days',1).toDate();
       }
 
-      $q.when(customTimeModal).then(function(modalEl) {
-        modalEl.modal('show');
-      });
+      $scope.emitAppEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope });
     };
 
     // Constantly validate the input of the fields. This function does not change any date variables
@@ -118,7 +106,7 @@ function (angular, app, _, moment, kbn) {
         return false;
       }
 
-      return {from:_from,to:_to};
+      return { from: _from, to:_to, now: time.now};
     };
 
     $scope.setNow = function() {
@@ -135,7 +123,7 @@ function (angular, app, _, moment, kbn) {
       // Create filter object
       var _filter = _.clone(time);
 
-      if($scope.tempnow) {
+      if(time.now) {
         _filter.to = "now";
       }
 

src/app/partials/submenu.html

@@ -37,7 +37,7 @@
 
 						<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
 							<i class="annotation-color-icon icon-bolt"></i>
-							<a ng-click="hide(annotation)">{{annotation.name}}</a>
+							<a ng-click="disableAnnotation(annotation)">{{annotation.name}}</a>
 						</li>
 
 					</ul>