Force Rebuild frontend

2024-08-20 14:53:53 +02:00
parent c4f502eb63
commit 1a9f82a3e7
5 changed files with 319 additions and 76 deletions
@@ -0,0 +1,225 @@
+import React, { useState } from "react";
+import {
+  Container,
+  Box,
+  TextField,
+  Switch,
+  Typography,
+  Button,
+  CircularProgress, 
+  Paper, 
+} from "@mui/material";
+
+import { toast } from "react-toastify";
+import theme from '../theme.jsx';
+import DetectionRuleCard from "../components/DetectionRuleCard.jsx";
+
+const handleDirectoryChange = (folderDisabled, setFolderDisabled, globalUrl, isTenzirActive) => {
+  if (!isTenzirActive) {
+    toast.warn("Connect to siem first for global enable/disable to work");
+    return;
+  }
+
+  const action = folderDisabled ? "enable_folder" : "disable_folder";
+  const url = `${globalUrl}/api/v1/detections/${action}`;
+
+  fetch(url, {
+    method: "PUT",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then((response) =>
+      response.json().then((responseJson) => {
+        if (responseJson["success"] === true) {
+          if (action === "enable_folder") setFolderDisabled(false);
+          else setFolderDisabled(true);
+        } else {
+          //toast(`failed to disable rule`);
+        }
+      })
+    )
+    .catch((error) => {
+      console.log(`Error in ${action} the rule: `, error);
+      toast(`An error occurred while ${action} the rule`);
+    });
+};
+
+const Detection = (props)  => {
+  const { globalUrl, ruleInfo, folderDisabled, setFolderDisabled, isTenzirActive, detectionInfo } = props;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleConnectClick = () => {
+    if (isTenzirActive) {
+		return
+	}
+
+	if (detectionInfo.category === undefined || detectionInfo.category === null) {
+		toast.warn("Detection category not found. Please try again or contact support@shuffler.io if you think this is a bug.")
+		return
+	}
+
+    setLoading(true);
+    const url = `${globalUrl}/api/v1/detections/${detectionInfo?.category}/connect`;
+
+    fetch(url, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+	.then((response) =>
+	  response.json().then((responseJson) => {
+		if (responseJson["success"] === true) {
+		  setTimeout(() => {
+			setLoading(false);
+			window.location.reload();
+		  }, 15000); 
+		} else {
+		  if (responseJson.reason !== undefined && responseJson.reason !== null) {
+			  toast(responseJson.reason)
+		  } else {
+		  	toast(`Failed to connect to ${detectionInfo?.category}`);
+		  }
+
+		  if (responseJson.action !== undefined && responseJson.actio !== null && responseJson.action.length > 0) {
+			  //if (responseJson.action === "environment_create") {
+			  //	navigate("/admin?tab=environments")
+			  //}
+		  }
+
+		  setLoading(false);
+		}
+	  })
+	)
+	.catch((error) => {
+	  setLoading(false);
+	  console.log(`Error in connecting to ${detectionInfo?.category}: `, error);
+	  toast(`An error occurred while connecting to ${detectionInfo?.category}`);
+	});
+  }
+
+  const filteredRules = ruleInfo === "default" ? [] : ruleInfo?.filter((rule) =>
+    rule.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    rule.description.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  return (
+    <Container>
+      <Paper
+	    style={{
+		  marginTop: 50, 
+	  	  width: "100%", 
+		  padding: 50, 
+	  	  backgroundColor: theme.palette.backgroundColor,
+		  borderRadius: theme.palette.borderRadius,
+	    }}
+	  >
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mb: 2,
+          }}
+        >
+          <Typography variant="h6" component="div">
+	  		{detectionInfo?.name} ({filteredRules?.length})
+          </Typography>
+          <Button
+			  variant="contained"
+			  onClick={handleConnectClick}
+			  disabled={loading} // Disable the button while loading
+	  		  color={isTenzirActive ? "primary" : "secondary"}
+			  style={{ }}
+		  >
+      		{loading ? <CircularProgress size={24} /> : isTenzirActive ? `Connected to ${detectionInfo?.category}` : `Connect to ${detectionInfo?.category}`}
+    	  </Button>
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mb: 2,
+          }}
+        >
+          <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
+            </Typography>
+            <Switch
+              checked={!folderDisabled}
+              onChange={() =>
+                handleDirectoryChange(folderDisabled, setFolderDisabled, globalUrl, isTenzirActive)
+              }
+            />
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            height: "500px",
+            width: "100%",
+            overflowY: "auto",
+            p: 1,
+          }}
+        >
+          {filteredRules?.length > 0 ?
+			  filteredRules.map((rule, index) => {
+				console.log("RULE CARD: ", rule);
+
+				return (
+				  <DetectionRuleCard
+					key={index}
+					ruleName={rule.file_name}
+					description={rule.description}
+
+					file_id={rule.file_id}
+					globalUrl={globalUrl}
+					folderDisabled={folderDisabled}
+					isTenzirActive={isTenzirActive}
+					{...rule}
+				  />
+				)
+			  }) 
+			: null } 
+        </Box>
+      </Paper>
+    </Container>
+  );
+};
+
+export default Detection;