Change hotkeys, enable flow marking, fix flow change behavior, fix README

Author: 0x707a15ec

README.md

@@ -13,7 +13,9 @@ Tulip was developed by Team Europe for use in the first International Cyber Secu
 * Synchronized with Suricata.
 * Flow diffing
 * Time and size-based plots for correlation.
-* Linking HTTP sessions together based on cookies (Experimental, disabled by default)
+* Linking HTTP sessions together based on cookies (Experimental*, disabled by default)
+
+\* - to enable, add `-experimental` after `./assembler` in `docker-compose.yml`
 
 ## Screenshots
 ![](./demo_images/demo1.png)
@@ -88,7 +90,6 @@ Your Tulip instance will probably contain sensitive CTF information, like flags
 
 # Contributing
 If you have an idea for a new feature, bug fixes, UX improvements, or other contributions, feel free to open a pull request or create an issue!      
-When opening a pull request, please target the `devel` branch.
 
 # Credits
 Tulip was written by [@RickdeJager](https://github.com/rickdejager) and [@Bazumo](https://github.com/bazumo), with additional help from [@Sijisu](https://github.com/sijisu). Thanks to our fellow Team Europe players and coaches for testing, feedback and suggestions. Finally, thanks to the team behind [flower](https://github.com/secgroup/flower) for opensourcing their tooling.

frontend/src/api.ts

@@ -166,28 +166,28 @@ export const tulipApi = createApi({
       }),
       // TODO: optimistic cache update
 
-      // async onQueryStarted({ id, star }, { dispatch, queryFulfilled }) {
-      //   // `updateQueryData` requires the endpoint name and cache key arguments,
-      //   // so it knows which piece of cache state to update
-      //   const patchResult = dispatch(
-      //     tulipApi.util.updateQueryData("getFlows", undefined, (flows) => {
-      //       // The `flows` is Immer-wrapped and can be "mutated" like in createSlice
-      //       const flow = flows.find((flow) => flow._id.$oid === id);
-      //       if (flow) {
-      //         if (star) {
-      //           flow.tags.push("starred");
-      //         } else {
-      //           flow.tags = flow.tags.filter((tag) => tag != "starred");
-      //         }
-      //       }
-      //     })
-      //   );
-      //   try {
-      //     await queryFulfilled;
-      //   } catch {
-      //     patchResult.undo();
-      //   }
-      // },
+      async onQueryStarted({ id, star }, { dispatch, queryFulfilled }) {
+        // `updateQueryData` requires the endpoint name and cache key arguments,
+        // so it knows which piece of cache state to update
+        const patchResult = dispatch(
+          tulipApi.util.updateQueryData("getFlows", {service: "undefined", tags_include: [], tags_exclude:[]}, (flows) => {
+            // The `flows` is Immer-wrapped and can be "mutated" like in createSlice
+            const flow = flows.find((flow) => flow.id === id);
+            if (flow) {
+              if (star) {
+                flow.tags.push("starred");
+              } else {
+                flow.tags = flow.tags.filter((tag) => tag != "starred");
+              }
+            }
+          })
+        );
+        try {
+          await queryFulfilled;
+        } catch {
+          patchResult.undo();
+        }
+      },
     }),
   }),
 });

frontend/src/components/Corrie.tsx

@@ -190,6 +190,7 @@ export const Corrie = () => {
           >
             under attack
           </button>
+          <p className="text-left px-2 py-2">After clicking on a flow, press 'w' to scroll to it in flow list</p>
         </div>
       </div>
       <div className="flex-1 w-full overflow-hidden p-4">

frontend/src/components/FlowList.tsx

@@ -14,6 +14,7 @@ import {
   START_FILTER_KEY,
   END_FILTER_KEY,
   FLOW_LIST_REFETCH_INTERVAL_MS,
+  FORCE_REFETCH_ON_STAR,
 } from "../const";
 import { useAppSelector, useAppDispatch } from "../store";
 import { toggleFilterTag, toggleTagIntersectMode } from "../store/filter";
@@ -118,6 +119,7 @@ export function FlowList() {
 
   const onHeartHandler = async (flow: Flow) => {
     await starFlow({ id: flow.id, star: !flow.tags.includes("starred") });
+    if(FORCE_REFETCH_ON_STAR) refetch();
   };
 
   const navigate = useNavigate();
@@ -164,7 +166,30 @@ export function FlowList() {
     [transformedFlowData]
   )
 
+  useHotkeys('x', async () => {
+    if(transformedFlowData) {
+      let flow = transformedFlowData[flowIndex ?? 0]
+      await onHeartHandler(flow);
+    }
+  })
+
   useHotkeys('j', () => setFlowIndex(fi => Math.min((transformedFlowData?.length ?? 1)-1, fi + 1)), [transformedFlowData?.length]);
+  useHotkeys('w', () => {
+    if(transformedFlowData) {
+      let idAtIndex = transformedFlowData[flowIndex ?? 0].id;
+      if (idAtIndex != openedFlowID) {
+        let flowids = flowData?.map((flow, idx) => ([flow.id, idx]))
+        if (flowids) {
+          let found = flowids.filter((el)=>(el[0] == openedFlowID))
+          if (found.length > 0) {
+            let n = Number(found[0][1])
+            setFlowIndex(n)
+          }
+        }
+      }
+    }
+  }
+  );
   useHotkeys('k', () => setFlowIndex(fi => Math.max(0, fi - 1)));
   useHotkeys('i', () => {
     setShowFilters(true)
@@ -178,6 +203,12 @@ export function FlowList() {
       dispatch(toggleFilterTag("flag-out"))
     }
   }, [availableTags]);
+  useHotkeys('t', () => {
+    setShowFilters(true)
+    if ((availableTags ?? []).includes("starred")) {
+      dispatch(toggleFilterTag("starred"))
+    }
+  }, [availableTags]);
   useHotkeys('r', () => refetch());
 
   const [showFilters, setShowFilters] = useState(false);

frontend/src/components/Header.tsx

@@ -196,7 +196,7 @@ function SecondDiff() {
     setSearchParams(searchParams);
   }
 
-  useHotkeys("g", () => {
+  useHotkeys("e", () => {
     setSecondDiffFlow();
   });
 
@@ -249,6 +249,9 @@ export function Header() {
   let { currentTick, setToLastnTicks, setTimeParam } = getTickStuff();
   let [searchParams] = useSearchParams();
 
+  let navigate = useNavigate();
+
+  useHotkeys('g', () => navigate(`/corrie?${searchParams}`, { replace: true }))
   useHotkeys('a', () => setToLastnTicks(5));
   useHotkeys('c', () => {
     (document.getElementById("startdateselection") as HTMLInputElement).value = "";

frontend/src/const.ts

@@ -14,3 +14,5 @@ export const TICK_REFETCH_INTERVAL_MS = 10000;
 export const FLOW_LIST_REFETCH_INTERVAL_MS = 30000;
 export const UNDER_ATTACK_REFETCH_INTERVAL_MS = 30000;
 export const MAX_LENGTH_FOR_HIGHLIGHT = 400000;
+
+export const FORCE_REFETCH_ON_STAR = true;

frontend/src/pages/FlowView.tsx

@@ -535,19 +535,25 @@ export function FlowView() {
   // TODO: account for user scrolling - update currentFlow accordingly
   const [currentFlow, setCurrentFlow] = useState<number>(-1);
 
-  useHotkeys("h", () => {
+  // reset scroll on flow switch
+  useHotkeys('j', () => setCurrentFlow(0))
+  useHotkeys('k', () => setCurrentFlow(0))
+
+  useHotkeys('h', () => {
     // we do this for the scroll to top
     if (currentFlow === 0) {
-      document.getElementById(`${id}-${currentFlow}`)?.scrollIntoView(true)
+      // document.getElementById(`${id}-${currentFlow}`)?.scrollIntoView(true)
+      let el = document.querySelector("main > div > div:nth-child(2)")
+      if (el) el.scrollIntoView()
     }
     setCurrentFlow(fi => Math.max(0, fi - 1))
   }, [currentFlow]);
-  useHotkeys("l", () => {
-    if (currentFlow === (flow?.flow[reprId]?.flow?.length ?? 1) - 1) {
-      document.getElementById(`${id}-${currentFlow}`)?.scrollIntoView(true)
-    }
-    setCurrentFlow(fi => Math.min((flow?.flow[reprId]?.flow?.length ?? 1) - 1, fi + 1))
-  }, [currentFlow, flow?.flow[reprId]?.flow?.length, reprId]);
+  useHotkeys('l', () => {
+    // if (currentFlow === (flow?.flow?.length ?? 1)-1) {
+    //   document.getElementById(`${id}-${currentFlow}`)?.scrollIntoView(true)
+    // }
+    setCurrentFlow(fi => Math.min((flow?.flow?.length ?? 1)-1, fi + 1))
+  }, [currentFlow, flow?.flow?.length]);
 
   useEffect(
     () => {

frontend/src/pages/Home.tsx

@@ -1,21 +1,26 @@
 const shortcutTableData = [
   [
     { key: 'j/k', action: 'Down/Up in FlowList' },
-    { key: 's', action: 'Focus search bar' },
+    { key: 'h/l', action: 'Up/Down in Flow' },
+    { key: 's', action: 'Focus (s)earch bar' },
     { key: 'esc', action: 'Unfocus search bar' },
-    { key: 'i/o', action: 'Toggle flag in/out filters' },
   ],
   [
-    { key: 'h/l', action: 'Up/Down in Flow' },
-    { key: 'a', action: 'Last 5 ticks' },
-    { key: 'c', action: 'Clear time selection' },
-    { key: 'r', action: 'Refresh flows' },
+    { key: 'a', action: 'L(a)st 5 ticks' },
+    { key: 'c', action: '(C)lear time selection' },
+    { key: 'r', action: '(R)efresh flows' },
   ],
   [
-    { key: 'm', action: 'Switch between decoders' },
-    { key: 'd', action: 'Diff view' },
-    { key: 'f', action: 'Load flow to first diff slot' },
-    { key: 'g', action: 'Load flow to second diff slot' },
+    { key: 'd', action: '(D)iff view' },
+    { key: 'f', action: 'Load flow to (f)irst diff slot' },
+    { key: 'e', action: 'Load flow to s(e)cond diff slot' },
+    { key: 'g', action: '(G)raph view' },
+  ],
+  [
+    { key: 'w', action: 'Scroll to current flo(w) in flow list' },
+    { key: 'i/o', action: 'Toggle flag in/out filters' },
+    { key: 't', action: 'Toggle s(t)arred filters' },
+    { key: 'x', action: 'Star selected flow' },
   ]
 ];