Remove explicit injection of TimeMachineContainer

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -11,6 +11,7 @@ import CEOHeader from 'src/dashboards/components/CEOHeader'
 // Utils
 import {getDeep} from 'src/utils/wrappers'
 import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
+import {initialStateFromCell} from 'src/shared/utils/timeMachine'
 
 // Actions
 import {editCellQueryStatus} from 'src/dashboards/actions'
@@ -56,6 +57,7 @@ interface ConnectedProps {
   thresholdsListType: ThresholdType
   gaugeColors: ColorNumber[]
   lineColors: ColorString[]
+  onResetTimeMachine: TimeMachineContainer['reset']
 }
 
 interface PassedProps {
@@ -98,6 +100,13 @@ class CellEditorOverlay extends Component<Props, State> {
   }
 
   public componentDidMount() {
+    const {cell, dashboardTimeRange, onResetTimeMachine} = this.props
+
+    onResetTimeMachine({
+      ...initialStateFromCell(cell),
+      timeRange: dashboardTimeRange,
+    })
+
     this.handleResetFocus()
   }
 
@@ -324,6 +333,7 @@ const ConnectedCellEditorOverlay = (props: PassedProps) => {
           thresholdsListType={timeMachineContainer.state.thresholdsListType}
           gaugeColors={timeMachineContainer.state.gaugeColors}
           lineColors={timeMachineContainer.state.lineColors}
+          onResetTimeMachine={timeMachineContainer.reset}
         />
       )}
     </Subscribe>

ui/src/dashboards/containers/DashboardPage.tsx

@@ -3,7 +3,6 @@ import React, {Component, MouseEvent} from 'react'
 import {connect} from 'react-redux'
 import {withRouter} from 'react-router'
 import _ from 'lodash'
-import {Provider} from 'unstated'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -29,8 +28,6 @@ import * as errorActions from 'src/shared/actions/errors'
 import * as notifyActions from 'src/shared/actions/notifications'
 
 // Utils
-import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
-import {initialStateFromCell} from 'src/shared/utils/timeMachine'
 import idNormalizer, {TYPE_ID} from 'src/normalizers/id'
 import {getDeep} from 'src/utils/wrappers'
 import {updateDashboardLinks} from 'src/dashboards/utils/dashboardSwitcherLinks'
@@ -128,8 +125,6 @@ interface State {
 
 @ErrorHandling
 class DashboardPage extends Component<Props, State> {
-  private timeMachineContainer: TimeMachineContainer
-
   public constructor(props: Props) {
     super(props)
 
@@ -283,22 +278,20 @@ class DashboardPage extends Component<Props, State> {
     return (
       <Page>
         <OverlayTechnology visible={showCellEditorOverlay}>
-          <Provider inject={[this.timeMachineContainer]}>
+          <CellEditorOverlay
-            <CellEditorOverlay
+            source={source}
-              source={source}
+            sources={sources}
-              sources={sources}
+            notify={notify}
-              notify={notify}
+            fluxLinks={fluxLinks}
-              fluxLinks={fluxLinks}
+            cell={selectedCell}
-              cell={selectedCell}
+            dashboardID={dashboardID}
-              dashboardID={dashboardID}
+            queryStatus={cellQueryStatus}
-              queryStatus={cellQueryStatus}
+            onSave={this.handleSaveEditedCell}
-              onSave={this.handleSaveEditedCell}
+            onCancel={this.handleHideCellEditorOverlay}
-              onCancel={this.handleHideCellEditorOverlay}
+            templates={templatesIncludingDashTime}
-              templates={templatesIncludingDashTime}
+            editQueryStatus={this.props.editCellQueryStatus}
-              editQueryStatus={this.props.editCellQueryStatus}
+            dashboardTimeRange={timeRange}
-              dashboardTimeRange={timeRange}
+          />
-            />
-          </Provider>
         </OverlayTechnology>
         <DashboardHeader
           dashboard={dashboard}
@@ -421,13 +414,6 @@ class DashboardPage extends Component<Props, State> {
   }
 
   private handleShowCellEditorOverlay = (cell: DashboardsModels.Cell): void => {
-    const {timeRange} = this.props
-
-    this.timeMachineContainer = new TimeMachineContainer({
-      ...initialStateFromCell(cell),
-      timeRange,
-    })
-
     this.setState({selectedCell: cell, showCellEditorOverlay: true})
   }
 

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -46,6 +46,7 @@ import {
   TEMP_VAR_DASHBOARD_TIME,
   TEMP_VAR_UPPER_DASHBOARD_TIME,
 } from 'src/shared/constants'
+import {DE_LOCAL_STORAGE_KEY} from 'src/data_explorer/constants'
 
 // Types
 import {
@@ -97,6 +98,7 @@ interface ConnectedProps {
   script: string
   onUpdateQueryDrafts: (queryDrafts: CellQuery[]) => void
   onChangeScript: TimeMachineContainer['handleChangeScript']
+  onResetTimeMachine: TimeMachineContainer['reset']
 }
 
 type Props = PassedProps & ConnectedProps
@@ -122,11 +124,14 @@ export class DataExplorer extends PureComponent<Props, State> {
   }
 
   public async componentDidMount() {
-    const {autoRefresh} = this.props
+    const {autoRefresh, onResetTimeMachine} = this.props
 
     await this.resolveQueryParams()
 
+    onResetTimeMachine({}, DE_LOCAL_STORAGE_KEY)
+
     GlobalAutoRefresher.poll(autoRefresh)
+
     this.setState({isComponentMounted: true})
   }
 
@@ -440,6 +445,7 @@ const ConnectedDataExplorer = (props: PassedProps & WithRouterProps) => {
           script={timeMachineContainer.state.script}
           onChangeScript={timeMachineContainer.handleChangeScript}
           onUpdateQueryDrafts={timeMachineContainer.handleUpdateQueryDrafts}
+          onResetTimeMachine={timeMachineContainer.reset}
         />
       )}
     </Subscribe>

ui/src/data_explorer/containers/DataExplorerPage.tsx

@@ -1,11 +1,8 @@
 import React, {PureComponent} from 'react'
-import {Provider} from 'unstated'
 
 import DataExplorer from './DataExplorer'
 
-import {TimeMachineContainer} from 'src/shared/utils/TimeMachineContainer'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {DE_LOCAL_STORAGE_KEY} from 'src/data_explorer/constants'
 
 import {Source} from 'src/types'
 
@@ -15,23 +12,10 @@ interface Props {
 
 @ErrorHandling
 class DataExplorerPage extends PureComponent<Props> {
-  private timeMachineContainer: TimeMachineContainer
-
-  constructor(props: Props) {
-    super(props)
-
-    this.timeMachineContainer = new TimeMachineContainer(
-      {},
-      DE_LOCAL_STORAGE_KEY
-    )
-  }
-
   public render() {
     return (
       <div className="page">
-        <Provider inject={[this.timeMachineContainer]}>
+        <DataExplorer source={this.props.source} />
-          <DataExplorer source={this.props.source} />
-        </Provider>
       </div>
     )
   }

ui/src/index.tsx

@@ -2,7 +2,8 @@ import 'babel-polyfill'
 
 import React, {PureComponent} from 'react'
 import {render} from 'react-dom'
-import {Provider} from 'react-redux'
+import {Provider as ReduxProvider} from 'react-redux'
+import {Provider as UnstatedProvider} from 'unstated'
 import {Router, Route, useRouterHistory} from 'react-router'
 import {createHistory} from 'history'
 import {syncHistoryWithStore} from 'react-router-redux'
@@ -122,52 +123,69 @@ class Root extends PureComponent<{}, State> {
 
   public render() {
     return this.state.ready ? (
-      <Provider store={store}>
+      <ReduxProvider store={store}>
-        <Router history={history}>
+        <UnstatedProvider>
-          <Route path="/" component={UserIsAuthenticated(CheckSources)} />
+          <Router history={history}>
-          <Route path="/login" component={UserIsNotAuthenticated(Login)} />
+            <Route path="/" component={UserIsAuthenticated(CheckSources)} />
-          <Route path="/purgatory" component={UserIsAuthenticated(Purgatory)} />
+            <Route path="/login" component={UserIsNotAuthenticated(Login)} />
-          <Route component={UserIsAuthenticated(App)}>
+            <Route
-            <Route path="/logs" component={LogsPage} />
+              path="/purgatory"
-          </Route>
+              component={UserIsAuthenticated(Purgatory)}
-          <Route
+            />
-            path="/sources/new"
+            <Route component={UserIsAuthenticated(App)}>
-            component={UserIsAuthenticated(OnboardingWizard)}
+              <Route path="/logs" component={LogsPage} />
-          />
-          <Route path="/sources/:sourceID" component={UserIsAuthenticated(App)}>
-            <Route component={CheckSources}>
-              <Route path="status" component={StatusPage} />
-              <Route path="hosts" component={HostsPage} />
-              <Route path="hosts/:hostID" component={HostPage} />
-              <Route
-                path="chronograf/data-explorer"
-                component={DataExplorerPage}
-              />
-              <Route path="dashboards" component={DashboardsPage} />
-              <Route path="dashboards/:dashboardID" component={DashboardPage} />
-              <Route path="alerts" component={AlertsApp} />
-              <Route path="alert-rules" component={KapacitorRulesPage} />
-              <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
-              <Route path="alert-rules/new" component={KapacitorRulePage} />
-              <Route path="tickscript/new" component={TickscriptPage} />
-              <Route path="tickscript/:ruleID" component={TickscriptPage} />
-              <Route path="kapacitors/new" component={KapacitorPage} />
-              <Route path="kapacitors/:id/edit" component={KapacitorPage} />
-              <Route
-                path="kapacitors/:id/edit:hash"
-                component={KapacitorPage}
-              />
-              <Route
-                path="admin-chronograf/:tab"
-                component={AdminChronografPage}
-              />
-              <Route path="admin-influxdb/:tab" component={AdminInfluxDBPage} />
-              <Route path="manage-sources" component={ManageSources} />
             </Route>
-          </Route>
+            <Route
-          <Route path="*" component={NotFound} />
+              path="/sources/new"
-        </Router>
+              component={UserIsAuthenticated(OnboardingWizard)}
-      </Provider>
+            />
+            <Route
+              path="/sources/:sourceID"
+              component={UserIsAuthenticated(App)}
+            >
+              <Route component={CheckSources}>
+                <Route path="status" component={StatusPage} />
+                <Route path="hosts" component={HostsPage} />
+                <Route path="hosts/:hostID" component={HostPage} />
+                <Route
+                  path="chronograf/data-explorer"
+                  component={DataExplorerPage}
+                />
+                <Route path="dashboards" component={DashboardsPage} />
+                <Route
+                  path="dashboards/:dashboardID"
+                  component={DashboardPage}
+                />
+                <Route path="alerts" component={AlertsApp} />
+                <Route path="alert-rules" component={KapacitorRulesPage} />
+                <Route
+                  path="alert-rules/:ruleID"
+                  component={KapacitorRulePage}
+                />
+                <Route path="alert-rules/new" component={KapacitorRulePage} />
+                <Route path="tickscript/new" component={TickscriptPage} />
+                <Route path="tickscript/:ruleID" component={TickscriptPage} />
+                <Route path="kapacitors/new" component={KapacitorPage} />
+                <Route path="kapacitors/:id/edit" component={KapacitorPage} />
+                <Route
+                  path="kapacitors/:id/edit:hash"
+                  component={KapacitorPage}
+                />
+                <Route
+                  path="admin-chronograf/:tab"
+                  component={AdminChronografPage}
+                />
+                <Route
+                  path="admin-influxdb/:tab"
+                  component={AdminInfluxDBPage}
+                />
+                <Route path="manage-sources" component={ManageSources} />
+              </Route>
+            </Route>
+            <Route path="*" component={NotFound} />
+          </Router>
+        </UnstatedProvider>
+      </ReduxProvider>
     ) : (
       <div className="page-spinner" />
     )

ui/src/shared/utils/TimeMachineContainer.ts

@@ -65,6 +65,24 @@ import {ColorString, ColorNumber} from 'src/types/colors'
 
 const LOCAL_STORAGE_DELAY_MS = 1000
 
+const DEFAULT_STATE = () => ({
+  script: '',
+  queryDrafts: [],
+  timeRange: DEFAULT_TIME_RANGE,
+  type: CellType.Line,
+  note: '',
+  noteVisibility: NoteVisibility.Default,
+  thresholdsListType: ThresholdType.Text,
+  thresholdsListColors: DEFAULT_THRESHOLDS_LIST_COLORS,
+  gaugeColors: DEFAULT_GAUGE_COLORS,
+  lineColors: DEFAULT_LINE_COLORS,
+  axes: DEFAULT_AXES,
+  tableOptions: DEFAULT_TABLE_OPTIONS,
+  timeFormat: DEFAULT_TIME_FORMAT,
+  decimalPlaces: DEFAULT_DECIMAL_PLACES,
+  fieldOptions: DEFAULT_FIELD_OPTIONS,
+})
+
 export interface TimeMachineState {
   script: string
   queryDrafts: CellQuery[]
@@ -84,38 +102,24 @@ export interface TimeMachineState {
 }
 
 export class TimeMachineContainer extends Container<TimeMachineState> {
+  public state: TimeMachineState = DEFAULT_STATE()
+
   private debouncer: Debouncer = new DefaultDebouncer()
   private localStorageKey?: string
 
-  constructor(
+  public reset = (
     initialState: Partial<TimeMachineState> = {},
     localStorageKey?: string
-  ) {
+  ): Promise<void> => {
-    super()
+    const localStorageState = getLocalStorage(localStorageKey) || {}
-
-    const localStorageState = getLocalStorage(localStorageKey)
-
-    this.state = {
-      script: '',
-      queryDrafts: [],
-      timeRange: DEFAULT_TIME_RANGE,
-      type: CellType.Line,
-      note: '',
-      noteVisibility: NoteVisibility.Default,
-      thresholdsListType: ThresholdType.Text,
-      thresholdsListColors: DEFAULT_THRESHOLDS_LIST_COLORS,
-      gaugeColors: DEFAULT_GAUGE_COLORS,
-      lineColors: DEFAULT_LINE_COLORS,
-      axes: DEFAULT_AXES,
-      tableOptions: DEFAULT_TABLE_OPTIONS,
-      timeFormat: DEFAULT_TIME_FORMAT,
-      decimalPlaces: DEFAULT_DECIMAL_PLACES,
-      fieldOptions: DEFAULT_FIELD_OPTIONS,
-      ...localStorageState,
-      ...initialState,
-    }
 
     this.localStorageKey = localStorageKey
+
+    return this.setAndPersistState({
+      ...DEFAULT_STATE(),
+      ...localStorageState,
+      ...initialState,
+    })
   }
 
   public handleChangeScript = (script: string) => {

ui/src/shared/utils/localStorage.ts

@@ -1,21 +1,21 @@
 import {GIT_SHA} from 'src/shared/constants'
 
-export function setLocalStorage(key: string, data: any): void {
+export function setLocalStorage(key: string, data: object): void {
   const localStorageData = {version: GIT_SHA, data}
 
   window.localStorage.setItem(key, JSON.stringify(localStorageData))
 }
 
-export function getLocalStorage(key: string): any {
+export function getLocalStorage(key: string): object | null {
   try {
     const {version, data} = JSON.parse(window.localStorage.getItem(key))
 
     if (version !== GIT_SHA) {
-      return {}
+      return null
     }
 
     return data
   } catch {
-    return {}
+    return null
   }
 }

ui/test/shared/utils/TimeMachineContainer.test.ts

@@ -11,6 +11,7 @@ import {QueryType} from 'src/types'
 
 describe('TimeMachineContainer', () => {
   let initialState: Partial<TimeMachineState>
+  let container: TimeMachineContainer
 
   beforeEach(() => {
     const queryDraft1 = defaultQueryDraft(QueryType.InfluxQL)
@@ -22,10 +23,11 @@ describe('TimeMachineContainer', () => {
     queryDraft2.queryConfig.id = '2'
 
     initialState = {queryDrafts: [queryDraft1, queryDraft2]}
+    container = new TimeMachineContainer()
   })
 
   test('handleAddQuery', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     expect(container.state.queryDrafts).toHaveLength(2)
 
@@ -35,7 +37,7 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleChooseNamespace', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleChooseNamespace('1', {
       database: 'foo',
@@ -49,7 +51,7 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleChooseMeasurement', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleChooseMeasurement('1', 'foo')
 
@@ -59,7 +61,7 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleToggleField', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleToggleField('1', {value: 'a', type: 'field'})
 
@@ -93,7 +95,7 @@ describe('TimeMachineContainer', () => {
       },
     ]
 
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleApplyFuncsToField('1', {
       field: {
@@ -162,7 +164,7 @@ describe('TimeMachineContainer', () => {
       groupBy,
     })
 
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleRemoveFuncs('1', fields)
 
@@ -179,7 +181,7 @@ describe('TimeMachineContainer', () => {
         k2: ['foo'],
       }
 
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleChooseTag('1', {
         key: 'k1',
@@ -195,7 +197,7 @@ describe('TimeMachineContainer', () => {
     })
 
     test("creates a new entry if it's the first key", async () => {
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleChooseTag('1', {
         key: 'k1',
@@ -214,7 +216,7 @@ describe('TimeMachineContainer', () => {
         k1: ['v1'],
       }
 
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleChooseTag('1', {
         key: 'k1',
@@ -240,7 +242,7 @@ describe('TimeMachineContainer', () => {
         },
       })
 
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleGroupByTag('1', 'k1')
 
@@ -262,7 +264,7 @@ describe('TimeMachineContainer', () => {
         },
       })
 
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleGroupByTag('1', 'k1')
 
@@ -274,7 +276,7 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleToggleTagAcceptance', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleToggleTagAcceptance('1')
 
@@ -284,7 +286,7 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleGroupByTime', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleGroupByTime('1', '100y')
 
@@ -294,7 +296,7 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleEditQueryStatus', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
 
     await container.handleEditQueryStatus('1', {success: 'yay'})
 
@@ -305,7 +307,7 @@ describe('TimeMachineContainer', () => {
 
   describe('handleFill', () => {
     it('applies an explicit fill when group by time is used', async () => {
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleGroupByTime('1', '10s')
 
@@ -315,7 +317,7 @@ describe('TimeMachineContainer', () => {
     })
 
     it('updates fill to non-null-string non-number string value', async () => {
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleFill('1', LINEAR)
 
@@ -325,7 +327,7 @@ describe('TimeMachineContainer', () => {
     })
 
     it('updates fill to string integer value', async () => {
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleFill('1', '1337')
 
@@ -335,7 +337,7 @@ describe('TimeMachineContainer', () => {
     })
 
     it('updates fill to string float value', async () => {
-      const container = new TimeMachineContainer(initialState)
+      await container.reset(initialState)
 
       await container.handleFill('1', '1.337')
 
@@ -346,7 +348,8 @@ describe('TimeMachineContainer', () => {
   })
 
   test('handleTimeShift', async () => {
-    const container = new TimeMachineContainer(initialState)
+    await container.reset(initialState)
+
     const shift = {
       quantity: '1',
       unit: 'd',