Zed JS

app/core/formatters/format-zed.ts

@@ -0,0 +1,10 @@
+import brim from "src/js/brim"
+import {withCommas} from "src/js/lib/fmt"
+import {zed} from "zealot"
+
+export function formatPrimitive(data: zed.Primitive) {
+  if (data.isUnset()) return "⦻"
+  if (zed.isInt(data)) return withCommas(data.toString())
+  if (zed.isTime(data)) return brim.time(data.toDate()).format()
+  return data.toString()
+}

app/core/hooks/useSearch.ts

@@ -2,19 +2,19 @@ import {useEffect, useState} from "react"
 import {useDispatch} from "react-redux"
 import {search} from "src/js/flows/search/mod"
 import {AppDispatch} from "src/js/state/types"
-import {zng} from "zealot"
+import {zed} from "zealot"
 
-type R = [zng.Record[], boolean]
+type R = [zed.Record[], boolean]
 
 export default function useSearch(query: string, deps?: any[]): R {
   const dispatch = useDispatch<AppDispatch>()
-  const [records, setRecords] = useState<zng.Record[]>([])
+  const [records, setRecords] = useState<zed.Record[]>([])
   const [isFetching, setIsFetching] = useState<boolean>(true)
 
   useEffect(() => {
     setIsFetching(true)
     const {response, abort} = dispatch(search({query}))
-    response.chan(0, (records) => setRecords(records))
+    response.chan(0, ({rows}) => setRecords(rows))
     response.status((status) => setIsFetching(status === "FETCHING"))
     return abort
   }, deps)

app/core/hooks/useStoreExport.ts

@@ -5,14 +5,16 @@ import {useEffect} from "react"
 import {useDispatch, useSelector} from "react-redux"
 import LogDetails from "src/js/state/LogDetails"
 import Viewer from "src/js/state/Viewer"
+import {ZealotContext} from "zealot"
 import {executeCommand} from "../../../src/js/flows/executeCommand"
 
 const useStoreExport = () => {
   const currentData = useSelector(LogDetails.build)
   const dispatch = useDispatch()
+  const zjson = currentData ? ZealotContext.encodeRecord(currentData) : null
 
   useEffect(() => {
-    dispatch(executeCommand("data-detail:current", currentData?.serialize()))
+    dispatch(executeCommand("data-detail:current", zjson))
   }, [currentData])
 
   const selectedData = useSelector(Viewer.getSelectedRecords)

app/core/utils/type-class-names.ts

@@ -0,0 +1,10 @@
+import {zed} from "zealot"
+
+export function typeClassNames(data: zed.AnyValue) {
+  const classNames = []
+  if (data instanceof zed.Primitive) {
+    classNames.push(data.type.name)
+  }
+  if (data.isUnset()) classNames.push("null")
+  return classNames.join(" ")
+}

app/detail/Fields.tsx

@@ -1,24 +1,23 @@
-import {useDispatch} from "react-redux"
-import React, {memo, useCallback, useMemo, useState} from "react"
-
-import {zng} from "zealot"
 import {Data, Name, Value} from "app/core/Data"
-import {createCell} from "src/js/brim/cell"
+import {formatPrimitive} from "app/core/formatters/format-zed"
+import {typeClassNames} from "app/core/utils/type-class-names"
+import React, {memo, useCallback, useMemo, useState} from "react"
+import {useDispatch} from "react-redux"
 import BrimTooltip from "src/js/components/BrimTooltip"
 import ColumnDescription from "src/js/components/LogDetails/ColumnDescription"
-
-import PanelHeading from "./PanelHeading"
-import Panel from "./Panel"
+import {zed} from "zealot"
 import contextMenu from "./flows/contextMenu"
+import Panel from "./Panel"
+import PanelHeading from "./PanelHeading"
 
 type Props = {
-  record: zng.Record
+  record: zed.Record
 }
 
 type DTProps = {
-  fields: zng.Field[]
-  onRightClick: (f: zng.Field) => void
-  onHover: (f: zng.Field) => void
+  fields: zed.Field[]
+  onRightClick: (f: zed.Field) => void
+  onHover: (f: zed.Field) => void
 }
 
 const DataPanel = React.memo<DTProps>(function DataTable({
@@ -34,10 +33,10 @@ const DataPanel = React.memo<DTProps>(function DataTable({
             <TooltipAnchor>{field.name}</TooltipAnchor>
           </Name>
           <Value
-            className={field.data.getType()}
+            className={typeClassNames(field.data)}
             onContextMenu={() => onRightClick(field)}
           >
-            {createCell(field).display()}
+            {formatPrimitive(field.data as zed.Primitive)}
           </Value>
         </Data>
       ))}
@@ -85,7 +84,7 @@ export default memo(function Fields({record}: Props) {
 
   const fields = useMemo(() => {
     if (!record) return []
-    else return record.flatten().getFields()
+    else return record.flatten().fields
   }, [record])
 
   return (

app/detail/Pane.tsx

@@ -11,9 +11,9 @@ import ConnPanel from "src/js/components/LogDetails/ConnPanel"
 import {Md5Panel} from "src/js/components/LogDetails/Md5Panel"
 import LogDetails from "src/js/state/LogDetails"
 import styled from "styled-components"
-import {zng} from "zealot"
 import Fields from "./Fields"
 import NoSelection from "./NoSelection"
+import {zed} from "zealot"
 
 const BG = styled.div`
   padding: 12px;
@@ -24,15 +24,15 @@ const BG = styled.div`
 `
 
 type Props = {
-  record: zng.Record
+  record: zed.Record
 }
 
 const Content = memo<Props>(function Content({record}) {
   const event = useMemo(() => BrimEvent.build(record), [record])
   const isZeek = event instanceof ZeekEvent
   const isSuricata = event instanceof SuricataEvent
   const {uid, cid} = new Correlation(record).getIds()
-  const isConn = isZeek && record.try("_path").toString() === "conn"
+  const isConn = isZeek && record.try("_path")?.toString() === "conn"
   const hasMd5 = isZeek && record.has("md5")
 
   return (

app/detail/flows/contextMenu.ts

@@ -1,20 +1,13 @@
 import detailFieldContextMenu from "ppl/menus/detailFieldContextMenu"
 import searchFieldContextMenu from "ppl/menus/searchFieldContextMenu"
-import {showContextMenu} from "src/js/lib/System"
-import Columns from "src/js/state/Columns"
-import SearchBar from "src/js/state/SearchBar"
-import {zng} from "zealot"
+import {zed} from "zealot"
 
-const contextMenu = (field: zng.Field, record: zng.Record) => (_, getState) => {
-  const program = SearchBar.getSearchProgram(getState())
-  const tableColumns = Columns.getCurrentTableColumns(getState())
-  const columns = tableColumns.getColumns().map((c) => c.name)
-  const builder =
-    global.windowName === "detail"
-      ? detailFieldContextMenu
-      : searchFieldContextMenu
-
-  showContextMenu(builder(program, columns)(field, record, false))
+const contextMenu = (field: zed.Field, record: zed.Record) => (dispatch) => {
+  if (global.windowName === "detail") {
+    dispatch(detailFieldContextMenu({field, record, value: field.value}))
+  } else {
+    dispatch(searchFieldContextMenu({field, record, value: field.value}))
+  }
 }
 
 export default contextMenu

app/search/flows/__snapshots__/histogram-search.test.ts.snap

@@ -5,9 +5,9 @@ Object {
   "keys": Array [
     "capture_loss",
     "conn",
-    "files",
     "x509",
     "ssl",
+    "files",
     "dns",
     "weird",
     "stats",