showing the tenzir active status in the UI

frontend/src/views/Detection.jsx

@@ -11,14 +11,13 @@ import { toast } from "react-toastify";
 import RuleCard from "./RuleCard";
 import { styled } from "@mui/system";
 
-const ConnectedButton = styled(Button)({
-  backgroundColor: "red",
+const ConnectedButton = styled(Button)(({ theme, isConnected }) => ({
+  backgroundColor: isConnected ? "green" : "red",
   color: "white",
-});
+}));
 
 const handleDirectoryChange = (folderDisabled, setFolderDisabled, globalUrl) => {
-
-  const action = folderDisabled ? "enable_folder" : "disable_folder"
+  const action = folderDisabled ? "enable_folder" : "disable_folder";
   const url = `${globalUrl}/api/v1/files/detection/${action}`;
 
   fetch(url, {
@@ -42,10 +41,16 @@ const handleDirectoryChange = ( folderDisabled, setFolderDisabled, globalUrl) =>
       console.log(`Error in ${action} the rule: `, error);
       toast(`An error occurred while ${action} the rule`);
     });
+};
 
-}
-
-const Detection = ({ globalUrl, ruleInfo, folderDisabled, setFolderDisabled, openEditBar }) => {
+const Detection = ({
+  globalUrl,
+  ruleInfo,
+  folderDisabled,
+  setFolderDisabled,
+  openEditBar,
+  isTenzirActive,
+}) => {
   return (
     <Container sx={{ mt: 4 }}>
       <Box sx={{ border: "1px solid #ccc", borderRadius: 2, p: 3 }}>
@@ -60,8 +65,11 @@ const Detection = ({ globalUrl, ruleInfo, folderDisabled, setFolderDisabled, ope
           <Typography variant="h6" component="div">
             Sigma Detection Rules
           </Typography>
-          <ConnectedButton variant="contained">
-            Not Connected to SIEM
+          <ConnectedButton
+            variant="contained"
+            isConnected={isTenzirActive}
+          >
+            {isTenzirActive ? "Connected to SIEM" : "Not Connected to SIEM"}
           </ConnectedButton>
         </Box>
         <Box
@@ -79,7 +87,9 @@ const Detection = ({ globalUrl, ruleInfo, folderDisabled, setFolderDisabled, ope
             </Typography>
             <Switch
               checked={!folderDisabled}
-                onChange={() => handleDirectoryChange(folderDisabled, setFolderDisabled, globalUrl)}
+              onChange={() =>
+                handleDirectoryChange(folderDisabled, setFolderDisabled, globalUrl)
+              }
             />
           </Box>
         </Box>