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

Fixed response forwarding for OpenAPI apps with all details

Browse Source
This commit is contained in:
frikky
2021-09-27 03:01:36 +02:00
parent 89d5a5e895
commit 9d1b5a41e9
5 changed files with 99 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Apps.jsx
-10
View File
@@ -9,7 +9,6 @@ import { useTheme } from '@material-ui/core/styles';
import YAML from 'yaml'
import {Link} from 'react-router-dom';
import ReactJson from 'react-json-view'
import { useAlert } from "react-alert";
import Dropzone from '../components/Dropzone';
@@ -620,15 +619,6 @@ const Apps = (props) => {
</MenuItem>
)
})}
{/*
<ReactJson
src={JSON.parse(showResult)}
theme="solarized"
collapsed={false}
displayDataTypes={true}
name={"Example return value"}
/>
*/}
</div>
)
}
frontend/src/views/Docs.jsx
+46 -18
View File
@@ -6,7 +6,7 @@ import {BrowserView, MobileView} from "react-device-detect";
import {Link} from 'react-router-dom';
import {Tooltip, Divider, Button, Menu, MenuItem, Typography, Paper, List} from '@material-ui/core';
import {Edit as EditIcon} from '@material-ui/icons';
import {Link as LinkIcon, Edit as EditIcon} from '@material-ui/icons';
const Body = {
maxWidth: '1000px',
@@ -28,6 +28,7 @@ const Docs = (props) => {
const { globalUrl, selectedDoc, serverside, isMobile, } = props;
const theme = useTheme();
const [mobile, setMobile] = useState(isMobile === true ? true : false);
const [data, setData] = useState("");
const [firstrequest, setFirstrequest] = useState(true);
const [list, setList] = useState([]);
@@ -107,14 +108,21 @@ const Docs = (props) => {
if (firstrequest) {
setFirstrequest(false)
if (!serverside) {
if (window.innerWidth < 768) {
setMobile(true)
}
}
if (selectedDoc !== undefined) {
setData(selectedDoc.reason)
setList(selectedDoc.list)
setListLoaded(true)
} else {
fetchDocList()
fetchDocs(props.match.params.key)
if (!serverside) {
fetchDocList()
fetchDocs(props.match.params.key)
}
}
}
@@ -194,10 +202,10 @@ const Docs = (props) => {
const markdownStyle = {
color: "rgba(255, 255, 255, 0.65)",
flex: "1",
maxWidth: isMobile ? "100%" : 750,
maxWidth: mobile ? "100%" : 750,
overflow: "hidden",
paddingBottom: 200,
marginLeft: isMobile ? 0 : 275,
marginLeft: mobile ? 0 : 275,
}
function OuterLink(props) {
@@ -221,34 +229,39 @@ const Docs = (props) => {
)
}
function Heading(props) {
const Heading = (props) => {
const element = React.createElement(`h${props.level}`, {style: {marginTop: 50}}, props.children)
const [hover, setHover] = useState(false)
var extraInfo = ""
if (props.level === 1) {
extraInfo =
<div style={{backgroundColor: theme.palette.inputColor, padding: 15, borderRadius: theme.palette.borderRadius, marginBottom: 30, display: "flex",}}>
<div style={{flex: 3, display: "flex", vAlign: "center",}}>
<Typography style={{display: "inline", marginTop: 6, }}>
<a rel="norefferer" target="_blank" href={selectedMeta.link} target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>
<Button style={{}} variant="outlined">
<EditIcon /> &nbsp;&nbsp;Edit
</Button>
</a>
</Typography>
<div style={{height: "100%", width: 1, backgroundColor: "white", marginLeft: 50, marginRight: 50, }} />
<Typography style={{display: "inline", marginTop: 9, }}>
{mobile ? null :
<Typography style={{display: "inline", marginTop: 6, }}>
<a rel="norefferer" target="_blank" href={selectedMeta.link} target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>
<Button style={{}} variant="outlined">
<EditIcon /> &nbsp;&nbsp;Edit
</Button>
</a>
</Typography>
}
{mobile ? null :
<div style={{height: "100%", width: 1, backgroundColor: "white", marginLeft: 50, marginRight: 50, }} />
}
<Typography style={{display: "inline", marginTop: 11, }}>
{selectedMeta.read_time} minute{selectedMeta.read_time === 1 ? "" : "s"} to read
</Typography>
</div>
<div style={{flex: 2}}>
{selectedMeta.contributors === undefined || selectedMeta.contributors === null ? "" :
{mobile || selectedMeta.contributors === undefined || selectedMeta.contributors === null ? "" :
<div style={{margin: 10, height: "100%", display: "inline",}}>
{selectedMeta.contributors.slice(0,7).map((data, index) => {
return (
<a rel="norefferer" target="_blank" href={data.url} target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>
<Tooltip title={data.url} placement="bottom">
<img alt={data.url} src={data.image} style={{height: 40, borderRadius: 40, }} />
<img alt={data.url} src={data.image} style={{marginTop: 5, marginRight: 10, height: 40, borderRadius: 40, }} />
</Tooltip>
</a>
)
@@ -260,9 +273,20 @@ const Docs = (props) => {
}
return (
<Typography>
<Typography
onMouseOver={() => {
setHover(true)
}} >
{props.level !== 1 ? <Divider style={{width: "90%", marginTop: 40, backgroundColor: theme.palette.inputColor}} /> : null}
{element}
{/*hover ? <LinkIcon onMouseOver={() => {setHover(true)}} style={{cursor: "pointer", display: "inline", }} onClick={() => {
window.location.href += "#hello"
console.log(window.location)
//window.history.pushState('page2', 'Title', '/page2.php');
//window.history.replaceState('page2', 'Title', '/page2.php');
}} />
: ""
*/}
{extraInfo}
</Typography>
)
@@ -345,6 +369,10 @@ const Docs = (props) => {
>
{list.map((data, index) => {
const item = data.name
if (item === undefined) {
return null
}
const path = "/docs/"+item
const newname = item.charAt(0).toUpperCase()+item.substring(1).split("_").join(" ").split("-").join(" ")
return (
frontend/src/views/Workflows.jsx
-171
View File
@@ -12,7 +12,6 @@ import {DataGrid, GridToolbarContainer, GridDensitySelector, GridToolbar} from '
//import JSONPretty from 'react-json-pretty';
//import JSONPrettyMon from 'react-json-pretty/dist/monikai'
import ReactJson from 'react-json-view'
import Dropzone from '../components/Dropzone';
import {Link} from 'react-router-dom';
@@ -1372,181 +1371,11 @@ const Workflows = (props) => {
return string.split(search).join(replace);
}
const resultsPaper = (data) => {
var boxWidth = "2px"
var boxColor = "orange"
if (data.status === "ABORTED" || data.status === "UNFINISHED" || data.status === "FAILURE"){
boxColor = "red"
} else if (data.status === "FINISHED" || data.status === "SUCCESS") {
boxColor = "green"
} else if (data.status === "SKIPPED" || data.status === "EXECUTING") {
boxColor = "yellow"
} else {
boxColor = "green"
}
var t = new Date(data.started_at*1000)
var showResult = data.result.trim()
const validate = validateJson(showResult)
if (validate.valid) {
showResult = <ReactJson
src={validate.result}
theme="solarized"
collapsed={collapseJson}
displayDataTypes={false}
name={"Results for "+data.action.label}
/>
} else {
// FIXME - have everything parsed as json, either just for frontend
// or in the backend?
/*
const newdata = {"result": data.result}
showResult = <ReactJson
src={JSON.parse(newdata)}
theme="solarized"
collapsed={collapseJson}
displayDataTypes={false}
name={"Results for "+data.action.name}
/>
*/
}
return (
<Paper key={data.execution_id} square style={resultPaperAppStyle} onClick={() => {}}>
<div style={{marginLeft: "10px", marginTop: "5px", marginBottom: "5px", marginRight: "5px", width: boxWidth, backgroundColor: boxColor}}>
</div>
<Grid container style={{margin: "10px 10px 10px 10px", flex: "1"}}>
<Grid style={{display: "flex", flexDirection: "column", width: "100%"}}>
<Grid item style={{flex: "1"}}>
<h4 style={{marginBottom: "0px", marginTop: "10px"}}><b>Name</b>: {data.action.label}</h4>
</Grid>
<Grid item style={{flex: "1", justifyContent: "center"}}>
App: {data.action.app_name}, Version: {data.action.app_version}
</Grid>
<Grid item style={{flex: "1", justifyContent: "center"}}>
Action: {data.action.name}, Environment: {data.action.environment}, Status: {data.status}
</Grid>
<div style={{display: "flex", flex: "1"}}>
<Grid item style={{flex: "10", justifyContent: "center"}}>
Started: {t.toISOString()}
</Grid>
</div>
<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: dividerColor}}/>
<div style={{display: "flex", flex: "1"}}>
<Grid item style={{flex: "10", justifyContent: "center"}}>
{showResult}
</Grid>
</div>
</Grid>
</Grid>
</Paper>
)
}
const resultsHandler = Object.getOwnPropertyNames(selectedExecution).length > 0 && selectedExecution.results !== null ?
<div>
{selectedExecution.results.sort((a, b) => a.started_at - b.started_at).map((data, index) => {
return (
<div key={index}>
{resultsPaper(data)}
</div>
)
})}
</div>
:
<div>
No results yet
</div>
const resultsLength = Object.getOwnPropertyNames(selectedExecution).length > 0 && selectedExecution.results !== null ? selectedExecution.results.length : 0
const ExecutionDetails = () => {
var starttime = new Date(selectedExecution.started_at*1000)
var endtime = new Date(selectedExecution.started_at*1000)
var parsedArgument = selectedExecution.execution_argument
if (selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0) {
parsedArgument = replaceAll(parsedArgument, " None", " \"None\"");
}
var arg = null
if (selectedExecution.execution_argument !== undefined && selectedExecution.execution_argument.length > 0) {
var showResult = selectedExecution.execution_argument.trim()
const validate = validateJson(showResult)
arg = validate.valid ?
<ReactJson
src={validate.result}
theme="solarized"
collapsed={true}
displayDataTypes={false}
name={"Execution argument / webhook"}
/>
: showResult
}
var lastresult = null
if (selectedExecution.result !== undefined && selectedExecution.result.length > 0) {
var showResult = selectedExecution.result.trim()
const validate = validateJson(showResult)
lastresult = validate.valid ?
<ReactJson
src={validate.result}
theme="solarized"
collapsed={true}
displayDataTypes={false}
name={"Last result from execution"}
/>
: showResult
}
/*
<div>
ID: {selectedExecution.execution_id}
</div>
<div>
<b>Last node:</b> {selectedExecution.workflow.actions.find(data => data.id === selectedExecution.last_node).actions[0].label}
</div>
*/
if (Object.getOwnPropertyNames(selectedExecution).length > 0 && selectedExecution.workflow.actions !== null) {
return (
<div style={{overflowX: "hidden"}}>
<div>
<b>Status:</b> {selectedExecution.status}
</div>
<div>
<b>Started:</b> {starttime.toISOString()}
</div>
<div>
<b>Finished:</b> {endtime.toISOString()}
</div>
{/*
<div>
<b>Last Result:</b> {lastresult}
</div>
*/}
<div style={{marginTop: 10}}>
{arg}
</div>
<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: dividerColor}}/>
{resultsHandler}
</div>
)
}
return (
executionLoading ?
<div style={{marginTop: 25, textAlign: "center"}}>
<CircularProgress />
</div>
:
<h4>
There are no executiondetails yet. Click "execute" to run your first one.
</h4>
)
}
// Can create and set workflows
const setNewWorkflow = (name, description, tags, defaultReturnValue, editingWorkflow, redirect) => {