Add & reorg types dirs and files for dashboard reducers, actions, & apis

Continue typing DashboardPage.

ui/src/dashboards/actions/index.ts

@@ -53,9 +53,11 @@ import idNormalizer, {TYPE_ID} from 'src/normalizers/id'
 
 import {defaultTimeRange} from 'src/shared/data/timeRanges'
 
+import {Dispatch} from 'redux'
 import {InjectedRouter} from 'react-router'
 import {Location} from 'history'
-import {Dispatch} from 'redux'
+import {AxiosResponse} from 'axios'
+// import * as AllData from 'src/types'
 import {
   Cell,
   Dashboard,
@@ -66,28 +68,18 @@ import {
   TimeRange,
   URLQueryParams,
 } from 'src/types'
-import {CellType, DashboardName} from 'src/types/dashboard'
+import * as DashboardData from 'src/types/dashboard'
-import {TimeRangeOption} from 'src/shared/data/timeRanges'
+import * as DashboardActions from 'src/types/actions/dashboard'
+import * as DashboardAPIs from 'src/types/apis/dashboard'
+import * as DashboardReducers from 'src/types/reducers/dashboard'
 import {PublishNotificationActionCreator} from 'src/shared/actions/notifications'
 import * as ErrorActions from 'src/shared/actions/errors'
 import {LocationAction} from 'react-router-redux'
 
-export type LoadDashboardsActionCreator = (
+export const loadDashboards: DashboardActions.LoadDashboardsActionCreator = (
   dashboards: Dashboard[],
   dashboardID?: number
-) => LoadDashboardsAction
+): DashboardActions.LoadDashboardsAction => ({
-
-interface LoadDashboardsAction {
-  type: 'LOAD_DASHBOARDS'
-  payload: {
-    dashboards: Dashboard[]
-    dashboardID: number
-  }
-}
-export const loadDashboards: LoadDashboardsActionCreator = (
-  dashboards: Dashboard[],
-  dashboardID?: number
-): LoadDashboardsAction => ({
   type: 'LOAD_DASHBOARDS',
   payload: {
     dashboards,
@@ -95,30 +87,19 @@ export const loadDashboards: LoadDashboardsActionCreator = (
   },
 })
 
-interface LoadDashboardAction {
+export const loadDashboard = (
-  type: 'LOAD_DASHBOARD'
+  dashboard: Dashboard
-  payload: {
+): DashboardActions.LoadDashboardAction => ({
-    dashboard: Dashboard
-  }
-}
-export const loadDashboard = (dashboard: Dashboard): LoadDashboardAction => ({
   type: 'LOAD_DASHBOARD',
   payload: {
     dashboard,
   },
 })
 
-interface SetDashTimeV1Action {
-  type: 'SET_DASHBOARD_TIME_V1'
-  payload: {
-    dashboardID: number
-    timeRange: TimeRange
-  }
-}
 export const setDashTimeV1 = (
   dashboardID: number,
   timeRange: TimeRange
-): SetDashTimeV1Action => ({
+): DashboardActions.SetDashTimeV1Action => ({
   type: 'SET_DASHBOARD_TIME_V1',
   payload: {
     dashboardID,
@@ -126,91 +107,52 @@ export const setDashTimeV1 = (
   },
 })
 
-interface RetainRangesDashTimeV1Action {
-  type: 'RETAIN_RANGES_DASHBOARD_TIME_V1'
-  payload: {
-    dashboardIDs: string[]
-  }
-}
 export const retainRangesDashTimeV1 = (
   dashboardIDs: string[]
-): RetainRangesDashTimeV1Action => ({
+): DashboardActions.RetainRangesDashTimeV1Action => ({
   type: 'RETAIN_RANGES_DASHBOARD_TIME_V1',
   payload: {dashboardIDs},
 })
 
-export type SetTimeRangeActionCreator = (
+export const setTimeRange = (
   timeRange: TimeRange
-) => SetTimeRangeAction
+): DashboardActions.SetTimeRangeAction => ({
-
-interface SetTimeRangeAction {
-  type: 'SET_DASHBOARD_TIME_RANGE'
-  payload: {
-    timeRange: TimeRange
-  }
-}
-export const setTimeRange = (timeRange: TimeRange): SetTimeRangeAction => ({
   type: 'SET_DASHBOARD_TIME_RANGE',
   payload: {
     timeRange,
   },
 })
 
-interface SetZoomedTimeRangeAction {
-  type: 'SET_DASHBOARD_ZOOMED_TIME_RANGE'
-  payload: {
-    zoomedTimeRange: TimeRange
-  }
-}
 export const setZoomedTimeRange = (
   zoomedTimeRange: TimeRange
-): SetZoomedTimeRangeAction => ({
+): DashboardActions.SetZoomedTimeRangeAction => ({
   type: 'SET_DASHBOARD_ZOOMED_TIME_RANGE',
   payload: {
     zoomedTimeRange,
   },
 })
 
-interface UpdateDashboardAction {
-  type: 'UPDATE_DASHBOARD'
-  payload: {
-    dashboard: Dashboard
-  }
-}
 export const updateDashboard = (
   dashboard: Dashboard
-): UpdateDashboardAction => ({
+): DashboardActions.UpdateDashboardAction => ({
   type: 'UPDATE_DASHBOARD',
   payload: {
     dashboard,
   },
 })
 
-interface CreateDashboardAction {
-  type: 'CREATE_DASHBOARD'
-  payload: {
-    dashboard: Dashboard
-  }
-}
 export const createDashboard = (
   dashboard: Dashboard
-): CreateDashboardAction => ({
+): DashboardActions.CreateDashboardAction => ({
   type: 'CREATE_DASHBOARD',
   payload: {
     dashboard,
   },
 })
 
-interface DeleteDashboardAction {
-  type: 'DELETE_DASHBOARD'
-  payload: {
-    dashboard: Dashboard
-    dashboardID: number
-  }
-}
 export const deleteDashboard = (
   dashboard: Dashboard
-): DeleteDashboardAction => ({
+): DashboardActions.DeleteDashboardAction => ({
   type: 'DELETE_DASHBOARD',
   payload: {
     dashboard,
@@ -218,32 +160,19 @@ export const deleteDashboard = (
   },
 })
 
-interface DeleteDashboardFailedAction {
-  type: 'DELETE_DASHBOARD_FAILED'
-  payload: {
-    dashboard: Dashboard
-  }
-}
 export const deleteDashboardFailed = (
   dashboard: Dashboard
-): DeleteDashboardFailedAction => ({
+): DashboardActions.DeleteDashboardFailedAction => ({
   type: 'DELETE_DASHBOARD_FAILED',
   payload: {
     dashboard,
   },
 })
 
-interface SyncDashboardCellAction {
-  type: 'SYNC_DASHBOARD_CELL'
-  payload: {
-    dashboard: Dashboard
-    cell: Cell
-  }
-}
 export const syncDashboardCell = (
   dashboard: Dashboard,
   cell: Cell
-): SyncDashboardCellAction => ({
+): DashboardActions.SyncDashboardCellAction => ({
   type: 'SYNC_DASHBOARD_CELL',
   payload: {
     dashboard,
@@ -251,17 +180,10 @@ export const syncDashboardCell = (
   },
 })
 
-interface AddDashboardCellAction {
-  type: 'ADD_DASHBOARD_CELL'
-  payload: {
-    dashboard: Dashboard
-    cell: Cell
-  }
-}
 export const addDashboardCell = (
   dashboard: Dashboard,
   cell: Cell
-): AddDashboardCellAction => ({
+): DashboardActions.AddDashboardCellAction => ({
   type: 'ADD_DASHBOARD_CELL',
   payload: {
     dashboard,
@@ -269,17 +191,10 @@ export const addDashboardCell = (
   },
 })
 
-interface DeleteDashboardCellAction {
-  type: 'DELETE_DASHBOARD_CELL'
-  payload: {
-    dashboard: Dashboard
-    cell: Cell
-  }
-}
 export const deleteDashboardCell = (
   dashboard: Dashboard,
   cell: Cell
-): DeleteDashboardCellAction => ({
+): DashboardActions.DeleteDashboardCellAction => ({
   type: 'DELETE_DASHBOARD_CELL',
   payload: {
     dashboard,
@@ -287,17 +202,10 @@ export const deleteDashboardCell = (
   },
 })
 
-interface EditCellQueryStatusAction {
-  type: 'EDIT_CELL_QUERY_STATUS'
-  payload: {
-    queryID: string
-    status: string
-  }
-}
 export const editCellQueryStatus = (
   queryID: string,
   status: string
-): EditCellQueryStatusAction => ({
+): DashboardActions.EditCellQueryStatusAction => ({
   type: 'EDIT_CELL_QUERY_STATUS',
   payload: {
     queryID,
@@ -305,19 +213,11 @@ export const editCellQueryStatus = (
   },
 })
 
-interface TemplateVariableSelectedAction {
-  type: 'TEMPLATE_VARIABLE_SELECTED'
-  payload: {
-    dashboardID: number
-    templateID: string
-    values: any[]
-  }
-}
 export const templateVariableSelected = (
   dashboardID: number,
   templateID: string,
   values
-): TemplateVariableSelectedAction => ({
+): DashboardActions.TemplateVariableSelectedAction => ({
   type: 'TEMPLATE_VARIABLE_SELECTED',
   payload: {
     dashboardID,
@@ -326,17 +226,10 @@ export const templateVariableSelected = (
   },
 })
 
-interface TemplateVariablesSelectedByNameAction {
-  type: 'TEMPLATE_VARIABLES_SELECTED_BY_NAME'
-  payload: {
-    dashboardID: number
-    queryParams: URLQueryParams
-  }
-}
 export const templateVariablesSelectedByName = (
   dashboardID: number,
   queryParams: URLQueryParams
-): TemplateVariablesSelectedByNameAction => ({
+): DashboardActions.TemplateVariablesSelectedByNameAction => ({
   type: 'TEMPLATE_VARIABLES_SELECTED_BY_NAME',
   payload: {
     dashboardID,
@@ -344,19 +237,11 @@ export const templateVariablesSelectedByName = (
   },
 })
 
-interface EditTemplateVariableValuesAction {
-  type: 'EDIT_TEMPLATE_VARIABLE_VALUES'
-  payload: {
-    dashboardID: number
-    templateID: string
-    values: any[]
-  }
-}
 export const editTemplateVariableValues = (
   dashboardID: number,
   templateID: string,
   values
-): EditTemplateVariableValuesAction => ({
+): DashboardActions.EditTemplateVariableValuesAction => ({
   type: 'EDIT_TEMPLATE_VARIABLE_VALUES',
   payload: {
     dashboardID,
@@ -365,26 +250,18 @@ export const editTemplateVariableValues = (
   },
 })
 
-interface SetHoverTimeAction {
+export const setHoverTime = (
-  type: 'SET_HOVER_TIME'
+  hoverTime: string
-  payload: {
+): DashboardActions.SetHoverTimeAction => ({
-    hoverTime: string
-  }
-}
-export const setHoverTime = (hoverTime: string): SetHoverTimeAction => ({
   type: 'SET_HOVER_TIME',
   payload: {
     hoverTime,
   },
 })
 
-interface SetActiveCellAction {
+export const setActiveCell = (
-  type: 'SET_ACTIVE_CELL'
+  activeCellID: string
-  payload: {
+): DashboardActions.SetActiveCellAction => ({
-    activeCellID: string
-  }
-}
-export const setActiveCell = (activeCellID: string): SetActiveCellAction => ({
   type: 'SET_ACTIVE_CELL',
   payload: {
     activeCellID,
@@ -393,21 +270,18 @@ export const setActiveCell = (activeCellID: string): SetActiveCellAction => ({
 
 // Async Action Creators
 
-export type GetDashboardsDispatcher = () => GetDashboardsThunk
+export const getDashboardsAsync = (): DashboardActions.GetDashboardsThunk => async (
-
-type GetDashboardsThunk = (
-  dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>
-) => Promise<Dashboard[] | void>
-
-export const getDashboardsAsync = (): GetDashboardsThunk => async (
   dispatch: Dispatch<
-    LoadDashboardsActionCreator | ErrorActions.ErrorThrownActionCreator
+    | DashboardActions.LoadDashboardsActionCreator
+    | ErrorActions.ErrorThrownActionCreator
   >
 ): Promise<Dashboard[] | void> => {
   try {
     const {
       data: {dashboards},
-    } = await getDashboardsAJAX()
+    } = (await getDashboardsAJAX()) as AxiosResponse<
+      DashboardAPIs.DashboardsResponse
+    >
     dispatch(loadDashboards(dashboards))
     return dashboards
   } catch (error) {
@@ -416,21 +290,13 @@ export const getDashboardsAsync = (): GetDashboardsThunk => async (
   }
 }
 
-export type GetDashboardsNamesDispatcher = (
-  sourceID: string
-) => GetDashboardsNamesThunk
-
-type GetDashboardsNamesThunk = (
-  dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>
-) => Promise<DashboardName[] | void>
-
 // gets update-to-date names of dashboards, but does not dispatch action
 // in order to avoid duplicate and out-of-sync state problems in redux
-export const getDashboardsNamesAsync = (
+export const getDashboardsNamesAsync: DashboardActions.GetDashboardsNamesDispatcher = (
   sourceID: string
-): GetDashboardsNamesThunk => async (
+): DashboardActions.GetDashboardsNamesThunk => async (
   dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>
-): Promise<DashboardName[] | void> => {
+): Promise<DashboardData.DashboardName[] | void> => {
   try {
     // TODO: change this from getDashboardsAJAX to getDashboardsNamesAJAX
     // to just get dashboard names (and links) as api view call when that
@@ -438,7 +304,9 @@ export const getDashboardsNamesAsync = (
     // dashboard for each
     const {
       data: {dashboards},
-    } = await getDashboardsAJAX()
+    } = (await getDashboardsAJAX()) as AxiosResponse<
+      DashboardAPIs.DashboardsResponse
+    >
     const dashboardsNames = dashboards.map(({id, name}) => ({
       id,
       name,
@@ -491,17 +359,12 @@ const removeUnselectedTemplateValues = (dashboard: Dashboard): Template[] => {
   return templates
 }
 
-export type PutDashboardDispatcher = (dashboard: Dashboard) => PutDashboardThunk
+export const putDashboard = (
-
+  dashboard: Dashboard
-type PutDashboardThunk = (
+): DashboardActions.PutDashboardThunk => async (
   dispatch: Dispatch<
-    UpdateDashboardAction | ErrorActions.ErrorThrownActionCreator
+    | DashboardActions.UpdateDashboardAction
-  >
+    | ErrorActions.ErrorThrownActionCreator
-) => Promise<void>
-
-export const putDashboard = (dashboard: Dashboard): PutDashboardThunk => async (
-  dispatch: Dispatch<
-    UpdateDashboardAction | ErrorActions.ErrorThrownActionCreator
   >
 ): Promise<void> => {
   try {
@@ -528,24 +391,11 @@ export const putDashboard = (dashboard: Dashboard): PutDashboardThunk => async (
   }
 }
 
-interface DashboardsReducerState {
-  dashboardUI: {dashboards: Dashboard[]}
-}
-
-type PutDashboardByIDThunk = (
-  dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>,
-  getState: () => DashboardsReducerState
-) => Promise<void>
-
-export type PutDashboardByIDDispatcher = (
-  dashboardID: number
-) => PutDashboardByIDThunk
-
 export const putDashboardByID = (
   dashboardID: number
-): PutDashboardByIDThunk => async (
+): DashboardActions.PutDashboardByIDThunk => async (
   dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>,
-  getState: () => DashboardsReducerState
+  getState: () => DashboardReducers.Dashboards
 ): Promise<void> => {
   try {
     const {
@@ -560,8 +410,14 @@ export const putDashboardByID = (
   }
 }
 
-export const updateDashboardCell = (dashboard: Dashboard, cell: Cell) => async (
+export const updateDashboardCell: DashboardActions.UpdateDashboardCellDispatcher = (
-  dispatch
+  dashboard: Dashboard,
+  cell: Cell
+): DashboardActions.UpdateDashboardCellThunk => async (
+  dispatch: Dispatch<
+    | DashboardActions.SyncDashboardCellActionCreator
+    | ErrorActions.ErrorThrownActionCreator
+  >
 ): Promise<void> => {
   try {
     const {data} = await updateDashboardCellAJAX(cell)
@@ -590,25 +446,12 @@ export const deleteDashboardAsync = (dashboard: Dashboard) => async (
   }
 }
 
-export type AddDashboardCellDispatcher = (
-  dashboard: Dashboard,
-  cellType: CellType
-) => AddDashboardCellThunk
-
-type AddDashboardCellThunk = (
-  dispatch: Dispatch<
-    | AddDashboardCellAction
-    | PublishNotificationActionCreator
-    | ErrorActions.ErrorThrownActionCreator
-  >
-) => Promise<void>
-
 export const addDashboardCellAsync = (
   dashboard: Dashboard,
-  cellType: CellType
+  cellType: DashboardData.CellType
-): AddDashboardCellThunk => async (
+): DashboardActions.AddDashboardCellThunk => async (
   dispatch: Dispatch<
-    | AddDashboardCellAction
+    | DashboardActions.AddDashboardCellAction
     | PublishNotificationActionCreator
     | ErrorActions.ErrorThrownActionCreator
   >
@@ -681,7 +524,9 @@ export const importDashboardAsync = (dashboard: Dashboard) => async (
 
     const {
       data: {dashboards},
-    } = await getDashboardsAJAX()
+    } = (await getDashboardsAJAX()) as AxiosResponse<
+      DashboardAPIs.DashboardsResponse
+    >
     dispatch(loadDashboards(dashboards))
 
     dispatch(notify(notifyDashboardImported(name)))
@@ -730,21 +575,11 @@ export const hydrateTempVarValuesAsync = (
 
 const removeNullValues = obj => _.pickBy(obj, o => o)
 
-type SyncURLQueryFromQueryParamsObjectDispatcher = (
-  location: Location,
-  updatedURLQueryParams: URLQueryParams,
-  deletedURLQueryParams: URLQueryParams
-) => SyncURLQueryFromQueryParamsObjectActionCreator
-
-type SyncURLQueryFromQueryParamsObjectActionCreator = (
-  dispatch: Dispatch<LocationAction>
-) => void
-
 export const syncURLQueryParamsFromQueryParamsObject = (
   location: Location,
   updatedURLQueryParams: URLQueryParams,
   deletedURLQueryParams: URLQueryParams = {}
-): SyncURLQueryFromQueryParamsObjectActionCreator => (
+): DashboardActions.SyncURLQueryFromQueryParamsObjectActionCreator => (
   dispatch: Dispatch<LocationAction>
 ): void => {
   const updatedLocationQuery = removeNullValues({
@@ -767,20 +602,15 @@ export const syncURLQueryParamsFromQueryParamsObject = (
   dispatch(replace(updatedLocation))
 }
 
-export type SyncURLQueryFromTempVarsDispatcher = (
-  location: Location,
-  tempVars: Template[],
-  deletedTempVars: Template[],
-  urlQueryParamsTimeRanges: URLQueryParams
-) => SyncURLQueryFromQueryParamsObjectActionCreator
-
 export const syncURLQueryFromTempVars = (
   location: Location,
   tempVars: Template[],
   deletedTempVars: Template[] = [],
   urlQueryParamsTimeRanges: URLQueryParams = {}
-): SyncURLQueryFromQueryParamsObjectActionCreator => (
+): DashboardActions.SyncURLQueryFromQueryParamsObjectActionCreator => (
-  dispatch: Dispatch<SyncURLQueryFromQueryParamsObjectDispatcher>
+  dispatch: Dispatch<
+    DashboardActions.SyncURLQueryFromQueryParamsObjectDispatcher
+  >
 ): void => {
   const updatedURLQueryParams = generateURLQueryParamsFromTempVars(tempVars)
   const deletedURLQueryParams = generateURLQueryParamsFromTempVars(
@@ -799,23 +629,15 @@ export const syncURLQueryFromTempVars = (
   )(dispatch)
 }
 
-interface AuthReducerState {
-  auth: {isUsingAuth: boolean; me: Me}
-}
-type SyncDashboardTempVarsFromURLQueryParamsDispatcher = (
-  dispatch: Dispatch<
-    PublishNotificationActionCreator | TemplateVariableSelectedAction
-  >,
-  getState: () => DashboardsReducerState & AuthReducerState
-) => void
 const syncDashboardTempVarsFromURLQueryParams = (
   dashboardID: number,
   urlQueryParams: URLQueryParams
-): SyncDashboardTempVarsFromURLQueryParamsDispatcher => (
+): DashboardActions.SyncDashboardTempVarsFromURLQueryParamsDispatcher => (
   dispatch: Dispatch<
-    PublishNotificationActionCreator | TemplateVariableSelectedAction
+    | PublishNotificationActionCreator
+    | DashboardActions.TemplateVariableSelectedAction
   >,
-  getState: () => DashboardsReducerState & AuthReducerState
+  getState: () => DashboardReducers.Dashboards & AuthReducerState
 ): void => {
   const {
     dashboardUI,
@@ -846,24 +668,13 @@ const syncDashboardTempVarsFromURLQueryParams = (
   dispatch(templateVariablesSelectedByName(dashboardID, urlQueryParams))
 }
 
-type DashTimeV1Range = TimeRangeOption & {dashboardID: number}
-
-interface DashTimeV1ReducerState {
-  dashTimeV1: {ranges: DashTimeV1Range[]}
-}
-
-type SyncDashboardTimeRangeFromURLQueryParamsDispatcher = (
-  dispatch: Dispatch<PublishNotificationActionCreator>,
-  getState: () => DashboardsReducerState & DashTimeV1ReducerState
-) => void
-
 const syncDashboardTimeRangeFromURLQueryParams = (
   dashboardID: number,
   urlQueryParams: URLQueryParams,
   location: Location
-): SyncDashboardTimeRangeFromURLQueryParamsDispatcher => (
+): DashboardActions.SyncDashboardTimeRangeFromURLQueryParamsDispatcher => (
   dispatch: Dispatch<PublishNotificationActionCreator>,
-  getState: () => DashboardsReducerState & DashTimeV1ReducerState
+  getState: () => DashboardReducers.Dashboards & DashboardReducers.DashTimeV1
 ): void => {
   const {
     dashboardUI: {dashboards},
@@ -919,19 +730,13 @@ const syncDashboardTimeRangeFromURLQueryParams = (
   )(dispatch)
 }
 
-type SyncDashboardFromURLQueryParamsDispatcher = (
-  dispatch: Dispatch<
-    | SyncDashboardTempVarsFromURLQueryParamsDispatcher
-    | SyncDashboardTimeRangeFromURLQueryParamsDispatcher
-  >
-) => void
 const syncDashboardFromURLQueryParams = (
   dashboardID: number,
   location: Location
-): SyncDashboardFromURLQueryParamsDispatcher => (
+): DashboardActions.SyncDashboardFromURLQueryParamsDispatcher => (
   dispatch: Dispatch<
-    | SyncDashboardTempVarsFromURLQueryParamsDispatcher
+    | DashboardActions.SyncDashboardTempVarsFromURLQueryParamsDispatcher
-    | SyncDashboardTimeRangeFromURLQueryParamsDispatcher
+    | DashboardActions.SyncDashboardTimeRangeFromURLQueryParamsDispatcher
   >
 ): void => {
   const urlQueryParams = queryString.parse(window.location.search)
@@ -947,23 +752,12 @@ const syncDashboardFromURLQueryParams = (
   )
 }
 
-export type GetDashboardWithHydratedAndSyncedTempVarsAsyncDispatcher = (
+export const getDashboardWithHydratedAndSyncedTempVarsAsync: DashboardActions.GetDashboardWithHydratedAndSyncedTempVarsAsyncDispatcher = (
-  dashboardID: string,
-  source: Source,
-  router: InjectedRouter,
-  location: Location
-) => GetDashboardWithHydratedAndSyncedTempVarsAsyncActionCreator
-
-type GetDashboardWithHydratedAndSyncedTempVarsAsyncActionCreator = (
-  dispatch: Dispatch<PublishNotificationActionCreator>
-) => Promise<void>
-
-export const getDashboardWithHydratedAndSyncedTempVarsAsync = (
   dashboardID: number,
   source: Source,
   router: InjectedRouter,
   location: Location
-): GetDashboardWithHydratedAndSyncedTempVarsAsyncActionCreator => async (
+): DashboardActions.GetDashboardWithHydratedAndSyncedTempVarsAsyncThunk => async (
   dispatch: Dispatch<PublishNotificationActionCreator>
 ): Promise<void> => {
   const dashboard = await bindActionCreators(getDashboardAsync, dispatch)(

ui/src/dashboards/apis/index.ts

@@ -1,6 +1,11 @@
-import AJAX from 'utils/ajax'
+import AJAX from 'src/utils/ajax'
 
-export function getDashboards() {
+import {AxiosResponse} from 'axios'
+import {DashboardsResponse} from 'src/types/apis/dashboard'
+
+export const getDashboards = (): Promise<
+  AxiosResponse<DashboardsResponse> | DashboardsResponse
+> => {
   return AJAX({
     method: 'GET',
     resource: 'dashboards',
@@ -19,7 +24,7 @@ export const getDashboard = async dashboardID => {
   }
 }
 
-export function updateDashboard(dashboard) {
+export const updateDashboard = dashboard => {
   return AJAX({
     method: 'PUT',
     url: dashboard.links.self,
@@ -27,7 +32,7 @@ export function updateDashboard(dashboard) {
   })
 }
 
-export function updateDashboardCell(cell) {
+export const updateDashboardCell = cell => {
   return AJAX({
     method: 'PUT',
     url: cell.links.self,

ui/src/dashboards/components/CellEditorOverlay.tsx

@@ -42,6 +42,7 @@ import {
   Status,
 } from 'src/types'
 import {ColorString, ColorNumber} from 'src/types/colors'
+import * as DashboardActions from 'src/dashboards/actions'
 import {SourceOption} from 'src/dashboards/components/OverlayControls'
 
 type QueryTransitions = typeof queryTransitions
@@ -74,7 +75,7 @@ interface QueryStatus {
 
 interface Props {
   sources: Source[]
-  editQueryStatus: () => void
+  editQueryStatus: DashboardActions.EditCellQueryStatusActionCreator
   onCancel: () => void
   onSave: (cell: Cell) => void
   source: Source

ui/src/dashboards/components/DashboardHeader.tsx

@@ -10,11 +10,10 @@ import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import GraphTips from 'src/shared/components/GraphTips'
 import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
 import DashboardSwitcher from 'src/dashboards/components/DashboardSwitcher'
-import {Dashboard, TimeRange} from 'src/types'
 
-interface DashboardName {
+import {Dashboard, TimeRange} from 'src/types'
-  text: string
+import {DashboardName} from 'src/types/dashboard'
-}
+import * as AppActions from 'src/shared/actions/app'
 
 interface Props {
   activeDashboard: string
@@ -24,15 +23,15 @@ interface Props {
   autoRefresh: number
   isEditMode?: boolean
   handleChooseTimeRange: (timeRange: TimeRange) => void
-  handleChooseAutoRefresh: () => void
+  handleChooseAutoRefresh: AppActions.SetAutoRefreshActionCreator
   onManualRefresh: () => void
-  handleClickPresentationButton: () => void
+  handleClickPresentationButton: AppActions.DelayEnablePresentationModeThunk
   onAddCell: () => void
   onToggleTempVarControls: () => void
   showTemplateControlBar: boolean
   zoomedTimeRange: TimeRange
   onCancel: () => void
-  onSave: () => void
+  onSave: (name: string) => Promise<void>
   names: DashboardName[]
   isHidden: boolean
 }

ui/src/dashboards/components/DashboardsPageContents.tsx

@@ -10,7 +10,7 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {
   showOverlay as showOverlayAction,
-  ShowOverlay,
+  ShowOverlayActionCreator,
 } from 'src/shared/actions/overlayTechnology'
 import {OverlayContext} from 'src/shared/components/OverlayTechnology'
 
@@ -27,7 +27,7 @@ interface Props {
   onExportDashboard: (dashboard: Dashboard) => () => void
   onImportDashboard: (dashboard: Dashboard) => void
   notify: (message: Notification) => void
-  showOverlay: ShowOverlay
+  showOverlay: ShowOverlayActionCreator
   dashboardLink: string
 }
 

ui/src/dashboards/containers/DashboardPage.tsx

@@ -49,14 +49,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import {getDeep} from 'src/utils/wrappers'
 
 import {Location} from 'history'
-import {Dispatch} from 'redux'
+import {InjectedRouter} from 'react-router'
-import {
+import {Cell, Dashboard as IDashboard, Source, TimeRange} from 'src/types'
-  Cell,
-  CellType,
-  Dashboard as IDashboard,
-  Source,
-  TimeRange,
-} from 'src/types'
 import {DashboardName} from 'src/types/dashboard'
 import {ColorNumber, ColorString} from 'src/types/colors'
 import * as AnnotationActions from 'src/shared/actions/annotations'
@@ -74,9 +68,8 @@ interface DashboardActions {
   getDashboardWithHydratedAndSyncedTempVarsAsync: DashboardActions.GetDashboardWithHydratedAndSyncedTempVarsAsyncDispatcher
   setTimeRange: DashboardActions.SetTimeRangeActionCreator
   addDashboardCellAsync: DashboardActions.AddDashboardCellDispatcher
-}
+  editCellQueryStatus: DashboardActions.EditCellQueryStatusActionCreator
-interface Router {
+  updateDashboardCell: DashboardActions.UpdateDashboardCellDispatcher
-  push: (path: string) => void
 }
 
 interface Props {
@@ -87,21 +80,18 @@ interface Props {
     dashboardID: string
   }
   location: Location
+  dashboardID: number
   dashboard: IDashboard
   dashboardActions: DashboardActions
   dashboards: IDashboard[]
-  handleChooseAutoRefresh: (
+  handleChooseAutoRefresh: AppActions.SetAutoRefreshActionCreator
-    milliseconds: number
-  ) => AppActions.SetAutoRefreshActionCreator
   autoRefresh: number
   templateControlBarVisibilityToggled: () => AppActions.TemplateControlBarVisibilityToggledActionCreator
   timeRange: TimeRange
   zoomedTimeRange: TimeRange
   showTemplateControlBar: boolean
   inPresentationMode: boolean
-  handleClickPresentationButton: (
+  handleClickPresentationButton: AppActions.DelayEnablePresentationModeThunk
-    dispatch: Dispatch<AppActions.EnablePresentationModeActionCreator>
-  ) => Promise<void>
   cellQueryStatus: {
     queryID: string
     status: object
@@ -111,7 +101,7 @@ interface Props {
   onManualRefresh: () => void
   meRole: string
   isUsingAuth: boolean
-  router: Router
+  router: InjectedRouter
   notify: NotificationActions.PublishNotificationActionCreator
   getAnnotationsAsync: AnnotationActions.GetAnnotationsDispatcher
   handleShowCellEditorOverlay: CellEditorOverlayActions.ShowCellEditorOverlayActionCreator
@@ -135,7 +125,9 @@ interface State {
 
 @ErrorHandling
 class DashboardPage extends Component<Props, State> {
-  constructor(props) {
+  private intervalID: number
+
+  public constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -149,7 +141,7 @@ class DashboardPage extends Component<Props, State> {
 
   public async componentDidMount() {
     const {
-      params: {dashboardID},
+      dashboardID,
       dashboardActions: {putDashboardByID},
       source,
       meRole,
@@ -163,7 +155,7 @@ class DashboardPage extends Component<Props, State> {
     getAnnotationsAsync(source.links.annotations, annotationRange)
 
     if (autoRefresh) {
-      this.intervalID = setInterval(() => {
+      this.intervalID = window.setInterval(() => {
         getAnnotationsAsync(source.links.annotations, annotationRange)
       }, autoRefresh)
     }
@@ -188,7 +180,7 @@ class DashboardPage extends Component<Props, State> {
       clearInterval(this.intervalID)
       const annotationRange = millisecondTimeRange(timeRange)
       if (nextProps.autoRefresh) {
-        this.intervalID = setInterval(() => {
+        this.intervalID = window.setInterval(() => {
           getAnnotationsAsync(source.links.annotations, annotationRange)
         }, nextProps.autoRefresh)
       }
@@ -206,7 +198,6 @@ class DashboardPage extends Component<Props, State> {
 
   public componentWillUnmount() {
     clearInterval(this.intervalID)
-    this.intervalID = false
     window.removeEventListener('resize', this.handleWindowResize, true)
     this.props.handleDismissEditingAnnotation()
   }
@@ -224,6 +215,7 @@ class DashboardPage extends Component<Props, State> {
       showTemplateControlBar,
       dashboard,
       dashboards,
+      dashboardID,
       lineColors,
       gaugeColors,
       autoRefresh,
@@ -239,7 +231,7 @@ class DashboardPage extends Component<Props, State> {
       handleShowCellEditorOverlay,
       handleHideCellEditorOverlay,
       handleClickPresentationButton,
-      params: {sourceID, dashboardID},
+      params: {sourceID},
     } = this.props
     const {dashboardsNames} = this.state
 
@@ -311,9 +303,7 @@ class DashboardPage extends Component<Props, State> {
         ) : null}
         <DashboardHeader
           names={dashboardsNames}
-          sourceID={sourceID}
           dashboard={dashboard}
-          dashboards={dashboards}
           timeRange={timeRange}
           isEditMode={isEditMode}
           autoRefresh={autoRefresh}
@@ -353,13 +343,10 @@ class DashboardPage extends Component<Props, State> {
             autoRefresh={autoRefresh}
             manualRefresh={manualRefresh}
             onZoom={this.handleZoomedTimeRange}
-            onAddCell={this.handleAddCell}
             inPresentationMode={inPresentationMode}
             onPositionChange={this.handleUpdatePosition}
-            onSelectTemplate={this.handleSelectTemplate}
             onDeleteCell={this.handleDeleteDashboardCell}
             onCloneCell={this.handleCloneCell}
-            showTemplateControlBar={showTemplateControlBar}
             templatesIncludingDashTime={templatesIncludingDashTime}
             onSummonOverlayTechnologies={handleShowCellEditorOverlay}
           />
@@ -368,13 +355,15 @@ class DashboardPage extends Component<Props, State> {
     )
   }
 
-  private handleWindowResize = () => {
+  private handleWindowResize = (): void => {
     this.setState({windowHeight: window.innerHeight})
   }
 
-  private async getDashboard() {
+  private async getDashboard(): Promise<
+    DashboardActions.GetDashboardWithHydratedAndSyncedTempVarsAsyncThunk
+  > {
     const {
-      params: {dashboardID},
+      dashboardID,
       dashboardActions: {getDashboardWithHydratedAndSyncedTempVarsAsync},
       source,
       router,
@@ -389,7 +378,7 @@ class DashboardPage extends Component<Props, State> {
     )
   }
 
-  private async getDashboardsNames() {
+  private async getDashboardsNames(): Promise<void> {
     const {
       params: {sourceID},
       dashboardActions: {getDashboardsNamesAsync},
@@ -477,7 +466,7 @@ class DashboardPage extends Component<Props, State> {
     this.setState({isEditMode: false})
   }
 
-  private handleRenameDashboard = async name => {
+  private handleRenameDashboard = async (name: string): Promise<void> => {
     const {dashboardActions, dashboard} = this.props
     this.setState({isEditMode: false})
     const newDashboard = {...dashboard, name}
@@ -498,12 +487,7 @@ class DashboardPage extends Component<Props, State> {
   }
 
   private handleSelectTemplate = templateID => value => {
-    const {
+    const {dashboardActions, dashboard, dashboardID, location} = this.props
-      dashboardActions,
-      dashboard,
-      params: {dashboardID},
-      location,
-    } = this.props
 
     const currentTempVar = dashboard.templates.find(
       tempVar => tempVar.id === templateID
@@ -602,6 +586,7 @@ const mstp = (state, {params: {dashboardID}}) => {
     sources,
     meRole,
     dashboard,
+    dashboardID: Number(dashboardID),
     timeRange,
     zoomedTimeRange,
     dashboards,

ui/src/shared/actions/app.ts

@@ -22,7 +22,11 @@ export const disablePresentationMode = (): DisablePresentationModeAction => ({
   type: 'DISABLE_PRESENTATION_MODE',
 })
 
-export const delayEnablePresentationMode = async (
+export type DelayEnablePresentationModeThunk = (
+  dispatch: Dispatch<EnablePresentationModeAction>
+) => Promise<NodeJS.Timer>
+
+export const delayEnablePresentationMode: DelayEnablePresentationModeThunk = async (
   dispatch: Dispatch<EnablePresentationModeAction>
 ): Promise<NodeJS.Timer> =>
   setTimeout(() => {
@@ -41,7 +45,9 @@ interface SetAutoRefreshAction {
     milliseconds: number
   }
 }
-export const setAutoRefresh = (milliseconds: number): SetAutoRefreshAction => ({
+export const setAutoRefresh: SetAutoRefreshActionCreator = (
+  milliseconds: number
+): SetAutoRefreshAction => ({
   type: 'SET_AUTOREFRESH',
   payload: {
     milliseconds,

ui/src/shared/components/AutoRefresh.tsx

@@ -56,7 +56,7 @@ const AutoRefresh = (
       inView: true,
     }
 
-    private intervalID: NodeJS.Timer | null
+    private intervalID: number
 
     constructor(props: Props) {
       super(props)
@@ -199,7 +199,7 @@ const AutoRefresh = (
       this.executeQueries()
 
       if (autoRefresh) {
-        this.intervalID = setInterval(this.executeQueries, autoRefresh)
+        this.intervalID = window.setInterval(this.executeQueries, autoRefresh)
       }
     }
 

ui/src/shared/data/timeRanges.ts

@@ -1,10 +1,4 @@
-import {TimeRange} from 'src/types/query'
+import {TimeRangeOption} from 'src/types/dashboard'
-export interface TimeRangeOption extends TimeRange {
-  defaultGroupBy: string
-  seconds: number
-  inputValue: string
-  menuOption: string
-}
 
 const nowMinus30d = 'now() - 30d'
 

ui/src/tempVars/components/TemplateControlBar.tsx

@@ -16,7 +16,6 @@ interface Props {
   source: Source
   onSelectTemplate: (id: string) => void
   onSaveTemplates: (templates: Template[]) => void
-  onCreateTemplateVariable: () => void
 }
 
 interface State {

ui/src/types/actions/dashboard.ts

@@ -0,0 +1,278 @@
+import {Dispatch} from 'redux'
+import {InjectedRouter} from 'react-router'
+import {LocationAction} from 'react-router-redux'
+import {Source} from 'src/types'
+import * as DashboardData from 'src/types/dashboard'
+import * as QueryData from 'src/types/query'
+import * as TempVarData from 'src/types/tempVars'
+import * as ErrorActions from 'src/shared/actions/errors'
+import * as NotificationActions from 'src/shared/actions/notifications'
+import * as DashboardReducers from 'src/types/reducers/dashboard'
+
+export type LoadDashboardsActionCreator = (
+  dashboards: DashboardData.Dashboard[],
+  dashboardID?: number
+) => LoadDashboardsAction
+
+export interface LoadDashboardsAction {
+  type: 'LOAD_DASHBOARDS'
+  payload: {
+    dashboards: DashboardData.Dashboard[]
+    dashboardID: number
+  }
+}
+
+export interface LoadDashboardAction {
+  type: 'LOAD_DASHBOARD'
+  payload: {
+    dashboard: DashboardData.Dashboard
+  }
+}
+
+export interface SetDashTimeV1Action {
+  type: 'SET_DASHBOARD_TIME_V1'
+  payload: {
+    dashboardID: number
+    timeRange: QueryData.TimeRange
+  }
+}
+
+export interface RetainRangesDashTimeV1Action {
+  type: 'RETAIN_RANGES_DASHBOARD_TIME_V1'
+  payload: {
+    dashboardIDs: string[]
+  }
+}
+
+export type SetTimeRangeActionCreator = (
+  timeRange: QueryData.TimeRange
+) => SetTimeRangeAction
+
+export interface SetTimeRangeAction {
+  type: 'SET_DASHBOARD_TIME_RANGE'
+  payload: {
+    timeRange: QueryData.TimeRange
+  }
+}
+
+export interface SetZoomedTimeRangeAction {
+  type: 'SET_DASHBOARD_ZOOMED_TIME_RANGE'
+  payload: {
+    zoomedTimeRange: QueryData.TimeRange
+  }
+}
+
+export interface UpdateDashboardAction {
+  type: 'UPDATE_DASHBOARD'
+  payload: {
+    dashboard: DashboardData.Dashboard
+  }
+}
+
+export interface CreateDashboardAction {
+  type: 'CREATE_DASHBOARD'
+  payload: {
+    dashboard: DashboardData.Dashboard
+  }
+}
+
+export interface DeleteDashboardAction {
+  type: 'DELETE_DASHBOARD'
+  payload: {
+    dashboard: DashboardData.Dashboard
+    dashboardID: number
+  }
+}
+
+export interface DeleteDashboardFailedAction {
+  type: 'DELETE_DASHBOARD_FAILED'
+  payload: {
+    dashboard: DashboardData.Dashboard
+  }
+}
+
+export type SyncDashboardCellActionCreator = (
+  dashboard: DashboardData.Dashboard,
+  cell: DashboardData.Cell
+) => SyncDashboardCellAction
+
+export interface SyncDashboardCellAction {
+  type: 'SYNC_DASHBOARD_CELL'
+  payload: {
+    dashboard: DashboardData.Dashboard
+    cell: DashboardData.Cell
+  }
+}
+
+export interface AddDashboardCellAction {
+  type: 'ADD_DASHBOARD_CELL'
+  payload: {
+    dashboard: DashboardData.Dashboard
+    cell: DashboardData.Cell
+  }
+}
+export interface DeleteDashboardCellAction {
+  type: 'DELETE_DASHBOARD_CELL'
+  payload: {
+    dashboard: DashboardData.Dashboard
+    cell: DashboardData.Cell
+  }
+}
+
+export type EditCellQueryStatusActionCreator = (
+  queryID: string,
+  status: string
+) => EditCellQueryStatusAction
+
+export interface EditCellQueryStatusAction {
+  type: 'EDIT_CELL_QUERY_STATUS'
+  payload: {
+    queryID: string
+    status: string
+  }
+}
+
+export interface TemplateVariableSelectedAction {
+  type: 'TEMPLATE_VARIABLE_SELECTED'
+  payload: {
+    dashboardID: number
+    templateID: string
+    values: any[]
+  }
+}
+
+export interface TemplateVariablesSelectedByNameAction {
+  type: 'TEMPLATE_VARIABLES_SELECTED_BY_NAME'
+  payload: {
+    dashboardID: number
+    queryParams: TempVarData.URLQueryParams
+  }
+}
+
+export interface EditTemplateVariableValuesAction {
+  type: 'EDIT_TEMPLATE_VARIABLE_VALUES'
+  payload: {
+    dashboardID: number
+    templateID: string
+    values: any[]
+  }
+}
+
+export interface SetHoverTimeAction {
+  type: 'SET_HOVER_TIME'
+  payload: {
+    hoverTime: string
+  }
+}
+
+export interface SetActiveCellAction {
+  type: 'SET_ACTIVE_CELL'
+  payload: {
+    activeCellID: string
+  }
+}
+
+export type GetDashboardsDispatcher = () => GetDashboardsThunk
+
+export type GetDashboardsThunk = (
+  dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>
+) => Promise<DashboardData.Dashboard[] | void>
+
+export type GetDashboardsNamesDispatcher = (
+  sourceID: string
+) => GetDashboardsNamesThunk
+
+export type GetDashboardsNamesThunk = (
+  dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>
+) => Promise<DashboardData.DashboardName[] | void>
+
+export type PutDashboardDispatcher = (
+  dashboard: DashboardData.Dashboard
+) => PutDashboardThunk
+
+export type PutDashboardThunk = (
+  dispatch: Dispatch<
+    UpdateDashboardAction | ErrorActions.ErrorThrownActionCreator
+  >
+) => Promise<void>
+
+export type PutDashboardByIDThunk = (
+  dispatch: Dispatch<ErrorActions.ErrorThrownActionCreator>,
+  getState: () => DashboardReducers.Dashboards
+) => Promise<void>
+
+export type PutDashboardByIDDispatcher = (
+  dashboardID: number
+) => PutDashboardByIDThunk
+
+export type UpdateDashboardCellDispatcher = (
+  dashboard: DashboardData.Dashboard,
+  cell: DashboardData.Cell
+) => UpdateDashboardCellThunk
+
+export type UpdateDashboardCellThunk = (
+  dispatch: Dispatch<
+    SyncDashboardCellActionCreator | ErrorActions.ErrorThrownActionCreator
+  >
+) => Promise<void>
+
+export type AddDashboardCellDispatcher = (
+  dashboard: DashboardData.Dashboard,
+  cellType: DashboardData.CellType
+) => AddDashboardCellThunk
+
+export type AddDashboardCellThunk = (
+  dispatch: Dispatch<
+    | AddDashboardCellAction
+    | NotificationActions.PublishNotificationActionCreator
+    | ErrorActions.ErrorThrownActionCreator
+  >
+) => Promise<void>
+
+export type SyncURLQueryFromQueryParamsObjectDispatcher = (
+  location: Location,
+  updatedURLQueryParams: TempVarData.URLQueryParams,
+  deletedURLQueryParams: TempVarData.URLQueryParams
+) => SyncURLQueryFromQueryParamsObjectActionCreator
+
+export type SyncURLQueryFromQueryParamsObjectActionCreator = (
+  dispatch: Dispatch<LocationAction>
+) => void
+
+export type SyncURLQueryFromTempVarsDispatcher = (
+  location: Location,
+  tempVars: TempVarData.Template[],
+  deletedTempVars: TempVarData.Template[],
+  urlQueryParamsTimeRanges: TempVarData.URLQueryParams
+) => SyncURLQueryFromQueryParamsObjectActionCreator
+
+export type SyncDashboardTempVarsFromURLQueryParamsDispatcher = (
+  dispatch: Dispatch<
+    | NotificationActions.PublishNotificationActionCreator
+    | TemplateVariableSelectedAction
+  >,
+  getState: () => DashboardReducers.Dashboards & DashboardReducers.Auth
+) => void
+
+export type SyncDashboardTimeRangeFromURLQueryParamsDispatcher = (
+  dispatch: Dispatch<NotificationActions.PublishNotificationActionCreator>,
+  getState: () => DashboardReducers.Dashboards & DashboardReducers.DashTimeV1
+) => void
+
+export type SyncDashboardFromURLQueryParamsDispatcher = (
+  dispatch: Dispatch<
+    | SyncDashboardTempVarsFromURLQueryParamsDispatcher
+    | SyncDashboardTimeRangeFromURLQueryParamsDispatcher
+  >
+) => void
+
+export type GetDashboardWithHydratedAndSyncedTempVarsAsyncDispatcher = (
+  dashboardID: number,
+  source: Source,
+  router: InjectedRouter,
+  location: Location
+) => GetDashboardWithHydratedAndSyncedTempVarsAsyncThunk
+
+export type GetDashboardWithHydratedAndSyncedTempVarsAsyncThunk = (
+  dispatch: Dispatch<NotificationActions.PublishNotificationActionCreator>
+) => Promise<void>

ui/src/types/apis/dashboard.ts

@@ -0,0 +1,5 @@
+import {Dashboard} from 'src/types/dashboard'
+
+export interface DashboardsResponse {
+  dashboards: Dashboard[]
+}

ui/src/types/query.ts

@@ -99,3 +99,12 @@ export interface TimeShift {
   unit: string
   quantity: string
 }
+
+export interface TimeRangeOption extends TimeRange {
+  defaultGroupBy: string
+  seconds: number
+  inputValue: string
+  menuOption: string
+}
+
+export type DashTimeV1Range = TimeRangeOption & {dashboardID: number}

ui/src/types/reducers/dashboard.ts

@@ -0,0 +1,15 @@
+import {Dashboard} from 'src/types'
+import {Me} from 'src/types/auth'
+import {DashTimeV1Range} from 'src/types/query'
+
+export interface Dashboards {
+  dashboardUI: {dashboards: Dashboard[]}
+}
+
+export interface Auth {
+  auth: {isUsingAuth: boolean; me: Me}
+}
+
+export interface DashTimeV1 {
+  dashTimeV1: {ranges: DashTimeV1Range[]}
+}

ui/src/utils/ajax.ts

@@ -72,7 +72,7 @@ function generateResponseWithLinks<T extends object>(
 }
 
 interface RequestParams {
-  url: string | string[]
+  url?: string | string[]
   resource?: string | null
   id?: string | null
   method?: string