chore(chronograf): Add SourceContext and fix source typing

Co-authored-by: Andrew Watkins <andrew.watkinz@gmail.com>
Co-authored-by: Michael Desa <mjdesa@gmail.com>

chronograf/ui/src/CheckSources.tsx

@@ -43,6 +43,7 @@ interface Props {
   notify: (message: Notification | NotificationFunc) => void
 }
 
+export const SourceContext = React.createContext()
 // Acts as a 'router middleware'. The main `App` component is responsible for
 // getting the list of data sources, but not every page requires them to function.
 // Routes that do require data sources can be nested under this component.
@@ -63,8 +64,8 @@ export class CheckSources extends PureComponent<Props, State> {
 
   public async componentDidUpdate(prevProps) {
     const {loading} = this.state
-    const {router, location, params, sources, notify} = this.props
-    const source = sources.find(s => s.id === params.sourceID)
+    const {router, location, sources, notify} = this.props
+    const source = this.source
     const defaultSource = sources.find(s => s.default === true)
 
     const rest = location.pathname.match(/\/sources\/\d+?\/(.+)/)
@@ -99,12 +100,22 @@ export class CheckSources extends PureComponent<Props, State> {
 
   public render() {
     const {loading} = this.state
+    const source = this.source
 
-    if (loading === RemoteDataState.Loading) {
+    if (loading === RemoteDataState.Loading || !source) {
       return <div className="page-spinner" />
     }
 
-    return this.props.children
+    return (
+      <SourceContext.Provider value={source}>
+        {this.props.children}
+      </SourceContext.Provider>
+    )
+  }
+
+  private get source(): Source {
+    const {params, sources} = this.props
+    return sources.find(s => s.id === params.sourceID)
   }
 }
 

chronograf/ui/src/shared/actions/sources.ts

@@ -150,9 +150,7 @@ export const removeAndLoadSources = (source: Source) => async (
       }
     }
 
-    const {
-      data: {sources: newSources},
-    } = await getSourcesAJAX()
+    const newSources = await getSourcesAJAX()
     dispatch(loadSources(newSources))
   } catch (err) {
     dispatch(notify(notifyServerError))
@@ -204,11 +202,8 @@ export const deleteKapacitorAsync = (kapacitor: Kapacitor) => async (
 
 export const getSourcesAsync = () => async (dispatch): Promise<void> => {
   try {
-    const {
-      data: {sources},
-    } = await getSourcesAJAX()
+    const sources = await getSourcesAJAX()
     dispatch(loadSources(sources))
-    return sources
   } catch (error) {
     dispatch(errorThrown(error))
   }

chronograf/ui/src/shared/apis/index.ts

@@ -2,11 +2,19 @@ import AJAX from 'src/utils/ajax'
 import {AlertTypes} from 'src/kapacitor/constants'
 import {Kapacitor, Source, Service, NewService, QueryConfig} from 'src/types'
 
-export function getSources() {
-  return AJAX({
-    url: null,
-    resource: 'sources',
-  })
+export const getSources = async (): Promise<Source[]> => {
+  try {
+    const {data} = await AJAX({
+      url: '/v1/sources',
+      headers: {
+        Authorization: 'Token 123', // TODO: remove this garbage
+      },
+    })
+
+    return data.sources
+  } catch (error) {
+    throw error
+  }
 }
 
 export const getSource = async (id: string): Promise<Source> => {