Move timemachine buttons to add more room for graphs

ui/src/shared/components/TimeMachine.tsx

@@ -4,7 +4,6 @@ import {connect} from 'react-redux'
 import {get} from 'lodash'
 
 // Components
-import TimeMachineControls from 'src/shared/components/TimeMachineControls'
 import {DraggableResizer, Stack} from 'src/clockface'
 import TimeMachineBottom from 'src/shared/components/TimeMachineBottom'
 import TimeMachineVis from 'src/shared/components/TimeMachineVis'
@@ -64,7 +63,6 @@ class TimeMachine extends Component<Props, State> {
             >
               <DraggableResizer.Panel>
                 <div className="time-machine--top">
-                  <TimeMachineControls queriesState={queriesState} />
                   <TimeMachineVis queriesState={queriesState} />
                 </div>
               </DraggableResizer.Panel>

ui/src/shared/components/TimeMachineControls.tsx

@@ -1,95 +0,0 @@
-// Libraries
-import React, {PureComponent} from 'react'
-import {connect} from 'react-redux'
-
-// Components
-import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
-import CSVExportButton from 'src/shared/components/CSVExportButton'
-import {
-  SlideToggle,
-  ComponentSize,
-  ComponentSpacer,
-  Alignment,
-} from 'src/clockface'
-import TimeMachineRefreshDropdown from 'src/shared/components/TimeMachineRefreshDropdown'
-
-// Actions
-import {
-  setTimeRange,
-  setIsViewingRawData,
-} from 'src/shared/actions/v2/timeMachines'
-
-// Utils
-import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
-
-// Types
-import {TimeRange, AppState} from 'src/types/v2'
-import {QueriesState} from 'src/shared/components/TimeSeries'
-
-interface StateProps {
-  timeRange: TimeRange
-  isViewingRawData: boolean
-}
-
-interface DispatchProps {
-  onSetTimeRange: (timeRange: TimeRange) => void
-  onSetIsViewingRawData: typeof setIsViewingRawData
-}
-
-interface OwnProps {
-  queriesState: QueriesState
-}
-
-type Props = StateProps & DispatchProps & OwnProps
-
-class TimeMachineControls extends PureComponent<Props> {
-  public render() {
-    const {
-      timeRange,
-      onSetTimeRange,
-      isViewingRawData,
-      queriesState: {files},
-    } = this.props
-
-    return (
-      <div className="time-machine--controls">
-        <ComponentSpacer align={Alignment.Right}>
-          <SlideToggle.Label text="View Raw Data" />
-          <SlideToggle
-            active={isViewingRawData}
-            onChange={this.handleToggleIsViewingRawData}
-            size={ComponentSize.ExtraSmall}
-          />
-          <CSVExportButton files={files} />
-          <TimeMachineRefreshDropdown />
-          <TimeRangeDropdown
-            timeRange={timeRange}
-            onSetTimeRange={onSetTimeRange}
-          />
-        </ComponentSpacer>
-      </div>
-    )
-  }
-
-  private handleToggleIsViewingRawData = () => {
-    const {isViewingRawData, onSetIsViewingRawData} = this.props
-
-    onSetIsViewingRawData(!isViewingRawData)
-  }
-}
-
-const mstp = (state: AppState): StateProps => {
-  const {timeRange, isViewingRawData} = getActiveTimeMachine(state)
-
-  return {timeRange, isViewingRawData}
-}
-
-const mdtp: DispatchProps = {
-  onSetTimeRange: setTimeRange,
-  onSetIsViewingRawData: setIsViewingRawData,
-}
-
-export default connect<StateProps, DispatchProps, OwnProps>(
-  mstp,
-  mdtp
-)(TimeMachineControls)

ui/src/shared/components/TimeMachineQueries.tsx

@@ -1,10 +1,13 @@
 // Libraries
-import React, {SFC} from 'react'
+import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
 import TimeMachineFluxEditor from 'src/shared/components/TimeMachineFluxEditor'
+import CSVExportButton from 'src/shared/components/CSVExportButton'
 import TimeMachineQueriesSwitcher from 'src/shared/components/TimeMachineQueriesSwitcher'
+import TimeMachineRefreshDropdown from 'src/shared/components/TimeMachineRefreshDropdown'
+import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import TimeMachineQueryTab from 'src/shared/components/TimeMachineQueryTab'
 import TimeMachineQueryBuilder from 'src/shared/components/TimeMachineQueryBuilder'
 import TimeMachineInfluxQLEditor from 'src/shared/components/TimeMachineInfluxQLEditor'
@@ -12,14 +15,21 @@ import TimeMachineQueriesTimer from 'src/shared/components/TimeMachineQueriesTim
 import SubmitQueryButton from 'src/shared/components/SubmitQueryButton'
 import {
   Button,
+  ComponentSpacer,
+  Alignment,
   ComponentColor,
   ComponentSize,
   ButtonShape,
   IconFont,
+  SlideToggle,
 } from 'src/clockface'
 
 // Actions
 import {addQuery} from 'src/shared/actions/v2/timeMachines'
+import {
+  setTimeRange,
+  setIsViewingRawData,
+} from 'src/shared/actions/v2/timeMachines'
 
 // Utils
 import {
@@ -36,6 +46,7 @@ import {
   DashboardQuery,
   InfluxLanguage,
   QueryEditMode,
+  TimeRange,
 } from 'src/types/v2'
 import {DashboardDraftQuery} from 'src/types/v2/dashboards'
 import {QueriesState} from 'src/shared/components/TimeSeries'
@@ -43,10 +54,14 @@ import {QueriesState} from 'src/shared/components/TimeSeries'
 interface StateProps {
   activeQuery: DashboardQuery
   draftQueries: DashboardDraftQuery[]
+  timeRange: TimeRange
+  isViewingRawData: boolean
 }
 
 interface DispatchProps {
   onAddQuery: typeof addQuery
+  onSetTimeRange: typeof setTimeRange
+  onSetIsViewingRawData: typeof setIsViewingRawData
 }
 
 interface OwnProps {
@@ -55,62 +70,98 @@ interface OwnProps {
 
 type Props = StateProps & DispatchProps & OwnProps
 
-const TimeMachineQueries: SFC<Props> = props => {
-  const {activeQuery, queriesState, draftQueries, onAddQuery} = props
+class TimeMachineQueries extends PureComponent<Props> {
+  public render() {
+    const {
+      queriesState,
+      draftQueries,
+      onAddQuery,
+      timeRange,
+      onSetTimeRange,
+      isViewingRawData,
+      queriesState: {files},
+    } = this.props
 
-  let queryEditor
-
-  if (activeQuery.editMode === QueryEditMode.Builder) {
-    queryEditor = <TimeMachineQueryBuilder />
-  } else if (activeQuery.type === InfluxLanguage.Flux) {
-    queryEditor = <TimeMachineFluxEditor />
-  } else if (activeQuery.type === InfluxLanguage.InfluxQL) {
-    queryEditor = <TimeMachineInfluxQLEditor />
+    return (
+      <div className="time-machine-queries">
+        <div className="time-machine-queries--controls">
+          <div className="time-machine-queries--tabs">
+            {draftQueries.map((query, queryIndex) => (
+              <TimeMachineQueryTab
+                key={queryIndex}
+                queryIndex={queryIndex}
+                query={query}
+              />
+            ))}
+            <Button
+              customClass="time-machine-queries--new"
+              shape={ButtonShape.Square}
+              icon={IconFont.PlusSkinny}
+              size={ComponentSize.ExtraSmall}
+              color={ComponentColor.Default}
+              onClick={onAddQuery}
+            />
+          </div>
+          <div className="time-machine-queries--buttons">
+            <TimeMachineQueriesTimer
+              status={queriesState.loading}
+              duration={queriesState.duration}
+            />
+            <ComponentSpacer align={Alignment.Right}>
+              <SlideToggle.Label text="View Raw Data" />
+              <SlideToggle
+                active={isViewingRawData}
+                onChange={this.handleToggleIsViewingRawData}
+                size={ComponentSize.ExtraSmall}
+              />
+              <TimeMachineRefreshDropdown />
+              <TimeRangeDropdown
+                timeRange={timeRange}
+                onSetTimeRange={onSetTimeRange}
+              />
+              <TimeMachineQueriesSwitcher />
+              <CSVExportButton files={files} />
+              <SubmitQueryButton queryStatus={queriesState.loading} />
+            </ComponentSpacer>
+          </div>
+        </div>
+        <div className="time-machine-queries--body">{this.queryEditor}</div>
+      </div>
+    )
   }
 
-  return (
-    <div className="time-machine-queries">
-      <div className="time-machine-queries--controls">
-        <div className="time-machine-queries--tabs">
-          {draftQueries.map((query, queryIndex) => (
-            <TimeMachineQueryTab
-              key={queryIndex}
-              queryIndex={queryIndex}
-              query={query}
-            />
-          ))}
-          <Button
-            customClass="time-machine-queries--new"
-            shape={ButtonShape.Square}
-            icon={IconFont.PlusSkinny}
-            size={ComponentSize.ExtraSmall}
-            color={ComponentColor.Default}
-            onClick={onAddQuery}
-          />
-        </div>
-        <div className="time-machine-queries--buttons">
-          <TimeMachineQueriesTimer
-            status={queriesState.loading}
-            duration={queriesState.duration}
-          />
-          <TimeMachineQueriesSwitcher />
-          <SubmitQueryButton queryStatus={queriesState.loading} />
-        </div>
-      </div>
-      <div className="time-machine-queries--body">{queryEditor}</div>
-    </div>
-  )
+  private get queryEditor(): JSX.Element {
+    const {activeQuery} = this.props
+
+    if (activeQuery.editMode === QueryEditMode.Builder) {
+      return <TimeMachineQueryBuilder />
+    } else if (activeQuery.type === InfluxLanguage.Flux) {
+      return <TimeMachineFluxEditor />
+    } else if (activeQuery.type === InfluxLanguage.InfluxQL) {
+      return <TimeMachineInfluxQLEditor />
+    }
+  }
+
+  private handleToggleIsViewingRawData = () => {
+    const {isViewingRawData, onSetIsViewingRawData} = this.props
+
+    onSetIsViewingRawData(!isViewingRawData)
+  }
 }
 
 const mstp = (state: AppState) => {
-  const {draftQueries} = getActiveTimeMachine(state)
+  const {draftQueries, timeRange, isViewingRawData} = getActiveTimeMachine(
+    state
+  )
   const activeQuery = getActiveQuery(state)
 
-  return {activeQuery, draftQueries}
+  return {timeRange, activeQuery, draftQueries, isViewingRawData}
 }
 
 const mdtp = {
   onAddQuery: addQuery,
+  onSetTimeRange: setTimeRange,
+  onSetIsViewingRawData: setIsViewingRawData,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(