feat(conditionally-query-cell): Added cache clearing when the compone…

…nt unmounts. Also separate thunk concerns to default query execution when files are undefined

ui/src/dashboards/components/DashboardPage.tsx

@@ -16,13 +16,18 @@ import RateLimitAlert from 'src/cloud/components/RateLimitAlert'
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 
-// Selectors
+// Selectors & Actions
+import {resetCachedQueryResults} from 'src/data/actions'
 import {getByID} from 'src/resources/selectors'
 
 // Types
 import {AppState, AutoRefresh, ResourceType, Dashboard} from 'src/types'
 import {ManualRefreshProps} from 'src/shared/components/ManualRefresh'
 
+interface DispatchProps {
+  resetCachedQueryResults: typeof resetCachedQueryResults
+}
+
 interface StateProps {
   dashboard: Dashboard
 }
@@ -31,10 +36,14 @@ interface OwnProps {
   autoRefresh: AutoRefresh
 }
 
-type Props = OwnProps & StateProps & ManualRefreshProps
+type Props = OwnProps & StateProps & ManualRefreshProps & DispatchProps
 
 @ErrorHandling
 class DashboardPage extends Component<Props> {
+  public componentWillUnmount() {
+    this.props.resetCachedQueryResults()
+  }
+
   public render() {
     const {autoRefresh, manualRefresh, onManualRefresh, children} = this.props
 
@@ -76,7 +85,11 @@ const mstp = (state: AppState): StateProps => {
   }
 }
 
-export default connect<StateProps, {}>(
+const mdtp = {
+  resetCachedQueryResults: resetCachedQueryResults,
+}
+
+export default connect<StateProps, DispatchProps>(
   mstp,
-  null
+  mdtp
 )(ManualRefresh<OwnProps>(DashboardPage))

ui/src/data/actions/index.ts

@@ -0,0 +1,18 @@
+export type Action =
+  | ReturnType<typeof resetCachedQueryResults>
+  | ReturnType<typeof setQueryResultsByQueryID>
+
+export const hashCode = s =>
+  s.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0)
+
+export const setQueryResultsByQueryID = (queryID: string, files: string[]) =>
+  ({
+    type: 'SET_QUERY_RESULTS_BY_QUERY',
+    queryID: hashCode(queryID),
+    files,
+  } as const)
+
+export const resetCachedQueryResults = () =>
+  ({
+    type: 'RESET_CACHED_QUERY_RESULTS',
+  } as const)

ui/src/data/reducers/index.ts

@@ -2,15 +2,10 @@
 import {produce} from 'immer'
 
 // Actions
-import {Action} from 'src/data/actions/thunks'
-
-interface QueryResultsState {
-  files: string[] | null
-  timeInterval: string
-}
+import {Action} from 'src/data/actions'
 
 export interface DataState {
-  queryResultsByQueryID: {[queryID: string]: QueryResultsState}
+  queryResultsByQueryID: {[queryID: string]: string[]}
 }
 
 export const initialState: DataState = {
@@ -26,13 +21,14 @@ export const dataReducer = (
       return produce(state, draftState => {
         const {queryID, files} = action
         if (queryID && files.length) {
-          draftState.queryResultsByQueryID[queryID] = {
-            files,
-            timeInterval: 'now',
-          }
+          draftState.queryResultsByQueryID[queryID] = files
         }
       })
     }
+
+    case 'RESET_CACHED_QUERY_RESULTS': {
+      return initialState
+    }
   }
 
   return state

ui/src/shared/components/TimeSeries.tsx

@@ -43,7 +43,7 @@ import {TIME_RANGE_START, TIME_RANGE_STOP} from 'src/variables/constants'
 
 // Actions
 import {notify as notifyAction} from 'src/shared/actions/notifications'
-import {setQueryResultsByQueryID} from 'src/data/actions/thunks'
+import {setQueryResultsByQueryID} from 'src/data/actions'
 
 // Types
 import {

ui/src/views/actions/thunks.ts

@@ -16,7 +16,7 @@ import {notify} from 'src/shared/actions/notifications'
 import {setActiveTimeMachine} from 'src/timeMachine/actions'
 import {executeQueries} from 'src/timeMachine/actions/queries'
 import {setView, Action} from 'src/views/actions/creators'
-import {hashCode} from 'src/data/actions/thunks'
+import {hashCode} from 'src/data/actions'
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 import {setQueryResults} from 'src/timeMachine/actions/queries'
 
@@ -122,6 +122,25 @@ export const getViewForTimeMachine = (
   }
 }
 
+export const setQueryResultsByQueryID = (queryID: string) => async (
+  dispatch,
+  getState: GetState
+): Promise<void> => {
+  try {
+    const state = getState()
+    const files = state.data.queryResultsByQueryID[hashCode(queryID)]
+    if (files) {
+      dispatch(setQueryResults(RemoteDataState.Done, files, null, null))
+      return
+    }
+    dispatch(executeQueries())
+  } catch (error) {
+    // if the files don't exist in the cache, we want to execute the query
+    console.error(error)
+    dispatch(executeQueries())
+  }
+}
+
 export const setQueryResultsForCell = (
   dashboardID: string,
   cellID: string,
@@ -134,11 +153,7 @@ export const setQueryResultsForCell = (
     const queries = view.properties.queries.filter(({text}) => !!text.trim())
     const queryID = get(queries, '[0].text', '')
     if (queryID) {
-      const {files, timeInterval} = state.data.queryResultsByQueryID[
-        hashCode(queryID)
-      ]
-      console.log('timeInterval: ', timeInterval)
-      dispatch(setQueryResults(RemoteDataState.Done, files, null, null))
+      dispatch(setQueryResultsByQueryID(queryID))
       return
     }
     dispatch(executeQueries())