made the ui to look good

frontend/src/App.jsx

@@ -15,6 +15,7 @@ import HealthPage from "./components/HealthPage.jsx";
 import theme from "./theme";
 import Apps from "./views/Apps";
 import AppCreator from "./views/AppCreator";
+import Dectection from "./views/Detection.jsx";
 
 import Welcome from "./views/Welcome.jsx";
 import Dashboard from "./views/Dashboard.jsx";
@@ -414,6 +415,11 @@ const App = (message, props) => {
         	    />
         	  }
         	/>
+			<Route
+			exact
+			path="/detections/sigma"
+			element={<Dectection globalUrl={globalUrl} />}
+			/>
         	<Route
         	  exact
         	  path="/workflows"

frontend/src/views/Detection.jsx

@@ -1,55 +1,147 @@
-import React from 'react';
+import React from "react";
-import { Container, Box, TextField, Switch, Card, CardContent, IconButton, Typography, Button } from '@mui/material';
+import {
-import EditIcon from '@mui/icons-material/Edit';
+  Container,
-import { styled } from '@mui/system';
+  Box,
+  TextField,
+  Switch,
+  Card,
+  CardContent,
+  IconButton,
+  Typography,
+  Button,
+} from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import { styled } from "@mui/system";
+import { toast } from "react-toastify";
 
 const ConnectedButton = styled(Button)({
-  backgroundColor: 'red',
+  backgroundColor: "red",
-  color: 'white',
+  color: "white",
 });
 
-const RuleCard = ({ ruleName, description }) => (
+const disableRule = (fileId) => {
+
+}
+
+
+const RuleCard = ({ ruleName, description, ...otherProps }) => {
+  const [additionalProps, setAdditionalProps] = React.useState(otherProps);
+  return (
   <Card variant="outlined" sx={{ mb: 2 }}>
     <CardContent>
-    <div style = {{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+      <div
-      <Typography variant="h6">{ruleName}</Typography>
+        style={{
-      <div style ={{ display: 'flex', alignItems: 'center'}}>
+          display: "flex",
-          <IconButton >
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2,
+        }}
+      >
+        <Typography variant="h6">{ruleName}</Typography>
+        <div style={{ display: "flex", alignItems: "center" }}>
+          <IconButton>
             <EditIcon />
           </IconButton>
-          <Switch defaultChecked />
+          <Switch
+              checked={additionalProps.is_enabled}
+              disabled={!additionalProps.is_enabled}
+            />
         </div>
-        </div>
+      </div>
-      <Typography variant="body2" style = {{marginTop: '2%'}}>{description}</Typography>
+      <Typography variant="body2" style={{ marginTop: "2%" }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
+        {description}
-        <Box sx={{ display: 'flex', gap: 1 }}>
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mt: 2,
+        }}
+      >
+        <Box sx={{ display: "flex", gap: 1 }}>
           {/* we need icons here ??? */}
         </Box>
       </Box>
     </CardContent>
-  </Card>
+  </Card>)
-);
+}
+
+const Detection = (props) => {
+  const {globalUrl} = props;
+  const [ruleInfo, setRuleInfo] = React.useState([]);
+
+  const getSigmaInfo = () => {
+    const url = globalUrl + "/api/v1/files/detection/sigma_rules"
+  
+    fetch(url, {
+      method: "GET",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }) .then((response) =>
+      response.json().then((responseJson) => {
+        if (responseJson["success"] === false) {
+          toast("Failed to get sigma rules");
+        } else {
+            setRuleInfo(responseJson);
+        }
+  
+      }),
+    )
+    .catch((error) => {
+      console.log("Error in geting sigma files: ", error);
+    });
+  }
+
+  React.useEffect(() => {
+    getSigmaInfo()
+}, []);
   
-const Detection = () => {
   return (
     <Container sx={{ mt: 4 }}>
-      <Box sx={{ border: '1px solid #ccc', borderRadius: 2, p: 3 }}>
+      <Box sx={{ border: "1px solid #ccc", borderRadius: 2, p: 3 }}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mb: 2,
+          }}
+        >
           <Typography variant="h6" component="div">
             Group 1 Title
           </Typography>
-          <ConnectedButton variant="contained">Not Connected to SIEM</ConnectedButton>
+          <ConnectedButton variant="contained">
+            Not Connected to SIEM
+          </ConnectedButton>
         </Box>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            mb: 2,
+          }}
+        >
           <TextField label="Search rules" variant="outlined" size="small" />
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Typography variant="body2" sx={{ mr: 1 }}>Global disable/enable</Typography>
+            <Typography variant="body2" sx={{ mr: 1 }}>
+              Global disable/enable
+            </Typography>
             <Switch defaultChecked />
           </Box>
         </Box>
-        <RuleCard ruleName="Rule Name" description="this is the random text generated by me to check how this looks in the ui" />
+        {ruleInfo.length > 0 &&
-        <RuleCard ruleName="Rule Name" description="Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum" />
+          ruleInfo.map((card) => (
-        <RuleCard ruleName="Rule Name" description="LorumIpsumLorumIpsumLorumIpsumLorumIpsumLorumIpsum" />
+            <RuleCard
+              key={card.title}
+              ruleName={card.title}
+              description={card.description}
+              {...card}
+            />
+          ))}
       </Box>
     </Container>
   );