Annotation Query Format
-An annotation is an event that is overlayed on top of graphs. The query can have up to four columns per row, the time_sec column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
+An annotation is an event that is overlayed on top of graphs. The query can have up to three columns per row, the time or time_sec column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
-- column with alias: time_sec for the annotation event. Format is UTC in seconds, use UNIX_TIMESTAMP(column)
+- column with alias: time or time_sec for the annotation event time. Use epoch time or any native date data type.
- column with alias: text for the annotation text
- column with alias: tags for annotation tags. This is a comma separated string of tags e.g. 'tag1,tag2'
Macros:
-- $__time(column) -> UNIX_TIMESTAMP(column) as time_sec
+- $__time(column) -> UNIX_TIMESTAMP(column) as time (or as time_sec)
+- $__timeEpoch(column) -> UNIX_TIMESTAMP(column) as time (or as time_sec)
- $__timeFilter(column) -> UNIX_TIMESTAMP(time_date_time) > 1492750877 AND UNIX_TIMESTAMP(time_date_time) < 1492750877
- $__unixEpochFilter(column) -> time_unix_epoch > 1492750877 AND time_unix_epoch < 1492750877
diff --git a/public/app/plugins/datasource/mysql/partials/query.editor.html b/public/app/plugins/datasource/mysql/partials/query.editor.html
index 22d64c9190f..9acf32405c1 100644
--- a/public/app/plugins/datasource/mysql/partials/query.editor.html
+++ b/public/app/plugins/datasource/mysql/partials/query.editor.html
@@ -38,15 +38,16 @@
Time series:
-- return column named time_sec (UTC in seconds), use UNIX_TIMESTAMP(column)
-- return column named value for the time point value
-- return column named metric to represent the series name
+- return column named time or time_sec (in UTC), as a unix time stamp or any sql native date data type. You can use the macros below.
+- return column(s) with numeric datatype as values
+- (Optional: return column named metric to represent the series name. If no column named metric is found the column name of the value column is used as series name)
Table:
- return any set of columns
Macros:
- $__time(column) -> UNIX_TIMESTAMP(column) as time_sec
+- $__timeEpoch(column) -> UNIX_TIMESTAMP(column) as time_sec
- $__timeFilter(column) -> UNIX_TIMESTAMP(time_date_time) ≥ 1492750877 AND UNIX_TIMESTAMP(time_date_time) ≤ 1492750877
- $__unixEpochFilter(column) -> time_unix_epoch > 1492750877 AND time_unix_epoch < 1492750877
- $__timeGroup(column,'5m') -> cast(cast(UNIX_TIMESTAMP(column)/(300) as signed)*300 as signed)
diff --git a/public/app/plugins/datasource/mysql/response_parser.ts b/public/app/plugins/datasource/mysql/response_parser.ts
index 50683578035..e5d8ab79f2a 100644
--- a/public/app/plugins/datasource/mysql/response_parser.ts
+++ b/public/app/plugins/datasource/mysql/response_parser.ts
@@ -113,7 +113,7 @@ export default class ResponseParser {
let tagsColumnIndex = -1;
for (let i = 0; i < table.columns.length; i++) {
- if (table.columns[i].text === 'time_sec') {
+ if (table.columns[i].text === 'time_sec' || table.columns[i].text === 'time') {
timeColumnIndex = i;
} else if (table.columns[i].text === 'title') {
return this.$q.reject({
@@ -137,7 +137,7 @@ export default class ResponseParser {
const row = table.rows[i];
list.push({
annotation: options.annotation,
- time: Math.floor(row[timeColumnIndex]) * 1000,
+ time: Math.floor(row[timeColumnIndex]),
text: row[textColumnIndex] ? row[textColumnIndex].toString() : '',
tags: row[tagsColumnIndex] ? row[tagsColumnIndex].trim().split(/\s*,\s*/) : [],
});
diff --git a/public/app/plugins/datasource/postgres/partials/annotations.editor.html b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
index b56f7523087..09232d6f8ed 100644
--- a/public/app/plugins/datasource/postgres/partials/annotations.editor.html
+++ b/public/app/plugins/datasource/postgres/partials/annotations.editor.html
@@ -18,15 +18,16 @@
Annotation Query Format
-An annotation is an event that is overlayed on top of graphs. The query can have up to four columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
+An annotation is an event that is overlayed on top of graphs. The query can have up to three columns per row, the time column is mandatory. Annotation rendering is expensive so it is important to limit the number of rows returned.
-- column with alias: time for the annotation event. Format is UTC in seconds, use extract(epoch from column) as "time"
+- column with alias: time for the annotation event time. Use epoch time or any native date data type.
- column with alias: text for the annotation text
- column with alias: tags for annotation tags. This is a comma separated string of tags e.g. 'tag1,tag2'
Macros:
- $__time(column) -> column as "time"
+- $__timeEpoch -> extract(epoch from column) as "time"
- $__timeFilter(column) -> column ≥ to_timestamp(1492750877) AND column ≤ to_timestamp(1492750877)
- $__unixEpochFilter(column) -> column > 1492750877 AND column < 1492750877
diff --git a/public/app/plugins/datasource/postgres/response_parser.ts b/public/app/plugins/datasource/postgres/response_parser.ts
index 620aba5fa7e..ebc9598468b 100644
--- a/public/app/plugins/datasource/postgres/response_parser.ts
+++ b/public/app/plugins/datasource/postgres/response_parser.ts
@@ -134,7 +134,7 @@ export default class ResponseParser {
const row = table.rows[i];
list.push({
annotation: options.annotation,
- time: Math.floor(row[timeColumnIndex]) * 1000,
+ time: Math.floor(row[timeColumnIndex]),
title: row[titleColumnIndex],
text: row[textColumnIndex],
tags: row[tagsColumnIndex] ? row[tagsColumnIndex].trim().split(/\s*,\s*/) : [],
diff --git a/public/app/plugins/datasource/prometheus/specs/completer_specs.ts b/public/app/plugins/datasource/prometheus/specs/completer_specs.ts
index b1c1691c0b8..84694834089 100644
--- a/public/app/plugins/datasource/prometheus/specs/completer_specs.ts
+++ b/public/app/plugins/datasource/prometheus/specs/completer_specs.ts
@@ -47,12 +47,9 @@ describe('Prometheus editor completer', function() {
variables: [
{
name: 'var_name',
- options: [
- { text: 'foo', value: 'foo', selected: false },
- { text: 'bar', value: 'bar', selected: true }
- ]
- }
- ]
+ options: [{ text: 'foo', value: 'foo', selected: false }, { text: 'bar', value: 'bar', selected: true }],
+ },
+ ],
};
let completer = new PromCompleter(datasourceStub, templateSrv);
diff --git a/public/app/plugins/panel/graph/align_yaxes.ts b/public/app/plugins/panel/graph/align_yaxes.ts
new file mode 100644
index 00000000000..e0d8794c250
--- /dev/null
+++ b/public/app/plugins/panel/graph/align_yaxes.ts
@@ -0,0 +1,154 @@
+import _ from 'lodash';
+
+/**
+ * To align two Y axes by Y level
+ * @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}]
+ * @param level Y level
+ */
+export function alignYLevel(yAxes, level) {
+ if (isNaN(level) || !checkCorrectAxis(yAxes)) {
+ return;
+ }
+
+ var [yLeft, yRight] = yAxes;
+ moveLevelToZero(yLeft, yRight, level);
+
+ expandStuckValues(yLeft, yRight);
+
+ // one of graphs on zero
+ var zero = yLeft.min === 0 || yRight.min === 0 || yLeft.max === 0 || yRight.max === 0;
+
+ var oneSide = checkOneSide(yLeft, yRight);
+
+ if (zero && oneSide) {
+ yLeft.min = yLeft.max > 0 ? 0 : yLeft.min;
+ yLeft.max = yLeft.max > 0 ? yLeft.max : 0;
+ yRight.min = yRight.max > 0 ? 0 : yRight.min;
+ yRight.max = yRight.max > 0 ? yRight.max : 0;
+ } else {
+ if (checkOppositeSides(yLeft, yRight)) {
+ if (yLeft.min >= 0) {
+ yLeft.min = -yLeft.max;
+ yRight.max = -yRight.min;
+ } else {
+ yLeft.max = -yLeft.min;
+ yRight.min = -yRight.max;
+ }
+ } else {
+ var rate = getRate(yLeft, yRight);
+
+ if (oneSide) {
+ // all graphs above the Y level
+ if (yLeft.min > 0) {
+ yLeft.min = yLeft.max / rate;
+ yRight.min = yRight.max / rate;
+ } else {
+ yLeft.max = yLeft.min / rate;
+ yRight.max = yRight.min / rate;
+ }
+ } else {
+ if (checkTwoCross(yLeft, yRight)) {
+ yLeft.min = yRight.min ? yRight.min * rate : yLeft.min;
+ yRight.min = yLeft.min ? yLeft.min / rate : yRight.min;
+ yLeft.max = yRight.max ? yRight.max * rate : yLeft.max;
+ yRight.max = yLeft.max ? yLeft.max / rate : yRight.max;
+ } else {
+ yLeft.min = yLeft.min > 0 ? yRight.min * rate : yLeft.min;
+ yRight.min = yRight.min > 0 ? yLeft.min / rate : yRight.min;
+ yLeft.max = yLeft.max < 0 ? yRight.max * rate : yLeft.max;
+ yRight.max = yRight.max < 0 ? yLeft.max / rate : yRight.max;
+ }
+ }
+ }
+ }
+
+ restoreLevelFromZero(yLeft, yRight, level);
+}
+
+function expandStuckValues(yLeft, yRight) {
+ // wide Y min and max using increased wideFactor
+ var wideFactor = 0.25;
+ if (yLeft.max === yLeft.min) {
+ yLeft.min -= wideFactor;
+ yLeft.max += wideFactor;
+ }
+ if (yRight.max === yRight.min) {
+ yRight.min -= wideFactor;
+ yRight.max += wideFactor;
+ }
+}
+
+function moveLevelToZero(yLeft, yRight, level) {
+ if (level !== 0) {
+ yLeft.min -= level;
+ yLeft.max -= level;
+ yRight.min -= level;
+ yRight.max -= level;
+ }
+}
+
+function restoreLevelFromZero(yLeft, yRight, level) {
+ if (level !== 0) {
+ yLeft.min += level;
+ yLeft.max += level;
+ yRight.min += level;
+ yRight.max += level;
+ }
+}
+
+function checkCorrectAxis(axis) {
+ return axis.length === 2 && checkCorrectAxes(axis[0]) && checkCorrectAxes(axis[1]);
+}
+
+function checkCorrectAxes(axes) {
+ return 'min' in axes && 'max' in axes;
+}
+
+function checkOneSide(yLeft, yRight) {
+ // on the one hand with respect to zero
+ return (yLeft.min >= 0 && yRight.min >= 0) || (yLeft.max <= 0 && yRight.max <= 0);
+}
+
+function checkTwoCross(yLeft, yRight) {
+ // both across zero
+ return yLeft.min <= 0 && yLeft.max >= 0 && yRight.min <= 0 && yRight.max >= 0;
+}
+
+function checkOppositeSides(yLeft, yRight) {
+ // on the opposite sides with respect to zero
+ return (yLeft.min >= 0 && yRight.max <= 0) || (yLeft.max <= 0 && yRight.min >= 0);
+}
+
+function getRate(yLeft, yRight) {
+ var rateLeft, rateRight, rate;
+ if (checkTwoCross(yLeft, yRight)) {
+ rateLeft = yRight.min ? yLeft.min / yRight.min : 0;
+ rateRight = yRight.max ? yLeft.max / yRight.max : 0;
+ } else {
+ if (checkOneSide(yLeft, yRight)) {
+ var absLeftMin = Math.abs(yLeft.min);
+ var absLeftMax = Math.abs(yLeft.max);
+ var absRightMin = Math.abs(yRight.min);
+ var absRightMax = Math.abs(yRight.max);
+ var upLeft = _.max([absLeftMin, absLeftMax]);
+ var downLeft = _.min([absLeftMin, absLeftMax]);
+ var upRight = _.max([absRightMin, absRightMax]);
+ var downRight = _.min([absRightMin, absRightMax]);
+
+ rateLeft = downLeft ? upLeft / downLeft : upLeft;
+ rateRight = downRight ? upRight / downRight : upRight;
+ } else {
+ if (yLeft.min > 0 || yRight.min > 0) {
+ rateLeft = yLeft.max / yRight.max;
+ rateRight = 0;
+ } else {
+ rateLeft = 0;
+ rateRight = yLeft.min / yRight.min;
+ }
+ }
+ }
+
+ rate = rateLeft > rateRight ? rateLeft : rateRight;
+
+ return rate;
+}
diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html
index 6160ef01fec..6ec64015746 100644
--- a/public/app/plugins/panel/graph/axes_editor.html
+++ b/public/app/plugins/panel/graph/axes_editor.html
@@ -11,6 +11,7 @@
+
@@ -28,8 +29,10 @@
-
-