From f8b05e0f42f6274a0539b46f8d4531d6ada46784 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 2 Oct 2015 03:19:25 +0900 Subject: [PATCH 01/56] add prometheus annotation query --- .../datasource/prometheus/datasource.ts | 67 +++++++++++++++++-- .../plugins/datasource/prometheus/module.ts | 7 +- .../partials/annotations.editor.html | 28 ++++++++ .../plugins/datasource/prometheus/plugin.json | 3 +- .../prometheus/specs/datasource_specs.ts | 35 ++++++++++ 5 files changed, 132 insertions(+), 8 deletions(-) create mode 100644 public/app/plugins/datasource/prometheus/partials/annotations.editor.html diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 0a81e04831b..4aff842d38b 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -188,6 +188,58 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } }; + this.annotationQuery = function(options) { + var annotation = options.annotation; + var expr = annotation.expr || ''; + var tagKeys = annotation.tagKeys || ''; + var titleFormat = annotation.titleFormat || ''; + var textFormat = annotation.textFormat || ''; + + if (!expr) { return $q.when([]); } + + var interpolated; + try { + interpolated = templateSrv.replace(expr); + } + catch (err) { + return $q.reject(err); + } + + var query = { + expr: interpolated, + step: '60s' + }; + var start = getPrometheusTime(options.range.from, false); + var end = getPrometheusTime(options.range.to, true); + return this.performTimeSeriesQuery(query, start, end).then(function(results) { + var eventList = []; + tagKeys = tagKeys.split(','); + + _.each(results.data.data.result, function(series) { + var tags = _.chain(series.metric) + .filter(function(v, k) { + return _.contains(tagKeys, k); + }).value(); + + _.each(series.values, function(value) { + if (value[1] === '1') { + var event = { + annotation: annotation, + time: Math.floor(value[0]) * 1000, + title: renderTemplate(titleFormat, series.metric), + tags: tags, + text: renderTemplate(textFormat, series.metric) + }; + + eventList.push(event); + } + }); + }); + + return eventList; + }); + }; + this.testDatasource = function() { return this.metricFindQuery('metrics(.*)').then(function() { return { status: 'success', message: 'Data source is working', title: 'Success' }; @@ -240,22 +292,25 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return getOriginalMetricName(labelData); } - var originalSettings = _.templateSettings; + return renderTemplate(options.legendFormat, labelData) || '{}'; + } + + function renderTemplate(format, data) { _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g }; - var template = _.template(templateSrv.replace(options.legendFormat)); - var metricName; + var template = _.template(templateSrv.replace(format)); + var result; try { - metricName = template(labelData); + result = template(data); } catch (e) { - metricName = '{}'; + result = null; } _.templateSettings = originalSettings; - return metricName; + return result; } function getOriginalMetricName(labelData) { diff --git a/public/app/plugins/datasource/prometheus/module.ts b/public/app/plugins/datasource/prometheus/module.ts index 9af37384b4f..0ddba422bcc 100644 --- a/public/app/plugins/datasource/prometheus/module.ts +++ b/public/app/plugins/datasource/prometheus/module.ts @@ -5,8 +5,13 @@ class PrometheusConfigCtrl { static templateUrl = 'public/app/plugins/datasource/prometheus/partials/config.html'; } +class PrometheusAnnotationsQueryCtrl { + static templateUrl = 'public/app/plugins/datasource/prometheus/partials/annotations.editor.html'; +} + export { PrometheusDatasource as Datasource, PrometheusQueryCtrl as QueryCtrl, - PrometheusConfigCtrl as ConfigCtrl + PrometheusConfigCtrl as ConfigCtrl, + PrometheusAnnotationsQueryCtrl as AnnotationsQueryCtrl, }; diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html new file mode 100644 index 00000000000..d8110b03c52 --- /dev/null +++ b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html @@ -0,0 +1,28 @@ +
+
+
Search expression
+
+ +
+
+
+ +
+
+
Field formats
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
diff --git a/public/app/plugins/datasource/prometheus/plugin.json b/public/app/plugins/datasource/prometheus/plugin.json index 4cd55605816..66dd9145e6a 100644 --- a/public/app/plugins/datasource/prometheus/plugin.json +++ b/public/app/plugins/datasource/prometheus/plugin.json @@ -3,5 +3,6 @@ "name": "Prometheus", "id": "prometheus", - "metrics": true + "metrics": true, + "annotations": true } diff --git a/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts b/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts index fc3d2f489de..043546a9398 100644 --- a/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts +++ b/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts @@ -157,4 +157,39 @@ describe('PrometheusDatasource', function() { expect(results.length).to.be(3); }); }); + describe('When performing annotationQuery', function() { + var results; + var urlExpected = 'proxied/api/v1/query_range?query=' + + encodeURIComponent('ALERTS{alertstate="firing"}') + + '&start=1443438675&end=1443460275&step=60s'; + var annotation = { + expr: 'ALERTS{alertstate="firing"}', + tagKeys: 'job', + titleFormat: '{{alertname}}', + textFormat: '{{instance}}' + }; + var response = { + status: "success", + data: { + resultType: "matrix", + result: [{ + metric: {"__name__": "ALERTS", alertname: "InstanceDown", alertstate: "firing", instance: "testinstance", job: "testjob"}, + values: [[1443454528, "1"]] + }] + } + }; + beforeEach(function() { + ctx.$httpBackend.expect('GET', urlExpected).respond(response); + ctx.ds.annotationQuery(annotation, {from: moment(1443438674760), to: moment(1443460274760)}).then(function(data) { results = data; }); + ctx.$httpBackend.flush(); + }); + it('should return annotation list', function() { + ctx.$rootScope.$apply(); + expect(results.length).to.be(1); + expect(results[0].tags).to.contain('testjob'); + expect(results[0].title).to.be('InstanceDown'); + expect(results[0].text).to.be('testinstance'); + expect(results[0].time).to.be(1443454528 * 1000); + }); + }); }); From ee84d4371b4d78c67b2eb197e8a856561b6ab18d Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 13 Nov 2015 02:33:21 +0900 Subject: [PATCH 02/56] fix prometheus annotation, reflect API change --- .../prometheus/specs/datasource_specs.ts | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts b/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts index 043546a9398..4a1b4121dba 100644 --- a/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts +++ b/public/app/plugins/datasource/prometheus/specs/datasource_specs.ts @@ -162,11 +162,17 @@ describe('PrometheusDatasource', function() { var urlExpected = 'proxied/api/v1/query_range?query=' + encodeURIComponent('ALERTS{alertstate="firing"}') + '&start=1443438675&end=1443460275&step=60s'; - var annotation = { - expr: 'ALERTS{alertstate="firing"}', - tagKeys: 'job', - titleFormat: '{{alertname}}', - textFormat: '{{instance}}' + var options = { + annotation: { + expr: 'ALERTS{alertstate="firing"}', + tagKeys: 'job', + titleFormat: '{{alertname}}', + textFormat: '{{instance}}' + }, + range: { + from: moment(1443438674760), + to: moment(1443460274760) + } }; var response = { status: "success", @@ -180,7 +186,7 @@ describe('PrometheusDatasource', function() { }; beforeEach(function() { ctx.$httpBackend.expect('GET', urlExpected).respond(response); - ctx.ds.annotationQuery(annotation, {from: moment(1443438674760), to: moment(1443460274760)}).then(function(data) { results = data; }); + ctx.ds.annotationQuery(options).then(function(data) { results = data; }); ctx.$httpBackend.flush(); }); it('should return annotation list', function() { From 7a1326ff142b880c617c0199323202187965eeb6 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 15 Jan 2016 11:00:09 +0900 Subject: [PATCH 03/56] follow new plugin format --- .../prometheus/partials/annotations.editor.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html index d8110b03c52..2612c611849 100644 --- a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html @@ -2,7 +2,7 @@
Search expression
- +
@@ -12,17 +12,17 @@
Field formats
- +
- +
- +
From 7d97f381cf33407f364944c0f175299a8a190bb5 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Thu, 4 Feb 2016 14:09:59 +0900 Subject: [PATCH 04/56] fix tslint error --- public/app/plugins/datasource/prometheus/datasource.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 4aff842d38b..804115e849b 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -200,8 +200,7 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS var interpolated; try { interpolated = templateSrv.replace(expr); - } - catch (err) { + } catch (err) { return $q.reject(err); } From 634699c8e2c0520729234a274858a1d0d8fe21b9 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Thu, 4 Feb 2016 14:10:27 +0900 Subject: [PATCH 05/56] fix prometheus datasource plugin --- public/app/plugins/datasource/prometheus/datasource.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 804115e849b..4cfd174978c 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -295,6 +295,7 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } function renderTemplate(format, data) { + var originalSettings = _.templateSettings; _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g }; From 20283a46f9bd8fbc4614f3f47a2dd9175f24dad6 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Thu, 4 Feb 2016 14:14:19 +0900 Subject: [PATCH 06/56] fix annotation editor error --- .../prometheus/partials/annotations.editor.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html index 2612c611849..ffeb7d6deea 100644 --- a/public/app/plugins/datasource/prometheus/partials/annotations.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/annotations.editor.html @@ -2,7 +2,7 @@
Search expression
- +
@@ -12,17 +12,17 @@
Field formats
- +
- +
- +
From a5d1e9ee438c920e271a7e42bb2d7141b50daca8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Feb 2016 18:37:07 +0100 Subject: [PATCH 07/56] fix(singlestat): fix for singlestat background and sparklines, fixes #3955 --- public/app/plugins/panel/singlestat/module.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 7eee8524d8c..34ee0b52be7 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -241,7 +241,8 @@ class SingleStatCtrl extends MetricsPanelCtrl { var panel = ctrl.panel; var templateSrv = this.templateSrv; var data, linkInfo; - var $panelContainer = elem.parents('.panel-container'); + var elemHeight; + var $panelContainer = elem.find('.panel-container'); // change elem to singlestat panel elem = elem.find('.singlestat-panel'); hookupDrilldownLinkTooltip(); @@ -253,15 +254,15 @@ class SingleStatCtrl extends MetricsPanelCtrl { function setElementHeight() { try { - var height = scope.height || panel.height || ctrl.row.height; - if (_.isString(height)) { - height = parseInt(height.replace('px', ''), 10); + elemHeight = ctrl.height || panel.height || ctrl.row.height; + if (_.isString(elemHeight)) { + elemHeight = parseInt(elemHeight.replace('px', ''), 10); } - height -= 5; // padding - height -= panel.title ? 24 : 9; // subtract panel title bar + elemHeight -= 5; // padding + elemHeight -= panel.title ? 24 : 9; // subtract panel title bar - elem.css('height', height + 'px'); + elem.css('height', elemHeight + 'px'); return true; } catch (e) { // IE throws errors sometimes @@ -305,7 +306,7 @@ class SingleStatCtrl extends MetricsPanelCtrl { function addSparkline() { var width = elem.width() + 20; - var height = elem.height() || 100; + var height = elemHeight; var plotCanvas = $('
'); var plotCss: any = {}; From 7f83be3d0d4a47f057353f1c9394686097af0dd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 8 Feb 2016 09:06:28 +0100 Subject: [PATCH 08/56] ux(): mini fix! --- public/less/sidemenu.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index d58f5a654cc..79d79e9750c 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -192,7 +192,7 @@ .sidemenu-org { border-bottom: @sideMenuBorder; - //box-shadow: @sideMenuTopShadow; + border-top: @sideMenuBorder; padding: 17px 10px 15px 21px; box-sizing: border-box; cursor: pointer; From edebdb166eee95903122291fca9ffa1b1b4770cd Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 8 Feb 2016 09:20:17 +0100 Subject: [PATCH 09/56] fix(graph): add missing ctrl in variable --- public/app/plugins/panel/graph/axisEditor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/panel/graph/axisEditor.html b/public/app/plugins/panel/graph/axisEditor.html index b1d6d9753c0..f7e183a5651 100644 --- a/public/app/plugins/panel/graph/axisEditor.html +++ b/public/app/plugins/panel/graph/axisEditor.html @@ -184,7 +184,7 @@
  • Side width
    • -
  • +
    • From 73bed3880f3232f0eb9805e1ef91d7b3a2c97252 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 8 Feb 2016 09:49:53 +0100 Subject: [PATCH 10/56] feat(graph): sets fixed height for right side legend closes #1277 --- public/app/plugins/panel/graph/legend.js | 8 ++++++++ public/less/panel_graph.less | 5 +++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js index a1777772c98..a09bbbb6cb1 100644 --- a/public/app/plugins/panel/graph/legend.js +++ b/public/app/plugins/panel/graph/legend.js @@ -90,6 +90,14 @@ function (angular, _, $) { } function render() { + if (panel.legend.rightSide) { + var panelheight = scope.ctrl.height || scope.ctrl.panel.height || scope.ctrl.row.height; + $container.css("height", panelheight); + $container.toggleClass('graph-legend-fixed-height', true); + } else { + $container.css("height", ""); + } + if (firstRender) { elem.append($container); $container.on('click', '.graph-legend-icon', openColorSelector); diff --git a/public/less/panel_graph.less b/public/less/panel_graph.less index a0350d5d16c..36e96d67441 100644 --- a/public/less/panel_graph.less +++ b/public/less/panel_graph.less @@ -60,7 +60,6 @@ } .graph-legend-table { - display: table; width: 100%; margin: 0; @@ -272,4 +271,6 @@ font-size: 12px; } - +.graph-legend-fixed-height { + overflow-y: scroll; +} From de90ad8967bf5a94c668a96c25a4cd89bfdca46d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 8 Feb 2016 10:31:26 +0100 Subject: [PATCH 11/56] feat(influxdb): escape influxdb tag values, fixes #3950 --- public/app/plugins/datasource/influxdb/influx_query.ts | 4 ++-- .../plugins/datasource/influxdb/specs/influx_query_specs.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/datasource/influxdb/influx_query.ts b/public/app/plugins/datasource/influxdb/influx_query.ts index 6eb2d84aa49..cbdb61bca24 100644 --- a/public/app/plugins/datasource/influxdb/influx_query.ts +++ b/public/app/plugins/datasource/influxdb/influx_query.ts @@ -6,8 +6,8 @@ import queryPart from './query_part'; export default class InfluxQuery { target: any; selectModels: any[]; - groupByParts: any; queryBuilder: any; + groupByParts: any; constructor(target) { this.target = target; @@ -144,7 +144,7 @@ export default class InfluxQuery { // quote value unless regex if (operator !== '=~' && operator !== '!~') { - value = "'" + value + "'"; + value = "'" + value.replace('\\', '\\\\') + "'"; } return str + '"' + tag.key + '" ' + operator + ' ' + value; diff --git a/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts b/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts index be7afa16ab1..3893b8fbc2d 100644 --- a/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts +++ b/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts @@ -51,12 +51,12 @@ describe('InfluxQuery', function() { var query = new InfluxQuery({ measurement: 'cpu', groupBy: [{type: 'time', params: ['auto']}], - tags: [{key: 'hostname', value: 'server1'}] + tags: [{key: 'hostname', value: 'server\\1'}] }); var queryText = query.render(); - expect(queryText).to.be('SELECT mean("value") FROM "cpu" WHERE "hostname" = \'server1\' AND $timeFilter' + expect(queryText).to.be('SELECT mean("value") FROM "cpu" WHERE "hostname" = \'server\\\\1\' AND $timeFilter' + ' GROUP BY time($interval)'); }); From 0f52b4397f6b098f64415cfb978832b5dcc4c092 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 8 Feb 2016 11:18:41 +0100 Subject: [PATCH 12/56] feat(login): minor ux improvements make buttons bigger and introduce the login divider. closes #3698 --- public/app/partials/login.html | 28 ++++++++++++++++------- public/less/login.less | 41 +++++++++++++++++++++++++++++----- 2 files changed, 55 insertions(+), 14 deletions(-) diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 27983b54114..b17a9e0545b 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -65,26 +65,38 @@
    + + +
    + - -
    -
    - - Forgot your password? - +
    +
    + + Forgot your password? + +
    + +
    Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}}, diff --git a/public/less/login.less b/public/less/login.less index 77213fa7301..afebfde9271 100644 --- a/public/less/login.less +++ b/public/less/login.less @@ -76,21 +76,23 @@ .login-submit-button-row { text-align: center; - margin-top: 40px; + margin-top: 30px; button { - padding: 9px 7px; - font-size: 14px; + padding: 14px 23px; + font-size: 16px; font-weight: bold; min-width: 150px; display: inline-block; border: 1px solid lighten(@btnInverseBackground, 10%); + color: @grayLight; } } .login-oauth { - margin-top: 30px; - padding: 10px; - background: @grafanaTargetBackground; + .btn { + margin: 5px; + } + .btn-google { background: #dd4b39; color: white; @@ -101,6 +103,33 @@ } } +.password-recovery { + background: @grafanaTargetBackground; + margin-top: 30px; + padding: 10px; + a { + color: @grayLight; + } +} + +.login-divider { + float: left; + width: 50%; + margin: 5px 25% 25px 25%; + + .login-divider-line { + width: 100%; + height: 10px; + border-bottom: 1px solid @gray; + + .login-divider-text { + background-color: @grayDarker; + color: @grayLight; + padding: 0 10px; + } + } +} + .signup-page-background { position: fixed; top: 0; From 0106033293aef642dc83ef44eebc11226ca5c19e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 8 Feb 2016 14:35:34 +0100 Subject: [PATCH 13/56] refactor(): removed stuff --- .../panel-plugin-boilerplate-es5/module.js | 28 + .../panel-plugin-boilerplate-es5/panel.html | 4 + .../panel-plugin-boilerplate-es5/plugin.json | 6 + public/app/app.js | 7 - public/app/boot.js | 4 +- public/app/core/plugins/directive.ts | 0 public/app/headers/angular2/angular2.d.ts | 12213 ---------------- public/app/headers/angularjs/angularjs.d.ts | 1745 --- public/app/headers/jquery/jquery.d.ts | 3186 ---- public/app/headers/lodash/lodash.d.ts | 8521 ----------- public/app/headers/moment/moment-node.d.ts | 479 - public/app/headers/moment/moment.d.ts | 7 - public/app/headers/require/require.d.ts | 369 - public/app/headers/rx/rx-lite.d.ts | 696 - public/app/headers/rx/rx.d.ts | 67 - tasks/systemjs_task.js | 2 +- 16 files changed, 41 insertions(+), 27293 deletions(-) create mode 100644 examples/panel-plugin-boilerplate-es5/module.js create mode 100644 examples/panel-plugin-boilerplate-es5/panel.html create mode 100644 examples/panel-plugin-boilerplate-es5/plugin.json delete mode 100644 public/app/app.js delete mode 100644 public/app/core/plugins/directive.ts delete mode 100644 public/app/headers/angular2/angular2.d.ts delete mode 100644 public/app/headers/angularjs/angularjs.d.ts delete mode 100644 public/app/headers/jquery/jquery.d.ts delete mode 100644 public/app/headers/lodash/lodash.d.ts delete mode 100644 public/app/headers/moment/moment-node.d.ts delete mode 100644 public/app/headers/moment/moment.d.ts delete mode 100644 public/app/headers/require/require.d.ts delete mode 100644 public/app/headers/rx/rx-lite.d.ts delete mode 100644 public/app/headers/rx/rx.d.ts diff --git a/examples/panel-plugin-boilerplate-es5/module.js b/examples/panel-plugin-boilerplate-es5/module.js new file mode 100644 index 00000000000..3f7d64bc992 --- /dev/null +++ b/examples/panel-plugin-boilerplate-es5/module.js @@ -0,0 +1,28 @@ +define([ + 'app/plugins/sdk' +], function(sdk) { + + var BoilerPlatePanel = (function(_super) { + + function BoilerPlatePanel($scope, $injector) { + _super.call(this, $scope, $injector); + } + + // you do not need a templateUrl, you can use a inline template here + // BoilerPlatePanel.template = '

    boilerplate

    '; + + // all panel static assets can be accessed via 'public/plugins// + BoilerPlatePanel.templateUrl = 'public/plugins/panel-boilerplate-es5/panel.html'; + + BoilerPlatePanel.prototype = Object.create(_super.prototype); + BoilerPlatePanel.prototype.constructor = BoilerPlatePanel; + + return BoilerPlatePanel; + + })(sdk.PanelCtrl); + + + return { + PanelCtrl: BoilerPlatePanel + }; +}); diff --git a/examples/panel-plugin-boilerplate-es5/panel.html b/examples/panel-plugin-boilerplate-es5/panel.html new file mode 100644 index 00000000000..5d3e44c756a --- /dev/null +++ b/examples/panel-plugin-boilerplate-es5/panel.html @@ -0,0 +1,4 @@ +

    + Boilerplate panel +

    + diff --git a/examples/panel-plugin-boilerplate-es5/plugin.json b/examples/panel-plugin-boilerplate-es5/plugin.json new file mode 100644 index 00000000000..b585698c20a --- /dev/null +++ b/examples/panel-plugin-boilerplate-es5/plugin.json @@ -0,0 +1,6 @@ +{ + "type": "panel", + "name": "Panel Boilerplate", + "id": "panel-boilerplate-es5", + "staticRoot": "." +} diff --git a/public/app/app.js b/public/app/app.js deleted file mode 100644 index 35f195dd093..00000000000 --- a/public/app/app.js +++ /dev/null @@ -1,7 +0,0 @@ -define([ - './grafana' -], function(app) { - 'use strict'; - // backward compatability hack; - return app.default; -}); diff --git a/public/app/boot.js b/public/app/boot.js index 4ca0646f158..7ba0fb12bf2 100644 --- a/public/app/boot.js +++ b/public/app/boot.js @@ -1,8 +1,8 @@ (function bootGrafana() { 'use strict'; - System.import('app/app').then(function(app) { - app.init(); + System.import('app/grafana').then(function(grafana) { + grafana.default.init(); }).catch(function(err) { console.log('Loading app module failed: ', err); }); diff --git a/public/app/core/plugins/directive.ts b/public/app/core/plugins/directive.ts deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/public/app/headers/angular2/angular2.d.ts b/public/app/headers/angular2/angular2.d.ts deleted file mode 100644 index 133527dec3d..00000000000 --- a/public/app/headers/angular2/angular2.d.ts +++ /dev/null @@ -1,12213 +0,0 @@ -// Type definitions for Angular v2.0.0-alpha.37 -// Project: http://angular.io/ -// Definitions by: angular team -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -// *********************************************************** -// This file is generated by the Angular build process. -// Please do not create manual edits or send pull requests -// modifying this file. -// *********************************************************** - -// angular2/angular2 depends transitively on these libraries. -// If you don't have them installed you can install them using TSD -// https://github.com/DefinitelyTyped/tsd - -/// -/// -// angular2/web_worker/worker depends transitively on these libraries. -// If you don't have them installed you can install them using TSD -// https://github.com/DefinitelyTyped/tsd - -/// -/// -// angular2/web_worker/ui depends transitively on these libraries. -// If you don't have them installed you can install them using TSD -// https://github.com/DefinitelyTyped/tsd - -/// -/// - - -interface Map {} -interface StringMap extends Map {} - - -declare module ng { - // See https://github.com/Microsoft/TypeScript/issues/1168 - class BaseException /* extends Error */ { - message: string; - stack: string; - toString(): string; - } - interface InjectableReference {} -} - -declare module ngWorker { - // See https://github.com/Microsoft/TypeScript/issues/1168 - class BaseException /* extends Error */ { - message: string; - stack: string; - toString(): string; - } - interface InjectableReference {} -} - -declare module ngUi { - // See https://github.com/Microsoft/TypeScript/issues/1168 - class BaseException /* extends Error */ { - message: string; - stack: string; - toString(): string; - } - interface InjectableReference {} -} - - - - - -/** - * The `angular2` is the single place to import all of the individual types. - */ -declare module ng { - - /** - * Bootstrapping for Angular applications. - * - * You instantiate an Angular application by explicitly specifying a component to use as the root - * component for your - * application via the `bootstrap()` method. - * - * ## Simple Example - * - * Assuming this `index.html`: - * - * ```html - * - * - * - * loading... - * - * - * ``` - * - * An application is bootstrapped inside an existing browser DOM, typically `index.html`. Unlike - * Angular 1, Angular 2 - * does not compile/process bindings in `index.html`. This is mainly for security reasons, as well - * as architectural - * changes in Angular 2. This means that `index.html` can safely be processed using server-side - * technologies such as - * bindings. Bindings can thus use double-curly `{{ syntax }}` without collision from Angular 2 - * component double-curly - * `{{ syntax }}`. - * - * We can use this script code: - * - * ``` - * @Component({ - * selector: 'my-app' - * }) - * @View({ - * template: 'Hello {{ name }}!' - * }) - * class MyApp { - * name:string; - * - * constructor() { - * this.name = 'World'; - * } - * } - * - * main() { - * return bootstrap(MyApp); - * } - * ``` - * - * When the app developer invokes `bootstrap()` with the root component `MyApp` as its argument, - * Angular performs the - * following tasks: - * - * 1. It uses the component's `selector` property to locate the DOM element which needs to be - * upgraded into - * the angular component. - * 2. It creates a new child injector (from the platform injector). Optionally, you can also - * override the injector configuration for an app by - * invoking `bootstrap` with the `componentInjectableBindings` argument. - * 3. It creates a new `Zone` and connects it to the angular application's change detection domain - * instance. - * 4. It creates a shadow DOM on the selected component's host element and loads the template into - * it. - * 5. It instantiates the specified component. - * 6. Finally, Angular performs change detection to apply the initial data bindings for the - * application. - * - * - * ## Instantiating Multiple Applications on a Single Page - * - * There are two ways to do this. - * - * - * ### Isolated Applications - * - * Angular creates a new application each time that the `bootstrap()` method is invoked. When - * multiple applications - * are created for a page, Angular treats each application as independent within an isolated change - * detection and - * `Zone` domain. If you need to share data between applications, use the strategy described in the - * next - * section, "Applications That Share Change Detection." - * - * - * ### Applications That Share Change Detection - * - * If you need to bootstrap multiple applications that share common data, the applications must - * share a common - * change detection and zone. To do that, create a meta-component that lists the application - * components in its template. - * By only invoking the `bootstrap()` method once, with the meta-component as its argument, you - * ensure that only a - * single change detection zone is created and therefore data can be shared across the applications. - * - * - * ## Platform Injector - * - * When working within a browser window, there are many singleton resources: cookies, title, - * location, and others. - * Angular services that represent these resources must likewise be shared across all Angular - * applications that - * occupy the same browser window. For this reason, Angular creates exactly one global platform - * injector which stores - * all shared services, and each angular application injector has the platform injector as its - * parent. - * - * Each application has its own private injector as well. When there are multiple applications on a - * page, Angular treats - * each application injector's services as private to that application. - * - * - * # API - * - `appComponentType`: The root component which should act as the application. This is a reference - * to a `Type` - * which is annotated with `@Component(...)`. - * - `componentInjectableBindings`: An additional set of bindings that can be added to the app - * injector - * to override default injection behavior. - * - `errorReporter`: `function(exception:any, stackTrace:string)` a default error reporter for - * unhandled exceptions. - * - * Returns a `Promise` of {@link ApplicationRef}. - */ - function bootstrap(appComponentType: /*Type*/ any, componentInjectableBindings?: Array) : Promise ; - - - /** - * Declare reusable UI building blocks for an application. - * - * Each Angular component requires a single `@Component` and at least one `@View` annotation. The - * `@Component` - * annotation specifies when a component is instantiated, and which properties and hostListeners it - * binds to. - * - * When a component is instantiated, Angular - * - creates a shadow DOM for the component. - * - loads the selected template into the shadow DOM. - * - creates all the injectable objects configured with `bindings` and `viewBindings`. - * - * All template expressions and statements are then evaluated against the component instance. - * - * For details on the `@View` annotation, see {@link ViewMetadata}. - * - * ## Example - * - * ``` - * @Component({ - * selector: 'greet' - * }) - * @View({ - * template: 'Hello {{name}}!' - * }) - * class Greet { - * name: string; - * - * constructor() { - * this.name = 'World'; - * } - * } - * ``` - */ - class ComponentMetadata extends DirectiveMetadata { - - - /** - * Defines the used change detection strategy. - * - * When a component is instantiated, Angular creates a change detector, which is responsible for - * propagating the component's bindings. - * - * The `changeDetection` property defines, whether the change detection will be checked every time - * or only when the component tells it to do so. - */ - changeDetection: ChangeDetectionStrategy; - - - /** - * Defines the set of injectable objects that are visible to its view dom children. - * - * ## Simple Example - * - * Here is an example of a class that can be injected: - * - * ``` - * class Greeter { - * greet(name:string) { - * return 'Hello ' + name + '!'; - * } - * } - * - * @Directive({ - * selector: 'needs-greeter' - * }) - * class NeedsGreeter { - * greeter:Greeter; - * - * constructor(greeter:Greeter) { - * this.greeter = greeter; - * } - * } - * - * @Component({ - * selector: 'greet', - * viewBindings: [ - * Greeter - * ] - * }) - * @View({ - * template: ``, - * directives: [NeedsGreeter] - * }) - * class HelloWorld { - * } - * - * ``` - */ - viewBindings: any[]; - } - - - /** - * Directives allow you to attach behavior to elements in the DOM. - * - * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s. - * - * A directive consists of a single directive annotation and a controller class. When the - * directive's `selector` matches - * elements in the DOM, the following steps occur: - * - * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor - * arguments. - * 2. Angular instantiates directives for each matched element using `ElementInjector` in a - * depth-first order, - * as declared in the HTML. - * - * ## Understanding How Injection Works - * - * There are three stages of injection resolution. - * - *Pre-existing Injectors*: - * - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if - * the dependency was - * specified as `@Optional`, returns `null`. - * - The platform injector resolves browser singleton resources, such as: cookies, title, - * location, and others. - * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow - * the same parent-child hierarchy - * as the component instances in the DOM. - * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each - * element has an `ElementInjector` - * which follow the same parent-child hierarchy as the DOM elements themselves. - * - * When a template is instantiated, it also must instantiate the corresponding directives in a - * depth-first order. The - * current `ElementInjector` resolves the constructor dependencies for each directive. - * - * Angular then resolves dependencies as follows, according to the order in which they appear in the - * {@link ViewMetadata}: - * - * 1. Dependencies on the current element - * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary - * 3. Dependencies on component injectors and their parents until it encounters the root component - * 4. Dependencies on pre-existing injectors - * - * - * The `ElementInjector` can inject other directives, element-specific special objects, or it can - * delegate to the parent - * injector. - * - * To inject other directives, declare the constructor parameter as: - * - `directive:DirectiveType`: a directive on the current element only - * - `@Host() directive:DirectiveType`: any directive that matches the type between the current - * element and the - * Shadow DOM root. - * - `@Query(DirectiveType) query:QueryList`: A live collection of direct child - * directives. - * - `@QueryDescendants(DirectiveType) query:QueryList`: A live collection of any - * child directives. - * - * To inject element-specific special objects, declare the constructor parameter as: - * - `element: ElementRef` to obtain a reference to logical element in the view. - * - `viewContainer: ViewContainerRef` to control child template instantiation, for - * {@link DirectiveMetadata} directives only - * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way. - * - * ## Example - * - * The following example demonstrates how dependency injection resolves constructor arguments in - * practice. - * - * - * Assume this HTML template: - * - * ``` - *
    - *
    - *
    - *
    - *
    - *
    - *
    - *
    - *
    - *
    - * ``` - * - * With the following `dependency` decorator and `SomeService` injectable class. - * - * ``` - * @Injectable() - * class SomeService { - * } - * - * @Directive({ - * selector: '[dependency]', - * properties: [ - * 'id: dependency' - * ] - * }) - * class Dependency { - * id:string; - * } - * ``` - * - * Let's step through the different ways in which `MyDirective` could be declared... - * - * - * ### No injection - * - * Here the constructor is declared with no arguments, therefore nothing is injected into - * `MyDirective`. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor() { - * } - * } - * ``` - * - * This directive would be instantiated with no dependencies. - * - * - * ### Component-level injection - * - * Directives can inject any injectable instance from the closest component injector or any of its - * parents. - * - * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type - * from the parent - * component's injector. - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(someService: SomeService) { - * } - * } - * ``` - * - * This directive would be instantiated with a dependency on `SomeService`. - * - * - * ### Injecting a directive from the current element - * - * Directives can inject other directives declared on the current element. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(dependency: Dependency) { - * expect(dependency.id).toEqual(3); - * } - * } - * ``` - * This directive would be instantiated with `Dependency` declared at the same element, in this case - * `dependency="3"`. - * - * ### Injecting a directive from any ancestor elements - * - * Directives can inject other directives declared on any ancestor element (in the current Shadow - * DOM), i.e. on the current element, the - * parent element, or its parents. - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Host() dependency: Dependency) { - * expect(dependency.id).toEqual(2); - * } - * } - * ``` - * - * `@Host` checks the current element, the parent, as well as its parents recursively. If - * `dependency="2"` didn't - * exist on the direct parent, this injection would - * have returned - * `dependency="1"`. - * - * - * ### Injecting a live collection of direct child directives - * - * - * A directive can also query for other child directives. Since parent directives are instantiated - * before child directives, a directive can't simply inject the list of child directives. Instead, - * the directive injects a {@link QueryList}, which updates its contents as children are added, - * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ng-for`, an - * `ng-if`, or an `ng-switch`. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Query(Dependency) dependencies:QueryList) { - * } - * } - * ``` - * - * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and - * 6. Here, `Dependency` 5 would not be included, because it is not a direct child. - * - * ### Injecting a live collection of descendant directives - * - * By passing the descendant flag to `@Query` above, we can include the children of the child - * elements. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList) { - * } - * } - * ``` - * - * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6. - * - * ### Optional injection - * - * The normal behavior of directives is to return an error when a specified dependency cannot be - * resolved. If you - * would like to inject `null` on unresolved dependency instead, you can annotate that dependency - * with `@Optional()`. - * This explicitly permits the author of a template to treat some of the surrounding directives as - * optional. - * - * ``` - * @Directive({ selector: '[my-directive]' }) - * class MyDirective { - * constructor(@Optional() dependency:Dependency) { - * } - * } - * ``` - * - * This directive would be instantiated with a `Dependency` directive found on the current element. - * If none can be - * found, the injector supplies `null` instead of throwing an error. - * - * ## Example - * - * Here we use a decorator directive to simply define basic tool-tip behavior. - * - * ``` - * @Directive({ - * selector: '[tooltip]', - * properties: [ - * 'text: tooltip' - * ], - * host: { - * '(mouseenter)': 'onMouseEnter()', - * '(mouseleave)': 'onMouseLeave()' - * } - * }) - * class Tooltip{ - * text:string; - * overlay:Overlay; // NOT YET IMPLEMENTED - * overlayManager:OverlayManager; // NOT YET IMPLEMENTED - * - * constructor(overlayManager:OverlayManager) { - * this.overlay = overlay; - * } - * - * onMouseEnter() { - * // exact signature to be determined - * this.overlay = this.overlayManager.open(text, ...); - * } - * - * onMouseLeave() { - * this.overlay.close(); - * this.overlay = null; - * } - * } - * ``` - * In our HTML template, we can then add this behavior to a `
    ` or any other element with the - * `tooltip` selector, - * like so: - * - * ``` - *
    - * ``` - * - * Directives can also control the instantiation, destruction, and positioning of inline template - * elements: - * - * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at - * runtime. - * The {@link ViewContainerRef} is created as a result of `