marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made the ui to look good

Browse Source
This commit is contained in:
Hari Krishna
2024-06-11 16:38:28 +00:00
committed by satti-hari-krishna-reddy
parent 94779e6613
commit e1d0857fd7
2 changed files with 126 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+6
View File
@@ -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
+120 -28
View File
@@ -1,55 +1,147 @@
import React from 'react';
import { Container, Box, TextField, Switch, Card, CardContent, IconButton, Typography, Button } from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import { styled } from '@mui/system';
import React from "react";
import {
Container,
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',
color: 'white',
backgroundColor: "red",
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 }}>
<Typography variant="h6">{ruleName}</Typography>
<div style ={{ display: 'flex', alignItems: 'center'}}>
<IconButton >
<div
style={{
display: "flex",
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>
<Typography variant="body2" style = {{marginTop: '2%'}}>{description}</Typography>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
<Box sx={{ display: 'flex', gap: 1 }}>
</div>
<Typography variant="body2" style={{ marginTop: "2%" }}>
{description}
</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 = () => {
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()
}, []);
return (
<Container sx={{ mt: 4 }}>
<Box sx={{ border: '1px solid #ccc', borderRadius: 2, p: 3 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Box sx={{ border: "1px solid #ccc", borderRadius: 2, p: 3 }}>
<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' }}>
<Typography variant="body2" sx={{ mr: 1 }}>Global disable/enable</Typography>
<Box sx={{ display: "flex", alignItems: "center" }}>
<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" />
<RuleCard ruleName="Rule Name" description="Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum" />
<RuleCard ruleName="Rule Name" description="LorumIpsumLorumIpsumLorumIpsumLorumIpsumLorumIpsum" />
{ruleInfo.length > 0 &&
ruleInfo.map((card) => (
<RuleCard
key={card.title}
ruleName={card.title}
description={card.description}
{...card}
/>
))}
</Box>
</Container>
);