Tree list (#1254)

* Add new deps

* Create TreeList component

* Create a queries section

package.json

@@ -85,6 +85,7 @@
  "@types/mousetrap": "^1.6.3",
  "@types/prismjs": "^1.16.1",
  "@types/react": "^16.9.49",
+ "@types/react-beautiful-dnd": "^13.0.0",
  "@types/react-dom": "^16.9.8",
  "@types/react-redux": "^7.1.9",
  "@types/react-transition-group": "^4.4.0",
@@ -158,13 +159,16 @@
  "polished": "^3.6.5",
  "prismjs": "^1.20.0",
  "react": "^16.13.1",
+ "react-beautiful-dnd": "^13.0.0",
  "react-day-picker": "^7.4.8",
  "react-dom": "^16.13.1",
  "react-measure": "^2.3.0",
  "react-redux": "^7.2.0",
  "react-spring": "^8.0.27",
  "react-tooltip": "^4.2.7",
  "react-transition-group": "^2.9.0",
+ "react-virtualized-auto-sizer": "^1.0.2",
+ "react-window": "^1.8.6",
  "redux": "^4.0.5",
  "redux-devtools-extension": "^2.13.8",
  "redux-thunk": "^2.3.0",

src/js/components/LeftPane.tsx

@@ -17,6 +17,9 @@ import {Sectional} from "../../pkg/sectional"
 import SavedSpacesList from "./SavedSpacesList"
 import Spaces from "../state/Spaces"
 import ConnectionStatuses from "../state/ConnectionStatuses"
+import {TreeList} from "../../pkg/tree-list"
+import Queries from "../state/Queries"
+import Item from "./SideBar/Item"
 
 const Arrow = (props) => {
  return (
@@ -175,6 +178,7 @@ export function LeftPane() {
  min: 100,
  closedSize: 24
  }))
+
  const conn = useSelector(Current.getConnection)
  const id = get(conn, ["id"], "")
  const setSections = (sections) =>
@@ -213,6 +217,14 @@ export function LeftPane() {
  {...provided}
  />
  )
+ if (data.id === "queries")
+ return (
+ <QueriesSection
+ isOpen={data.isOpen}
+ key={data.id}
+ {...provided}
+ />
+ )
  if (data.id === "history")
  return (
  <HistorySection
@@ -271,3 +283,41 @@ function HistorySection({isOpen, style, resizeProps, toggleProps}) {
  </StyledSection>
  )
 }
+
+function QueriesSection({isOpen, style, resizeProps, toggleProps}) {
+ const root = useSelector(Queries.getRaw)
+
+ function onItemClick(e, item) {
+ console.log("clicked", item)
+ }
+
+ function onItemMove(source, destination) {
+ console.log("moved", source, destination)
+ }
+
+ function onItemContextMenu(e, item, selections) {
+ console.log("context menu", item, selections)
+ }
+
+ return (
+ <StyledSection style={style}>
+ <DragAnchor {...resizeProps} />
+ <SectionHeader>
+ <ClickRegion {...toggleProps}>
+ <StyledArrow show={isOpen} />
+ <Title>Queries</Title>
+ </ClickRegion>
+ <AddSpaceButton />
+ </SectionHeader>
+ <TreeList
+ root={root}
+ itemHeight={24}
+ onItemMove={onItemMove}
+ onItemClick={onItemClick}
+ onItemContextMenu={onItemContextMenu}
+ >
+ {Item}
+ </TreeList>
+ </StyledSection>
+ )
+}

src/js/components/SideBar/Item.tsx

@@ -0,0 +1,91 @@
+import classNames from "classnames"
+import React, {useRef} from "react"
+import styled from "styled-components"
+
+const BG = styled.div`
+ padding-left: 18px;
+ height: 24px;
+ font-family: system-ui;
+ font-weight: 400;
+ font-size: 11px;
+ line-height: 24px;
+ color: var(--aqua);
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ cursor: default !important;
+ user-select: none;
+ outline: none;
+
+ &:hover:not(.isSelected) {
+ background: rgba(0, 0, 0, 0.03);
+ }
+
+ &:active:not(.isSelected) {
+ background: rgba(0, 0, 0, 0.08);
+ }
+
+ &.isSelected {
+ background: var(--havelock);
+ color: white;
+ }
+`
+
+const Name = styled.p`
+ margin: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ user-select: none;
+ flex: 1;
+`
+
+const Input = styled.input`
+ font-size: 11px;
+ font-family: system-ui;
+ font-weight: 400;
+ font-size: 11px;
+ line-height: 19px;
+ color: var(--aqua);
+ padding: 0 1px;
+ border: 1px solid var(--havelock);
+ height: 19px;
+ outline: none;
+ border-radius: 2px;
+ margin: 0 2px 0 -2px;
+ margin-right: 2px;
+ width: 100%;
+`
+
+function Show({item}) {
+ return <Name>{item.name}</Name>
+}
+
+function Edit({item}) {
+ const input = useRef()
+ // useLayoutEffect(() => input.current.select(), [])
+ // useOutsideClick(input, () => ctx.onRename(item, input.current.value))
+ // const onEnter = (e) =>
+ // e.key === "Enter" && ctx.onRename(item, input.current.value)
+ // const onEscape = (e) => e.key === "Escape" && ctx.onRename(item, item.name)
+
+ return (
+ <Input
+ ref={input}
+ // onKeyPress={onEnter}
+ // onKeyDown={onEscape}
+ type="text"
+ autoFocus
+ defaultValue={item.name}
+ />
+ )
+}
+
+export default function Item({item, innerRef, itemProps, isSelected}) {
+ const isEditing = false // for later
+ return (
+ <BG {...itemProps} ref={innerRef} className={classNames({isSelected})}>
+ {isEditing ? <Edit item={item} /> : <Show item={item} />}
+ </BG>
+ )
+}

src/js/state/Queries/initial.ts

@@ -3,7 +3,29 @@ import {QueriesState} from "./types"
 const init = (): QueriesState => ({
  id: "root",
  name: "root",
- items: []
+ items: [
+ {
+ id: "1",
+ name: "Count by Path",
+ zql: "* | count() by _path",
+ description: "",
+ tags: []
+ },
+ {
+ id: "2",
+ name: "Suricata",
+ zql: "event_type=alert",
+ description: "",
+ tags: []
+ },
+ {
+ id: "3",
+ name: "Long connections",
+ zql: "_path=conn duration > 10",
+ description: "",
+ tags: []
+ }
+ ]
 })
 
 export default init