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

Loads of frontend fixes related to React & MUI

Browse Source
This commit is contained in:
Frikky
2023-09-19 14:37:41 +02:00
parent 45a0583728
commit c1c34ff72a
17 changed files with 1961 additions and 971 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppGrid.jsx
+17 -13
View File
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
import theme from '../theme.jsx';
import ReactGA from 'react-ga4';
import {Link} from 'react-router-dom';
import { removeQuery } from '../components/ScrollToTop.jsx';
import {
Search as SearchIcon,
@@ -89,21 +90,24 @@ const AppGrid = props => {
}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
}
var defaultSearch = ""
//useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
defaultSearch = foundQuery
}
}, [])
}
//}, [])
return (
<form noValidate action="" role="search">
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -121,10 +125,12 @@ const AppGrid = props => {
autoComplete='off'
type="search"
color="primary"
defaultValue={currentRefinement}
placeholder="Find Apps..."
id="shuffle_search_field"
onChange={(event) => {
// Remove "q" from URL
removeQuery("q")
refine(event.currentTarget.value)
}}
limit={5}
@@ -151,8 +157,6 @@ const AppGrid = props => {
// setInnerHits(hits)
//}
console.log("In appgrid")
return (
<Grid container spacing={2}>
{hits.map((data, index) => {
frontend/src/components/CreatorGrid.jsx
+12 -10
View File
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
import ReactGA from 'react-ga4';
import {Link} from 'react-router-dom';
import theme from '../theme.jsx';
import { removeQuery } from '../components/ScrollToTop.jsx';
import {
SkipNext as SkipNextIcon,
@@ -97,20 +98,21 @@ const CreatorGrid = props => {
// value={currentRefinement}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
refine(foundQuery)
}
var defaultSearch = ""
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
refine(foundQuery)
defaultSearch = foundQuery
}
}, [])
}
return (
<form noValidate action="" role="search">
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -128,10 +130,10 @@ const CreatorGrid = props => {
autoComplete='off'
type="search"
color="primary"
value={currentRefinement}
placeholder="Find Creators..."
id="shuffle_search_field"
onChange={(event) => {
removeQuery("q")
refine(event.currentTarget.value)
}}
/>
frontend/src/components/DocsGrid.jsx
+13 -11
View File
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from 'react';
import theme from '../theme.jsx';
import ReactGA from 'react-ga4';
import {Link} from 'react-router-dom';
import { removeQuery } from '../components/ScrollToTop.jsx';
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
import aa from 'search-insights'
@@ -84,21 +85,22 @@ const DocsGrid = props => {
}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
}
var defaultSearch = ""
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
defaultSearch = foundQuery
}
}, [])
}
return (
<form noValidate action="" role="search">
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -116,10 +118,10 @@ const DocsGrid = props => {
autoComplete='off'
type="search"
color="primary"
defaultValue={currentRefinement}
placeholder="Search our Documentation..."
id="shuffle_search_field"
onChange={(event) => {
removeQuery("q")
refine(event.currentTarget.value)
}}
limit={5}
frontend/src/components/Header.jsx
+1 -1
View File
@@ -521,7 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
}
// Handle top bar or something
const defaultTop = 7
const defaultTop = 0
const loginTextBrowser = !isLoggedIn ?
<div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
<div style={{display: "flex", flex: 1, }}>
frontend/src/components/Oauth2Auth.jsx
+3 -22
View File
@@ -218,7 +218,7 @@ const AuthenticationOauth2 = (props) => {
"31cb4c84-658e-43d5-ae84-22c9142e967a",
"",
"https://graph.microsoft.com",
["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access"],
["ChannelMessage.Edit", "ChannelMessage.Read.All", "ChannelMessage.Send", "Chat.Create", "Chat.ReadWrite", "Chat.Read", "offline_access", "Team.ReadBasic.All"],
admin_consent,
)
} else if (selectedApp.name.toLowerCase().includes("todoist")) {
@@ -607,7 +607,7 @@ const AuthenticationOauth2 = (props) => {
<div>
<DialogTitle>
<div style={{ color: "white" }}>
Authentication for {selectedApp.name}
Authenticate {selectedApp.name.replaceAll("_", " ")}
</div>
</DialogTitle>
<DialogContent>
@@ -674,11 +674,6 @@ const AuthenticationOauth2 = (props) => {
style={{backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius,}}
InputProps={{
style:{
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
},
}}
fullWidth
@@ -763,11 +758,6 @@ const AuthenticationOauth2 = (props) => {
}}
InputProps={{
style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
height: 50,
fontSize: "1em",
},
}}
fullWidth
@@ -804,11 +794,6 @@ const AuthenticationOauth2 = (props) => {
}}
InputProps={{
style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
height: "50px",
},
}}
fullWidth
@@ -827,11 +812,6 @@ const AuthenticationOauth2 = (props) => {
}}
InputProps={{
style: {
color: "white",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
height: "50px",
},
}}
fullWidth
@@ -848,6 +828,7 @@ const AuthenticationOauth2 = (props) => {
Scopes
<Select
multiple
underline={false}
value={selectedScopes}
style={{
backgroundColor: theme.palette.inputColor,
frontend/src/components/ParsedAction.jsx
+124 -93
View File
@@ -11,7 +11,7 @@ import { NestedMenuItem } from "mui-nested-menu";
//import { useAlert
import {
ButtonGroup,
ButtonGroup,
Popper,
TextField,
TextareaAutosize,
@@ -376,66 +376,57 @@ const ParsedAction = (props) => {
const [menuPosition, setMenuPosition] = useState(null);
useEffect(() => {
if (
selectedActionParameters !== null &&
selectedActionParameters.length === 0
if (selectedActionParameters !== undefined && selectedActionParameters !== null && selectedActionParameters.length === 0
) {
if (
selectedAction.parameters !== null &&
selectedAction.parameters.length > 0
) {
if (selectedAction.parameters !== undefined && selectedAction.parameters !== null && selectedAction.parameters.length > 0) {
setSelectedActionParameters(selectedAction.parameters);
}
}
if (
(selectedVariableParameter === null ||
selectedVariableParameter === undefined) &&
workflow.workflow_variables !== null &&
workflow.workflow_variables.length > 0
) {
if ((selectedVariableParameter === null || selectedVariableParameter === undefined) && workflow.workflow_variables !== null && workflow.workflow_variables.length > 0) {
// FIXME - this is the bad thing
setSelectedVariableParameter(workflow.workflow_variables[0].name);
}
if (actionlist.length === 0) {
// FIXME: Have previous execution values in here
if (workflowExecutions.length > 0) {
for (let [key,keyval] in Object.entries(workflowExecutions)) {
if (
workflowExecutions[key].execution_argument === undefined ||
workflowExecutions[key].execution_argument === null ||
workflowExecutions[key].execution_argument.length === 0
) {
continue;
}
const valid = validateJson(workflowExecutions[key].execution_argument)
if (valid.valid) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: valid.result,
})
break
}
if (workflowExecutions.length > 0) {
for (let [key,keyval] in Object.entries(workflowExecutions)) {
if (
workflowExecutions[key].execution_argument === undefined ||
workflowExecutions[key].execution_argument === null ||
workflowExecutions[key].execution_argument.length === 0
) {
continue;
}
const valid = validateJson(workflowExecutions[key].execution_argument)
if (valid.valid) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: valid.result,
})
break
}
}
if (actionlist.length === 0) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: "",
})
}
}
if (actionlist.length === 0) {
actionlist.push({
type: "Execution Argument",
name: "Execution Argument",
value: "$exec",
highlight: "exec",
autocomplete: "exec",
example: "",
})
}
actionlist.push({
type: "Shuffle DB",
@@ -1313,26 +1304,26 @@ const ParsedAction = (props) => {
data.value = data.example;
}
// In case of data.example
if (data.value === undefined || data.value === null) {
// In case of data.example
if (data.value === undefined || data.value === null) {
data.value = ""
}
if (data.value.length === 0) {
if (data.name.toLowerCase() === "headers") {
console.log("Should show headers field instead with + and -!")
// Check if file ID exists
//
const fileFound = selectedActionParameters.find(param => param.name === "file_id")
if (fileFound === undefined || fileFound === null) {
data.value = data.example
} else {
// Purposely unset it if set by default when using files
data.value = ""
}
if (data.value.length === 0) {
if (data.name.toLowerCase() === "headers") {
console.log("Should show headers field instead with + and -!")
// Check if file ID exists
//
const fileFound = selectedActionParameters.find(param => param.name === "file_id")
if (fileFound === undefined || fileFound === null) {
data.value = data.example
} else {
// Purposely unset it if set by default when using files
data.value = ""
}
}
}
}
}
/*
if (data.name !== "queries" && data.name !== "key" && data.name !== "value" ) {
@@ -1391,7 +1382,7 @@ const ParsedAction = (props) => {
var hideBodyButton = "";
const hideBodyButtonValue = (
<div
key={data.name}
key={data.name}
style={{
marginTop: 25,
border: "1px solid rgba(255,255,255,0.7)",
@@ -1403,7 +1394,7 @@ const ParsedAction = (props) => {
>
<Tooltip
color="secondary"
title={"Automatically change body"}
title={"Show all body fields"}
placement="top"
>
<FormControlLabel
@@ -1424,15 +1415,15 @@ const ParsedAction = (props) => {
for (let paramkey in Object.entries(selectedActionParameters)) {
var currentItem = selectedActionParameters[paramkey];
if (currentItem.name === "ssl_verify") {
if (currentItem.name === "ssl_verify") {
}
}
if (currentItem.name === "body") {
// FIXME: Workaround for toggling, as actions don't have IDs.
// May screw up something in the future.
currentItem.id = tag
}
if (currentItem.name === "body") {
// FIXME: Workaround for toggling, as actions don't have IDs.
// May screw up something in the future.
currentItem.id = tag
}
if (currentItem.description === openApiFieldDesc) {
currentItem.field_active = !hideBody;
@@ -1458,8 +1449,8 @@ const ParsedAction = (props) => {
if (found === null) {
setActivateHidingBodyButton(true);
} else {
//console.log("In found: ", found, hideBody)
}
//console.log("In found: ", found, hideBody)
}
} else {
//console.log("SHOW BUTTON");
@@ -1485,6 +1476,17 @@ const ParsedAction = (props) => {
}
changed = true;
var isRequired = false
// Check if original field name is in the selectedAction.required_body_fields
if (selectedAction.required_body_fields !== undefined && selectedAction.required_body_fields !== null) {
for (let innerkey in selectedAction.required_body_fields) {
if (selectedAction.required_body_fields[innerkey] === tmpitem) {
isRequired = true
break
}
}
}
selectedActionParameters.push({
action_field: "",
configuration: false,
@@ -1494,7 +1496,7 @@ const ParsedAction = (props) => {
multiline: true,
name: tmpitem,
options: null,
required: false,
required: isRequired,
schema: { type: "string" },
skip_multicheck: false,
tags: null,
@@ -2443,8 +2445,8 @@ const ParsedAction = (props) => {
//console.log(data.configuration)
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
const hasAutocomplete = data.autocompleted === true
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
const hasAutocomplete = data.autocompleted === true
return (
<div key={data.name}>
{hideBodyButton}
@@ -2669,8 +2671,6 @@ const ParsedAction = (props) => {
const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
const [hover, setHover] = React.useState(false);
console.log("Extra desc: ", extraDescription)
return (
<Tooltip
color="secondary"
@@ -2893,15 +2893,35 @@ const ParsedAction = (props) => {
>
<Tooltip
color="primary"
title={"Find related workflows"}
title={"Find related tworkflows"}
placement="top"
>
<a href={`https://shuffler.io/search?tab=workflows&q=${selectedAction.app_name}`} target="_blank">
<SearchIcon style={{ color: "rgba(255,255,255,0.7)"}} />
</a>
<a href={`https://shuffler.io/search?tab=workflows&q=${selectedAction.app_name}`} target="_blank">
<SearchIcon style={{ color: "rgba(255,255,255,0.7)"}} />
</a>
</Tooltip>
</IconButton>
<IconButton
style={{
marginTop: "auto",
marginBottom: "auto",
height: 30,
marginLeft: 15,
paddingRight: 0,
}}
onClick={() => {
// aiSubmit(aiMsg, undefined, undefined, newSelectedAction)
aiSubmit("Fill based on previous values", undefined, undefined, selectedAction)
}}
>
<Tooltip
color="primary"
title={"Autocompletes fields. Uses NAME of the action and previous values' results."}
placement="top"
>
<AutoFixHighIcon style={{ color: "rgba(255,255,255,0.7)", height: 24, }} />
</Tooltip>
</IconButton>
</div>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
@@ -2992,14 +3012,21 @@ const ParsedAction = (props) => {
defaultValue={selectedAction.label}
onChange={selectedNameChange}
onBlur={(e) => {
const name = e.target.value;
// Copy the name value
const name = e.target.value
const parsedBaseLabel = "$"+baselabel.toLowerCase().replaceAll(" ", "_")
const newname = "$"+name.toLowerCase().replaceAll(" ", "_")
console.log("NAME: ", name)
// Check if it's the same as the current name in use
//if (name === selectedAction.label) {
// console.log("Returning from name thing")
// return
//}
// Change in actions, triggers & conditions
// Highlight the changes somehow with a glow?
//
// Should make it a function lol
if (workflow.branches !== undefined && workflow.branches !== null) {
for (let [key,keyval] in Object.entries(workflow.branches)) {
if (workflow.branches[key].conditions !== undefined && workflow.branches[key].conditions !== null) {
@@ -3117,7 +3144,13 @@ const ParsedAction = (props) => {
continue
}
for (let [subkey, subkeyval] in Object.entries(workflow.actions[key].parameters)) {
const params = workflow.actions[key].parameters
console.log(params)
if (params === null || params === undefined) {
continue
}
for (let [subkey, subkeyval] in Object.entries(params)) {
const param = workflow.actions[key].parameters[subkey];
if (!param.value.includes("$")) {
continue
@@ -3179,7 +3212,7 @@ const ParsedAction = (props) => {
console.log("DID NAME REPLACE ACTUALLY WORK? - may be missing it in certain triggers");
setWorkflow(workflow);
setUpdate(Math.random());
setUpdate(Math.random());
baselabel = name
}}
/>
@@ -3240,7 +3273,7 @@ const ParsedAction = (props) => {
}}
>
<AddIcon style={{ marginRight: 10 }} /> Authenticate{" "}
{selectedApp.name}
{selectedApp.name.replaceAll("_", " ")}
</Button>
</span>
</Tooltip>
@@ -3573,8 +3606,6 @@ const ParsedAction = (props) => {
data.label = "No name"
}
console.log("Name: ", newActionname)
newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");
var method = ""
frontend/src/components/Searchfield.jsx
+9 -1
View File
@@ -43,6 +43,7 @@ const SearchField = props => {
const node = useRef()
const [searchOpen, setSearchOpen] = useState(false)
const [oldPath, setOldPath] = useState("")
const [value, setValue] = useState("");
if (serverside === true) {
return null
@@ -67,7 +68,13 @@ const SearchField = props => {
//}, searchOpen)
const SearchBox = ({currentRefinement, refine, isSearchStalled, } ) => {
const keyPressHandler = (e) => {
// e.preventDefault();
if (e.which === 13) {
// alert("You pressed enter!");
navigate("/search?q=" + currentRefinement, { state: value, replace: true });
}
};
/*
endAdornment: (
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
@@ -108,6 +115,7 @@ const SearchField = props => {
color="primary"
placeholder="Find Public Apps, Workflows, Documentation..."
value={currentRefinement}
onKeyDown={keyPressHandler}
id="shuffle_search_field"
onClick={(event) => {
if (!searchOpen) {
frontend/src/components/ShuffleCodeEditor.jsx
+3
View File
@@ -205,6 +205,9 @@ const CodeEditor = (props) => {
setAvailableVariables(allVariables)
setMainVariables(tmpVariables)
console.log("Checking local codedata: ", localcodedata)
expectedOutput(localcodedata)
}, [])
const aiSubmit = (value, inputAction) => {
frontend/src/components/WorkflowGrid.jsx
+6
View File
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import {Link} from 'react-router-dom';
import theme from '../theme.jsx';
import { removeQuery } from '../components/ScrollToTop.jsx';
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
@@ -171,6 +172,7 @@ const AppGrid = props => {
// value={currentRefinement}
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
var defaultSearch = ""
useEffect(() => {
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
@@ -179,6 +181,7 @@ const AppGrid = props => {
if (foundQuery !== null && foundQuery !== undefined) {
console.log("Got query: ", foundQuery)
refine(foundQuery)
defaultSearch = foundQuery
}
}
}, [])
@@ -187,6 +190,7 @@ const AppGrid = props => {
console.log("In refinement: ", inputsearch)
//setLocalMessage(inputsearch)
refine(inputsearch)
defaultSearch = inputsearch
} else if (onlyResults === true) {
// Don't return anything unless refinement works
return null
@@ -196,6 +200,7 @@ const AppGrid = props => {
<form noValidate action="" role="search">
{onlyResults !== true ?
<TextField
defaultValue={defaultSearch}
fullWidth
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
InputProps={{
@@ -214,6 +219,7 @@ const AppGrid = props => {
placeholder="Find Workflows..."
id="shuffle_search_field"
onChange={(event) => {
removeQuery("q")
refine(event.currentTarget.value)
}}
limit={5}
frontend/src/defaultCytoscapeStyle.jsx
+13 -12
View File
@@ -63,7 +63,7 @@ const data = [
"z-index": 4999,
"border-radius": "5px",
"background-opacity": "0.5",
"text-wrap": "wrap",
"text-wrap": "wrap",
},
},
{
@@ -125,8 +125,8 @@ const data = [
"border-radius": "5px",
"border-color": "orange",
"background-color": "#213243",
"background-width": "100%",
"background-height": "100%",
"background-width": "100px",
"background-height": "100px",
},
},
{
@@ -163,15 +163,16 @@ const data = [
{
selector: "node[?isSuggestion]",
css: {
shape: "ellipse",
width: "50px",
height: "50px",
shape: "roundrectangle",
width: "30px",
height: "30px",
"z-index": "5002",
"font-size": "0px",
filter: "grayscale(100%)",
border: "1px solid rgba(255,255,255,0.9)",
"background-image": "data(large_image)",
"background-color": "data(iconBackground)",
label: "data(label)",
"background-fit": "cover",
"font-size": "20px",
label: "data(label_replaced)",
},
},
{
@@ -199,7 +200,7 @@ const data = [
"text-margin-x": "0px",
"background-color": "data(imageColor)",
"background-image": "data(image)",
label: "data(label)",
label: "data(label)",
},
},
{
@@ -337,9 +338,9 @@ const data = [
width: "1px",
"line-style": "dashed",
"line-fill": "linear-gradient",
"target-arrow-color": "#f34079",
"target-arrow-color": "#555555",
"line-gradient-stop-positions": ["0.0", "100"],
"line-gradient-stop-colors": ["#f86a3e", "#f34079"],
"line-gradient-stop-colors": ["#555555", "#555555"],
},
},
{
frontend/src/theme.jsx
+11 -6
View File
@@ -24,12 +24,12 @@ const theme = createTheme(adaptV4Theme({
backgroundColor: "#1a1a1a",
borderRadius: 5,
defaultBorder: "1px solid rgba(255,255,255,0.3)",
jsonTheme: "brewer",
reactJsonStyle: {
borderRadius: 5,
border: "1px solid rgba(255,255,255,0.7)",
padding: 5,
},
jsonTheme: "brewer",
reactJsonStyle: {
borderRadius: 5,
border: "1px solid rgba(255,255,255,0.7)",
padding: 5,
},
textFieldStyle: {
backgroundColor: "#383B40",
borderRadius: 5,
@@ -70,6 +70,11 @@ const theme = createTheme(adaptV4Theme({
},
},
overrides: {
MuiPaper: {
root: {
backgroundColor: "#1c1c1d",
},
},
MuiMenu: {
list: {
backgroundColor: "#27292d",
frontend/src/views/Admin.jsx
+4 -5
View File
@@ -3381,11 +3381,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
<ListItemText
style={{ maxWidth: 200, minWidth: 200 }}
primary={
schedule.environment === "cloud" ? (
schedule.environment === "cloud" || schedule.environment === "" || schedule.frequency.length > 0 ?
schedule.frequency
) : (
:
<span>{schedule.seconds} seconds</span>
)
}
/>
<ListItemText
@@ -3399,14 +3398,14 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
style={{ textDecoration: "none", color: "#f85a3e" }}
href={`/workflows/${schedule.workflow_id}`}
target="_blank"
rel="noopener noreferrer"
rel="noopener noreferrer"
>
{schedule.workflow_id}
</a>
}
/>
<ListItemText
primary={schedule.argument}
primary={schedule.argument.replaceAll('\\\"', '\"')}
style={{
minWidth: 300,
maxWidth: 300,
frontend/src/views/AngularWorkflow.jsx
+1455 -545
View File
File diff suppressed because it is too large Load Diff
frontend/src/views/AppCreator.jsx
+107 -115
View File
@@ -196,8 +196,9 @@ const parseCurl = (s) => {
case "data":
if (out.method === "GET" || out.method === "HEAD")
out.method = "POST";
out.header["Content-Type"] =
out.header["Content-Type"] || "application/x-www-form-urlencoded";
out.header["Content-Type"] = out.header["Content-Type"] || "application/x-www-form-urlencoded";
out.body = out.body ? out.body + "&" + arg : arg;
state = "";
break;
@@ -223,52 +224,52 @@ const parseCurl = (s) => {
// Basically CRUD for each category + special
export const appCategories = [
{
"name": "Communication",
"color": "#FFC107",
"icon": "communication",
"action_labels": ["List Messages", "Send Message", "Get Message", "Search messages"],
}, {
"name": "SIEM",
"color": "#FFC107",
"icon": "siem",
"action_labels": ["Search", "List Alerts", "Close Alert", "Create detection", "Add to lookup list",],
}, {
"name": "Eradication",
"color": "#FFC107",
"icon": "eradication",
"action_labels": ["List Alerts", "Close Alert", "Create detection", "Block hash", "Search Hosts", "Isolate host", "Unisolate host"],
}, {
"name": "Cases",
"color": "#FFC107",
"icon": "cases",
"action_labels": ["List tickets", "Get ticket", "Create ticket", "Close ticket", "Add comment", "Update ticket",],
}, {
"name": "Assets",
"color": "#FFC107",
"icon": "assets",
"action_labels": ["List Assets", "Get Asset", "Search Assets", "Search Users", "Search endpoints", "Search vulnerabilities"],
}, {
"name": "Intel",
"color": "#FFC107",
"icon": "intel",
"action_labels": ["Get IOC", "Search IOC", "Create IOC", "Update IOC", "Delete IOC",],
}, {
"name": "IAM",
"color": "#FFC107",
"icon": "iam",
"action_labels": ["Reset Password", "Enable user", "Disable user", "Get Identity", "Get Asset", "Search Identity", ],
}, {
"name": "Network",
"color": "#FFC107",
"icon": "network",
"action_labels": ["Get Rules", "Allow IP", "Block IP",],
}, {
"name": "Other",
"color": "#FFC107",
"icon": "other",
"action_labels": ["Update Info", "Get Info", "Get Status", "Get Version", "Get Health", "Get Config", "Get Configs", "Get Configs by type", "Get Configs by name", "Run script"],
},
{
"name": "Communication",
"color": "#FFC107",
"icon": "communication",
"action_labels": ["List Messages", "Send Message", "Get Message", "Search messages", "List Attachments", "Get Attachment", "Get Contact"],
}, {
"name": "SIEM",
"color": "#FFC107",
"icon": "siem",
"action_labels": ["Search", "List Alerts", "Close Alert", "Get Alert", "Create detection", "Add to lookup list",],
}, {
"name": "Eradication",
"color": "#FFC107",
"icon": "eradication",
"action_labels": ["List Alerts", "Close Alert", "Get Alert", "Create detection", "Block hash", "Search Hosts", "Isolate host", "Unisolate host"],
}, {
"name": "Cases",
"color": "#FFC107",
"icon": "cases",
"action_labels": ["List tickets", "Get ticket", "Create ticket", "Close ticket", "Add comment", "Update ticket", "Search tickets"],
}, {
"name": "Assets",
"color": "#FFC107",
"icon": "assets",
"action_labels": ["List Assets", "Get Asset", "Search Assets", "Search Users", "Search endpoints", "Search vulnerabilities"],
}, {
"name": "Intel",
"color": "#FFC107",
"icon": "intel",
"action_labels": ["Get IOC", "Search IOC", "Create IOC", "Update IOC", "Delete IOC",],
}, {
"name": "IAM",
"color": "#FFC107",
"icon": "iam",
"action_labels": ["Reset Password", "Enable user", "Disable user", "Get Identity", "Get Asset", "Search Identity", ],
}, {
"name": "Network",
"color": "#FFC107",
"icon": "network",
"action_labels": ["Get Rules", "Allow IP", "Block IP",],
}, {
"name": "Other",
"color": "#FFC107",
"icon": "other",
"action_labels": ["Update Info", "Get Info", "Get Status", "Get Version", "Get Health", "Get Config", "Get Configs", "Get Configs by type", "Get Configs by name", "Run script"],
},
]
export const base64_decode = (str) => {
@@ -570,11 +571,11 @@ const AppCreator = (defaultprops) => {
if (data.openapi === null) {
toast("Failed to load OpenAPI for app. Please contact support if this persists.")
setIsAppLoaded(true);
setIsAppLoaded(true);
return
}
console.log("Decoded: ", parsedDecoded)
//console.log("Decoded: ", parsedDecoded)
const parsedapp =
data.openapi === undefined || data.openapi === null
? data
@@ -719,9 +720,9 @@ const AppCreator = (defaultprops) => {
var newActions = [];
var wordlist = {};
var all_categories = [];
var parentUrl = ""
var parentUrl = ""
console.log("Paths: ", data.paths)
console.log("Paths: ", data.paths)
if (data.paths !== null && data.paths !== undefined) {
for (let [path, pathvalue] of Object.entries(data.paths)) {
@@ -751,45 +752,44 @@ const AppCreator = (defaultprops) => {
tmpname = methodvalue.operationId;
}
if (tmpname !== undefined && tmpname !== null) {
tmpname = tmpname.replaceAll(".", " ");
}
if (tmpname !== undefined && tmpname !== null) {
tmpname = tmpname.replaceAll(".", " ");
}
if ((tmpname === undefined || tmpname === null) && methodvalue.description !== undefined && methodvalue.description !== null && methodvalue.description.length > 0) {
tmpname = methodvalue.description.replaceAll(".", " ").replaceAll("_", " ")
}
if ((tmpname === undefined || tmpname === null) && methodvalue.description !== undefined && methodvalue.description !== null && methodvalue.description.length > 0) {
tmpname = methodvalue.description.replaceAll(".", " ").replaceAll("_", " ")
}
var newaction = {
name: tmpname,
description: methodvalue.description,
url: path,
file_field: "",
method: method.toUpperCase(),
headers: "",
queries: [],
paths: [],
body: "",
errors: [],
example_response: "",
action_label: "No Label",
required_bodyfields: [],
};
var newaction = {
name: tmpname,
description: methodvalue.description,
url: path,
file_field: "",
method: method.toUpperCase(),
headers: "",
queries: [],
paths: [],
body: "",
errors: [],
example_response: "",
action_label: "No Label",
required_bodyfields: [],
};
if (methodvalue["x-label"] !== undefined && methodvalue["x-label"] !== null) {
// FIX: Map labels only if they're actually in the category list
newaction.action_label = methodvalue["x-label"]
}
if (methodvalue["x-label"] !== undefined && methodvalue["x-label"] !== null) {
// FIX: Map labels only if they're actually in the category list
newaction.action_label = methodvalue["x-label"]
}
if (methodvalue["x-required-fields"] !== undefined && methodvalue["x-required-fields"] !== null) {
newaction.required_bodyfields = methodvalue["x-required-fields"]
}
if (methodvalue["x-required-fields"] !== undefined && methodvalue["x-required-fields"] !== null) {
newaction.required_bodyfields = methodvalue["x-required-fields"]
}
if (newaction.url !== undefined && newaction.url !== null && newaction.url.includes("_shuffle_replace_")) {
const regex = /_shuffle_replace_\d/i;
//console.log("NEW: ",
newaction.url = newaction.url.replaceAll(new RegExp(regex, 'g'), "")
console.log("Replaced: ", newaction.url)
}
if (newaction.url !== undefined && newaction.url !== null && newaction.url.includes("_shuffle_replace_")) {
const regex = /_shuffle_replace_\d/i;
//console.log("NEW: ",
newaction.url = newaction.url.replaceAll(new RegExp(regex, 'g'), "")
}
// Finding category
if (path.includes("/")) {
@@ -1110,19 +1110,11 @@ const AppCreator = (defaultprops) => {
undefined
) {
if (
methodvalue.responses.default.content["text/plain"][
"schema"
] !== undefined
) {
if (
methodvalue.responses.default.content["text/plain"][
"schema"
]["example"] !== undefined
) {
newaction.example_response =
methodvalue.responses.default.content["text/plain"][
"schema"
]["example"]
methodvalue.responses.default.content["text/plain"]["schema"] !== undefined) {
if (methodvalue.responses.default.content["text/plain"]["schema"]["example"] !== undefined) {
newaction.example_response = methodvalue.responses.default.content["text/plain"]["schema"]["example"]
}
@@ -1560,12 +1552,12 @@ const AppCreator = (defaultprops) => {
if (securitySchemes !== undefined) {
console.log("SECURITY: ", securitySchemes)
var newauth = [];
try {
var optionset = false
//console.log("SECURITY: ", securitySchemes)
var newauth = [];
try {
var optionset = false
for (const [key, value] of Object.entries(securitySchemes)) {
console.log("AUTH: ", key, value);
//console.log("AUTH: ", key, value);
if (key === "jwt") {
setAuthenticationOption("JWT");
@@ -1776,12 +1768,12 @@ const AppCreator = (defaultprops) => {
if (!found) {
newActions2.push(action)
} else {
console.log("NOT skipping duplicate action: ", action.url, ". Should merge contents")
//console.log("NOT skipping duplicate action: ", action.url, ". Should merge contents")
newActions2.push(action)
}
}
console.log("Actions: ", newActions.length, " Actions2: ", newActions2.length)
//console.log("Actions: ", newActions.length, " Actions2: ", newActions2.length)
newActions = newActions2
if (newActions.length > increaseAmount - 1) {
setActionAmount(increaseAmount);
@@ -3880,7 +3872,7 @@ const AppCreator = (defaultprops) => {
const datasplit = parsedurlsplit[1].split("&")
for (var key in datasplit) {
console.log("Data: ", datasplit[key])
//console.log("Data: ", datasplit[key])
var actualkey = datasplit[key]
var example = ""
if (datasplit[key].includes("=")) {
@@ -4143,7 +4135,7 @@ const AppCreator = (defaultprops) => {
overflowX: "hidden",
}}
onClick={() => {
console.log("Data: ", data)
//console.log("Data: ", data)
if (hasFile) {
//setActionField("headers", "")
//console.log("It has a file: ", data["file_field"])
@@ -4321,9 +4313,9 @@ const AppCreator = (defaultprops) => {
}
const LoopActions = (props) => {
const { filteredActions } = props;
const { filteredActions } = props;
console.log("Actions: ", filteredActions)
//console.log("Actions: ", filteredActions)
if (filteredActions === null || filteredActions === undefined || filteredActions.length === 0) {
return null
}
@@ -4745,7 +4737,7 @@ const AppCreator = (defaultprops) => {
}
const handleSubmitCheck = () => {
console.log("NEW AUTH: ", authenticationOption);
//console.log("NEW AUTH: ", authenticationOption);
if (authenticationOption.label.length === 0) {
authenticationOption.label = `Auth for ${selectedApp.name}`;
//toast("Label can't be empty")
@@ -4968,10 +4960,10 @@ const AppCreator = (defaultprops) => {
{projectCategories.map((tag, index) => {
const newname = tag.charAt(0).toUpperCase() + tag.slice(1);
//var regex = /_shuffle_replace_\d/i;
////console.log("NEW: ",
//newname = newname.replaceAll(regex, "")
//console.log("Replaced: ", newname)
//var regex = /_shuffle_replace_\d/i;
////console.log("NEW: ",
//newname = newname.replaceAll(regex, "")
//console.log("Replaced: ", newname)
return (
<Chip
frontend/src/views/Docs.jsx
+32 -14
View File
@@ -391,19 +391,28 @@ const Docs = (defaultprops) => {
}
function CodeHandler(props) {
console.log("PROPS: ", props)
const propvalue = props.value !== undefined && props.value !== null ? props.value : props.children !== undefined && props.children !== null && props.children.length > 0 ? props.children[0] : ""
return (
<pre
<div
style={{
padding: 15,
minWidth: "50%",
maxWidth: "100%",
backgroundColor: theme.palette.inputColor,
overflowX: "auto",
overflowY: "hidden",
overflowY: "auto",
}}
>
<code>{props.value}</code>
</pre>
<code
style={{
// Wrap if larger than X
whiteSpace: "pre-wrap",
overflow: "auto",
}}
>{propvalue}</code>
</div>
);
}
@@ -436,7 +445,7 @@ const Docs = (defaultprops) => {
href={selectedMeta.link}
style={{ textDecoration: "none", color: "#f85a3e" }}
>
<Button style={{}} variant="outlined" color="secondary">
<Button style={{color: "white", }} variant="outlined" color="secondary">
<EditIcon /> &nbsp;&nbsp;Edit
</Button>
</a>
@@ -638,7 +647,7 @@ const Docs = (defaultprops) => {
<Typography variant="h6" style={headerStyle}>Why Shuffle?</Typography>
<Typography variant="body1">
<b>Security first.</b> We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
<b>Security first.</b> We incentivize trying before buying, and give you the full set of tools you need to automate your operations. What's more is we also help you <a href="https://shuffler.io/pricing?tag=docs" target="_blank" style={hrefStyle2}>find usecases</a> that fit your unique needs. Accessibility is key, and we intend to help every SOC globally use and share their usecases.
</Typography>
<Typography variant="h6" style={headerStyle}>Get help</Typography>
@@ -878,16 +887,25 @@ const Docs = (defaultprops) => {
:
<div id="markdown_wrapper_outer" style={markdownStyle}>
<ReactMarkdown
components={{
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}}
id="markdown_wrapper"
escapeHtml={false}
source={data}
renderers={{
link: OuterLink,
image: Img,
code: CodeHandler,
heading: Heading,
style={{
maxWidth: "100%", minWidth: "100%",
}}
/>
>
{data}
</ReactMarkdown>
</div>
}
<Divider
frontend/src/views/RunWorkflow.jsx
+78 -57
View File
@@ -66,10 +66,10 @@ const RunWorkflow = (defaultprops) => {
marginBottom: 150,
}
const params = useParams();
var props = JSON.parse(JSON.stringify(defaultprops))
props.match = {}
props.match.params = params
const params = useParams();
var props = JSON.parse(JSON.stringify(defaultprops))
props.match = {}
props.match.params = params
const defaultTitle = "Run Workflow"
if (document != undefined && document.title != defaultTitle) {
@@ -126,12 +126,14 @@ const RunWorkflow = (defaultprops) => {
}
const executionMargin = 20
const defaultReturn =
const defaultReturn = null
/*
<div style={{marginTop: executionMargin, }}>
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
No results yet
</Typography>
</div>
*/
if (executionData.results === undefined || executionData.results === null) {
return defaultReturn
@@ -271,7 +273,7 @@ const RunWorkflow = (defaultprops) => {
width: 30,
}}
onClick={() => {
navigate(`?execution_highlight=${parsed_url}`)
//navigate(`?execution_highlight=${parsed_url}`)
}}
>
<PreviewIcon style={{ color: "rgba(255,255,255,0.5)" }} />
@@ -314,10 +316,16 @@ const RunWorkflow = (defaultprops) => {
)
}
const onSubmit = (execution_id, authorization, answer) => {
const onSubmit = (event, execution_id, authorization, answer) => {
if (event !== null) {
event.preventDefault()
}
console.log("In submit!")
stop()
setMessage("")
setExecutionLoading(true)
setMessage("")
setExecutionLoading(true)
setExecutionData({})
setExecutionInfo("")
@@ -327,13 +335,13 @@ const RunWorkflow = (defaultprops) => {
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`
var fetchBody = {
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
mode: 'cors',
credentials: 'include',
crossDomain: true,
withCredentials: true,
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
}
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
@@ -345,8 +353,10 @@ const RunWorkflow = (defaultprops) => {
fetchBody.body = JSON.stringify(data)
}
console.log("Pre request: ", url, fetchBody)
fetch(url, fetchBody)
.then((response) => {
console.log("Got answer 1")
if (response.status !== 200 && response.status !== 201) {
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
@@ -362,9 +372,11 @@ const RunWorkflow = (defaultprops) => {
}
}
console.log("Got answer 2")
return response.json();
})
.then(responseJson => {
console.log("Got answer 3")
setExecutionLoading(false)
if (responseJson["success"] === false) {
console.log("Failed sending execution request")
@@ -379,6 +391,7 @@ const RunWorkflow = (defaultprops) => {
start();
}
}
console.log("Got answer 4")
})
.catch(error => {
//setExecutionInfo("Error in workflow startup: " + error)
@@ -387,14 +400,14 @@ const RunWorkflow = (defaultprops) => {
}
const getWorkflow = (workflow_id) => {
fetch(globalUrl + "/api/v1/workflows/" + workflow_id, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
})
fetch(globalUrl + "/api/v1/workflows/" + workflow_id, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for workflows :O!");
@@ -441,35 +454,35 @@ const RunWorkflow = (defaultprops) => {
return
}
console.log("Got response: ", responseJson)
//console.log("Got response: ", responseJson)
ReactDOM.unstable_batchedUpdates(() => {
if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
// FIXME: If another is selected, don't edit..
// Doesn't work because this is some async garbage
if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
console.log("Updating data!")
setExecutionData(responseJson)
ReactDOM.unstable_batchedUpdates(() => {
if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
// FIXME: If another is selected, don't edit..
// Doesn't work because this is some async garbage
if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
//console.log("Updating data!")
setExecutionData(responseJson)
for (var key in responseJson.results) {
if (responseJson.results[key].status === "WAITING") {
console.log("Found: ", responseJson.results[key])
const validate = validateJson(responseJson.results[key].result)
console.log("Validate: ", validate)
if (validate.valid && typeof validate.result === "string") {
validate.result = JSON.parse(validate.result)
}
for (var key in responseJson.results) {
if (responseJson.results[key].status === "WAITING") {
console.log("Found: ", responseJson.results[key])
const validate = validateJson(responseJson.results[key].result)
console.log("Validate: ", validate)
if (validate.valid && typeof validate.result === "string") {
validate.result = JSON.parse(validate.result)
}
console.log("Newresult: ", validate.result)
if (validate.result["information"] !== undefined && validate.result["information"] !== null) {
setWorkflowQuestion(validate.result["information"])
}
break
}
console.log("Newresult: ", validate.result)
if (validate.result["information"] !== undefined && validate.result["information"] !== null) {
setWorkflowQuestion(validate.result["information"])
}
break
}
}
} else {
console.log("NOT updating executiondata state.");
}
@@ -518,9 +531,9 @@ const RunWorkflow = (defaultprops) => {
if (responseJson.sync_features === undefined || responseJson.sync_features === null) {
}
if (document != undefined && document.title != defaultTitle) {
document.title = responseJson.name + " - " + defaultTitle
}
if (document != undefined && document.title != defaultTitle) {
document.title = responseJson.name + " - " + defaultTitle
}
setSelectedOrganization(responseJson)
}
})
@@ -530,6 +543,11 @@ const RunWorkflow = (defaultprops) => {
};
const fetchUpdates = (execution_id, authorization, getorg) => {
if (execution_id === undefined || execution_id === null || execution_id === "") {
stop()
return
}
const innerRequest = {
"execution_id": execution_id,
"authorization": authorization
@@ -594,7 +612,7 @@ const RunWorkflow = (defaultprops) => {
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
console.log("execdata: ", executionData)
//console.log("execdata: ", executionData)
const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
const organization = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.name : "Unknown"
@@ -603,7 +621,7 @@ const RunWorkflow = (defaultprops) => {
const image = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.image !== undefined && selectedOrganization.image !== null && selectedOrganization.image !== "" ? selectedOrganization.image : theme.palette.defaultImage
console.log("IMG: ", image, "ORG: ", selectedOrganization)
//console.log("IMG: ", image, "ORG: ", selectedOrganization)
if (!disabledButtons && answer !== undefined && answer !== null && organization !== "Unknown" && buttonClicked.length === 0) {
console.log("Finding button!")
@@ -627,7 +645,7 @@ const RunWorkflow = (defaultprops) => {
const basedata =
<div style={bodyDivStyle}>
<Paper style={boxStyle}>
<form onSubmit={() => {onSubmit()}} style={{margin: "15px 15px 15px 15px"}}>
<form onSubmit={(e) => {onSubmit(e)}} style={{margin: "15px 15px 15px 15px"}}>
<img
alt={workflow.name}
@@ -676,7 +694,7 @@ const RunWorkflow = (defaultprops) => {
{answer !== undefined && answer !== null ? null :
<span>
Execution Argument
Runtime Argument
<div style={{marginBottom: 5}}>
<TextField
color="primary"
@@ -705,9 +723,12 @@ const RunWorkflow = (defaultprops) => {
{executionRunning ?
<span style={{width: 50, height: 50, margin: "auto", alignItems: "center", justifyContent: "center", textAlign: "center", }}>
<CircularProgress style={{marginTop: 20, marginBottom: 20, marginLeft: 185, }}/>
<Typography variant="body2" style={{margin: "auto", marginTop: 20, marginBottom: 20, textAlign: "center", alignItem: "center", }} color="textSecondary">
Status: {executionData.status}
</Typography>
{executionData.status !== undefined && executionData.status !== null && executionData.status !== "" ?
<Typography variant="body2" style={{margin: "auto", marginTop: 20, marginBottom: 20, textAlign: "center", alignItem: "center", }} color="textSecondary">
Status: {executionData.status}
</Typography>
: null}
</span>
:
@@ -723,7 +744,7 @@ const RunWorkflow = (defaultprops) => {
}
<div fullWidth style={{width: "100%", marginTop: 10, marginBottom: 10, display: "flex", }}>
<Button fullWidth id="continue_execution" variant="contained" disabled={disabledButtons} color="primary" style={{border: answer === "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1,}} onClick={() => {
onSubmit(execution_id, authorization, true)
onSubmit(null, execution_id, authorization, true)
setButtonClicked("FINISHED")
setExecutionData({
@@ -734,7 +755,7 @@ const RunWorkflow = (defaultprops) => {
&nbsp;or&nbsp;
</Typography>
<Button fullWidth id="abort_execution" variant="contained" color="primary" disabled={disabledButtons} style={{border: answer !== "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1, }} onClick={() => {
onSubmit(execution_id, authorization, false)
onSubmit(null, execution_id, authorization, false)
setButtonClicked("ABORTED")
setExecutionData({
frontend/src/views/Workflows.jsx
+73 -66
View File
@@ -393,6 +393,9 @@ export const validateJson = (showResult) => {
if (typeof showResult === 'string') {
showResult = showResult.split(" False").join(" false")
showResult = showResult.split(" True").join(" true")
showResult.replaceAll("False,", "false,")
showResult.replaceAll("True,", "true,")
}
if (typeof showResult === "object" || typeof showResult === "array") {
@@ -1247,9 +1250,9 @@ const Workflows = (props) => {
//flexDirection: !isMobile ? "column" : "row",
const paperAppContainer = {
display: "flex",
flexWrap: "wrap",
alignContent: "space-between",
//display: "flex",
//flexWrap: "wrap",
//alignContent: "space-between",
};
const paperAppStyle = {
@@ -1587,7 +1590,7 @@ const Workflows = (props) => {
const NewWorkflowPaper = () => {
const [hover, setHover] = React.useState(false);
const innerColor = "rgba(255,255,255,0.3)";
const innerColor = "rgba(255,255,255,0.3)"
const setupPaperStyle = {
minHeight: paperAppStyle.minHeight,
maxWidth: "100%",
@@ -1609,9 +1612,9 @@ const Workflows = (props) => {
square
style={setupPaperStyle}
onClick={() => {
setModalOpen(true)
setIsEditing(false)
}}
setModalOpen(true)
setIsEditing(false)
}}
onMouseOver={() => {
setHover(true);
}}
@@ -1682,7 +1685,7 @@ const Workflows = (props) => {
}
const actions = data.actions !== null ? data.actions.length : 0;
const appGroup = getWorkflowAppgroup(data)
const appGroup = getWorkflowAppgroup(data)
const [triggers, subflows] = getWorkflowMeta(data);
const workflowMenuButtons = (
@@ -1699,22 +1702,22 @@ const Workflows = (props) => {
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={(event) => {
event.stopPropagation()
ReactDOM.unstable_batchedUpdates(() => {
setModalOpen(true);
setEditingWorkflow(JSON.parse(JSON.stringify(data)));
setNewWorkflowName(data.name);
setNewWorkflowDescription(data.description);
setDefaultReturnValue(data.default_return_value);
if (data.tags !== undefined && data.tags !== null) {
setNewWorkflowTags(JSON.parse(JSON.stringify(data.tags)));
}
event.stopPropagation()
ReactDOM.unstable_batchedUpdates(() => {
setModalOpen(true);
setEditingWorkflow(JSON.parse(JSON.stringify(data)));
setNewWorkflowName(data.name);
setNewWorkflowDescription(data.description);
setDefaultReturnValue(data.default_return_value);
if (data.tags !== undefined && data.tags !== null) {
setNewWorkflowTags(JSON.parse(JSON.stringify(data.tags)));
}
if (data.usecase_ids !== undefined && data.usecase_ids !== null && data.usecase_ids.length > 0) {
setSelectedUsecases(data.usecase_ids)
}
})
}}
if (data.usecase_ids !== undefined && data.usecase_ids !== null && data.usecase_ids.length > 0) {
setSelectedUsecases(data.usecase_ids)
}
})
}}
key={"change"}
>
<EditIcon style={{ marginLeft: 0, marginRight: 8 }} />
@@ -2122,18 +2125,18 @@ const Workflows = (props) => {
: null}
</Grid>
{data.actions !== undefined && data.actions !== null ? (
<div style={{position: "absolute", top: 10, right: 10, }}>
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={menuClick}
style={{ padding: "0px", color: "#979797" }}
>
<MoreVertIcon />
</IconButton>
{workflowMenuButtons}
</div>
<div style={{position: "absolute", top: 10, right: 10, }}>
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={menuClick}
style={{ padding: "0px", color: "#979797" }}
>
<MoreVertIcon />
</IconButton>
{workflowMenuButtons}
</div>
) : null}
</Grid>
</Paper>
@@ -2180,13 +2183,13 @@ const Workflows = (props) => {
workflowdata["default_return_value"] = defaultReturnValue;
}
if (currentUsecases !== undefined && currentUsecases !== null) {
workflowdata["usecase_ids"] = currentUsecases
//workflows[0].category = ["detect"]
//workflows[0].usecase_ids = ["Correlate tickets"]
}
if (currentUsecases !== undefined && currentUsecases !== null) {
workflowdata["usecase_ids"] = currentUsecases
//workflows[0].category = ["detect"]
//workflows[0].usecase_ids = ["Correlate tickets"]
}
const new_url = `${globalUrl}/api/v1/workflows${extraData}`
const new_url = `${globalUrl}/api/v1/workflows${extraData}`
return fetch(new_url, {
method: method,
headers: {
@@ -2206,16 +2209,16 @@ const Workflows = (props) => {
return response.json();
})
.then((responseJson) => {
if (responseJson.success === false) {
if (responseJson.reason !== undefined) {
toast("Error setting workflow: ", responseJson.reason)
} else {
toast("Error setting workflow.")
}
return
if (responseJson.success === false) {
if (responseJson.reason !== undefined) {
toast("Error setting workflow: ", responseJson.reason)
} else {
toast("Error setting workflow.")
}
return
}
if (redirect) {
//window.location.pathname = "/workflows/" + responseJson["id"];
navigate("/workflows/" + responseJson["id"])
@@ -2224,7 +2227,7 @@ const Workflows = (props) => {
// Update :)
setTimeout(() => {
getAvailableWorkflows();
}, 2500);
}, 4000);
setSubmitLoading(false)
setModalOpen(false);
} else {
@@ -2244,7 +2247,7 @@ const Workflows = (props) => {
const importFiles = (event) => {
console.log("Importing!");
setSubmitLoading(true)
setSubmitLoading(true)
if (event.target.files.length > 0) {
console.log("Files: !", event.target.files.length);
@@ -2281,9 +2284,9 @@ const Workflows = (props) => {
data.default_return_value,
{},
false,
[],
"",
data.status,
[],
"",
data.status,
)
.then((response) => {
if (response !== undefined) {
@@ -2301,9 +2304,9 @@ const Workflows = (props) => {
data.default_return_value,
data,
false,
[],
"",
data.status,
[],
"",
data.status,
).then((response) => {
if (response !== undefined) {
toast("Successfully imported " + data.name);
@@ -3239,14 +3242,18 @@ const Workflows = (props) => {
fullWidth
value={filters}
onChange={(chips) => {
console.log("CHANGE: ", chips);
setFilters(chips);
findWorkflow(chips);
}}
onAdd={(chip) => {
addFilter(chip);
}}
onDelete={(_, index) => {
removeFilter(index);
}}
//onAdd={(chip) => {
// console.log("ADd: ", chip);
// addFilter(chip);
//}}
//onDelete={(_, index) => {
// console.log("Remove: ", index);
// removeFilter(index);
//}}
/>
</div>
</div>
@@ -3485,11 +3492,11 @@ const Workflows = (props) => {
/>
: null}
<div style={{marginTop: 30, marginBottom: 50, marginLeft: 30, }}>
<div style={{}}>
{view === "grid" ? (
<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
<Grid container spacing={0/*filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4*/} style={paperAppContainer}>
{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
<NewWorkflowPaper />
<NewWorkflowPaper />
{/*</Zoom>*/}
{filteredWorkflows.map((data, index) => {