moving the auto refresh selector to its own file

client/src/components/AutoRefreshSelector/AutoRefreshSelector.tsx

@@ -0,0 +1,66 @@
+import * as request from 'xhr-request';
+import * as React from 'react';
+import * as _ from 'lodash';
+
+import RefreshStore, { IRefreshStoreState } from './RefreshStore';
+import SelectField from 'react-md/lib/SelectFields';
+
+import RefreshActions from './RefreshActions';
+
+import { DataSourceConnector, IDataSourceDictionary, IDataSource } from '../../data-sources/DataSourceConnector';
+
+interface IRefreshState extends IRefreshStoreState {
+    refreshMenuVisible?: boolean;
+}
+
+export default class AutoRefreshSelector extends React.Component<any, IRefreshState> {
+
+  oneSecInMs = 1000;
+  oneMinInMs = 60 * this.oneSecInMs;
+  refreshIntervals = [
+    {text: 'None', intervalMs: -1},
+    {text: '30 Sec', intervalMs: 30 * this.oneSecInMs},
+    {text: '60 Sec', intervalMs: 60 * this.oneSecInMs},
+    {text: '90 Sec', intervalMs: 90 * this.oneSecInMs},
+    {text: '2 Min', intervalMs: 2 * this.oneMinInMs},
+    {text: '5 Min', intervalMs: 5 * this.oneMinInMs},
+    {text: '15 Min', intervalMs: 15 * this.oneMinInMs},
+    {text: '30 Min', intervalMs: 30 * this.oneMinInMs},
+  ];
+
+  constructor(props: any) {
+    super(props);
+
+    this.state = RefreshStore.getState();
+
+    this.handleRefreshIntervalChange = this.handleRefreshIntervalChange.bind(this);
+  }
+
+  handleRefreshIntervalChange = (refreshInterval: string) => {
+    var oneSec = 1000;
+    var interval = this.refreshIntervals.find((x) => { return x.text === refreshInterval; }).intervalMs;
+    
+    RefreshActions.updateInterval(interval);
+    RefreshActions.setRefreshTimer(
+      interval, 
+      DataSourceConnector.refreshDs);
+  }
+
+  render () {
+
+    let refreshDropDownTexts = this.refreshIntervals.map((x) => { return x.text; });
+    return (
+      <SelectField
+              id="autorefresh"
+              label="Auto Refresh"
+              placeholder="0"
+              defaultValue={'None'}
+              position={SelectField.Positions.BELOW}
+              menuItems={refreshDropDownTexts}
+              toolbar={false}
+              onChange={this.handleRefreshIntervalChange}
+              className="md-select-field--toolbar"
+            />
+    );
+  }
+}

client/src/components/AutoRefreshSelector/RefreshActions.ts

@@ -1,4 +1,4 @@
-import alt, { AbstractActions } from '../alt';
+import alt, { AbstractActions } from '../../alt';
 import * as request from 'xhr-request';
 
 interface IRefreshActions {

client/src/components/AutoRefreshSelector/RefreshStore.ts

@@ -1,8 +1,8 @@
-import alt, { AbstractStoreModel } from '../alt';
+import alt, { AbstractStoreModel } from '../../alt';
 
-import refreshActions from '../actions/RefreshActions';
+import refreshActions from './RefreshActions';
 
-interface IRefreshStoreState {
+export interface IRefreshStoreState {
   refreshInterval: number;
 }
 

client/src/components/AutoRefreshSelector/index.tsx

@@ -0,0 +1,9 @@
+import AutoRefreshSelector from './AutoRefreshSelector';
+import RefreshActions from './RefreshActions';
+import RefreshStore from './RefreshStore';
+
+export {
+  AutoRefreshSelector,
+  RefreshActions,
+  RefreshStore
+}

client/src/components/Dashboard/index.tsx

@@ -6,6 +6,7 @@ import Button from 'react-md/lib/Buttons';
 import Dialog from 'react-md/lib/Dialogs';
 
 import { Spinner } from '../Spinner';
+import { AutoRefreshSelector } from '../AutoRefreshSelector';
 
 import * as ReactGridLayout from 'react-grid-layout';
 var ResponsiveReactGridLayout = ReactGridLayout.Responsive;
@@ -28,16 +29,12 @@ const renderHTML = require('react-render-html');
 
 import List from 'react-md/lib/Lists/List';
 import ListItem from 'react-md/lib/Lists/ListItem';
-import SelectField from 'react-md/lib/SelectFields';
 import FontIcon from 'react-md/lib/FontIcons';
 import Avatar from 'react-md/lib/Avatars';
 import Subheader from 'react-md/lib/Subheaders';
 import Divider from 'react-md/lib/Dividers';
 import TextField from 'react-md/lib/TextFields';
 
-import RefreshActions from '../../actions/RefreshActions';
-import { DataSourceConnector, IDataSourceDictionary, IDataSource } from '../../data-sources/DataSourceConnector';
-
 interface IDashboardProps {
   dashboard?: IDashboardConfig;
 }
@@ -56,24 +53,10 @@ interface IDashboardState {
   infoHtml?: string;
   newTemplateName?: string;
   newTemplateDescription?: string;
-  refreshMenuVisible?: boolean;
 }
 
 export default class Dashboard extends React.Component<IDashboardProps, IDashboardState> {
 
-  oneSecInMs = 1000;
-  oneMinInMs = 60 * this.oneSecInMs;
-  refreshIntervals = [
-    {text: 'None', intervalMs: -1},
-    {text: '30 Sec', intervalMs: 30 * this.oneSecInMs},
-    {text: '60 Sec', intervalMs: 60 * this.oneSecInMs},
-    {text: '90 Sec', intervalMs: 90 * this.oneSecInMs},
-    {text: '2 Min', intervalMs: 2 * this.oneMinInMs},
-    {text: '5 Min', intervalMs: 5 * this.oneMinInMs},
-    {text: '15 Min', intervalMs: 15 * this.oneMinInMs},
-    {text: '30 Min', intervalMs: 30 * this.oneMinInMs},
-  ];
-
   layouts = {};
 
   state = {
@@ -90,7 +73,6 @@ export default class Dashboard extends React.Component<IDashboardProps, IDashboa
     infoHtml: '',
     newTemplateName: '',
     newTemplateDescription: '',
-    refreshMenuVisible: false,
   };
 
   constructor(props: IDashboardProps) {
@@ -115,24 +97,12 @@ export default class Dashboard extends React.Component<IDashboardProps, IDashboa
     this.newTemplateDescriptionChange = this.newTemplateDescriptionChange.bind(this);
     this.onVisibilityStoreChange = this.onVisibilityStoreChange.bind(this);
 
-    this.handleRefreshIntervalChange = this.handleRefreshIntervalChange.bind(this);
-
     VisibilityStore.listen(this.onVisibilityStoreChange);
 
     this.state.newTemplateName = this.props.dashboard.name;
     this.state.newTemplateDescription = this.props.dashboard.description;
   }
 
-  handleRefreshIntervalChange = (refreshInterval: string) => {
-    var oneSec = 1000;
-    var interval = this.refreshIntervals.find((x) => { return x.text === refreshInterval; }).intervalMs;
-    
-    RefreshActions.updateInterval(interval);
-    RefreshActions.setRefreshTimer(
-      interval, 
-      DataSourceConnector.refreshDs);
-  }
-
   componentDidMount() {
     let { dashboard } = this.props;
     let { mounted } = this.state;
@@ -324,22 +294,11 @@ export default class Dashboard extends React.Component<IDashboardProps, IDashboa
     // Actions to perform on an active dashboard
     let toolbarActions = [];
 
-    let refreshDropDownTexts = this.refreshIntervals.map((x) => { return x.text; });
     if (!editMode) {
       toolbarActions.push(
         (
           <span>
-            <SelectField
-              id="autorefresh"
-              label="Auto Refresh"
-              placeholder="0"
-              defaultValue={'None'}
-              position={SelectField.Positions.BELOW}
-              menuItems={refreshDropDownTexts}
-              toolbar={false}
-              onChange={this.handleRefreshIntervalChange}
-              className="md-select-field--toolbar"
-            />
+            <AutoRefreshSelector/>
           </span>
         ),
         (

client/src/data-sources/DataSourceConnector.ts

@@ -6,8 +6,6 @@ import datasourcePluginsMappings from './plugins/PluginsMapping';
 import VisibilityActions from '../actions/VisibilityActions';
 import VisibilityStore from '../stores/VisibilityStore';
 import * as formats from '../utils/data-formats';
-import RefreshActions from '../actions/RefreshActions';
-import RefreshStore from '../stores/RefreshStore';
 
 const DataFormatTypes = formats.DataFormatTypes;
 
@@ -70,8 +68,6 @@ export class DataSourceConnector {
     });
 
     DataSourceConnector.initializeDataSources();
-
-    RefreshStore.getState();
   }
 
   static refreshDs() {