From f8b05e0f42f6274a0539b46f8d4531d6ada46784 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 2 Oct 2015 03:19:25 +0900 Subject: [PATCH 01/57] 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/57] 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/57] 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/57] 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/57] 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/57] 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 15fb56e607d7faa9173920c568be6338118a36ff Mon Sep 17 00:00:00 2001 From: Kevin Pike Date: Thu, 4 Feb 2016 13:46:02 -0800 Subject: [PATCH 07/57] Add github api_url to github auth docs --- docs/sources/installation/configuration.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/sources/installation/configuration.md b/docs/sources/installation/configuration.md index 247cfbb0d19..b652abcabb6 100644 --- a/docs/sources/installation/configuration.md +++ b/docs/sources/installation/configuration.md @@ -268,6 +268,7 @@ example: scopes = user:email auth_url = https://github.com/login/oauth/authorize token_url = https://github.com/login/oauth/access_token + api_url = https://api.github.com allow_sign_up = false team_ids = From aa8bd044c5410cc857ca553ef6e4c46156217592 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Feb 2016 11:05:47 +0100 Subject: [PATCH 08/57] fix(): various fixes to snapshots --- .../features/dashboard/dashnav/dashnav.html | 4 +- public/app/features/panel/panel_directive.ts | 51 ++++++++++++++++++- public/app/plugins/panel/singlestat/module.ts | 10 ++-- public/less/navbar.less | 23 +++------ 4 files changed, 64 insertions(+), 24 deletions(-) diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 89f9f301729..3edafc1f96f 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -8,8 +8,8 @@ -
- +
+ {{dashboard.title}} diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 757f9f8e43d..2497732928b 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -5,10 +5,59 @@ import $ from 'jquery'; var module = angular.module('grafana.directives'); +var panelTemplate = ` +
+
+ + + + + + + + + + +
+
+ +
+ +
+ +
+ +
+
+
+
+ + {{ctrl.name}} +
+ +
+
+
+
+ + +
+ +
+
+ +
+
+
+
+`; + module.directive('grafanaPanel', function() { return { restrict: 'E', - templateUrl: 'public/app/features/panel/partials/panel.html', + template: panelTemplate, transclude: true, scope: { ctrl: "=" }, link: function(scope, elem) { diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 24d6af46c26..b161cd1d8ed 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -59,7 +59,7 @@ class SingleStatCtrl extends MetricsPanelCtrl { super.initEditMode(); this.icon = "fa fa-dashboard"; this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%']; - this.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html', 2); + this.addEditorTab('Options', 'public/app/plugins/panel/singlestat/editor.html', 2); this.unitFormats = kbn.getUnitFormats(); } @@ -172,11 +172,11 @@ class SingleStatCtrl extends MetricsPanelCtrl { data.flotpairs = []; if (this.series.length > 1) { - this.inspector.error = new Error(); - this.inspector.error.message = 'Multiple Series Error'; - this.inspector.error.data = 'Metric query returns ' + this.series.length + + var error: any = new Error(); + error.message = 'Multiple Series Error'; + error.data = 'Metric query returns ' + this.series.length + ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify(this.series); - throw this.inspector.error; + throw error; } if (this.series && this.series.length > 0) { diff --git a/public/less/navbar.less b/public/less/navbar.less index 19c6b7d9a75..8dd78e95b14 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -83,6 +83,13 @@ position: relative; top: 2px; } + + .icon-gf { + position: relative; + top: 5px; + font-size: 27px; + line-height: 8px; + } } .dashboard-title { @@ -114,20 +121,4 @@ color: @linkColor; } -.top-nav-snapshot-title { - .gf-icon { - position: relative; - top: 3px; - font-size: 27px; - } - a { - display: inline-block; - padding: 0px 15px 5px 10px; - } - display: block; - float: left; - font-size: 1.4em; - margin: 9px 18px 5px 14px; - color: @linkColor; -} From 0fab210ad2a6688bc58c23b3cc5c97266f2929ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Feb 2016 12:13:59 +0100 Subject: [PATCH 09/57] feat(apps): changed edit apps view to use plugin-component for apps config view --- .../app/core/directives/plugin_component.ts | 11 +++++++++ public/app/features/apps/all.ts | 1 - public/app/features/apps/config_view.ts | 23 ------------------- public/app/features/apps/partials/edit.html | 2 +- .../app/features/panel/metrics_panel_ctrl.ts | 4 ++-- 5 files changed, 14 insertions(+), 27 deletions(-) delete mode 100644 public/app/features/apps/config_view.ts diff --git a/public/app/core/directives/plugin_component.ts b/public/app/core/directives/plugin_component.ts index 94e50bf5c86..21900ce94ed 100644 --- a/public/app/core/directives/plugin_component.ts +++ b/public/app/core/directives/plugin_component.ts @@ -141,6 +141,17 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ }; }); } + // AppConfigCtrl + case 'app-config-ctrl': { + return System.import(scope.ctrl.appModel.module).then(function(appModule) { + return { + name: 'app-config-' + scope.ctrl.appModel.appId, + bindings: {appModel: "=", appEditCtrl: "="}, + attrs: {"app-model": "ctrl.appModel", "app-edit-ctrl": "ctrl"}, + Component: appModule.ConfigCtrl, + }; + }); + } // Panel case 'panel': { return loadPanelComponentInfo(scope, attrs); diff --git a/public/app/features/apps/all.ts b/public/app/features/apps/all.ts index 6f15e8b1bf6..fcdd27dff4d 100644 --- a/public/app/features/apps/all.ts +++ b/public/app/features/apps/all.ts @@ -1,3 +1,2 @@ import './edit_ctrl'; import './list_ctrl'; -import './config_view'; diff --git a/public/app/features/apps/config_view.ts b/public/app/features/apps/config_view.ts deleted file mode 100644 index 31e85967cb2..00000000000 --- a/public/app/features/apps/config_view.ts +++ /dev/null @@ -1,23 +0,0 @@ -/// - -import angular from 'angular'; - -/** @ngInject */ -function appConfigView(dynamicDirectiveSrv) { - return dynamicDirectiveSrv.create({ - scope: { - appModel: "=" - }, - directive: scope => { - return System.import(scope.appModel.module).then(function(appModule) { - return { - name: 'app-config-' + scope.appModel.appId, - fn: appModule.configView, - }; - }); - }, - }); -} - - -angular.module('grafana.directives').directive('appConfigView', appConfigView); diff --git a/public/app/features/apps/partials/edit.html b/public/app/features/apps/partials/edit.html index 20df40bd247..efc5f93c738 100644 --- a/public/app/features/apps/partials/edit.html +++ b/public/app/features/apps/partials/edit.html @@ -97,7 +97,7 @@

Configuration:

- +
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 1e6f34775f5..2c25aa6eca5 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -6,8 +6,8 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; import {PanelCtrl} from './panel_ctrl'; -import * as rangeUtil from '../../core/utils/rangeutil'; -import * as dateMath from '../../core/utils/datemath'; +import * as rangeUtil from 'app/core/utils/rangeutil'; +import * as dateMath from 'app/core/utils/datemath'; class MetricsPanelCtrl extends PanelCtrl { error: boolean; From 853cd1633642ab51e777c17e894cd51774dd6dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Feb 2016 13:48:10 +0100 Subject: [PATCH 10/57] fix(search); fixes to dashboard search (using keyboard), and fix for singlestat in snapshot view --- public/app/core/components/grafana_app.ts | 8 ++- public/app/core/components/search/search.html | 7 +-- public/app/core/components/search/search.ts | 30 ++++++++--- public/app/features/dashboard/all.js | 1 - .../dashboard/directives/dashSearchView.js | 54 ------------------- public/app/partials/dashboard.html | 2 +- public/app/plugins/panel/singlestat/module.ts | 22 +++----- public/less/grafana.less | 5 ++ public/views/index.html | 2 +- 9 files changed, 47 insertions(+), 84 deletions(-) delete mode 100644 public/app/features/dashboard/directives/dashSearchView.js diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 9b627e930a0..1dd1661aff0 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -187,13 +187,17 @@ export function grafanaAppDirective(playlistSrv) { // hide search if (elem.find('.search-container').length > 0) { if (target.parents('.search-container').length === 0) { - scope.appEvent('hide-dash-search'); + scope.$apply(function() { + scope.appEvent('hide-dash-search'); + }); } } // hide sidemenu if (!ignoreSideMenuHide && !scope.contextSrv.pinned && elem.find('.sidemenu').length > 0) { if (target.parents('.sidemenu').length === 0) { - scope.$apply(() => scope.contextSrv.toggleSideMenu()); + scope.$apply(function() { + scope.contextSrv.toggleSideMenu(); + }); } } diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 7a78f1a4a3e..35c4431d80c 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -1,3 +1,4 @@ +
@@ -44,7 +45,7 @@
No dashboards matching your query were found.
 + ng-class="{'selected': $index == ctrl.selectedIndex}" ng-href="{{row.url}}"> @@ -71,4 +72,4 @@
- +
diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index 3f8cb495e71..e296acf56e1 100644 --- a/public/app/core/components/search/search.ts +++ b/public/app/core/components/search/search.ts @@ -7,6 +7,7 @@ import $ from 'jquery'; import coreModule from '../../core_module'; export class SearchCtrl { + isOpen: boolean; query: any; giveSearchFocus: number; selectedIndex: number; @@ -15,16 +16,34 @@ export class SearchCtrl { tagsMode: boolean; showImport: boolean; dismiss: any; + ignoreClose: any; /** @ngInject */ - constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv) { + constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv, private $rootScope) { + $rootScope.onAppEvent('show-dash-search', this.openSearch.bind(this), $scope); + $rootScope.onAppEvent('hide-dash-search', this.closeSearch.bind(this), $scope); + } + + closeSearch() { + this.isOpen = this.ignoreClose; + } + + openSearch() { + if (this.isOpen) { + this.isOpen = false; + return; + } + + this.isOpen = true; this.giveSearchFocus = 0; this.selectedIndex = -1; this.results = []; this.query = { query: '', tag: [], starred: false }; this.currentSearchId = 0; + this.ignoreClose = true; - $timeout(() => { + this.$timeout(() => { + this.ignoreClose = false; this.giveSearchFocus = this.giveSearchFocus + 1; this.query.query = ''; this.search(); @@ -33,7 +52,7 @@ export class SearchCtrl { keyDown(evt) { if (evt.keyCode === 27) { - this.dismiss(); + this.closeSearch(); } if (evt.keyCode === 40) { this.moveSelection(1); @@ -141,10 +160,7 @@ export function searchDirective() { controller: SearchCtrl, bindToController: true, controllerAs: 'ctrl', - scope: { - dismiss: '&' - }, }; } -coreModule.directive('search', searchDirective); +coreModule.directive('dashboardSearch', searchDirective); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 9d7cd06019b..073ca2ae1d9 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -12,7 +12,6 @@ define([ './viewStateSrv', './timeSrv', './unsavedChangesSrv', - './directives/dashSearchView', './timepicker/timepicker', './graphiteImportCtrl', './dynamicDashboardSrv', diff --git a/public/app/features/dashboard/directives/dashSearchView.js b/public/app/features/dashboard/directives/dashSearchView.js deleted file mode 100644 index cee97fee758..00000000000 --- a/public/app/features/dashboard/directives/dashSearchView.js +++ /dev/null @@ -1,54 +0,0 @@ -define([ - 'angular', - 'jquery' -], -function (angular, $) { - 'use strict'; - - angular - .module('grafana.directives') - .directive('dashSearchView', function($compile) { - return { - restrict: 'A', - link: function(scope, elem) { - var editorScope; - var ignoreHide; - - function showSearch() { - if (editorScope) { - editorScope.dismiss(); - return; - } - - ignoreHide = true; - editorScope = scope.$new(); - editorScope.dismiss = function() { - editorScope.$destroy(); - elem.empty(); - elem.unbind(); - editorScope = null; - }; - - var view = $(''); - - elem.append(view); - $compile(elem.contents())(editorScope); - - setTimeout(function() { - ignoreHide = false; - }, 300); - } - - function hideSearch() { - if (editorScope && !ignoreHide) { - editorScope.dismiss(); - } - } - - scope.onAppEvent('show-dash-search', showSearch); - scope.onAppEvent('hide-dash-search', hideSearch); - } - }; - }); - -}); diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index d63c0d01e29..edba0d85bb9 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -4,7 +4,7 @@
-
+
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index b161cd1d8ed..5786c6be6d2 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -79,7 +79,8 @@ class SingleStatCtrl extends MetricsPanelCtrl { } loadSnapshot(snapshotData) { - this.dataHandler(snapshotData); + // give element time to get attached and get dimensions + this.$timeout(() => this.dataHandler(snapshotData), 50); } dataHandler(results) { @@ -239,22 +240,13 @@ class SingleStatCtrl extends MetricsPanelCtrl { var $timeout = this.$timeout; var panel = ctrl.panel; var templateSrv = this.templateSrv; - var data, linkInfo, $panelContainer; - var firstRender = true; + var data, linkInfo; + var $panelContainer = elem.parents('.panel-container'); + // change elem to singlestat panel + elem = elem.find('.singlestat-panel'); + hookupDrilldownLinkTooltip(); scope.$on('render', function() { - if (firstRender) { - var inner = elem.find('.singlestat-panel'); - if (inner.length) { - elem = inner; - $panelContainer = elem.parents('.panel-container'); - firstRender = false; - hookupDrilldownLinkTooltip(); - } else { - return; - } - } - render(); ctrl.renderingCompleted(); }); diff --git a/public/less/grafana.less b/public/less/grafana.less index 88745f6a57b..d33db98376b 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -70,6 +70,11 @@ top: 20%; } +.grafana-app { + display: block; + min-height: 100%; +} + .histogram-chart { position:relative; } diff --git a/public/views/index.html b/public/views/index.html index 1d612e53385..40be796b306 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -26,7 +26,7 @@ - +
+
+

Default query settings

+
+
    +
  • + Group by time interval +
    • +
  • + +
    • +
  • + +
    • +
+
+
From 020277c04594bf751f5da876b82ac91927327c42 Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 5 Feb 2016 15:10:55 +0100 Subject: [PATCH 13/57] style(panel): fix intendention issue --- .../app/features/panel/metrics_panel_ctrl.ts | 82 +++++++++---------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 2c25aa6eca5..537bdbbcbdb 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -111,49 +111,49 @@ class MetricsPanelCtrl extends PanelCtrl { var panelInterval = this.panel.interval; var datasourceInterval = (this.datasource || {}).interval; - this.interval = kbn.calculateInterval(this.range, this.resolution, panelInterval || datasourceInterval); - }; + this.interval = kbn.calculateInterval(this.range, this.resolution, panelInterval || datasourceInterval); + }; - applyPanelTimeOverrides() { + applyPanelTimeOverrides() { + this.timeInfo = ''; + + // check panel time overrrides + if (this.panel.timeFrom) { + var timeFromInfo = rangeUtil.describeTextRange(this.panel.timeFrom); + if (timeFromInfo.invalid) { + this.timeInfo = 'invalid time override'; + return; + } + + if (_.isString(this.rangeRaw.from)) { + var timeFromDate = dateMath.parse(timeFromInfo.from); + this.timeInfo = timeFromInfo.display; + this.rangeRaw.from = timeFromInfo.from; + this.rangeRaw.to = timeFromInfo.to; + this.range.from = timeFromDate; + this.range.to = dateMath.parse(timeFromInfo.to); + } + } + + if (this.panel.timeShift) { + var timeShiftInfo = rangeUtil.describeTextRange(this.panel.timeShift); + if (timeShiftInfo.invalid) { + this.timeInfo = 'invalid timeshift'; + return; + } + + var timeShift = '-' + this.panel.timeShift; + this.timeInfo += ' timeshift ' + timeShift; + this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false); + this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true); + + this.rangeRaw = this.range; + } + + if (this.panel.hideTimeOverride) { this.timeInfo = ''; - - // check panel time overrrides - if (this.panel.timeFrom) { - var timeFromInfo = rangeUtil.describeTextRange(this.panel.timeFrom); - if (timeFromInfo.invalid) { - this.timeInfo = 'invalid time override'; - return; - } - - if (_.isString(this.rangeRaw.from)) { - var timeFromDate = dateMath.parse(timeFromInfo.from); - this.timeInfo = timeFromInfo.display; - this.rangeRaw.from = timeFromInfo.from; - this.rangeRaw.to = timeFromInfo.to; - this.range.from = timeFromDate; - this.range.to = dateMath.parse(timeFromInfo.to); - } - } - - if (this.panel.timeShift) { - var timeShiftInfo = rangeUtil.describeTextRange(this.panel.timeShift); - if (timeShiftInfo.invalid) { - this.timeInfo = 'invalid timeshift'; - return; - } - - var timeShift = '-' + this.panel.timeShift; - this.timeInfo += ' timeshift ' + timeShift; - this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false); - this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true); - - this.rangeRaw = this.range; - } - - if (this.panel.hideTimeOverride) { - this.timeInfo = ''; - } - }; + } + }; issueQueries(datasource) { this.updateTimeRange(); From 801129530e37b541de01ca72f434c3ec4d5122ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 Feb 2016 18:08:21 +0100 Subject: [PATCH 14/57] feat(plugins): base clases are now in app/plugins/sdk --- public/app/features/panel/panel.ts | 13 ------------- .../app/plugins/datasource/cloudwatch/query_ctrl.ts | 2 +- .../plugins/datasource/elasticsearch/query_ctrl.ts | 2 +- public/app/plugins/datasource/grafana/module.ts | 2 +- .../app/plugins/datasource/graphite/query_ctrl.ts | 2 +- .../app/plugins/datasource/influxdb/query_ctrl.ts | 2 +- .../app/plugins/datasource/opentsdb/query_ctrl.ts | 2 +- .../app/plugins/datasource/prometheus/query_ctrl.ts | 2 +- public/app/plugins/panel/dashlist/module.ts | 2 +- public/app/plugins/panel/graph/module.ts | 6 +++--- public/app/plugins/panel/singlestat/module.ts | 4 ++-- public/app/plugins/panel/table/module.ts | 2 +- public/app/plugins/panel/text/module.ts | 2 +- public/app/plugins/panel/unknown/module.ts | 2 +- public/app/plugins/sdk.ts | 9 +++++++++ 15 files changed, 25 insertions(+), 29 deletions(-) delete mode 100644 public/app/features/panel/panel.ts create mode 100644 public/app/plugins/sdk.ts diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts deleted file mode 100644 index c2415aaa1da..00000000000 --- a/public/app/features/panel/panel.ts +++ /dev/null @@ -1,13 +0,0 @@ -/// - -import config from 'app/core/config'; - -import {PanelCtrl} from './panel_ctrl'; -import {MetricsPanelCtrl} from './metrics_panel_ctrl'; -import {QueryCtrl} from './query_ctrl'; - -export { - PanelCtrl, - MetricsPanelCtrl, - QueryCtrl, -} diff --git a/public/app/plugins/datasource/cloudwatch/query_ctrl.ts b/public/app/plugins/datasource/cloudwatch/query_ctrl.ts index daacd7fe198..ab0ac0bdcff 100644 --- a/public/app/plugins/datasource/cloudwatch/query_ctrl.ts +++ b/public/app/plugins/datasource/cloudwatch/query_ctrl.ts @@ -2,7 +2,7 @@ import './query_parameter_ctrl'; import _ from 'lodash'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; export class CloudWatchQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/cloudwatch/partials/query.editor.html'; diff --git a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts index fb04f39b8ac..cab1fcf5676 100644 --- a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts +++ b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts @@ -5,7 +5,7 @@ import './metric_agg'; import angular from 'angular'; import _ from 'lodash'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; export class ElasticQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/elasticsearch/partials/query.editor.html'; diff --git a/public/app/plugins/datasource/grafana/module.ts b/public/app/plugins/datasource/grafana/module.ts index 19233c4f975..66d398273e0 100644 --- a/public/app/plugins/datasource/grafana/module.ts +++ b/public/app/plugins/datasource/grafana/module.ts @@ -2,7 +2,7 @@ import angular from 'angular'; import {GrafanaDatasource} from './datasource'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; class GrafanaQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/grafana/partials/query.editor.html'; diff --git a/public/app/plugins/datasource/graphite/query_ctrl.ts b/public/app/plugins/datasource/graphite/query_ctrl.ts index 23c6c2aa6d6..659253102c5 100644 --- a/public/app/plugins/datasource/graphite/query_ctrl.ts +++ b/public/app/plugins/datasource/graphite/query_ctrl.ts @@ -8,7 +8,7 @@ import _ from 'lodash'; import moment from 'moment'; import gfunc from './gfunc'; import {Parser} from './parser'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; export class GraphiteQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/graphite/partials/query.editor.html'; diff --git a/public/app/plugins/datasource/influxdb/query_ctrl.ts b/public/app/plugins/datasource/influxdb/query_ctrl.ts index 0622fc17bd1..cecfac28ea8 100644 --- a/public/app/plugins/datasource/influxdb/query_ctrl.ts +++ b/public/app/plugins/datasource/influxdb/query_ctrl.ts @@ -8,7 +8,7 @@ import _ from 'lodash'; import InfluxQueryBuilder from './query_builder'; import InfluxQuery from './influx_query'; import queryPart from './query_part'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; export class InfluxQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/influxdb/partials/query.editor.html'; diff --git a/public/app/plugins/datasource/opentsdb/query_ctrl.ts b/public/app/plugins/datasource/opentsdb/query_ctrl.ts index 69590b714ca..43086588679 100644 --- a/public/app/plugins/datasource/opentsdb/query_ctrl.ts +++ b/public/app/plugins/datasource/opentsdb/query_ctrl.ts @@ -2,7 +2,7 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; export class OpenTsQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/opentsdb/partials/query.editor.html'; diff --git a/public/app/plugins/datasource/prometheus/query_ctrl.ts b/public/app/plugins/datasource/prometheus/query_ctrl.ts index c215b184275..4ae380f1f65 100644 --- a/public/app/plugins/datasource/prometheus/query_ctrl.ts +++ b/public/app/plugins/datasource/prometheus/query_ctrl.ts @@ -5,7 +5,7 @@ import _ from 'lodash'; import moment from 'moment'; import * as dateMath from 'app/core/utils/datemath'; -import {QueryCtrl} from 'app/features/panel/panel'; +import {QueryCtrl} from 'app/plugins/sdk'; class PrometheusQueryCtrl extends QueryCtrl { static templateUrl = 'public/app/plugins/datasource/prometheus/partials/query.editor.html'; diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts index 829c98f39f5..78f2c0e3f6a 100644 --- a/public/app/plugins/panel/dashlist/module.ts +++ b/public/app/plugins/panel/dashlist/module.ts @@ -2,7 +2,7 @@ import _ from 'lodash'; import config from 'app/core/config'; -import {PanelCtrl} from '../../../features/panel/panel'; +import {PanelCtrl} from 'app/plugins/sdk'; // Set and populate defaults var panelDefaults = { diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 7b7db37a0d5..1b1d9f567ca 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -7,9 +7,9 @@ import './seriesOverridesCtrl'; import moment from 'moment'; import kbn from 'app/core/utils/kbn'; import _ from 'lodash'; -import TimeSeries from '../../../core/time_series2'; -import * as fileExport from '../../../core/utils/file_export'; -import {MetricsPanelCtrl} from '../../../features/panel/panel'; +import TimeSeries from 'app/core/time_series2'; +import * as fileExport from 'app/core/utils/file_export'; +import {MetricsPanelCtrl} from 'app/plugins/sdk'; var panelDefaults = { // datasource name, null = default datasource diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index 5786c6be6d2..7eee8524d8c 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -6,8 +6,8 @@ import $ from 'jquery'; import 'jquery.flot'; import kbn from 'app/core/utils/kbn'; -import TimeSeries from '../../../core/time_series2'; -import {MetricsPanelCtrl} from '../../../features/panel/panel'; +import TimeSeries from 'app/core/time_series2'; +import {MetricsPanelCtrl} from 'app/plugins/sdk'; // Set and populate defaults var panelDefaults = { diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index a84d2678295..43355d5966c 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/public/app/plugins/panel/table/module.ts @@ -5,7 +5,7 @@ import _ from 'lodash'; import $ from 'jquery'; import moment from 'moment'; import * as FileExport from 'app/core/utils/file_export'; -import {MetricsPanelCtrl} from '../../../features/panel/panel'; +import {MetricsPanelCtrl} from 'app/plugins/sdk'; import {transformDataToTable} from './transformers'; import {tablePanelEditor} from './editor'; import {TableRenderer} from './renderer'; diff --git a/public/app/plugins/panel/text/module.ts b/public/app/plugins/panel/text/module.ts index 5e781571eff..3509db12cfa 100644 --- a/public/app/plugins/panel/text/module.ts +++ b/public/app/plugins/panel/text/module.ts @@ -1,7 +1,7 @@ /// import _ from 'lodash'; -import {PanelCtrl} from 'app/features/panel/panel'; +import {PanelCtrl} from 'app/plugins/sdk'; // Set and populate defaults var panelDefaults = { diff --git a/public/app/plugins/panel/unknown/module.ts b/public/app/plugins/panel/unknown/module.ts index d625485cb63..0a0871d6b69 100644 --- a/public/app/plugins/panel/unknown/module.ts +++ b/public/app/plugins/panel/unknown/module.ts @@ -1,6 +1,6 @@ /// -import {PanelCtrl} from '../../../features/panel/panel'; +import {PanelCtrl} from 'app/plugins/sdk'; export class UnknownPanelCtrl extends PanelCtrl { static templateUrl = 'public/app/plugins/panel/unknown/module.html'; diff --git a/public/app/plugins/sdk.ts b/public/app/plugins/sdk.ts new file mode 100644 index 00000000000..a3616903908 --- /dev/null +++ b/public/app/plugins/sdk.ts @@ -0,0 +1,9 @@ +import {PanelCtrl} from 'app/features/panel/panel_ctrl'; +import {MetricsPanelCtrl} from 'app/features/panel/metrics_panel_ctrl'; +import {QueryCtrl} from 'app/features/panel/query_ctrl'; + +export { + PanelCtrl, + MetricsPanelCtrl, + QueryCtrl, +} From 89ef019b7cb2f5853d4fcf2cae8bd0ef788cfc4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Feb 2016 10:32:07 +0100 Subject: [PATCH 15/57] fix(): back to dashboard link fix --- public/app/features/dashboard/dashnav/dashnav.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 3edafc1f96f..765c68c7ee4 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -70,7 +70,7 @@
    -
  • +
  • Back to dashboard From ff4dbea19d269791d0169e99c7b6a6125b60fc2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Feb 2016 12:28:06 +0100 Subject: [PATCH 16/57] ux(navbar): worked on responsive breakpoints for navbar --- public/app/core/directives/body_class.js | 8 + .../features/dashboard/dashnav/dashnav.html | 8 +- .../dashboard/timepicker/timepicker.html | 8 +- public/less/grafana-responsive.less | 86 ++++++-- public/less/grafana.less | 8 +- public/less/navbar.less | 12 +- public/less/timepicker.less | 10 +- public/vendor/bootstrap/less/navbar.less | 193 +----------------- 8 files changed, 112 insertions(+), 221 deletions(-) diff --git a/public/app/core/directives/body_class.js b/public/app/core/directives/body_class.js index 73426c60e00..dcf04a0bfd6 100644 --- a/public/app/core/directives/body_class.js +++ b/public/app/core/directives/body_class.js @@ -12,6 +12,14 @@ function (_, $, coreModule) { var lastHideControlsVal; + $scope.onAppEvent('panel-fullscreen-enter', function() { + elem.toggleClass('panel-in-fullscreen', true); + }); + + $scope.onAppEvent('panel-fullscreen-exit', function() { + elem.toggleClass('panel-in-fullscreen', false); + }); + $scope.$watch('dashboard.hideControls', function() { if (!$scope.dashboard) { return; diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 765c68c7ee4..67c98520bd3 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,6 +1,6 @@ -
    +
    {{dashboard.title}} @@ -8,7 +8,7 @@
    -
    +
    @@ -18,7 +18,7 @@
    -
      +
        -
      • +
      • Back to dashboard diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index 66093110700..10a1d6820a3 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,13 +1,13 @@
          -
        • +
        • Zoom Out
          • -
        • - +
        • + @@ -21,7 +21,7 @@
          • -
        • +
        • diff --git a/public/less/grafana-responsive.less b/public/less/grafana-responsive.less index 8ddbee920dd..2ebf8d02264 100644 --- a/public/less/grafana-responsive.less +++ b/public/less/grafana-responsive.less @@ -22,36 +22,94 @@ @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); +@screen-xs: 480px; +@screen-sm: 768px; +@screen-md: 992px; +@screen-lg: 1200px; + +@screen-xs-max: (@screen-sm - 1); +@screen-sm-max: (@screen-md - 1); +@screen-md-max: (@screen-lg - 1); + +@breakpoint-xs-up: ~"only screen and (min-width: @{screen-xs})"; +@breakpoint-xs: ~"only screen and (min-width: @{screen-xs}) and (max-width: @{screen-xs-max})"; +@breakpoint-sm-up: ~"only screen and (min-width: @{screen-sm})"; +@breakpoint-sm: ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})"; +@breakpoint-md-up: ~"only screen and (min-width: @{screen-md})"; +@breakpoint-md: ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})"; +@breakpoint-lg: ~"only screen and (min-width: @{screen-lg})"; + +.dashnav-back-to-dashboard { + display: none; +} // Media queries // --------------------- -@media (max-width: 767px) { +@media @breakpoint-xs { div.panel { width: 100% !important; padding: 0px !important; } + .panel-margin { + margin-right: 0; + margin-left: 0; + } body { padding: 0; } -} - -.back-to-dashboard-link { - display: none; -} - -@media (min-width: 990px) { - .back-to-dashboard-link { - display: block; + .dashnav-dashboards-btn a { + max-width: 200px; } - .sidemenu-open { - .back-to-dashboard-link { + .gf-timepicker-nav-btn { + max-width: 120px; + } + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } +} + +@media @breakpoint-sm-up { + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .panel-in-fullscreen { + .dashnav-action-icons { display: none; } + + .dashnav-back-to-dashboard { + display: block; + } } } -@media (min-width: 1210px) { - .back-to-dashboard-link { +@media @breakpoint-md-up { + .dashnav-dashboards-btn a { + max-width: 290px; + } + .gf-timepicker-nav-btn { + max-width: 250px; + } + .dashnav-zoom-out { display: block; } } + +@media @breakpoint-lg { + .panel-in-fullscreen { + .dashnav-action-icons { + display: block; + } + } + + .dashnav-dashboards-btn a { + max-width: none; + } + .gf-timepicker-nav-btn { + max-width: none; + } +} diff --git a/public/less/grafana.less b/public/less/grafana.less index d33db98376b..a4872942331 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -45,11 +45,11 @@ } .playlist-active { - .grafana-menu-zoom-out, .add-row-panel-hint, - .grafana-menu-refresh, - .top-nav-dash-actions { - display:none; + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; } .grafana-menu-stop-playlist { diff --git a/public/less/navbar.less b/public/less/navbar.less index 8dd78e95b14..f4a405ad25c 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -10,7 +10,7 @@ } .navbar .nav>li>a { - padding: 17px 15px 13px; + padding: 17px 13px 13px; .fa { font-size: 115%; } } @@ -50,7 +50,7 @@ .top-nav-menu-btn { a { - padding: 6px 20px 6px 13px; + padding: 6px 20px 6px 13px; } img { width: 30px; @@ -74,9 +74,13 @@ } } -.top-nav-dashboards-btn { +.dashnav-dashboards-btn { a { - padding: 16px 17px 14px 13px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: block; + padding: 16px 17px 15px 13px; } .fa-th-large { diff --git a/public/less/timepicker.less b/public/less/timepicker.less index 7910d18c23c..3eabb32bb1e 100644 --- a/public/less/timepicker.less +++ b/public/less/timepicker.less @@ -6,6 +6,12 @@ font-weight: normal; } +.gf-timepicker-nav-btn { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .gf-timepicker-dropdown { margin: -5px -10px 10px 5px; padding: 10px 20px; @@ -14,10 +20,6 @@ .box-shadow(@navbarDropdownShadow); } -li.gf-timepicker-open a { - background-color: @grafanaPanelBackground; -} - .gf-timepicker-absolute-section { width: 300px; float: left; diff --git a/public/vendor/bootstrap/less/navbar.less b/public/vendor/bootstrap/less/navbar.less index 93d09bcad03..40b9a96490b 100644 --- a/public/vendor/bootstrap/less/navbar.less +++ b/public/vendor/bootstrap/less/navbar.less @@ -22,10 +22,8 @@ min-height: @navbarHeight; padding-left: 20px; padding-right: 20px; - #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); + background-color: @navbarBackground; border: 1px solid @navbarBorder; - .border-radius(@baseBorderRadius); - .box-shadow(0 1px 4px rgba(0,0,0,.065)); // Prevent floats from breaking the navbar .clearfix(); @@ -37,199 +35,20 @@ width: auto; } -// Override the default collapsed state -.nav-collapse.collapse { - height: auto; - overflow: visible; -} - - -// Brand: website or project name -// ------------------------- -.navbar .brand { - float: left; - display: block; - // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2); - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - color: @navbarBrandColor; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; - &:hover, - &:focus { - text-decoration: none; - } -} - -// Plain text in topbar -// ------------------------- -.navbar-text { - margin-bottom: 0; - line-height: @navbarHeight; - color: @navbarText; -} - -// Janky solution for now to account for links outside the .nav -// ------------------------- -.navbar-link { - color: @navbarLinkColor; - &:hover, - &:focus { - color: @navbarLinkColorHover; - } -} - -// Dividers in navbar -// ------------------------- -.navbar .divider-vertical { - height: @navbarHeight; - margin: 0 9px; - border-left: 1px solid @navbarBackground; - border-right: 1px solid @navbarBackgroundHighlight; -} - -// Buttons in navbar -// ------------------------- -.navbar .btn, -.navbar .btn-group { - .navbarVerticalAlign(30px); // Vertically center in navbar -} -.navbar .btn-group .btn, -.navbar .input-prepend .btn, -.navbar .input-append .btn, -.navbar .input-prepend .btn-group, -.navbar .input-append .btn-group { - margin-top: 0; // then undo the margin here so we don't accidentally double it -} - -// Navbar forms -// ------------------------- -.navbar-form { - margin-bottom: 0; // remove default bottom margin - .clearfix(); - input, - select, - .radio, - .checkbox { - .navbarVerticalAlign(30px); // Vertically center in navbar - } - input, - select, - .btn { - display: inline-block; - margin-bottom: 0; - } - input[type="image"], - input[type="checkbox"], - input[type="radio"] { - margin-top: 3px; - } - .input-append, - .input-prepend { - margin-top: 5px; - white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left - input { - margin-top: 0; // remove the margin on top since it's on the parent - } - } -} - -// Navbar search -// ------------------------- -.navbar-search { - position: relative; - float: left; - .navbarVerticalAlign(30px); // Vertically center in navbar - margin-bottom: 0; - .search-query { - margin-bottom: 0; - padding: 4px 14px; - #font > .sans-serif(13px, normal, 1); - .border-radius(15px); // redeclare because of specificity of the type attribute - } -} - - - -// Static navbar -// ------------------------- - -.navbar-static-top { - position: static; - margin-bottom: 0; // remove 18px margin for default navbar - .navbar-inner { - .border-radius(0); - } -} - - - -// Fixed navbar -// ------------------------- - -// Shared (top/bottom) styles -.navbar-fixed-top, -.navbar-fixed-bottom { - position: fixed; - right: 0; - left: 0; - z-index: @zindexFixedNavbar; - margin-bottom: 0; // remove 18px margin for default navbar -} -.navbar-fixed-top .navbar-inner, -.navbar-static-top .navbar-inner { - border-width: 0 0 1px; -} -.navbar-fixed-bottom .navbar-inner { - border-width: 1px 0 0; -} -.navbar-fixed-top .navbar-inner, -.navbar-fixed-bottom .navbar-inner { - padding-left: 0; - padding-right: 0; - .border-radius(0); -} - -// Reset container width -// Required here as we reset the width earlier on and the grid mixins don't override early enough -.navbar-static-top .container, -.navbar-fixed-top .container, -.navbar-fixed-bottom .container { - #grid > .core > .span(@gridColumns); -} - -// Fixed to top -.navbar-fixed-top { - top: 0; -} -.navbar-fixed-top, -.navbar-static-top { - .navbar-inner { - .box-shadow(~"0 1px 10px rgba(0,0,0,.1)"); - } -} - -// Fixed to bottom -.navbar-fixed-bottom { - bottom: 0; - .navbar-inner { - .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)"); - } -} - - - // NAVIGATION // ---------- .navbar .nav { position: relative; left: 0; - display: block; float: left; margin: 0 10px 0 0; } + +.nav { + display: block; +} + .navbar .nav.pull-right { float: right; // redeclare due to specificity margin-right: 0; // remove margin on float right nav 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 17/57] 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 18/57] 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 19/57] 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 20/57] 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 21/57] 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 22/57] 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 23/57] 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 `