From f6040686191f7bf4c1894aa61046815c33293054 Mon Sep 17 00:00:00 2001 From: frikky Date: Thu, 16 Feb 2023 22:44:20 +0100 Subject: [PATCH] Minor fixes for workflow and usecase management UIs --- frontend/src/components/ConfigureWorkflow.jsx | 1 + frontend/src/components/ParsedAction.jsx | 2 - frontend/src/components/Searchfield.jsx | 2 +- frontend/src/views/Admin.jsx | 8 ++- frontend/src/views/AngularWorkflow.jsx | 60 ++++++++++--------- frontend/src/views/Workflows.jsx | 53 ++++++++-------- 6 files changed, 67 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/ConfigureWorkflow.jsx b/frontend/src/components/ConfigureWorkflow.jsx index b032befe..83f21f4d 100644 --- a/frontend/src/components/ConfigureWorkflow.jsx +++ b/frontend/src/components/ConfigureWorkflow.jsx @@ -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([]); diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 982375da..971c224d 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -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!") } } } diff --git a/frontend/src/components/Searchfield.jsx b/frontend/src/components/Searchfield.jsx index f1e3aa77..1ac76c36 100644 --- a/frontend/src/components/Searchfield.jsx +++ b/frontend/src/components/Searchfield.jsx @@ -625,7 +625,7 @@ const SearchField = props => { const CustomDocHits = connectHits(DocHits) return ( -
+
{ console.log("CLICKED") }}> diff --git a/frontend/src/views/Admin.jsx b/frontend/src/views/Admin.jsx index 59cd69d8..bee637b8 100644 --- a/frontend/src/views/Admin.jsx +++ b/frontend/src/views/Admin.jsx @@ -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) => { {curTab === 1 && isCloud ? ( - We'll send an email to invite them to your organization. + We will send an email to invite them to your organization. ) : curTab === 6 ? ( diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index bc2e87bf..7b80d767 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -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) => {
{
{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")) ? (
- + { + 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" ? - No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? Learn more + No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? Learn more. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: support@shuffler.io : null}
) : null}
- {executionData.results === undefined || + { + executionData.results === undefined || executionData.results === null || - (executionData.results.length === 0 && - executionData.status === "EXECUTING") ? ( - + (executionData.results.length === 0 && executionData.status === "EXECUTING") ? ( + +
+ + {environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ? + + No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? Learn more. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: support@shuffler.io + + : + null} +
) : ( executionData.results.map((data, index) => { if (executionData.results.length !== 1 && !showSkippedActions && (data.status === "SKIPPED")) { diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx index 5de0e799..336f7200 100644 --- a/frontend/src/views/Workflows.jsx +++ b/frontend/src/views/Workflows.jsx @@ -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 ( {usecase.name} @@ -3285,12 +3287,15 @@ const Workflows = (props) => {
{usecases.map((usecase, index) => { //console.log(usecase) + const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length/usecase.list.length*100) : 0 + return ( { 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())) } }} > - + {usecase.name} {usecase.matches.length}/{usecase.list.length} - + ) })}