From d61152a1de48db8e33309b6763f60988efdba89d Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 20 Aug 2018 11:14:39 -0700
Subject: [PATCH 1/5] Add dynamic source option to ceo source dropdown

---
 .../dashboards/components/SourceSelector.tsx  |  4 ++
 ui/src/flux/components/FluxHeader.tsx         |  1 +
 ui/src/flux/components/SourceDropdown.tsx     | 53 ++++++++++++++++---
 .../components/TimeMachine/TimeMachine.tsx    | 33 +++++++++---
 .../TimeMachine/TimeMachineControls.tsx       |  3 ++
 ui/src/sources/constants/index.ts             |  5 ++
 6 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/ui/src/dashboards/components/SourceSelector.tsx b/ui/src/dashboards/components/SourceSelector.tsx
index 2ab5cffe6..b61bf6ca7 100644
--- a/ui/src/dashboards/components/SourceSelector.tsx
+++ b/ui/src/dashboards/components/SourceSelector.tsx
@@ -12,6 +12,7 @@ interface Props {
   service: Service
   services: Service[]
   queries: QueriesModels.QueryConfig[]
+  isDynamicSourceSelected: boolean
   onChangeService: (service: Service, source: SourcesModels.Source) => void
 }
 
@@ -22,6 +23,7 @@ const SourceSelector: SFC<Props> = ({
   services,
   queries,
   onChangeService,
+  isDynamicSourceSelected,
 }) => {
   return sources.length > 1 && queries.length ? (
     <div className="source-selector">
@@ -32,6 +34,8 @@ const SourceSelector: SFC<Props> = ({
         source={source}
         sources={sources}
         allowInfluxQL={true}
+        allowDynamicSource={true}
+        isDynamicSourceSelected={isDynamicSourceSelected}
         onChangeService={onChangeService}
       />
     </div>
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index 131882ff9..f265f5882 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -41,6 +41,7 @@ class FluxHeader extends PureComponent<Props> {
           services={services}
           service={service}
           allowInfluxQL={false}
+          allowDynamicSource={false}
           onChangeService={onChangeService}
         />
         <button
diff --git a/ui/src/flux/components/SourceDropdown.tsx b/ui/src/flux/components/SourceDropdown.tsx
index 8829ae667..682dd0a18 100644
--- a/ui/src/flux/components/SourceDropdown.tsx
+++ b/ui/src/flux/components/SourceDropdown.tsx
@@ -1,7 +1,13 @@
+// Libraries
 import React, {PureComponent} from 'react'
 
+// Components
 import Dropdown from 'src/reusable_ui/components/dropdowns/Dropdown'
 
+// Constants
+import {DynamicSource} from 'src/sources/constants'
+
+// types
 import {Service, Source, ServiceLinks, SourceLinks} from 'src/types'
 
 interface Props {
@@ -10,6 +16,8 @@ interface Props {
   services: Service[]
   sources: Source[]
   allowInfluxQL: boolean
+  allowDynamicSource: boolean
+  isDynamicSourceSelected?: boolean
   onChangeService: (service: Service, source: Source) => void
 }
 
@@ -32,8 +40,13 @@ class SourceDropdown extends PureComponent<Props> {
     )
   }
 
-  private handleSelect = (choice: SourceDropdownItem) => {
-    const {sources, services} = this.props
+  private handleSelect = (choice: SourceDropdownItem): void => {
+    const {sources, services, onChangeService} = this.props
+
+    if (choice.sourceID === DynamicSource.id) {
+      onChangeService(null, null)
+      return
+    }
 
     const source = sources.find(src => {
       return src.id === choice.sourceID
@@ -42,13 +55,13 @@ class SourceDropdown extends PureComponent<Props> {
       return s.id === choice.serviceID
     })
 
-    this.props.onChangeService(service, source)
+    onChangeService(service, source)
   }
 
   private get dropdownItems(): JSX.Element[] {
-    const {services, sources, allowInfluxQL} = this.props
+    const {services, sources, allowInfluxQL, allowDynamicSource} = this.props
 
-    return sources.reduce((acc, source) => {
+    const sourceOptions = sources.reduce((acc, source) => {
       const servicesForSource = services.filter(service => {
         return service.sourceID === source.id
       })
@@ -89,10 +102,38 @@ class SourceDropdown extends PureComponent<Props> {
       }
       return [...acc, ...serviceItems]
     }, [])
+
+    if (allowDynamicSource) {
+      const dynamicSourceDropdownItem = {
+        sourceID: DynamicSource.id,
+      }
+      const dynamicSource = (
+        <Dropdown.Item
+          key={DynamicSource.id}
+          id={DynamicSource.id}
+          value={dynamicSourceDropdownItem}
+        >
+          {DynamicSource.name}
+        </Dropdown.Item>
+      )
+
+      return [...sourceOptions, dynamicSource]
+    }
+
+    return sourceOptions
   }
 
   private get selectedID(): string {
-    const {service, source} = this.props
+    const {
+      service,
+      source,
+      allowDynamicSource,
+      isDynamicSourceSelected,
+    } = this.props
+
+    if (allowDynamicSource && isDynamicSourceSelected) {
+      return DynamicSource.id
+    }
 
     if (service) {
       return `${service.sourceID}-${service.id}`
diff --git a/ui/src/shared/components/TimeMachine/TimeMachine.tsx b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
index a886aaacb..29ff3ab24 100644
--- a/ui/src/shared/components/TimeMachine/TimeMachine.tsx
+++ b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
@@ -66,22 +66,29 @@ interface State {
   activeEditorTab: CEOTabs
   selectedSource: Source
   selectedService: Service
+  useDynamicSource: boolean
 }
 
 class TimeMachine extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
 
+    const {queryDrafts} = props
+
+    const useDynamicSource = getDeep(queryDrafts, '0.source', '') === ''
+
     this.state = {
       activeQueryIndex: 0,
       activeEditorTab: CEOTabs.Queries,
       selectedService: null,
       selectedSource: null,
+      useDynamicSource,
     }
   }
 
   public render() {
     const {services} = this.props
+    const {useDynamicSource} = this.state
     const horizontalDivisions = [
       {
         name: '',
@@ -112,6 +119,7 @@ class TimeMachine extends PureComponent<Props, State> {
           service={this.service}
           services={services}
           onChangeService={this.handleChangeService}
+          isDynamicSourceSelected={useDynamicSource}
         />
         <div className="deceo--container">
           <Threesizer
@@ -206,21 +214,27 @@ class TimeMachine extends PureComponent<Props, State> {
 
   private get source(): Source {
     const {source, sources, queryDrafts} = this.props
-    const {selectedSource} = this.state
+    const {selectedSource, useDynamicSource} = this.state
 
     if (selectedSource) {
       return selectedSource
     }
 
-    const query = _.get(queryDrafts, 0)
-    const querySource = _.get(query, 'source')
-
-    if (!query || !querySource) {
+    // return current source
+    if (useDynamicSource) {
       return source
     }
 
+    const queryDraft = _.get(queryDrafts, 0)
+    const querySource = _.get(queryDraft, 'source')
+
+    if (!queryDraft || !querySource) {
+      return source
+    }
+
+    // return source from queryDraft
     const foundSource = sources.find(
-      s => s.links.self === _.get(query, 'source', null)
+      s => s.links.self === _.get(queryDraft, 'source', null)
     )
     if (foundSource) {
       return foundSource
@@ -359,9 +373,12 @@ class TimeMachine extends PureComponent<Props, State> {
   private handleChangeService = (
     selectedService: Service,
     selectedSource: Source
-  ) => {
+  ): void => {
     const {queryDrafts, updateQueryDrafts} = this.props
 
+    const useDynamicSource: boolean =
+      selectedService === null && selectedSource === null
+
     const queries: CellQuery[] = queryDrafts.map(q => {
       const queryConfig = _.get(q, 'queryConfig')
       return {
@@ -372,7 +389,7 @@ class TimeMachine extends PureComponent<Props, State> {
     })
 
     updateQueryDrafts(queries)
-    this.setState({selectedService, selectedSource})
+    this.setState({selectedService, selectedSource, useDynamicSource})
   }
 
   private handleAddQuery = () => {
diff --git a/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx b/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx
index 9ac5c8576..fc6624cf4 100644
--- a/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx
+++ b/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx
@@ -11,6 +11,7 @@ interface Props {
   sources: SourcesModels.SourceOption[]
   service: Service
   services: Service[]
+  isDynamicSourceSelected: boolean
   onChangeService: (service: Service, source: SourcesModels.Source) => void
   queries: QueriesModels.QueryConfig[]
 }
@@ -22,6 +23,7 @@ const TimeMachineControls: SFC<Props> = ({
   queries,
   services,
   onChangeService,
+  isDynamicSourceSelected,
 }) => {
   return (
     <div className="deceo--controls">
@@ -32,6 +34,7 @@ const TimeMachineControls: SFC<Props> = ({
         services={services}
         queries={queries}
         onChangeService={onChangeService}
+        isDynamicSourceSelected={isDynamicSourceSelected}
       />
     </div>
   )
diff --git a/ui/src/sources/constants/index.ts b/ui/src/sources/constants/index.ts
index 8e2b6e87f..e4d56e8f0 100644
--- a/ui/src/sources/constants/index.ts
+++ b/ui/src/sources/constants/index.ts
@@ -3,3 +3,8 @@ export const REQUIRED_ROLE_COPY =
 
 export const KAPACITOR_TOOLTIP_COPY =
   '<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
+
+export enum DynamicSource {
+  name = 'Dynamic Source',
+  id = 'dynamic',
+}

From c6f5e315f3086c167f7ad0c42070f95fec24b455 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 20 Aug 2018 11:58:43 -0700
Subject: [PATCH 2/5] Don't show flux options in ceo source dropdown until flux
 added

---
 .../dashboards/components/SourceSelector.tsx  |   5 +
 ui/src/flux/components/FluxHeader.tsx         |   1 +
 ui/src/flux/components/SourceDropdown.tsx     | 113 ++++++++++--------
 3 files changed, 68 insertions(+), 51 deletions(-)

diff --git a/ui/src/dashboards/components/SourceSelector.tsx b/ui/src/dashboards/components/SourceSelector.tsx
index b61bf6ca7..85427c786 100644
--- a/ui/src/dashboards/components/SourceSelector.tsx
+++ b/ui/src/dashboards/components/SourceSelector.tsx
@@ -1,7 +1,10 @@
+// Libraries
 import React, {SFC} from 'react'
 
+// Componentes
 import SourceDropdown from 'src/flux/components/SourceDropdown'
 
+// Types
 import * as QueriesModels from 'src/types/queries'
 import * as SourcesModels from 'src/types/sources'
 import {Service} from 'src/types'
@@ -34,6 +37,8 @@ const SourceSelector: SFC<Props> = ({
         source={source}
         sources={sources}
         allowInfluxQL={true}
+        // TODO: when flux is added into CEO/DE, change to true
+        allowFlux={false}
         allowDynamicSource={true}
         isDynamicSourceSelected={isDynamicSourceSelected}
         onChangeService={onChangeService}
diff --git a/ui/src/flux/components/FluxHeader.tsx b/ui/src/flux/components/FluxHeader.tsx
index f265f5882..6a4c145f6 100644
--- a/ui/src/flux/components/FluxHeader.tsx
+++ b/ui/src/flux/components/FluxHeader.tsx
@@ -41,6 +41,7 @@ class FluxHeader extends PureComponent<Props> {
           services={services}
           service={service}
           allowInfluxQL={false}
+          allowFlux={true}
           allowDynamicSource={false}
           onChangeService={onChangeService}
         />
diff --git a/ui/src/flux/components/SourceDropdown.tsx b/ui/src/flux/components/SourceDropdown.tsx
index 682dd0a18..a9320bd58 100644
--- a/ui/src/flux/components/SourceDropdown.tsx
+++ b/ui/src/flux/components/SourceDropdown.tsx
@@ -16,6 +16,7 @@ interface Props {
   services: Service[]
   sources: Source[]
   allowInfluxQL: boolean
+  allowFlux: boolean
   allowDynamicSource: boolean
   isDynamicSourceSelected?: boolean
   onChangeService: (service: Service, source: Source) => void
@@ -59,70 +60,80 @@ class SourceDropdown extends PureComponent<Props> {
   }
 
   private get dropdownItems(): JSX.Element[] {
-    const {services, sources, allowInfluxQL, allowDynamicSource} = this.props
+    const {sources, allowFlux, allowInfluxQL, allowDynamicSource} = this.props
 
     const sourceOptions = sources.reduce((acc, source) => {
-      const servicesForSource = services.filter(service => {
-        return service.sourceID === source.id
-      })
-
-      const serviceItems = servicesForSource.map(service => {
-        const serviceDropdownItem: SourceDropdownItem = {
-          sourceID: source.id,
-          serviceID: service.id,
-          links: service.links,
-        }
-        return (
-          <Dropdown.Item
-            key={`${source.id}-${service.id}`}
-            id={`${source.id}-${service.id}`}
-            value={serviceDropdownItem}
-          >
-            {`${source.name} / ${service.name} (flux)`}
-          </Dropdown.Item>
-        )
-      })
+      let items = []
+      if (allowFlux) {
+        items = [...items, ...this.fluxSourceItems(source)]
+      }
 
       if (allowInfluxQL) {
-        const sourceDropdownItem: SourceDropdownItem = {
-          sourceID: source.id,
-          links: source.links,
-        }
-
-        const influxQLDropdownItem = (
-          <Dropdown.Item
-            key={source.id}
-            id={source.id}
-            value={sourceDropdownItem}
-          >
-            {`${source.name} (InfluxQL)`}
-          </Dropdown.Item>
-        )
-        return [...acc, ...serviceItems, influxQLDropdownItem]
+        items = [...items, this.influxQLSourceItem(source)]
       }
-      return [...acc, ...serviceItems]
+
+      return [...acc, ...items]
     }, [])
 
     if (allowDynamicSource) {
-      const dynamicSourceDropdownItem = {
-        sourceID: DynamicSource.id,
-      }
-      const dynamicSource = (
-        <Dropdown.Item
-          key={DynamicSource.id}
-          id={DynamicSource.id}
-          value={dynamicSourceDropdownItem}
-        >
-          {DynamicSource.name}
-        </Dropdown.Item>
-      )
-
-      return [...sourceOptions, dynamicSource]
+      return [...sourceOptions, this.dynamicSourceOption]
     }
 
     return sourceOptions
   }
 
+  private get dynamicSourceOption(): JSX.Element {
+    const dynamicSourceDropdownItem = {
+      sourceID: DynamicSource.id,
+    }
+    return (
+      <Dropdown.Item
+        key={DynamicSource.id}
+        id={DynamicSource.id}
+        value={dynamicSourceDropdownItem}
+      >
+        {DynamicSource.name}
+      </Dropdown.Item>
+    )
+  }
+
+  private influxQLSourceItem(source: Source): JSX.Element {
+    const sourceDropdownItem: SourceDropdownItem = {
+      sourceID: source.id,
+      links: source.links,
+    }
+
+    return (
+      <Dropdown.Item key={source.id} id={source.id} value={sourceDropdownItem}>
+        {`${source.name} (InfluxQL)`}
+      </Dropdown.Item>
+    )
+  }
+
+  private fluxSourceItems(source: Source): JSX.Element[] {
+    const {services} = this.props
+
+    const servicesForSource = services.filter(service => {
+      return service.sourceID === source.id
+    })
+    return servicesForSource.map(service => {
+      const serviceDropdownItem: SourceDropdownItem = {
+        sourceID: source.id,
+        serviceID: service.id,
+        links: service.links,
+      }
+      return (
+        <Dropdown.Item
+          key={`${source.id}-${service.id}`}
+          id={`${source.id}-${service.id}`}
+          value={serviceDropdownItem}
+        >
+          {`${source.name} / ${service.name} (flux)`}
+        </Dropdown.Item>
+      )
+    })
+  }
+
   private get selectedID(): string {
     const {
       service,

From 31f4fa82143ef15bb277c1e21f1c1d3caeb38391 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 20 Aug 2018 12:14:00 -0700
Subject: [PATCH 3/5] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 261af113b..798ebfb02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 1.  [#4220](https://github.com/influxdata/chronograf/pull/4220): Add ability to copy expanded/untruncated log message
 1.  [#4228](https://github.com/influxdata/chronograf/pull/4228): Add close button for logs pop over
 1.  [#4241](https://github.com/influxdata/chronograf/pull/4241): Add search attributes to log viewer
+1.  [#4254](https://github.com/influxdata/chronograf/pull/4254): Add Dynamic Source option to CEO source selector
 
 ### UI Improvements
 1.  [#4227](https://github.com/influxdata/chronograf/pull/4227): Redesign Cell Editor Overlay for reuse in other parts of application

From 1c7b66221b95004ef2993931c5d1e9ea0d79c7db Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 20 Aug 2018 20:48:59 -0700
Subject: [PATCH 4/5] Remove unnecessary annotations

---
 ui/src/shared/components/TimeMachine/TimeMachine.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/ui/src/shared/components/TimeMachine/TimeMachine.tsx b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
index 29ff3ab24..334458f88 100644
--- a/ui/src/shared/components/TimeMachine/TimeMachine.tsx
+++ b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
@@ -232,10 +232,7 @@ class TimeMachine extends PureComponent<Props, State> {
       return source
     }
 
-    // return source from queryDraft
-    const foundSource = sources.find(
-      s => s.links.self === _.get(queryDraft, 'source', null)
-    )
+    const foundSource = sources.find(s => s.links.self === querySource)
     if (foundSource) {
       return foundSource
     }
@@ -376,8 +373,7 @@ class TimeMachine extends PureComponent<Props, State> {
   ): void => {
     const {queryDrafts, updateQueryDrafts} = this.props
 
-    const useDynamicSource: boolean =
-      selectedService === null && selectedSource === null
+    const useDynamicSource = selectedService === null && selectedSource === null
 
     const queries: CellQuery[] = queryDrafts.map(q => {
       const queryConfig = _.get(q, 'queryConfig')

From 0bc3346b251ee7b10b5558c579e281b1bf0b557f Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 20 Aug 2018 21:16:40 -0700
Subject: [PATCH 5/5] Create separate function for selecting dynamic source

---
 .../dashboards/components/SourceSelector.tsx  |  3 +++
 ui/src/flux/components/SourceDropdown.tsx     | 12 +++++++---
 .../components/TimeMachine/TimeMachine.tsx    | 24 ++++++++++++++-----
 .../TimeMachine/TimeMachineControls.tsx       |  3 +++
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/ui/src/dashboards/components/SourceSelector.tsx b/ui/src/dashboards/components/SourceSelector.tsx
index 85427c786..364f64f8b 100644
--- a/ui/src/dashboards/components/SourceSelector.tsx
+++ b/ui/src/dashboards/components/SourceSelector.tsx
@@ -16,6 +16,7 @@ interface Props {
   services: Service[]
   queries: QueriesModels.QueryConfig[]
   isDynamicSourceSelected: boolean
+  onSelectDynamicSource: () => void
   onChangeService: (service: Service, source: SourcesModels.Source) => void
 }
 
@@ -27,6 +28,7 @@ const SourceSelector: SFC<Props> = ({
   queries,
   onChangeService,
   isDynamicSourceSelected,
+  onSelectDynamicSource,
 }) => {
   return sources.length > 1 && queries.length ? (
     <div className="source-selector">
@@ -42,6 +44,7 @@ const SourceSelector: SFC<Props> = ({
         allowDynamicSource={true}
         isDynamicSourceSelected={isDynamicSourceSelected}
         onChangeService={onChangeService}
+        onSelectDynamicSource={onSelectDynamicSource}
       />
     </div>
   ) : (
diff --git a/ui/src/flux/components/SourceDropdown.tsx b/ui/src/flux/components/SourceDropdown.tsx
index a9320bd58..7f93f5c99 100644
--- a/ui/src/flux/components/SourceDropdown.tsx
+++ b/ui/src/flux/components/SourceDropdown.tsx
@@ -19,6 +19,7 @@ interface Props {
   allowFlux: boolean
   allowDynamicSource: boolean
   isDynamicSourceSelected?: boolean
+  onSelectDynamicSource?: () => void
   onChangeService: (service: Service, source: Source) => void
 }
 
@@ -42,10 +43,15 @@ class SourceDropdown extends PureComponent<Props> {
   }
 
   private handleSelect = (choice: SourceDropdownItem): void => {
-    const {sources, services, onChangeService} = this.props
+    const {
+      sources,
+      services,
+      onChangeService,
+      onSelectDynamicSource,
+    } = this.props
 
-    if (choice.sourceID === DynamicSource.id) {
-      onChangeService(null, null)
+    if (choice.sourceID === DynamicSource.id && onSelectDynamicSource) {
+      onSelectDynamicSource()
       return
     }
 
diff --git a/ui/src/shared/components/TimeMachine/TimeMachine.tsx b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
index 334458f88..1e803b8b7 100644
--- a/ui/src/shared/components/TimeMachine/TimeMachine.tsx
+++ b/ui/src/shared/components/TimeMachine/TimeMachine.tsx
@@ -119,6 +119,7 @@ class TimeMachine extends PureComponent<Props, State> {
           service={this.service}
           services={services}
           onChangeService={this.handleChangeService}
+          onSelectDynamicSource={this.handleSelectDynamicSource}
           isDynamicSourceSelected={useDynamicSource}
         />
         <div className="deceo--container">
@@ -367,14 +368,9 @@ class TimeMachine extends PureComponent<Props, State> {
     }
   }
 
-  private handleChangeService = (
-    selectedService: Service,
-    selectedSource: Source
-  ): void => {
+  private updateQueryDrafts(selectedSource: Source) {
     const {queryDrafts, updateQueryDrafts} = this.props
 
-    const useDynamicSource = selectedService === null && selectedSource === null
-
     const queries: CellQuery[] = queryDrafts.map(q => {
       const queryConfig = _.get(q, 'queryConfig')
       return {
@@ -385,9 +381,25 @@ class TimeMachine extends PureComponent<Props, State> {
     })
 
     updateQueryDrafts(queries)
+  }
+
+  private handleChangeService = (
+    selectedService: Service,
+    selectedSource: Source
+  ): void => {
+    const useDynamicSource = false
+
+    this.updateQueryDrafts(selectedSource)
     this.setState({selectedService, selectedSource, useDynamicSource})
   }
 
+  private handleSelectDynamicSource = (): void => {
+    const useDynamicSource = true
+
+    this.updateQueryDrafts(null)
+    this.setState({useDynamicSource})
+  }
+
   private handleAddQuery = () => {
     const {queryDrafts, addQuery} = this.props
     const newIndex = queryDrafts.length
diff --git a/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx b/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx
index fc6624cf4..666339430 100644
--- a/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx
+++ b/ui/src/shared/components/TimeMachine/TimeMachineControls.tsx
@@ -14,6 +14,7 @@ interface Props {
   isDynamicSourceSelected: boolean
   onChangeService: (service: Service, source: SourcesModels.Source) => void
   queries: QueriesModels.QueryConfig[]
+  onSelectDynamicSource: () => void
 }
 
 const TimeMachineControls: SFC<Props> = ({
@@ -24,6 +25,7 @@ const TimeMachineControls: SFC<Props> = ({
   services,
   onChangeService,
   isDynamicSourceSelected,
+  onSelectDynamicSource,
 }) => {
   return (
     <div className="deceo--controls">
@@ -35,6 +37,7 @@ const TimeMachineControls: SFC<Props> = ({
         queries={queries}
         onChangeService={onChangeService}
         isDynamicSourceSelected={isDynamicSourceSelected}
+        onSelectDynamicSource={onSelectDynamicSource}
       />
     </div>
   )