Bunch of fixes for MSSP feature buildout

This commit is contained in:
Frikky
2024-06-13 18:49:18 +02:00
parent 0455b59bd8
commit fe43b683b9
13 changed files with 2759 additions and 1372 deletions
+296 -163
View File
@@ -166,7 +166,9 @@ const Admin = (props) => {
//console.log("Selected: ", selectedOrganization)
const [appAuthenticationGroupModalOpen , setAppAuthenticationGroupModalOpen] = React.useState(false);
const [appsForAppAuthGroup, setAppsForAppAuthGroup] = React.useState([]);
const [appAuthenticationGroupId, setAppAuthenticationGroupId] = React.useState("");
const [appAuthenticationGroupName, setAppAuthenticationGroupName] = React.useState("");
const [appAuthenticationGroupEnvironment, setAppAuthenticationGroupEnvironment] = React.useState("");
const [appAuthenticationGroupDescription, setAppAuthenticationGroupDescription] = React.useState("");
const [appAuthenticationGroups, setAppAuthenticationGroups] = React.useState([]);
const [organizationFeatures, setOrganizationFeatures] = React.useState({});
@@ -431,23 +433,62 @@ const Admin = (props) => {
});
};
const createAppAuthenticationGroup = (name, description, appAuthIds) => {
const deleteAppAuthenticationGroup = (appAuthGroupId) => {
const url = `${globalUrl}/api/v1/authentication/group/${appAuthGroupId}`
fetch(url, {
method: "DELETE",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for deleting app auth group");
}
return response.json();
})
.then((responseJson) => {
if (responseJson.success === false) {
toast("Failed to delete app authentication group");
} else {
toast("App authentication group deleted")
getAppAuthenticationGroups()
}
})
.catch((error) => {
toast(error.toString())
})
}
const createAppAuthenticationGroup = (name, environment, description, appAuthIds) => {
// Makes list of ids into a full-on list of auth, but just with the ID
// The backend fills in the rest
console.log("INput auth: ", appAuthIds)
let app_auths = appAuthIds.map((appAuthId) => {
return { id: appAuthId };
})
fetch(globalUrl + "/api/v1/apps/authentication/group", {
var parsedAppGroup = {
label: name,
environment: environment,
description: description,
app_auths: app_auths
}
if (appAuthenticationGroupId !== undefined && appAuthenticationGroupId !== null && appAuthenticationGroupId !== "") {
parsedAppGroup.id = appAuthenticationGroupId
}
fetch(globalUrl + "/api/v1/authentication/group", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
body: JSON.stringify({
label: name,
description: description,
app_auths: app_auths
}),
body: JSON.stringify(parsedAppGroup),
})
.then((response) => {
if (response.status !== 200) {
@@ -457,8 +498,15 @@ const Admin = (props) => {
return response.json();
})
.then((responseJson) => {
// getAppAuthenticationGroups();
toast("App authentication group created");
if (responseJson.success === false) {
toast("Failed to create. Please try again, or contact support@shuffler.io")
} else {
// Close the modal
setAppAuthenticationGroupModalOpen(false)
toast("App authentication group created")
getAppAuthenticationGroups()
}
})
.catch((error) => {
toast(error.toString());
@@ -805,7 +853,7 @@ If you're interested, please let me know a time that works for you, or set up a
.then((responseJson) => {
setWebHooks(responseJson.webhooks || []); // Handling the case where the result is null or undefined
setAllSchedules(responseJson.schedules || []);
setPipelines(responseJson.pipelines || []);
// setPipelines(responseJson.pipelines || []);
})
.catch((error) => {
// toast(error.toString());
@@ -990,13 +1038,11 @@ If you're interested, please let me know a time that works for you, or set up a
}
const data = {
command: pipeline.command,
name: pipeline.name,
type: state,
environment: pipeline.environment,
workflow_id: pipeline.workflow_id,
trigger_id: pipeline.trigger_id,
start_node: pipeline.start_node,
};
if (state === "start") toast("starting the pipeline");
@@ -1027,7 +1073,6 @@ If you're interested, please let me know a time that works for you, or set up a
if (state === "start") toast("Successfully created pipeline");
else toast("Sucessfully stopped the pipeline");
}
setTimeout(handleGetAllTriggers, 1000);
})
.catch((error) => {
//toast(error.toString());
@@ -2093,10 +2138,10 @@ If you're interested, please let me know a time that works for you, or set up a
};
const getAppAuthenticationGroups = () => {
console.log("DEBUG: Skipping app auth group loading")
return
//console.log("DEBUG: Skipping app auth group loading")
//return
fetch(globalUrl + "/api/v1/apps/authentication/group", {
fetch(globalUrl + "/api/v1/authentication/group", {
method: "GET",
headers: {
"Content-Type": "application/json",
@@ -4941,7 +4986,7 @@ If you're interested, please let me know a time that works for you, or set up a
<ListItemText>
<Button
style={{ marginLeft: "140px" }}
style={{ marginLeft: "18%" }}
variant={
webhook.status === "running" ? "contained" : "outlined"
}
@@ -4963,10 +5008,10 @@ If you're interested, please let me know a time that works for you, or set up a
</List>
)}
<div style={{ marginTop: 20, marginBottom: 20 }}>
{/* <div style={{ marginTop: 20, marginBottom: 20 }}>
<h2 style={{ display: "inline" }}>Tenzir Pipelines</h2>
<span style={{ marginLeft: 25 }}>
Controls the Tenzir pipeline operations.{" "}
Controls a pipeline to run things.{" "}
<a
target="_blank"
rel="noopener noreferrer"
@@ -5013,7 +5058,7 @@ If you're interested, please let me know a time that works for you, or set up a
primary="Workflow"
style={{ maxWidth: 315, minWidth: 315 }}
/>
<ListItemText primary="Actions" style={{ marginLeft: '120px' }} />
<ListItemText primary="Actions" />
</ListItem>
{pipelines.map((pipeline, index) => {
var bgColor = "#27292d";
@@ -5066,7 +5111,7 @@ If you're interested, please let me know a time that works for you, or set up a
);
})}
</List>
)}
)}*/}
</div>
) : null;
@@ -5170,31 +5215,63 @@ If you're interested, please let me know a time that works for you, or set up a
const handleAppAuthGroupCheckbox = (data) => {
let appOrginal = data.app
if (appsForAppAuthGroup.includes(appOrginal.id)) {
return;
}
//let groupApp = data.app.id
var newappauth = appsForAppAuthGroup
if (appsForAppAuthGroup.includes(data.app.id)) {
newappauth = newappauth.filter((item) => item !== data.app.id)
}
setAppsForAppAuthGroup([...appsForAppAuthGroup, data.id]);
console.log("Apps for app auth group: ", appsForAppAuthGroup);
};
if (appsForAppAuthGroup.includes(data.id)) {
// Remove app from app auth group
newappauth = newappauth.filter((item) => item !== data.id)
setAppsForAppAuthGroup(newappauth)
return
}
for (var i = 0; i < authentication.length; i++) {
if (authentication[i].id === data.id) {
continue
}
if (!appsForAppAuthGroup.includes(authentication[i].id)) {
continue
}
if (authentication[i].app.id === data.app.id) {
// Remove app from app auth group
newappauth = newappauth.filter((item) => item !== authentication[i].id)
toast(`App ${data.app.name} is already in this group`)
}
}
setAppsForAppAuthGroup(newappauth.concat(data.id))
}
const authenticationView =
curTab === 2 ? (
<>
<div>
{/* (appAuthenticationGroupModalOpen : { */}
{appAuthenticationGroupModalOpen && (
<Dialog
open={appAuthenticationGroupModalOpen}
onClose={() => {
setAppAuthenticationGroupModalOpen(false);
setAppAuthenticationGroupId("")
setAppAuthenticationGroupName("")
setAppAuthenticationGroupEnvironment("")
setAppAuthenticationGroupDescription("")
setAppsForAppAuthGroup([])
}}
PaperProps={{
style: {
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: "1200px",
minWidth: "1000px",
minHeight: "320px",
padding: 25,
paddingLeft: 50,
},
}}
>
@@ -5202,106 +5279,130 @@ If you're interested, please let me know a time that works for you, or set up a
<span style={{ color: "white" }}>App Authentication Groups</span>
</DialogTitle>
<DialogContent>
<div>
<TextField
color="primary"
style={{ backgroundColor: theme.palette.inputColor }}
autoFocus
InputProps={{
style: {
height: "50px",
color: "white",
fontSize: "1em",
},
}}
required
fullWidth={true}
placeholder="Name"
id="namefield"
margin="normal"
variant="outlined"
onChange={(event) => {
setAppAuthenticationGroupName(event.target.value);
}}
/>
<DialogContent style={{marginLeft: 0, paddingLeft: 0, }}>
<div style={{display: "flex", position: "sticky", top: 0, zIndex: 1, backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette.borderRadius, padding: 20, marginBottom: 10, }}>
<div style={{marginRight: 50, minWidth: 250, }}>
<Typography style={{marginTop: 10, }}>
Name
</Typography>
<TextField
color="primary"
label="Name"
style={{ backgroundColor: theme.palette.inputColor }}
autoFocus
InputProps={{
style: {
height: "50px",
color: "white",
fontSize: "1em",
},
}}
required
fullWidth={true}
placeholder="Name"
id="namefield"
margin="normal"
variant="outlined"
defaultValue={appAuthenticationGroupName}
onChange={(event) => {
setAppAuthenticationGroupName(event.target.value);
}}
/>
</div>
<div style={{marginRight: 50, }}>
<Typography style={{marginTop: 10, marginBottom: 10}}>
Evironment
</Typography>
{environments !== undefined && environments !== null && environments.length > 0 ?
<Select
defaultValue={appAuthenticationGroupEnvironment === "" ? environments[0].Name : appAuthenticationGroupEnvironment}
onChange={(e) => {
setAppAuthenticationGroupEnvironment(e.target.value);
}}
>
{environments.map((env, index) => {
return (
<MenuItem key={index} value={env.Name}>
{env.Name}
</MenuItem>
)
})}
</Select>
:
<Typography>
Environments failed to load. Please try again
</Typography>
}
</div>
<div>
<TextField
color="primary"
style={{ backgroundColor: theme.palette.inputColor }}
autoFocus
InputProps={{
style: {
height: "50px",
color: "white",
fontSize: "1em",
},
}}
required
fullWidth={true}
placeholder="Description"
id="descriptionfield"
margin="normal"
variant="outlined"
onChange={(event) => {
setAppAuthenticationGroupDescription(event.target.value);
}}
/>
</div>
<div>
{/* Show a check box list of all app authentications to add to the auth group */}
<div>
{authentication.map((data, index) => (
<div key={index}>
<FormControlLabel
control={
<Tooltip
title={data.app.name}
>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px', marginLeft: '5px' }}>
<img
src={data.app.large_image ? data.app.large_image : '/images/no_image.png'}
alt=""
style={{ width: '50px', height: '50px', marginRight: '10px' }}
/>
<Checkbox
checked={data.checked}
onChange={(event) => {
handleAppAuthGroupCheckbox(data)
}}
name={data.label}
disabled={data.app.id in appsForAppAuthGroup}
/>
</div>
</Tooltip>
}
label={data.label}
/>
</div>
))}
</div>
</div>
<div>
<div style={{marginTop: 65, }}>
<Button
style={{}}
disabled={appAuthenticationGroupName === "" || appAuthenticationGroupEnvironment === "" || appsForAppAuthGroup.length === 0}
variant="contained"
color="primary"
onClick={() => {
createAppAuthenticationGroup(
appAuthenticationGroupName,
appAuthenticationGroupEnvironment,
appAuthenticationGroupDescription,
appsForAppAuthGroup
appsForAppAuthGroup,
);
}}
>
Create
Set Group
</Button>
</div>
</div>
<Divider style={{marginTop: 10, marginBottom: 10, }}/>
<div style={{marginLeft: 25, }}>
{/* Show a check box list of all app authentications to add to the auth group */}
<div>
{authentication.map((data, index) => {
var checked = data.checked
if (checked === undefined || checked === null) {
checked = false
}
if (appsForAppAuthGroup.includes(data.id)) {
checked = true
}
return (
<div key={index}>
<FormControlLabel
control={
<Tooltip
title={data.app.name}
placement="left"
>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px', marginLeft: '5px', }}>
<img
src={data.app.large_image ? data.app.large_image : '/images/no_image.png'}
alt=""
style={{ borderRadius: theme.palette.borderRadius, width: 50, height: 50, marginRight: 10 }}
/>
<Checkbox
checked={checked}
onChange={(event) => {
handleAppAuthGroupCheckbox(data)
}}
name={data.label}
disabled={data.app.id in appsForAppAuthGroup}
/>
</div>
</Tooltip>
}
label={data.label}
/>
</div>
)
})}
</div>
</div>
</DialogContent>
</Dialog>
)}
@@ -5311,7 +5412,7 @@ If you're interested, please let me know a time that works for you, or set up a
<div style={{ marginTop: 20, marginBottom: 20 }}>
<h2 style={{ display: "inline" }}>App Authentication</h2>
<span style={{ marginLeft: 25 }}>
Control the authentication options for individual apps.
Control the authentication options for individual apps. App Groups are farther down on this page.
</span>
&nbsp;
<a
@@ -5587,10 +5688,18 @@ If you're interested, please let me know a time that works for you, or set up a
</List>
</div>
{/* <div>
<Divider
style={{
marginTop: 20,
marginBottom: 20,
backgroundColor: theme.palette.inputColor,
}}
/>
<div style={{marginTop: 50, }}>
<div style={{ marginTop: 20, marginBottom: 20 }}>
<h2 style={{ display: "inline" }}>App Authentication Groups</h2>
<span style={{ marginLeft: 25 }}>
<h2 style={{ }}>App Authentication Groups</h2>
<span style={{ marginLeft: 0 }}>
Groups of authentication options for subflows.{" "}
<a
target="_blank"
@@ -5602,29 +5711,39 @@ If you're interested, please let me know a time that works for you, or set up a
</a>
</span>
<Divider
style={{
marginTop: 20,
marginBottom: 20,
backgroundColor: theme.palette.inputColor,
<br />
<Button
style={{ marginTop: 20 }}
variant="contained"
color="primary"
onClick={() => {
if (environments !== undefined && environments !== null && environments.length > 0) {
setAppAuthenticationGroupEnvironment(environments[0].Name)
}
setAppAuthenticationGroupModalOpen(true)
}}
/>
<List>
>
Add Group
</Button>
<List style={{marginTop: 25, }}>
<ListItem>
<ListItemText
primary="Label"
style={{ minWidth: 250, maxWidth: 250}}
/>
<ListItemText
primary="Environment"
style={{ minWidth: 150, maxWidth: 150 }}
/>
<ListItemText
primary="Description"
primary="App Auth"
style={{ minWidth: 250, maxWidth: 250 }}
/>
<ListItemText
primary="Apps"
style={{ minWidth: 250, maxWidth: 250 }}
/>
<ListItemText
primary="CreatedAt"
primary="Created At"
style={{ minWidth: 150, maxWidth: 150 }}
/>
<ListItemText
@@ -5638,31 +5757,49 @@ If you're interested, please let me know a time that works for you, or set up a
if (index % 2 === 0) {
bgColor = "#1f2023";
}
if (data.app_auths === undefined || data.app_auths === null) {
data.app_auths = []
}
return (
<ListItem key={index} style={{ backgroundColor: bgColor }}>
<ListItemText
primary={data.label}
style={{ minWidth: 150, maxWidth: 150 }}
style={{ minWidth: 250, maxWidth: 250, }}
/>
<ListItemText
primary={data.description}
style={{ minWidth: 250, maxWidth: 250 }}
primary={data.environment}
style={{ minWidth: 150, maxWidth: 150, }}
/>
<ListItemText
primary={
<div style={{ display: 'flex' }}>
{data.app_auths.map((appAuth, index) => (
<Tooltip
title={appAuth.app.name}
>
<img
key={index}
src={appAuth.app.large_image}
alt={appAuth.app.name}
style={{ width: '24px', height: '24px', marginRight: '5px' }}
/>
</Tooltip>
))}
{data.app_auths.map((appAuth, index) => {
if (appAuth.app.large_image === undefined || appAuth.app.large_image === null || appAuth.app.large_image === "") {
const foundImage = authentication.find((auth) => auth.app.id === appAuth.app.id)
if (foundImage !== undefined) {
appAuth.app.large_image = foundImage.app.large_image
appAuth.app.name = foundImage.app.name
}
}
const tooltip = `${appAuth.app.name.replaceAll("_", " ")} (authname: ${appAuth.label})`
return (
<Tooltip
title={tooltip}
>
<img
key={index}
src={appAuth.app.large_image}
alt={appAuth.app.name}
style={{ width: 30, height: 30, marginRight: 5 }}
/>
</Tooltip>
)
})}
</div>
}
style={{ minWidth: 250, maxWidth: 250 }}
@@ -5676,16 +5813,22 @@ If you're interested, please let me know a time that works for you, or set up a
<div style={{ display: 'flex' }}>
<IconButton
onClick={() => {
setAppAuthenticationGroupId(data.id)
setAppAuthenticationGroupName(data.label)
setAppAuthenticationGroupDescription(data.description)
setAppsForAppAuthGroup(data.app_auths.map((appAuth) => appAuth.id))
setAppAuthenticationGroupEnvironment(data.environment)
setAppAuthenticationGroupModalOpen(true)
}}
disabled={true}
>
<EditIcon />
</IconButton>
<IconButton
onClick={() => {
// deleteAppAuthenticationGroup(data);
deleteAppAuthenticationGroup(data.id)
}}
disabled={true}
>
<DeleteIcon />
</IconButton>
@@ -5700,20 +5843,10 @@ If you're interested, please let me know a time that works for you, or set up a
)}
</List>
<Button
style={{ marginLeft: 10 }}
variant="contained"
color="primary"
onClick={() => {
setAppAuthenticationGroupModalOpen(true);
}}
>
Add Group
</Button>
</div>
</div> */}
</>
</div>
</div>
) : null;
const getLogs = async (ip, userId) => {