IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(annotations): added support to show grafana stored annotations in graphs, #5982

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-09-08 11:25:45 +02:00
parent c769148701
commit d60bd77658
21 changed files with 246 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/directives/plugin_component.ts
View File

@@ -136,12 +136,12 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $
}
// Annotations
case "annotations-query-ctrl": {
return System.import(scope.currentDatasource.meta.module).then(function(dsModule) {
return System.import(scope.ctrl.currentDatasource.meta.module).then(function(dsModule) {
return {
baseUrl: scope.currentDatasource.meta.baseUrl,
name: 'annotations-query-ctrl-' + scope.currentDatasource.meta.id,
baseUrl: scope.ctrl.currentDatasource.meta.baseUrl,
name: 'annotations-query-ctrl-' + scope.ctrl.currentDatasource.meta.id,
bindings: {annotation: "=", datasource: "="},
attrs: {"annotation": "currentAnnotation", datasource: "currentDatasource"},
attrs: {"annotation": "ctrl.currentAnnotation", datasource: "ctrl.currentDatasource"},
Component: dsModule.AnnotationsQueryCtrl,
};
});

2
public/app/features/alerting/alert_tab_ctrl.ts
View File

@@ -80,7 +80,7 @@ export class AlertTabCtrl {
}
getAlertHistory() {
this.backendSrv.get(`/api/alert-history?dashboardId=${this.panelCtrl.dashboard.id}&panelId=${this.panel.id}`).then(res => {
this.backendSrv.get(`/api/alert-history?dashboardId=${this.panelCtrl.dashboard.id}&panelId=${this.panel.id}&limit=50`).then(res => {
this.alertHistory = _.map(res, ah => {
ah.time = moment(ah.timestamp).format('MMM D, YYYY HH:mm:ss');
ah.stateModel = alertDef.getStateDisplayModel(ah.newState);

4
public/app/features/alerting/partials/alert_tab.html
View File

@@ -10,7 +10,7 @@
</a>
</li>
<li ng-class="{active: ctrl.subTabIndex === 2}">
<a ng-click="ctrl.changeTabIndex(2)">Alert History</a>
<a ng-click="ctrl.changeTabIndex(2)">State history</a>
</li>
<li>
<a ng-click="ctrl.delete()">Delete</a>
@@ -136,7 +136,7 @@
</div>
<div class="gf-form-group" style="max-width: 720px;" ng-if="ctrl.subTabIndex === 2">
<h5 class="section-heading">Alert history</h5>
<h5 class="section-heading">State history <span class="muted small">(last 50 state changes)</span></h5>
<section class="card-section card-list-layout-list">
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">

76
public/app/features/annotations/editor_ctrl.js
View File

@@ -1,76 +0,0 @@
define([
'angular',
'lodash',
'jquery'
],
function (angular, _, $) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) {
var annotationDefaults = {
name: '',
datasource: null,
iconColor: 'rgba(255, 96, 96, 1)',
enable: true
};
$scope.init = function() {
$scope.mode = 'list';
$scope.datasources = datasourceSrv.getAnnotationSources();
$scope.annotations = $scope.dashboard.annotations.list;
$scope.reset();
$scope.$watch('mode', function(newVal) {
if (newVal === 'new') { $scope.reset(); }
});
};
$scope.datasourceChanged = function() {
return datasourceSrv.get($scope.currentAnnotation.datasource).then(function(ds) {
$scope.currentDatasource = ds;
$scope.currentAnnotation.datasource = $scope.currentAnnotation.datasource;
});
};
$scope.edit = function(annotation) {
$scope.currentAnnotation = annotation;
$scope.currentIsNew = false;
$scope.datasourceChanged();
$scope.mode = 'edit';
$(".tooltip.in").remove();
};
$scope.reset = function() {
$scope.currentAnnotation = angular.copy(annotationDefaults);
$scope.currentAnnotation.datasource = $scope.datasources[0].name;
$scope.currentIsNew = true;
$scope.datasourceChanged();
};
$scope.update = function() {
$scope.reset();
$scope.mode = 'list';
$scope.broadcastRefresh();
};
$scope.add = function() {
$scope.annotations.push($scope.currentAnnotation);
$scope.reset();
$scope.mode = 'list';
$scope.updateSubmenuVisibility();
$scope.broadcastRefresh();
};
$scope.removeAnnotation = function(annotation) {
var index = _.indexOf($scope.annotations, annotation);
$scope.annotations.splice(index, 1);
$scope.updateSubmenuVisibility();
$scope.broadcastRefresh();
};
});
});

82
public/app/features/annotations/editor_ctrl.ts Normal file
View File

@@ -0,0 +1,82 @@
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import _ from 'lodash';
import config from 'app/core/config';
import $ from 'jquery';
import coreModule from 'app/core/core_module';
export class AnnotationsEditorCtrl {
mode: any;
datasources: any;
annotations: any;
currentAnnotation: any;
currentDatasource: any;
currentIsNew: any;
annotationDefaults: any = {
name: '',
datasource: null,
iconColor: 'rgba(255, 96, 96, 1)',
enable: true
};
constructor(private $scope, private datasourceSrv) {
$scope.ctrl = this;
this.mode = 'list';
this.datasources = datasourceSrv.getAnnotationSources();
this.annotations = $scope.dashboard.annotations.list;
this.reset();
$scope.$watch('mode', newVal => {
if (newVal === 'new') {
this.reset();
}
});
}
datasourceChanged() {
return this.datasourceSrv.get(this.currentAnnotation.datasource).then(ds => {
this.currentDatasource = ds;
});
}
edit(annotation) {
this.currentAnnotation = annotation;
this.currentIsNew = false;
this.datasourceChanged();
this.mode = 'edit';
$(".tooltip.in").remove();
}
reset() {
this.currentAnnotation = angular.copy(this.annotationDefaults);
this.currentAnnotation.datasource = this.datasources[0].name;
this.currentIsNew = true;
this.datasourceChanged();
}
update() {
this.reset();
this.mode = 'list';
this.$scope.broadcastRefresh();
};
add() {
this.annotations.push(this.currentAnnotation);
this.reset();
this.mode = 'list';
this.$scope.updateSubmenuVisibility();
this.$scope.broadcastRefresh();
};
removeAnnotation(annotation) {
var index = _.indexOf(this.annotations, annotation);
this.annotations.splice(index, 1);
this.$scope.updateSubmenuVisibility();
this.$scope.broadcastRefresh();
}
}
coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl);

40
public/app/features/annotations/partials/editor.html
View File

@@ -1,4 +1,4 @@
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div ng-controller="AnnotationsEditorCtrl">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Annotations
@@ -6,16 +6,16 @@
<ul class="gf-tabs">
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">
<a class="gf-tabs-link" ng-click="ctrl.mode = 'list';" ng-class="{active: ctrl.mode === 'list'}">
List
</a>
</li>
<li class="gf-tabs-item" ng-show="mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
<li class="gf-tabs-item" ng-show="ctrl.mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: ctrl.mode === 'edit'}">
{{currentAnnotation.name}}
</a>
</li>
<li class="gf-tabs-item" ng-show="mode === 'new'">
<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
<span class="active gf-tabs-link">New</span>
</li>
</ul>
@@ -26,18 +26,18 @@
</div>
<div class="tabbed-view-body">
<div class="editor-row row" ng-if="mode === 'list'">
<div ng-if="annotations.length === 0">
<div class="editor-row row" ng-if="ctrl.mode === 'list'">
<div ng-if="ctrl.annotations.length === 0">
<em>No annotations defined</em>
</div>
<table class="grafana-options-table">
<tr ng-repeat="annotation in annotations">
<tr ng-repeat="annotation in ctrl.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%"><i ng-click="_.move(ctrl.annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(ctrl.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">
@@ -46,7 +46,7 @@
</a>
</td>
<td style="width: 1%">
<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
@@ -54,43 +54,43 @@
</table>
</div>
<div class="gf-form" ng-show="mode === 'list'">
<div class="gf-form" ng-show="ctrl.mode === 'list'">
<div class="gf-form-button-row">
<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
<a type="button" class="btn gf-form-button btn-success" ng-click="ctrl.mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
</div>
</div>
<div class="annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'">
<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.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>
<input type="text" class="gf-form-input" ng-model='ctrl.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>
<select class="gf-form-input gf-size-auto" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label">
<span>Color</span>
</label>
<spectrum-picker class="gf-form-input" ng-model="currentAnnotation.iconColor"></spectrum-picker>
<spectrum-picker class="gf-form-input" ng-model="ctrl.currentAnnotation.iconColor"></spectrum-picker>
</div>
</div>
</div>
<rebuild-on-change property="currentDatasource">
<rebuild-on-change property="ctrl.currentDatasource">
<plugin-component type="annotations-query-ctrl">
</plugin-component>
</rebuild-on-change>
<div class="gf-form">
<div class="gf-form-button-row p-y-0">
<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>
<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
</div>
</div>
</div>

15
public/app/plugins/datasource/grafana/datasource.ts
View File

@@ -12,6 +12,21 @@ class GrafanaDatasource {
maxDataPoints: options.maxDataPoints
});
}
annotationQuery(options) {
return this.backendSrv.get('/api/annotations', {
from: options.range.from.valueOf(),
to: options.range.to.valueOf(),
limit: options.limit,
type: options.type,
}).then(data => {
return data.map(item => {
item.annotation = options.annotation;
return item;
});
});
}
}
export {GrafanaDatasource};

13
public/app/plugins/datasource/grafana/module.ts
View File

@@ -8,9 +8,22 @@ class GrafanaQueryCtrl extends QueryCtrl {
static templateUrl = 'partials/query.editor.html';
}
class GrafanaAnnotationsQueryCtrl {
annotation: any;
constructor() {
this.annotation.type = this.annotation.type || 'alert';
this.annotation.limit = this.annotation.limit || 100;
}
static templateUrl = 'partials/annotations.editor.html';
}
export {
GrafanaDatasource,
GrafanaDatasource as Datasource,
GrafanaQueryCtrl as QueryCtrl,
GrafanaAnnotationsQueryCtrl as AnnotationsQueryCtrl,
};

20
public/app/plugins/datasource/grafana/partials/annotations.editor.html Normal file
View File

@@ -0,0 +1,20 @@
<div class="gf-form-group">
<h6>Filters</h6>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Type</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.annotation.type" ng-options="f.value as f.text for f in [{text: 'Alert', value: 'alert'}]">
</select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Max limit</span>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.annotation.limit" ng-options="f for f in [10,50,100,200,300,500,1000,2000]">
</select>
</div>
</div>
</div>
</div>

1
public/app/plugins/datasource/grafana/plugin.json
View File

@@ -4,5 +4,6 @@
"id": "grafana",
"builtIn": true,
"annotations": true,
"metrics": true
}