From b0dd79cbfd9cb7268846e325eee19a4e96fc66a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Jan 2016 17:51:18 -0500 Subject: [PATCH] feat(panels): MetricsPanelCtrl is starting to work --- .../app/features/panel/metrics_panel_ctrl.ts | 145 +++++++++++++++++- public/app/features/panel/panel.ts | 7 +- public/app/features/panel/panel_ctrl.ts | 5 +- public/app/headers/common.d.ts | 4 +- public/app/partials/metrics.html | 4 +- public/app/plugins/panel/test/module.html | 1 + public/app/plugins/panel/test/module.ts | 11 +- 7 files changed, 162 insertions(+), 15 deletions(-) diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 35f4043595c..b95535441f2 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -1,28 +1,58 @@ /// 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.$timeout = $injector.get('$timeout'); + 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.getData(); + } + }, 30);; } initEditorTabs() { this.addEditorTab('Metrics', () => { return { templateUrl: 'public/app/partials/metrics.html' }; }); + this.datasources = this.datasourceSrv.getMetricSources(); } refresh() { @@ -31,7 +61,7 @@ class MetricsPanelCtrl extends PanelCtrl { refreshData(data) { // null op - return data; + return this.$q.when(data); } loadSnapshot(data) { @@ -40,8 +70,10 @@ class MetricsPanelCtrl extends PanelCtrl { } 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); @@ -49,21 +81,128 @@ class MetricsPanelCtrl extends PanelCtrl { 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) || this.$q.when({}); + return this.refreshData(this.datasource); }).then(() => { this.loading = false; - }, err => { + }).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(); + } + + setTimeRenderStart() { + this.timing = this.timing || {}; + this.timing.renderStart = new Date().getTime(); + } + + setTimeRenderEnd() { + this.timing.renderEnd = 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() { + 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 this.datasource.query(metricsQuery).then(results => { + this.setTimeQueryEnd(); + + if (this.dashboard.snapshot) { + this.panel.snapshotData = results; + } + + return results; + }); + } } export {MetricsPanelCtrl}; diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index 4d80bb9dade..39d3a76005a 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -25,11 +25,14 @@ class PanelDirective { controllerAs: 'ctrl', bindToController: true, scope: {dashboard: "=", panel: "=", row: "="}, - link: this.link + link: (scope, elem, attrs, ctrl) => { + ctrl.init(); + this.link(scope, elem, attrs, ctrl); + } }; } - link(scope, elem) { + link(scope, elem, attrs, ctrl) { return null; } } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index f762a964103..fb44a3d260d 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -27,11 +27,14 @@ export class PanelCtrl { this.name = plugin.name; this.icon = plugin.info.icon; this.editorTabIndex = 0; - this.publishAppEvent('panel-instantiated', {scope: $scope}); $scope.$on("refresh", () => this.refresh()); } + init() { + this.publishAppEvent('panel-instantiated', {scope: this.$scope}); + } + refresh() { return; } 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/metrics.html b/public/app/partials/metrics.html index a6f8d022407..390f5627486 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -18,7 +18,7 @@ @@ -38,7 +38,7 @@ diff --git a/public/app/plugins/panel/test/module.html b/public/app/plugins/panel/test/module.html index 47b59289210..10b5eeae608 100644 --- a/public/app/plugins/panel/test/module.html +++ b/public/app/plugins/panel/test/module.html @@ -1,4 +1,5 @@

Test panel! panel.id: {{ctrl.panel.id}} + data: {{ctrl.data}}

diff --git a/public/app/plugins/panel/test/module.ts b/public/app/plugins/panel/test/module.ts index 6fe2a3325b0..21b6479c19a 100644 --- a/public/app/plugins/panel/test/module.ts +++ b/public/app/plugins/panel/test/module.ts @@ -13,12 +13,13 @@ export class TestPanelCtrl extends MetricsPanelCtrl { super($scope, $injector); } - initEditorTabs() { - super.initEditorTabs(); - } - refreshData(data) { - console.log('refreshData: ', data); + return this.issueQueries().then(res => { + this.data = res.data[0].target; + console.log('issueQueries', res); + }).catch(err => { + console.log('Errrrr! in test panel', err); + }); } }