diff --git a/pkg/api/annotations.go b/pkg/api/annotations.go index a7783e4be88..a5211cfbec2 100644 --- a/pkg/api/annotations.go +++ b/pkg/api/annotations.go @@ -75,7 +75,7 @@ func PostAnnotation(c *middleware.Context, cmd dtos.PostAnnotationsCmd) Response } item.Id = 0 - item.Epoch = cmd.EndTime + item.Epoch = cmd.TimeEnd if err := repo.Save(&item); err != nil { return ApiError(500, "Failed save annotation for region end time", err) diff --git a/pkg/api/dtos/annotations.go b/pkg/api/dtos/annotations.go index bd9dd06c457..7bf33618261 100644 --- a/pkg/api/dtos/annotations.go +++ b/pkg/api/dtos/annotations.go @@ -27,7 +27,7 @@ type PostAnnotationsCmd struct { FillColor string `json:"fillColor"` IsRegion bool `json:"isRegion"` - EndTime int64 `json:"endTime"` + TimeEnd int64 `json:"timeEnd"` } type DeleteAnnotationsCmd struct { diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index a6fb7c10655..43afde31849 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -7,41 +7,49 @@ import coreModule from 'app/core/core_module'; import Drop from 'tether-drop'; /** @ngInject **/ -function popoverSrv($compile, $rootScope) { +function popoverSrv($compile, $rootScope, $timeout) { + let openDrop = null; + + this.close = function() { + if (openDrop) { + openDrop.close(); + } + }; this.show = function(options) { - var classNames = 'drop-popover'; - var popoverScope = _.extend($rootScope.$new(true), options.model); + if (openDrop) { + openDrop.close(); + } + + var scope = _.extend($rootScope.$new(true), options.model); var drop; - if (options.classNames) { - classNames = options.classNames; - } + var cleanUp = () => { + setTimeout(() => { + scope.$destroy(); + drop.destroy(); - function destroyDrop() { - setTimeout(function() { - if (drop.tether) { - drop.destroy(); + if (options.onClose) { + options.onClose(); } }); - } + }; - popoverScope.dismiss = function() { - popoverScope.$destroy(); - destroyDrop(); + scope.dismiss = () => { + drop.close(); }; var contentElement = document.createElement('div'); contentElement.innerHTML = options.template; - $compile(contentElement)(popoverScope); + $compile(contentElement)(scope); drop = new Drop({ target: options.element, content: contentElement, position: options.position, - classes: classNames, - openOn: options.openOn || 'hover', + classes: options.classNames || 'drop-popover', + openOn: options.openOn, hoverCloseDelay: 200, tetherOptions: { constraints: [{to: 'scrollParent', attachment: "none both"}] @@ -49,14 +57,11 @@ function popoverSrv($compile, $rootScope) { }); drop.on('close', () => { - popoverScope.dismiss({fromDropClose: true}); - destroyDrop(); - if (options.onClose) { - options.onClose(); - } + cleanUp(); }); - setTimeout(() => { drop.open(); }, 10); + openDrop = drop; + $timeout(() => { drop.open(); }, 10); }; } diff --git a/public/app/features/annotations/annotations_srv.ts b/public/app/features/annotations/annotations_srv.ts index 6ba70ea92f8..e9cdc0c20ec 100644 --- a/public/app/features/annotations/annotations_srv.ts +++ b/public/app/features/annotations/annotations_srv.ts @@ -35,6 +35,7 @@ export class AnnotationsSrv { // combine the annotations and flatten results var annotations = _.flattenDeep([results[0], results[1]]); + // filter out annotations that do not belong to requesting panel annotations = _.filter(annotations, item => { if (item.panelId && options.panel.id !== item.panelId) { @@ -60,7 +61,7 @@ export class AnnotationsSrv { var panel = options.panel; var dashboard = options.dashboard; - if (panel) { + if (panel && panel.alert) { return this.backendSrv.get('/api/annotations', { from: options.range.from.valueOf(), to: options.range.to.valueOf(), @@ -133,7 +134,7 @@ export class AnnotationsSrv { return this.globalAnnotationsPromise; } - postAnnotation(annotation) { + saveAnnotationEvent(annotation) { return this.backendSrv.post('/api/annotations', annotation); } diff --git a/public/app/features/annotations/event_editor.ts b/public/app/features/annotations/event_editor.ts index 83aaf595923..46e29a660a9 100644 --- a/public/app/features/annotations/event_editor.ts +++ b/public/app/features/annotations/event_editor.ts @@ -5,11 +5,11 @@ import moment from 'moment'; import coreModule from 'app/core/core_module'; import {MetricsPanelCtrl} from 'app/plugins/sdk'; -export class AnnotationItem { +export class AnnotationEvent { dashboardId: number; panelId: number; - time: Date; - timeEnd: Date; + time: any; + timeEnd: any; isRegion: boolean; title: string; text: string; @@ -17,14 +17,13 @@ export class AnnotationItem { export class EventEditorCtrl { panelCtrl: MetricsPanelCtrl; - timeFormat = 'YYYY-MM-DD HH:mm:ss'; - annotation: AnnotationItem; + annotation: AnnotationEvent; timeRange: {from: number, to: number}; form: any; /** @ngInject **/ - constructor() { - this.annotation = new AnnotationItem(); + constructor(private annotationsSrv) { + this.annotation = new AnnotationEvent(); this.annotation.panelId = this.panelCtrl.panel.id; this.annotation.dashboardId = this.panelCtrl.dashboard.id; this.annotation.text = "hello"; @@ -40,6 +39,19 @@ export class EventEditorCtrl { if (!this.form.$valid) { return; } + + let saveModel = _.cloneDeep(this.annotation); + saveModel.time = saveModel.time.valueOf(); + if (saveModel.isRegion) { + saveModel.timeEnd = saveModel.timeEnd.valueOf(); + } + + if (saveModel.timeEnd < saveModel.time) { + console.log('invalid time'); + return; + } + + this.annotationsSrv.saveAnnotationEvent(saveModel); } } @@ -52,7 +64,8 @@ export function eventEditor() { templateUrl: 'public/app/features/annotations/partials/event_editor.html', scope: { "panelCtrl": "=", - "timeRange": "=" + "timeRange": "=", + "cancel": "&", } }; } diff --git a/public/app/features/annotations/partials/event_editor.html b/public/app/features/annotations/partials/event_editor.html index a99e1374e82..c2a75e92603 100644 --- a/public/app/features/annotations/partials/event_editor.html +++ b/public/app/features/annotations/partials/event_editor.html @@ -9,31 +9,30 @@
-
-
- Time - -
-
-
- -
-
- Start - -
-
- End - -
-
-
- Description - -
+
+ Time + +
+ + +
+
+ Start + +
+
+ End + +
+
+
+ Description + +
-
- -
- +
+ + Cancel +
+ diff --git a/public/app/features/dashboard/addAnnotationModalCtrl.ts b/public/app/features/dashboard/addAnnotationModalCtrl.ts deleted file mode 100644 index 02b6462c0ed..00000000000 --- a/public/app/features/dashboard/addAnnotationModalCtrl.ts +++ /dev/null @@ -1,56 +0,0 @@ -/// - -import angular from 'angular'; -import moment from 'moment'; - -export class AddAnnotationModalCtrl { - timeFormat = 'YYYY-MM-DD HH:mm:ss'; - annotation: any; - graphCtrl: any; - - /** @ngInject */ - constructor(private $scope) { - this.graphCtrl = $scope.ctrl; - $scope.ctrl = this; - - let dashboardId = this.graphCtrl.dashboard.id; - let panelId = this.graphCtrl.panel.id; - this.annotation = { - dashboardId: dashboardId, - panelId: panelId, - time: null, - timeTo: null, - title: "", - text: "" - }; - - this.annotation.time = moment($scope.annotationTimeRange.from).format(this.timeFormat);0 - if ($scope.annotationTimeRange.to) { - this.annotation.timeTo = moment($scope.annotationTimeRange.to).format(this.timeFormat); - } - } - - addAnnotation() { - this.annotation.time = moment(this.annotation.time, this.timeFormat).valueOf(); - if (this.annotation.timeTo) { - this.annotation.timeTo = moment(this.annotation.timeTo, this.timeFormat).valueOf(); - } - - this.graphCtrl.pushAnnotation(this.annotation) - .then(response => { - this.close(); - }) - .catch(error => { - console.log(error); - this.close(); - }); - } - - close() { - this.$scope.dismiss(); - } -} - -angular - .module('grafana.controllers') - .controller('AddAnnotationModalCtrl', AddAnnotationModalCtrl); diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 15de6cf3abc..668f1973b42 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -84,8 +84,8 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) { element: elem[0], classNames: 'drop-popover drop-popover--form', position: 'bottom center', - openOn: 'click', - template: '', + openOn: null, + template: '', model: { timeRange: timeRange, panelCtrl: ctrl, diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js index 2cdb1821793..c29e8949f8e 100644 --- a/public/app/plugins/panel/graph/legend.js +++ b/public/app/plugins/panel/graph/legend.js @@ -48,6 +48,7 @@ function (angular, _, $) { element: el[0], position: 'bottom center', template: '', + openOn: 'hover', model: { series: series, toggleAxis: function() { diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 76539c0035a..78293ef801a 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -67,7 +67,6 @@ .modal-content { padding: $spacer*2; - min-height: $spacer*15; } // Remove bottom margin if need be