From 543c67a2974e1cf58c2cf210216c5f1a334a1992 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Oct 2018 16:31:20 +0200 Subject: [PATCH] react panels: got data --- public/app/app.ts | 45 ++++++++----------- public/app/core/core.ts | 2 - public/app/core/core_module.ts | 19 +++++++- .../features/dashboard/dashgrid/DataPanel.tsx | 16 ++++++- .../dashboard/dashgrid/PanelChrome.tsx | 7 +-- .../dashboard/dashgrid/QueriesTab.tsx | 4 -- public/app/features/panel/metrics_tab.ts | 3 ++ .../grafana_app.ts => routes/GrafanaCtrl.ts} | 0 8 files changed, 57 insertions(+), 39 deletions(-) rename public/app/{core/components/grafana_app.ts => routes/GrafanaCtrl.ts} (100%) diff --git a/public/app/app.ts b/public/app/app.ts index 298bf5609cd..9647fbe5416 100644 --- a/public/app/app.ts +++ b/public/app/app.ts @@ -26,8 +26,12 @@ _.move = (array, fromIndex, toIndex) => { return array; }; -import { coreModule, registerAngularDirectives } from './core/core'; -import { setupAngularRoutes } from './routes/routes'; +import { coreModule, angularModules } from 'app/core/core_module'; +import { registerAngularDirectives } from 'app/core/core'; +import { setupAngularRoutes } from 'app/routes/routes'; + +import 'app/routes/GrafanaCtrl'; +import 'app/features/all'; // import symlinked extensions const extensionsIndex = (require as any).context('.', true, /extensions\/index.ts/); @@ -109,39 +113,26 @@ export class GrafanaApp { 'react', ]; - const moduleTypes = ['controllers', 'directives', 'factories', 'services', 'filters', 'routes']; - - _.each(moduleTypes, type => { - const moduleName = 'grafana.' + type; - this.useModule(angular.module(moduleName, [])); - }); - // makes it possible to add dynamic stuff - this.useModule(coreModule); + _.each(angularModules, m => { + this.useModule(m); + }); // register react angular wrappers coreModule.config(setupAngularRoutes); registerAngularDirectives(); - const preBootRequires = [import('app/features/all')]; + // disable tool tip animation + $.fn.tooltip.defaults.animation = false; - Promise.all(preBootRequires) - .then(() => { - // disable tool tip animation - $.fn.tooltip.defaults.animation = false; - - // bootstrap the app - angular.bootstrap(document, this.ngModuleDependencies).invoke(() => { - _.each(this.preBootModules, module => { - _.extend(module, this.registerFunctions); - }); - - this.preBootModules = null; - }); - }) - .catch(err => { - console.log('Application boot failed:', err); + // bootstrap the app + angular.bootstrap(document, this.ngModuleDependencies).invoke(() => { + _.each(this.preBootModules, module => { + _.extend(module, this.registerFunctions); }); + + this.preBootModules = null; + }); } } diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 173d6b80b15..18a625d3307 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -19,7 +19,6 @@ import './components/colorpicker/spectrum_picker'; import './services/search_srv'; import './services/ng_react'; -import { grafanaAppDirective } from './components/grafana_app'; import { searchDirective } from './components/search/search'; import { infoPopover } from './components/info_popover'; import { navbarDirective } from './components/navbar/navbar'; @@ -60,7 +59,6 @@ export { registerAngularDirectives, arrayJoin, coreModule, - grafanaAppDirective, navbarDirective, searchDirective, liveSrv, diff --git a/public/app/core/core_module.ts b/public/app/core/core_module.ts index f6c30e6cf15..94b0aeaff7f 100644 --- a/public/app/core/core_module.ts +++ b/public/app/core/core_module.ts @@ -1,2 +1,19 @@ import angular from 'angular'; -export default angular.module('grafana.core', ['ngRoute']); + +console.log('core module code'); +const coreModule = angular.module('grafana.core', ['ngRoute']); + +// legacy modules +const angularModules = [ + coreModule, + angular.module('grafana.controllers', []), + angular.module('grafana.directives', []), + angular.module('grafana.factories', []), + angular.module('grafana.services', []), + angular.module('grafana.filters', []), + angular.module('grafana.routes', []), +]; + +export { angularModules, coreModule }; + +export default coreModule; diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx index 6b8aa8c4a91..a786e9de6d1 100644 --- a/public/app/features/dashboard/dashgrid/DataPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx @@ -1,5 +1,5 @@ // Library -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; // Services import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; @@ -29,7 +29,7 @@ export interface State { data: any; } -export class DataPanel extends PureComponent { +export class DataPanel extends Component { static defaultProps = { isVisible: true, panelId: 1, @@ -48,9 +48,20 @@ export class DataPanel extends PureComponent { componentDidMount() { console.log('DataPanel mount'); + } + + async componentDidUpdate(prevProps: Props) { + if (!this.hasPropsChanged(prevProps)) { + return; + } + this.issueQueries(); } + hasPropsChanged(prevProps: Props) { + return this.props.refreshCounter !== prevProps.refreshCounter || this.props.isVisible !== prevProps.isVisible; + } + issueQueries = async () => { const { isVisible, queries, datasource, panelId, dashboardId, timeRange } = this.props; @@ -83,6 +94,7 @@ export class DataPanel extends PureComponent { cacheTimeout: null, }; + console.log('issueing react query', queryOptions); const resp = await ds.query(queryOptions); console.log(resp); } catch (err) { diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 29797664cd9..9a4318e602f 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -34,8 +34,8 @@ export class PanelChrome extends PureComponent { } componentDidMount() { - this.props.dashboard.panelInitialized(this.props.panel); this.props.panel.events.on('refresh', this.onRefresh); + this.props.dashboard.panelInitialized(this.props.panel); } componentWillUnmount() { @@ -53,13 +53,13 @@ export class PanelChrome extends PureComponent { }; get isVisible() { - return this.props.dashboard.otherPanelInFullscreen(this.props.panel); + return !this.props.dashboard.otherPanelInFullscreen(this.props.panel); } render() { const { panel, dashboard } = this.props; const { datasource, targets } = panel; - const { refreshCounter } = this.state; + const { refreshCounter, timeRange } = this.state; const PanelComponent = this.props.component; return ( @@ -69,6 +69,7 @@ export class PanelChrome extends PureComponent { diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index 671075b8c47..efc6a6c0048 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -23,10 +23,6 @@ export class QueriesTab extends React.Component { const { panel, dashboard } = this.props; - // make sure the panel has datasource & queries properties - panel.datasource = panel.datasource || null; - panel.targets = panel.targets || [{}]; - const loader = getAngularLoader(); const template = ''; const scopeProps = { diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts index c5f945778de..18b1102875e 100644 --- a/public/app/features/panel/metrics_tab.ts +++ b/public/app/features/panel/metrics_tab.ts @@ -25,6 +25,9 @@ export class MetricsTabCtrl { $scope.ctrl = this; this.panel = this.panelCtrl.panel; + this.panel.datasource = this.panel.datasource || null; + this.panel.targets = this.panel.targets || [{}]; + this.dashboard = this.panelCtrl.dashboard; this.datasources = datasourceSrv.getMetricSources(); this.panelDsValue = this.panelCtrl.panel.datasource; diff --git a/public/app/core/components/grafana_app.ts b/public/app/routes/GrafanaCtrl.ts similarity index 100% rename from public/app/core/components/grafana_app.ts rename to public/app/routes/GrafanaCtrl.ts