From 9c6698e87b13de400f876e2dc538565ec1c63d0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 25 Jan 2016 15:09:37 -0500 Subject: [PATCH] feat(panels): progress on new panel infrastructure, base classes --- public/app/features/dashboard/viewStateSrv.js | 7 ++- .../app/features/panel/metrics_panel_ctrl.ts | 60 ++++++++++++++++--- public/app/features/panel/panel.ts | 2 +- public/app/features/panel/panel_ctrl.ts | 7 ++- public/app/features/panel/panel_editor_tab.ts | 2 +- public/app/features/panel/partials/panel.html | 4 +- public/app/features/panel/query_editor.ts | 10 ++-- public/app/partials/dashboard.html | 6 +- public/app/partials/metrics.html | 16 ++--- public/app/partials/panelgeneral.html | 14 ++--- .../app/plugins/datasource/graphite/module.js | 5 +- .../graphite/partials/query.editor.html | 4 +- .../plugins/datasource/graphite/query_ctrl.js | 9 +-- public/app/plugins/panel/test/module.ts | 15 ++++- public/app/plugins/panel/text/editor.html | 10 ++-- 15 files changed, 118 insertions(+), 53 deletions(-) diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index c523cd709d7..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) { @@ -74,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; @@ -92,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); } @@ -148,13 +149,13 @@ function (angular, _, $) { ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; ctrl.height = ctrl.editMode ? editHeight : fullscreenHeight; + ctrl.fullscreen = true; this.oldTimeRange = ctrl.range; this.fullscreenPanel = panelScope; $(window).scrollTop(0); - panelScope.fullscreen = true; this.$scope.appEvent('panel-fullscreen-enter', {panelId: ctrl.panel.id}); $timeout(function() { diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index 968bcea52b6..2ce1dfa847f 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -3,18 +3,64 @@ import config from 'app/core/config'; import {PanelCtrl} from './panel_ctrl'; -function metricsEditorTab() { - return {templateUrl: 'public/app/partials/metrics.html'}; -} - class MetricsPanelCtrl extends PanelCtrl { - constructor($scope) { + error: boolean; + loading: boolean; + datasource: any; + + constructor($scope, private $q, private datasourceSrv) { super($scope); + this.editorTabIndex = 1; + + if (!this.panel.targets) { + this.panel.targets = [{}]; + } } initEditorTabs() { - super.initEditorTabs(); - this.editorTabs.push({title: 'Metrics', directiveFn: metricsEditorTab}); + this.addEditorTab('Metrics', () => { + return { templateUrl: 'public/app/partials/metrics.html' }; + }); + } + + refresh() { + this.getData(); + } + + refreshData(data) { + // null op + return data; + } + + loadSnapshot(data) { + // null op + return data; + } + + getData() { + if (this.otherPanelInFullscreenMode()) { return; } + + if (this.panel.snapshotData) { + if (this.loadSnapshot) { + this.loadSnapshot(this.panel.snapshotData); + } + return; + } + + delete this.error; + this.loading = true; + + this.datasourceSrv.get(this.panel.datasource).then(datasource => { + this.datasource = datasource; + return this.refreshData(this.datasource) || this.$q.when({}); + }).then(() => { + this.loading = false; + }, err => { + console.log('Panel data error:', err); + this.loading = false; + this.error = err.message || "Timeseries data request error"; + this.inspector = {error: err}; + }); } } diff --git a/public/app/features/panel/panel.ts b/public/app/features/panel/panel.ts index 08ede83eb95..4d80bb9dade 100644 --- a/public/app/features/panel/panel.ts +++ b/public/app/features/panel/panel.ts @@ -29,7 +29,7 @@ class PanelDirective { }; } - link(scope) { + link(scope, elem) { return null; } } diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 0fb94e660d5..9bceaa482c5 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -15,7 +15,8 @@ export class PanelCtrl { icon: string; editorTabs: any; $scope: any; - isMetricsPanel: boolean; + fullscreen: boolean; + inspector: any; constructor($scope) { var plugin = config.panels[this.panel.type]; @@ -77,4 +78,8 @@ export class PanelCtrl { menu.push({text: 'Share', click: 'ctrl.share(); dismiss();'}); return menu; } + + otherPanelInFullscreenMode() { + return this.dashboard.meta.fullscreen && !this.fullscreen; + } } diff --git a/public/app/features/panel/panel_editor_tab.ts b/public/app/features/panel/panel_editor_tab.ts index 56e3078962e..68b1e67c01c 100644 --- a/public/app/features/panel/panel_editor_tab.ts +++ b/public/app/features/panel/panel_editor_tab.ts @@ -9,7 +9,7 @@ var directiveModule = angular.module('grafana.directives'); function panelEditorTab(dynamicDirectiveSrv) { return dynamicDirectiveSrv.create({ scope: { - panelCtrl: "=", + ctrl: "=", editorTab: "=", }, directive: scope => { diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html index bf946d16fc3..55ed28eafc4 100644 --- a/public/app/features/panel/partials/panel.html +++ b/public/app/features/panel/partials/panel.html @@ -1,4 +1,4 @@ -
+
@@ -39,7 +39,7 @@
- +
diff --git a/public/app/features/panel/query_editor.ts b/public/app/features/panel/query_editor.ts index 01beceaee99..5b493362762 100644 --- a/public/app/features/panel/query_editor.ts +++ b/public/app/features/panel/query_editor.ts @@ -5,11 +5,11 @@ 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; + scope.ctrl.datasource = ds; if (!scope.target.refId) { scope.target.refId = 'A'; @@ -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/partials/dashboard.html b/public/app/partials/dashboard.html index 7aeefb20730..5a0464dc099 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -23,7 +23,7 @@
-
+
@@ -79,7 +79,7 @@
-
@@ -98,7 +98,7 @@
-
+
ADD ROW diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index b5ff9f50327..a6f8d022407 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 d0e41e5180f..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/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..76c0d6ddb65 100755 --- a/public/app/plugins/datasource/graphite/partials/query.editor.html +++ b/public/app/plugins/datasource/graphite/partials/query.editor.html @@ -48,14 +48,14 @@ {{target.refId}}
  • - +
    • - +