Merge pull request #5898 from influxdata/chore/upgrade_deps_20220324

chore(ui): upgrade dependencies
2022-04-04 15:38:40 +02:00 · 2022-04-04 15:38:40 +02:00 · 3ae9a767c6
parent 8cccef0107 29e420024e
commit 3ae9a767c6
45 changed files with 2736 additions and 2457 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -8,6 +8,7 @@

 1. [#5875](https://github.com/influxdata/chronograf/pull/5875): Upgrade to node 16 LTS.
 1. [#5896](https://github.com/influxdata/chronograf/pull/5896): Add cypress tests with github workflows.
+1. [#5898](https://github.com/influxdata/chronograf/pull/5898): Upgrade javascript dependencies.

 ## v1.9.4 [2022-03-22]

--- a/ui/.eslintrc
+++ b/ui/.eslintrc
@ -7,7 +7,7 @@
    "eslint-plugin-react",
    "react",
    "prettier",
-    "babel",
+    "@babel",
    "jest"
  ],
  "settings": {
@ -247,7 +247,7 @@
    "react/sort-comp": 0,
    "jest/no-disabled-tests": "warn",
    "jest/no-focused-tests": "error",
-    "babel/no-invalid-this": 1,
+    "@babel/no-invalid-this": 1,
    "@typescript-eslint/adjacent-overload-signatures": "error",
    "@typescript-eslint/array-type": [
      "error",
@ -324,6 +324,7 @@
        "hoist": "all"
      }
    ],
+    "@typescript-eslint/no-unsafe-argument": "off",
    "@typescript-eslint/no-unsafe-assignment": "off",
    "@typescript-eslint/no-unsafe-call": "off",
    "@typescript-eslint/no-unsafe-member-access": "off",
@ -355,5 +356,19 @@
    "@typescript-eslint/type-annotation-spacing": "off",
    "@typescript-eslint/unbound-method": "off",
    "@typescript-eslint/unified-signatures": "error"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.js"],
+      "rules": {
+        "@typescript-eslint/no-unsafe-argument": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@babel/no-invalid-this": "off"
+      }
+    }
+  ]
 }
--- a/ui/package.json
+++ b/ui/package.json
@ -29,6 +29,8 @@
  "author": "",
  "devDependencies": {
    "@babel/core": "^7.4.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/eslint-plugin": "^7.17.7",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
@ -57,8 +59,8 @@
    "@types/react-virtualized": "^9.18.3",
    "@types/text-encoding": "^0.0.32",
    "@types/uuid": "^3.4.3",
-    "@typescript-eslint/eslint-plugin": "^4.16.1",
-    "@typescript-eslint/parser": "^4.16.1",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
    "autoprefixer": "^6.3.1",
    "babel-core": "^7.0.0-bridge",
    "babel-eslint": "^10.0.1",
@ -70,7 +72,6 @@
    "enzyme-to-json": "^3.3.4",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.8",
    "eslint-plugin-prefer-arrow": "^1.2.3",
@ -85,7 +86,7 @@
    "jest-runner-eslint": "^0.10.0",
    "node-sass": "^7.0.0",
    "parcel": "1.12.3",
-    "prettier": "^2.2.1",
+    "prettier": "2.2.1",
    "sass": "^1.26.3",
    "ts-jest": "^26.5.3",
    "tslib": "^1.9.0",
--- a/ui/src/dashboards/components/DashboardHeader.tsx
+++ b/ui/src/dashboards/components/DashboardHeader.tsx
@ -28,6 +28,7 @@ import TimeZoneToggle from 'src/shared/components/time_zones/TimeZoneToggle'

 // Constants
 import {AutoRefreshOption} from 'src/shared/components/dropdown_auto_refresh/autoRefreshOptions'
+import {HandleThunkActionCreator} from 'react-redux'

 interface State {
  selected: QueriesModels.TimeRange
@ -43,7 +44,7 @@ interface Props {
  handleChooseTimeRange: (timeRange: QueriesModels.TimeRange) => void
  handleChooseAutoRefresh: (autoRefreshOption: AutoRefreshOption) => void
  onManualRefresh: () => void
-  handleClickPresentationButton: AppActions.DelayEnablePresentationModeDispatcher
+  handleClickPresentationButton: HandleThunkActionCreator<AppActions.DelayEnablePresentationModeDispatcher>
  onAddCell: () => void
  showTempVarControls?: boolean
  onToggleShowTempVarControls?: () => void
--- a/ui/src/dashboards/containers/DashboardPage.tsx
+++ b/ui/src/dashboards/containers/DashboardPage.tsx
@ -1,6 +1,6 @@
 // Libraries
 import React, {Component, MouseEvent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import {withRouter} from 'react-router'
 import _ from 'lodash'

@ -64,39 +64,43 @@ import {AnnotationsDisplaySetting} from 'src/types/annotations'
 import {Links} from 'src/types/flux'
 import {createTimeRangeTemplates} from 'src/shared/utils/templates'

-interface Props extends ManualRefreshProps, WithRouterProps {
-  fluxLinks: Links
+interface OwnProps extends ManualRefreshProps, WithRouterProps {
  source: SourcesModels.Source
-  sources: SourcesModels.Source[]
  params: {
    sourceID: string
    dashboardID: string
  }
-  timeZone: TimeZones
-  setTimeZone: typeof appActions.setTimeZone
  location: Location
-  dashboardID: string
+  router: InjectedRouter
+}
+
+interface ReduxStateProps {
+  sources: SourcesModels.Source[]
+  meRole: string
+  timeZone: TimeZones
  dashboard: DashboardsModels.Dashboard
-  dashboards: DashboardsModels.Dashboard[]
-  autoRefresh: number
-  refreshRate: RefreshRate
+  fluxLinks: Links
+  dashboardID: string
  timeRange: QueriesModels.TimeRange
+  refreshRate: RefreshRate
  zoomedTimeRange: QueriesModels.TimeRange
+  autoRefresh: number
+  isUsingAuth: boolean
+  cellQueryStatuses: QueriesModels.QueryStatuses
  inPresentationMode: boolean
+  editorTimeRange: QueriesModels.TimeRange
  showTemplateVariableControlBar: boolean
+  annotationsDisplaySetting: AnnotationsDisplaySetting
+}
+type ReduxDispatchProps = ResolveThunks<{
  toggleTemplateVariableControlBar: typeof appActions.toggleTemplateVariableControlBar
  handleClickPresentationButton: AppActions.DelayEnablePresentationModeDispatcher
-  cellQueryStatuses: QueriesModels.QueryStatuses
  errorThrown: ErrorsActions.ErrorThrownActionCreator
-  meRole: string
-  isUsingAuth: boolean
-  router: InjectedRouter
  notify: NotificationAction
-  annotationsDisplaySetting: AnnotationsDisplaySetting
+  setTimeZone: typeof appActions.setTimeZone
  onGetAnnotationsAsync: typeof getAnnotationsAsync
  handleClearCEO: typeof cellEditorOverlayActions.clearCEO
  handleDismissEditingAnnotation: typeof dismissEditingAnnotation
-  editorTimeRange: QueriesModels.TimeRange
  setDashTimeV1: typeof dashboardActions.setDashTimeV1
  setDashRefresh: typeof dashboardActions.setDashRefresh
  setZoomedTimeRange: typeof dashboardActions.setZoomedTimeRange
@ -115,8 +119,9 @@ interface Props extends ManualRefreshProps, WithRouterProps {
  updateTemplateQueryParams: typeof dashboardActions.updateTemplateQueryParams
  updateQueryParams: typeof dashboardActions.updateQueryParams
  updateTimeRangeQueryParams: typeof dashboardActions.updateTimeRangeQueryParams
-}
+}>

+type Props = OwnProps & ReduxStateProps & ReduxDispatchProps
 interface State {
  scrollTop: number
  windowHeight: number
@ -585,7 +590,7 @@ class DashboardPage extends Component<Props, State> {
  }
 }

-const mstp = (state, {params: {dashboardID}}) => {
+const mstp = (state: any, {params: {dashboardID}}) => {
  const {
    app: {
      ephemeral: {inPresentationMode},
@ -596,7 +601,7 @@ const mstp = (state, {params: {dashboardID}}) => {
    dashboardUI: {dashboards, cellQueryStatuses, zoomedTimeRange},
    sources,
    auth: {me, isUsingAuth},
-    cellEditorOverlay: {cell, timeRange: editorTimeRange},
+    cellEditorOverlay: {timeRange: editorTimeRange},
  } = state

  const meRole = _.get(me, 'role', null)
@ -606,8 +611,6 @@ const mstp = (state, {params: {dashboardID}}) => {

  const dashboard = dashboards.find(d => d.id === dashboardID)

-  const selectedCell = cell
-
  return {
    sources,
    meRole,
@ -622,11 +625,10 @@ const mstp = (state, {params: {dashboardID}}) => {
    isUsingAuth,
    cellQueryStatuses,
    inPresentationMode,
-    selectedCell,
    editorTimeRange,
    showTemplateVariableControlBar,
    annotationsDisplaySetting: displaySetting,
-  }
+  } as ReduxStateProps
 }

 const mdtp = {
--- a/ui/src/dashboards/utils/tableGraph.ts
+++ b/ui/src/dashboards/utils/tableGraph.ts
@ -94,7 +94,7 @@ const updateMaxWidths = (
        colValue = toFixed(col, decimalPlaces)
      }

-      const columnLabel = topRow[c]
+      const columnLabel = topRow[c] as string
      const isTimeColumn =
        columnLabel === DEFAULT_INFLUXQL_TIME_FIELD.internalName ||
        columnLabel === DEFAULT_FLUX_TIME_FIELD.internalName
--- a/ui/src/data_explorer/components/SendToDashboardOverlay.tsx
+++ b/ui/src/data_explorer/components/SendToDashboardOverlay.tsx
@ -58,7 +58,7 @@ interface PassedProps {
    newCell: Partial<Cell>
  ) => Promise<{success: boolean; dashboard: Dashboard}>
  isStaticLegend: boolean
-  handleGetDashboards: () => Dashboard[]
+  handleGetDashboards: () => Promise<Dashboard[]>
  notify: (message: Notification) => void
  activeQueryIndex: number
 }
--- a/ui/src/data_explorer/containers/DataExplorer.tsx
+++ b/ui/src/data_explorer/containers/DataExplorer.tsx
@ -1,8 +1,7 @@
 // Libraries
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
-import {withRouter, InjectedRouter, WithRouterProps} from 'react-router'
-import {Location} from 'history'
+import {connect, ResolveThunks} from 'react-redux'
+import {withRouter, WithRouterProps} from 'react-router'
 import qs from 'qs'
 import uuid from 'uuid'
 import _ from 'lodash'
@ -54,13 +53,10 @@ import {
 import {
  Source,
  Dashboard,
-  QueryConfig,
  QueryStatuses,
  Template,
  TemplateType,
  TemplateValueType,
-  Notification,
-  Cell,
  QueryType,
  CellQuery,
  TimeRange,
@ -71,38 +67,11 @@ import {Links} from 'src/types/flux'

 interface PassedProps {
  source: Source
-  sources: Source[]
-  queryConfigs: QueryConfig[]
-  updateSourceLink: typeof updateSourceLinkAction
-  autoRefresh: number
-  handleChooseAutoRefresh: () => void
-  router?: InjectedRouter
-  location?: Location
-  manualRefresh: number
-  dashboards: Dashboard[]
-  onManualRefresh: () => void
-  errorThrownAction: () => void
-  writeLineProtocol: () => void
-  handleGetDashboards: () => Dashboard[]
-  sendDashboardCell: (
-    dashboard: Dashboard,
-    newCell: Partial<Cell>
-  ) => Promise<{success: boolean; dashboard: Dashboard}>
-  editQueryStatus: typeof editQueryStatusAction
-  resetQueryStatuses: typeof resetQueryStatusesAction
-  queryStatuses: QueryStatuses
-  fluxLinks: Links
-  notify: (message: Notification) => void
-  sourceLink: string
-  onSetTimeZone: typeof setTimeZoneAction
-  timeZone: TimeZones
 }

 interface ConnectedProps {
  queryType: QueryType
  queryDrafts: CellQuery[]
-  timeRange: TimeRange
-  timeZone: TimeZones
  draftScript: string
  script: string
  onUpdateQueryDrafts: (queryDrafts: CellQuery[]) => void
@ -110,7 +79,35 @@ interface ConnectedProps {
  onInitFluxScript: TimeMachineContainer['handleInitFluxScript']
 }

-type Props = PassedProps & ConnectedProps
+interface ReduxStateProps {
+  timeZone: TimeZones
+  fluxLinks: Links
+  autoRefresh: number
+  timeRange: TimeRange
+  dashboards: Dashboard[]
+  sources: Source[]
+  sourceLink: string
+  queryStatuses: QueryStatuses
+}
+
+type ReduxDispatchProps = ResolveThunks<{
+  handleChooseAutoRefresh: typeof setAutoRefresh
+  errorThrownAction: typeof errorThrown
+  writeLineProtocol: typeof writeLineProtocolAsync
+  handleGetDashboards: typeof getDashboardsAsync
+  sendDashboardCell: typeof sendDashboardCellAsync
+  editQueryStatus: typeof editQueryStatusAction
+  resetQueryStatuses: typeof resetQueryStatusesAction
+  notify: typeof notifyAction
+  updateSourceLink: typeof updateSourceLinkAction
+  onSetTimeZone: typeof setTimeZoneAction
+}>
+
+type Props = PassedProps &
+  ConnectedProps &
+  ReduxStateProps &
+  ReduxDispatchProps &
+  WithRouterProps

 interface State {
  isWriteFormVisible: boolean
@ -413,7 +410,7 @@ export class DataExplorer extends PureComponent<Props, State> {
  }

  private get selectedDatabase(): string {
-    return _.get(this.props.queryConfigs, ['0', 'database'], null)
+    return null
  }

  private toggleSendToDashboard = () => {
@ -435,7 +432,9 @@ export class DataExplorer extends PureComponent<Props, State> {
  }
 }

-const ConnectedDataExplorer = (props: PassedProps & WithRouterProps) => {
+const ConnectedDataExplorer = (
+  props: PassedProps & WithRouterProps & ReduxStateProps & ReduxDispatchProps
+) => {
  return (
    <TimeMachineContextConsumer>
      {(container: TimeMachineContainer) => {
@ -458,7 +457,7 @@ const ConnectedDataExplorer = (props: PassedProps & WithRouterProps) => {
  )
 }

-const mstp = state => {
+const mstp = (state: any) => {
  const {
    app: {
      persisted: {autoRefresh, timeZone},
@ -478,7 +477,7 @@ const mstp = state => {
    sources,
    queryStatuses,
    sourceLink,
-  }
+  } as ReduxStateProps
 }

 const mdtp = {
@ -494,4 +493,4 @@ const mdtp = {
  onSetTimeZone: setTimeZoneAction,
 }

-export default connect(mstp, mdtp)(withRouter(ConnectedDataExplorer))
+export default withRouter(connect(mstp, mdtp)(ConnectedDataExplorer))
--- a/ui/src/hosts/containers/HostPage.tsx
+++ b/ui/src/hosts/containers/HostPage.tsx
@ -1,11 +1,13 @@
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import classnames from 'classnames'

 import LayoutRenderer from 'src/shared/components/LayoutRenderer'
 import DashboardHeader from 'src/dashboards/components/DashboardHeader'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
-import ManualRefresh from 'src/shared/components/ManualRefresh'
+import ManualRefresh, {
+  ManualRefreshProps,
+} from 'src/shared/components/ManualRefresh'
 import {generateForHosts} from 'src/utils/tempVars'

 import {timeRanges} from 'src/shared/data/timeRanges'
@ -26,25 +28,34 @@ import {GlobalAutoRefresher} from 'src/utils/AutoRefresher'
 import {getCells} from 'src/hosts/utils/getCells'

 import {Source, Layout, TimeRange, TimeZones} from 'src/types'
-import {Location} from 'history'
 import {DashboardSwitcherLinks} from 'src/types/dashboards'
 import {setTimeZone} from 'src/shared/actions/app'
+import {WithRouterProps} from 'react-router'

-interface Props {
+interface OwnProps {
  source: Source
-  params: {
-    hostID: string
-  }
-  location: Location
+}
+
+type RouterProps = WithRouterProps<{
+  hostID: string
+}>
+
+interface ReduxStateProps {
  inPresentationMode: boolean
  autoRefresh: number
-  manualRefresh: number
-  onManualRefresh: () => void
+  timeZone: TimeZones
+}
+type ReduxDispatchProps = ResolveThunks<{
  handleChooseTimeRange: typeof setAutoRefresh
  handleClickPresentationButton: typeof delayEnablePresentationMode
-  timeZone: TimeZones
  onSetTimeZone: typeof setTimeZone
-}
+}>
+
+type Props = OwnProps &
+  RouterProps &
+  ManualRefreshProps &
+  ReduxStateProps &
+  ReduxDispatchProps

 interface State {
  layouts: Layout[]
@ -215,11 +226,12 @@ const mstp = ({
    ephemeral: {inPresentationMode},
    persisted: {autoRefresh, timeZone},
  },
-}) => ({
-  inPresentationMode,
-  autoRefresh,
-  timeZone,
-})
+}) =>
+  ({
+    inPresentationMode,
+    autoRefresh,
+    timeZone,
+  } as ReduxStateProps)

 const mdtp = {
  handleChooseTimeRange: setAutoRefresh,
--- a/ui/src/kapacitor/containers/KapacitorScopedPage.tsx
+++ b/ui/src/kapacitor/containers/KapacitorScopedPage.tsx
@ -1,6 +1,6 @@
 // Libraries
 import React, {MouseEvent, PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'

 // APIs
 import {getKapacitors, pingKapacitor} from 'src/shared/apis'
@ -23,13 +23,13 @@ import {Source, Kapacitor, RemoteDataState} from 'src/types'
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import NoKapacitorError from 'src/shared/components/NoKapacitorError'
-
-interface Props {
+type ReduxDispatchProps = ResolveThunks<{
  // connected props
  notify: typeof mdtp.notify
  setActiveKapacitor: typeof mdtp.setActiveKapacitor
+}>

-  // own props
+interface OwnProps {
  title: string
  source: Source
  tooltip?: string
@ -40,6 +40,7 @@ interface Props {
  ) => JSX.Element
 }

+type Props = OwnProps & ReduxDispatchProps
 interface State {
  loading: RemoteDataState
  scrollTop: number
--- a/ui/src/logs/containers/LogsPage.tsx
+++ b/ui/src/logs/containers/LogsPage.tsx
@ -2,9 +2,9 @@
 import React, {Component} from 'react'
 import uuid from 'uuid'
 import _ from 'lodash'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
-import {withRouter, InjectedRouter, WithRouterProps} from 'react-router'
+import {withRouter, WithRouterProps} from 'react-router'

 // Components
 import LogsHeader from 'src/logs/components/LogsHeader'
@ -77,7 +77,7 @@ import {SeverityFormatOptions, SEVERITY_SORTING_ORDER} from 'src/logs/constants'

 // Types
 import {Greys} from 'src/reusable_ui/types'
-import {Source, Namespace, NotificationAction} from 'src/types'
+import {Source, Namespace} from 'src/types'
 import {
  HistogramData,
  HistogramColor,
@ -92,70 +92,75 @@ import {
  TableData,
  TimeRange,
  TimeWindow,
-  TimeMarker,
  TimeBounds,
  SearchStatus,
  FetchLoop,
 } from 'src/types/logs'
 import {RemoteDataState} from 'src/types'

-interface Props extends WithRouterProps {
+interface ReduxStateProps {
  sources: Source[]
  currentSource: Source | null
  currentNamespaces: Namespace[]
  currentNamespace: Namespace
-  getSourceAndPopulateNamespaces: (sourceID: string) => void
-  getSources: typeof getSourcesAsync
-  setTimeRangeAsync: (timeRange: TimeRange) => void
-  setTimeBounds: (timeBounds: TimeBounds) => void
-  setTimeWindow: (timeWindow: TimeWindow) => void
-  setTimeMarker: (timeMarker: TimeMarker) => void
-  setNamespaceAsync: (namespace: Namespace) => void
-  setTableRelativeTime: (time: number) => void
-  setTableCustomTime: (time: string) => void
-  addFilter: (filter: Filter) => void
-  removeFilter: (id: string) => void
-  changeFilter: (id: string, operator: string, value: string) => void
-  clearFilters: () => void
-  getConfig: (url: string) => Promise<void>
-  updateConfig: (url: string, config: LogConfig) => Promise<void>
-  notify: NotificationAction
-  router: InjectedRouter
-  newRowsAdded: number
  timeRange: TimeRange
+  newRowsAdded: number
  histogramData: HistogramData
  tableData: TableData
  filters: Filter[]
  queryCount: number
  logConfig: LogConfig
  logConfigLink: string
-  tableInfiniteData: {
-    forward: TableData
-    backward: TableData
-  }
  tableTime: {
    custom: string
    relative: number
  }
-  fetchOlderChunkAsync: typeof fetchOlderChunkAsync
-  fetchNewerChunkAsync: typeof fetchNewerChunkAsync
-  fetchTailAsync: typeof fetchTailAsync
-  fetchNamespaceSyslogStatusAsync: typeof fetchNamespaceSyslogStatusAsync
-  populateNamespacesAsync: typeof populateNamespacesAsync
-  flushTailBuffer: typeof flushTailBuffer
-  clearAllTimeBounds: typeof clearAllTimeBounds
-  setNextTailLowerBound: typeof setNextTailLowerBound
-  setNextNewerLowerBound: typeof setNextNewerLowerBound
-  executeHistogramQueryAsync: typeof executeHistogramQueryAsync
+  tableInfiniteData: {
+    forward: TableData
+    backward: TableData
+  }
  nextOlderUpperBound: number | undefined
  nextNewerLowerBound: number | undefined
  currentTailUpperBound: number | undefined
  nextTailLowerBound: number | undefined
  searchStatus: SearchStatus
-  clearSearchData: (searchStatus: SearchStatus) => void
-  setSearchStatus: (SearchStatus: SearchStatus) => void
 }

+const mapDispatchToProps = {
+  getSourceAndPopulateNamespaces: getSourceAndPopulateNamespacesAsync,
+  getSources: getSourcesAsync,
+  setTimeRangeAsync,
+  setTimeBounds,
+  setTimeWindow,
+  setTimeMarker,
+  setNamespaceAsync,
+  executeHistogramQueryAsync,
+  clearSearchData,
+  setSearchStatus,
+  addFilter,
+  removeFilter,
+  changeFilter,
+  clearFilters,
+  fetchOlderChunkAsync,
+  fetchNewerChunkAsync,
+  fetchTailAsync,
+  fetchNamespaceSyslogStatusAsync,
+  flushTailBuffer,
+  clearAllTimeBounds,
+  setNextTailLowerBound,
+  setNextNewerLowerBound,
+  setTableCustomTime: setTableCustomTimeAsync,
+  setTableRelativeTime: setTableRelativeTimeAsync,
+  getConfig: getLogConfigAsync,
+  updateConfig: updateLogConfigAsync,
+  notify: notifyAction,
+  populateNamespacesAsync,
+}
+
+type ReduxDispatchProps = ResolveThunks<typeof mapDispatchToProps>
+
+type Props = ReduxStateProps & ReduxDispatchProps & WithRouterProps
+
 interface State {
  searchString: string
  liveUpdating: boolean
@ -955,7 +960,7 @@ class LogsPage extends Component<Props, State> {

    await this.props.setTimeBounds(timeBounds)

-    this.props.setTimeRangeAsync(this.props.timeRange)
+    this.props.setTimeRangeAsync(/* this.props.timeRange */)

    this.updateTableData(SearchStatus.UpdatingTimeBounds)
  }
@ -1177,38 +1182,6 @@ const mapStateToProps = ({
  searchStatus,
 })

-const mapDispatchToProps = {
-  getSourceAndPopulateNamespaces: getSourceAndPopulateNamespacesAsync,
-  getSources: getSourcesAsync,
-  setTimeRangeAsync,
-  setTimeBounds,
-  setTimeWindow,
-  setTimeMarker,
-  setNamespaceAsync,
-  executeHistogramQueryAsync,
-  clearSearchData,
-  setSearchStatus,
-  addFilter,
-  removeFilter,
-  changeFilter,
-  clearFilters,
-  fetchOlderChunkAsync,
-  fetchNewerChunkAsync,
-  fetchTailAsync,
-  fetchNamespaceSyslogStatusAsync,
-  flushTailBuffer,
-  clearAllTimeBounds,
-  setNextTailLowerBound,
-  setNextNewerLowerBound,
-  setTableCustomTime: setTableCustomTimeAsync,
-  setTableRelativeTime: setTableRelativeTimeAsync,
-  getConfig: getLogConfigAsync,
-  updateConfig: updateLogConfigAsync,
-  notify: notifyAction,
-  populateNamespacesAsync,
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withRouter(LogsPage))
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(LogsPage)
+)
--- a/ui/src/shared/actions/annotations.ts
+++ b/ui/src/shared/actions/annotations.ts
@ -17,6 +17,7 @@ import {
  AnnotationsDisplaySetting,
 } from 'src/types/annotations'
 import {AnnotationState} from 'src/shared/reducers/annotations'
+import {State} from 'src/dashboards/reducers/dashTimeV1'

 export type Action =
  | EditingAnnotationAction
@ -253,7 +254,7 @@ export const setDisplaySetting = (
 export const addAnnotationAsync = (
  createUrl: string,
  annotation: Annotation
-) => async dispatch => {
+) => async (dispatch: Dispatch<Action>) => {
  dispatch(addAnnotation(annotation))

  try {
@ -272,7 +273,7 @@ export const getAnnotationsAsync = (
  dashboardID: string
 ) => async (
  dispatch: Dispatch<SetAnnotationsAction>,
-  getState
+  getState: () => {annotations: AnnotationState; dashTimeV1: State}
 ): Promise<void> => {
  const {displaySetting} = getState().annotations

@ -294,9 +295,9 @@ export const getAnnotationsAsync = (
  dispatch(setAnnotations(annotations))
 }

-export const deleteAnnotationAsync = (
-  annotation: Annotation
-) => async dispatch => {
+export const deleteAnnotationAsync = (annotation: Annotation) => async (
+  dispatch: Dispatch<Action>
+) => {
  try {
    dispatch(deleteAnnotation(annotation))
    await api.deleteAnnotation(annotation)
@ -306,9 +307,9 @@ export const deleteAnnotationAsync = (
  }
 }

-export const updateAnnotationAsync = (
-  annotation: Annotation
-) => async dispatch => {
+export const updateAnnotationAsync = (annotation: Annotation) => async (
+  dispatch: Dispatch<Action>
+) => {
  try {
    await api.updateAnnotation(annotation)
    dispatch(updateAnnotation(annotation))
@ -321,7 +322,10 @@ export const updateTagFilterAsync = (
  indexURL: string,
  dashboardID: string,
  tagFilter: TagFilter
-) => async (dispatch, getState) => {
+) => async (
+  dispatch: Dispatch<Action>,
+  getState: () => {annotations: AnnotationState; dashTimeV1: State}
+) => {
  const state: AnnotationState = getState().annotations
  const currentTagFilter: TagFilter | null = getDeep(
    state,
@ -332,7 +336,7 @@ export const updateTagFilterAsync = (

  try {
    dispatch(updateTagFilter(dashboardID, tagFilter))
-    await dispatch(getAnnotationsAsync(indexURL, dashboardID))
+    await getAnnotationsAsync(indexURL, dashboardID)(dispatch, getState)
  } catch {
    dispatch(notify(annotationsError('Error saving tag filter')))

@ -348,17 +352,22 @@ export const deleteTagFilterAsync = (
  indexURL: string,
  dashboardID: string,
  tagFilter: TagFilter
-) => async dispatch => {
+) => async (
+  dispatch: Dispatch<Action>,
+  getState: () => {annotations: AnnotationState; dashTimeV1: State}
+) => {
  try {
    dispatch(deleteTagFilter(dashboardID, tagFilter))
-    await dispatch(getAnnotationsAsync(indexURL, dashboardID))
+    await getAnnotationsAsync(indexURL, dashboardID)(dispatch, getState)
  } catch {
    dispatch(updateTagFilter(dashboardID, tagFilter))
    dispatch(notify(annotationsError('Error deleting tag filter')))
  }
 }

-export const fetchAndSetTagKeys = (source: string) => async dispatch => {
+export const fetchAndSetTagKeys = (source: string) => async (
+  dispatch: Dispatch<SetTagKeysAction>
+) => {
  const query = 'SHOW TAG KEYS ON chronograf FROM annotations'
  const resp = await proxy({query, source})
  const tagKeys = parseMetaQuery(query, resp.data).filter(
@ -368,10 +377,9 @@ export const fetchAndSetTagKeys = (source: string) => async dispatch => {
  dispatch(setTagKeys(tagKeys))
 }

-export const fetchAndSetTagValues = (
-  source: string,
-  tagKey: string
-) => async dispatch => {
+export const fetchAndSetTagValues = (source: string, tagKey: string) => async (
+  dispatch: Dispatch<SetTagValuesAction>
+) => {
  const query = `SHOW TAG VALUES ON chronograf FROM annotations WITH KEY = "${tagKey}"`
  const resp = await proxy({query, source})
  const tagValues = parseMetaQuery(query, resp.data)
--- a/ui/src/shared/actions/auth.ts
+++ b/ui/src/shared/actions/auth.ts
@ -12,7 +12,7 @@ import {errorThrown} from 'src/shared/actions/errors'

 import {notifyUserSwitchedOrgs} from 'src/shared/copy/notifications'

-import {Me, Organization} from 'src/types/auth'
+import {Me} from 'src/types/auth'

 export type Action =
  | AuthExpiredAction
@ -148,7 +148,9 @@ export const getMeAsync = ({shouldResetMe = false} = {}) => async (
 // links are still refreshed.
 export const meChangeOrganizationAsync = (
  url: string,
-  organization: Organization
+  organization: {
+    organization: string
+  }
 ) => async (dispatch): Promise<void> => {
  dispatch(meChangeOrganizationRequested())
  try {
--- a/ui/src/shared/actions/links.ts
+++ b/ui/src/shared/actions/links.ts
@ -1,4 +1,4 @@
-import {Dispatch} from 'redux'
+import {Dispatch, Action as ReduxAction} from 'redux'

 import {getLinks as getLinksAJAX} from 'src/shared/apis/links'

@ -38,9 +38,7 @@ const linksGetFailed = (): LinksGetFailedAction => ({
 })

 export const getLinksAsync = () => async (
-  dispatch: Dispatch<
-    LinksGetRequestedAction | LinksGetCompletedAction | LinksGetFailedAction
-  >
+  dispatch: Dispatch<ReduxAction>
 ): Promise<void> => {
  dispatch(linksGetRequested())
  try {
--- a/ui/src/shared/actions/sources.ts
+++ b/ui/src/shared/actions/sources.ts
@ -120,7 +120,6 @@ export const setActiveKapacitor = (
  },
 })

-export type DeleteKapacitor = (kapacitor: Kapacitor) => ActionDeleteKapacitor
 export interface ActionDeleteKapacitor {
  type: 'DELETE_KAPACITOR'
  payload: {
--- a/ui/src/shared/components/Annotation.tsx
+++ b/ui/src/shared/components/Annotation.tsx
@ -17,7 +17,6 @@ interface Props {
 const Annotation: FunctionComponent<Props> = ({
  mode,
  dygraph,
-  dWidth,
  xAxisRange,
  annotation,
  staticLegendHeight,
@ -28,7 +27,6 @@ const Annotation: FunctionComponent<Props> = ({
        mode={mode}
        dygraph={dygraph}
        annotation={annotation}
-        dWidth={dWidth}
        staticLegendHeight={staticLegendHeight}
        xAxisRange={xAxisRange}
      />
@ -37,7 +35,6 @@ const Annotation: FunctionComponent<Props> = ({
        mode={mode}
        dygraph={dygraph}
        annotation={annotation}
-        dWidth={dWidth}
        staticLegendHeight={staticLegendHeight}
        xAxisRange={xAxisRange}
      />
--- a/ui/src/shared/components/AnnotationControlBar.tsx
+++ b/ui/src/shared/components/AnnotationControlBar.tsx
@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'

 import AddAnnotationToggle from 'src/shared/components/AddAnnotationToggle'
 import AnnotationFilterControl from 'src/shared/components/AnnotationFilterControl'
@ -21,21 +21,27 @@ import {Source} from 'src/types'
 import {TagFilter, AnnotationsDisplaySetting} from 'src/types/annotations'
 import {AnnotationState} from 'src/shared/reducers/annotations'

-interface Props {
-  dashboardID: string
+interface ReduxStateProps {
  tagFilters: TagFilter[]
  tagKeys?: string[]
  tagValues: {
    [tagKey: string]: string[]
  }
  displaySetting: AnnotationsDisplaySetting
-  source: Source
+}
+type ReduxDispatchProps = ResolveThunks<{
  onUpdateTagFilter: typeof updateTagFilter
  onUpdateTagFilterAsync: typeof updateTagFilterAsync
  onDeleteTagFilterAsync: typeof deleteTagFilterAsync
  onGetTagKeys: typeof fetchAndSetTagKeys
  onGetTagValues: typeof fetchAndSetTagValues
+}>
+
+interface OwnProps {
+  dashboardID: string
+  source: Source
 }
+type Props = OwnProps & ReduxStateProps & ReduxDispatchProps

 class AnnotationControlBar extends PureComponent<Props> {
  public render() {
@ -123,7 +129,7 @@ class AnnotationControlBar extends PureComponent<Props> {
 const mstp = (
  state: {annotations: AnnotationState},
  ownProps: {dashboardID: string}
-): Partial<Props> => {
+): ReduxStateProps => {
  const {tagKeys, tagValues, displaySetting} = state.annotations
  const tagFilters = getTagFilters(state, ownProps.dashboardID)

--- a/ui/src/shared/components/AnnotationEditorContainer.tsx
+++ b/ui/src/shared/components/AnnotationEditorContainer.tsx
@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'

 import AnnotationEditor from 'src/shared/components/AnnotationEditor'

@ -14,15 +14,18 @@ import {notifyErrorWithAltText} from 'src/shared/copy/notifications'

 import {Annotation} from 'src/types'

-interface Props {
+interface ReduxStateProps {
  editingAnnotation?: Annotation
+}
+type ReduxDispatchProps = ResolveThunks<{
  onSetEditingAnnotation: typeof setEditingAnnotation
  onDeleteAnnotation: typeof deleteAnnotationAsync
  onSaveAnnotation: typeof updateAnnotationAsync
  setTagKeys: typeof setTagKeysAction
  onNotify: typeof notify
-}
+}>

+type Props = ReduxStateProps & ReduxDispatchProps
 class AnnotationEditorContainer extends PureComponent<Props> {
  public render() {
    const {editingAnnotation} = this.props
@ -93,7 +96,7 @@ class AnnotationEditorContainer extends PureComponent<Props> {
 const mstp = ({annotations: {annotations, editingAnnotation}}) => {
  return {
    editingAnnotation: annotations[editingAnnotation],
-  }
+  } as ReduxStateProps
 }

 const mdtp = {
--- a/ui/src/shared/components/AnnotationTagsDropdown.tsx
+++ b/ui/src/shared/components/AnnotationTagsDropdown.tsx
@ -1,21 +1,32 @@
 import React, {PureComponent} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'
-import {connect} from 'react-redux'
+import {connect, HandleThunkActionCreator} from 'react-redux'
 import uuid from 'uuid'

 import {updateTagFilterAsync} from 'src/shared/actions/annotations'

 import {AnnotationTags, TagFilterType} from 'src/types/annotations'

-interface Props extends WithRouterProps {
+interface OwnProps {
  tags: AnnotationTags
-  annotationsIndexURL: string
-  onUpdateTagFilterAsync: typeof updateTagFilterAsync
  params: {
    dashboardID: string
    sourceID: string
  }
 }
+type RouterProps = WithRouterProps<{
+  dashboardID: string
+  sourceID: string
+}>
+
+interface ReduxStateProps {
+  annotationsIndexURL: string
+}
+
+interface ReduxDispatchProps {
+  onUpdateTagFilterAsync: HandleThunkActionCreator<typeof updateTagFilterAsync>
+}
+type Props = OwnProps & RouterProps & ReduxStateProps & ReduxDispatchProps

 class AnnotationTagsDropdown extends PureComponent<Props> {
  public render() {
@ -57,7 +68,7 @@ class AnnotationTagsDropdown extends PureComponent<Props> {
  }
 }

-const mstp = (state, ownProps) => {
+const mstp = (state: any, ownProps: any) => {
  const {sourceID} = ownProps.params
  const source = state.sources.find(s => (s.id = sourceID))

@ -67,7 +78,7 @@ const mstp = (state, ownProps) => {

  return {
    annotationsIndexURL: source.links.annotations,
-  }
+  } as ReduxStateProps
 }

 const mdtp = {
--- a/ui/src/shared/components/Dygraph.tsx
+++ b/ui/src/shared/components/Dygraph.tsx
@ -1,11 +1,16 @@
 /* eslint-disable no-undef */
 // Libraries
-import React, {Component, CSSProperties, MouseEvent} from 'react'
+import React, {
+  Component,
+  CSSProperties,
+  MouseEvent as ReactMouseEvent,
+} from 'react'
 import {connect} from 'react-redux'
 import {filter, isEqual} from 'lodash'
 import NanoDate from 'nano-date'
 import ReactResizeDetector from 'react-resize-detector'
 import memoizeOne from 'memoize-one'
+import DygraphsDygraph from 'dygraphs'

 // Components
 import D from 'src/external/dygraph'
@ -75,7 +80,7 @@ interface Props {
  timeSeries: DygraphData
  labels: string[]
  options: dygraphs.Options
-  containerStyle: Record<string, unknown>
+  containerStyle: CSSProperties
  dygraphSeries: DygraphSeries
  timeRange: TimeRange
  colors: LineColor[]
@ -86,8 +91,13 @@ interface Props {
  staticLegend?: boolean
  onZoom?: (timeRange: TimeRange) => void
  mode?: string
-  underlayCallback?: () => void
+  underlayCallback?: (
+    context: CanvasRenderingContext2D,
+    area: dygraphs.Area,
+    dygraph: DygraphsDygraph
+  ) => void
  timeZone: TimeZones
+  children?: JSX.Element | JSX.Element[]
 }

 interface State {
@ -204,7 +214,7 @@ class Dygraph extends Component<Props, State> {
              onMouseEnter={this.handleMouseEnterLegend}
            />
            <Crosshair
-              dygraph={this.dygraph}
+              dygraph={(this.dygraph as unknown) as DygraphsDygraph}
              staticLegendHeight={staticLegendHeight}
            />
          </div>
@ -373,7 +383,7 @@ class Dygraph extends Component<Props, State> {

  private eventToTimestamp = ({
    pageX: pxBetweenMouseAndPage,
-  }: MouseEvent<HTMLDivElement>): string => {
+  }: ReactMouseEvent<HTMLDivElement> | MouseEvent): string => {
    const pxBetweenGraphAndPage = this.graphRef.current.getBoundingClientRect()
      .left
    const graphXCoordinate = pxBetweenMouseAndPage - pxBetweenGraphAndPage
@ -389,7 +399,9 @@ class Dygraph extends Component<Props, State> {
    this.props.handleSetHoverTime(NULL_HOVER_TIME)
  }

-  private handleShowLegend = (e: MouseEvent<HTMLDivElement>): void => {
+  private handleShowLegend = (
+    e: ReactMouseEvent<HTMLDivElement> | MouseEvent
+  ): void => {
    const {isMouseInLegend} = this.state

    if (isMouseInLegend) {
@ -443,7 +455,7 @@ class Dygraph extends Component<Props, State> {
      ...this.props.options,
    }

-    return options
+    return options as dygraphs.Options
  }

  private haveDygraphOptionsChanged(nextOptions: dygraphs.Options): boolean {
--- a/ui/src/shared/components/Layout.tsx
+++ b/ui/src/shared/components/Layout.tsx
@ -15,7 +15,7 @@ import {getDeep} from 'src/utils/wrappers'
 import {IS_STATIC_LEGEND} from 'src/shared/constants'

 // Types
-import {TimeRange, Cell, Template, Source, QueryType} from 'src/types'
+import {TimeRange, Cell, Template, Source, QueryType, Query} from 'src/types'
 import {TimeSeriesServerResponse} from 'src/types/series'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {GrabDataForDownloadHandler} from 'src/types/layout'
@ -95,7 +95,7 @@ class Layout extends Component<Props, State> {
      templates,
      source,
    } = this.props
-    const {cellFluxData, visType} = this.state
+    const {visType} = this.state
    const showRawFluxData = visType === VisType.Table

    return (
@ -116,13 +116,11 @@ class Layout extends Component<Props, State> {
        staticLegend={IS_STATIC_LEGEND(cell.legend)}
        grabDataForDownload={this.grabDataForDownload}
        grabFluxData={this.grabFluxData}
-        queries={cell.queries}
+        queries={(cell.queries as unknown) as Query[]}
        source={source}
        cellNote={cell.note}
        cellNoteVisibility={cell.noteVisibility}
-        rawData={cellFluxData}
        showRawFluxData={showRawFluxData}
-        visType={this.visType}
      />
    )
  }
@ -160,7 +158,9 @@ class Layout extends Component<Props, State> {
        manualRefresh={manualRefresh}
        staticLegend={IS_STATIC_LEGEND(cell.legend)}
        grabDataForDownload={this.grabDataForDownload}
-        queries={buildQueriesForLayouts(cell, timeRange, host)}
+        queries={
+          (buildQueriesForLayouts(cell, timeRange, host) as unknown) as Query[]
+        }
        source={this.getSource(cell, source, sources, source)}
        cellNote={cell.note}
        cellNoteVisibility={cell.noteVisibility}
--- a/ui/src/shared/components/LineGraph.tsx
+++ b/ui/src/shared/components/LineGraph.tsx
@ -51,7 +51,7 @@ interface Props {
  cellHeight: number
  staticLegend: boolean
  onZoom: () => void
-  handleSetHoverTime: () => void
+  handleSetHoverTime: (t: string) => void
  activeQueryIndex?: number
  onUpdateVisType?: (type: CellType) => Promise<void>
 }
--- a/ui/src/shared/components/RefreshingGraph.tsx
+++ b/ui/src/shared/components/RefreshingGraph.tsx
@ -1,6 +1,6 @@
 // Libraries
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import _ from 'lodash'
 import {AutoSizer} from 'react-virtualized'

@ -47,6 +47,7 @@ import {
  RemoteDataState,
  QueryUpdateState,
  QueryType,
+  Status,
 } from 'src/types'
 import {
  TableOptions,
@ -62,7 +63,7 @@ interface TypeAndData {
  data: TimeSeriesServerResponse[] | FluxTable[]
 }

-interface Props {
+interface OwnProps {
  axes: Axes
  source: Source
  queries: Query[]
@ -83,12 +84,9 @@ interface Props {
  autoRefresher: AutoRefresher
  manualRefresh: number
  resizerTopHeight: number
-  fluxASTLink: string
  onZoom: () => void
-  editQueryStatus: () => void
+  editQueryStatus?: (queryID: string, status: Status) => void
  onSetResolution: () => void
-  handleSetHoverTime: () => void
-  onNotify: typeof notify
  grabDataForDownload?: GrabDataForDownloadHandler
  grabFluxData?: (data: string) => void
  cellNote: string
@ -99,6 +97,17 @@ interface Props {
  onUpdateVisType?: (type: CellType) => Promise<void>
 }

+interface ReduxStateProps {
+  fluxASTLink: string
+}
+
+type ReduxDispatchProps = ResolveThunks<{
+  handleSetHoverTime: typeof setHoverTime
+  onNotify: typeof notify
+}>
+
+type Props = OwnProps & ReduxStateProps & ReduxDispatchProps
+
 class RefreshingGraph extends Component<Props> {
  public static defaultProps: Partial<Props> = {
    inView: true,
@ -539,10 +548,10 @@ class RefreshingGraph extends Component<Props> {
  }
 }

-const mapStateToProps = ({links, annotations: {mode}}) => ({
-  mode,
-  fluxASTLink: links.flux.ast,
-})
+const mapStateToProps = ({links}) =>
+  ({
+    fluxASTLink: links.flux.ast,
+  } as ReduxStateProps)

 const mdtp = {
  handleSetHoverTime: setHoverTime,
--- a/ui/src/shared/components/TableGraph.tsx
+++ b/ui/src/shared/components/TableGraph.tsx
@ -337,7 +337,10 @@ class TableGraph extends PureComponent<Props, State> {
      }
    }

-    const firstDiff = this.getTimeDifference(hoverTime, sortedTimeVals[1]) // sortedTimeVals[0] is "time"
+    const firstDiff = this.getTimeDifference(
+      hoverTime,
+      sortedTimeVals[1] as number | string
+    ) // sortedTimeVals[0] is "time"

    const hoverTimeFound = fastReduce<
      TimeSeriesValue,
@ -345,7 +348,10 @@ class TableGraph extends PureComponent<Props, State> {
    >(
      sortedTimeVals,
      (acc, currentTime, index) => {
-        const thisDiff = this.getTimeDifference(hoverTime, currentTime)
+        const thisDiff = this.getTimeDifference(
+          hoverTime,
+          currentTime as string | number
+        )
        if (thisDiff < acc.diff) {
          return {index, diff: thisDiff}
        }
@ -359,7 +365,7 @@ class TableGraph extends PureComponent<Props, State> {
    return {scrollToRow, scrollToColumn, externalScroll: hoveringOtherCell}
  }

-  private getTimeDifference(hoverTime, time: string | number) {
+  private getTimeDifference(hoverTime: string, time: string | number) {
    return Math.abs(parseInt(hoverTime, 10) - parseInt(time as string, 10))
  }

@ -426,7 +432,7 @@ class TableGraph extends PureComponent<Props, State> {

    const columnLabel = transformedData[0][index]

-    const original = columnWidths[columnLabel]
+    const original = columnWidths[columnLabel as string]

    if (original > adjustedWidth) {
      // if the original calculated size of the column is greater than the table size
@ -462,10 +468,12 @@ class TableGraph extends PureComponent<Props, State> {

    if (isTimeData) {
      if (timeZone === TimeZones.UTC) {
-        return moment(cellData).utc().format(timeFormat)
+        return moment(cellData as number | string)
+          .utc()
+          .format(timeFormat)
      }

-      return moment(cellData).format(timeFormat)
+      return moment(cellData as number | string).format(timeFormat)
    }

    if (_.isString(cellData) && isFieldName) {
--- a/ui/src/shared/components/TimeMachine/TimeMachineVisualization.tsx
+++ b/ui/src/shared/components/TimeMachine/TimeMachineVisualization.tsx
@ -93,8 +93,6 @@ const TimeMachineVisualization: FunctionComponent<Props> = props => {
            fieldOptions={props.fieldOptions}
            timeFormat={props.timeFormat}
            decimalPlaces={props.decimalPlaces}
-            gaugeColors={props.gaugeColors}
-            lineColors={props.lineColors}
            cellNote={props.note}
            cellNoteVisibility={props.noteVisibility}
            onUpdateFieldOptions={props.onUpdateFieldOptions}
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/BucketsSelector.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/BucketsSelector.tsx
@ -1,6 +1,6 @@
 // Libraries
 import React, {useEffect, useMemo} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import classnames from 'classnames'

 // Components
@ -12,11 +12,12 @@ import {BucketSelectorState, TimeMachineQueryProps} from './types'
 import {loadBucketsThunk, selectBucketThunk} from './actions/thunks'
 import {setBucketsSearchTerm} from './actions/buckets'

-interface Callbacks {
+type Callbacks = ResolveThunks<{
  onFilterBuckets: typeof setBucketsSearchTerm
  onSelectBucket: typeof selectBucketThunk
  onLoadBuckets: typeof loadBucketsThunk
-}
+}>
+
 type Props = TimeMachineQueryProps & BucketSelectorState & Callbacks

 const filterBuckets = (buckets: string[], term: string): string[] => {
@ -114,7 +115,7 @@ const InitializeBucketsSelector = (props: Props) => {
 const mstp = (state: any): BucketSelectorState => {
  return state?.fluxQueryBuilder?.buckets as BucketSelectorState
 }
-const mdtp: Callbacks = {
+const mdtp = {
  onLoadBuckets: loadBucketsThunk,
  onFilterBuckets: setBucketsSearchTerm,
  onSelectBucket: selectBucketThunk,
--- a/ui/src/shared/components/TimeMachine/fluxQueryBuilder/WindowPeriod.tsx
+++ b/ui/src/shared/components/TimeMachine/fluxQueryBuilder/WindowPeriod.tsx
@ -1,12 +1,12 @@
 import React, {useState, PureComponent} from 'react'
-import onClickOutside from 'react-onclickoutside'

 import Dropdown from 'src/shared/components/Dropdown'
 import {AGG_WINDOW_AUTO, DURATIONS} from './util/constants'

-import {connect} from 'react-redux'
-import {notify} from 'src/shared/actions/notifications'
+import {connect, HandleThunkActionCreator} from 'react-redux'
+import {notify as notifyActionCreator} from 'src/shared/actions/notifications'
 import {fluxWizardError} from 'src/shared/copy/notifications'
+import {ClickOutside} from '../../ClickOutside'

 function isDurationParseable(duration: string): boolean {
  const durationRegExp = /^(?:[1-9][0-9]*(?:y|mo|w|d|h|ms|s|m|us|µs|ns))+$/g
@ -73,46 +73,51 @@ const WindowPeriod = ({selected, autoPeriod, onChoose}: Props) => {
  )
 }

-interface CustomDurationProps {
-  notify: (notification: any) => void
+interface CustomDurationOwnProps {
  customDuration: string
  setCustomDuration: (value: string | undefined) => void
  onChoose: (value: string) => void
 }
+interface CustomDurationReduxProps {
+  notify: HandleThunkActionCreator<typeof notifyActionCreator>
+}
+type CustomDurationProps = CustomDurationOwnProps & CustomDurationReduxProps
 class DurationInput extends PureComponent<CustomDurationProps> {
  public render() {
    const {customDuration, setCustomDuration, onChoose} = this.props
    const valid = isDurationParseable(customDuration)
    return (
-      <input
-        className="form-control input-sm"
-        placeholder="Enter custom duration"
-        type="text"
-        style={valid ? undefined : {border: '2px solid #F95F53'}}
-        value={customDuration}
-        onChange={e => setCustomDuration(e.target.value)}
-        onKeyUp={e => {
-          if (e.key === 'Escape') {
-            e.stopPropagation()
-            setCustomDuration(undefined)
-          }
-          if (e.key === 'Enter') {
-            e.stopPropagation()
-            if (valid) {
+      <ClickOutside onClickOutside={this.handleClickOutside}>
+        <input
+          className="form-control input-sm"
+          placeholder="Enter custom duration"
+          type="text"
+          style={valid ? undefined : {border: '2px solid #F95F53'}}
+          value={customDuration}
+          onChange={e => setCustomDuration(e.target.value)}
+          onKeyUp={e => {
+            if (e.key === 'Escape') {
+              e.stopPropagation()
              setCustomDuration(undefined)
-              onChoose(customDuration)
-            } else {
-              this.props.notify(
-                fluxWizardError(`Invalid flux duration: ${customDuration}`)
-              )
            }
-          }
-        }}
-        onFocus={e => e.target.select()}
-        spellCheck={false}
-        autoComplete="false"
-        autoFocus={true}
-      />
+            if (e.key === 'Enter') {
+              e.stopPropagation()
+              if (valid) {
+                setCustomDuration(undefined)
+                onChoose(customDuration)
+              } else {
+                this.props.notify(
+                  fluxWizardError(`Invalid flux duration: ${customDuration}`)
+                )
+              }
+            }
+          }}
+          onFocus={e => e.target.select()}
+          spellCheck={false}
+          autoComplete="false"
+          autoFocus={true}
+        />
+      </ClickOutside>
    )
  }
  public handleClickOutside = () => {
@ -120,8 +125,8 @@ class DurationInput extends PureComponent<CustomDurationProps> {
  }
 }

-const CustomDurationInput = connect(null, {notify})(
-  onClickOutside(DurationInput)
+const CustomDurationInput = connect(null, {notify: notifyActionCreator})(
+  DurationInput
 )

 export default WindowPeriod
--- a/ui/src/shared/components/TimeRangeLabel.tsx
+++ b/ui/src/shared/components/TimeRangeLabel.tsx
@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 import {timeRanges} from 'src/shared/data/timeRanges'
 import {TimeRange, TimeZones} from 'src/types'
 import _ from 'lodash'
+import {PureComponent} from 'react'

 const dateFormat = 'YYYY-MM-DD HH:mm'
 const format = (t: string, timeZone: string) => {
@ -17,7 +18,11 @@ const format = (t: string, timeZone: string) => {
 interface PassedProps {
  timeRange: TimeRange
 }
-type Props = PassedProps & ReturnType<typeof mstp>
+
+interface ReduxStateProps {
+  timeZone?: TimeZones
+}
+type Props = PassedProps & ReduxStateProps

 export function timeRangeLabel({
  timeRange: {upper, lower},
@ -33,13 +38,15 @@ export function timeRangeLabel({
  const selected = timeRanges.find(range => range.lower === lower)
  return selected ? selected.inputValue : 'Custom'
 }
-const TimeRangeLabel = (props: Props) => {
-  return timeRangeLabel(props)
+class TimeRangeLabel extends PureComponent<Props> {
+  public render() {
+    return timeRangeLabel(this.props)
+  }
 }

-const mstp = (state: any) => ({
-  timeZone: _.get(state, ['app', 'persisted', 'timeZone']) as
-    | TimeZones
-    | undefined,
-})
+const mstp = (state: any) =>
+  ({
+    timeZone: _.get(state, ['app', 'persisted', 'timeZone']),
+  } as ReduxStateProps)
+
 export default connect(mstp)(TimeRangeLabel)
--- a/ui/src/shared/components/WidgetCell.tsx
+++ b/ui/src/shared/components/WidgetCell.tsx
@ -28,7 +28,7 @@ const WidgetCell: FunctionComponent<Props> = ({cell, source, timeRange}) => {
      )
    }
    case 'news': {
-      return <NewsFeed source={source} />
+      return <NewsFeed />
    }
    case 'guide': {
      return <GettingStarted />
--- a/ui/src/shared/constants/thresholds.ts
+++ b/ui/src/shared/constants/thresholds.ts
@ -115,7 +115,7 @@ export const DEFAULT_THRESHOLDS_LIST_COLORS = [
    hex: THRESHOLD_COLORS[11].hex,
    id: THRESHOLD_TYPE_BASE,
    name: THRESHOLD_COLORS[11].name,
-    value: -999999999999999999,
+    value: -1000000000000000000,
  },
 ]

--- a/ui/src/shared/utils/downloadTimeseriesCSV.ts
+++ b/ui/src/shared/utils/downloadTimeseriesCSV.ts
@ -74,7 +74,7 @@ const timeseriesToCSV = async (
    for (let i = 0; i < tableData.length; i++) {
      // Convert times to a (somewhat) human readable ISO8601 string
      tableData[i][timeIndex] = moment(
-        new Date(tableData[i][timeIndex])
+        new Date(tableData[i][timeIndex] as number | string | Date)
      ).toISOString(isLocal)
    }
  }
--- a/ui/src/side_nav/components/OrgLink.tsx
+++ b/ui/src/side_nav/components/OrgLink.tsx
@ -16,7 +16,7 @@ interface Props {
  me: Me
  role: Role
  meLink: string
-  onMeChangeOrg: (meLink: string, orgID: OrgID) => void
+  onMeChangeOrg: (meLink: string, orgID: OrgID) => Promise<void>
 }

@ErrorHandling
--- a/ui/src/side_nav/components/UserNavBlock.tsx
+++ b/ui/src/side_nav/components/UserNavBlock.tsx
@ -26,7 +26,7 @@ interface Props {
  me: Me
  links: Links
  logoutLink: string
-  meChangeOrg: (meLink: string, orgID: OrgID) => void
+  meChangeOrg: (meLink: string, orgID: OrgID) => Promise<void>
 }

@ErrorHandling
--- a/ui/src/side_nav/containers/SideNav.tsx
+++ b/ui/src/side_nav/containers/SideNav.tsx
@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, {PureComponent} from 'react'
-import {withRouter, Link} from 'react-router'
+import {withRouter, Link, WithRouterProps} from 'react-router'
 import {connect} from 'react-redux'

 import Authorized, {ADMIN_ROLE} from 'src/auth/Authorized'
@ -16,13 +16,10 @@ import {
 import {DEFAULT_HOME_PAGE} from 'src/shared/constants'
 import {ErrorHandling} from 'src/shared/decorators/errors'

-import {Params, Location, Links, Me} from 'src/types/sideNav'
-import {Env, Source} from 'src/types'
+import {Env, Source, Links, Me} from 'src/types'

-interface Props {
+interface OwnProps {
  sources: Source[]
-  params: Params
-  location: Location
  isHidden: boolean
  isUsingAuth?: boolean
  logoutLink?: string
@ -30,6 +27,10 @@ interface Props {
  me: Me
  env: Env
 }
+type RouterProps = WithRouterProps<{
+  sourceID: string
+}>
+type Props = OwnProps & RouterProps

@ErrorHandling
 class SideNav extends PureComponent<Props> {
@ -184,12 +185,7 @@ class SideNav extends PureComponent<Props> {
          />
        </NavBlock>
        {isUsingAuth && (
-          <UserNavBlock
-            logoutLink={logoutLink}
-            links={links}
-            me={me}
-            sourcePrefix={sourcePrefix}
-          />
+          <UserNavBlock logoutLink={logoutLink} links={links} me={me} />
        )}
      </nav>
    )
--- a/ui/src/sources/components/InfluxTable.tsx
+++ b/ui/src/sources/components/InfluxTable.tsx
@ -1,8 +1,6 @@
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'

-import {DeleteKapacitor} from 'src/shared/actions/sources'
-
 import InfluxTableHead from 'src/sources/components/InfluxTableHead'
 import InfluxTableHeader from 'src/sources/components/InfluxTableHeader'
 import InfluxTableRow from 'src/sources/components/InfluxTableRow'
@ -15,7 +13,7 @@ interface Props {
  source: Source
  sources: Source[]
  isUsingAuth: boolean
-  deleteKapacitor: DeleteKapacitor
+  deleteKapacitor: (kapacitor: Kapacitor) => void
  setActiveKapacitor: (kapacitor: Kapacitor) => void
  onDeleteSource: (source: Source) => void
  toggleWizard: ToggleWizard
--- a/ui/src/sources/components/InfluxTableRow.tsx
+++ b/ui/src/sources/components/InfluxTableRow.tsx
@ -1,8 +1,6 @@
 import React, {PureComponent, ReactElement} from 'react'
 import {withRouter, WithRouterProps} from 'react-router'

-import * as actions from 'src/shared/actions/sources'
-
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 import KapacitorDropdown from 'src/sources/components/KapacitorDropdown'
@ -18,7 +16,7 @@ interface Props {
  currentSource: Source
  onDeleteSource: (source: Source) => void
  setActiveKapacitor: (kapacitor: Kapacitor) => void
-  deleteKapacitor: actions.DeleteKapacitor
+  deleteKapacitor: (kapacitor: Kapacitor) => void
  toggleWizard: ToggleWizard
 }

--- a/ui/src/sources/components/KapacitorStep.tsx
+++ b/ui/src/sources/components/KapacitorStep.tsx
@ -1,7 +1,7 @@
 /* eslint-disable no-empty */
 // Libraries
 import React, {Component} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import _ from 'lodash'

 // Components
@ -32,20 +32,27 @@ import {DEFAULT_KAPACITOR} from 'src/shared/constants'
 import {Kapacitor, Source} from 'src/types'
 import {NextReturn} from 'src/types/wizard'

-interface Props {
+interface ReduxStateProps {
+  sources: Source[]
+}
+type ReduxDispatchProps = ResolveThunks<{
  notify: typeof notifyAction
+  setActiveKapacitor: typeof sourcesActions.setActiveKapacitorAsync
+  deleteKapacitor: typeof sourcesActions.deleteKapacitorAsync
+  fetchKapacitors: typeof sourcesActions.fetchKapacitorsAsyncNoNotify
+}>
+
+interface OwnProps {
  source: Source
  setError: (b: boolean) => void
-  sources: Source[]
  onBoarding?: boolean
-  kapacitor: Kapacitor
-  deleteKapacitor: sourcesActions.DeleteKapacitor
-  setActiveKapacitor: sourcesActions.SetActiveKapacitor
-  fetchKapacitors: sourcesActions.FetchKapacitorsAsync
+  kapacitor?: Kapacitor
  showNewKapacitor?: boolean
  setKapacitorDraft?: (kapacitor: Kapacitor) => void
 }

+type Props = OwnProps & ReduxStateProps & ReduxDispatchProps
+
 interface State {
  kapacitor: Kapacitor
 }
@ -215,9 +222,10 @@ class KapacitorStep extends Component<Props, State> {
  }
 }

-const mstp = ({sources}) => ({
-  sources,
-})
+const mstp = ({sources}) =>
+  ({
+    sources,
+  } as ReduxStateProps)

 const mdtp = {
  notify: notifyAction,
--- a/ui/src/sources/containers/ManageSources.tsx
+++ b/ui/src/sources/containers/ManageSources.tsx
@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
+import {connect, ResolveThunks} from 'react-redux'
 import {ErrorHandling} from 'src/shared/decorators/errors'

 import * as sourcesActions from 'src/shared/actions/sources'
@ -14,7 +14,7 @@ import {
  notifySourceDeleteFailed,
 } from 'src/shared/copy/notifications'

-import {Source, Notification} from 'src/types'
+import {Source} from 'src/types'
 import {ToggleWizard} from 'src/types/wizard'

 interface State {
@ -24,16 +24,23 @@ interface State {
  showNewKapacitor: boolean
 }

-interface Props {
-  source: Source
+interface ReduxStateProps {
  sources: Source[]
-  notify: (n: Notification) => void
-  deleteKapacitor: sourcesActions.DeleteKapacitorAsync
-  fetchKapacitors: sourcesActions.FetchKapacitorsAsync
-  removeAndLoadSources: sourcesActions.RemoveAndLoadSources
-  setActiveKapacitor: sourcesActions.SetActiveKapacitorAsync
 }

+type ReduxDispatchProps = ResolveThunks<{
+  notify: typeof notifyAction
+  removeAndLoadSources: typeof sourcesActions.removeAndLoadSources
+  fetchKapacitors: typeof sourcesActions.fetchKapacitorsAsync
+  setActiveKapacitor: typeof sourcesActions.setActiveKapacitorAsync
+  deleteKapacitor: typeof sourcesActions.deleteKapacitorAsync
+}>
+interface OwnProps {
+  source: Source
+}
+
+type Props = OwnProps & ReduxStateProps & ReduxDispatchProps
+
 const VERSION = process.env.npm_package_version

@ErrorHandling
@ -137,9 +144,10 @@ class ManageSources extends PureComponent<Props, State> {
  }
 }

-const mstp = ({sources}) => ({
-  sources,
-})
+const mstp = ({sources}) =>
+  ({
+    sources,
+  } as ReduxStateProps)

 const mdtp = {
  notify: notifyAction,
--- a/ui/src/sources/containers/OnboardingWizard.tsx
+++ b/ui/src/sources/containers/OnboardingWizard.tsx
@ -98,7 +98,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
            <SourceStep
              ref={c => (this.sourceStepRef = c)}
              setError={this.handleSetSourceError}
-              source={source}
+              source={source as Source}
              onBoarding={true}
              me={me}
              isUsingAuth={isUsingAuth}
@ -114,7 +114,7 @@ class OnboardingWizard extends PureComponent<Props, State> {
            previousLabel="Go Back"
          >
            <DashboardStep
-              source={source}
+              source={source as Source}
              countSelected={this.countSelected}
              dashboardsCreated={dashboardsCreated}
              ref={c => (this.dashboardStepRef = c)}
@ -131,9 +131,9 @@ class OnboardingWizard extends PureComponent<Props, State> {
            previousLabel="Go Back"
          >
            <KapacitorStep
-              ref={c => (this.kapacitorStepRef = c)}
+              ref={(c: any) => (this.kapacitorStepRef = c)}
              setError={this.handleSetKapacitorError}
-              source={source}
+              source={source as Source}
              onBoarding={true}
            />
          </WizardStep>
--- a/ui/src/types/dygraphs.ts
+++ b/ui/src/types/dygraphs.ts
@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-export type DygraphData = number[][]
+export type DygraphData = DygraphValue[][]

 export type Data = string | DygraphData | google.visualization.DataTable

--- a/ui/src/types/series.ts
+++ b/ui/src/types/series.ts
@ -1,4 +1,4 @@
-export type TimeSeriesValue = string | number | null
+export type TimeSeriesValue = string | number | boolean | null

 export interface TimeSeriesSeries {
  name?: string
--- a/ui/src/types/sideNav.ts
+++ b/ui/src/types/sideNav.ts
@ -1,38 +0,0 @@
-export interface Params {
-  sourceID: string
-}
-
-export interface Location {
-  pathname: string
-}
-
-export interface ExternalLink {
-  name: string
-  url: string
-}
-
-export interface ExternalLinks {
-  custom: ExternalLink[]
-}
-
-export interface Links {
-  me?: string
-  external?: ExternalLinks
-}
-
-export interface Organization {
-  id: string
-  name: string
-}
-
-export interface Role {
-  id?: string
-  name?: string
-}
-
-export interface Me {
-  name: string
-  currentOrganization: Organization
-  organizations: Organization[]
-  role: Role[]
-}
--- a/ui/src/worker/jobs/timeSeriesToDygraph.ts
+++ b/ui/src/worker/jobs/timeSeriesToDygraph.ts
@ -37,7 +37,10 @@ export const timeSeriesToDygraphWork = (

  const timeSeries = fastMap<TimeSeries, DygraphValue[]>(
    sortedTimeSeries,
-    ({time, values}) => [new Date(time), ...values]
+    ({time, values}) => [
+      new Date(time as string),
+      ...(values as Array<string | number | null>),
+    ]
  )

  const dygraphSeries = fastReduce<Label, DygraphSeries>(
--- a/ui/test/utils/timeSeriesTransformers.test.ts
+++ b/ui/test/utils/timeSeriesTransformers.test.ts
@ -7,7 +7,7 @@ import {
  computeFieldOptions,
 } from 'src/dashboards/utils/tableGraph'

-import {InfluxQLQueryType} from 'src/types/series'
+import {InfluxQLQueryType, TimeSeriesServerResponse} from 'src/types/series'
 import {DataType} from 'src/shared/constants'

 import {DEFAULT_SORT_DIRECTION} from 'src/shared/constants/tableGraph'
@ -432,7 +432,7 @@ it('parses a two-column meta query with same first column values', () => {
 })

 it('parses meta query with multiple columns with one series', () => {
-  const metaQueryResponse = [
+  const metaQueryResponse: TimeSeriesServerResponse[] = [
    {
      response: {
        results: [
@ -452,7 +452,6 @@ it('parses meta query with multiple columns with one series', () => {
            ],
          },
        ],
-        uuid: '2f0e3400-d240-11e8-8c53-9748e5c2a80a',
      },
    },
  ]
--- a/yarn.lock
+++ b/yarn.lock