End merge

ui/src/ifql/components/TimeMachine.tsx

@@ -3,7 +3,7 @@ import SchemaExplorer from 'src/ifql/components/SchemaExplorer'
 import BodyBuilder from 'src/ifql/components/BodyBuilder'
 import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor'
 import TimeMachineVis from 'src/ifql/components/TimeMachineVis'
-import Threesizer from 'src/shared/components/Threesizer/Threesizer'
+import Threesizer from 'src/shared/components/threesizer/Threesizer'
 import {Suggestion, OnChangeScript, FlatBody} from 'src/types/ifql'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants'

ui/src/ifql/components/TimeMachineEditor.tsx

@@ -64,6 +64,7 @@ class TimeMachineEditor extends PureComponent<Props> {
   }
 
   private handleMount = (instance: EditorInstance) => {
+    instance.refresh() // required to for proper line height on mount
     this.editor = instance
   }
 

ui/src/ifql/containers/IFQLPage.tsx

@@ -63,7 +63,7 @@ export class IFQLPage extends PureComponent<Props, State> {
 
     return (
       <IFQLContext.Provider value={this.handlers}>
-        <KeyboardShortcuts onControlEnter={this.handleSubmitScript}>
+        <KeyboardShortcuts onControlEnter={this.getTimeSeries}>
           <div className="page hosts-list-page">
             <div className="page-header full-width">
               <div className="page-header__container">

ui/src/shared/components/Threesizer/Division.tsx

@@ -2,7 +2,7 @@ import React, {PureComponent, ReactElement, MouseEvent} from 'react'
 import classnames from 'classnames'
 import calculateSize from 'calculate-size'
 
-import Header from 'src/shared/components/Threesizer/DivisionHeader'
+import DivisionHeader from 'src/shared/components/threesizer/DivisionHeader'
 import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index'
 
 const NOOP = () => {}
@@ -20,6 +20,8 @@ interface Props {
   render: (visibility: string) => ReactElement<any>
   onHandleStartDrag: (id: string, e: MouseEvent<HTMLElement>) => void
   onDoubleClick: (id: string) => void
+  onMaximize: (id: string) => void
+  onMinimize: (id: string) => void
 }
 
 interface Style {
@@ -78,7 +80,12 @@ class Division extends PureComponent<Props> {
           <div className={this.titleClass}>{name}</div>
         </div>
         <div className={this.contentsClass} style={this.contentStyle}>
-          {name && <Header />}
+          {name && (
+            <DivisionHeader
+              onMinimize={this.handleMinimize}
+              onMaximize={this.handleMaximize}
+            />
+          )}
           <div className="threesizer--body">{render(this.visibility)}</div>
         </div>
       </div>
@@ -224,6 +231,16 @@ class Division extends PureComponent<Props> {
 
     onDoubleClick(id)
   }
+
+  private handleMinimize = (): void => {
+    const {id, onMinimize} = this.props
+    onMinimize(id)
+  }
+
+  private handleMaximize = (): void => {
+    const {id, onMaximize} = this.props
+    onMaximize(id)
+  }
 }
 
 export default Division

ui/src/shared/components/Threesizer/DivisionHeader.tsx

@@ -3,7 +3,12 @@ import DivisionMenu, {
   MenuItem,
 } from 'src/shared/components/Threesizer/DivisionMenu'
 
-class DivisionHeader extends PureComponent {
+interface Props {
+  onMinimize: () => void
+  onMaximize: () => void
+}
+
+class DivisionHeader extends PureComponent<Props> {
   public render() {
     return (
       <div className="threesizer--header">
@@ -13,13 +18,14 @@ class DivisionHeader extends PureComponent {
   }
 
   private get menuItems(): MenuItem[] {
+    const {onMaximize, onMinimize} = this.props
     return [
       {
-        action: () => {},
+        action: onMaximize,
         text: 'Maximize',
       },
       {
-        action: () => {},
+        action: onMinimize,
         text: 'Minimize',
       },
     ]

ui/src/shared/components/Threesizer/Threesizer.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import uuid from 'uuid'
 import _ from 'lodash'
 
-import Division from 'src/shared/components/ThreeSizer/Division'
+import Division from 'src/shared/components/threesizer/Division'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import {
   HANDLE_NONE,
@@ -140,6 +140,8 @@ class Threesizer extends Component<Props, State> {
             handlePixels={d.handlePixels}
             handleDisplay={d.handleDisplay}
             activeHandleID={activeHandleID}
+            onMaximize={this.handleMaximize}
+            onMinimize={this.handleMinimize}
             onDoubleClick={this.handleDoubleClick}
             onHandleStartDrag={this.handleStartDrag}
             render={this.props.divisions[i].render}
@@ -209,6 +211,50 @@ class Threesizer extends Component<Props, State> {
     this.setState({divisions})
   }
 
+  private handleMaximize = (id: string): void => {
+    const maxDiv = this.state.divisions.find(d => d.id === id)
+
+    if (!maxDiv) {
+      return
+    }
+
+    const divisions = this.state.divisions.map(d => {
+      if (d.id !== id) {
+        return {...d, size: 0}
+      }
+
+      return {...d, size: 1}
+    })
+
+    this.setState({divisions})
+  }
+
+  private handleMinimize = (id: string): void => {
+    const minDiv = this.state.divisions.find(d => d.id === id)
+    const numDivisions = this.state.divisions.length
+
+    if (!minDiv) {
+      return
+    }
+
+    let size
+    if (numDivisions <= 1) {
+      size = 1
+    } else {
+      size = 1 / (this.state.divisions.length - 1)
+    }
+
+    const divisions = this.state.divisions.map(d => {
+      if (d.id !== id) {
+        return {...d, size}
+      }
+
+      return {...d, size: 0}
+    })
+
+    this.setState({divisions})
+  }
+
   private equalize = () => {
     const denominator = this.state.divisions.length
     const divisions = this.state.divisions.map(d => {

ui/webpack/dev.config.js

@@ -45,7 +45,7 @@ module.exports = {
   },
   watch: true,
   cache: true,
-  devtool: 'cheap-eval-source-map',
+  devtool: 'source-map',
   entry: {
     app: path.resolve(__dirname, '..', 'src', 'index.tsx'),
   },