react panels: got data

public/app/app.ts

@@ -26,8 +26,12 @@ _.move = (array, fromIndex, toIndex) => {
   return array;
 };
 
-import { coreModule, registerAngularDirectives } from './core/core';
+import { coreModule, angularModules } from 'app/core/core_module';
-import { setupAngularRoutes } from './routes/routes';
+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)
+    // bootstrap the app
-      .then(() => {
+    angular.bootstrap(document, this.ngModuleDependencies).invoke(() => {
-        // disable tool tip animation
+      _.each(this.preBootModules, module => {
-        $.fn.tooltip.defaults.animation = false;
+        _.extend(module, this.registerFunctions);
-
-        // 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);
       });
+
+      this.preBootModules = null;
+    });
   }
 }
 

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,

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;

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<Props, State> {
+export class DataPanel extends Component<Props, State> {
   static defaultProps = {
     isVisible: true,
     panelId: 1,
@@ -48,9 +48,20 @@ export class DataPanel extends PureComponent<Props, State> {
 
   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<Props, State> {
         cacheTimeout: null,
       };
 
+      console.log('issueing react query', queryOptions);
       const resp = await ds.query(queryOptions);
       console.log(resp);
     } catch (err) {

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -34,8 +34,8 @@ export class PanelChrome extends PureComponent<Props, State> {
   }
 
   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<Props, State> {
   };
 
   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<Props, State> {
           <DataPanel
             datasource={datasource}
             queries={targets}
+            timeRange={timeRange}
             isVisible={this.isVisible}
             refreshCounter={refreshCounter}
           >

public/app/features/dashboard/dashgrid/QueriesTab.tsx

@@ -23,10 +23,6 @@ export class QueriesTab extends React.Component<Props, any> {
 
     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 = '<metrics-tab />';
     const scopeProps = {

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;