diff --git a/.gitignore b/.gitignore index 3fdbcac5734..2cd3623cf83 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ awsconfig /dist /emails/dist /public_gen +/public/vendor/npm /tmp vendor/phantomjs/phantomjs diff --git a/package.json b/package.json index ef79f3367d8..03c5ab52bb4 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ }, "scripts": { "test": "grunt test", - "coveralls": "grunt karma:coveralls && rm -rf ./coverage" + "coveralls": "grunt karma:coveralls && rm -rf ./coverage", + "postinstall": "grunt copy:node_modules" }, "license": "Apache-2.0", "dependencies": { diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 7bea0b6338c..0759f1e83b8 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -123,6 +123,8 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro panels[panel.Id] = map[string]interface{}{ "module": panel.Module, "name": panel.Name, + "id": panel.Id, + "info": panel.Info, } } diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index efcd1f2ec25..9b627e930a0 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -5,7 +5,7 @@ import store from 'app/core/store'; import _ from 'lodash'; import angular from 'angular'; import $ from 'jquery'; -import coreModule from '../core_module'; +import coreModule from 'app/core/core_module'; export class GrafanaCtrl { diff --git a/public/app/core/filters/filters.ts b/public/app/core/filters/filters.ts index 57b2b1bd9ba..6122a010182 100644 --- a/public/app/core/filters/filters.ts +++ b/public/app/core/filters/filters.ts @@ -59,11 +59,14 @@ coreModule.filter('noXml', function() { coreModule.filter('interpolateTemplateVars', function (templateSrv) { var filterFunc: any = function(text, scope) { - if (scope.panel) { - return templateSrv.replaceWithText(text, scope.panel.scopedVars); + var scopedVars; + if (scope.ctrl && scope.ctrl.panel) { + scopedVars = scope.ctrl.panel.scopedVars; } else { - return templateSrv.replaceWithText(text, scope.row.scopedVars); + scopedVars = scope.row.scopedVars; } + + return templateSrv.replaceWithText(text, scopedVars); }; filterFunc.$stateful = true; diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js index 3b178c4de26..e8abb5bbb05 100644 --- a/public/app/features/dashboard/rowCtrl.js +++ b/public/app/features/dashboard/rowCtrl.js @@ -116,36 +116,7 @@ function (angular, _, config) { $scope.$broadcast('render'); }; - $scope.removePanel = function(panel) { - $scope.appEvent('confirm-modal', { - title: 'Are you sure you want to remove this panel?', - icon: 'fa-trash', - yesText: 'Delete', - onConfirm: function() { - $scope.row.panels = _.without($scope.row.panels, panel); - } - }); - }; - - $scope.updatePanelSpan = function(panel, span) { - panel.span = Math.min(Math.max(Math.floor(panel.span + span), 1), 12); - }; - - $scope.replacePanel = function(newPanel, oldPanel) { - var row = $scope.row; - var index = _.indexOf(row.panels, oldPanel); - row.panels.splice(index, 1); - - // adding it back needs to be done in next digest - $timeout(function() { - newPanel.id = oldPanel.id; - newPanel.span = oldPanel.span; - row.panels.splice(index, 0, newPanel); - }); - }; - $scope.init(); - }); module.directive('rowHeight', function() { diff --git a/public/app/features/dashboard/shareModalCtrl.js b/public/app/features/dashboard/shareModalCtrl.js index 336600975dc..0ba27ec6f5d 100644 --- a/public/app/features/dashboard/shareModalCtrl.js +++ b/public/app/features/dashboard/shareModalCtrl.js @@ -26,7 +26,7 @@ function (angular, _, require, config) { $scope.modalTitle = 'Share Dashboard'; } - if (!$scope.dashboardMeta.isSnapshot) { + if (!$scope.dashboard.meta.isSnapshot) { $scope.tabs.push({title: 'Snapshot sharing', src: 'shareSnapshot.html'}); } diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index 58403766a31..abe1ec3279e 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -17,6 +17,7 @@ function (angular, _, $) { self.state = {}; self.panelScopes = []; self.$scope = $scope; + self.dashboard = $scope.dashboard; $scope.exitFullscreen = function() { if (self.state.fullscreen) { @@ -31,6 +32,14 @@ function (angular, _, $) { } }); + $scope.onAppEvent('panel-change-view', function(evt, payload) { + self.update(payload); + }); + + $scope.onAppEvent('panel-instantiated', function(evt, payload) { + self.registerPanel(payload.scope); + }); + this.update(this.getQueryStringState(), true); this.expandRowForPanel(); } @@ -66,7 +75,7 @@ function (angular, _, $) { DashboardViewState.prototype.update = function(state, skipUrlSync) { _.extend(this.state, state); - this.fullscreen = this.state.fullscreen; + this.dashboard.meta.fullscreen = this.state.fullscreen; if (!this.state.fullscreen) { this.state.panelId = null; @@ -84,7 +93,7 @@ function (angular, _, $) { DashboardViewState.prototype.syncState = function() { if (this.panelScopes.length === 0) { return; } - if (this.fullscreen) { + if (this.dashboard.meta.fullscreen) { if (this.fullscreenPanel) { this.leaveFullscreen(false); } @@ -105,23 +114,24 @@ function (angular, _, $) { DashboardViewState.prototype.getPanelScope = function(id) { return _.find(this.panelScopes, function(panelScope) { - return panelScope.panel.id === id; + return panelScope.ctrl.panel.id === id; }); }; DashboardViewState.prototype.leaveFullscreen = function(render) { var self = this; + var ctrl = self.fullscreenPanel.ctrl; - self.fullscreenPanel.editMode = false; - self.fullscreenPanel.fullscreen = false; - delete self.fullscreenPanel.height; + ctrl.editMode = false; + ctrl.fullscreen = false; + delete ctrl.height; - this.$scope.appEvent('panel-fullscreen-exit', {panelId: this.fullscreenPanel.panel.id}); + this.$scope.appEvent('panel-fullscreen-exit', {panelId: ctrl.panel.id}); if (!render) { return false;} $timeout(function() { - if (self.oldTimeRange !== self.fullscreenPanel.range) { + if (self.oldTimeRange !== ctrl.range) { self.$scope.broadcastRefresh(); } else { @@ -135,17 +145,18 @@ function (angular, _, $) { var docHeight = $(window).height(); var editHeight = Math.floor(docHeight * 0.3); var fullscreenHeight = Math.floor(docHeight * 0.7); + var ctrl = panelScope.ctrl; - panelScope.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; - panelScope.height = panelScope.editMode ? editHeight : fullscreenHeight; + ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; + ctrl.height = ctrl.editMode ? editHeight : fullscreenHeight; + ctrl.fullscreen = true; - this.oldTimeRange = panelScope.range; + this.oldTimeRange = ctrl.range; this.fullscreenPanel = panelScope; $(window).scrollTop(0); - panelScope.fullscreen = true; - this.$scope.appEvent('panel-fullscreen-enter', {panelId: panelScope.panel.id}); + this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id}); $timeout(function() { panelScope.$broadcast('render'); @@ -156,8 +167,12 @@ function (angular, _, $) { var self = this; self.panelScopes.push(panelScope); - if (self.state.panelId === panelScope.panel.id) { - self.enterFullscreen(panelScope); + if (self.state.panelId === panelScope.ctrl.panel.id) { + if (self.state.edit) { + panelScope.ctrl.editPanel(); + } else { + panelScope.ctrl.viewPanel(); + } } panelScope.$on('$destroy', function() { diff --git a/public/app/features/panel/all.js b/public/app/features/panel/all.js index ef3ea9b9b0f..ad635d83f07 100644 --- a/public/app/features/panel/all.js +++ b/public/app/features/panel/all.js @@ -6,4 +6,5 @@ define([ './solo_panel_ctrl', './panel_loader', './query_editor', + './panel_editor_tab', ], function () {}); diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts new file mode 100644 index 00000000000..896babade6d --- /dev/null +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -0,0 +1,234 @@ +/// + +import config from 'app/core/config'; +import $ from 'jquery'; +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'; + +class MetricsPanelCtrl extends PanelCtrl { + error: boolean; + loading: boolean; + datasource: any; + $q: any; + $timeout: any; + datasourceSrv: any; + timeSrv: any; + timing: any; + range: any; + rangeRaw: any; + interval: any; + resolution: any; + timeInfo: any; + skipDataOnInit: boolean; + datasources: any[]; + + constructor($scope, $injector) { + super($scope, $injector); + + // make metrics tab the default + this.editorTabIndex = 1; + this.$q = $injector.get('$q'); + this.datasourceSrv = $injector.get('datasourceSrv'); + this.timeSrv = $injector.get('timeSrv'); + + if (!this.panel.targets) { + this.panel.targets = [{}]; + } + + // hookup initial data fetch + this.$timeout(() => { + if (!this.skipDataOnInit) { + this.refresh(); + } + }, 30);; + } + + initEditMode() { + this.addEditorTab('Metrics', 'public/app/partials/metrics.html'); + this.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + this.datasources = this.datasourceSrv.getMetricSources(); + } + + refresh() { + this.getData(); + } + + refreshData(data) { + // null op + return this.$q.when(data); + } + + loadSnapshot(data) { + // null op + return data; + } + + getData() { + // ignore fetching data if another panel is in fullscreen + if (this.otherPanelInFullscreenMode()) { return; } + + // if we have snapshot data use that + if (this.panel.snapshotData) { + if (this.loadSnapshot) { + this.loadSnapshot(this.panel.snapshotData); + } + return; + } + + // clear loading/error state + delete this.error; + this.loading = true; + + // load datasource service + this.datasourceSrv.get(this.panel.datasource).then(datasource => { + this.datasource = datasource; + return this.refreshData(this.datasource); + }).then(() => { + this.loading = false; + }).catch(err => { + console.log('Panel data error:', err); + this.loading = false; + this.error = err.message || "Timeseries data request error"; + this.inspector = {error: err}; + }); + } + + setTimeQueryStart() { + this.timing = {}; + this.timing.queryStart = new Date().getTime(); + } + + setTimeQueryEnd() { + this.timing.queryEnd = new Date().getTime(); + } + + updateTimeRange() { + this.range = this.timeSrv.timeRange(); + this.rangeRaw = this.timeSrv.timeRange(false); + + this.applyPanelTimeOverrides(); + + if (this.panel.maxDataPoints) { + this.resolution = this.panel.maxDataPoints; + } else { + this.resolution = Math.ceil($(window).width() * (this.panel.span / 12)); + } + + var panelInterval = this.panel.interval; + var datasourceInterval = (this.datasource || {}).interval; + this.interval = kbn.calculateInterval(this.range, this.resolution, panelInterval || datasourceInterval); + }; + + 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; + } + } + + 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) { + if (!this.panel.targets || this.panel.targets.length === 0) { + return this.$q.when([]); + } + + this.updateTimeRange(); + + var metricsQuery = { + range: this.range, + rangeRaw: this.rangeRaw, + interval: this.interval, + targets: this.panel.targets, + format: this.panel.renderer === 'png' ? 'png' : 'json', + maxDataPoints: this.resolution, + scopedVars: this.panel.scopedVars, + cacheTimeout: this.panel.cacheTimeout + }; + + this.setTimeQueryStart(); + return datasource.query(metricsQuery).then(results => { + this.setTimeQueryEnd(); + + if (this.dashboard.snapshot) { + this.panel.snapshotData = results; + } + + return results; + }); + } + + addDataQuery(datasource) { + this.dashboard.addDataQueryTo(this.panel, datasource); + } + + removeDataQuery(query) { + this.dashboard.removeDataQuery(this.panel, query); + this.refresh(); + }; + + duplicateDataQuery(query) { + this.dashboard.duplicateDataQuery(this.panel, query); + } + + moveDataQuery(fromIndex, toIndex) { + this.dashboard.moveDataQuery(this.panel, fromIndex, toIndex); + } + + setDatasource(datasource) { + // switching to mixed + if (datasource.meta.mixed) { + _.each(this.panel.targets, target => { + target.datasource = this.panel.datasource; + if (target.datasource === null) { + target.datasource = config.defaultDatasource; + } + }); + } else if (this.datasource && this.datasource.meta.mixed) { + _.each(this.panel.targets, target => { + delete target.datasource; + }); + } + + this.panel.datasource = datasource.value; + this.datasource = null; + this.refresh(); + } +} + +export {MetricsPanelCtrl}; diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts new file mode 100644 index 00000000000..7312e18ccc7 --- /dev/null +++ b/public/app/features/panel/panel.ts @@ -0,0 +1,50 @@ +/// + +import config from 'app/core/config'; + +import {PanelCtrl} from './panel_ctrl'; +import {MetricsPanelCtrl} from './metrics_panel_ctrl'; + +export class DefaultPanelCtrl extends PanelCtrl { + constructor($scope, $injector) { + super($scope, $injector); + } +} + +class PanelDirective { + template: string; + templateUrl: string; + bindToController: boolean; + scope: any; + controller: any; + controllerAs: string; + + getDirective() { + if (!this.controller) { + this.controller = DefaultPanelCtrl; + } + + return { + template: this.template, + templateUrl: this.templateUrl, + controller: this.controller, + controllerAs: 'ctrl', + bindToController: true, + scope: {dashboard: "=", panel: "=", row: "="}, + link: (scope, elem, attrs, ctrl) => { + ctrl.init(); + this.link(scope, elem, attrs, ctrl); + } + }; + } + + link(scope, elem, attrs, ctrl) { + return null; + } +} + +export { + PanelCtrl, + MetricsPanelCtrl, + PanelDirective, +} diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts new file mode 100644 index 00000000000..1b4749fd1cf --- /dev/null +++ b/public/app/features/panel/panel_ctrl.ts @@ -0,0 +1,179 @@ +/// + +import config from 'app/core/config'; +import _ from 'lodash'; + +export class PanelCtrl { + panel: any; + row: any; + dashboard: any; + editorTabIndex: number; + pluginName: string; + pluginId: string; + icon: string; + editorTabs: any; + $scope: any; + $injector: any; + $timeout: any; + fullscreen: boolean; + inspector: any; + editModeInitiated: boolean; + editorHelpIndex: number; + + constructor($scope, $injector) { + this.$injector = $injector; + this.$scope = $scope; + this.$timeout = $injector.get('$timeout'); + this.editorTabIndex = 0; + + var plugin = config.panels[this.panel.type]; + if (plugin) { + this.pluginId = plugin.id; + this.pluginName = plugin.name; + } + + $scope.$on("refresh", () => this.refresh()); + } + + init() { + this.publishAppEvent('panel-instantiated', {scope: this.$scope}); + this.refresh(); + } + + renderingCompleted() { + this.$scope.$root.performance.panelsRendered++; + } + + refresh() { + return; + } + + publishAppEvent(evtName, evt) { + this.$scope.$root.appEvent(evtName, evt); + } + + changeView(fullscreen, edit) { + this.publishAppEvent('panel-change-view', { + fullscreen: fullscreen, edit: edit, panelId: this.panel.id + }); + } + + viewPanel() { + this.changeView(true, false); + } + + editPanel() { + if (!this.editModeInitiated) { + this.editorTabs = []; + this.addEditorTab('General', 'public/app/partials/panelgeneral.html'); + this.initEditMode(); + } + + this.changeView(true, true); + } + + exitFullscreen() { + this.changeView(false, false); + } + + initEditMode() { + return; + } + + addEditorTab(title, directiveFn, index?) { + var editorTab = {title, directiveFn}; + + if (_.isString(directiveFn)) { + editorTab.directiveFn = function() { + return {templateUrl: directiveFn}; + }; + } + if (index) { + this.editorTabs.splice(index, 0, editorTab); + } else { + this.editorTabs.push(editorTab); + } + } + + getMenu() { + let menu = []; + menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'}); + menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'}); + menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); + menu.push({text: 'Share', click: 'ctrl.sharePanel(); dismiss();'}); + return menu; + } + + getExtendedMenu() { + return [{text: 'Panel JSON', click: 'ctrl.editPanelJson(); dismiss();'}]; + } + + otherPanelInFullscreenMode() { + return this.dashboard.meta.fullscreen && !this.fullscreen; + } + + broadcastRender(arg1?, arg2?) { + this.$scope.$broadcast('render', arg1, arg2); + } + + toggleEditorHelp(index) { + if (this.editorHelpIndex === index) { + this.editorHelpIndex = null; + return; + } + this.editorHelpIndex = index; + } + + duplicate() { + this.dashboard.duplicatePanel(this.panel, this.row); + } + + updateColumnSpan(span) { + this.panel.span = Math.min(Math.max(Math.floor(this.panel.span + span), 1), 12); + this.$timeout(() => { + this.broadcastRender(); + }); + } + + removePanel() { + this.publishAppEvent('confirm-modal', { + title: 'Are you sure you want to remove this panel?', + icon: 'fa-trash', + yesText: 'Delete', + onConfirm: () => { + this.row.panels = _.without(this.row.panels, this.panel); + } + }); + } + + editPanelJson() { + this.publishAppEvent('show-json-editor', { + object: this.panel, + updateHandler: this.replacePanel.bind(this) + }); + } + + replacePanel(newPanel, oldPanel) { + var row = this.row; + var index = _.indexOf(this.row.panels, oldPanel); + this.row.panels.splice(index, 1); + + // adding it back needs to be done in next digest + this.$timeout(() => { + newPanel.id = oldPanel.id; + newPanel.span = oldPanel.span; + this.row.panels.splice(index, 0, newPanel); + }); + } + + sharePanel() { + var shareScope = this.$scope.$new(); + shareScope.panel = this.panel; + shareScope.dashboard = this.dashboard; + + this.publishAppEvent('show-modal', { + src: './app/features/dashboard/partials/shareModal.html', + scope: shareScope + }); + } +} diff --git a/public/app/features/panel/panel_directive.js b/public/app/features/panel/panel_directive.js index b4c1a2d6a0f..ffe978a55ad 100644 --- a/public/app/features/panel/panel_directive.js +++ b/public/app/features/panel/panel_directive.js @@ -12,12 +12,13 @@ function (angular, $) { restrict: 'E', templateUrl: 'app/features/panel/partials/panel.html', transclude: true, + scope: { ctrl: "=" }, link: function(scope, elem) { var panelContainer = elem.find('.panel-container'); - - scope.$watchGroup(['fullscreen', 'height', 'panel.height', 'row.height'], function() { - panelContainer.css({ minHeight: scope.height || scope.panel.height || scope.row.height, display: 'block' }); - elem.toggleClass('panel-fullscreen', scope.fullscreen ? true : false); + var ctrl = scope.ctrl; + scope.$watchGroup(['ctrl.fullscreen', 'ctrl.height', 'ctrl.panel.height', 'ctrl.row.height'], function() { + panelContainer.css({ minHeight: ctrl.height || ctrl.panel.height || ctrl.row.height, display: 'block' }); + elem.toggleClass('panel-fullscreen', ctrl.fullscreen ? true : false); }); } }; @@ -30,6 +31,7 @@ function (angular, $) { link: function(scope, elem) { var resizing = false; var lastPanel = false; + var ctrl = scope.ctrl; var handleOffset; var originalHeight; var originalWidth; @@ -40,31 +42,31 @@ function (angular, $) { resizing = true; handleOffset = $(e.target).offset(); - originalHeight = parseInt(scope.row.height); - originalWidth = scope.panel.span; + originalHeight = parseInt(ctrl.row.height); + originalWidth = ctrl.panel.span; maxWidth = $(document).width(); - lastPanel = scope.row.panels[scope.row.panels.length - 1]; + lastPanel = ctrl.row.panels[ctrl.row.panels.length - 1]; $('body').on('mousemove', moveHandler); $('body').on('mouseup', dragEndHandler); } function moveHandler(e) { - scope.row.height = originalHeight + (e.pageY - handleOffset.top); - scope.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12); - scope.panel.span = Math.min(Math.max(scope.panel.span, 1), 12); + ctrl.row.height = originalHeight + (e.pageY - handleOffset.top); + ctrl.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12); + ctrl.panel.span = Math.min(Math.max(ctrl.panel.span, 1), 12); - var rowSpan = scope.dashboard.rowSpan(scope.row); + var rowSpan = ctrl.dashboard.rowSpan(ctrl.row); // auto adjust other panels if (Math.floor(rowSpan) < 14) { // last panel should not push row down - if (lastPanel === scope.panel && rowSpan > 12) { + if (lastPanel === ctrl.panel && rowSpan > 12) { lastPanel.span -= rowSpan - 12; } // reduce width of last panel so total in row is 12 - else if (lastPanel !== scope.panel) { + else if (lastPanel !== ctrl.panel) { lastPanel.span = lastPanel.span - (rowSpan - 12); lastPanel.span = Math.min(Math.max(lastPanel.span, 1), 12); } @@ -77,7 +79,7 @@ function (angular, $) { function dragEndHandler() { // if close to 12 - var rowSpan = scope.dashboard.rowSpan(scope.row); + var rowSpan = ctrl.dashboard.rowSpan(ctrl.row); if (rowSpan < 12 && rowSpan > 11) { lastPanel.span += 12 - rowSpan; } diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts new file mode 100644 index 00000000000..f6c11306678 --- /dev/null +++ b/public/app/features/panel/panel_editor_tab.ts @@ -0,0 +1,28 @@ +/// + +import angular from 'angular'; +import config from 'app/core/config'; + +var directiveModule = angular.module('grafana.directives'); + +/** @ngInject */ +function panelEditorTab(dynamicDirectiveSrv) { + return dynamicDirectiveSrv.create({ + scope: { + ctrl: "=", + editorTab: "=", + index: "=", + }, + directive: scope => { + var pluginId = scope.ctrl.pluginId; + var tabIndex = scope.index; + + return Promise.resolve({ + name: `panel-editor-tab-${pluginId}${tabIndex}`, + fn: scope.editorTab.directiveFn, + }); + } + }); +} + +directiveModule.directive('panelEditorTab', panelEditorTab); diff --git a/public/app/features/panel/panel_loader.ts b/public/app/features/panel/panel_loader.ts index 8dc46f494a1..73b154e8840 100644 --- a/public/app/features/panel/panel_loader.ts +++ b/public/app/features/panel/panel_loader.ts @@ -3,28 +3,82 @@ import angular from 'angular'; import config from 'app/core/config'; -import {unknownPanelDirective} from '../../plugins/panel/unknown/module'; +import {UnknownPanel} from '../../plugins/panel/unknown/module'; + +var directiveModule = angular.module('grafana.directives'); /** @ngInject */ -function panelLoader($parse, dynamicDirectiveSrv) { - return dynamicDirectiveSrv.create({ - directive: scope => { - let panelInfo = config.panels[scope.panel.type]; - if (!panelInfo) { - return Promise.resolve({ - name: 'panel-directive-' + scope.panel.type, - fn: unknownPanelDirective +function panelLoader($compile, dynamicDirectiveSrv, $http, $q, $injector) { + return { + restrict: 'E', + scope: { + dashboard: "=", + row: "=", + panel: "=" + }, + link: function(scope, elem, attrs) { + + function getTemplate(directive) { + if (directive.template) { + return $q.when(directive.template); + } + return $http.get(directive.templateUrl).then(res => { + return res.data; }); } - return System.import(panelInfo.module).then(function(panelModule) { - return { - name: 'panel-directive-' + scope.panel.type, - fn: panelModule.panel, - }; + function addPanelAndCompile(name) { + var child = angular.element(document.createElement(name)); + child.attr('dashboard', 'dashboard'); + child.attr('panel', 'panel'); + child.attr('row', 'row'); + $compile(child)(scope); + + elem.empty(); + elem.append(child); + } + + function addPanel(name, Panel) { + if (Panel.registered) { + addPanelAndCompile(name); + return; + } + + if (Panel.promise) { + Panel.promise.then(() => { + addPanelAndCompile(name); + }); + return; + } + + var panelInstance = $injector.instantiate(Panel); + var directive = panelInstance.getDirective(); + + Panel.promise = getTemplate(directive).then(template => { + directive.templateUrl = null; + directive.template = `${template}`; + directiveModule.directive(attrs.$normalize(name), function() { + return directive; + }); + Panel.registered = true; + addPanelAndCompile(name); + }); + } + + var panelElemName = 'panel-directive-' + scope.panel.type; + let panelInfo = config.panels[scope.panel.type]; + if (!panelInfo) { + addPanel(panelElemName, UnknownPanel); + return; + } + + System.import(panelInfo.module).then(function(panelModule) { + addPanel(panelElemName, panelModule.Panel); + }).catch(err => { + console.log('Panel err: ', err); }); - }, - }); + } + }; } -angular.module('grafana.directives').directive('panelLoader', panelLoader); +directiveModule.directive('panelLoader', panelLoader); diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 9af81943df3..c0cf8e77f02 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -11,32 +11,32 @@ function (angular, $, _) { .directive('panelMenu', function($compile, linkSrv) { var linkTemplate = '' + - '{{panel.title | interpolateTemplateVars:this}}' + - '' + - ' {{panelMeta.timeInfo}}' + + '{{ctrl.panel.title | interpolateTemplateVars:this}}' + + '' + + ' {{ctrl.timeInfo}}' + ''; - function createExternalLinkMenu($scope) { + function createExternalLinkMenu(ctrl) { var template = '
'; template += '
'; - if ($scope.panel.links) { - _.each($scope.panel.links, function(link) { - var info = linkSrv.getPanelLinkAnchorInfo(link, $scope.panel.scopedVars); + if (ctrl.panel.links) { + _.each(ctrl.panel.links, function(link) { + var info = linkSrv.getPanelLinkAnchorInfo(link, ctrl.panel.scopedVars); template += '' + info.title + ''; }); } return template; } - function createMenuTemplate($scope) { + function createMenuTemplate(ctrl) { var template = '
'; - if ($scope.dashboardMeta.canEdit) { + if (ctrl.dashboard.meta.canEdit) { template += '
'; template += '
'; - template += ''; - template += ''; - template += ''; + template += ''; + template += ''; + template += ''; template += '
'; template += '
'; } @@ -44,9 +44,9 @@ function (angular, $, _) { template += '
'; template += ''; - _.each($scope.panelMeta.menu, function(item) { + _.each(ctrl.getMenu(), function(item) { // skip edit actions if not editor - if (item.role === 'Editor' && !$scope.dashboardMeta.canEdit) { + if (item.role === 'Editor' && !ctrl.dashboard.meta.canEdit) { return; } @@ -63,8 +63,8 @@ function (angular, $, _) { return template; } - function getExtendedMenu($scope) { - return angular.copy($scope.panelMeta.extendedMenu); + function getExtendedMenu(ctrl) { + return ctrl.getExtendedMenu(); } return { @@ -74,13 +74,14 @@ function (angular, $, _) { var $panelLinksBtn = $link.find(".panel-links-btn"); var $panelContainer = elem.parents(".panel-container"); var menuScope = null; + var ctrl = $scope.ctrl; var timeout = null; var $menu = null; elem.append($link); - $scope.$watchCollection('panel.links', function(newValue) { - var showIcon = (newValue ? newValue.length > 0 : false) && $scope.panel.title !== ''; + $scope.$watchCollection('ctrl.panel.links', function(newValue) { + var showIcon = (newValue ? newValue.length > 0 : false) && ctrl.panel.title !== ''; $panelLinksBtn.toggle(showIcon); }); @@ -95,7 +96,7 @@ function (angular, $, _) { // if hovering or draging pospone close if (force !== true) { - if ($menu.is(':hover') || $scope.dashboard.$$panelDragging) { + if ($menu.is(':hover') || $scope.ctrl.dashboard.$$panelDragging) { dismiss(2200); return; } @@ -126,7 +127,7 @@ function (angular, $, _) { if ($(e.target).hasClass('fa-link')) { menuTemplate = createExternalLinkMenu($scope); } else { - menuTemplate = createMenuTemplate($scope); + menuTemplate = createMenuTemplate(ctrl); } $menu = $(menuTemplate); @@ -135,7 +136,7 @@ function (angular, $, _) { }); menuScope = $scope.$new(); - menuScope.extendedMenu = getExtendedMenu($scope); + menuScope.extendedMenu = getExtendedMenu(ctrl); menuScope.dismiss = function() { dismiss(null, true); }; diff --git a/public/app/features/panel/panel_meta.js b/public/app/features/panel/panel_meta.js deleted file mode 100644 index c110d948e08..00000000000 --- a/public/app/features/panel/panel_meta.js +++ /dev/null @@ -1,7 +0,0 @@ -define([ - './panel_meta2', -], -function (panelMeta) { - 'use strict'; - return panelMeta.default; -}); diff --git a/public/app/features/panel/panel_meta2.ts b/public/app/features/panel/panel_meta2.ts deleted file mode 100644 index ca276f9377b..00000000000 --- a/public/app/features/panel/panel_meta2.ts +++ /dev/null @@ -1,48 +0,0 @@ -export default class PanelMeta { - description: any; - fullscreen: any; - editIcon: any; - panelName: any; - menu: any; - editorTabs: any; - extendedMenu: any; - - constructor(options: any) { - this.description = options.description; - this.fullscreen = options.fullscreen; - this.editIcon = options.editIcon; - this.panelName = options.panelName; - this.menu = []; - this.editorTabs = []; - this.extendedMenu = []; - - if (options.fullscreen) { - this.addMenuItem('View', 'icon-eye-open', 'toggleFullscreen(false); dismiss();'); - } - - this.addMenuItem('Edit', 'icon-cog', 'editPanel(); dismiss();', 'Editor'); - this.addMenuItem('Duplicate', 'icon-copy', 'duplicatePanel()', 'Editor'); - this.addMenuItem('Share', 'icon-share', 'sharePanel(); dismiss();'); - - this.addEditorTab('General', 'app/partials/panelgeneral.html'); - - if (options.metricsEditor) { - this.addEditorTab('Metrics', 'app/partials/metrics.html'); - } - - this.addExtendedMenuItem('Panel JSON', '', 'editPanelJson(); dismiss();'); - } - - addMenuItem (text, icon, click, role?) { - this.menu.push({text: text, icon: icon, click: click, role: role}); - } - - addExtendedMenuItem (text, icon, click, role?) { - this.extendedMenu.push({text: text, icon: icon, click: click, role: role}); - } - - addEditorTab (title, src) { - this.editorTabs.push({title: title, src: src}); - } -} - diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index a7fef0f5d67..13c2178e0b4 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -1,12 +1,12 @@ -
+
- - + + - + @@ -19,27 +19,27 @@
-
+
- - {{panelMeta.panelName}} + + {{ctrl.name}}
-
-
+
+
-
-
-
+
+
diff --git a/public/app/features/panel/partials/panelTime.html b/public/app/features/panel/partials/panelTime.html index 04954108aca..4e7c7c7259c 100644 --- a/public/app/features/panel/partials/panelTime.html +++ b/public/app/features/panel/partials/panelTime.html @@ -13,8 +13,8 @@
  • + empty-to-null ng-model="ctrl.panel.timeFrom" valid-time-span + ng-change="ctrl.refresh()" ng-model-onblur>
    • @@ -32,8 +32,8 @@
  • + empty-to-null ng-model="ctrl.panel.timeShift" valid-time-span + ng-change="ctrl.refresh()" ng-model-onblur>
    • @@ -47,9 +47,9 @@ Hide time override info
  • - - + +
    • diff --git a/public/app/features/panel/partials/soloPanel.html b/public/app/features/panel/partials/soloPanel.html index b040bf8dc72..d2a4f38844f 100644 --- a/public/app/features/panel/partials/soloPanel.html +++ b/public/app/features/panel/partials/soloPanel.html @@ -2,7 +2,8 @@
    - + +
    diff --git a/public/app/features/panel/query_editor.ts b/public/app/features/panel/query_editor.ts index 01beceaee99..7a5c6126740 100644 --- a/public/app/features/panel/query_editor.ts +++ b/public/app/features/panel/query_editor.ts @@ -5,9 +5,9 @@ import angular from 'angular'; /** @ngInject */ function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) { return dynamicDirectiveSrv.create({ - watchPath: "panel.datasource", + watchPath: "ctrl.panel.datasource", directive: scope => { - let datasource = scope.target.datasource || scope.panel.datasource; + let datasource = scope.target.datasource || scope.ctrl.panel.datasource; return datasourceSrv.get(datasource).then(ds => { scope.datasource = ds; @@ -29,9 +29,9 @@ function metricsQueryEditor(dynamicDirectiveSrv, datasourceSrv) { /** @ngInject */ function metricsQueryOptions(dynamicDirectiveSrv, datasourceSrv) { return dynamicDirectiveSrv.create({ - watchPath: "panel.datasource", + watchPath: "ctrl.panel.datasource", directive: scope => { - return datasourceSrv.get(scope.panel.datasource).then(ds => { + return datasourceSrv.get(scope.ctrl.panel.datasource).then(ds => { return System.import(ds.meta.module).then(dsModule => { return { name: 'metrics-query-options-' + ds.meta.id, diff --git a/public/app/features/panel/solo_panel_ctrl.js b/public/app/features/panel/solo_panel_ctrl.js index c51f9c61a9d..313c2014de2 100644 --- a/public/app/features/panel/solo_panel_ctrl.js +++ b/public/app/features/panel/solo_panel_ctrl.js @@ -39,13 +39,8 @@ function (angular, $) { } $scope.panel.span = 12; - $scope.dashboardViewState = {registerPanel: function() { }, state: {}}; }; - if (!$scope.skipAutoInit) { - $scope.init(); - } - + $scope.init(); }); - }); diff --git a/public/app/headers/common.d.ts b/public/app/headers/common.d.ts index f88ed4fcee0..b66ba845827 100644 --- a/public/app/headers/common.d.ts +++ b/public/app/headers/common.d.ts @@ -5,7 +5,7 @@ declare var System: any; // dummy modules declare module 'app/core/config' { - var config : any; + var config: any; export default config; } @@ -35,7 +35,7 @@ declare module 'app/core/utils/kbn' { } declare module 'app/core/store' { - var store : any; + var store: any; export default store; } diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index dd57c2f8e9b..3e60b2542e9 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -23,7 +23,7 @@
    -
    +
    @@ -79,9 +79,10 @@
    -
    - +
    + +
    @@ -97,7 +98,7 @@
    -
    +
    ADD ROW diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index b5ff9f50327..8a7eb1bfd71 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -1,25 +1,25 @@
    - +
    - -
    +
    @@ -34,12 +34,12 @@
    diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 09ccbe86dfa..b8823e5658a 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -7,23 +7,23 @@ Title
  • - +
  • Span
  • - +
  • Height
  • - +
  • - +
    • @@ -38,7 +38,7 @@ Repeat Panel
  • -
    • @@ -46,7 +46,7 @@ Min span
  • -
    • @@ -56,6 +56,6 @@
    - + diff --git a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html index 09ac6279c12..fa5e74c33c2 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html +++ b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html @@ -6,14 +6,14 @@
  • - +
    • @@ -25,7 +25,7 @@
  • @@ -35,4 +35,4 @@
    • - + diff --git a/public/app/plugins/datasource/cloudwatch/query_ctrl.js b/public/app/plugins/datasource/cloudwatch/query_ctrl.js index e24b73cd068..927c08b3f2d 100644 --- a/public/app/plugins/datasource/cloudwatch/query_ctrl.js +++ b/public/app/plugins/datasource/cloudwatch/query_ctrl.js @@ -16,7 +16,7 @@ function (angular, _) { $scope.refreshMetricData = function() { if (!_.isEqual($scope.oldTarget, $scope.target)) { $scope.oldTarget = angular.copy($scope.target); - $scope.get_data(); + $scope.ctrl.refresh(); } }; diff --git a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html index 99c6aed9aa7..bbf5964b220 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/query.editor.html +++ b/public/app/plugins/datasource/elasticsearch/partials/query.editor.html @@ -14,15 +14,15 @@
  • - +
    • @@ -33,7 +33,7 @@ {{target.refId}}
  • - +
    • @@ -44,13 +44,13 @@ Query
  • - +
  • Alias
  • - +
    • diff --git a/public/app/plugins/datasource/elasticsearch/partials/query.options.html b/public/app/plugins/datasource/elasticsearch/partials/query.options.html index eb6c6ff55fb..628a0a0bf3d 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/query.options.html +++ b/public/app/plugins/datasource/elasticsearch/partials/query.options.html @@ -8,7 +8,7 @@ Group by time interval
  • -
  • @@ -23,7 +23,7 @@
  • - + alias patterns
    • @@ -34,7 +34,7 @@
    -
    +
    Alias patterns
    • {{term fieldname}} = replaced with value of term group by
      • diff --git a/public/app/plugins/datasource/elasticsearch/query_ctrl.js b/public/app/plugins/datasource/elasticsearch/query_ctrl.js index b222733e29d..90214dff17c 100644 --- a/public/app/plugins/datasource/elasticsearch/query_ctrl.js +++ b/public/app/plugins/datasource/elasticsearch/query_ctrl.js @@ -6,8 +6,9 @@ function (angular) { var module = angular.module('grafana.controllers'); - module.controller('ElasticQueryCtrl', function($scope, $timeout, uiSegmentSrv) { + module.controller('ElasticQueryCtrl', function($scope, $rootScope, $timeout, uiSegmentSrv) { $scope.esVersion = $scope.datasource.esVersion; + $scope.panelCtrl = $scope.ctrl; $scope.init = function() { var target = $scope.target; @@ -27,10 +28,10 @@ function (angular) { var newJson = angular.toJson($scope.datasource.queryBuilder.build($scope.target), true); if (newJson !== $scope.oldQueryRaw) { $scope.rawQueryOld = newJson; - $scope.get_data(); + $scope.panelCtrl.refresh(); } - $scope.appEvent('elastic-query-updated'); + $rootScope.appEvent('elastic-query-updated'); }; $scope.handleQueryError = function(err) { diff --git a/public/app/plugins/datasource/graphite/module.js b/public/app/plugins/datasource/graphite/module.js index 6d7592c421c..602dbb9cae8 100644 --- a/public/app/plugins/datasource/graphite/module.js +++ b/public/app/plugins/datasource/graphite/module.js @@ -5,7 +5,10 @@ function (GraphiteDatasource) { 'use strict'; function metricsQueryEditor() { - return {controller: 'GraphiteQueryCtrl', templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html'}; + return { + controller: 'GraphiteQueryCtrl', + templateUrl: 'app/plugins/datasource/graphite/partials/query.editor.html' + }; } function metricsQueryOptions() { diff --git a/public/app/plugins/datasource/graphite/partials/query.editor.html b/public/app/plugins/datasource/graphite/partials/query.editor.html index 4e671354079..9cb2b454132 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -25,19 +25,19 @@
    • - Duplicate + Duplicate
    • - Move up + Move up
    • - Move down + Move down
  • - +
    • @@ -48,14 +48,14 @@ {{target.refId}}
  • - +
    • - +
    - +
    @@ -88,7 +88,7 @@ GROUP BY
  • - +
  • @@ -104,13 +104,13 @@ ALIAS BY
  • - +
  • Format as
  • - +
    • diff --git a/public/app/plugins/datasource/influxdb/partials/query.options.html b/public/app/plugins/datasource/influxdb/partials/query.options.html index 3218cdae5fb..dd6c7accd28 100644 --- a/public/app/plugins/datasource/influxdb/partials/query.options.html +++ b/public/app/plugins/datasource/influxdb/partials/query.options.html @@ -8,7 +8,7 @@ Group by time interval
  • -
  • @@ -24,17 +24,17 @@
  • - + alias patterns
  • - + stacking & and fill
  • - + group by time
    • @@ -46,7 +46,7 @@
    -
    +
    Alias patterns
    • $m = replaced with measurement name
      • @@ -58,7 +58,7 @@
    -
    +
    Stacking and fill
    • When stacking is enabled it important that points align
      • @@ -69,7 +69,7 @@
    -
    +
    Group by time
    • Group by time is important, otherwise the query could return many thousands of datapoints that will slow down Grafana
      • @@ -80,8 +80,6 @@
    • Example: >60s if you write metrics to InfluxDB every 60 seconds
    - -
    diff --git a/public/app/plugins/datasource/influxdb/query_ctrl.js b/public/app/plugins/datasource/influxdb/query_ctrl.js index adb0acb2218..fee1d5d1c77 100644 --- a/public/app/plugins/datasource/influxdb/query_ctrl.js +++ b/public/app/plugins/datasource/influxdb/query_ctrl.js @@ -15,13 +15,16 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { queryPart = queryPart.default; module.controller('InfluxQueryCtrl', function($scope, templateSrv, $q, uiSegmentSrv) { + var panelCtrl = $scope.ctrl; + var datasource = $scope.datasource; + $scope.panelCtrl = panelCtrl; $scope.init = function() { if (!$scope.target) { return; } $scope.target = $scope.target; $scope.queryModel = new InfluxQuery($scope.target); - $scope.queryBuilder = new InfluxQueryBuilder($scope.target, $scope.datasource.database); + $scope.queryBuilder = new InfluxQueryBuilder($scope.target, datasource.database); $scope.groupBySegment = uiSegmentSrv.newPlusButton(); $scope.resultFormats = [ {text: 'Time series', value: 'time_series'}, @@ -75,7 +78,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { $scope.getGroupByOptions = function() { var query = $scope.queryBuilder.buildExploreQuery('TAG_KEYS'); - return $scope.datasource.metricFindQuery(query) + return datasource.metricFindQuery(query) .then(function(tags) { var options = []; if (!$scope.queryModel.hasFill()) { @@ -97,26 +100,26 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { var plusButton = uiSegmentSrv.newPlusButton(); $scope.groupBySegment.value = plusButton.value; $scope.groupBySegment.html = plusButton.html; - $scope.get_data(); + panelCtrl.refresh(); }; $scope.removeGroupByPart = function(part, index) { $scope.queryModel.removeGroupByPart(part, index); - $scope.get_data(); + panelCtrl.refresh(); }; $scope.addSelectPart = function(selectParts, cat, subitem) { $scope.queryModel.addSelectPart(selectParts, subitem.value); - $scope.get_data(); + panelCtrl.refresh(); }; $scope.removeSelectPart = function(selectParts, part) { $scope.queryModel.removeSelectPart(selectParts, part); - $scope.get_data(); + panelCtrl.refresh(); }; $scope.selectPartUpdated = function() { - $scope.get_data(); + panelCtrl.refresh(); }; $scope.fixTagSegments = function() { @@ -130,19 +133,19 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { $scope.measurementChanged = function() { $scope.target.measurement = $scope.measurementSegment.value; - $scope.get_data(); + panelCtrl.refresh(); }; $scope.getPolicySegments = function() { var policiesQuery = $scope.queryBuilder.buildExploreQuery('RETENTION POLICIES'); - return $scope.datasource.metricFindQuery(policiesQuery) + return datasource.metricFindQuery(policiesQuery) .then($scope.transformToSegments(false)) .then(null, $scope.handleQueryError); }; $scope.policyChanged = function() { $scope.target.policy = $scope.policySegment.value; - $scope.get_data(); + panelCtrl.refresh(); }; $scope.toggleQueryMode = function () { @@ -151,19 +154,19 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { $scope.getMeasurements = function () { var query = $scope.queryBuilder.buildExploreQuery('MEASUREMENTS'); - return $scope.datasource.metricFindQuery(query) + return datasource.metricFindQuery(query) .then($scope.transformToSegments(true), $scope.handleQueryError); }; $scope.getPartOptions = function(part) { if (part.def.type === 'field') { var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS'); - return $scope.datasource.metricFindQuery(fieldsQuery) + return datasource.metricFindQuery(fieldsQuery) .then($scope.transformToSegments(true), $scope.handleQueryError); } if (part.def.type === 'tag') { var tagsQuery = $scope.queryBuilder.buildExploreQuery('TAG_KEYS'); - return $scope.datasource.metricFindQuery(tagsQuery) + return datasource.metricFindQuery(tagsQuery) .then($scope.transformToSegments(true), $scope.handleQueryError); } }; @@ -211,7 +214,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { addTemplateVars = true; } - return $scope.datasource.metricFindQuery(query) + return datasource.metricFindQuery(query) .then($scope.transformToSegments(addTemplateVars)) .then(function(results) { if (segment.type === 'key') { @@ -224,7 +227,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { $scope.getFieldSegments = function() { var fieldsQuery = $scope.queryBuilder.buildExploreQuery('FIELDS'); - return $scope.datasource.metricFindQuery(fieldsQuery) + return datasource.metricFindQuery(fieldsQuery) .then($scope.transformToSegments(false)) .then(null, $scope.handleQueryError); }; @@ -234,7 +237,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { $scope.setFill = function(fill) { $scope.target.fill = fill; - $scope.get_data(); + panelCtrl.refresh(); }; $scope.tagSegmentUpdated = function(segment, index) { @@ -300,7 +303,7 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) { }); $scope.target.tags = tags; - $scope.$parent.get_data(); + panelCtrl.refresh(); }; $scope.getTagValueOperator = function(tagValue, tagOperator) { diff --git a/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts b/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts index 94d58adf8a0..778f08e1352 100644 --- a/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts +++ b/public/app/plugins/datasource/influxdb/specs/query_ctrl_specs.ts @@ -10,14 +10,20 @@ describe('InfluxDBQueryCtrl', function() { beforeEach(angularMocks.module('grafana.controllers')); beforeEach(angularMocks.module('grafana.services')); beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('InfluxQueryCtrl')); + + beforeEach(angularMocks.inject(($rootScope, $controller, $q) => { + ctx.$q = $q; + ctx.scope = $rootScope.$new(); + ctx.scope.ctrl = {panel: ctx.panel}; + ctx.scope.datasource = ctx.datasource; + ctx.scope.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([])); + ctx.panelCtrl = ctx.scope.ctrl; + ctx.controller = $controller('InfluxQueryCtrl', {$scope: ctx.scope}); + })); beforeEach(function() { ctx.scope.target = {}; - ctx.scope.$parent = { get_data: sinon.spy() }; - - ctx.scope.datasource = ctx.datasource; - ctx.scope.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when([])); + ctx.panelCtrl.refresh = sinon.spy(); }); describe('init', function() { diff --git a/public/app/plugins/datasource/opentsdb/partials/query.editor.html b/public/app/plugins/datasource/opentsdb/partials/query.editor.html index fffa7194228..e27f068032f 100644 --- a/public/app/plugins/datasource/opentsdb/partials/query.editor.html +++ b/public/app/plugins/datasource/opentsdb/partials/query.editor.html @@ -9,15 +9,14 @@
  • - +
    • @@ -29,7 +28,7 @@
  • diff --git a/public/app/plugins/datasource/opentsdb/queryCtrl.js b/public/app/plugins/datasource/opentsdb/queryCtrl.js index 14d28c310c2..04259382390 100644 --- a/public/app/plugins/datasource/opentsdb/queryCtrl.js +++ b/public/app/plugins/datasource/opentsdb/queryCtrl.js @@ -9,6 +9,7 @@ function (angular, _, kbn) { var module = angular.module('grafana.controllers'); module.controller('OpenTSDBQueryCtrl', function($scope) { + $scope.panelCtrl = $scope.ctrl; $scope.init = function() { $scope.target.errors = validateTarget($scope.target); diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index 75c432862ad..4ad94d022eb 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -9,15 +9,14 @@
  • - +
    • @@ -29,7 +28,7 @@
  • diff --git a/public/app/plugins/datasource/prometheus/query_ctrl.js b/public/app/plugins/datasource/prometheus/query_ctrl.js index 83d92ae74a2..b78152c62d0 100644 --- a/public/app/plugins/datasource/prometheus/query_ctrl.js +++ b/public/app/plugins/datasource/prometheus/query_ctrl.js @@ -8,6 +8,8 @@ function (angular, _) { var module = angular.module('grafana.controllers'); module.controller('PrometheusQueryCtrl', function($scope, templateSrv) { + $scope.panelCtrl = $scope.ctrl; + $scope.panel = $scope.panelCtrl.panel; $scope.init = function() { var target = $scope.target; @@ -29,7 +31,7 @@ function (angular, _) { $scope.refreshMetricData = function() { if (!_.isEqual($scope.oldTarget, $scope.target)) { $scope.oldTarget = angular.copy($scope.target); - $scope.get_data(); + $scope.paneCtrl.refresh(); } }; diff --git a/public/app/plugins/panel/dashlist/editor.html b/public/app/plugins/panel/dashlist/editor.html index 1a0ba518c01..c3b99faa369 100644 --- a/public/app/plugins/panel/dashlist/editor.html +++ b/public/app/plugins/panel/dashlist/editor.html @@ -7,13 +7,13 @@ Mode
  • - +
    • -
    +
    • @@ -24,13 +24,13 @@
    • + ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
    • Tags
    • - +
    @@ -47,7 +47,7 @@ Limit number to
  • - +
    • diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index de0e23a9ea5..455291409d5 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,6 +1,5 @@ - -
    -
    +
    +
    {{dash.title}} @@ -10,4 +9,4 @@
    - +
    diff --git a/public/app/plugins/panel/dashlist/module.js b/public/app/plugins/panel/dashlist/module.js deleted file mode 100644 index 8ffee99ab2c..00000000000 --- a/public/app/plugins/panel/dashlist/module.js +++ /dev/null @@ -1,82 +0,0 @@ -define([ - 'angular', - 'app/app', - 'lodash', - 'app/core/config', - 'app/features/panel/panel_meta', -], -function (angular, app, _, config, PanelMeta) { - 'use strict'; - - var module = angular.module('grafana.panels.dashlist', []); - app.useModule(module); - - /** @ngInject */ - function DashListPanelCtrl($scope, panelSrv, backendSrv) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Dashboard list', - editIcon: "fa fa-star", - fullscreen: true, - }); - - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/dashlist/editor.html'); - - var defaults = { - mode: 'starred', - query: '', - limit: 10, - tags: [] - }; - - $scope.modes = ['starred', 'search']; - - _.defaults($scope.panel, defaults); - - $scope.dashList = []; - - $scope.init = function() { - panelSrv.init($scope); - - if ($scope.panel.tag) { - $scope.panel.tags = [$scope.panel.tag]; - delete $scope.panel.tag; - } - - if ($scope.isNewPanel()) { - $scope.panel.title = "Starred Dashboards"; - } - }; - - $scope.refreshData = function() { - var params = { - limit: $scope.panel.limit - }; - - if ($scope.panel.mode === 'starred') { - params.starred = "true"; - } else { - params.query = $scope.panel.query; - params.tag = $scope.panel.tags; - } - - return backendSrv.search(params).then(function(result) { - $scope.dashList = result; - $scope.panelRenderingComplete(); - }); - }; - - $scope.init(); - } - - function dashListPanelDirective() { - return { - controller: DashListPanelCtrl, - templateUrl: 'app/plugins/panel/dashlist/module.html', - }; - } - - return { - panel: dashListPanelDirective - }; -}); diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts new file mode 100644 index 00000000000..d64174d77ff --- /dev/null +++ b/public/app/plugins/panel/dashlist/module.ts @@ -0,0 +1,63 @@ +/// + +import _ from 'lodash'; +import config from 'app/core/config'; +import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; + + // Set and populate defaults +var panelDefaults = { + mode: 'starred', + query: '', + limit: 10, + tags: [] +}; + +class DashListCtrl extends PanelCtrl { + dashList: any[]; + modes: any[]; + + /** @ngInject */ + constructor($scope, $injector, private backendSrv) { + super($scope, $injector); + _.defaults(this.panel, panelDefaults); + + if (this.panel.tag) { + this.panel.tags = [$scope.panel.tag]; + delete this.panel.tag; + } + } + + initEditMode() { + this.modes = ['starred', 'search']; + this.icon = "fa fa-star"; + this.addEditorTab('Options', () => { + return {templateUrl: 'app/plugins/panel/dashlist/editor.html'}; + }); + } + + refresh() { + var params: any = {limit: this.panel.limit}; + + if (this.panel.mode === 'starred') { + params.starred = "true"; + } else { + params.query = this.panel.query; + params.tag = this.panel.tags; + } + + return this.backendSrv.search(params).then(result => { + this.dashList = result; + this.renderingCompleted(); + }); + } +} + +class DashListPanel extends PanelDirective { + controller = DashListCtrl; + templateUrl = 'public/app/plugins/panel/dashlist/module.html'; +} + +export { + DashListCtrl, + DashListPanel as Panel +} diff --git a/public/app/plugins/panel/graph/axisEditor.html b/public/app/plugins/panel/graph/axisEditor.html index 13bc78b7dfe..b1d6d9753c0 100644 --- a/public/app/plugins/panel/graph/axisEditor.html +++ b/public/app/plugins/panel/graph/axisEditor.html @@ -10,22 +10,22 @@ Unit
  • + ng-model="ctrl.panel.y_formats[0]" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)">
  • Scale type
  • - +
  • Label
  • + ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -40,16 +40,16 @@
  • + empty-to-null ng-model="ctrl.panel.grid.leftMax" + ng-change="ctrl.render()" ng-model-onblur>
  • Y-Min
  • + empty-to-null ng-model="ctrl.panel.grid.leftMin" + ng-change="ctrl.render()" ng-model-onblur>
    • @@ -63,22 +63,22 @@ Unit
  • + ng-model="ctrl.panel.y_formats[1]" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)">
  • Scale type
  • - +
  • Label
  • + ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -93,16 +93,16 @@
  • + empty-to-null ng-model="ctrl.panel.grid.rightMax" + ng-change="ctrl.render()" ng-model-onblur>
  • Y-Min
  • + empty-to-null ng-model="ctrl.panel.grid.rightMin" + ng-change="ctrl.render()" ng-model-onblur>
    • @@ -119,13 +119,13 @@
  • X-Axis  + ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
  • Y-Axis  + ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
    • @@ -141,23 +141,23 @@
  • + ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
  • - +
  • Level 2
  • + ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
  • - +
  • - +
    • @@ -173,20 +173,20 @@ Legend
  • - +
  • - +
  • - +
  • Side width
  • + ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -197,10 +197,10 @@ Hide series
  • - +
  • - +
    • @@ -212,26 +212,26 @@ Values
  • - +
  • - +
  • - +
  • - +
  • - +
  • Decimals
  • + ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
    • diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 257ddb875b1..2a9434a76c8 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -24,14 +24,16 @@ function (angular, $, moment, _, kbn, GraphTooltip) { restrict: 'A', template: '
    ', link: function(scope, elem) { - var dashboard = scope.dashboard; + var ctrl = scope.ctrl; + var dashboard = ctrl.dashboard; + var panel = ctrl.panel; var data, annotations; var sortedSeries; var graphHeight; var legendSideLastValue = null; - scope.crosshairEmiter = false; + var rootScope = scope.$root; - scope.onAppEvent('setCrosshair', function(event, info) { + rootScope.onAppEvent('setCrosshair', function(event, info) { // do not need to to this if event is from this panel if (info.scope === scope) { return; @@ -43,20 +45,20 @@ function (angular, $, moment, _, kbn, GraphTooltip) { plot.setCrosshair({ x: info.pos.x, y: info.pos.y }); } } - }); + }, scope); - scope.onAppEvent('clearCrosshair', function() { + rootScope.onAppEvent('clearCrosshair', function() { var plot = elem.data().plot; if (plot) { plot.clearCrosshair(); } - }); + }, scope); // Receive render events scope.$on('render',function(event, renderData) { data = renderData || data; if (!data) { - scope.get_data(); + ctrl.refresh(); return; } annotations = data.annotations || annotations; @@ -64,10 +66,10 @@ function (angular, $, moment, _, kbn, GraphTooltip) { }); function getLegendHeight(panelHeight) { - if (!scope.panel.legend.show || scope.panel.legend.rightSide) { + if (!panel.legend.show || panel.legend.rightSide) { return 0; } - if (scope.panel.legend.alignAsTable) { + if (panel.legend.alignAsTable) { var total = 30 + (25 * data.length); return Math.min(total, Math.floor(panelHeight/2)); } else { @@ -77,14 +79,13 @@ function (angular, $, moment, _, kbn, GraphTooltip) { function setElementHeight() { try { - graphHeight = scope.height || scope.panel.height || scope.row.height; + graphHeight = ctrl.height || panel.height || ctrl.row.height; if (_.isString(graphHeight)) { graphHeight = parseInt(graphHeight.replace('px', ''), 10); } graphHeight -= 5; // padding - graphHeight -= scope.panel.title ? 24 : 9; // subtract panel title bar - + graphHeight -= panel.title ? 24 : 9; // subtract panel title bar graphHeight = graphHeight - getLegendHeight(graphHeight); // subtract one line legend elem.css('height', graphHeight + 'px'); @@ -100,7 +101,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return true; } - if ($rootScope.fullscreen && !scope.fullscreen) { + if (ctrl.otherPanelInFullscreenMode()) { return true; } @@ -122,11 +123,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) { for (var i = 0; i < data.length; i++) { var series = data[i]; var axis = yaxis[series.yaxis - 1]; - var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]]; + var formater = kbn.valueFormats[panel.y_formats[series.yaxis - 1]]; // decimal override - if (_.isNumber(scope.panel.decimals)) { - series.updateLegendValues(formater, scope.panel.decimals, null); + if (_.isNumber(panel.decimals)) { + series.updateLegendValues(formater, panel.decimals, null); } else { // auto decimals // legend and tooltip gets one more decimal precision @@ -135,22 +136,22 @@ function (angular, $, moment, _, kbn, GraphTooltip) { series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2); } - if(!scope.$$phase) { scope.$digest(); } + if(!rootScope.$$phase) { scope.$digest(); } } // add left axis labels - if (scope.panel.leftYAxisLabel) { + if (panel.leftYAxisLabel) { var yaxisLabel = $("
    ") - .text(scope.panel.leftYAxisLabel) + .text(panel.leftYAxisLabel) .appendTo(elem); yaxisLabel.css("margin-top", yaxisLabel.width() / 2); } // add right axis labels - if (scope.panel.rightYAxisLabel) { + if (panel.rightYAxisLabel) { var rightLabel = $("
    ") - .text(scope.panel.rightYAxisLabel) + .text(panel.rightYAxisLabel) .appendTo(elem); rightLabel.css("margin-top", rightLabel.width() / 2); @@ -158,8 +159,8 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } function processOffsetHook(plot, gridMargin) { - if (scope.panel.leftYAxisLabel) { gridMargin.left = 20; } - if (scope.panel.rightYAxisLabel) { gridMargin.right = 20; } + if (panel.leftYAxisLabel) { gridMargin.left = 20; } + if (panel.rightYAxisLabel) { gridMargin.right = 20; } } // Function for rendering panel @@ -168,7 +169,6 @@ function (angular, $, moment, _, kbn, GraphTooltip) { return; } - var panel = scope.panel; var stack = panel.stack ? true : null; // Populate element @@ -230,7 +230,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode, panel.y_formats); // if hidden remove points and disable stack - if (scope.hiddenSeries[series.alias]) { + if (ctrl.hiddenSeries[series.alias]) { series.data = []; series.stack = false; } @@ -255,7 +255,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { } if (incrementRenderCounter) { - scope.panelRenderingComplete(); + ctrl.renderingCompleted(); } } @@ -285,12 +285,12 @@ function (angular, $, moment, _, kbn, GraphTooltip) { function addTimeAxis(options) { var ticks = elem.width() / 100; - var min = _.isUndefined(scope.range.from) ? null : scope.range.from.valueOf(); - var max = _.isUndefined(scope.range.to) ? null : scope.range.to.valueOf(); + var min = _.isUndefined(ctrl.range.from) ? null : ctrl.range.from.valueOf(); + var max = _.isUndefined(ctrl.range.to) ? null : ctrl.range.to.valueOf(); options.xaxis = { timezone: dashboard.timezone, - show: scope.panel['x-axis'], + show: panel['x-axis'], mode: "time", min: min, max: max, @@ -361,11 +361,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) { function configureAxisOptions(data, options) { var defaults = { position: 'left', - show: scope.panel['y-axis'], - min: scope.panel.grid.leftMin, + show: panel['y-axis'], + min: panel.grid.leftMin, index: 1, - logBase: scope.panel.grid.leftLogBase || 1, - max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.leftMax, + logBase: panel.grid.leftLogBase || 1, + max: panel.percentage && panel.stack ? 100 : panel.grid.leftMax, }; options.yaxes.push(defaults); @@ -373,18 +373,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) { if (_.findWhere(data, {yaxis: 2})) { var secondY = _.clone(defaults); secondY.index = 2, - secondY.logBase = scope.panel.grid.rightLogBase || 1, + secondY.logBase = panel.grid.rightLogBase || 1, secondY.position = 'right'; - secondY.min = scope.panel.grid.rightMin; - secondY.max = scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.rightMax; + secondY.min = panel.grid.rightMin; + secondY.max = panel.percentage && panel.stack ? 100 : panel.grid.rightMax; options.yaxes.push(secondY); applyLogScale(options.yaxes[1], data); - configureAxisMode(options.yaxes[1], scope.panel.percentage && scope.panel.stack ? "percent" : scope.panel.y_formats[1]); + configureAxisMode(options.yaxes[1], panel.percentage && panel.stack ? "percent" : panel.y_formats[1]); } applyLogScale(options.yaxes[0], data); - configureAxisMode(options.yaxes[0], scope.panel.percentage && scope.panel.stack ? "percent" : scope.panel.y_formats[0]); + configureAxisMode(options.yaxes[0], panel.percentage && panel.stack ? "percent" : panel.y_formats[0]); } function applyLogScale(axis, data) { @@ -466,18 +466,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) { url += '&height=' + elem.css('height').replace('px', ''); url += '&bgcolor=1f1f1f'; // @grayDarker & @grafanaPanelBackground url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter - url += scope.panel.stack ? '&areaMode=stacked' : ''; - url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : ''; - url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : ''; - url += scope.panel.legend.show ? '&hideLegend=false' : '&hideLegend=true'; - url += scope.panel.grid.leftMin !== null ? '&yMin=' + scope.panel.grid.leftMin : ''; - url += scope.panel.grid.leftMax !== null ? '&yMax=' + scope.panel.grid.leftMax : ''; - url += scope.panel.grid.rightMin !== null ? '&yMin=' + scope.panel.grid.rightMin : ''; - url += scope.panel.grid.rightMax !== null ? '&yMax=' + scope.panel.grid.rightMax : ''; - url += scope.panel['x-axis'] ? '' : '&hideAxes=true'; - url += scope.panel['y-axis'] ? '' : '&hideYAxis=true'; + url += panel.stack ? '&areaMode=stacked' : ''; + url += panel.fill !== 0 ? ('&areaAlpha=' + (panel.fill/10).toFixed(1)) : ''; + url += panel.linewidth !== 0 ? '&lineWidth=' + panel.linewidth : ''; + url += panel.legend.show ? '&hideLegend=false' : '&hideLegend=true'; + url += panel.grid.leftMin !== null ? '&yMin=' + panel.grid.leftMin : ''; + url += panel.grid.leftMax !== null ? '&yMax=' + panel.grid.leftMax : ''; + url += panel.grid.rightMin !== null ? '&yMin=' + panel.grid.rightMin : ''; + url += panel.grid.rightMax !== null ? '&yMax=' + panel.grid.rightMax : ''; + url += panel['x-axis'] ? '' : '&hideAxes=true'; + url += panel['y-axis'] ? '' : '&hideYAxis=true'; - switch(scope.panel.y_formats[0]) { + switch(panel.y_formats[0]) { case 'bytes': url += '&yUnitSystem=binary'; break; @@ -510,7 +510,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { break; } - switch(scope.panel.nullPointMode) { + switch(panel.nullPointMode) { case 'connected': url += '&lineMode=connected'; break; @@ -521,7 +521,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) { break; } - url += scope.panel.steppedLine ? '&lineMode=staircase' : ''; + url += panel.steppedLine ? '&lineMode=staircase' : ''; elem.html(''); } diff --git a/public/app/plugins/panel/graph/graph_ctrl.ts b/public/app/plugins/panel/graph/graph_ctrl.ts new file mode 100644 index 00000000000..1a3c4d4edd3 --- /dev/null +++ b/public/app/plugins/panel/graph/graph_ctrl.ts @@ -0,0 +1,295 @@ +/// + +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'; + +var panelDefaults = { + // datasource name, null = default datasource + datasource: null, + // sets client side (flot) or native graphite png renderer (png) + renderer: 'flot', + // Show/hide the x-axis + 'x-axis' : true, + // Show/hide y-axis + 'y-axis' : true, + // y axis formats, [left axis,right axis] + y_formats : ['short', 'short'], + // grid options + grid : { + leftLogBase: 1, + leftMax: null, + rightMax: null, + leftMin: null, + rightMin: null, + rightLogBase: 1, + threshold1: null, + threshold2: null, + threshold1Color: 'rgba(216, 200, 27, 0.27)', + threshold2Color: 'rgba(234, 112, 112, 0.22)' + }, + // show/hide lines + lines : true, + // fill factor + fill : 1, + // line width in pixels + linewidth : 2, + // show hide points + points : false, + // point radius in pixels + pointradius : 5, + // show hide bars + bars : false, + // enable/disable stacking + stack : false, + // stack percentage mode + percentage : false, + // legend options + legend: { + show: true, // disable/enable legend + values: false, // disable/enable legend values + min: false, + max: false, + current: false, + total: false, + avg: false + }, + // how null points should be handled + nullPointMode : 'connected', + // staircase line mode + steppedLine: false, + // tooltip options + tooltip : { + value_type: 'cumulative', + shared: true, + }, + // time overrides + timeFrom: null, + timeShift: null, + // metric queries + targets: [{}], + // series color overrides + aliasColors: {}, + // other style overrides + seriesOverrides: [], +}; + +class GraphCtrl extends MetricsPanelCtrl { + hiddenSeries: any = {}; + seriesList: any = []; + logScales: any; + unitFormats: any; + annotationsPromise: any; + datapointsCount: number; + datapointsOutside: boolean; + datapointsWarning: boolean; + colors: any = []; + + /** @ngInject */ + constructor($scope, $injector, private annotationsSrv) { + super($scope, $injector); + + _.defaults(this.panel, panelDefaults); + _.defaults(this.panel.tooltip, panelDefaults.tooltip); + _.defaults(this.panel.grid, panelDefaults.grid); + _.defaults(this.panel.legend, panelDefaults.legend); + + this.colors = $scope.$root.colors; + } + + initEditMode() { + super.initEditMode(); + + this.icon = "fa fa-bar-chart"; + this.addEditorTab('Axes & Grid', 'public/app/plugins/panel/graph/axisEditor.html', 2); + this.addEditorTab('Display Styles', 'public/app/plugins/panel/graph/styleEditor.html', 3); + + this.logScales = { + 'linear': 1, + 'log (base 2)': 2, + 'log (base 10)': 10, + 'log (base 32)': 32, + 'log (base 1024)': 1024 + }; + this.unitFormats = kbn.getUnitFormats(); + } + + getExtendedMenu() { + var menu = super.getExtendedMenu(); + menu.push({text: 'Export CSV', click: 'ctrl.exportCsv()'}); + menu.push({text: 'Toggle legend', click: 'ctrl.toggleLegend()'}); + return menu; + } + + setUnitFormat(axis, subItem) { + this.panel.y_formats[axis] = subItem.value; + this.render(); + } + + refreshData(datasource) { + this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard); + + return this.issueQueries(datasource) + .then(res => this.dataHandler(res)) + .catch(err => { + this.seriesList = []; + this.render([]); + throw err; + }); + } + + zoomOut(evt) { + this.publishAppEvent('zoom-out', evt); + } + + loadSnapshot(snapshotData) { + this.updateTimeRange(); + this.annotationsPromise = this.annotationsSrv.getAnnotations(this.dashboard); + this.dataHandler(snapshotData); + } + + dataHandler(results) { + // png renderer returns just a url + if (_.isString(results)) { + this.render(results); + return; + } + + this.datapointsWarning = false; + this.datapointsCount = 0; + this.datapointsOutside = false; + this.seriesList = _.map(results.data, (series, i) => this.seriesHandler(series, i)); + this.datapointsWarning = this.datapointsCount === 0 || this.datapointsOutside; + + this.annotationsPromise.then(annotations => { + this.loading = false; + this.seriesList.annotations = annotations; + this.render(this.seriesList); + }, () => { + this.loading = false; + this.render(this.seriesList); + }); + }; + + seriesHandler(seriesData, index) { + var datapoints = seriesData.datapoints; + var alias = seriesData.target; + var colorIndex = index % this.colors.length; + var color = this.panel.aliasColors[alias] || this.colors[colorIndex]; + + var series = new TimeSeries({ + datapoints: datapoints, + alias: alias, + color: color, + }); + + if (datapoints && datapoints.length > 0) { + var last = moment.utc(datapoints[datapoints.length - 1][1]); + var from = moment.utc(this.range.from); + if (last - from < -10000) { + this.datapointsOutside = true; + } + + this.datapointsCount += datapoints.length; + } + + return series; + } + + render(data?: any) { + this.broadcastRender(data); + } + + changeSeriesColor(series, color) { + series.color = color; + this.panel.aliasColors[series.alias] = series.color; + this.render(); + } + + toggleSeries(serie, event) { + if (event.ctrlKey || event.metaKey || event.shiftKey) { + if (this.hiddenSeries[serie.alias]) { + delete this.hiddenSeries[serie.alias]; + } else { + this.hiddenSeries[serie.alias] = true; + } + } else { + this.toggleSeriesExclusiveMode(serie); + } + + this.render(); + } + + toggleSeriesExclusiveMode (serie) { + var hidden = this.hiddenSeries; + + if (hidden[serie.alias]) { + delete hidden[serie.alias]; + } + + // check if every other series is hidden + var alreadyExclusive = _.every(this.seriesList, value => { + if (value.alias === serie.alias) { + return true; + } + + return hidden[value.alias]; + }); + + if (alreadyExclusive) { + // remove all hidden series + _.each(this.seriesList, value => { + delete this.hiddenSeries[value.alias]; + }); + } else { + // hide all but this serie + _.each(this.seriesList, value => { + if (value.alias === serie.alias) { + return; + } + + this.hiddenSeries[value.alias] = true; + }); + } + } + + toggleYAxis(info) { + var override = _.findWhere(this.panel.seriesOverrides, { alias: info.alias }); + if (!override) { + override = { alias: info.alias }; + this.panel.seriesOverrides.push(override); + } + override.yaxis = info.yaxis === 2 ? 1 : 2; + this.render(); + }; + + addSeriesOverride(override) { + this.panel.seriesOverrides.push(override || {}); + } + + removeSeriesOverride(override) { + this.panel.seriesOverrides = _.without(this.panel.seriesOverrides, override); + this.render(); + } + + // Called from panel menu + toggleLegend() { + this.panel.legend.show = !this.panel.legend.show; + this.refresh(); + } + + legendValuesOptionChanged() { + var legend = this.panel.legend; + legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total; + this.render(); + } + + exportCsv() { + fileExport.exportSeriesListToCsv(this.seriesList); + } +} + +export {GraphCtrl} diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 1eabbd0f7af..f10e57ef21a 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -6,6 +6,8 @@ function ($) { function GraphTooltip(elem, dashboard, scope, getSeriesFn) { var self = this; + var ctrl = scope.ctrl; + var panel = ctrl.panel; var $tooltip = $('
    '); @@ -47,12 +49,12 @@ function ($) { for (i = 0; i < seriesList.length; i++) { series = seriesList[i]; - if (!series.data.length || (scope.panel.legend.hideEmpty && series.allIsNull)) { + if (!series.data.length || (panel.legend.hideEmpty && series.allIsNull)) { results.push({ hidden: true }); continue; } - if (!series.data.length || (scope.panel.legend.hideZero && series.allIsZero)) { + if (!series.data.length || (panel.legend.hideZero && series.allIsZero)) { results.push({ hidden: true }); continue; } @@ -61,7 +63,7 @@ function ($) { results.time = series.data[hoverIndex][0]; if (series.stack) { - if (scope.panel.tooltip.value_type === 'individual') { + if (panel.tooltip.value_type === 'individual') { value = series.data[hoverIndex][1]; } else if (!series.stack) { value = series.data[hoverIndex][1]; @@ -89,7 +91,7 @@ function ($) { }; elem.mouseleave(function () { - if (scope.panel.tooltip.shared) { + if (panel.tooltip.shared) { var plot = elem.data().plot; if (plot) { $tooltip.detach(); @@ -98,7 +100,7 @@ function ($) { } if (dashboard.sharedCrosshair) { - scope.appEvent('clearCrosshair'); + ctrl.publishAppEvent('clearCrosshair'); } }); @@ -108,15 +110,15 @@ function ($) { var seriesList = getSeriesFn(); var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml; - if(dashboard.sharedCrosshair){ - scope.appEvent('setCrosshair', { pos: pos, scope: scope }); + if (dashboard.sharedCrosshair) { + ctrl.publishAppEvent('setCrosshair', { pos: pos, scope: scope }); } if (seriesList.length === 0) { return; } - if (scope.panel.tooltip.shared) { + if (panel.tooltip.shared) { plot.unhighlight(); var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); @@ -151,7 +153,7 @@ function ($) { group = '
    '; group += ' ' + series.label + ':
    '; - if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { + if (panel.stack && panel.tooltip.value_type === 'individual') { value = item.datapoint[1] - item.datapoint[2]; } else { diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js index cf64d90414b..67b2dd525d0 100644 --- a/public/app/plugins/panel/graph/legend.js +++ b/public/app/plugins/panel/graph/legend.js @@ -8,7 +8,7 @@ define([ function (angular, _, $) { 'use strict'; - var module = angular.module('grafana.panels.graph'); + var module = angular.module('grafana.directives'); module.directive('graphLegend', function(popoverSrv) { @@ -16,13 +16,14 @@ function (angular, _, $) { link: function(scope, elem) { var $container = $('
    '); var firstRender = true; - var panel = scope.panel; + var ctrl = scope.ctrl; + var panel = ctrl.panel; var data; var seriesList; var i; scope.$on('render', function() { - data = scope.seriesList; + data = ctrl.seriesList; if (data) { render(); } @@ -54,7 +55,7 @@ function (angular, _, $) { var el = $(e.currentTarget); var index = getSeriesIndexForElement(el); var seriesInfo = seriesList[index]; - scope.toggleSeries(seriesInfo, e); + ctrl.toggleSeries(seriesInfo, e); } function sortLegend(e) { @@ -148,7 +149,7 @@ function (angular, _, $) { var html = '
    '; html += '
    '; html += ''; diff --git a/public/app/plugins/panel/graph/legend.popover.html b/public/app/plugins/panel/graph/legend.popover.html index 5410af2d1d1..e2b85a8dab4 100644 --- a/public/app/plugins/panel/graph/legend.popover.html +++ b/public/app/plugins/panel/graph/legend.popover.html @@ -3,12 +3,12 @@
    - -
    -   + ng-click="ctrl.changeSeriesColor(series, color);dismiss();"> 
    diff --git a/public/app/plugins/panel/graph/module.d.ts b/public/app/plugins/panel/graph/module.d.ts deleted file mode 100644 index f3fe6043d65..00000000000 --- a/public/app/plugins/panel/graph/module.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare var panel: any; -declare var GraphCtrl: any; -export {panel, GraphCtrl}; diff --git a/public/app/plugins/panel/graph/module.html b/public/app/plugins/panel/graph/module.html index 068223a5366..4fa5f263210 100644 --- a/public/app/plugins/panel/graph/module.html +++ b/public/app/plugins/panel/graph/module.html @@ -1,25 +1,22 @@ - - -
    -
    - -
    - - No datapoints No datapoints returned from metric query - - Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server -
    - -
    -
    +
    +
    +
    + + No datapoints No datapoints returned from metric query + + Datapoints outside time range Can be caused by timezone mismatch between browser and graphite server +
    + +
    -
    -
    +
    +
    + +
    - diff --git a/public/app/plugins/panel/graph/module.js b/public/app/plugins/panel/graph/module.js deleted file mode 100644 index c1039e394a3..00000000000 --- a/public/app/plugins/panel/graph/module.js +++ /dev/null @@ -1,303 +0,0 @@ -define([ - 'angular', - 'lodash', - 'moment', - 'app/core/utils/kbn', - 'app/core/utils/file_export', - 'app/core/time_series', - 'app/features/panel/panel_meta', - './seriesOverridesCtrl', - './graph', - './legend', -], -function (angular, _, moment, kbn, fileExport, TimeSeries, PanelMeta) { - 'use strict'; - - /** @ngInject */ - function GraphCtrl($scope, $rootScope, panelSrv, annotationsSrv, panelHelper) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Graph', - editIcon: "fa fa-bar-chart", - fullscreen: true, - metricsEditor: true, - }); - - $scope.panelMeta.addEditorTab('Axes & Grid', 'app/plugins/panel/graph/axisEditor.html'); - $scope.panelMeta.addEditorTab('Display Styles', 'app/plugins/panel/graph/styleEditor.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); - - $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()'); - $scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()'); - - // Set and populate defaults - var _d = { - // datasource name, null = default datasource - datasource: null, - // sets client side (flot) or native graphite png renderer (png) - renderer: 'flot', - // Show/hide the x-axis - 'x-axis' : true, - // Show/hide y-axis - 'y-axis' : true, - // y axis formats, [left axis,right axis] - y_formats : ['short', 'short'], - // grid options - grid : { - leftLogBase: 1, - leftMax: null, - rightMax: null, - leftMin: null, - rightMin: null, - rightLogBase: 1, - threshold1: null, - threshold2: null, - threshold1Color: 'rgba(216, 200, 27, 0.27)', - threshold2Color: 'rgba(234, 112, 112, 0.22)' - }, - // show/hide lines - lines : true, - // fill factor - fill : 1, - // line width in pixels - linewidth : 2, - // show hide points - points : false, - // point radius in pixels - pointradius : 5, - // show hide bars - bars : false, - // enable/disable stacking - stack : false, - // stack percentage mode - percentage : false, - // legend options - legend: { - show: true, // disable/enable legend - values: false, // disable/enable legend values - min: false, - max: false, - current: false, - total: false, - avg: false - }, - // how null points should be handled - nullPointMode : 'connected', - // staircase line mode - steppedLine: false, - // tooltip options - tooltip : { - value_type: 'cumulative', - shared: true, - }, - // time overrides - timeFrom: null, - timeShift: null, - // metric queries - targets: [{}], - // series color overrides - aliasColors: {}, - // other style overrides - seriesOverrides: [], - }; - - _.defaults($scope.panel,_d); - _.defaults($scope.panel.tooltip, _d.tooltip); - _.defaults($scope.panel.annotate, _d.annotate); - _.defaults($scope.panel.grid, _d.grid); - _.defaults($scope.panel.legend, _d.legend); - - $scope.logScales = {'linear': 1, 'log (base 2)': 2, 'log (base 10)': 10, 'log (base 32)': 32, 'log (base 1024)': 1024}; - - $scope.hiddenSeries = {}; - $scope.seriesList = []; - $scope.unitFormats = kbn.getUnitFormats(); - - $scope.setUnitFormat = function(axis, subItem) { - $scope.panel.y_formats[axis] = subItem.value; - $scope.render(); - }; - - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); - - $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.dashboard); - - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.seriesList = []; - $scope.render([]); - throw err; - }); - }; - - $scope.zoomOut = function(evt) { - $scope.appEvent('zoom-out', evt); - }; - - $scope.loadSnapshot = function(snapshotData) { - panelHelper.updateTimeRange($scope); - $scope.annotationsPromise = annotationsSrv.getAnnotations($scope.dashboard); - $scope.dataHandler(snapshotData); - }; - - $scope.dataHandler = function(results) { - // png renderer returns just a url - if (_.isString(results)) { - $scope.render(results); - return; - } - - $scope.datapointsWarning = false; - $scope.datapointsCount = 0; - $scope.datapointsOutside = false; - - $scope.seriesList = _.map(results.data, $scope.seriesHandler); - - $scope.datapointsWarning = $scope.datapointsCount === 0 || $scope.datapointsOutside; - - $scope.annotationsPromise - .then(function(annotations) { - $scope.panelMeta.loading = false; - $scope.seriesList.annotations = annotations; - $scope.render($scope.seriesList); - }, function() { - $scope.panelMeta.loading = false; - $scope.render($scope.seriesList); - }); - }; - - $scope.seriesHandler = function(seriesData, index) { - var datapoints = seriesData.datapoints; - var alias = seriesData.target; - var colorIndex = index % $rootScope.colors.length; - var color = $scope.panel.aliasColors[alias] || $rootScope.colors[colorIndex]; - - var series = new TimeSeries({ - datapoints: datapoints, - alias: alias, - color: color, - }); - - if (datapoints && datapoints.length > 0) { - var last = moment.utc(datapoints[datapoints.length - 1][1]); - var from = moment.utc($scope.range.from); - if (last - from < -10000) { - $scope.datapointsOutside = true; - } - - $scope.datapointsCount += datapoints.length; - } - - return series; - }; - - $scope.render = function(data) { - panelHelper.broadcastRender($scope, data); - }; - - $scope.changeSeriesColor = function(series, color) { - series.color = color; - $scope.panel.aliasColors[series.alias] = series.color; - $scope.render(); - }; - - $scope.toggleSeries = function(serie, event) { - if (event.ctrlKey || event.metaKey || event.shiftKey) { - if ($scope.hiddenSeries[serie.alias]) { - delete $scope.hiddenSeries[serie.alias]; - } - else { - $scope.hiddenSeries[serie.alias] = true; - } - } else { - $scope.toggleSeriesExclusiveMode(serie); - } - - $scope.render(); - }; - - $scope.toggleSeriesExclusiveMode = function(serie) { - var hidden = $scope.hiddenSeries; - - if (hidden[serie.alias]) { - delete hidden[serie.alias]; - } - - // check if every other series is hidden - var alreadyExclusive = _.every($scope.seriesList, function(value) { - if (value.alias === serie.alias) { - return true; - } - - return hidden[value.alias]; - }); - - if (alreadyExclusive) { - // remove all hidden series - _.each($scope.seriesList, function(value) { - delete $scope.hiddenSeries[value.alias]; - }); - } - else { - // hide all but this serie - _.each($scope.seriesList, function(value) { - if (value.alias === serie.alias) { - return; - } - - $scope.hiddenSeries[value.alias] = true; - }); - } - }; - - $scope.toggleYAxis = function(info) { - var override = _.findWhere($scope.panel.seriesOverrides, { alias: info.alias }); - if (!override) { - override = { alias: info.alias }; - $scope.panel.seriesOverrides.push(override); - } - override.yaxis = info.yaxis === 2 ? 1 : 2; - $scope.render(); - }; - - $scope.addSeriesOverride = function(override) { - $scope.panel.seriesOverrides.push(override || {}); - }; - - $scope.removeSeriesOverride = function(override) { - $scope.panel.seriesOverrides = _.without($scope.panel.seriesOverrides, override); - $scope.render(); - }; - - // Called from panel menu - $scope.toggleLegend = function() { - $scope.panel.legend.show = !$scope.panel.legend.show; - $scope.get_data(); - }; - - $scope.legendValuesOptionChanged = function() { - var legend = $scope.panel.legend; - legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total; - $scope.render(); - }; - - $scope.exportCsv = function() { - fileExport.exportSeriesListToCsv($scope.seriesList); - }; - - panelSrv.init($scope); - } - - function graphPanelDirective() { - return { - controller: GraphCtrl, - templateUrl: 'app/plugins/panel/graph/module.html', - }; - } - - return { - GraphCtrl: GraphCtrl, - panel: graphPanelDirective, - }; -}); diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts new file mode 100644 index 00000000000..72e273e40b1 --- /dev/null +++ b/public/app/plugins/panel/graph/module.ts @@ -0,0 +1,17 @@ + +import {PanelDirective} from '../../../features/panel/panel'; +import {GraphCtrl} from './graph_ctrl'; + +import './graph'; +import './legend'; +import './seriesOverridesCtrl'; + +class GraphPanel extends PanelDirective { + controller = GraphCtrl; + templateUrl = 'public/app/plugins/panel/graph/module.html'; +} + +export { + GraphPanel, + GraphPanel as Panel +} diff --git a/public/app/plugins/panel/graph/seriesOverridesCtrl.js b/public/app/plugins/panel/graph/seriesOverridesCtrl.js index fd5c11b2060..4b89de684e3 100644 --- a/public/app/plugins/panel/graph/seriesOverridesCtrl.js +++ b/public/app/plugins/panel/graph/seriesOverridesCtrl.js @@ -1,13 +1,11 @@ define([ 'angular', 'jquery', - 'app/app', 'lodash', -], function(angular, jquery, app, _) { +], function(angular, jquery, _) { 'use strict'; - var module = angular.module('grafana.panels.graph', []); - app.useModule(module); + var module = angular.module('grafana.controllers'); module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv) { $scope.overrideMenu = []; @@ -45,18 +43,19 @@ define([ } $scope.updateCurrentOverrides(); - $scope.render(); + $scope.ctrl.render(); }; $scope.colorSelected = function(color) { $scope.override['color'] = color; $scope.updateCurrentOverrides(); - $scope.render(); + $scope.ctrl.render(); }; $scope.openColorSelector = function() { var popoverScope = $scope.$new(); popoverScope.colorSelected = $scope.colorSelected; + popoverScope.colors = $scope.ctrl.colors; popoverSrv.show({ element: $element.find(".dropdown"), @@ -69,11 +68,11 @@ define([ $scope.removeOverride = function(option) { delete $scope.override[option.propertyName]; $scope.updateCurrentOverrides(); - $scope.render(); + $scope.ctrl.render(); }; $scope.getSeriesNames = function() { - return _.map($scope.seriesList, function(series) { + return _.map($scope.ctrl.seriesList, function(series) { return series.alias; }); }; @@ -107,7 +106,5 @@ define([ $scope.addOverrideOption('Transform', 'transform', ['negative-Y']); $scope.addOverrideOption('Legend', 'legend', [true, false]); $scope.updateCurrentOverrides(); - }); - }); diff --git a/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts b/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts index 73e47863f80..9bdd7c3df79 100644 --- a/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts +++ b/public/app/plugins/panel/graph/specs/graph_ctrl_specs.ts @@ -2,15 +2,10 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from '../../../../../test/lib/common'; -import 'app/features/panel/panel_srv'; -import 'app/features/panel/panel_helper'; - import angular from 'angular'; -import {GraphCtrl} from '../module'; +import {GraphCtrl} from '../graph_ctrl'; import helpers from '../../../../../test/specs/helpers'; -angular.module('grafana.controllers').controller('GraphCtrl', GraphCtrl); - describe('GraphCtrl', function() { var ctx = new helpers.ControllerTestContext(); @@ -18,7 +13,7 @@ describe('GraphCtrl', function() { beforeEach(angularMocks.module('grafana.controllers')); beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('GraphCtrl')); + beforeEach(ctx.createPanelController(GraphCtrl)); describe('get_data with 2 series', function() { beforeEach(function() { @@ -29,25 +24,23 @@ describe('GraphCtrl', function() { { target: 'test.cpu2', datapoints: [[1, 10]]} ] })); - ctx.scope.render = sinon.spy(); - ctx.scope.refreshData(ctx.datasource); + ctx.ctrl.render = sinon.spy(); + ctx.ctrl.refreshData(ctx.datasource); ctx.scope.$digest(); }); it('should send time series to render', function() { - var data = ctx.scope.render.getCall(0).args[0]; + var data = ctx.ctrl.render.getCall(0).args[0]; expect(data.length).to.be(2); }); describe('get_data failure following success', function() { beforeEach(function() { ctx.datasource.query = sinon.stub().returns(ctx.$q.reject('Datasource Error')); - ctx.scope.refreshData(ctx.datasource); + ctx.ctrl.refreshData(ctx.datasource); ctx.scope.$digest(); }); }); - }); - }); diff --git a/public/app/plugins/panel/graph/specs/graph_specs.ts b/public/app/plugins/panel/graph/specs/graph_specs.ts index fa1d01a88f8..ce8ccfe33d2 100644 --- a/public/app/plugins/panel/graph/specs/graph_specs.ts +++ b/public/app/plugins/panel/graph/specs/graph_specs.ts @@ -24,11 +24,13 @@ describe('grafanaGraph', function() { })); beforeEach(angularMocks.inject(function($rootScope, $compile) { + var ctrl: any = {}; var scope = $rootScope.$new(); + scope.ctrl = ctrl; var element = angular.element("
    "); - scope.height = '200px'; - scope.panel = { + ctrl.height = '200px'; + ctrl.panel = { legend: {}, grid: { }, y_formats: [], @@ -38,14 +40,14 @@ describe('grafanaGraph', function() { } }; - scope.panelRenderingComplete = sinon.spy(); - scope.appEvent = sinon.spy(); - scope.onAppEvent = sinon.spy(); - scope.hiddenSeries = {}; - scope.dashboard = { timezone: 'browser' }; - scope.range = { + $rootScope.onAppEvent = sinon.spy(); + ctrl.otherPanelInFullscreenMode = sinon.spy(); + ctrl.renderingCompleted = sinon.spy(); + ctrl.hiddenSeries = {}; + ctrl.dashboard = { timezone: 'browser' }; + ctrl.range = { from: moment([2015, 1, 1, 10]), - to: moment([2015, 1, 1, 22]) + to: moment([2015, 1, 1, 22]), }; ctx.data = []; ctx.data.push(new TimeSeries({ @@ -57,7 +59,7 @@ describe('grafanaGraph', function() { alias: 'series2' })); - setupFunc(scope, ctx.data); + setupFunc(ctrl, ctx.data); $compile(element)(scope); scope.$digest(); @@ -74,11 +76,11 @@ describe('grafanaGraph', function() { } graphScenario('simple lines options', function(ctx) { - ctx.setup(function(scope) { - scope.panel.lines = true; - scope.panel.fill = 5; - scope.panel.linewidth = 3; - scope.panel.steppedLine = true; + ctx.setup(function(ctrl) { + ctrl.panel.lines = true; + ctrl.panel.fill = 5; + ctrl.panel.linewidth = 3; + ctrl.panel.steppedLine = true; }); it('should configure plot with correct options', function() { @@ -90,8 +92,8 @@ describe('grafanaGraph', function() { }); graphScenario('grid thresholds 100, 200', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { threshold1: 100, threshold1Color: "#111", threshold2: 200, @@ -110,8 +112,8 @@ describe('grafanaGraph', function() { }); graphScenario('inverted grid thresholds 200, 100', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { threshold1: 200, threshold1Color: "#111", threshold2: 100, @@ -130,8 +132,8 @@ describe('grafanaGraph', function() { }); graphScenario('grid thresholds from zero', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { threshold1: 0, threshold1Color: "#111", }; @@ -144,8 +146,8 @@ describe('grafanaGraph', function() { }); graphScenario('when logBase is log 10', function(ctx) { - ctx.setup(function(scope) { - scope.panel.grid = { + ctx.setup(function(ctrl) { + ctrl.panel.grid = { leftMax: null, rightMax: null, leftMin: null, @@ -163,8 +165,8 @@ describe('grafanaGraph', function() { }); graphScenario('should use timeStep for barWidth', function(ctx) { - ctx.setup(function(scope, data) { - scope.panel.bars = true; + ctx.setup(function(ctrl, data) { + ctrl.panel.bars = true; data[0] = new TimeSeries({ datapoints: [[1,10],[2,20]], alias: 'series1', @@ -177,10 +179,10 @@ describe('grafanaGraph', function() { }); graphScenario('series option overrides, fill & points', function(ctx) { - ctx.setup(function(scope, data) { - scope.panel.lines = true; - scope.panel.fill = 5; - scope.panel.seriesOverrides = [ + ctx.setup(function(ctrl, data) { + ctrl.panel.lines = true; + ctrl.panel.fill = 5; + ctrl.panel.seriesOverrides = [ { alias: 'test', fill: 0, points: true } ]; @@ -195,8 +197,8 @@ describe('grafanaGraph', function() { }); graphScenario('should order series order according to zindex', function(ctx) { - ctx.setup(function(scope) { - scope.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; + ctx.setup(function(ctrl) { + ctrl.panel.seriesOverrides = [{ alias: 'series1', zindex: 2 }]; }); it('should move zindex 2 last', function() { @@ -206,8 +208,8 @@ describe('grafanaGraph', function() { }); graphScenario('when series is hidden', function(ctx) { - ctx.setup(function(scope) { - scope.hiddenSeries = {'series2': true}; + ctx.setup(function(ctrl) { + ctrl.hiddenSeries = {'series2': true}; }); it('should remove datapoints and disable stack', function() { @@ -218,9 +220,9 @@ describe('grafanaGraph', function() { }); graphScenario('when stack and percent', function(ctx) { - ctx.setup(function(scope) { - scope.panel.percentage = true; - scope.panel.stack = true; + ctx.setup(function(ctrl) { + ctrl.panel.percentage = true; + ctrl.panel.stack = true; }); it('should show percentage', function() { @@ -231,9 +233,9 @@ describe('grafanaGraph', function() { graphScenario('when panel too narrow to show x-axis dates in same granularity as wide panels', function(ctx) { describe('and the range is less than 24 hours', function() { - ctx.setup(function(scope) { - scope.range.from = moment([2015, 1, 1, 10]); - scope.range.to = moment([2015, 1, 1, 22]); + ctx.setup(function(ctrl) { + ctrl.range.from = moment([2015, 1, 1, 10]); + ctrl.range.to = moment([2015, 1, 1, 22]); }); it('should format dates as hours minutes', function() { diff --git a/public/app/plugins/panel/graph/specs/tooltip_specs.ts b/public/app/plugins/panel/graph/specs/tooltip_specs.ts index de173350b2b..58177ea7a16 100644 --- a/public/app/plugins/panel/graph/specs/tooltip_specs.ts +++ b/public/app/plugins/panel/graph/specs/tooltip_specs.ts @@ -8,6 +8,7 @@ import GraphTooltip from '../graph_tooltip'; var scope = { appEvent: sinon.spy(), onAppEvent: sinon.spy(), + ctrl: {} }; var elem = $('
    '); @@ -15,8 +16,8 @@ var dashboard = { }; function describeSharedTooltip(desc, fn) { var ctx: any = {}; - ctx.scope = scope; - ctx.scope.panel = { + ctx.ctrl = scope.ctrl; + ctx.ctrl.panel = { tooltip: { shared: true }, @@ -51,9 +52,11 @@ describeSharedTooltip("steppedLine false, stack false", function(ctx) { it('should return 2 series', function() { expect(ctx.results.length).to.be(2); }); + it('should add time to results array', function() { expect(ctx.results.time).to.be(10); }); + it('should set value and hoverIndex', function() { expect(ctx.results[0].value).to.be(15); expect(ctx.results[1].value).to.be(2); @@ -93,7 +96,7 @@ describeSharedTooltip("steppedLine false, stack true, individual false", functio stack: true } ]; - ctx.scope.panel.stack = true; + ctx.ctrl.panel.stack = true; ctx.pos = { x: 11 }; }); @@ -124,7 +127,7 @@ describeSharedTooltip("steppedLine false, stack true, individual false, series s stack: false } ]; - ctx.scope.panel.stack = true; + ctx.ctrl.panel.stack = true; ctx.pos = { x: 11 }; }); @@ -156,15 +159,14 @@ describeSharedTooltip("steppedLine false, stack true, individual true", function stack: false } ]; - ctx.scope.panel.stack = true; - ctx.scope.panel.tooltip.value_type = 'individual'; + ctx.ctrl.panel.stack = true; + ctx.ctrl.panel.tooltip.value_type = 'individual'; ctx.pos = { x: 11 }; }); it('should not show stacked value', function() { expect(ctx.results[1].value).to.be(2); }); - }); diff --git a/public/app/plugins/panel/graph/styleEditor.html b/public/app/plugins/panel/graph/styleEditor.html index f692328a0fd..82cf31dd0d1 100644 --- a/public/app/plugins/panel/graph/styleEditor.html +++ b/public/app/plugins/panel/graph/styleEditor.html @@ -1,60 +1,60 @@
    Chart Options
    - - - + + +
    Line options
    -
    +
    - +
    -
    +
    - +
    -
    +
    - +
    - +
    - +
    Multiple Series
    - - + +
    Rendering
    - +
    - +
    Tooltip
    -
    +
    - +
    @@ -64,10 +64,10 @@
    Series specific overrides Regex match example: /server[0-3]/i
    -
    +
    • - +
    • @@ -75,7 +75,7 @@
    • - +
    • @@ -95,7 +95,7 @@
    -
    diff --git a/public/app/plugins/panel/singlestat/controller.ts b/public/app/plugins/panel/singlestat/controller.ts index 4b55a4568be..6c258283f6c 100644 --- a/public/app/plugins/panel/singlestat/controller.ts +++ b/public/app/plugins/panel/singlestat/controller.ts @@ -3,240 +3,231 @@ import angular from 'angular'; import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import PanelMeta from 'app/features/panel/panel_meta2'; import TimeSeries from '../../../core/time_series2'; +import {MetricsPanelCtrl} from '../../../features/panel/panel'; -export class SingleStatCtrl { +// Set and populate defaults +var panelDefaults = { + links: [], + datasource: null, + maxDataPoints: 100, + interval: null, + targets: [{}], + cacheTimeout: null, + format: 'none', + prefix: '', + postfix: '', + nullText: null, + valueMaps: [ + { value: 'null', op: '=', text: 'N/A' } + ], + nullPointMode: 'connected', + valueName: 'avg', + prefixFontSize: '50%', + valueFontSize: '80%', + postfixFontSize: '50%', + thresholds: '', + colorBackground: false, + colorValue: false, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + sparkline: { + show: false, + full: false, + lineColor: 'rgb(31, 120, 193)', + fillColor: 'rgba(31, 118, 189, 0.18)', + } +}; + +export class SingleStatCtrl extends MetricsPanelCtrl { + series: any[]; + data: any[]; + fontSizes: any[]; + unitFormats: any[]; /** @ngInject */ - constructor($scope, panelSrv, panelHelper) { - $scope.panelMeta = new PanelMeta({ - panelName: 'Singlestat', - editIcon: "fa fa-dashboard", - fullscreen: true, - metricsEditor: true + constructor($scope, $injector) { + super($scope, $injector); + _.defaults(this.panel, panelDefaults); + } + + + initEditMode() { + 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.unitFormats = kbn.getUnitFormats(); + } + + setUnitFormat(subItem) { + this.panel.format = subItem.value; + this.render(); + } + + refreshData(datasource) { + return this.issueQueries(datasource) + .then(this.dataHandler.bind(this)) + .catch(err => { + this.series = []; + this.render(); + throw err; + }); + } + + loadSnapshot(snapshotData) { + this.updateTimeRange(); + this.dataHandler(snapshotData); + } + + dataHandler(results) { + this.series = _.map(results.data, this.seriesHandler.bind(this)); + this.render(); + } + + seriesHandler(seriesData) { + var series = new TimeSeries({ + datapoints: seriesData.datapoints, + alias: seriesData.target, }); - $scope.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%']; + series.flotpairs = series.getFlotPairs(this.panel.nullPointMode); + return series; + } - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); + setColoring(options) { + if (options.background) { + this.panel.colorValue = false; + this.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; + } else { + this.panel.colorBackground = false; + this.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; + } + this.render(); + } - // Set and populate defaults - var _d = { - links: [], - datasource: null, - maxDataPoints: 100, - interval: null, - targets: [{}], - cacheTimeout: null, - format: 'none', - prefix: '', - postfix: '', - nullText: null, - valueMaps: [ - { value: 'null', op: '=', text: 'N/A' } - ], - nullPointMode: 'connected', - valueName: 'avg', - prefixFontSize: '50%', - valueFontSize: '80%', - postfixFontSize: '50%', - thresholds: '', - colorBackground: false, - colorValue: false, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - sparkline: { - show: false, - full: false, - lineColor: 'rgb(31, 120, 193)', - fillColor: 'rgba(31, 118, 189, 0.18)', + invertColorOrder() { + var tmp = this.panel.colors[0]; + this.panel.colors[0] = this.panel.colors[2]; + this.panel.colors[2] = tmp; + this.render(); + } + + getDecimalsForValue(value) { + if (_.isNumber(this.panel.decimals)) { + return {decimals: this.panel.decimals, scaledDecimals: null}; + } + + var delta = value / 2; + var dec = -Math.floor(Math.log(delta) / Math.LN10); + + var magn = Math.pow(10, -dec), + norm = delta / magn, // norm is between 1.0 and 10.0 + size; + + if (norm < 1.5) { + size = 1; + } else if (norm < 3) { + size = 2; + // special case for 2.5, requires an extra decimal + if (norm > 2.25) { + size = 2.5; + ++dec; } - }; + } else if (norm < 7.5) { + size = 5; + } else { + size = 10; + } - _.defaults($scope.panel, _d); + size *= magn; - $scope.unitFormats = kbn.getUnitFormats(); + // reduce starting decimals if not needed + if (Math.floor(value) === value) { dec = 0; } - $scope.setUnitFormat = function(subItem) { - $scope.panel.format = subItem.value; - $scope.render(); - }; + var result: any = {}; + result.decimals = Math.max(0, dec); + result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; - $scope.init = function() { - panelSrv.init($scope); - }; + return result; + } - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); + render() { + var data: any = {}; + this.setValues(data); - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.series = []; - $scope.render(); - throw err; - }); - }; + data.thresholds = this.panel.thresholds.split(',').map(function(strVale) { + return Number(strVale.trim()); + }); - $scope.loadSnapshot = function(snapshotData) { - panelHelper.updateTimeRange($scope); - $scope.dataHandler(snapshotData); - }; + data.colorMap = this.panel.colors; - $scope.dataHandler = function(results) { - $scope.series = _.map(results.data, $scope.seriesHandler); - $scope.render(); - }; + this.data = data; + this.broadcastRender(); + } - $scope.seriesHandler = function(seriesData) { - var series = new TimeSeries({ - datapoints: seriesData.datapoints, - alias: seriesData.target, - }); + setValues(data) { + data.flotpairs = []; - series.flotpairs = series.getFlotPairs($scope.panel.nullPointMode); + 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 + + ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify(this.series); + throw this.inspector.error; + } - return series; - }; + if (this.series && this.series.length > 0) { + var lastPoint = _.last(this.series[0].datapoints); + var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null; - $scope.setColoring = function(options) { - if (options.background) { - $scope.panel.colorValue = false; - $scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)']; + if (_.isString(lastValue)) { + data.value = 0; + data.valueFormated = lastValue; + data.valueRounded = 0; } else { - $scope.panel.colorBackground = false; - $scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; + data.value = this.series[0].stats[this.panel.valueName]; + data.flotpairs = this.series[0].flotpairs; + + var decimalInfo = this.getDecimalsForValue(data.value); + var formatFunc = kbn.valueFormats[this.panel.format]; + data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals); + data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals); } - $scope.render(); - }; + } - $scope.invertColorOrder = function() { - var tmp = $scope.panel.colors[0]; - $scope.panel.colors[0] = $scope.panel.colors[2]; - $scope.panel.colors[2] = tmp; - $scope.render(); - }; - - $scope.getDecimalsForValue = function(value) { - if (_.isNumber($scope.panel.decimals)) { - return { decimals: $scope.panel.decimals, scaledDecimals: null }; - } - - var delta = value / 2; - var dec = -Math.floor(Math.log(delta) / Math.LN10); - - var magn = Math.pow(10, -dec), - norm = delta / magn, // norm is between 1.0 and 10.0 - size; - - if (norm < 1.5) { - size = 1; - } else if (norm < 3) { - size = 2; - // special case for 2.5, requires an extra decimal - if (norm > 2.25) { - size = 2.5; - ++dec; - } - } else if (norm < 7.5) { - size = 5; - } else { - size = 10; - } - - size *= magn; - - // reduce starting decimals if not needed - if (Math.floor(value) === value) { dec = 0; } - - var result: any = {}; - result.decimals = Math.max(0, dec); - result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2; - - return result; - }; - - $scope.render = function() { - var data: any = {}; - - $scope.setValues(data); - - data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) { - return Number(strVale.trim()); - }); - - data.colorMap = $scope.panel.colors; - - $scope.data = data; - $scope.$broadcast('render'); - }; - - $scope.setValues = function(data) { - data.flotpairs = []; - - if ($scope.series.length > 1) { - $scope.inspector.error = new Error(); - $scope.inspector.error.message = 'Multiple Series Error'; - $scope.inspector.error.data = 'Metric query returns ' + $scope.series.length + - ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify($scope.series); - throw $scope.inspector.error; - } - - if ($scope.series && $scope.series.length > 0) { - var lastPoint = _.last($scope.series[0].datapoints); - var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null; - - if (_.isString(lastValue)) { - data.value = 0; - data.valueFormated = lastValue; - data.valueRounded = 0; - } else { - data.value = $scope.series[0].stats[$scope.panel.valueName]; - data.flotpairs = $scope.series[0].flotpairs; - - var decimalInfo = $scope.getDecimalsForValue(data.value); - var formatFunc = kbn.valueFormats[$scope.panel.format]; - data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals); - data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals); - } - } - - // check value to text mappings - for (var i = 0; i < $scope.panel.valueMaps.length; i++) { - var map = $scope.panel.valueMaps[i]; - // special null case - if (map.value === 'null') { - if (data.value === null || data.value === void 0) { - data.valueFormated = map.text; - return; - } - continue; - } - - // value/number to text mapping - var value = parseFloat(map.value); - if (value === data.value) { + // check value to text mappings + for (var i = 0; i < this.panel.valueMaps.length; i++) { + var map = this.panel.valueMaps[i]; + // special null case + if (map.value === 'null') { + if (data.value === null || data.value === void 0) { data.valueFormated = map.text; return; } + continue; } - if (data.value === null || data.value === void 0) { - data.valueFormated = "no value"; + // value/number to text mapping + var value = parseFloat(map.value); + if (value === data.value) { + data.valueFormated = map.text; + return; } - }; + } - $scope.removeValueMap = function(map) { - var index = _.indexOf($scope.panel.valueMaps, map); - $scope.panel.valueMaps.splice(index, 1); - $scope.render(); - }; + if (data.value === null || data.value === void 0) { + data.valueFormated = "no value"; + } + }; - $scope.addValueMap = function() { - $scope.panel.valueMaps.push({value: '', op: '=', text: '' }); - }; - - $scope.init(); + removeValueMap(map) { + var index = _.indexOf(this.panel.valueMaps, map); + this.panel.valueMaps.splice(index, 1); + this.render(); + }; + addValueMap() { + this.panel.valueMaps.push({value: '', op: '=', text: '' }); } } + diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html index 76c264e7b3a..bf3227f7582 100644 --- a/public/app/plugins/panel/singlestat/editor.html +++ b/public/app/plugins/panel/singlestat/editor.html @@ -10,20 +10,20 @@
  • + ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
  • Value
  • - +
  • Postfix
  • + ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -37,19 +37,19 @@ Prefix
  • - +
  • Value
  • - +
  • Postfix
  • - +
    • @@ -60,16 +60,16 @@ Unit
  • + ng-model="ctrl.panel.format" + dropdown-typeahead="ctrl.unitFormats" + dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
  • Decimals
  • + ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
    • @@ -86,32 +86,32 @@
  • Background  - - + +
  • Value  - - + +
  • ThresholdsDefine two threshold values<br /> 50,80 will produce: <50 = Green, 50:80 = Yellow, >80 = Red
  • - +
  • Colors
  • - - - + + +
  • - invert order + invert order
    • @@ -128,27 +128,27 @@
  • Show  - - + +
  • Background mode  - - + +
  • Line Color
  • - +
  • Fill Color
  • - +
    • @@ -163,21 +163,21 @@
  • Value to text mapping
    • -
  • - +
  • +
  • - +
  • - +
  • - +
    • diff --git a/public/app/plugins/panel/singlestat/module.html b/public/app/plugins/panel/singlestat/module.html index 748915e6329..599e8724159 100644 --- a/public/app/plugins/panel/singlestat/module.html +++ b/public/app/plugins/panel/singlestat/module.html @@ -1,4 +1,4 @@ - -
    -
    -     +
    + +
    +
    diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index f4e0063a912..e54dc10321a 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -2,222 +2,225 @@ import _ from 'lodash'; import $ from 'jquery'; -import angular from 'angular'; +import 'jquery.flot'; import {SingleStatCtrl} from './controller'; +import {PanelDirective} from '../../../features/panel/panel'; -angular.module('grafana.directives').directive('singleStatPanel', singleStatPanel); +class SingleStatPanel extends PanelDirective { + templateUrl = 'app/plugins/panel/singlestat/module.html'; + controller = SingleStatCtrl; -/** @ngInject */ -function singleStatPanel($location, linkSrv, $timeout, templateSrv) { - 'use strict'; - return { - controller: SingleStatCtrl, - templateUrl: 'app/plugins/panel/singlestat/module.html', - link: function(scope, elem) { - var data, panel, linkInfo, $panelContainer; - var firstRender = true; + /** @ngInject */ + constructor(private $location, private linkSrv, private $timeout, private templateSrv) { + super(); + } - 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(); - } - } + link(scope, elem, attrs, ctrl) { + var $location = this.$location; + var linkSrv = this.linkSrv; + var $timeout = this.$timeout; + var panel = ctrl.panel; + var templateSrv = this.templateSrv; + var data, linkInfo, $panelContainer; + var firstRender = true; - render(); - scope.panelRenderingComplete(); - }); - - function setElementHeight() { - try { - var height = scope.height || panel.height || scope.row.height; - if (_.isString(height)) { - height = parseInt(height.replace('px', ''), 10); - } - - height -= 5; // padding - height -= panel.title ? 24 : 9; // subtract panel title bar - - elem.css('height', height + 'px'); - - return true; - } catch (e) { // IE throws errors sometimes - return false; + 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(); } } - function applyColoringThresholds(value, valueString) { - if (!panel.colorValue) { - return valueString; + render(); + ctrl.renderingCompleted(); + }); + + function setElementHeight() { + try { + var height = scope.height || panel.height || ctrl.row.height; + if (_.isString(height)) { + height = parseInt(height.replace('px', ''), 10); } - var color = getColorForValue(data, value); - if (color) { - return ''+ valueString + ''; - } + height -= 5; // padding + height -= panel.title ? 24 : 9; // subtract panel title bar + elem.css('height', height + 'px'); + + return true; + } catch (e) { // IE throws errors sometimes + return false; + } + } + + function applyColoringThresholds(value, valueString) { + if (!panel.colorValue) { return valueString; } - function getSpan(className, fontSize, value) { - value = templateSrv.replace(value); - return '' + - value + ''; + var color = getColorForValue(data, value); + if (color) { + return ''+ valueString + ''; } - function getBigValueHtml() { - var body = '
    '; + return valueString; + } - if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); } + function getSpan(className, fontSize, value) { + value = templateSrv.replace(value); + return '' + + value + ''; + } - var value = applyColoringThresholds(data.valueRounded, data.valueFormated); - body += getSpan('singlestat-panel-value', panel.valueFontSize, value); + function getBigValueHtml() { + var body = '
    '; - if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } + if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.prefix); } - body += '
    '; + var value = applyColoringThresholds(data.valueRounded, data.valueFormated); + body += getSpan('singlestat-panel-value', panel.valueFontSize, value); - return body; + if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); } + + body += '
    '; + + return body; + } + + function addSparkline() { + var width = elem.width() + 20; + var height = elem.height() || 100; + + var plotCanvas = $('
    '); + var plotCss: any = {}; + plotCss.position = 'absolute'; + + if (panel.sparkline.full) { + plotCss.bottom = '5px'; + plotCss.left = '-5px'; + plotCss.width = (width - 10) + 'px'; + var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5; + plotCss.height = (height - dynamicHeightMargin) + 'px'; + } else { + plotCss.bottom = "0px"; + plotCss.left = "-5px"; + plotCss.width = (width - 10) + 'px'; + plotCss.height = Math.floor(height * 0.25) + "px"; } - function addSparkline() { - var panel = scope.panel; - var width = elem.width() + 20; - var height = elem.height() || 100; + plotCanvas.css(plotCss); - var plotCanvas = $('
    '); - var plotCss: any = {}; - plotCss.position = 'absolute'; - - if (panel.sparkline.full) { - plotCss.bottom = '5px'; - plotCss.left = '-5px'; - plotCss.width = (width - 10) + 'px'; - var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5; - plotCss.height = (height - dynamicHeightMargin) + 'px'; - } else { - plotCss.bottom = "0px"; - plotCss.left = "-5px"; - plotCss.width = (width - 10) + 'px'; - plotCss.height = Math.floor(height * 0.25) + "px"; - } - - plotCanvas.css(plotCss); - - var options = { - legend: { show: false }, - series: { - lines: { - show: true, - fill: 1, - lineWidth: 1, - fillColor: panel.sparkline.fillColor, - }, + var options = { + legend: { show: false }, + series: { + lines: { + show: true, + fill: 1, + lineWidth: 1, + fillColor: panel.sparkline.fillColor, }, - yaxes: { show: false }, - xaxis: { - show: false, - mode: "time", - min: scope.range.from.valueOf(), - max: scope.range.to.valueOf(), - }, - grid: { hoverable: false, show: false }, - }; + }, + yaxes: { show: false }, + xaxis: { + show: false, + mode: "time", + min: ctrl.range.from.valueOf(), + max: ctrl.range.to.valueOf(), + }, + grid: { hoverable: false, show: false }, + }; - elem.append(plotCanvas); + elem.append(plotCanvas); - var plotSeries = { - data: data.flotpairs, - color: panel.sparkline.lineColor - }; + var plotSeries = { + data: data.flotpairs, + color: panel.sparkline.lineColor + }; - $.plot(plotCanvas, [plotSeries], options); - } + $.plot(plotCanvas, [plotSeries], options); + } - function render() { - if (!scope.data) { return; } + function render() { + if (!ctrl.data) { return; } - data = scope.data; - panel = scope.panel; + data = ctrl.data; + setElementHeight(); - setElementHeight(); + var body = getBigValueHtml(); - var body = getBigValueHtml(); - - if (panel.colorBackground && !isNaN(data.valueRounded)) { - var color = getColorForValue(data, data.valueRounded); - if (color) { - $panelContainer.css('background-color', color); - if (scope.fullscreen) { - elem.css('background-color', color); - } else { - elem.css('background-color', ''); - } - } - } else { - $panelContainer.css('background-color', ''); - elem.css('background-color', ''); - } - - elem.html(body); - - if (panel.sparkline.show) { - addSparkline(); - } - - elem.toggleClass('pointer', panel.links.length > 0); - - if (panel.links.length > 0) { - linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars); - } else { - linkInfo = null; - } - } - - function hookupDrilldownLinkTooltip() { - // drilldown link tooltip - var drilldownTooltip = $('
    hello
    "'); - - elem.mouseleave(function() { - if (panel.links.length === 0) { return;} - drilldownTooltip.detach(); - }); - - elem.click(function(evt) { - if (!linkInfo) { return; } - // ignore title clicks in title - if ($(evt).parents('.panel-header').length > 0) { return; } - - if (linkInfo.target === '_blank') { - var redirectWindow = window.open(linkInfo.href, '_blank'); - redirectWindow.location; - return; - } - - if (linkInfo.href.indexOf('http') === 0) { - window.location.href = linkInfo.href; + if (panel.colorBackground && !isNaN(data.valueRounded)) { + var color = getColorForValue(data, data.valueRounded); + if (color) { + $panelContainer.css('background-color', color); + if (scope.fullscreen) { + elem.css('background-color', color); } else { - $timeout(function() { - $location.url(linkInfo.href); - }); + elem.css('background-color', ''); } + } + } else { + $panelContainer.css('background-color', ''); + elem.css('background-color', ''); + } - drilldownTooltip.detach(); - }); + elem.html(body); - elem.mousemove(function(e) { - if (!linkInfo) { return;} + if (panel.sparkline.show) { + addSparkline(); + } - drilldownTooltip.text('click to go to: ' + linkInfo.title); - drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); - }); + elem.toggleClass('pointer', panel.links.length > 0); + + if (panel.links.length > 0) { + linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], panel.scopedVars); + } else { + linkInfo = null; } } - }; + + function hookupDrilldownLinkTooltip() { + // drilldown link tooltip + var drilldownTooltip = $('
    hello
    "'); + + elem.mouseleave(function() { + if (panel.links.length === 0) { return;} + drilldownTooltip.detach(); + }); + + elem.click(function(evt) { + if (!linkInfo) { return; } + // ignore title clicks in title + if ($(evt).parents('.panel-header').length > 0) { return; } + + if (linkInfo.target === '_blank') { + var redirectWindow = window.open(linkInfo.href, '_blank'); + redirectWindow.location; + return; + } + + if (linkInfo.href.indexOf('http') === 0) { + window.location.href = linkInfo.href; + } else { + $timeout(function() { + $location.url(linkInfo.href); + }); + } + + drilldownTooltip.detach(); + }); + + elem.mousemove(function(e) { + if (!linkInfo) { return;} + + drilldownTooltip.text('click to go to: ' + linkInfo.title); + drilldownTooltip.place_tt(e.pageX+20, e.pageY-15); + }); + } + } } function getColorForValue(data, value) { @@ -226,8 +229,11 @@ function getColorForValue(data, value) { return data.colorMap[i]; } } - return _.first(data.colorMap); } -export {singleStatPanel as panel, getColorForValue}; +export { + SingleStatPanel, + SingleStatPanel as Panel, + getColorForValue +}; diff --git a/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts b/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts index 8d532d17d80..4971c74ea1a 100644 --- a/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts +++ b/public/app/plugins/panel/singlestat/specs/singlestat-specs.ts @@ -9,9 +9,6 @@ import angular from 'angular'; import helpers from '../../../../../test/specs/helpers'; import {SingleStatCtrl} from '../controller'; - -angular.module('grafana.controllers').controller('SingleStatCtrl', SingleStatCtrl); - describe('SingleStatCtrl', function() { var ctx = new helpers.ControllerTestContext(); @@ -25,7 +22,7 @@ describe('SingleStatCtrl', function() { beforeEach(angularMocks.module('grafana.controllers')); beforeEach(ctx.providePhase()); - beforeEach(ctx.createControllerPhase('SingleStatCtrl')); + beforeEach(ctx.createPanelController(SingleStatCtrl)); beforeEach(function() { setupFunc(); @@ -33,9 +30,9 @@ describe('SingleStatCtrl', function() { data: [{target: 'test.cpu1', datapoints: ctx.datapoints}] })); - ctx.scope.refreshData(ctx.datasource); + ctx.ctrl.refreshData(ctx.datasource); ctx.scope.$digest(); - ctx.data = ctx.scope.data; + ctx.data = ctx.ctrl.data; }); }; @@ -76,7 +73,7 @@ describe('SingleStatCtrl', function() { singleStatScenario('When value to text mapping is specified', function(ctx) { ctx.setup(function() { ctx.datapoints = [[10,1]]; - ctx.scope.panel.valueMaps = [{value: '10', text: 'OK'}]; + ctx.ctrl.panel.valueMaps = [{value: '10', text: 'OK'}]; }); it('Should replace value with text', function() { diff --git a/public/app/plugins/panel/table/controller.ts b/public/app/plugins/panel/table/controller.ts index 376f36fd84d..1fa11d83858 100644 --- a/public/app/plugins/panel/table/controller.ts +++ b/public/app/plugins/panel/table/controller.ts @@ -4,132 +4,130 @@ import angular from 'angular'; import _ from 'lodash'; import moment from 'moment'; import * as FileExport from 'app/core/utils/file_export'; -import PanelMeta from 'app/features/panel/panel_meta2'; +import {MetricsPanelCtrl} from '../../../features/panel/panel'; import {transformDataToTable} from './transformers'; +import {tablePanelEditor} from './editor'; -export class TablePanelCtrl { +var panelDefaults = { + targets: [{}], + transform: 'timeseries_to_columns', + pageSize: null, + showHeader: true, + styles: [ + { + type: 'date', + pattern: 'Time', + dateFormat: 'YYYY-MM-DD HH:mm:ss', + }, + { + unit: 'short', + type: 'number', + decimals: 2, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + colorMode: null, + pattern: '/.*/', + thresholds: [], + } + ], + columns: [], + scroll: true, + fontSize: '100%', + sort: {col: 0, desc: true}, +}; + +export class TablePanelCtrl extends MetricsPanelCtrl { + pageIndex: number; + dataRaw: any; + table: any; /** @ngInject */ - constructor($scope, $rootScope, $q, panelSrv, panelHelper, annotationsSrv) { - $scope.ctrl = this; - $scope.pageIndex = 0; + constructor($scope, $injector, private annotationsSrv) { + super($scope, $injector); + this.pageIndex = 0; - $scope.panelMeta = new PanelMeta({ - panelName: 'Table', - editIcon: "fa fa-table", - fullscreen: true, - metricsEditor: true, - }); + if (this.panel.styles === void 0) { + this.panel.styles = this.panel.columns; + this.panel.columns = this.panel.fields; + delete this.panel.columns; + delete this.panel.fields; + } - $scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/table/options.html'); - $scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html'); - $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()'); + _.defaults(this.panel, panelDefaults); + } - var panelDefaults = { - targets: [{}], - transform: 'timeseries_to_columns', - pageSize: null, - showHeader: true, - styles: [ - { - type: 'date', - pattern: 'Time', - dateFormat: 'YYYY-MM-DD HH:mm:ss', - }, - { - unit: 'short', - type: 'number', - decimals: 2, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - colorMode: null, - pattern: '/.*/', - thresholds: [], - } - ], - columns: [], - scroll: true, - fontSize: '100%', - sort: {col: 0, desc: true}, - }; + initEditMode() { + super.initEditMode(); + this.addEditorTab('Options', tablePanelEditor, 1); + } - $scope.init = function() { - if ($scope.panel.styles === void 0) { - $scope.panel.styles = $scope.panel.columns; - $scope.panel.columns = $scope.panel.fields; - delete $scope.panel.columns; - delete $scope.panel.fields; - } + getExtendedMenu() { + var menu = super.getExtendedMenu(); + menu.push({text: 'Export CSV', click: 'ctrl.exportCsv()'}); + return menu; + } - _.defaults($scope.panel, panelDefaults); - panelSrv.init($scope); - }; + refreshData(datasource) { + this.pageIndex = 0; - $scope.refreshData = function(datasource) { - panelHelper.updateTimeRange($scope); - - $scope.pageIndex = 0; - - if ($scope.panel.transform === 'annotations') { - return annotationsSrv.getAnnotations($scope.dashboard).then(annotations => { - $scope.dataRaw = annotations; - $scope.render(); - }); - } - - return panelHelper.issueMetricQuery($scope, datasource) - .then($scope.dataHandler, function(err) { - $scope.render(); - throw err; + if (this.panel.transform === 'annotations') { + return this.annotationsSrv.getAnnotations(this.dashboard).then(annotations => { + this.dataRaw = annotations; + this.render(); }); - }; + } - $scope.toggleColumnSort = function(col, colIndex) { - if ($scope.panel.sort.col === colIndex) { - if ($scope.panel.sort.desc) { - $scope.panel.sort.desc = false; - } else { - $scope.panel.sort.col = null; - } + return this.issueQueries(datasource) + .then(this.dataHandler.bind(this)) + .catch(err => { + this.render(); + throw err; + }); + } + + toggleColumnSort(col, colIndex) { + if (this.panel.sort.col === colIndex) { + if (this.panel.sort.desc) { + this.panel.sort.desc = false; } else { - $scope.panel.sort.col = colIndex; - $scope.panel.sort.desc = true; + this.panel.sort.col = null; } + } else { + this.panel.sort.col = colIndex; + this.panel.sort.desc = true; + } - $scope.render(); - }; + this.render(); + } - $scope.dataHandler = function(results) { - $scope.dataRaw = results.data; - $scope.pageIndex = 0; - $scope.render(); - }; + dataHandler(results) { + this.dataRaw = results.data; + this.pageIndex = 0; + this.render(); + } - $scope.render = function() { - // automatically correct transform mode - // based on data - if ($scope.dataRaw && $scope.dataRaw.length) { - if ($scope.dataRaw[0].type === 'table') { - $scope.panel.transform = 'table'; + render() { + // automatically correct transform mode + // based on data + if (this.dataRaw && this.dataRaw.length) { + if (this.dataRaw[0].type === 'table') { + this.panel.transform = 'table'; + } else { + if (this.dataRaw[0].type === 'docs') { + this.panel.transform = 'json'; } else { - if ($scope.dataRaw[0].type === 'docs') { - $scope.panel.transform = 'json'; - } else { - if ($scope.panel.transform === 'table' || $scope.panel.transform === 'json') { - $scope.panel.transform = 'timeseries_to_rows'; - } + if (this.panel.transform === 'table' || this.panel.transform === 'json') { + this.panel.transform = 'timeseries_to_rows'; } } } + } - $scope.table = transformDataToTable($scope.dataRaw, $scope.panel); - $scope.table.sort($scope.panel.sort); - panelHelper.broadcastRender($scope, $scope.table, $scope.dataRaw); - }; + this.table = transformDataToTable(this.dataRaw, this.panel); + this.table.sort(this.panel.sort); + this.broadcastRender(this.table); + } - $scope.exportCsv = function() { - FileExport.exportTableDataToCsv($scope.table); - }; - - $scope.init(); + exportCsv() { + FileExport.exportTableDataToCsv(this.table); } } diff --git a/public/app/plugins/panel/table/editor.html b/public/app/plugins/panel/table/editor.html index 0b13c61c884..010c30326d9 100644 --- a/public/app/plugins/panel/table/editor.html +++ b/public/app/plugins/panel/table/editor.html @@ -9,9 +9,9 @@
  • + ng-model="editor.panel.transform" + ng-options="k as v.description for (k, v) in editor.transformers" + ng-change="editor.transformChanged()">
    • @@ -21,14 +21,14 @@
  • Columns
    • -
  • - +
  • + {{column.text}}
  • - +
    • @@ -46,16 +46,16 @@
  • + empty-to-null ng-model="editor.panel.pageSize" ng-change="editor.render()" ng-model-onblur>
  • - +
  • Font size
  • - +
    • @@ -68,11 +68,11 @@
    Column Styles
    -
    +
    • - +
    @@ -81,7 +81,7 @@ Name or regex
  • - +
  • Type @@ -89,8 +89,8 @@
    • @@ -100,7 +100,7 @@ Format
  • - +
    • @@ -113,8 +113,8 @@
    • @@ -122,18 +122,18 @@ ThresholdsComma seperated values
  • - +
  • Colors
  • - - - + + +
  • - invert order + invert order
    • @@ -145,8 +145,8 @@
  • + dropdown-typeahead="editor.unitFormats" + dropdown-typeahead-on-select="editor.setUnitFormat(style, $subItem)">
  • Decimals @@ -161,7 +161,7 @@
    • -
    diff --git a/public/app/plugins/panel/table/editor.ts b/public/app/plugins/panel/table/editor.ts index 42536642d4a..dde691b00f3 100644 --- a/public/app/plugins/panel/table/editor.ts +++ b/public/app/plugins/panel/table/editor.ts @@ -10,105 +10,123 @@ import {transformers} from './transformers'; import kbn from 'app/core/utils/kbn'; export class TablePanelEditorCtrl { + panel: any; + panelCtrl: any; + transformers: any; + colorModes: any; + columnStyles: any; + columnTypes: any; + fontSizes: any; + dateFormats: any; + addColumnSegment: any; + unitFormats: any; + getColumnNames: any; /** @ngInject */ - constructor($scope, $q, uiSegmentSrv) { - $scope.transformers = transformers; - $scope.unitFormats = kbn.getUnitFormats(); - $scope.colorModes = [ + constructor($scope, private $q, private uiSegmentSrv) { + $scope.editor = this; + this.panelCtrl = $scope.ctrl; + this.panel = this.panelCtrl.panel; + this.transformers = transformers; + this.unitFormats = kbn.getUnitFormats(); + this.colorModes = [ {text: 'Disabled', value: null}, {text: 'Cell', value: 'cell'}, {text: 'Value', value: 'value'}, {text: 'Row', value: 'row'}, ]; - $scope.columnTypes = [ + this.columnTypes = [ {text: 'Number', value: 'number'}, {text: 'String', value: 'string'}, {text: 'Date', value: 'date'}, ]; - $scope.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; - $scope.dateFormats = [ + this.fontSizes = ['80%', '90%', '100%', '110%', '120%', '130%', '150%', '160%', '180%', '200%', '220%', '250%']; + this.dateFormats = [ {text: 'YYYY-MM-DD HH:mm:ss', value: 'YYYY-MM-DD HH:mm:ss'}, {text: 'MM/DD/YY h:mm:ss a', value: 'MM/DD/YY h:mm:ss a'}, {text: 'MMMM D, YYYY LT', value: 'MMMM D, YYYY LT'}, ]; - $scope.addColumnSegment = uiSegmentSrv.newPlusButton(); + this.addColumnSegment = uiSegmentSrv.newPlusButton(); - $scope.getColumnOptions = function() { - if (!$scope.dataRaw) { - return $q.when([]); - } - var columns = transformers[$scope.panel.transform].getColumns($scope.dataRaw); - var segments = _.map(columns, (c: any) => uiSegmentSrv.newSegment({value: c.text})); - return $q.when(segments); - }; - - $scope.addColumn = function() { - var columns = transformers[$scope.panel.transform].getColumns($scope.dataRaw); - var column = _.findWhere(columns, {text: $scope.addColumnSegment.value}); - - if (column) { - $scope.panel.columns.push(column); - $scope.render(); - } - - var plusButton = uiSegmentSrv.newPlusButton(); - $scope.addColumnSegment.html = plusButton.html; - $scope.addColumnSegment.value = plusButton.value; - }; - - $scope.transformChanged = function() { - $scope.panel.columns = []; - $scope.render(); - }; - - $scope.removeColumn = function(column) { - $scope.panel.columns = _.without($scope.panel.columns, column); - $scope.render(); - }; - - $scope.setUnitFormat = function(column, subItem) { - column.unit = subItem.value; - $scope.render(); - }; - - $scope.addColumnStyle = function() { - var columnStyleDefaults = { - unit: 'short', - type: 'number', - decimals: 2, - colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], - colorMode: null, - pattern: '/.*/', - dateFormat: 'YYYY-MM-DD HH:mm:ss', - thresholds: [], - }; - - $scope.panel.styles.push(angular.copy(columnStyleDefaults)); - }; - - $scope.removeColumnStyle = function(style) { - $scope.panel.styles = _.without($scope.panel.styles, style); - }; - - $scope.getColumnNames = function() { - if (!$scope.table) { + // this is used from bs-typeahead and needs to be instance bound + this.getColumnNames = () => { + if (!this.panelCtrl.table) { return []; } - return _.map($scope.table.columns, function(col: any) { + return _.map(this.panelCtrl.table.columns, function(col: any) { return col.text; }); }; + } - $scope.invertColorOrder = function(index) { - var ref = $scope.panel.styles[index].colors; - var copy = ref[0]; - ref[0] = ref[2]; - ref[2] = copy; - $scope.render(); + getColumnOptions() { + if (!this.panelCtrl.dataRaw) { + return this.$q.when([]); + } + var columns = this.transformers[this.panel.transform].getColumns(this.panelCtrl.dataRaw); + var segments = _.map(columns, (c: any) => this.uiSegmentSrv.newSegment({value: c.text})); + return this.$q.when(segments); + } + + addColumn() { + var columns = transformers[this.panel.transform].getColumns(this.panelCtrl.dataRaw); + var column = _.findWhere(columns, {text: this.addColumnSegment.value}); + + if (column) { + this.panel.columns.push(column); + this.render(); + } + + var plusButton = this.uiSegmentSrv.newPlusButton(); + this.addColumnSegment.html = plusButton.html; + this.addColumnSegment.value = plusButton.value; + } + + transformChanged() { + this.panel.columns = []; + this.render(); + } + + render() { + this.panelCtrl.render(); + } + + removeColumn(column) { + this.panel.columns = _.without(this.panel.columns, column); + this.panelCtrl.render(); + } + + setUnitFormat(column, subItem) { + column.unit = subItem.value; + this.panelCtrl.render(); + }; + + addColumnStyle() { + var columnStyleDefaults = { + unit: 'short', + type: 'number', + decimals: 2, + colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"], + colorMode: null, + pattern: '/.*/', + dateFormat: 'YYYY-MM-DD HH:mm:ss', + thresholds: [], }; + this.panel.styles.push(angular.copy(columnStyleDefaults)); + } + + removeColumnStyle(style) { + this.panel.styles = _.without(this.panel.styles, style); + } + + invertColorOrder(index) { + var ref = this.panel.styles[index].colors; + var copy = ref[0]; + ref[0] = ref[2]; + ref[2] = copy; + this.panelCtrl.render(); } } diff --git a/public/app/plugins/panel/table/module.html b/public/app/plugins/panel/table/module.html index 75b9b4ce136..0c69fe6cb9b 100644 --- a/public/app/plugins/panel/table/module.html +++ b/public/app/plugins/panel/table/module.html @@ -1,28 +1,24 @@ -
    - -
    -
    -
    - - - - - - - - -
    -
    - {{col.text}} - - - - -
    -
    -
    -
    -
    -
    -     +
    +
    +
    + + + + + + + + +
    +
    + {{col.text}} + + + + +
    +
    +
    +
    +
    diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index 834bea42ba5..a273b8b08d0 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/public/app/plugins/panel/table/module.ts @@ -5,103 +5,98 @@ import kbn = require('app/core/utils/kbn'); import _ from 'lodash'; import $ from 'jquery'; import moment from 'moment'; -import angular from 'angular'; +import {PanelDirective} from '../../../features/panel/panel'; import {TablePanelCtrl} from './controller'; import {TableRenderer} from './renderer'; -import {tablePanelEditor} from './editor'; -angular.module('grafana.directives').directive('grafanaPanelTableEditor', tablePanelEditor); +class TablePanel extends PanelDirective { + templateUrl = 'app/plugins/panel/table/module.html'; + controller = TablePanelCtrl; -function tablePanel() { - 'use strict'; - return { - restrict: 'E', - templateUrl: 'app/plugins/panel/table/module.html', - controller: TablePanelCtrl, - link: function(scope, elem) { - var data; - var panel = scope.panel; - var pageCount = 0; - var formaters = []; + link(scope, elem, attrs, ctrl) { + var data; + var panel = ctrl.panel; + var pageCount = 0; + var formaters = []; - function getTableHeight() { - var panelHeight = scope.height || scope.panel.height || scope.row.height; - if (_.isString(panelHeight)) { - panelHeight = parseInt(panelHeight.replace('px', ''), 10); - } - if (pageCount > 1) { - panelHeight -= 28; - } - - return (panelHeight - 60) + 'px'; + function getTableHeight() { + var panelHeight = ctrl.height || ctrl.panel.height || ctrl.row.height; + if (_.isString(panelHeight)) { + panelHeight = parseInt(panelHeight.replace('px', ''), 10); + } + if (pageCount > 1) { + panelHeight -= 28; } - function appendTableRows(tbodyElem) { - var renderer = new TableRenderer(panel, data, scope.dashboard.timezone); - tbodyElem.empty(); - tbodyElem.html(renderer.render(scope.pageIndex)); - } - - function switchPage(e) { - var el = $(e.currentTarget); - scope.pageIndex = (parseInt(el.text(), 10)-1); - renderPanel(); - } - - function appendPaginationControls(footerElem) { - footerElem.empty(); - - var pageSize = panel.pageSize || 100; - pageCount = Math.ceil(data.rows.length / pageSize); - if (pageCount === 1) { - return; - } - - var startPage = Math.max(scope.pageIndex - 3, 0); - var endPage = Math.min(pageCount, startPage + 9); - - var paginationList = $('
      '); - - for (var i = startPage; i < endPage; i++) { - var activeClass = i === scope.pageIndex ? 'active' : ''; - var pageLinkElem = $('
    • ' + (i+1) + '
      • '); - paginationList.append(pageLinkElem); - } - - footerElem.append(paginationList); - } - - function renderPanel() { - var container = elem.find('.table-panel-container'); - var rootElem = elem.find('.table-panel-scroll'); - var tbodyElem = elem.find('tbody'); - var footerElem = elem.find('.table-panel-footer'); - - appendTableRows(tbodyElem); - - container.css({'font-size': panel.fontSize}); - appendPaginationControls(footerElem); - - rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' }); - } - - elem.on('click', '.table-panel-page-link', switchPage); - - scope.$on('$destroy', function() { - elem.off('click', '.table-panel-page-link'); - }); - - scope.$on('render', function(event, renderData) { - data = renderData || data; - if (!data) { - scope.get_data(); - return; - } - - renderPanel(); - }); + return (panelHeight - 60) + 'px'; } - }; + + function appendTableRows(tbodyElem) { + var renderer = new TableRenderer(panel, data, ctrl.dashboard.timezone); + tbodyElem.empty(); + tbodyElem.html(renderer.render(ctrl.pageIndex)); + } + + function switchPage(e) { + var el = $(e.currentTarget); + ctrl.pageIndex = (parseInt(el.text(), 10)-1); + renderPanel(); + } + + function appendPaginationControls(footerElem) { + footerElem.empty(); + + var pageSize = panel.pageSize || 100; + pageCount = Math.ceil(data.rows.length / pageSize); + if (pageCount === 1) { + return; + } + + var startPage = Math.max(ctrl.pageIndex - 3, 0); + var endPage = Math.min(pageCount, startPage + 9); + + var paginationList = $('
        '); + + for (var i = startPage; i < endPage; i++) { + var activeClass = i === ctrl.pageIndex ? 'active' : ''; + var pageLinkElem = $('
      • ' + (i+1) + '
        • '); + paginationList.append(pageLinkElem); + } + + footerElem.append(paginationList); + } + + function renderPanel() { + var panelElem = elem.parents('.panel'); + var rootElem = elem.find('.table-panel-scroll'); + var tbodyElem = elem.find('tbody'); + var footerElem = elem.find('.table-panel-footer'); + + elem.css({'font-size': panel.fontSize}); + panelElem.addClass('table-panel-wrapper'); + + appendTableRows(tbodyElem); + appendPaginationControls(footerElem); + + rootElem.css({'max-height': panel.scroll ? getTableHeight() : '' }); + } + + elem.on('click', '.table-panel-page-link', switchPage); + + scope.$on('$destroy', function() { + elem.off('click', '.table-panel-page-link'); + }); + + scope.$on('render', function(event, renderData) { + data = renderData || data; + if (data) { + renderPanel(); + } + }); + } } -export {tablePanel as panel}; +export { + TablePanel, + TablePanel as Panel +}; diff --git a/public/app/plugins/panel/text/editor.html b/public/app/plugins/panel/text/editor.html index b3b8afbbec0..2fefb438e7e 100644 --- a/public/app/plugins/panel/text/editor.html +++ b/public/app/plugins/panel/text/editor.html @@ -1,17 +1,17 @@
        - +
        -
        - +
        +
        -
        diff --git a/public/app/plugins/panel/text/module.html b/public/app/plugins/panel/text/module.html index 5a933d5acc3..12a02597384 100644 --- a/public/app/plugins/panel/text/module.html +++ b/public/app/plugins/panel/text/module.html @@ -1,3 +1 @@ - -

        -         +

        diff --git a/public/app/plugins/panel/text/module.js b/public/app/plugins/panel/text/module.js deleted file mode 100644 index e0e21c8e1ae..00000000000 --- a/public/app/plugins/panel/text/module.js +++ /dev/null @@ -1,113 +0,0 @@ -define([ - 'angular', - 'app/app', - 'lodash', - 'require', - 'app/features/panel/panel_meta', -], -function (angular, app, _, require, PanelMeta) { - 'use strict'; - - var converter; - - /** @ngInject */ - function TextPanelCtrl($scope, templateSrv, $sce, panelSrv) { - - $scope.panelMeta = new PanelMeta({ - panelName: 'Text', - editIcon: "fa fa-text-width", - fullscreen: true, - }); - - $scope.panelMeta.addEditorTab('Edit text', 'app/plugins/panel/text/editor.html'); - - // Set and populate defaults - var _d = { - title : 'default title', - mode : "markdown", // 'html', 'markdown', 'text' - content : "", - style: {}, - }; - - _.defaults($scope.panel, _d); - - $scope.init = function() { - panelSrv.init($scope); - $scope.ready = false; - $scope.render(); - }; - - $scope.refreshData = function() { - $scope.panelMeta.loading = false; - $scope.render(); - }; - - $scope.render = function() { - if ($scope.panel.mode === 'markdown') { - $scope.renderMarkdown($scope.panel.content); - } - else if ($scope.panel.mode === 'html') { - $scope.updateContent($scope.panel.content); - } - else if ($scope.panel.mode === 'text') { - $scope.renderText($scope.panel.content); - } - $scope.panelRenderingComplete(); - }; - - $scope.renderText = function(content) { - content = content - .replace(/&/g, '&') - .replace(/>/g, '>') - .replace(/'); - - $scope.updateContent(content); - }; - - $scope.renderMarkdown = function(content) { - var text = content - .replace(/&/g, '&') - .replace(/>/g, '>') - .replace(/ + +import _ from 'lodash'; +import {PanelDirective, PanelCtrl} from '../../../features/panel/panel'; + + // Set and populate defaults +var panelDefaults = { + mode : "markdown", // 'html', 'markdown', 'text' + content : "# title", +}; + +export class TextPanelCtrl extends PanelCtrl { + converter: any; + content: string; + + /** @ngInject */ + constructor($scope, $injector, private templateSrv, private $sce) { + super($scope, $injector); + + _.defaults(this.panel, panelDefaults); + } + + initEditMode() { + this.icon = 'fa fa-text-width'; + this.addEditorTab('Options', 'public/app/plugins/panel/text/editor.html'); + } + + refresh() { + this.render(); + } + + render() { + if (this.panel.mode === 'markdown') { + this.renderMarkdown(this.panel.content); + } else if (this.panel.mode === 'html') { + this.updateContent(this.panel.content); + } else if (this.panel.mode === 'text') { + this.renderText(this.panel.content); + } + this.renderingCompleted(); + } + + renderText(content) { + content = content + .replace(/&/g, '&') + .replace(/>/g, '>') + .replace(/'); + this.updateContent(content); + } + + renderMarkdown(content) { + var text = content + .replace(/&/g, '&') + .replace(/>/g, '>') + .replace(/ { + this.converter = new Showdown.converter(); + this.$scope.$apply(() => { + this.updateContent(this.converter.makeHtml(text)); + }); + }); + } + } + + updateContent(html) { + try { + this.content = this.$sce.trustAsHtml(this.templateSrv.replace(html, this.panel.scopedVars)); + } catch (e) { + console.log('Text panel error: ', e); + this.content = this.$sce.trustAsHtml(html); + } + } +} + +class TextPanel extends PanelDirective { + templateUrl = `app/plugins/panel/text/module.html`; + controller = TextPanelCtrl; +} + +export {TextPanel as Panel} diff --git a/public/app/plugins/panel/unknown/module.html b/public/app/plugins/panel/unknown/module.html new file mode 100644 index 00000000000..1e2e475428e --- /dev/null +++ b/public/app/plugins/panel/unknown/module.html @@ -0,0 +1,5 @@ +
        + Unknown panel type: {{ctrl.panel.type}} +
        -export function unknownPanelDirective() { - return { - restrict: 'E', - template: ` - -
        - Unknown panel type: {{panel.type}} -
        -         - `, - }; +import {PanelDirective} from '../../../features/panel/panel'; + +class UnknownPanel extends PanelDirective { + templateUrl = 'public/app/plugins/panel/unknown/module.html'; +} + + +export { + UnknownPanel, + UnknownPanel as Panel } diff --git a/public/test/specs/dashboardViewStateSrv-specs.js b/public/test/specs/dashboardViewStateSrv-specs.js index 8d0daa7ea48..b33c7156392 100644 --- a/public/test/specs/dashboardViewStateSrv-specs.js +++ b/public/test/specs/dashboardViewStateSrv-specs.js @@ -9,7 +9,8 @@ define([ beforeEach(module('grafana.services')); beforeEach(inject(function(dashboardViewStateSrv, $location, $rootScope) { - $rootScope.onAppEvent = function(){}; + $rootScope.onAppEvent = function() {}; + $rootScope.dashboard = {meta: {}}; viewState = dashboardViewStateSrv.create($rootScope); location = $location; })); @@ -19,7 +20,7 @@ define([ var updateState = { fullscreen: true, edit: true, panelId: 1 }; viewState.update(updateState); expect(location.search()).to.eql(updateState); - expect(viewState.fullscreen).to.be(true); + expect(viewState.dashboard.meta.fullscreen).to.be(true); expect(viewState.state.fullscreen).to.be(true); }); }); @@ -29,7 +30,7 @@ define([ viewState.update({fullscreen: true, panelId: 1, edit: true}); viewState.update({fullscreen: false}); expect(location.search()).to.eql({}); - expect(viewState.fullscreen).to.be(false); + expect(viewState.dashboard.meta.fullscreen).to.be(false); expect(viewState.state.fullscreen).to.be(null); }); }); diff --git a/public/test/specs/helpers.js b/public/test/specs/helpers.js index ded17428d8f..c1cc56b00b9 100644 --- a/public/test/specs/helpers.js +++ b/public/test/specs/helpers.js @@ -1,7 +1,8 @@ define([ 'lodash', + 'app/core/config', 'app/core/utils/datemath', -], function(_, dateMath) { +], function(_, config, dateMath) { 'use strict'; function ControllerTestContext() { @@ -36,6 +37,28 @@ define([ }); }; + this.createPanelController = function(Ctrl) { + return inject(function($controller, $rootScope, $q, $location, $browser) { + self.scope = $rootScope.$new(); + self.$location = $location; + self.$browser = $browser; + self.$q = $q; + self.panel = {type: 'test'}; + self.dashboard = {meta: {}}; + + $rootScope.appEvent = sinon.spy(); + $rootScope.onAppEvent = sinon.spy(); + $rootScope.colors = []; + + for (var i = 0; i < 50; i++) { $rootScope.colors.push('#' + i); } + + config.panels['test'] = {info: {}}; + self.ctrl = $controller(Ctrl, {$scope: self.scope}, { + panel: self.panel, dashboard: self.dashboard + }); + }); + }; + this.createControllerPhase = function(controllerName) { return inject(function($controller, $rootScope, $q, $location, $browser) { self.scope = $rootScope.$new(); @@ -44,7 +67,7 @@ define([ self.scope.contextSrv = {}; self.scope.panel = {}; self.scope.row = { panels:[] }; - self.scope.dashboard = {}; + self.scope.dashboard = {meta: {}}; self.scope.dashboardMeta = {}; self.scope.dashboardViewState = new DashboardViewStateStub(); self.scope.appEvent = sinon.spy(); @@ -59,7 +82,6 @@ define([ self.controller = $controller(controllerName, { $scope: self.scope }); - }); }; } @@ -74,10 +96,10 @@ define([ self.$routeParams = {}; this.providePhase = function(mocks) { - return module(function($provide) { - _.each(mocks, function(key) { - $provide.value(key, self[key]); - }); + return module(function($provide) { + _.each(mocks, function(key) { + $provide.value(key, self[key]); + }); }); }; diff --git a/public/test/specs/seriesOverridesCtrl-specs.js b/public/test/specs/seriesOverridesCtrl-specs.js index ba820f065ab..f4daa0fa4e5 100644 --- a/public/test/specs/seriesOverridesCtrl-specs.js +++ b/public/test/specs/seriesOverridesCtrl-specs.js @@ -9,16 +9,25 @@ define([ var popoverSrv = {}; beforeEach(module('grafana.services')); - beforeEach(module('grafana.panels.graph')); + beforeEach(module('grafana.controllers')); beforeEach(ctx.providePhase({ popoverSrv: popoverSrv })); - beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl')); - beforeEach(function() { + beforeEach(inject(function($rootScope, $controller) { + // ctx.createControllerPhase('SeriesOverridesCtrl')); + // beforeEach(function() { + ctx.scope = $rootScope.$new(); + ctx.scope.ctrl = { + render: sinon.spy(), + seriesList: [] + }; ctx.scope.render = function() {}; - }); + ctx.controller = $controller('SeriesOverridesCtrl', { + $scope: ctx.scope + }); + })); describe('When setting an override', function() { beforeEach(function() { diff --git a/public/vendor/npm/angular2/animate.d.ts b/public/vendor/npm/angular2/animate.d.ts deleted file mode 100644 index 7373303dc3d..00000000000 --- a/public/vendor/npm/angular2/animate.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { Animation } from './src/animate/animation'; -export { AnimationBuilder } from './src/animate/animation_builder'; -export { BrowserDetails } from './src/animate/browser_details'; -export { CssAnimationBuilder } from './src/animate/css_animation_builder'; -export { CssAnimationOptions } from './src/animate/css_animation_options'; diff --git a/public/vendor/npm/angular2/bootstrap.d.ts b/public/vendor/npm/angular2/bootstrap.d.ts deleted file mode 100644 index 1b3ff0175bc..00000000000 --- a/public/vendor/npm/angular2/bootstrap.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * See {@link bootstrap} for more information. - * @deprecated - */ -export { bootstrap } from 'angular2/platform/browser'; -export { AngularEntrypoint } from 'angular2/src/core/angular_entrypoint'; diff --git a/public/vendor/npm/angular2/bootstrap_static.d.ts b/public/vendor/npm/angular2/bootstrap_static.d.ts deleted file mode 100644 index 3be255a8ba1..00000000000 --- a/public/vendor/npm/angular2/bootstrap_static.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * See {@link bootstrap} for more information. - * @deprecated - */ -export { bootstrapStatic } from 'angular2/platform/browser_static'; -export { AngularEntrypoint } from 'angular2/src/core/angular_entrypoint'; diff --git a/public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js b/public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js deleted file mode 100644 index c73992360ff..00000000000 --- a/public/vendor/npm/angular2/bundles/angular2-all-testing.umd.dev.js +++ /dev/null @@ -1,39515 +0,0 @@ -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("Rx"), require("rxjs/observable/fromPromise"), require("rxjs/operator/toPromise"), require("rxjs/subject/ReplaySubject"), require("rxjs/operator/take")); - else if(typeof define === 'function' && define.amd) - define(["Rx", "rxjs/observable/fromPromise", "rxjs/operator/toPromise", "rxjs/subject/ReplaySubject", "rxjs/operator/take"], factory); - else if(typeof exports === 'object') - exports["ng"] = factory(require("Rx"), require("rxjs/observable/fromPromise"), require("rxjs/operator/toPromise"), require("rxjs/subject/ReplaySubject"), require("rxjs/operator/take")); - else - root["ng"] = factory(root["Rx"], root["Rx"]["Observable"], root["Rx"]["Observable"]["prototype"], root["Rx"], root["Rx"]["Observable"]["prototype"]); -})(this, function(__WEBPACK_EXTERNAL_MODULE_62__, __WEBPACK_EXTERNAL_MODULE_63__, __WEBPACK_EXTERNAL_MODULE_64__, __WEBPACK_EXTERNAL_MODULE_279__, __WEBPACK_EXTERNAL_MODULE_280__) { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) -/******/ return installedModules[moduleId].exports; -/******/ -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.loaded = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ function(module, exports, __webpack_require__) { - - module.exports = __webpack_require__(1); - - -/***/ }, -/* 1 */ -/***/ function(module, exports, __webpack_require__) { - - // this bundle is almost identical to the angular2.umd.js - // the only difference being "testing" export - exports.core = __webpack_require__(2); - exports.common = __webpack_require__(104); - exports.compiler = __webpack_require__(147); - exports.platform = { - browser: __webpack_require__(179), - common_dom: __webpack_require__(203) - }; - exports.http = __webpack_require__(209); - exports.router = __webpack_require__(224); - exports.router_link_dsl = __webpack_require__(248); - exports.instrumentation = __webpack_require__(250); - exports.upgrade = __webpack_require__(251); - // this is the only difference as compared to the angular2-all.umd.js bundle - exports.testing = __webpack_require__(259); - exports.http.testing = __webpack_require__(277); - exports.router.testing = __webpack_require__(281); - - -/***/ }, -/* 2 */ -/***/ function(module, exports, __webpack_require__) { - - function __export(m) { - for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; - } - /** - * @module - * @description - * Starting point to import all public core APIs. - */ - __export(__webpack_require__(3)); - __export(__webpack_require__(57)); - __export(__webpack_require__(58)); - __export(__webpack_require__(6)); - __export(__webpack_require__(59)); - var lang_1 = __webpack_require__(5); - exports.enableProdMode = lang_1.enableProdMode; - var application_ref_1 = __webpack_require__(65); - exports.platform = application_ref_1.platform; - exports.createNgZone = application_ref_1.createNgZone; - exports.PlatformRef = application_ref_1.PlatformRef; - exports.ApplicationRef = application_ref_1.ApplicationRef; - var application_tokens_1 = __webpack_require__(67); - exports.APP_ID = application_tokens_1.APP_ID; - exports.APP_COMPONENT = application_tokens_1.APP_COMPONENT; - exports.APP_INITIALIZER = application_tokens_1.APP_INITIALIZER; - exports.PACKAGE_ROOT_URL = application_tokens_1.PACKAGE_ROOT_URL; - exports.PLATFORM_INITIALIZER = application_tokens_1.PLATFORM_INITIALIZER; - __export(__webpack_require__(98)); - __export(__webpack_require__(99)); - __export(__webpack_require__(100)); - var debug_element_1 = __webpack_require__(101); - exports.DebugElement = debug_element_1.DebugElement; - exports.Scope = debug_element_1.Scope; - exports.inspectElement = debug_element_1.inspectElement; - exports.asNativeElements = debug_element_1.asNativeElements; - __export(__webpack_require__(68)); - __export(__webpack_require__(24)); - __export(__webpack_require__(95)); - __export(__webpack_require__(102)); - __export(__webpack_require__(103)); - __export(__webpack_require__(16)); - - -/***/ }, -/* 3 */ -/***/ function(module, exports, __webpack_require__) { - - /** - * This indirection is needed to free up Component, etc symbols in the public API - * to be used by the decorator versions of these annotations. - */ - var di_1 = __webpack_require__(4); - exports.QueryMetadata = di_1.QueryMetadata; - exports.ContentChildrenMetadata = di_1.ContentChildrenMetadata; - exports.ContentChildMetadata = di_1.ContentChildMetadata; - exports.ViewChildrenMetadata = di_1.ViewChildrenMetadata; - exports.ViewQueryMetadata = di_1.ViewQueryMetadata; - exports.ViewChildMetadata = di_1.ViewChildMetadata; - exports.AttributeMetadata = di_1.AttributeMetadata; - var directives_1 = __webpack_require__(23); - exports.ComponentMetadata = directives_1.ComponentMetadata; - exports.DirectiveMetadata = directives_1.DirectiveMetadata; - exports.PipeMetadata = directives_1.PipeMetadata; - exports.InputMetadata = directives_1.InputMetadata; - exports.OutputMetadata = directives_1.OutputMetadata; - exports.HostBindingMetadata = directives_1.HostBindingMetadata; - exports.HostListenerMetadata = directives_1.HostListenerMetadata; - var view_1 = __webpack_require__(56); - exports.ViewMetadata = view_1.ViewMetadata; - exports.ViewEncapsulation = view_1.ViewEncapsulation; - var di_2 = __webpack_require__(4); - var directives_2 = __webpack_require__(23); - var view_2 = __webpack_require__(56); - var decorators_1 = __webpack_require__(9); - // TODO(alexeagle): remove the duplication of this doc. It is copied from ComponentMetadata. - /** - * 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 `providers` and `viewProviders`. - * - * All template expressions and statements are then evaluated against the component instance. - * - * For details on the `@View` annotation, see {@link ViewMetadata}. - * - * ## Lifecycle hooks - * - * When the component class implements some {@link angular2/lifecycle_hooks} the callbacks are - * called by the change detection at defined points in time during the life of the component. - * - * ### Example - * - * {@example core/ts/metadata/metadata.ts region='component'} - */ - exports.Component = decorators_1.makeDecorator(directives_2.ComponentMetadata, function (fn) { return fn.View = exports.View; }); - // TODO(alexeagle): remove the duplication of this doc. It is copied from DirectiveMetadata. - /** - * 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]', - * inputs: [ - * '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 `ngFor`, an - * `ngIf`, or an `ngSwitch`. - * - * ``` - * @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]', - * inputs: [ - * '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 `