refactored and adding support for searching

frontend/src/views/Detection.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useRef } from "react";
 import {
   Container,
   Box,
@@ -7,6 +7,7 @@ import {
   Typography,
   Button,
 } from "@mui/material";
+import { Publish as PublishIcon } from "@mui/icons-material";
 import { toast } from "react-toastify";
 import RuleCard from "./RuleCard";
 import { styled } from "@mui/system";
@@ -51,6 +52,95 @@ const Detection = ({
   openEditBar,
   isTenzirActive,
 }) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const uploadRef = useRef(null);
+
+  const uploadFiles = (files) => {
+    for (const key in files) {
+      try {
+        const filename = files[key].name;
+        const filedata = new FormData();
+        filedata.append("shuffle_file", files[key]);
+
+        if (typeof files[key] === "object") {
+          handleCreateFile(filename, filedata);
+        }
+      } catch (e) {
+        console.log("Error in dropzone: ", e);
+      }
+    }
+
+    setTimeout(() => {
+      // Additional logic if needed
+    }, 2500);
+  };
+
+  const handleCreateFile = (filename, file) => {
+    const data = {
+      filename: filename,
+      org_id: "default",
+      workflow_id: "global",
+      namespace: "sigma",
+    };
+
+    fetch(globalUrl + "/api/v1/files/create", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for apps :O!");
+          return;
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        if (responseJson.success === true) {
+          handleFileUpload(responseJson.id, file);
+        } else {
+          toast("Failed to upload file ", filename);
+        }
+      })
+      .catch((error) => {
+        toast("Failed to upload file ", filename);
+        console.log(error.toString());
+      });
+  };
+
+  const handleFileUpload = (file_id, file) => {
+    fetch(`${globalUrl}/api/v1/files/${file_id}/upload`, {
+      method: "POST",
+      credentials: "include",
+      body: file,
+    })
+      .then((response) => {
+        if (response.status !== 200 && response.status !== 201) {
+          console.log("Status not 200 for apps :O!");
+          toast("File was created, but failed to upload.");
+          return;
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        // Handle the response as needed
+      })
+      .catch((error) => {
+        toast(error.toString());
+      });
+  };
+
+  const filteredRules = ruleInfo.filter((rule) =>
+    rule.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    rule.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   return (
     <Container sx={{ mt: 4 }}>
       <Box sx={{ border: "1px solid #ccc", borderRadius: 2, p: 3 }}>
@@ -65,10 +155,7 @@ const Detection = ({
           <Typography variant="h6" component="div">
             Sigma Detection Rules
           </Typography>
-          <ConnectedButton
+          <ConnectedButton variant="contained" isConnected={isTenzirActive}>
-            variant="contained"
-            isConnected={isTenzirActive}
-          >
             {isTenzirActive ? "Connected to SIEM" : "Not Connected to SIEM"}
           </ConnectedButton>
         </Box>
@@ -80,7 +167,36 @@ const Detection = ({
             mb: 2,
           }}
         >
-          <TextField label="Search rules" variant="outlined" size="small" />
+          <Box
+            sx={{
+              display: "flex",
+            }}
+          >
+            <TextField
+              label="Search rules"
+              variant="outlined"
+              size="small"
+              sx={{ mr: 2 }}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+            <Button
+              color="primary"
+              variant="contained"
+              onClick={() => uploadRef.current.click()}
+            >
+              <PublishIcon /> Upload sigma file
+            </Button>
+            <input
+              hidden
+              type="file"
+              multiple
+              ref={uploadRef}
+              onChange={(event) => {
+                uploadFiles(event.target.files);
+              }}
+            />
+          </Box>
           <Box sx={{ display: "flex", alignItems: "center" }}>
             <Typography variant="body2" sx={{ mr: 1 }}>
               Global disable/enable
@@ -102,8 +218,8 @@ const Detection = ({
             p: 1,
           }}
         >
-          {ruleInfo.length > 0 &&
+          {filteredRules.length > 0 &&
-            ruleInfo.map((card) => (
+            filteredRules.map((card) => (
               <RuleCard
                 key={card.file_id}
                 ruleName={card.title}

frontend/src/views/DetectionDashboard.jsx

@@ -4,7 +4,7 @@ import { toast } from "react-toastify";
 import Detection from "./Detection";
 import EditComponent from "./EditRules";
 
-const getSigmaInfo = (globalUrl, setRuleInfo, setFolderDisabled) => {
+const getSigmaInfo = (globalUrl, setRuleInfo, setFolderDisabled, setIsTenzirActive) => {
   const url = globalUrl + "/api/v1/files/detection/sigma_rules";
 
   fetch(url, {
@@ -21,6 +21,8 @@ const getSigmaInfo = (globalUrl, setRuleInfo, setFolderDisabled) => {
         } else {
           setRuleInfo(responseJson.sigma_info);
           setFolderDisabled(responseJson.folder_disabled);
+          setIsTenzirActive(responseJson.is_tenzir_active);
+
         }
       })
     )
@@ -35,11 +37,12 @@ const DetectionDashBoard = (props) => {
   const [ruleInfo, setRuleInfo] = useState([]);
   const [selectedRule, setSelectedRule] = useState(null);
   const [fileData, setFileData] = React.useState("");
+  const [isTenzirActive, setIsTenzirActive] = React.useState(false);
  
   const [folderDisabled, setFolderDisabled] = useState(false);
 
   useEffect(() => {
-    getSigmaInfo(globalUrl, setRuleInfo, setFolderDisabled);
+    getSigmaInfo(globalUrl, setRuleInfo, setFolderDisabled, setIsTenzirActive);
   }, [folderDisabled]);
 
   useEffect(() => {
@@ -103,7 +106,7 @@ const DetectionDashBoard = (props) => {
           onSave={handleSave}
         />
       ) : null} */}
-      <Detection globalUrl={globalUrl} ruleInfo={ruleInfo} folderDisabled={folderDisabled} setFolderDisabled={setFolderDisabled} openEditBar={openEditBar} />
+      <Detection globalUrl={globalUrl} ruleInfo={ruleInfo} folderDisabled={folderDisabled} setFolderDisabled={setFolderDisabled} openEditBar={openEditBar} isTenzirActive={isTenzirActive} />
     </Container>
   );  
 };