Skip to content

N
nexpie-grafana-theme
Commit 3519d8d6 by Torkel Ödegaard
Options

annotations: minor change to default/edit annotation color

parent 25aa9df2
Showing with 26 additions and 21 deletions
public/app/core/utils/colors.ts
...@@ -5,6 +5,10 @@ declare var tinycolor; ...@@ -5,6 +5,10 @@ declare var tinycolor;
export const PALETTE_ROWS = 4; export const PALETTE_ROWS = 4;
export const PALETTE_COLUMNS = 14; export const PALETTE_COLUMNS = 14;
export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)';
export const OK_COLOR = "rgba(11, 237, 50, 1)";
export const ALERTING_COLOR = "rgba(237, 46, 24, 1)";
export const NO_DATA_COLOR = "rgba(150, 150, 150, 1)";
let colors = [ let colors = [
"#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0",
......
public/app/features/annotations/event_manager.ts
...@@ -2,18 +2,13 @@ import _ from 'lodash'; ...@@ -2,18 +2,13 @@ import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import {MetricsPanelCtrl} from 'app/plugins/sdk'; import {MetricsPanelCtrl} from 'app/plugins/sdk';
import {AnnotationEvent} from './event'; import {AnnotationEvent} from './event';
import {OK_COLOR, ALERTING_COLOR, NO_DATA_COLOR, DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
const OK_COLOR = "rgba(11, 237, 50, 1)",
ALERTING_COLOR = "rgba(237, 46, 24, 1)",
NO_DATA_COLOR = "rgba(150, 150, 150, 1)";
export class EventManager { export class EventManager {
event: AnnotationEvent; event: AnnotationEvent;
editorOpen: boolean; editorOpen: boolean;
constructor(private panelCtrl: MetricsPanelCtrl) { constructor(private panelCtrl: MetricsPanelCtrl) {}
}
editorClosed() { editorClosed() {
this.event = null; this.event = null;
...@@ -54,21 +49,26 @@ export class EventManager { ...@@ -54,21 +49,26 @@ export class EventManager {
} }
var types = { var types = {
'$__alerting': { $__alerting: {
color: ALERTING_COLOR, color: ALERTING_COLOR,
position: 'BOTTOM', position: 'BOTTOM',
markerSize: 5, markerSize: 5,
}, },
'$__ok': { $__ok: {
color: OK_COLOR, color: OK_COLOR,
position: 'BOTTOM', position: 'BOTTOM',
markerSize: 5, markerSize: 5,
}, },
'$__no_data': { $__no_data: {
color: NO_DATA_COLOR, color: NO_DATA_COLOR,
position: 'BOTTOM', position: 'BOTTOM',
markerSize: 5, markerSize: 5,
}, },
$__editing: {
color: DEFAULT_ANNOTATION_COLOR,
position: 'BOTTOM',
markerSize: 5,
},
}; };
if (this.event) { if (this.event) {
...@@ -79,9 +79,9 @@ export class EventManager { ...@@ -79,9 +79,9 @@ export class EventManager {
min: this.event.time.valueOf(), min: this.event.time.valueOf(),
timeEnd: this.event.timeEnd.valueOf(), timeEnd: this.event.timeEnd.valueOf(),
text: this.event.text, text: this.event.text,
eventType: '$__alerting', eventType: '$__editing',
editModel: this.event, editModel: this.event,
} },
]; ];
} else { } else {
annotations = [ annotations = [
...@@ -89,8 +89,8 @@ export class EventManager { ...@@ -89,8 +89,8 @@ export class EventManager {
min: this.event.time.valueOf(), min: this.event.time.valueOf(),
text: this.event.text, text: this.event.text,
editModel: this.event, editModel: this.event,
eventType: '$__alerting', eventType: '$__editing',
} },
]; ];
} }
} else { } else {
...@@ -130,7 +130,7 @@ export class EventManager { ...@@ -130,7 +130,7 @@ export class EventManager {
levels: _.keys(types).length + 1, levels: _.keys(types).length + 1,
data: annotations, data: annotations,
types: types, types: types,
manager: this manager: this,
}; };
} }
} }
...@@ -141,7 +141,7 @@ function getRegions(events) { ...@@ -141,7 +141,7 @@ function getRegions(events) {
function addRegionMarking(regions, flotOptions) { function addRegionMarking(regions, flotOptions) {
let markings = flotOptions.grid.markings; let markings = flotOptions.grid.markings;
let defaultColor = 'rgb(237, 46, 24)'; let defaultColor = DEFAULT_ANNOTATION_COLOR;
let fillColor; let fillColor;
_.each(regions, region => { _.each(regions, region => {
...@@ -158,8 +158,8 @@ function addRegionMarking(regions, flotOptions) { ...@@ -158,8 +158,8 @@ function addRegionMarking(regions, flotOptions) {
fillColor = convertToRGB(fillColor); fillColor = convertToRGB(fillColor);
} }
fillColor = addAlphaToRGB(fillColor, 0.090); fillColor = addAlphaToRGB(fillColor, 0.09);
markings.push({ xaxis: { from: region.min, to: region.timeEnd }, color: fillColor }); markings.push({xaxis: {from: region.min, to: region.timeEnd}, color: fillColor});
}); });
} }
...@@ -179,8 +179,8 @@ function convertToRGB(hex: string): string { ...@@ -179,8 +179,8 @@ function convertToRGB(hex: string): string {
let rgb = _.map(match.slice(1), hex_val => { let rgb = _.map(match.slice(1), hex_val => {
return parseInt(hex_val, 16); return parseInt(hex_val, 16);
}); });
return 'rgb(' + rgb.join(',') + ')'; return 'rgb(' + rgb.join(',') + ')';
} else { } else {
return ""; return '';
} }
} }
public/app/features/dashboard/model.ts
...@@ -5,6 +5,7 @@ import moment from 'moment'; ...@@ -5,6 +5,7 @@ import moment from 'moment';
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
import {DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors';
import {Emitter, contextSrv, appEvents} from 'app/core/core'; import {Emitter, contextSrv, appEvents} from 'app/core/core';
import {DashboardRow} from './row/row_model'; import {DashboardRow} from './row/row_model';
import sortByKeys from 'app/core/utils/sort_by_keys'; import sortByKeys from 'app/core/utils/sort_by_keys';
...@@ -93,7 +94,7 @@ export class DashboardModel { ...@@ -93,7 +94,7 @@ export class DashboardModel {
datasource: '-- Grafana --', datasource: '-- Grafana --',
name: 'Annotations & Alerts', name: 'Annotations & Alerts',
type: 'dashboard', type: 'dashboard',
iconColor: 'rgb(0, 211, 255)', iconColor: DEFAULT_ANNOTATION_COLOR,
enable: true, enable: true,
hide: true, hide: true,
builtIn: 1, builtIn: 1,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment