Add an Interactive Processtree React Component

drakrun/drakrun/web/frontend/package.json

@@ -19,7 +19,16 @@
     "react-scripts": "^5.0.1",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
-    "react-window-infinite-loader": "^1.0.5"
+    "react-window-infinite-loader": "^1.0.5",
+    "react-graph-vis": "^1.0.7",
+    "web-vitals": "^2.1.4",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

drakrun/drakrun/web/frontend/src/InteractiveBehavioralGraph.js

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import ProcessTree from "./Tree.js";
+import LabTabs from "./SideBar.js";
+import api from "./api";
+import "./behavioralGraph.css";
+
+function sortByProcess(jsonLinesDict, key) {
+  let sortedDict = {};
+  let pKey = "";
+  for (let entry of jsonLinesDict) {
+    pKey = entry["PPID"] + "_" + entry["PID"];
+    if (!(pKey in sortedDict)) {
+      sortedDict[pKey] = new Set();
+    }
+    sortedDict[pKey].add(entry[key]);
+  }
+  return sortedDict;
+}
+
+function addToReport(report, dict, key) {
+  for (let k of Object.keys(report["processes"])) {
+    // Add an empty entry to all processes in case some do not manipulate files/registry keys
+    report["processes"][k][key] = [];
+  }
+  for (let processKey of Object.keys(dict)) {
+    report["processes"][processKey][key] = [...dict[processKey]];
+  }
+}
+
+export function InteractiveGraph(analysisID) {
+  const [process, setProcess] = useState(false);
+  const [ttp, setTtp] = useState(false);
+  const [file, setFile] = useState(false);
+  const [registry, setRegistry] = useState(false);
+  const clearAllFilters = () => {
+    setProcess(false);
+    setTtp(false);
+    setFile(false);
+    setRegistry(false);
+  };
+
+  // Fetch necessary files: `report.json`, `filetracer.log`, and `regmon.log`
+  var report = await api.getReport(analysisID);
+  var files = await api.getLog(analysisID, "filetracer.log");
+  var regkeys = await api.getLog(analysisID, "regmon.log");
+
+  // Get a dictionary from JSON lines for `filetracer.log` and `regmon.log`
+  files = files.request.response.split("\n").map((line) => {
+    try {
+      return JSON.parse(line);
+    } catch (e) {
+      console.log("Parsing JSON entry failed");
+    }
+    return null;
+  });
+
+  regkeys = regkeys.request.response.split("\n").map((line) => {
+    try {
+      return JSON.parse(line);
+    } catch (e) {
+      console.log("Parsing JSON entry failed");
+    }
+    return null;
+  });
+
+  // Sort `filetracer.log` and `regmon.log` by entry, then append them to the respective process in the report.
+  var filesPerProcess = sortByProcess(files, "FileName");
+  addToReport(report, filesPerProcess, "files");
+  var regkeyPerProcess = sortByProcess(regkeys, "Key");
+  addToReport(report, regkeyPerProcess, "registry_keys");
+
+  return (
+    <>
+      <ProcessTree
+        report={report}
+        selectedTTP={ttp}
+        selectedFile={file}
+        selectedRegistry={registry}
+        onSelectProcess={(process_id) => setProcess(process_id)}
+      />
+      <div className="rowC">
+        <LabTabs
+          report={report}
+          selectedProcess={process}
+          onSelectTTP={(ttp_name) => {
+            clearAllFilters();
+            setTtp(ttp_name);
+          }}
+          onSelectFile={(filename) => {
+            clearAllFilters();
+            setFile(filename);
+          }}
+          onSelectRegistry={(regkey) => {
+            clearAllFilters();
+            setRegistry(regkey);
+          }}
+        />
+      </div>
+      <Button
+        onClick={() => clearAllFilters()}
+        style={{
+          position: "absolute",
+          left: 13,
+          bottom: 13,
+          fontSize: 15,
+          maxWidth: "100px",
+        }}
+        variant="contained"
+      >
+        Clear Selections
+      </Button>
+    </>
+  );
+}

drakrun/drakrun/web/frontend/src/SideBar.js

@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+import Box from "@mui/material/Box";
+import Tab from "@mui/material/Tab";
+import TabContext from "@mui/lab/TabContext";
+import TabList from "@mui/lab/TabList";
+import TabPanel from "@mui/lab/TabPanel";
+import "./behavioralGraph.css";
+
+function getTTPs(report, selectedProcessID) {
+  let ttps_list = new Set();
+  if (selectedProcessID) {
+    // Get a list of TTPs for only the selected process
+    report["processes"][selectedProcessID]["ttps"].forEach((ttp) => {
+      ttp["att&ck"].map((attck_name) => ttps_list.add(attck_name));
+    });
+  } else {
+    // Get a list of all the TTPs found in the report
+    for (let process of Object.values(report["processes"])) {
+      process["ttps"].forEach((ttp) => {
+        ttp["att&ck"].map((attck_name) => ttps_list.add(attck_name));
+      });
+    }
+  }
+
+  return [...ttps_list];
+}
+
+function getFiles(report, selectedProcessID) {
+  let files_list = new Set();
+  if (selectedProcessID) {
+    // Get a list of TTPs for only the selected process
+    report["processes"][selectedProcessID]["files"].forEach((file) => {
+      files_list.add(file);
+    });
+  } else {
+    // Get a list of all the TTPs found in the report
+    for (let process of Object.values(report["processes"])) {
+      process["files"].forEach((file) => {
+        files_list.add(file);
+      });
+    }
+  }
+  return [...files_list];
+}
+
+function getRegistry(report, selectedProcessID) {
+  let regkeys_list = new Set();
+  if (selectedProcessID) {
+    // Get a list of TTPs for only the selected process
+    report["processes"][selectedProcessID]["registry_keys"].forEach(
+      (regkey) => {
+        regkeys_list.add(regkey);
+      }
+    );
+  } else {
+    // Get a list of all the TTPs found in the report
+    for (let process of Object.values(report["processes"])) {
+      process["registry_keys"].forEach((regkey) => {
+        regkeys_list.add(regkey);
+      });
+    }
+  }
+  return [...regkeys_list];
+}
+
+export default function LabTabs({
+  report,
+  selectedProcess,
+  onSelectTTP,
+  onSelectFile,
+  onSelectRegistry,
+}) {
+  const ttpsList = getTTPs(report, selectedProcess).map((ttp) => (
+    <>
+      <tr
+        onClick={() => {
+          onSelectTTP(ttp);
+        }}
+      >
+        <td>{ttp}</td>
+      </tr>
+      <hr style={{ marginTop: "0px", marginBottom: "0px" }}></hr>
+    </>
+  ));
+  const filesList = getFiles(report).map((file) => (
+    <>
+      <tr
+        onClick={() => {
+          onSelectFile(file);
+        }}
+      >
+        <td>{file}</td>
+      </tr>
+      <hr style={{ marginTop: "0px", marginBottom: "0px" }}></hr>
+    </>
+  ));
+  const registryList = getRegistry(report).map((registry) => (
+    <>
+      <tr
+        onClick={() => {
+          onSelectRegistry(registry);
+        }}
+      >
+        <td>{registry}</td>
+      </tr>
+      <hr style={{ marginTop: "0px", marginBottom: "0px" }}></hr>
+    </>
+  ));
+  const [value, setValue] = useState("1");
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ typography: "body1" }}>
+      <TabContext value={value}>
+        <Box
+          sx={{
+            borderBottom: 3,
+            borderColor: "divider",
+            backgroundColor: "#1976d2",
+          }}
+        >
+          <TabList
+            onChange={handleChange}
+            variant="fullWidth"
+            sx={{
+              "& .MuiTab-root.Mui-selected": {
+                color: 'white',
+              },
+              "& .MuiTabs-indicator": {
+                backgroundColor: "white",
+                height: 3,
+              },
+            }}
+          >
+            <Tab label="TTPs" value="1" />
+            <Tab label="Files" value="2" />
+            <Tab label="Registry" value="3" />
+          </TabList>
+        </Box>
+        <TabPanel
+          value="1"
+          style={{
+            overflowY: "scroll",
+            minHeight: "95.5vh",
+            maxHeight: "95.5vh",
+            margin: 0,
+            padding: 0,
+            backgroundColor: "black",
+          }}
+        >
+          <table style={{ width: "100%" }}>{ttpsList}</table>
+        </TabPanel>
+        <TabPanel
+          value="2"
+          style={{
+            overflowY: "scroll",
+            minHeight: "95.5vh",
+            maxHeight: "95.5vh",
+            margin: 0,
+            padding: 0,
+            backgroundColor: "black",
+          }}
+        >
+          <table style={{ width: "100%" }}>{filesList}</table>
+        </TabPanel>
+        <TabPanel
+          value="3"
+          style={{
+            overflowY: "scroll",
+            minHeight: "95.5vh",
+            maxHeight: "95.5vh",
+            margin: 0,
+            padding: 0,
+            backgroundColor: "black",
+          }}
+        >
+          <table style={{ width: "100%" }}>{registryList}</table>
+        </TabPanel>
+      </TabContext>
+    </Box>
+  );
+}