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

Minor fixes for workflow and usecase management UIs

Browse Source
This commit is contained in:
frikky
2023-02-16 22:44:20 +01:00
parent 808c3befbf
commit f604068619
6 changed files with 67 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ConfigureWorkflow.jsx
+1
View File
@@ -55,6 +55,7 @@ const ConfigureWorkflow = (props) => {
workflowExecutions,
getWorkflowExecution,
} = props;
const [requiredActions, setRequiredActions] = React.useState([]);
const [requiredVariables, setRequiredVariables] = React.useState([]);
const [requiredTriggers, setRequiredTriggers] = React.useState([]);
frontend/src/components/ParsedAction.jsx
-2
View File
@@ -194,13 +194,11 @@ const ParsedAction = (props) => {
if (paramcheck.id === "TOGGLED"){
setHideBody(false)
setActivateHidingBodyButton(false)
console.log("TOGGLED BODY!")
} else {
setHideBody(true)
if (paramcheck.id === "UNTOGGLED") {
setActivateHidingBodyButton(false)
console.log("UNTOGGLED!")
}
}
}
frontend/src/components/Searchfield.jsx
+1 -1
View File
@@ -625,7 +625,7 @@ const SearchField = props => {
const CustomDocHits = connectHits(DocHits)
return (
<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", zIndex: 10050,}}>
<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", }}>
<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
console.log("CLICKED")
}}>
frontend/src/views/Admin.jsx
+6 -2
View File
@@ -811,7 +811,7 @@ const Admin = (props) => {
})
.then((responseJson) => {
if (responseJson["success"] === false) {
alert.error("Failed getting your org: ", responseJson.readon);
alert.error("Failed getting your org. If this persists, please contact support.");
} else {
if (
responseJson.sync_features === undefined ||
@@ -883,17 +883,21 @@ const Admin = (props) => {
response.json().then((responseJson) => {
if (responseJson["success"] === false) {
setLoginInfo("Error: " + responseJson.reason);
alert.error("Failed to send email (2). Please try again and contact support if this persists.")
} else {
setLoginInfo("");
setModalOpen(false);
setTimeout(() => {
getUsers();
}, 1000);
alert.info("Invite sent! They will show up in the list when they have accepted the invite.")
}
})
)
.catch((error) => {
console.log("Error in userdata: ", error);
alert.error("Failed to send email. Please try again and contact support if this persists.")
});
};
@@ -3267,7 +3271,7 @@ const Admin = (props) => {
<DialogContent>
{curTab === 1 && isCloud ? (
<Typography variant="body1" style={{ marginBottom: 10 }}>
We'll send an email to invite them to your organization.
We will send an email to invite them to your organization.
</Typography>
) : curTab === 6 ? (
<Typography variant="body1" style={{ marginBottom: 10 }}>
frontend/src/views/AngularWorkflow.jsx
+31 -29
View File
@@ -1737,7 +1737,7 @@ const AngularWorkflow = (defaultprops) => {
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for apps :O!");
//console.log("Status not 200 for apps :O!");
return;
}
@@ -1762,7 +1762,8 @@ const AngularWorkflow = (defaultprops) => {
}
})
.catch((error) => {
alert.error(error.toString());
//alert.error(error.toString());
console.log("Error loading files: ", error)
});
};
@@ -2529,7 +2530,6 @@ const AngularWorkflow = (defaultprops) => {
// https://stackoverflow.com/questions/16677856/cy-onselect-callback-only-once
// onNodeClick
const onNodeSelect = (event, newAppAuth) => {
console.log("App auth in select: ", newAppAuth)
// Forces all states to update at the same time,
// Otherwise everything is SUPER slow
ReactDOM.unstable_batchedUpdates(() => {
@@ -2800,7 +2800,7 @@ const AngularWorkflow = (defaultprops) => {
}
const tmpAuth = JSON.parse(JSON.stringify(newAppAuth));
console.log("FOUND AUTH OPTIONS: ", tmpAuth)
//console.log("FOUND AUTH OPTIONS: ", tmpAuth)
const curappName = curapp.name.toLowerCase()
for (let tmpAuthKey in tmpAuth) {
@@ -2836,8 +2836,6 @@ const AngularWorkflow = (defaultprops) => {
}
}
console.log("Options: ", authenticationOptions)
curaction.authentication = authenticationOptions;
if (
curaction.selectedAuthentication === null ||
@@ -5958,13 +5956,11 @@ const AngularWorkflow = (defaultprops) => {
//const activateApp = (appid) => {
if (newAppData.activated === false) {
console.log("SHOULD ACTIVATE!")
activateApp(newAppData.app_id, false)
}
// AUTHENTICATION
if (app.authentication !== undefined && app.authentication !== null && app.authentication.required === true) {
console.log("App auth is required!")
// Setup auth here :)
const authenticationOptions = [];
@@ -6233,7 +6229,8 @@ const AngularWorkflow = (defaultprops) => {
app.large_image = theme.palette.defaultImage
}
const image = app.large_image;
const image = app.large_image !== undefined && app.large_image !== null && app.large_image !== "" ? app.large_image : theme.palette.defaultImage
const newAppStyle = JSON.parse(JSON.stringify(paperAppStyle));
const pixelSize = !hover ? "2px" : "4px";
//newAppStyle.borderLeft = app.is_valid && app.actions !== null && app.actions !== undefined && app.actions.length > 0 && !(app.activated && app.generated)
@@ -6328,7 +6325,7 @@ const AngularWorkflow = (defaultprops) => {
name: app.actions[0].name,
parameters: parameters,
isStartNode: false,
large_image: app.large_image,
large_image: image,
run_magic_output: false,
authentication: [],
execution_variable: undefined,
@@ -7653,7 +7650,7 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ display: "flex" }}>
<Tooltip
color="primary"
title={conditionValue.configuration ? "Negated" : "Default"}
title={conditionValue.configuration ? "Opposite" : "Default"}
placement="top"
>
<span
@@ -13494,34 +13491,39 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ display: "flex", marginTop: 10, marginBottom: 30 }}>
<div>
{executionData.status !== undefined &&
executionData.status !== "ABORTED" &&
executionData.status !== "FINISHED" &&
executionData.status !== "FAILURE" &&
executionData.status !== "WAITING" &&
!(
executionData.results === undefined ||
executionData.results === null ||
(executionData.results.length === 0 && // probably ment to be around the or's
executionData.status === "EXECUTING")
) ? (
executionData.status !== "ABORTED" &&
executionData.status !== "FINISHED" &&
executionData.status !== "FAILURE" &&
executionData.status !== "WAITING" &&
!(executionData.results === undefined || executionData.results === null || (executionData.results.length === 0 && executionData.status === "EXECUTING")) ? (
<div style={{ display: "flex" }}>
<CircularProgress style={{ height: 45, width: 45, marginLeft: 20, marginRight: 20, }} />
<CircularProgress style={{ height: 45, width: 45, marginLeft: 20, marginRight: 20, }} onClick={() => {
console.log(environments, defaultEnvironmentIndex, nonskippedResults)
}} />
{!isCloud && environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 ?
{environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
<Typography variant="body2" color="textSecondary" style={{}}>
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a>
</Typography>
: null}
</div>
) : null}
</div>
</div>
{executionData.results === undefined ||
{
executionData.results === undefined ||
executionData.results === null ||
(executionData.results.length === 0 &&
executionData.status === "EXECUTING") ? (
<CircularProgress />
(executionData.results.length === 0 && executionData.status === "EXECUTING") ? (
<div style={{ display: "flex" }}>
<CircularProgress style={{ height: 45, width: 45, marginLeft: 20, marginRight: 20, }} />
{environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
<Typography variant="body2" color="textSecondary" style={{}}>
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? <a href="/admin?tab=environments" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: <a href="mailto:support@shuffler.io" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>support@shuffler.io</a>
</Typography>
:
null}
</div>
) : (
executionData.results.map((data, index) => {
if (executionData.results.length !== 1 && !showSkippedActions && (data.status === "SKIPPED")) {
frontend/src/views/Workflows.jsx
+28 -25
View File
@@ -560,6 +560,9 @@ const Workflows = (props) => {
const [firstLoad, setFirstLoad] = React.useState(true);
const [showMoreClicked, setShowMoreClicked] = React.useState(false);
const [usecases, setUsecases] = React.useState([]);
const [allUsecases, setAllUsecases] = React.useState({
"success": false,
});
const [appFramework, setAppFramework] = React.useState({});
const [drawerOpen, setDrawerOpen] = React.useState(false)
const [videoViewOpen, setVideoViewOpen] = React.useState(false)
@@ -615,6 +618,7 @@ const Workflows = (props) => {
console.log("Using filters: ", filters)
if (filters.length === 0) {
setFilteredWorkflows(workflows);
handleKeysetting(allUsecases, workflows)
return;
}
@@ -684,7 +688,10 @@ const Workflows = (props) => {
}
}
console.log("Changing workflow filter, and finding new usecase mappings!")
if (newWorkflows.length !== workflows.length) {
handleKeysetting(allUsecases, newWorkflows)
setFilteredWorkflows(newWorkflows);
}
};
@@ -715,7 +722,7 @@ const Workflows = (props) => {
var newfilters = filters;
if (index < 0) {
console.log("Can't handle index: ", index);
console.log("Can't handle index (remove): ", index);
return;
}
@@ -1037,9 +1044,6 @@ const Workflows = (props) => {
newarray.push(wf)
}
// Workflows are set in here
fetchUsecases(newarray)
var setProdFilter = false
@@ -1068,22 +1072,22 @@ const Workflows = (props) => {
if (setProdFilter === true) {
setFilters(["status:production"]);
const newWorkflows = newarray.filter(workflow => workflow.status === "production")
console.log(newWorkflows)
if (newWorkflows !== undefined && newWorkflows !== null) {
setFilteredWorkflows(newWorkflows);
} else {
setFilteredWorkflows(newarray);
}
setFilters(["status:production"]);
} else {
setFilteredWorkflows(newarray);
}
// Ensures the zooming happens only once per load
setTimeout(() => {
fetchUsecases(newarray)
setFirstLoad(false)
}, 100)
} else {
@@ -1100,9 +1104,6 @@ const Workflows = (props) => {
};
const handleKeysetting = (categorydata, workflows) => {
//workflows[0].category = ["detect"]
//workflows[0].usecase_ids = ["Correlate tickets"]
if (workflows !== undefined && workflows !== null) {
var newcategories = []
for (var key in categorydata) {
@@ -1145,8 +1146,6 @@ const Workflows = (props) => {
} else {
setUsecases(categorydata)
}
setWorkflows(workflows);
setWorkflowDone(true);
}
const fetchUsecases = (workflows) => {
@@ -1166,12 +1165,13 @@ const Workflows = (props) => {
return response.json();
})
.then((responseJson) => {
setWorkflows(workflows);
setWorkflowDone(true);
if (responseJson.success !== false) {
setAllUsecases(responseJson);
handleKeysetting(responseJson, workflows)
} else {
setWorkflows(workflows);
setWorkflowDone(true);
}
}
})
.catch((error) => {
//alert.error("ERROR: " + error.toString());
@@ -2764,7 +2764,9 @@ const Workflows = (props) => {
return (
<span key={index}>
<ListSubheader
style={{color: usecase.color}}
style={{
color: usecase.color
}}
>
{usecase.name}
</ListSubheader>
@@ -3285,12 +3287,15 @@ const Workflows = (props) => {
<div style={{ display: "flex", }}>
{usecases.map((usecase, index) => {
//console.log(usecase)
const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length/usecase.list.length*100) : 0
return (
<Paper
key={usecase.name}
style={{
flex: 1,
backgroundColor: filters.includes(usecase.name.toLowerCase()) ? usecase.color : theme.palette.surfaceColor,
backgroundImage: `linear-gradient(to right, ${usecase.color}, ${usecase.color} ${percentDone}%, transparent ${percentDone}%, transparent 100%)`,
backgroundColor: filters.includes(usecase.name.toLowerCase()) ? null : theme.palette.surfaceColor,
borderRadius: theme.palette.borderRadius,
marginRight: index === usecases.length-1 ? 0 : 10,
cursor: "pointer",
@@ -3299,25 +3304,23 @@ const Workflows = (props) => {
padding: 10,
}}
onClick={() => {
console.log("Clicked!")
return
if (filters.includes(usecase.name.toLowerCase())) {
console.log("Filters: ", filters, usecase.name.toLowerCase())
if (!filters.includes(usecase.name.toLowerCase())) {
addFilter(usecase.name)
} else {
const foundIndex = filters.indexOf(usecase.name.toLowerCase())
removeFilter(foundIndex)
removeFilter(filters.indexOf(usecase.name.toLowerCase()))
}
}}
>
<a href={`/usecases?selected=${usecase.name}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", display: "flex", }}>
<span style={{ textDecoration: "none", display: "flex", }}>
<Typography variant="body1" color="textPrimary" style={{flex: 4, }}>
{usecase.name}
</Typography>
<Typography variant="body2" color="textSecondary" style={{flex: 1, marginTop: 5,}}>
{usecase.matches.length}/{usecase.list.length}
</Typography>
</a>
</span>
</Paper>
)
})}