Narrow view type in TimeMachineState

ui/src/dashboards/components/DashboardPage.tsx

@@ -49,7 +49,7 @@ import {
   TimeRange,
   DashboardSwitcherLinks,
 } from 'src/types/v2'
-import {NewView, XYView} from 'src/types/v2/dashboards'
+import {NewView, XYView, QueryViewProperties} from 'src/types/v2/dashboards'
 import {RemoteDataState} from 'src/types'
 import {WithRouterProps} from 'react-router'
 import {ManualRefreshProps} from 'src/shared/components/ManualRefresh'
@@ -304,10 +304,12 @@ class DashboardPage extends Component<Props, State> {
       throw new Error(`Can't edit non-existant view with ID "${viewID}"`)
     }
 
-    this.showVEO(entry.view)
+    this.showVEO(entry.view as View<QueryViewProperties>)
   }
 
-  private showVEO = (view: View | NewView): void => {
+  private showVEO = (
+    view: View<QueryViewProperties> | NewView<QueryViewProperties>
+  ): void => {
     const {onSetActiveTimeMachine} = this.props
     const draftScript: string = get(view, 'properties.queries.0.text', '')
 

ui/src/shared/reducers/v2/timeMachines.test.ts

@@ -10,7 +10,7 @@ describe('timeMachinesReducer', () => {
     test('replaces the first queries text if it exists', () => {
       const state = initialState()
       const timeMachine = state.timeMachines[DE_TIME_MACHINE_ID]
-      const viewProps: any = timeMachine.view.properties
+      const viewProps = timeMachine.view.properties
       const initialQuery: DashboardQuery = {
         text: 'foo',
         type: InfluxLanguage.Flux,
@@ -21,7 +21,7 @@ describe('timeMachinesReducer', () => {
       timeMachine.draftScript = 'baz'
 
       const nextState = timeMachinesReducer(state, submitScript())
-      const nextViewProps: any =
+      const nextViewProps =
         nextState.timeMachines[DE_TIME_MACHINE_ID].view.properties
 
       expect(nextViewProps.queries[0]).toEqual({...initialQuery, text: 'baz'})
@@ -30,13 +30,13 @@ describe('timeMachinesReducer', () => {
     test('inserts a query if no queries exist', () => {
       const state = initialState()
       const timeMachine = state.timeMachines[DE_TIME_MACHINE_ID]
-      const viewProps: any = timeMachine.view.properties
+      const viewProps = timeMachine.view.properties
 
       viewProps.queries = []
       timeMachine.draftScript = 'baz'
 
       const nextState = timeMachinesReducer(state, submitScript())
-      const nextViewProps: any =
+      const nextViewProps =
         nextState.timeMachines[DE_TIME_MACHINE_ID].view.properties
 
       expect(nextViewProps.queries[0]).toEqual({
@@ -51,12 +51,12 @@ describe('timeMachinesReducer', () => {
     test('replaces the sourceID for the active query', () => {
       const state = initialState()
       const timeMachine = state.timeMachines[DE_TIME_MACHINE_ID]
-      const viewProps: any = timeMachine.view.properties
+      const viewProps = timeMachine.view.properties
 
       expect(viewProps.queries[0].sourceID).toEqual('')
 
       const nextState = timeMachinesReducer(state, setQuerySource('howdy'))
-      const nextViewProps: any =
+      const nextViewProps =
         nextState.timeMachines[DE_TIME_MACHINE_ID].view.properties
 
       expect(nextViewProps.queries[0].sourceID).toEqual('howdy')
@@ -65,12 +65,12 @@ describe('timeMachinesReducer', () => {
     test('does nothing if the no active query exists', () => {
       const state = initialState()
       const timeMachine = state.timeMachines[DE_TIME_MACHINE_ID]
-      const viewProps: any = timeMachine.view.properties
+      const viewProps = timeMachine.view.properties
 
       viewProps.queries = []
 
       const nextState = timeMachinesReducer(state, setQuerySource('howdy'))
-      const nextViewProps: any =
+      const nextViewProps =
         nextState.timeMachines[DE_TIME_MACHINE_ID].view.properties
 
       expect(nextViewProps.queries).toEqual([])

ui/src/shared/reducers/v2/timeMachines.ts

@@ -12,12 +12,17 @@ import {
 
 // Types
 import {TimeRange} from 'src/types/v2'
-import {NewView, DashboardQuery} from 'src/types/v2/dashboards'
+import {
+  View,
+  NewView,
+  QueryViewProperties,
+  DashboardQuery,
+} from 'src/types/v2/dashboards'
 import {Action} from 'src/shared/actions/v2/timeMachines'
 import {TimeMachineTab} from 'src/types/v2/timeMachine'
 
 export interface TimeMachineState {
-  view: NewView
+  view: View<QueryViewProperties> | NewView<QueryViewProperties>
   timeRange: TimeRange
   draftScript: string
   isViewingRawData: boolean
@@ -249,17 +254,16 @@ const timeMachineReducer = (
     case 'SET_QUERY_SOURCE': {
       const {sourceID} = action.payload
       const {activeQueryIndex} = state
-      const view: any = state.view
       const selectedQuery: string | undefined = get(
-        view,
-        `properties.queries.${activeQueryIndex}`
+        state,
+        `view.properties.queries.${activeQueryIndex}`
       )
 
       if (!selectedQuery) {
         return state
       }
 
-      const queries = view.properties.queries.map(
+      const queries = state.view.properties.queries.map(
         (query: DashboardQuery, i) => {
           if (i !== activeQueryIndex) {
             return query