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

annotations: added new options hide toggle, and show option

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-04-12 15:01:17 +02:00
parent f42202e665
commit 752b42798a
10 changed files with 158 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/services/keybindingSrv.ts
View File

@ -83,10 +83,6 @@ export class KeybindingSrv {
}
setupDashboardBindings(scope, dashboard) {
// this.bind('b', () => {
// dashboard.toggleEditMode();
// });
this.bind('mod+o', () => {
dashboard.graphTooltip = (dashboard.graphTooltip + 1) % 3;
appEvents.emit('graph-hover-clear');

12
public/app/features/annotations/editor_ctrl.ts
View File

@ -17,9 +17,16 @@ export class AnnotationsEditorCtrl {
name: '',
datasource: null,
iconColor: 'rgba(255, 96, 96, 1)',
enable: true
enable: true,
show: 0,
hide: false,
};
showOptions: any = [
{text: 'All Panels', value: 0},
{text: 'Specifc Panels', value: 1},
];
/** @ngInject */
constructor(private $scope, private datasourceSrv) {
$scope.ctrl = this;
@ -44,6 +51,7 @@ export class AnnotationsEditorCtrl {
edit(annotation) {
this.currentAnnotation = annotation;
this.currentAnnotation.show = this.currentAnnotation.show || 0;
this.currentIsNew = false;
this.datasourceChanged();
this.mode = 'edit';
@ -74,7 +82,7 @@ export class AnnotationsEditorCtrl {
removeAnnotation(annotation) {
var index = _.indexOf(this.annotations, annotation);
this.annotations.splice(index, 1);
this.$scope.updateSubmenuVisibility();
this.$scope.dashboard.updateSubmenuVisibility();
this.$scope.broadcastRefresh();
}
}

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

@ -7,16 +7,16 @@
<ul class="gf-tabs">
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="ctrl.mode = 'list';" ng-class="{active: ctrl.mode === 'list'}">
List
Queries
</a>
</li>
<li class="gf-tabs-item" ng-show="ctrl.mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: ctrl.mode === 'edit'}">
{{currentAnnotation.name}}
Edit Query
</a>
</li>
<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
<span class="active gf-tabs-link">New</span>
<span class="active gf-tabs-link">New Query</span>
</li>
</ul>
@ -62,37 +62,53 @@
<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='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="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
<h5 class="section-heading">Options</h5>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" class="gf-form-input width-12" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Data source</span>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" 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>
<div class="gf-form">
<label class="gf-form-label">
<span>Color</span>
</label>
<spectrum-picker class="gf-form-input" ng-model="ctrl.currentAnnotation.iconColor"></spectrum-picker>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Show in</span>
<div class="gf-form-select-wrapper width-12">
<select class="gf-form-input" ng-model="ctrl.currentAnnotation.show" ng-options="f.value as f.text for f in ctrl.showOptions"></select>
</div>
</div>
<gf-form-switch class="gf-form"
label="Hide toggle"
tooltip="Hides the annotation query toggle from showing at the top of the dashboard"
checked="ctrl.currentAnnotation.hide"
label-class="width-9">
</gf-form-switch>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Color</label>
<spectrum-picker class="gf-form-input width-3" ng-model="ctrl.currentAnnotation.iconColor"></spectrum-picker>
</div>
</div>
</div>
</div>
<rebuild-on-change property="ctrl.currentDatasource">
<plugin-component type="annotations-query-ctrl">
</plugin-component>
</rebuild-on-change>
<h5 class="section-heading">Query</h5>
<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="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 class="gf-form">
<div class="gf-form-button-row p-y-0">
<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>
</div>
</div>

28
public/app/features/dashboard/model.ts
View File

@ -193,32 +193,22 @@ export class DashboardModel {
});
}
toggleEditMode() {
if (!this.meta.canEdit) {
console.log('Not allowed to edit dashboard');
return;
}
this.editMode = !this.editMode;
this.updateSubmenuVisibility();
this.events.emit('edit-mode-changed', this.editMode);
}
setPanelFocus(id) {
this.meta.focusPanelId = id;
}
updateSubmenuVisibility() {
if (this.editMode) {
this.meta.submenuEnabled = true;
return;
}
this.meta.submenuEnabled = (() => {
if (this.links.length > 0) { return true; }
var visibleVars = _.filter(this.templating.list, function(template) {
return template.hide !== 2;
});
var visibleVars = _.filter(this.templating.list, variable => variable.hide !== 2);
if (visibleVars.length > 0) { return true; }
this.meta.submenuEnabled = visibleVars.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
var visibleAnnotations = _.filter(this.annotations.list, annotation => annotation.hide !== true);
if (visibleAnnotations.length > 0) { return true; }
return false;
})();
}
getPanelInfoById(panelId) {

81
public/app/features/dashboard/specs/dashboard_model_specs.ts
View File

@ -364,4 +364,85 @@ describe('DashboardModel', function() {
});
});
describe('updateSubmenuVisibility with empty lists', function() {
var model;
beforeEach(function() {
model = new DashboardModel({});
model.updateSubmenuVisibility();
});
it('should not enable submmenu', function() {
expect(model.meta.submenuEnabled).to.be(false);
});
});
describe('updateSubmenuVisibility with annotation', function() {
var model;
beforeEach(function() {
model = new DashboardModel({
annotations: {
list: [{}]
}
});
model.updateSubmenuVisibility();
});
it('should enable submmenu', function() {
expect(model.meta.submenuEnabled).to.be(true);
});
});
describe('updateSubmenuVisibility with template var', function() {
var model;
beforeEach(function() {
model = new DashboardModel({
templating: {
list: [{}]
}
});
model.updateSubmenuVisibility();
});
it('should enable submmenu', function() {
expect(model.meta.submenuEnabled).to.be(true);
});
});
describe('updateSubmenuVisibility with hidden template var', function() {
var model;
beforeEach(function() {
model = new DashboardModel({
templating: {
list: [{hide: 2}]
}
});
model.updateSubmenuVisibility();
});
it('should not enable submmenu', function() {
expect(model.meta.submenuEnabled).to.be(false);
});
});
describe('updateSubmenuVisibility with hidden annotation toggle', function() {
var model;
beforeEach(function() {
model = new DashboardModel({
annotations: {
list: [{hide: true}]
}
});
model.updateSubmenuVisibility();
});
it('should not enable submmenu', function() {
expect(model.meta.submenuEnabled).to.be(false);
});
});
});

2
public/app/features/dashboard/submenu/submenu.html
View File

@ -11,7 +11,7 @@
</div>
<div ng-if="ctrl.dashboard.annotations.list.length > 0">
<div ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item" ng-class="{'annotation-disabled': !annotation.enable}">
<div ng-repeat="annotation in ctrl.dashboard.annotations.list" ng-hide="annotation.hide" class="submenu-item" ng-class="{'annotation-disabled': !annotation.enable}">
<gf-form-switch class="gf-form" label="{{annotation.name}}" checked="annotation.enable" on-change="ctrl.annotationStateChanged()"></gf-form-switch>
</div>
</div>

10
public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html
View File

@ -3,9 +3,11 @@
<span class="gf-form-label width-14">Index name</span>
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-14">Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></span>
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
<div class="gf-form-group">
<div class="gf-form">
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query'
placeholder="Elasticsearch lucene query"></input>
</div>
</div>
</div>
@ -33,4 +35,4 @@
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.textField' placeholder=""></input>
</div>
</div>
</div>
</div>

1
public/app/plugins/datasource/grafana/partials/annotations.editor.html
View File

@ -1,6 +1,5 @@
<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>

11
public/app/plugins/datasource/graphite/partials/annotations.editor.html
View File

@ -1,10 +1,13 @@
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-13">Graphite metrics query</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.target' placeholder=""></input>
<span class="gf-form-label width-12">Graphite query</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.target' placeholder="Example: statsd.application.counters.*.count"></input>
</div>
<h5 class="section-heading">Or</h5>
<div class="gf-form">
<span class="gf-form-label width-13">Or Graphite events query</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tags' placeholder=""></input>
<span class="gf-form-label width-12">Graphite events tags</span>
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tags' placeholder="Example: event_tag_name"></input>
</div>
</div>

3
public/app/plugins/datasource/influxdb/partials/annotations.editor.html
View File

@ -1,12 +1,11 @@
<h5 class="section-heading">Query</h5>
<div class="gf-form-group">
<div class="gf-form">
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
</div>
</div>
<h5 class="section-heading">Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
<h5 class="section-heading">Field mappings <tip>If your influxdb query returns more than one field you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">