Loading config from server

public/index.html

@@ -6,29 +6,6 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
-    <!--script type="text/javascript" src="/api/config.js"></script-->
-    <script>
-
-function getScript(source, callback) {
-    var script = document.createElement('script');
-    var prior = document.getElementsByTagName('script')[0];
-    script.async = 1;
-    prior.parentNode.insertBefore(script, prior);
-
-    script.onload = script.onreadystatechange = function( _, isAbort ) {
-        if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
-            script.onload = script.onreadystatechange = null;
-            script = undefined;
-
-            if(!isAbort) { if(callback) callback(); }
-        }
-    };
-
-    script.src = source;
-}
-getScript('/api/config.js');
-
-    </script>
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/ConfigDashboard/ConfigDashboard.tsx

@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import TextField from 'react-md/lib/TextFields';
 import Button from 'react-md/lib/Buttons/Button';
 
+import { loadConfig } from '../common';
 import { DataSourceConnector, IDataSourceDictionary } from '../../data-sources';
 import connections from '../../data-sources/connections';
 
@@ -14,11 +15,6 @@ interface IConfigDashboardState {
   error: string;
 }
 
-// Loading dashboard from 'dashboards' loaded to page
-var dashboards: IDashboardConfig[] = (window as any)["dashboards"]; /* tslint:disable-line */
-var dashboard = dashboards[0];
-const layout = dashboard.config.layout;
-
 export default class ConfigDashboard extends React.Component<null, IConfigDashboardState> {
 
   state = {
@@ -26,6 +22,7 @@ export default class ConfigDashboard extends React.Component<null, IConfigDashbo
     error: null
   };
 
+  dashboard: IDashboardConfig = null;
   dataSources: IDataSourceDictionary = {};
 
   constructor(props: any) {
@@ -34,7 +31,12 @@ export default class ConfigDashboard extends React.Component<null, IConfigDashbo
     this.onChange = this.onChange.bind(this);
     this.state.connections = ConnectionsStore.getState();
 
-    DataSourceConnector.createDataSources(dashboard, this.dataSources);
+    // Loading dashboard from 'dashboards' loaded to page
+    loadConfig((dashboard: IDashboardConfig) => {
+
+      this.dashboard = dashboard;
+      DataSourceConnector.createDataSources(this.dashboard, this.dataSources);
+    });
   }
 
   componentWillMount() {
@@ -55,8 +57,8 @@ export default class ConfigDashboard extends React.Component<null, IConfigDashbo
       connectionType.params.forEach(param => { requiredParameters[dataSource.plugin.connection][param] = null });
 
       // Connection type is already defined - check params
-      if (dashboard.config.connections[dataSource.plugin.connection]) {
-        var connectionParams = dashboard.config.connections[dataSource.plugin.connection];
+      if (this.dashboard.config.connections[dataSource.plugin.connection]) {
+        var connectionParams = this.dashboard.config.connections[dataSource.plugin.connection];
 
         // Checking that all param definitions are defined
         connectionType.params.forEach(param => {

src/components/common.ts

@@ -0,0 +1,36 @@
+
+function getScript(source: string, callback?: () => void): void {
+  let script: any = document.createElement('script');
+  let prior = document.getElementsByTagName('script')[0];
+  script.async = 1;
+  prior.parentNode.insertBefore(script, prior);
+
+  script.onload = script.onreadystatechange = (_, isAbort) => {
+    if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
+      script.onload = script.onreadystatechange = null;
+      script = undefined;
+
+      if(!isAbort) { if(callback) callback(); }
+    }
+  };
+
+  script.src = source;
+}
+
+let config = null;
+function loadConfig(callback: (config: IDashboardConfig) => void): void {
+
+  if (config) {
+    return callback(config);
+  }
+  
+  getScript('/api/config.js', () => {
+    let dashboards: IDashboardConfig[] = (window as any)["dashboards"];
+    let dashboard = dashboards[0];
+    return callback(dashboard);
+  });
+}
+
+export {
+  loadConfig
+}

src/pages/Dashboard.tsx

@@ -8,59 +8,62 @@ var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
 var WidthProvider = ReactGridLayout.WidthProvider;
 ResponsiveReactGridLayout = WidthProvider(ResponsiveReactGridLayout);
 
+import { loadConfig } from '../components/common';
 import { DataSourceConnector, IDataSourceDictionary } from '../data-sources';
 import ElementConnector from '../components/ElementConnector';
 import { loadDialogsFromDashboard } from '../components/generic/Dialogs';
 
-// Loading dashboard from 'dashboards' loaded to page
-var dashboards : IDashboardConfig = (window as any)["dashboards"];
-var dashboard = dashboards[0];
-const layout = dashboard.config.layout;
-
 interface IDashboardState {
   mounted?: boolean;
   currentBreakpoint?: string;
   layouts?: ILayouts;
+  grid?: any;
 }
 
 export default class Dashboard extends React.Component<any, IDashboardState> {
 
-  static defaultProps = {
-    grid: {
-      className: 'layout',
-      rowHeight: layout.rowHeight || 30,
-      cols: layout.cols,
-      breakpoints: layout.breakpoints,
-      verticalCompact: false
-    }
-  };
-
   layouts = {};
   dataSources: IDataSourceDictionary = {};
+  dashboard: IDashboardConfig = null;
 
   state = {
     currentBreakpoint: 'lg',
     mounted: false,
-    layouts: { lg: this.props.initialLayout },
+    layouts: { },
+    grid: null
   };
 
   constructor(props: any) {
     super(props);
 
-    DataSourceConnector.createDataSources(dashboard, this.dataSources);
+    // Loading dashboard from 'dashboards' loaded to page
+    loadConfig((dashboard: IDashboardConfig) => {
 
-    // For each column, create a layout according to number of columns
-    var layouts = ElementConnector.loadLayoutFromDashboard(dashboard, dashboard);
+      this.dashboard = dashboard;
+      const layout = this.dashboard.config.layout;
 
-    this.layouts = layouts;
-    this.state.layouts = { lg: layouts['lg'] };
+      DataSourceConnector.createDataSources(this.dashboard, this.dataSources);
+      DataSourceConnector.connectDataSources(this.dataSources);
+
+      // For each column, create a layout according to number of columns
+      var layouts = ElementConnector.loadLayoutFromDashboard(this.dashboard, this.dashboard);
+
+      this.layouts = layouts;
+      this.setState({ 
+        layouts: { lg: layouts['lg'] },
+        grid: {
+          className: 'layout',
+          rowHeight: layout.rowHeight || 30,
+          cols: layout.cols,
+          breakpoints: layout.breakpoints,
+          verticalCompact: false
+        }
+      });
+    });
   }
 
   componentDidMount() {
-
     this.setState({ mounted: true });
-
-    DataSourceConnector.connectDataSources(this.dataSources);
   }
 
   onBreakpointChange = (breakpoint) => {
@@ -84,17 +87,21 @@ export default class Dashboard extends React.Component<any, IDashboardState> {
 
   render() {
 
-    var { currentBreakpoint } = this.state;
+    var { currentBreakpoint, grid } = this.state;
     var layout = this.state.layouts[currentBreakpoint];
 
+    if (!grid) {
+      return null;
+    }
+
     // Creating visual elements
-    var elements = ElementConnector.loadElementsFromDashboard(dashboard, layout);
+    var elements = ElementConnector.loadElementsFromDashboard(this.dashboard, layout);
 
     // Creating filter elements
-    var { filters, /*additionalFilters*/ } = ElementConnector.loadFiltersFromDashboard(dashboard);
+    var { filters, /*additionalFilters*/ } = ElementConnector.loadFiltersFromDashboard(this.dashboard);
 
     // Loading dialogs
-    var dialogs = loadDialogsFromDashboard(dashboard);
+    var dialogs = loadDialogsFromDashboard(this.dashboard);
 
     return (
       <div style={{ width: '100%' }}>
@@ -103,7 +110,7 @@ export default class Dashboard extends React.Component<any, IDashboardState> {
           <Spinner />
         </Toolbar>
         <ResponsiveReactGridLayout
-          {...this.props.grid}
+          {...grid}
           layouts={this.state.layouts}
           onBreakpointChange={this.onBreakpointChange}
           onLayoutChange={this.onLayoutChange}