Started syncing back new detection changes. Unsure how to optimize this for now.
This commit is contained in:
Frikky
@@ -299,7 +299,7 @@ const AppGrid = (props) => {
|
||||
|
||||
useEffect(() => {
|
||||
var baseurl = globalUrl;
|
||||
fetch(baseurl + "/api/v1/getinfo", {
|
||||
fetch(baseurl + "/api/v1/me", {
|
||||
credentials: "include",
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
IconButton,
|
||||
Typography,
|
||||
Switch,
|
||||
} from "@mui/material";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import { toast } from "react-toastify";
|
||||
import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
const RuleCard = ({ ruleName, description, file_id, globalUrl, folderDisabled, isTenzirActive, ...otherProps }) => {
|
||||
const [openCodeEditor, setOpenCodeEditor] = React.useState(false);
|
||||
const [fileData, setFileData] = React.useState("");
|
||||
const [isEnabled, setIsEnabled] = React.useState(otherProps.is_enabled);
|
||||
const isCloud = ["localhost:3002", "shuffler.io"].includes(window.location.host);
|
||||
|
||||
const handleSwitchChange = (event) => {
|
||||
if (folderDisabled) {
|
||||
toast("enable the directory to enable individual rules");
|
||||
return;
|
||||
}
|
||||
if (!isTenzirActive) {
|
||||
toast("connect to the siem to enable/disable the rule");
|
||||
return;
|
||||
}
|
||||
const newIsEnabled = event.target.checked;
|
||||
toggleRule(file_id, !newIsEnabled, globalUrl, () => {
|
||||
setIsEnabled(newIsEnabled);
|
||||
});
|
||||
};
|
||||
|
||||
const UpdateText = (text) => {
|
||||
fetch(`${globalUrl}/api/v1/files/${file_id}/edit`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: text,
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Can't update file");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson.success === true) {
|
||||
toast("Successfully updated rule");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
toast("Error updating file: " + error.toString());
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card style={{
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
minHeight: 100,
|
||||
}}>
|
||||
<CardContent>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<h1> HELO</h1>
|
||||
<Typography variant="h6">{ruleName}</Typography>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<IconButton onClick={() => openEditBar(file_id, setOpenCodeEditor, setFileData, globalUrl)}>
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<Switch
|
||||
checked={isEnabled && !folderDisabled}
|
||||
onChange={handleSwitchChange}
|
||||
disabled={!isTenzirActive}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Typography variant="body2" style={{ marginTop: '2%' }}>
|
||||
{description}
|
||||
</Typography>
|
||||
|
||||
<ShuffleCodeEditor
|
||||
isCloud={isCloud}
|
||||
expansionModalOpen={openCodeEditor}
|
||||
setExpansionModalOpen={setOpenCodeEditor}
|
||||
setcodedata={setFileData}
|
||||
codedata={fileData}
|
||||
isFileEditor={true}
|
||||
key={fileData} // https://reactjs.org/docs/reconciliation.html#recursing-on-children
|
||||
runUpdateText={UpdateText}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const toggleRule = (fileId, isCurrentlyEnabled, globalUrl, callback) => {
|
||||
const action = isCurrentlyEnabled ? "disable" : "enable";
|
||||
const url = `${globalUrl}/api/v1/files/detection/${fileId}/${action}_rule`;
|
||||
|
||||
fetch(url, {
|
||||
method: "PUT",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) =>
|
||||
response.json().then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
toast(`Failed to ${action} the rule`);
|
||||
} else {
|
||||
toast(`Rule ${action}d successfully`);
|
||||
callback();
|
||||
}
|
||||
})
|
||||
)
|
||||
.catch((error) => {
|
||||
console.log(`Error in ${action}ing the rule: `, error);
|
||||
toast(`An error occurred while ${action}ing the rule`);
|
||||
});
|
||||
};
|
||||
|
||||
const openEditBar = (file_id, setOpenCodeEditor, setFileData, globalUrl) => {
|
||||
getFileContent(file_id, setFileData, globalUrl)
|
||||
|
||||
setOpenCodeEditor(true);
|
||||
};
|
||||
|
||||
const getFileContent = (file_id, setFileData, globalUrl) => {
|
||||
setFileData("");
|
||||
fetch(globalUrl + "/api/v1/files/" + file_id + "/content", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for file :O!");
|
||||
return "";
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then((respdata) => {
|
||||
if (respdata.length === 0) {
|
||||
toast("Failed getting file. Is it deleted?");
|
||||
return;
|
||||
}
|
||||
return respdata
|
||||
})
|
||||
.then((responseData) => {
|
||||
|
||||
setFileData(responseData);
|
||||
})
|
||||
.catch((error) => {
|
||||
toast(error.toString());
|
||||
});
|
||||
};
|
||||
export default RuleCard;
|
||||
@@ -124,8 +124,6 @@ const useStyles = makeStyles((theme) => ({
|
||||
const Header = (props) => {
|
||||
const {
|
||||
globalUrl,
|
||||
setNotifications,
|
||||
notifications,
|
||||
isLoaded,
|
||||
isLoggedIn,
|
||||
removeCookie,
|
||||
@@ -230,71 +228,6 @@ const Header = (props) => {
|
||||
? window.location.pathname
|
||||
: "";
|
||||
|
||||
const clearNotifications = () => {
|
||||
// Don't really care about the logout
|
||||
|
||||
toast("Clearing notifications")
|
||||
fetch(`${globalUrl}/api/v1/notifications/clear`, {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.status !== 200) {
|
||||
console.log("Error in response");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then(function (responseJson) {
|
||||
if (responseJson.success === true) {
|
||||
setNotifications([]);
|
||||
handleClose();
|
||||
} else {
|
||||
toast("Failed dismissing notifications. Please try again later.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error in notification dismissal: ", error);
|
||||
//removeCookie("session_token", {path: "/"})
|
||||
});
|
||||
};
|
||||
|
||||
const dismissNotification = (alert_id) => {
|
||||
// Don't really care about the logout
|
||||
fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.status !== 200) {
|
||||
console.log("Error in response");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then(function (responseJson) {
|
||||
if (responseJson.success === true) {
|
||||
const newNotifications = notifications.filter(
|
||||
(data) => data.id !== alert_id
|
||||
);
|
||||
console.log("NEW NOTIFICATIONS: ", newNotifications);
|
||||
setNotifications(newNotifications);
|
||||
} else {
|
||||
toast("Failed dismissing notification. Please try again later.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error in notification dismissal: ", error);
|
||||
//removeCookie("session_token", {path: "/"})
|
||||
});
|
||||
};
|
||||
|
||||
// DEBUG HERE
|
||||
const handleClickLogout = () => {
|
||||
console.log("SHOULD LOG OUT");
|
||||
@@ -337,202 +270,6 @@ const Header = (props) => {
|
||||
const imagesize = 22;
|
||||
const boxColor = "#86c142";
|
||||
|
||||
const NotificationItem = (props) => {
|
||||
const { data } = props
|
||||
|
||||
var image = "";
|
||||
var orgName = "";
|
||||
var orgId = "";
|
||||
|
||||
if (userdata.orgs !== undefined) {
|
||||
const foundOrg = userdata.orgs.find((org) => org.id === data["org_id"]);
|
||||
if (foundOrg !== undefined && foundOrg !== null) {
|
||||
//position: "absolute", bottom: 5, right: -5,
|
||||
const imageStyle = {
|
||||
width: imagesize,
|
||||
height: imagesize,
|
||||
pointerEvents: "none",
|
||||
marginLeft:
|
||||
data.creator_org !== undefined && data.creator_org.length > 0
|
||||
? 20
|
||||
: 0,
|
||||
borderRadius: 10,
|
||||
border:
|
||||
foundOrg.id === userdata.active_org.id
|
||||
? `3px solid ${boxColor}`
|
||||
: null,
|
||||
cursor: "pointer",
|
||||
marginRight: 10,
|
||||
}
|
||||
|
||||
image =
|
||||
foundOrg.image === "" ? (
|
||||
<img
|
||||
alt={foundOrg.name}
|
||||
src={theme.palette.defaultImage}
|
||||
style={imageStyle}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
alt={foundOrg.name}
|
||||
src={foundOrg.image}
|
||||
style={imageStyle}
|
||||
onClick={() => { }}
|
||||
/>
|
||||
);
|
||||
|
||||
orgName = foundOrg.name;
|
||||
orgId = foundOrg.id;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
width: notificationWidth,
|
||||
padding: 25,
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}}
|
||||
>
|
||||
{data.reference_url !== undefined && data.reference_url !== null && data.reference_url.length > 0 ?
|
||||
<Link to={data.reference_url} style={{ color: "#f86a3e", textDecoration: "none", }}>
|
||||
<Typography variant="body1">
|
||||
{data.title} ({data.amount})
|
||||
</Typography >
|
||||
</Link>
|
||||
:
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
{data.title}
|
||||
</Typography >
|
||||
}
|
||||
|
||||
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
|
||||
<img alt={data.title} src={data.image} style={{ height: 100, width: 100, }} />
|
||||
:
|
||||
null
|
||||
}
|
||||
<Typography variant="body2" style={{ marginTop: 10, maxHeight: 200, overflowX: "hidden", overflowY: "auto", }}>
|
||||
{data.description}
|
||||
</Typography >
|
||||
<div style={{ display: "flex" }}>
|
||||
{data.read === false ? (
|
||||
<Button
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
style={{ marginTop: 15 }}
|
||||
onClick={() => {
|
||||
dismissNotification(data.id);
|
||||
}}
|
||||
>
|
||||
Dismiss
|
||||
</Button>
|
||||
) : null}
|
||||
<Tooltip title={`Org "${orgName}"`} placement="bottom">
|
||||
<div
|
||||
style={{ cursor: "pointer", marginLeft: 10, marginTop: 20 }}
|
||||
onClick={() => { }}
|
||||
>
|
||||
{image}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
const notificationMenu = (
|
||||
<span style={{}}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
style={{}}
|
||||
aria-controls="simple-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={(event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
}}
|
||||
>
|
||||
{/*<Badge badgeContent={notifications.filter((n) => n.read === false).length} color="primary">*/}
|
||||
<NotificationsIcon
|
||||
color="secondary"
|
||||
style={{ height: 30, width: 30 }}
|
||||
alt="Your username here"
|
||||
src=""
|
||||
/>
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="simple-menu"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
style={{
|
||||
zIndex: 10002,
|
||||
maxHeight: "80vh",
|
||||
overflowX: "hidden",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
PaperProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
},
|
||||
}}
|
||||
onClose={() => {
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
width: notificationWidth,
|
||||
padding: 25,
|
||||
borderBottom: "3px solid rgba(255,255,255,0.4)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", marginBottom: 5 }}>
|
||||
<Typography variant="body1" style={{ flex: 1, }}>
|
||||
Notifications ({notifications.filter((data) => !data.read).length})
|
||||
</Typography>
|
||||
<ButtonGroup style={{ height: 40, flex: 1, }}>
|
||||
{notifications.length > 1 ? (
|
||||
<Button
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
disabled={notifications.filter((data) => !data.read).length === 0}
|
||||
onClick={() => {
|
||||
clearNotifications();
|
||||
}}
|
||||
>
|
||||
Flush
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
navigate("/admin?tab=organization&admin_tab=priorities")
|
||||
}}
|
||||
>
|
||||
Explore
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<Typography variant="body2" color="textSecondary" style={{ marginTop: 5, }}>
|
||||
Notifications generated made by Shuffle to help you discover issues or
|
||||
improvements. <a href="/docs/organizations#notifications" target="_blank" rel="noopener noreferrer" style={{ color: "#f86a3e", textDecoration: "none", }}>
|
||||
Learn more</a>
|
||||
</Typography>
|
||||
</Paper>
|
||||
{notifications.map((data, index) => {
|
||||
if (data.read) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <NotificationItem data={data} key={index} />;
|
||||
})}
|
||||
</Menu>
|
||||
</span>
|
||||
);
|
||||
|
||||
const handleClickChangeOrg = (orgId) => {
|
||||
// Don't really care about the logout
|
||||
//name: org.name,
|
||||
@@ -689,7 +426,6 @@ const Header = (props) => {
|
||||
</MenuItem>
|
||||
</Link>
|
||||
|
||||
{/*notificationMenu*/}
|
||||
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
|
||||
<Link to="/docs" style={hrefStyle}>
|
||||
<MenuItem
|
||||
|
||||
@@ -977,7 +977,11 @@ const CodeEditor = (props) => {
|
||||
}}
|
||||
PaperComponent={PaperComponent}
|
||||
PaperProps={{
|
||||
onClick: () => setActiveDialog("codeeditor"),
|
||||
onClick: () => {
|
||||
if (setActiveDialog !== undefined) {
|
||||
setActiveDialog("codeeditor")
|
||||
}
|
||||
},
|
||||
style: {
|
||||
// zIndex: 12501,
|
||||
pointerEvents: "auto",
|
||||
|
||||
Reference in New Issue
Block a user