Add tests and refactor search functions

No longer store last ts of search, use the Last.getSearch function instead
Consolidate common test setup
Convert pins to functional component
We want to save the current program, not previous
Tests for submitSearch
refactored executeSearch
Refactored to use issue and emit
Moved common search things to a search module
Remove old search object

src/js/brim/index.js

@@ -14,7 +14,6 @@ import program from "./program"
 import randomHash from "./randomHash"
 import record from "./record"
 import relTime from "./relTime"
-import search from "./search"
 import space from "./space"
 import span from "./span"
 import syntax from "./syntax"
@@ -37,7 +36,6 @@ export type $Field = {
 }
 
 export type $CompoundField = ReturnType<typeof compoundField>
-export type $Search = ReturnType<typeof search>
 export type $Log = ReturnType<typeof log>
 
 export type Ts = {
@@ -64,7 +62,6 @@ export default {
   form,
   record,
   interop,
-  search,
   randomHash,
   entries,
   tab,

src/js/brim/searchEntry.js

@@ -0,0 +1,12 @@
+/* @flow */
+import type {SearchRecord} from "../types"
+import brimSpan from "./span"
+
+export function createSearchEntry(data: SearchRecord) {
+  return {
+    ...data,
+    getDuration() {
+      return brimSpan(data.spanArgs).getDuration()
+    }
+  }
+}

src/js/brim/span.js

@@ -29,6 +29,10 @@ export default function span(args: SpanArgs | Span) {
     toDateTuple(): DateTuple {
       return [brim.time(computed[0]).toDate(), brim.time(computed[1]).toDate()]
     },
+    getDuration() {
+      const [from, to] = this.toDateTuple()
+      return to - from
+    },
     formatAgo() {
       let [from, to] = this.toDateTuple()
       return moment.duration(moment(to).diff(moment(from))).humanize()

src/js/components/FilterTree.js

@@ -10,6 +10,7 @@ import get from "lodash/get"
 import {Node} from "../models/Node"
 import {createInvestigationTree} from "./FilterTree/helpers"
 import {globalDispatch} from "../state/GlobalContext"
+import {submitSearch} from "../flows/submitSearch/mod"
 import BookIcon from "../icons/BookSvgIcon"
 import Current from "../state/Current"
 import EmptySection from "./common/EmptySection"
@@ -19,7 +20,6 @@ import Search from "../state/Search"
 import SearchBar from "../state/SearchBar"
 import Spaces from "../state/Spaces/selectors"
 import Warning from "./icons/warning-sm.svg"
-import submitSearch from "../flows/submitSearch"
 import usePopupMenu from "./hooks/usePopupMenu"
 
 type Props = {node: *, i: number}

src/js/components/IngestRefresh.js

@@ -30,14 +30,14 @@ import {isEqual} from "lodash"
 import {useDispatch, useSelector} from "react-redux"
 import React, {useEffect, useState} from "react"
 
+import {submitSearch} from "../flows/submitSearch/mod"
 import Current from "../state/Current"
 import History from "../state/History"
 import IngestUpdateNotice from "./IngestUpdateNotice"
 import Search from "../state/Search"
 import brim from "../brim"
-import submitSearch from "../flows/submitSearch"
-import useThrottle from "./hooks/useThrottle"
 import submitAutoRefreshSearch from "../flows/submitAutoRefreshSearch"
+import useThrottle from "./hooks/useThrottle"
 
 export default function IngestRefresh() {
   const dispatch = useDispatch()

src/js/components/Investigation/FindingCard.js

@@ -10,14 +10,14 @@ import styled from "styled-components"
 
 import type {Finding} from "../../state/Investigation/types"
 import {globalDispatch} from "../../state/GlobalContext"
+import {submitSearch} from "../../flows/submitSearch/mod"
 import Current from "../../state/Current"
 import FindingProgram from "./FindingProgram"
 import Investigation from "../../state/Investigation"
 import MagnifyingGlass from "../../icons/MagnifyingGlass"
 import Search from "../../state/Search"
 import Spaces from "../../state/Spaces/selectors"
 import Warning from "../icons/warning-sm.svg"
-import submitSearch from "../../flows/submitSearch"
 import usePopupMenu from "../hooks/usePopupMenu"
 
 const StyledMagnifyingGlass = styled(MagnifyingGlass)`

src/js/components/LogDetails/Md5Panel.js

@@ -10,15 +10,13 @@ import {
   rxHostsCorrelation,
   txHostsCorrelation
 } from "../../searches/programs"
-import {parallelizeProcs} from "../../lib/Program"
+import {md5Search} from "../../flows/searches/md5Search"
 import Current from "../../state/Current"
 import HorizontalTable from "../Tables/HorizontalTable"
 import InlineTableLoading from "../InlineTableLoading"
 import Log from "../../models/Log"
 import PanelHeading from "./PanelHeading"
-import Tab from "../../state/Tab"
 import brim from "../../brim"
-import executeSearch from "../../flows/executeSearch"
 
 export const Md5Panel = ({
   log,
@@ -30,34 +28,26 @@ export const Md5Panel = ({
   let logMd5 = log.getString("md5")
   let dispatch = useDispatch()
   let spaceId = useSelector(Current.getSpaceId)
-  let span = useSelector(Tab.getSpanAsDates)
   let [tx, setTx] = useState([])
   let [rx, setRx] = useState([])
   let [md5, setMd5] = useState([])
   let [filenames, setFilenames] = useState([])
   let [status, setStatus] = useState("INIT")
-  let program = parallelizeProcs([
-    filenameCorrelation(logMd5),
-    md5Correlation(logMd5),
-    rxHostsCorrelation(logMd5),
-    txHostsCorrelation(logMd5)
-  ])
 
   function toLogs(records) {
     return records.map(brim.record).map(brim.interop.recordToLog)
   }
 
   useEffect(() => {
-    let s = brim
-      .search(program, span, spaceId)
-      .id("Md5")
+    const {response, abort} = dispatch(md5Search(logMd5))
+    response
       .status(setStatus)
       .chan(0, (records) => setFilenames(filenames.concat(toLogs(records))))
       .chan(1, (records) => setMd5(md5.concat(toLogs(records))))
       .chan(2, (records) => setRx(rx.concat(toLogs(records))))
       .chan(3, (records) => setTx(tx.concat(toLogs(records))))
 
-    return dispatch(executeSearch(s))
+    return abort
   }, [])
 
   function getColumns(logs) {

src/js/components/SearchBar/Input.js

@@ -6,9 +6,9 @@ import styled from "styled-components"
 import type {Styled} from "../../types/styled"
 import {cssVar} from "../../lib/cssVar"
 import {reactElementProps} from "../../test/integration"
+import {submitSearch} from "../../flows/submitSearch/mod"
 import InputHistory from "../../models/InputHistory"
 import SearchBar from "../../state/SearchBar"
-import submitSearch from "../../flows/submitSearch"
 
 const StyledInput: Styled<> = styled.input`
   display: block;

src/js/components/SearchBar/Pins.js

@@ -1,85 +1,59 @@
 /* @flow */
 
-import {connect} from "react-redux"
+import {useDispatch, useSelector} from "react-redux"
 import React from "react"
 
-import type {Dispatch, State} from "../../state/types"
 import {fmtProgram} from "../../lib/Program"
 import FilterNode from "../FilterNode"
 import PinIcon from "../../icons/PinIcon"
 import SearchBar from "../../state/SearchBar"
 
-type StateProps = {|
-  editing: ?number,
-  previousValue: string,
-  pins: string[]
-|}
+export default function Pins() {
+  const dispatch = useDispatch()
+  const prevProgram = useSelector(SearchBar.getSearchBarPreviousInputValue)
+  const pins = useSelector(SearchBar.getSearchBarPins)
+  const editing = useSelector(SearchBar.getSearchBarEditingIndex)
 
-type DispatchProps = {|
-  dispatch: Dispatch
-|}
-
-type Props = {|
-  ...StateProps,
-  ...DispatchProps
-|}
-
-export default class Pins extends React.Component<Props> {
-  renderFilter = (filter: string, index: number) => {
+  function renderFilter(filter: string, index: number) {
     return (
       <FilterNode
         key={index}
         filter={filter}
-        focused={this.props.editing === index}
+        focused={editing === index}
         pending={index === -1}
         onClick={() => {
-          this.props.dispatch(SearchBar.editSearchBarPin(index))
+          dispatch(SearchBar.editSearchBarPin(index))
         }}
         onRemoveClick={(e) => {
           e.stopPropagation()
-          this.props.dispatch(SearchBar.removeSearchBarPin(index))
+          dispatch(SearchBar.removeSearchBarPin(index))
         }}
       />
     )
   }
 
-  renderPinButton() {
+  function renderPinButton() {
     return (
       <div className="pin-button-wrapper">
-        <span
-          onClick={() => this.props.dispatch(SearchBar.editSearchBarPin(null))}
-        >
-          {fmtProgram(this.props.previousValue)}
+        <span onClick={() => dispatch(SearchBar.editSearchBarPin(null))}>
+          {fmtProgram(prevProgram)}
         </span>
         <button
           className="pin-button"
           title="⌘K"
-          onClick={() => this.props.dispatch(SearchBar.pinSearchBar())}
+          onClick={() => dispatch(SearchBar.pinSearchBar())}
         >
           <PinIcon />
         </button>
       </div>
     )
   }
 
-  render() {
-    if (this.props.pins.length === 0) return null
-    return (
-      <div className="pins">
-        {this.props.pins.map(this.renderFilter)}
-        {this.renderPinButton()}
-      </div>
-    )
-  }
+  if (pins.length === 0) return null
+  return (
+    <div className="pins">
+      {pins.map(renderFilter)}
+      {renderPinButton()}
+    </div>
+  )
 }
-
-const stateToProps = (state: State) => ({
-  pins: SearchBar.getSearchBarPins(state),
-  previousValue: SearchBar.getSearchBarPreviousInputValue(state),
-  editing: SearchBar.getSearchBarEditingIndex(state)
-})
-
-export const XPins = connect<Props, {||}, _, _, _, _>(
-  stateToProps,
-  (dispatch: Dispatch) => ({dispatch})
-)(Pins)

src/js/components/SearchBar/SubmitButton.js

@@ -6,8 +6,8 @@ import React from "react"
 import styled from "styled-components"
 
 import type {Styled} from "../../types/styled"
+import {submitSearch} from "../../flows/submitSearch/mod"
 import MagnifyingGlass from "../../icons/MagnifyingGlass"
-import submitSearch from "../../flows/submitSearch"
 
 const start = "#6aa4e7"
 const end = "#4b91e2"

src/js/components/SearchBar/mod.js

@@ -3,7 +3,7 @@ import React from "react"
 import styled from "styled-components"
 
 import type {Styled} from "../../types/styled"
-import {XPins} from "./Pins"
+import Pins from "./Pins"
 import Error from "./Error"
 import HistoryArrows from "./HistoryArrows"
 import Input from "./Input"
@@ -56,7 +56,7 @@ export function SearchBar() {
           <SubmitButton />
         </InputBackdrop>
         <Error />
-        <XPins />
+        <Pins />
       </Group>
     </Wrap>
   )

src/js/components/Span/SpanControls.js

@@ -5,6 +5,7 @@ import classNames from "classnames"
 
 import ClockIcon from "../../icons/ClockIcon"
 import Label from "../Toolbar/Label"
+import Last from "../../state/Last"
 import SpanDuration from "./SpanDuration"
 import SpanPicker from "./SpanPicker"
 import TimeButton from "./TimeButton"
@@ -14,9 +15,9 @@ import usePrevious from "../hooks/usePrevious"
 export const SPAN_TIME_FMT = "MMM DD, YYYY HH:mm:ss"
 
 export default function SpanControls() {
-  let ts = useSelector(tab.getSearchTs)
+  let last = useSelector(Last.getSearch)
   let [from, to] = useSelector(tab.getSpanArgs)
-  let prev = usePrevious([from, to], [ts])
+  let prev = usePrevious([from, to], [last])
   let dispatch = useDispatch()
 
   function fromChange(arg) {

src/js/components/UidTimeline.js

@@ -8,12 +8,12 @@ import isEqual from "lodash/isEqual"
 
 import type {DispatchProps} from "../state/types"
 import {UID_CORRELATION_LIMIT} from "../searches/programs"
+import {submitSearch} from "../flows/submitSearch/mod"
 import {viewLogDetail} from "../flows/viewLogDetail"
 import Log from "../models/Log"
 import SearchBar from "../state/SearchBar"
 import brim from "../brim"
 import dispatchToProps from "../lib/dispatchToProps"
-import submitSearch from "../flows/submitSearch"
 
 type OwnProps = {|
   logs: Log[],

src/js/components/Viewer/HeaderCell.js

@@ -5,11 +5,11 @@ import classNames from "classnames"
 
 import type {TableColumn} from "../../state/Columns/types"
 import {appendQuerySortBy} from "../../flows/searchBar/actions"
+import {submitSearch} from "../../flows/submitSearch/mod"
 import Columns from "../../state/Columns"
 import IconAsc from "../icons/icon-asc.svg"
 import IconDesc from "../icons/icon-desc.svg"
 import columnKey from "../../lib/columnKey"
-import submitSearch from "../../flows/submitSearch"
 
 let oldWidth = null
 let start = null

src/js/components/ZQModal.test.js

@@ -1,12 +1,12 @@
 /* @flow */
 import React from "react"
 
+import {submitSearch} from "../flows/submitSearch/mod"
 import Modal from "../state/Modal"
 import SearchBar from "../state/SearchBar"
 import ZQModal from "./ZQModal"
 import logInto from "../test/helpers/loginTo"
 import provide from "../test/helpers/provide"
-import submitSearch from "../flows/submitSearch"
 
 test("renders with zq get command", async () => {
   let {store} = await logInto("cluster1", "space1")

src/js/components/charts/MainHistogram/useMainHistogram.js

@@ -7,6 +7,7 @@ import * as d3 from "d3"
 import type {DateTuple} from "../../../lib/TimeWindow"
 import type {Pen, HistogramChart} from "../types"
 import {innerHeight, innerWidth} from "../dimens"
+import {submitSearch} from "../../../flows/submitSearch/mod"
 import Chart from "../../../state/Chart"
 import EmptyMessage from "../../EmptyMessage"
 import HistogramTooltip from "../../HistogramTooltip"
@@ -18,7 +19,6 @@ import format from "./format"
 import hoverLine from "../pens/hoverLine"
 import reactComponent from "../pens/reactComponent"
 import search from "../../../state/Search"
-import submitSearch from "../../../flows/submitSearch"
 import tab from "../../../state/Tab"
 import time from "../../../brim/time"
 import useConst from "../../hooks/useConst"

src/js/components/useSpanPickerMenu.js

@@ -3,10 +3,10 @@
 import {useDispatch, useSelector} from "react-redux"
 
 import {type DateTuple, spanOfLast} from "../lib/TimeWindow"
+import {submitSearch} from "../flows/submitSearch/mod"
 import Current from "../state/Current"
 import Search from "../state/Search"
 import brim from "../brim"
-import submitSearch from "../flows/submitSearch"
 
 export default function useSpanPickerMenu() {
   let dispatch = useDispatch()