Added autorefresh, improved 'last ticks' button, search highlighting and other css

frontend/src/components/FlowList.tsx

@@ -7,6 +7,8 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { useAtom, useAtomValue } from "jotai";
 import { Flow, FullFlow, useTulip } from "../api";
+import { autoRefreshAtom } from "../components/Header";
+import { last5TicksAtom } from "../components/Header";
 import {
  SERVICE_FILTER_KEY,
  TEXT_FILTER_KEY,
@@ -35,13 +37,14 @@ export function FlowList() {
  const { services, api, getFlows } = useTulip();
 
  const [flowList, setFlowList] = useState<Flow[]>([]);
-
+ const [useAutoRefresh] = useAtom(autoRefreshAtom)
+ const [useLast5Ticks] = useAtom(last5TicksAtom)
  const service_name = searchParams.get(SERVICE_FILTER_KEY) ?? "";
  const service = services.find((s) => s.name == service_name);
 
  const text_filter = searchParams.get(TEXT_FILTER_KEY) ?? undefined;
  const from_filter = searchParams.get(START_FILTER_KEY) ?? undefined;
- const to_filter = searchParams.get(END_FILTER_KEY) ?? undefined;
+ let to_filter = searchParams.get(END_FILTER_KEY) ?? undefined;
 
  const debounced_text_filter = useDebounce(text_filter, 300);
 
@@ -52,11 +55,47 @@ export function FlowList() {
 
  const [lastRefresh, setLastRefresh] = useAtom(lastRefreshAtom);
 
+ useEffect(() => {
+
+ const timer = setInterval(async () => {
+ if(useAutoRefresh) {
+
+ if (useLast5Ticks) {
+ to_filter = new Date().valueOf().toString() + 5000;
+ }
+ const fetchData = async () => {
+ const data = await getFlows({
+ "flow.data": debounced_text_filter,
+ dst_ip: service?.ip,
+ dst_port: service?.port,
+ from_time: from_filter,
+ to_time: to_filter,
+ service: "", // FIXME
+ tags: selectedTags,
+ });
+ if (flowList != data) {
+ setFlowList(data);
+ }
+ };
+ fetchData().catch(console.error);
+ }
+ }, 500)
+ return () => {
+ clearInterval(timer)
+ }
+ }, [
+ service,
+ debounced_text_filter,
+ from_filter,
+ to_filter,
+ selectedTags,
+ lastRefresh,
+ useAutoRefresh,
+ useLast5Ticks])
  useEffect(() => {
  const fetchData = async () => {
  const data = await api.getTags();
  setAvailableTags(data);
- console.log(data);
  };
  fetchData().catch(console.error);
  }, []);
@@ -85,7 +124,6 @@ export function FlowList() {
  selectedTags,
  lastRefresh,
  ]);
-
  const onHeartHandler = useCallback(async (flow: Flow) => {
  await api.starFlow(flow._id.$oid, !flow.starred);
  // optimistic update

frontend/src/components/Header.tsx

@@ -4,7 +4,7 @@ import { atomWithStorage } from "jotai/utils";
 import { Suspense } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { Service, useTulip } from "../api";
-
+import classNames from "classnames";
 import {
  END_FILTER_KEY,
  SERVICE_FILTER_KEY,
@@ -14,6 +14,8 @@ import {
 import { useCTF } from "../pages/Home";
 
 export const showHexAtom = atomWithStorage("showHex", false);
+export const autoRefreshAtom = atomWithStorage("autoRefresh", false);
+export const last5TicksAtom = atomWithStorage("last5Ticks", false);
 
 // Hack to force refres sidebar
 export const lastRefreshAtom = atom(Date.now());
@@ -37,6 +39,7 @@ function ServiceSelection() {
  console.log(...searchParams.entries(), service_select);
  return (
  <select
+ className="rounded-md px-3 py-1.5"
  value={searchParams.get(FILTER_KEY) ?? ""}
  onChange={(event) => {
  let serviceFilter = event.target.value;
@@ -198,7 +201,56 @@ function ShowHexToggle() {
  </div>
  );
 }
+function AutoRefreshToggle() {
+ const [autoRefresh, setAutoRefresh] = useAtom(autoRefreshAtom);
+ const { setTimeParam, endTick } = useMessyTimeStuff();
+ return (
+
+ <button
+ className={classNames({
+ "ring-inset ring-2 bg-orange-200 ring-orange-300": autoRefresh,
+ "bg-gray-200 ": !autoRefresh,
+ "rounded-md px-2 py-1": true,
+ })}
+ onClick={() => {
+ setAutoRefresh(!autoRefresh);
+ }}
+ >
+ Autorefresh
+ </button>
+
+ );
+}
+function Last5TicksToggle() {
+ const [last5Ticks, setLast5Ticks] = useAtom(last5TicksAtom);
+ const { setToLastnTicks, currentTick } = useMessyTimeStuff();
+ const [lastRefresh, setLastRefresh] = useAtom(lastRefreshAtom);
+
+ const { setTimeParam, endTick } = useMessyTimeStuff();
+ return (
+
+ <button
+ className={classNames({
+ "ring-inset ring-2 bg-orange-200 ring-orange-300": last5Ticks,
+ "bg-gray-200": !last5Ticks,
+ "rounded-md px-2 py-1": true,
+ })}
+ onClick={() => {
+ setLast5Ticks(!last5Ticks);
+ if (!last5Ticks) {
+ setToLastnTicks(5);
+ setLastRefresh(Date.now());
+ }else{
+ setTimeParam('', START_FILTER_KEY);
+ setTimeParam('', END_FILTER_KEY);
+ }
+ }}
+ >
+ Last 5 ticks
+ </button>
 
+ );
+}
 export function Header() {
  let [searchParams] = useSearchParams();
  const { setToLastnTicks, currentTick } = useMessyTimeStuff();
@@ -225,16 +277,12 @@ export function Header() {
  <EndDateSelection></EndDateSelection>
  </div>
  <div>
- <button
- className=" bg-amber-100 text-gray-800 rounded-md px-2 py-1"
- onClick={() => {
- setToLastnTicks(5);
- setLastRefresh(Date.now());
- }}
- >
- Last 5 ticks
- </button>
+ <Last5TicksToggle></Last5TicksToggle>
+ </div>
+ <div>
+ <AutoRefreshToggle></AutoRefreshToggle>
  </div>
+
  <div className="ml-auto mr-4">Current: {currentTick}</div>
 
  {/* <div className="ml-auto">

frontend/src/pages/FlowView.tsx

@@ -2,14 +2,16 @@ import { useParams } from "react-router-dom";
 import React, { useEffect, useState } from "react";
 import { useTulip, FlowData, FullFlow } from "../api";
 import { Buffer } from "buffer";
-
+import {
+ TEXT_FILTER_KEY,
+} from "../App";
 import {
  ArrowCircleLeftIcon,
  ArrowCircleRightIcon,
 } from "@heroicons/react/solid";
 import { format } from "date-fns";
 import classNames from "classnames";
-
+import { useSearchParams } from "react-router-dom";
 import { hexy } from "hexy";
 import { useCopy } from "../hooks/useCopy";
 
@@ -58,9 +60,29 @@ function HexFlow({ flow }: { flow: FlowData }) {
  const hex = hexy(buffer);
  return <FlowContainer copyText={hex}>{hex}</FlowContainer>;
 }
+function highlightText(flowText: string, highlight: string) {
+ try {
+ const regex = new RegExp(`(${highlight})`, 'gi');
+ const parts = flowText.split(regex);
+ return <span> { parts.map((part, i) => 
+ <span key={i} className={classNames({
+ "bg-orange-200 rounded-sm ring-2 ring-orange-200": regex.test(part),
+ })}>
+ { part }
+ </span>)
+ } </span>;
+ } catch(error) {
+ console.log(error)
+ return flowText;
+ }
+}
 
 function TextFlow({ flow }: { flow: FlowData }) {
- return <FlowContainer copyText={flow.data}>{flow.data}</FlowContainer>;
+ let [searchParams] = useSearchParams();
+ const text_filter = searchParams.get(TEXT_FILTER_KEY) ?? '';
+ const text = text_filter === '' ? flow.data : highlightText(flow.data,text_filter)
+
+ return <FlowContainer copyText={flow.data}>{text}</FlowContainer>;
 }
 
 function WebFlow({ flow }: { flow: FlowData }) {