initial UI implementation for managing detection rules

2024-06-11 05:59:11 +00:00
parent 212d1a879a
commit 94779e6613
1 changed files with 58 additions and 0 deletions
@@ -0,0 +1,58 @@
 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';
 const ConnectedButton = styled(Button)({
  backgroundColor: 'red',
  color: 'white',
 });
 const RuleCard = ({ ruleName, description }) => (
  <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 >
            <EditIcon />
          </IconButton>
          <Switch defaultChecked />
        </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 }}>
          {/* we need icons here ??? */}
        </Box>
      </Box>
    </CardContent>
  </Card>
 );
 const Detection = () => {
  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 }}>
          <Typography variant="h6" component="div">
            Group 1 Title
          </Typography>
          <ConnectedButton variant="contained">Not Connected to SIEM</ConnectedButton>
        </Box>
        <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>
            <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" />
      </Box>
    </Container>
  );
 };
 export default Detection;