From e3dca4c17e0631196cd9f0e328956e5dbeb00e31 Mon Sep 17 00:00:00 2001 From: frikky Date: Wed, 13 May 2020 15:35:03 +0200 Subject: [PATCH] Added icons and better execution view --- README.md | 4 +- frontend/src/AngularWorkflow.js | 64 ++++++++++-------- frontend/src/App.js | 4 +- frontend/src/Header.js | 18 +++++- frontend/src/Workflows.js | 93 +++++++++++++++++++-------- frontend/src/defaultCytoscapeStyle.js | 9 ++- 6 files changed, 130 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index cf6c0e6f..1f1bbbd5 100644 --- a/README.md +++ b/README.md @@ -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 - * 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) +- * Change workflow name - Workflows - IMPORT DEFAULT WORKFLOWS - Create some towards e.g. TheHive & MISP. - Documentation - General documentation /docs rewrite - API doc - 1. In Shuffle. 2. In e.g. python -- Add random secret to orborus -- Change workflow name - Fix scheduler - Use variables in e.g. JSON body +- Add random secret to orborus ``` # 1. export DATASTORE_EMULATOR_HOST=0.0.0.0:8000 diff --git a/frontend/src/AngularWorkflow.js b/frontend/src/AngularWorkflow.js index 84b05fdb..7861ed75 100644 --- a/frontend/src/AngularWorkflow.js +++ b/frontend/src/AngularWorkflow.js @@ -24,7 +24,7 @@ import FormGroup from '@material-ui/core/FormGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Checkbox from '@material-ui/core/Checkbox'; - +import CreateIcon from '@material-ui/icons/Create'; import PlayArrowIcon from '@material-ui/icons/PlayArrow'; import AspectRatioIcon from '@material-ui/icons/AspectRatio'; 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) => { //console.log(responseJson) // Loop nodes and find results @@ -243,8 +245,8 @@ const AngularWorkflow = (props) => { currentnode.removeClass('success-highlight') currentnode.removeClass('failure-highlight') currentnode.removeClass('awaiting-data-highlight') - currentnode.addClass('executing-highlight') incomingEdges.addClass('success-highlight') + currentnode.addClass('executing-highlight') break case "WAITING": currentnode.removeClass('not-executing-highlight') @@ -325,11 +327,11 @@ const AngularWorkflow = (props) => { curelements[i].removeClass("executing-highlight") curelements[i].addClass("failure-highlight") } else { - curelements[i].removeClass('not-executing-highlight') - curelements[i].removeClass('executing-highlight') - curelements[i].removeClass('success-highlight') - curelements[i].removeClass('awaiting-data-highlight') - curelements[i].removeClass('failure-highlight') + //curelements[i].removeClass('not-executing-highlight') + //curelements[i].removeClass('executing-highlight') + //curelements[i].removeClass('success-highlight') + //curelements[i].removeClass('awaiting-data-highlight') + //curelements[i].removeClass('failure-highlight') } } } else if (responseJson.status === "FINISHED") { @@ -412,7 +414,7 @@ const AngularWorkflow = (props) => { setLastSaved(true) fetch(globalUrl+"/api/v1/workflows/"+props.match.params.key, { - method: 'PUT', + method: 'PUT', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', @@ -1378,7 +1380,7 @@ const AngularWorkflow = (props) => { return (
-
+
{workflow.workflow_variables.map(variable=> { return (
@@ -2265,23 +2267,29 @@ const AngularWorkflow = (props) => {
{data.name}:
-
{ - changeActionParameterVariant("STATIC_VALUE", count) + +
{ + changeActionParameterVariant("STATIC_VALUE", count) + }}> + +
+ +  |  + +
{ + changeActionParameterVariant("ACTION_RESULT", count) }}> - static -
+ +
+  |  -
{ - changeActionParameterVariant("ACTION_RESULT", count) - }}> - action -
-  |  -
{ - changeActionParameterVariant("WORKFLOW_VARIABLE", count) - }}> - var -
+ +
{ + changeActionParameterVariant("WORKFLOW_VARIABLE", count) + }}> + +
+
{datafield}
@@ -3941,14 +3949,17 @@ const AngularWorkflow = (props) => { return null } + const cytoscapeViewWidths = 600 const bottomBarStyle = { position: "fixed", right: 20, left: leftBarSize, bottom: 0, - minWidth: "100%", + minWidth: cytoscapeViewWidths, + maxWidth: cytoscapeViewWidths, marginLeft: 20, marginBottom: 20, + zIndex: 10, } const topBarStyle= { @@ -3956,7 +3967,8 @@ const AngularWorkflow = (props) => { right: 0, left: leftBarSize, top: appBarSize, - minWidth: "60%", + minWidth: cytoscapeViewWidths, + maxWidth: cytoscapeViewWidths, marginLeft: 20, marginBottom: 20, } diff --git a/frontend/src/App.js b/frontend/src/App.js index dbec4bd9..2ff6cc37 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -38,12 +38,12 @@ import AlertTemplate from "react-alert-template-basic"; import { positions, Provider } from "react-alert"; // Testing - localhost -//const globalUrl = "http://192.168.3.6:5001" +const globalUrl = "http://192.168.3.6:5001" //console.log("HOST: ", process.env) // Production - backend proxy forwarding in nginx -const globalUrl = window.location.origin +//const globalUrl = window.location.origin const surfaceColor = "#27292D" const inputColor = "#383B40" diff --git a/frontend/src/Header.js b/frontend/src/Header.js index 422a859b..d8345961 100644 --- a/frontend/src/Header.js +++ b/frontend/src/Header.js @@ -8,6 +8,9 @@ import ListItem from '@material-ui/core/ListItem'; import Button from '@material-ui/core/Button'; 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'; const hoverColor = "#f85a3e" @@ -138,12 +141,18 @@ const Header = props => { -
Workflows
+
+ + Workflows +
-
Apps
+
+ + Apps +
{/* @@ -155,7 +164,10 @@ const Header = props => { */} -
Docs
+
+ + Docs +
{/* diff --git a/frontend/src/Workflows.js b/frontend/src/Workflows.js index a360fa8f..4b9a0174 100644 --- a/frontend/src/Workflows.js +++ b/frontend/src/Workflows.js @@ -3,6 +3,7 @@ import { useInterval } from 'react-powerhooks'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; +import Tooltip from '@material-ui/core/Tooltip'; import Divider from '@material-ui/core/Divider'; import Button from '@material-ui/core/Button'; 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 Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; -import MoreVertIcon from '@material-ui/icons/MoreVert'; import FormControlLabel from '@material-ui/core/FormControlLabel'; 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 JSONPrettyMon from 'react-json-pretty/dist/monikai' import ReactJson from 'react-json-view' @@ -43,8 +47,9 @@ const Workflows = (props) => { const [collapseJson, setCollapseJson] = 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 [editingWorkflow, setEditingWorkflow] = React.useState({}) const { start, stop } = useInterval({ duration: 5000, startImmediate: false, @@ -347,21 +352,28 @@ const Workflows = (props) => { aria-label="more" aria-controls="long-menu" aria-haspopup="true" + style={{color: "white"}} onClick={menuClick} > { + id="long-menu" + anchorEl={anchorEl} + keepMounted + open={open} + onClose={() => { setOpen(false) setAnchorEl(null) }} - > + > + { + setModalOpen(true) + setEditingWorkflow(data) + setNewWorkflowName(data.name) + setNewWorkflowDescription(data.description) + }} key={"change"}>{"Change name"} { copyWorkflow(data) setOpen(false) @@ -381,9 +393,17 @@ const Workflows = (props) => {
- + + + - + + +
@@ -504,7 +524,6 @@ const Workflows = (props) => { */ } - console.log(data) return ( {}}>
@@ -555,7 +574,6 @@ const Workflows = (props) => { const ExecutionDetails = () => { var starttime = 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 ?
@@ -629,13 +647,24 @@ const Workflows = (props) => { if (newWorkflowName.length === 0) { return } - var workflowdata = { - "name": newWorkflowName, - "description": newWorkflowDescription, + + var method = "POST" + var extraData = "" + var workflowdata = {} + + if (editingWorkflow.id !== undefined) { + method = "PUT" + extraData = "/"+editingWorkflow.id + workflowdata = editingWorkflow } - fetch(globalUrl+"/api/v1/workflows", { - method: 'POST', + workflowdata["name"] = newWorkflowName + workflowdata["description"] = newWorkflowDescription + //console.log(workflowdata) + //return + + fetch(globalUrl+"/api/v1/workflows"+extraData, { + method: method, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', @@ -650,9 +679,13 @@ const Workflows = (props) => { } return response.json() }) - .then((responseJson) => { - window.location.pathname = "/workflows/"+responseJson["id"] - }) + .then((responseJson) => { + if (method === "POST") { + window.location.pathname = "/workflows/"+responseJson["id"] + } else { + alert.info("Successfully changed basic info for workflow") + } + }) .catch(error => { alert.error(error.toString()) }); @@ -674,7 +707,7 @@ const Workflows = (props) => {
New workflow
 setNewWorkflowname(event.target.value)} + onBlur={(event) => setNewWorkflowName(event.target.value)} InputProps={{ style:{ color: "white", @@ -683,6 +716,7 @@ const Workflows = (props) => { color="primary" placeholder="Name" margin="dense" + defaultValue={newWorkflowName} fullWidth /> { }, }} color="primary" + defaultValue={newWorkflowDescription} placeholder="Description" margin="dense" fullWidth @@ -700,15 +735,15 @@ const Workflows = (props) => { - - + + Submit + @@ -763,7 +798,9 @@ const Workflows = (props) => {

Executions

- +
diff --git a/frontend/src/defaultCytoscapeStyle.js b/frontend/src/defaultCytoscapeStyle.js index f70fda27..8cce248c 100644 --- a/frontend/src/defaultCytoscapeStyle.js +++ b/frontend/src/defaultCytoscapeStyle.js @@ -115,6 +115,8 @@ const data = [{ selector: '.success-highlight', css: { 'background-color': '#399645', + 'border-color': '#399645', + 'border-width': '5px', 'transition-property': 'background-color', 'transition-duration': '0.5s', }, @@ -123,6 +125,8 @@ const data = [{ selector: '.failure-highlight', css: { 'background-color': '#8e3530', + 'border-color': '#8e3530', + 'border-width': '5px', 'transition-property': 'background-color', 'transition-duration': '0.5s', }, @@ -141,7 +145,8 @@ const data = [{ css: { 'background-color': '#ffef47', 'border-color': '#ffef47', - 'transition-property': '#ffef47', + 'border-width': '5px', + 'transition-property': 'border-width', 'transition-duration': '0.25s', }, }, @@ -149,6 +154,8 @@ const data = [{ selector: '.awaiting-data-highlight', css: { 'background-color': '#f4ad42', + 'border-color': '#f4ad42', + 'border-width': '5px', 'transition-property': 'background-color', 'transition-duration': '0.5s', },