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

Added icons and better execution view

Browse Source
This commit is contained in:
frikky
2020-05-13 15:35:03 +02:00
parent 1abc8a7b54
commit e3dca4c17e
6 changed files with 130 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2 -2
View File
@@ -84,13 +84,13 @@ There will be a major overhaul to the backend specifically. I'm currently moving
- * Configuration - Write setup documentation - Did for docker - * Configuration - Write setup documentation - Did for docker
- * Remove orborus? Can deploy straight, but that would be weird - Won't do this yet - * Remove orborus? Can deploy straight, but that would be weird - Won't do this yet
- * Full OpenAPI support with authentication schemes in App creator (not Oauth2 yet) - * Full OpenAPI support with authentication schemes in App creator (not Oauth2 yet)
- * Change workflow name
- Workflows - IMPORT DEFAULT WORKFLOWS - Create some towards e.g. TheHive & MISP. - Workflows - IMPORT DEFAULT WORKFLOWS - Create some towards e.g. TheHive & MISP.
- Documentation - General documentation /docs rewrite - Documentation - General documentation /docs rewrite
- API doc - 1. In Shuffle. 2. In e.g. python - API doc - 1. In Shuffle. 2. In e.g. python
- Add random secret to orborus
- Change workflow name
- Fix scheduler - Fix scheduler
- Use variables in e.g. JSON body - Use variables in e.g. JSON body
- Add random secret to orborus
``` ```
# 1. export DATASTORE_EMULATOR_HOST=0.0.0.0:8000 # 1. export DATASTORE_EMULATOR_HOST=0.0.0.0:8000
frontend/src/AngularWorkflow.js
+38 -26
View File
@@ -24,7 +24,7 @@ import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox'; import Checkbox from '@material-ui/core/Checkbox';
import CreateIcon from '@material-ui/icons/Create';
import PlayArrowIcon from '@material-ui/icons/PlayArrow'; import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import AspectRatioIcon from '@material-ui/icons/AspectRatio'; import AspectRatioIcon from '@material-ui/icons/AspectRatio';
import MoreVertIcon from '@material-ui/icons/MoreVert'; import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -215,6 +215,8 @@ const AngularWorkflow = (props) => {
}); });
} }
// Controls the colors and direction of execution results.
// Style is in defaultCytoscapeStyle.js
const handleUpdateResults = (responseJson) => { const handleUpdateResults = (responseJson) => {
//console.log(responseJson) //console.log(responseJson)
// Loop nodes and find results // Loop nodes and find results
@@ -243,8 +245,8 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('success-highlight') currentnode.removeClass('success-highlight')
currentnode.removeClass('failure-highlight') currentnode.removeClass('failure-highlight')
currentnode.removeClass('awaiting-data-highlight') currentnode.removeClass('awaiting-data-highlight')
currentnode.addClass('executing-highlight')
incomingEdges.addClass('success-highlight') incomingEdges.addClass('success-highlight')
currentnode.addClass('executing-highlight')
break break
case "WAITING": case "WAITING":
currentnode.removeClass('not-executing-highlight') currentnode.removeClass('not-executing-highlight')
@@ -325,11 +327,11 @@ const AngularWorkflow = (props) => {
curelements[i].removeClass("executing-highlight") curelements[i].removeClass("executing-highlight")
curelements[i].addClass("failure-highlight") curelements[i].addClass("failure-highlight")
} else { } else {
curelements[i].removeClass('not-executing-highlight') //curelements[i].removeClass('not-executing-highlight')
curelements[i].removeClass('executing-highlight') //curelements[i].removeClass('executing-highlight')
curelements[i].removeClass('success-highlight') //curelements[i].removeClass('success-highlight')
curelements[i].removeClass('awaiting-data-highlight') //curelements[i].removeClass('awaiting-data-highlight')
curelements[i].removeClass('failure-highlight') //curelements[i].removeClass('failure-highlight')
} }
} }
} else if (responseJson.status === "FINISHED") { } else if (responseJson.status === "FINISHED") {
@@ -412,7 +414,7 @@ const AngularWorkflow = (props) => {
setLastSaved(true) setLastSaved(true)
fetch(globalUrl+"/api/v1/workflows/"+props.match.params.key, { fetch(globalUrl+"/api/v1/workflows/"+props.match.params.key, {
method: 'PUT', method: 'PUT',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json', 'Accept': 'application/json',
@@ -1378,7 +1380,7 @@ const AngularWorkflow = (props) => {
return ( return (
<div style={appViewStyle}> <div style={appViewStyle}>
<div style={appScrollStyle}> <div style={variableScrollStyle}>
{workflow.workflow_variables.map(variable=> { {workflow.workflow_variables.map(variable=> {
return ( return (
<div> <div>
@@ -2265,23 +2267,29 @@ const AngularWorkflow = (props) => {
<div style={{flex: "10"}}> <div style={{flex: "10"}}>
<b>{data.name}: </b> <b>{data.name}: </b>
</div> </div>
<div style={{cursor: "pointer", color: staticcolor}} onClick={() => { <Tooltip color="primary" title="Static data" placement="top">
changeActionParameterVariant("STATIC_VALUE", count) <div style={{cursor: "pointer", color: staticcolor}} onClick={() => {
changeActionParameterVariant("STATIC_VALUE", count)
}}>
<CreateIcon />
</div>
</Tooltip>
&nbsp;|&nbsp;
<Tooltip color="primary" title="Data from previous action" placement="top">
<div style={{cursor: "pointer", color: actioncolor}} onClick={() => {
changeActionParameterVariant("ACTION_RESULT", count)
}}> }}>
static <AppsIcon />
</div> </div>
</Tooltip>
&nbsp;|&nbsp; &nbsp;|&nbsp;
<div style={{cursor: "pointer", color: actioncolor}} onClick={() => { <Tooltip color="primary" title="Use local variable" placement="top">
changeActionParameterVariant("ACTION_RESULT", count) <div style={{cursor: "pointer", color: varcolor}} onClick={() => {
}}> changeActionParameterVariant("WORKFLOW_VARIABLE", count)
action }}>
</div> <FavoriteBorderIcon />
&nbsp;|&nbsp; </div>
<div style={{cursor: "pointer", color: varcolor}} onClick={() => { </Tooltip>
changeActionParameterVariant("WORKFLOW_VARIABLE", count)
}}>
var
</div>
</div> </div>
{datafield} {datafield}
</div> </div>
@@ -3941,14 +3949,17 @@ const AngularWorkflow = (props) => {
return null return null
} }
const cytoscapeViewWidths = 600
const bottomBarStyle = { const bottomBarStyle = {
position: "fixed", position: "fixed",
right: 20, right: 20,
left: leftBarSize, left: leftBarSize,
bottom: 0, bottom: 0,
minWidth: "100%", minWidth: cytoscapeViewWidths,
maxWidth: cytoscapeViewWidths,
marginLeft: 20, marginLeft: 20,
marginBottom: 20, marginBottom: 20,
zIndex: 10,
} }
const topBarStyle= { const topBarStyle= {
@@ -3956,7 +3967,8 @@ const AngularWorkflow = (props) => {
right: 0, right: 0,
left: leftBarSize, left: leftBarSize,
top: appBarSize, top: appBarSize,
minWidth: "60%", minWidth: cytoscapeViewWidths,
maxWidth: cytoscapeViewWidths,
marginLeft: 20, marginLeft: 20,
marginBottom: 20, marginBottom: 20,
} }
frontend/src/App.js
+2 -2
View File
@@ -38,12 +38,12 @@ import AlertTemplate from "react-alert-template-basic";
import { positions, Provider } from "react-alert"; import { positions, Provider } from "react-alert";
// Testing - localhost // Testing - localhost
//const globalUrl = "http://192.168.3.6:5001" const globalUrl = "http://192.168.3.6:5001"
//console.log("HOST: ", process.env) //console.log("HOST: ", process.env)
// Production - backend proxy forwarding in nginx // Production - backend proxy forwarding in nginx
const globalUrl = window.location.origin //const globalUrl = window.location.origin
const surfaceColor = "#27292D" const surfaceColor = "#27292D"
const inputColor = "#383B40" const inputColor = "#383B40"
frontend/src/Header.js
+15 -3
View File
@@ -8,6 +8,9 @@ import ListItem from '@material-ui/core/ListItem';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import PolymerIcon from '@material-ui/icons/Polymer';
import AppsIcon from '@material-ui/icons/Apps';
import DescriptionIcon from '@material-ui/icons/Description';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
const hoverColor = "#f85a3e" const hoverColor = "#f85a3e"
@@ -138,12 +141,18 @@ const Header = props => {
<List style={{display: "flex", flexDirect: "row", flex: "1"}} component="nav"> <List style={{display: "flex", flexDirect: "row", flex: "1"}} component="nav">
<ListItem style={{textAlign: "center"}}> <ListItem style={{textAlign: "center"}}>
<Link to="/workflows" style={hrefStyle}> <Link to="/workflows" style={hrefStyle}>
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer"}}>Workflows</div> <div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer", display: "flex"}}>
<PolymerIcon style={{marginRight: "5px"}} />
<span style={{marginTop: 2}}>Workflows</span>
</div>
</Link> </Link>
</ListItem> </ListItem>
<ListItem style={{textAlign: "center"}}> <ListItem style={{textAlign: "center"}}>
<Link to="/apps" style={hrefStyle}> <Link to="/apps" style={hrefStyle}>
<div onMouseOver={handleHelpHover} onMouseOut={handleHelpHoverOut} style={{color: HelpHoverColor, cursor: "pointer"}}>Apps</div> <div onMouseOver={handleHelpHover} onMouseOut={handleHelpHoverOut} style={{color: HelpHoverColor, cursor: "pointer", display: "flex",}}>
<AppsIcon style={{marginRight: "5px"}} />
<span style={{marginTop: 2}}>Apps</span>
</div>
</Link> </Link>
</ListItem> </ListItem>
{/* {/*
@@ -155,7 +164,10 @@ const Header = props => {
*/} */}
<ListItem style={{textAlign: "center"}}> <ListItem style={{textAlign: "center"}}>
<Link to="/docs/about" style={hrefStyle}> <Link to="/docs/about" style={hrefStyle}>
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Docs</div> <div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
<DescriptionIcon style={{marginRight: "5px"}} />
<span style={{marginTop: 2}}>Docs</span>
</div>
</Link> </Link>
</ListItem> </ListItem>
{/* {/*
frontend/src/Workflows.js
+65 -28
View File
@@ -3,6 +3,7 @@ import { useInterval } from 'react-powerhooks';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import Tooltip from '@material-ui/core/Tooltip';
import Divider from '@material-ui/core/Divider'; import Divider from '@material-ui/core/Divider';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField'; import TextField from '@material-ui/core/TextField';
@@ -10,10 +11,13 @@ import FormControl from '@material-ui/core/FormControl';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu'; import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch'; import Switch from '@material-ui/core/Switch';
import CachedIcon from '@material-ui/icons/Cached';
import EditIcon from '@material-ui/icons/Edit';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
//import JSONPretty from 'react-json-pretty'; //import JSONPretty from 'react-json-pretty';
//import JSONPrettyMon from 'react-json-pretty/dist/monikai' //import JSONPrettyMon from 'react-json-pretty/dist/monikai'
import ReactJson from 'react-json-view' import ReactJson from 'react-json-view'
@@ -43,8 +47,9 @@ const Workflows = (props) => {
const [collapseJson, setCollapseJson] = React.useState(false) const [collapseJson, setCollapseJson] = React.useState(false)
const [modalOpen, setModalOpen] = React.useState(false); const [modalOpen, setModalOpen] = React.useState(false);
const [newWorkflowName, setNewWorkflowname] = React.useState(""); const [newWorkflowName, setNewWorkflowName] = React.useState("");
const [newWorkflowDescription, setNewWorkflowDescription] = React.useState(""); const [newWorkflowDescription, setNewWorkflowDescription] = React.useState("");
const [editingWorkflow, setEditingWorkflow] = React.useState({})
const { start, stop } = useInterval({ const { start, stop } = useInterval({
duration: 5000, duration: 5000,
startImmediate: false, startImmediate: false,
@@ -347,21 +352,28 @@ const Workflows = (props) => {
aria-label="more" aria-label="more"
aria-controls="long-menu" aria-controls="long-menu"
aria-haspopup="true" aria-haspopup="true"
style={{color: "white"}}
onClick={menuClick} onClick={menuClick}
> >
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
<Menu <Menu
id="long-menu" id="long-menu"
anchorEl={anchorEl} anchorEl={anchorEl}
keepMounted keepMounted
open={open} open={open}
onClose={() => { onClose={() => {
setOpen(false) setOpen(false)
setAnchorEl(null) setAnchorEl(null)
}} }}
> >
<MenuItem style={{backgroundColor: surfaceColor, color: "white"}} onClick={() => {
setModalOpen(true)
setEditingWorkflow(data)
setNewWorkflowName(data.name)
setNewWorkflowDescription(data.description)
}} key={"change"}>{"Change name"}</MenuItem>
<MenuItem style={{backgroundColor: surfaceColor, color: "white"}} onClick={() => { <MenuItem style={{backgroundColor: surfaceColor, color: "white"}} onClick={() => {
copyWorkflow(data) copyWorkflow(data)
setOpen(false) setOpen(false)
@@ -381,9 +393,17 @@ const Workflows = (props) => {
<div style={{display: "flex", flex: "1"}}> <div style={{display: "flex", flex: "1"}}>
<Grid item style={{flex: "1", justifyContent: "center"}}> <Grid item style={{flex: "1", justifyContent: "center"}}>
<a href={"/workflows/"+data.id}> <a href={"/workflows/"+data.id}>
<Button style={{}} color="primary" variant="outlined" onClick={() => {}}>Edit</Button> <Tooltip color="primary" title="Edit workflow" placement="bottom">
<Button style={{}} color="primary" variant="outlined" style={{marginRight: 10}} onClick={() => {}}>
<EditIcon />
</Button>
</Tooltip>
</a> </a>
<Button style={{}} color="primary" variant="outlined" onClick={() => executeWorkflow(data.id)}>Execute</Button> <Tooltip color="primary" title="Execute workflow" placement="bottom">
<Button style={{}} color="primary" variant="outlined" onClick={() => executeWorkflow(data.id)}>
<PlayArrowIcon />
</Button>
</Tooltip>
</Grid> </Grid>
</div> </div>
</Grid> </Grid>
@@ -504,7 +524,6 @@ const Workflows = (props) => {
*/ */
} }
console.log(data)
return ( return (
<Paper square style={resultPaperAppStyle} onClick={() => {}}> <Paper square style={resultPaperAppStyle} onClick={() => {}}>
<div style={{marginLeft: "10px", marginTop: "5px", marginBottom: "5px", marginRight: "5px", width: boxWidth, backgroundColor: boxColor}}> <div style={{marginLeft: "10px", marginTop: "5px", marginBottom: "5px", marginRight: "5px", width: boxWidth, backgroundColor: boxColor}}>
@@ -555,7 +574,6 @@ const Workflows = (props) => {
const ExecutionDetails = () => { const ExecutionDetails = () => {
var starttime = new Date(selectedExecution.started_at*1000) var starttime = new Date(selectedExecution.started_at*1000)
var endtime = new Date(selectedExecution.started_at*1000) var endtime = new Date(selectedExecution.started_at*1000)
console.log(selectedExecution)
const arg = selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0 ? const arg = selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0 ?
<div> <div>
@@ -629,13 +647,24 @@ const Workflows = (props) => {
if (newWorkflowName.length === 0) { if (newWorkflowName.length === 0) {
return return
} }
var workflowdata = {
"name": newWorkflowName, var method = "POST"
"description": newWorkflowDescription, var extraData = ""
var workflowdata = {}
if (editingWorkflow.id !== undefined) {
method = "PUT"
extraData = "/"+editingWorkflow.id
workflowdata = editingWorkflow
} }
fetch(globalUrl+"/api/v1/workflows", { workflowdata["name"] = newWorkflowName
method: 'POST', workflowdata["description"] = newWorkflowDescription
//console.log(workflowdata)
//return
fetch(globalUrl+"/api/v1/workflows"+extraData, {
method: method,
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Accept': 'application/json', 'Accept': 'application/json',
@@ -650,9 +679,13 @@ const Workflows = (props) => {
} }
return response.json() return response.json()
}) })
.then((responseJson) => { .then((responseJson) => {
window.location.pathname = "/workflows/"+responseJson["id"] if (method === "POST") {
}) window.location.pathname = "/workflows/"+responseJson["id"]
} else {
alert.info("Successfully changed basic info for workflow")
}
})
.catch(error => { .catch(error => {
alert.error(error.toString()) alert.error(error.toString())
}); });
@@ -674,7 +707,7 @@ const Workflows = (props) => {
<DialogTitle><div style={{color: "white"}}>New workflow</div></DialogTitle> <DialogTitle><div style={{color: "white"}}>New workflow</div></DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField
onBlur={(event) => setNewWorkflowname(event.target.value)} onBlur={(event) => setNewWorkflowName(event.target.value)}
InputProps={{ InputProps={{
style:{ style:{
color: "white", color: "white",
@@ -683,6 +716,7 @@ const Workflows = (props) => {
color="primary" color="primary"
placeholder="Name" placeholder="Name"
margin="dense" margin="dense"
defaultValue={newWorkflowName}
fullWidth fullWidth
/> />
<TextField <TextField
@@ -693,6 +727,7 @@ const Workflows = (props) => {
}, },
}} }}
color="primary" color="primary"
defaultValue={newWorkflowDescription}
placeholder="Description" placeholder="Description"
margin="dense" margin="dense"
fullWidth fullWidth
@@ -700,15 +735,15 @@ const Workflows = (props) => {
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button style={{}} onClick={() => setModalOpen(false)} color="primary"> <Button style={{}} onClick={() => setModalOpen(false)} color="primary">
Cancel Cancel
</Button> </Button>
<Button style={{}} disabled={newWorkflowName.length === 0} onClick={() => { <Button style={{}} disabled={newWorkflowName.length === 0} onClick={() => {
setNewWorkflow() setNewWorkflow()
setModalOpen(false) setModalOpen(false)
}} color="primary"> }} color="primary">
Submit Submit
</Button> </Button>
</DialogActions> </DialogActions>
</FormControl> </FormControl>
</Dialog> </Dialog>
@@ -763,7 +798,9 @@ const Workflows = (props) => {
<h2>Executions</h2> <h2>Executions</h2>
</div> </div>
<div style={{flex: "1"}}> <div style={{flex: "1"}}>
<Button color="primary" style={{marginTop: "20px"}} variant="outlined" onClick={() => {alert.info("Refreshing executions"); getWorkflowExecution(selectedWorkflow.id)}}>Refresh</Button> <Button color="primary" style={{marginTop: "20px"}} variant="outlined" onClick={() => {alert.info("Refreshing executions"); getWorkflowExecution(selectedWorkflow.id)}}>
<CachedIcon />
</Button>
</div> </div>
</div> </div>
<Divider style={{marginBottom: "10px", height: "1px", width: "100%", backgroundColor: dividerColor}}/> <Divider style={{marginBottom: "10px", height: "1px", width: "100%", backgroundColor: dividerColor}}/>
frontend/src/defaultCytoscapeStyle.js
+8 -1
View File
@@ -115,6 +115,8 @@ const data = [{
selector: '.success-highlight', selector: '.success-highlight',
css: { css: {
'background-color': '#399645', 'background-color': '#399645',
'border-color': '#399645',
'border-width': '5px',
'transition-property': 'background-color', 'transition-property': 'background-color',
'transition-duration': '0.5s', 'transition-duration': '0.5s',
}, },
@@ -123,6 +125,8 @@ const data = [{
selector: '.failure-highlight', selector: '.failure-highlight',
css: { css: {
'background-color': '#8e3530', 'background-color': '#8e3530',
'border-color': '#8e3530',
'border-width': '5px',
'transition-property': 'background-color', 'transition-property': 'background-color',
'transition-duration': '0.5s', 'transition-duration': '0.5s',
}, },
@@ -141,7 +145,8 @@ const data = [{
css: { css: {
'background-color': '#ffef47', 'background-color': '#ffef47',
'border-color': '#ffef47', 'border-color': '#ffef47',
'transition-property': '#ffef47', 'border-width': '5px',
'transition-property': 'border-width',
'transition-duration': '0.25s', 'transition-duration': '0.25s',
}, },
}, },
@@ -149,6 +154,8 @@ const data = [{
selector: '.awaiting-data-highlight', selector: '.awaiting-data-highlight',
css: { css: {
'background-color': '#f4ad42', 'background-color': '#f4ad42',
'border-color': '#f4ad42',
'border-width': '5px',
'transition-property': 'background-color', 'transition-property': 'background-color',
'transition-duration': '0.5s', 'transition-duration': '0.5s',
}, },