Build with missing files
This commit is contained in:
Frikky
@@ -45,6 +45,11 @@ import AlertTemplate from "./components/AlertTemplate";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import RuntimeDebugger from "./components/RuntimeDebugger.jsx"
|
||||
|
||||
import MFASetUp from './components/MFASetUP.jsx';
|
||||
import ApiExplorerWrapper from './views/ApiExplorerWrapper.jsx';
|
||||
import LeftSideBar from './components/LeftSideBar.jsx';
|
||||
import CodeWorkflow from './views/CodeWorkflow.jsx';
|
||||
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
@@ -204,6 +209,11 @@ const App = (message, props) => {
|
||||
{curpath.includes("/workflows") && curpath.includes("/run") ?
|
||||
<div style={{ height: 60, }} />
|
||||
:
|
||||
isLoggedIn ?
|
||||
<div style={{ position: 'fixed', top: 32, left: 10, zIndex: 100000 }}>
|
||||
<LeftSideBar userdata={userdata} globalUrl={globalUrl} serverside={false} notifications={notifications} />
|
||||
</div>
|
||||
:
|
||||
<Header
|
||||
billingInfo={{}}
|
||||
|
||||
@@ -454,6 +464,7 @@ const App = (message, props) => {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route exact path="/apis/:appid" element={<ApiExplorerWrapper serverside={false} userdata={userdata} isLoggedIn={isLoggedIn} isMobile={false} selectedApp={undefined} isLoaded={isLoaded} isLoggedIn={isLoggedIn} globalUrl={globalUrl} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor} checkLogin={checkLogin} {...props} />} />
|
||||
<Route
|
||||
exact
|
||||
path="/detections/sigma"
|
||||
@@ -525,8 +536,14 @@ const App = (message, props) => {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route exact path="/workflows/:key/code" element={<CodeWorkflow serverside={false} userdata={userdata} globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor}{...props} />} />
|
||||
<Route exact path="/workflows/:key/run" element={<RunWorkflow userdata={userdata} globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor}{...props} /> } />
|
||||
<Route exact path="/workflows/:key/execute" element={<RunWorkflow userdata={userdata} globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor}{...props} /> } />
|
||||
|
||||
<Route exact path="/forms" element={<RunWorkflow serverside={false} userdata={userdata} globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor}{...props} />} />
|
||||
<Route exact path="/forms/:key/run" element={<RunWorkflow serverside={false} userdata={userdata} globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor}{...props} />} />
|
||||
<Route exact path="/forms/:key" element={<RunWorkflow serverside={false} userdata={userdata} globalUrl={globalUrl} isLoaded={isLoaded} isLoggedIn={isLoggedIn} surfaceColor={theme.palette.surfaceColor} inputColor={theme.palette.inputColor}{...props} />} />
|
||||
|
||||
<Route
|
||||
exact
|
||||
path="/docs/:key"
|
||||
@@ -582,6 +599,7 @@ const App = (message, props) => {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route exact path="/login/:key/mfa-setup" element={<MFASetUp setCookie={setCookie} serverside={false} mainColor={theme.palette.backgroundColor} userdata={userdata} stripeKey={undefined} globalUrl={globalUrl} inputColor={theme.palette.inputColor} isLoaded={isLoaded} {...props} />} />
|
||||
<Route
|
||||
exact
|
||||
path="/login_sso"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,546 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Box, Typography, IconButton, CircularProgress, Tooltip } from '@mui/material';
|
||||
import { CheckCircle, Error, ArrowBack, Close, Cached as CachedIcon, Pause as PauseIcon } from '@mui/icons-material';
|
||||
import theme from '../theme.jsx';
|
||||
import ReactJson from "react-json-view-ssr";
|
||||
import { toast } from 'react-toastify';
|
||||
import { validateJson } from "../views/Workflows.jsx";
|
||||
// import HandleJsonCopy from "./ShuffleCodeEditor1";
|
||||
|
||||
const STATUS_CONFIG = {
|
||||
EXECUTING: {
|
||||
color: '#64B5F6',
|
||||
icon: () => <CircularProgress size={16} thickness={4} sx={{ color: '#64B5F6' }} />,
|
||||
label: 'Executing'
|
||||
},
|
||||
SUCCESS: {
|
||||
color: '#4CAF50',
|
||||
icon: () => <CheckCircle sx={{ color: '#4CAF50', fontSize: 16 }} />,
|
||||
label: 'Success'
|
||||
},
|
||||
FINISHED: {
|
||||
color: '#4CAF50',
|
||||
icon: () => <CheckCircle sx={{ color: '#4CAF50', fontSize: 16 }} />,
|
||||
label: 'Finished'
|
||||
},
|
||||
ABORTED: {
|
||||
color: '#F44336',
|
||||
icon: () => <Error sx={{ color: '#F44336', fontSize: 16 }} />,
|
||||
label: 'Aborted'
|
||||
}
|
||||
};
|
||||
|
||||
let to_be_copied = ""
|
||||
|
||||
const handleReactJsonClipboard = (copy) => {
|
||||
toast("Copied JSON path to clipboard, NOT Path")
|
||||
};
|
||||
|
||||
|
||||
const HandleJsonCopy = (base, copy, base_node_name) => {
|
||||
if (typeof copy.name === "string") {
|
||||
copy.name = copy.name.replaceAll(" ", "_");
|
||||
}
|
||||
|
||||
//lol
|
||||
if (typeof base === 'object' || typeof base === 'dict') {
|
||||
base = JSON.stringify(base)
|
||||
}
|
||||
|
||||
if (base_node_name === "execution_argument" || base_node_name === "Execution Argument") {
|
||||
base_node_name = "exec"
|
||||
}
|
||||
|
||||
console.log("COPY: ", base_node_name, copy);
|
||||
|
||||
//var newitem = JSON.parse(base);
|
||||
var newitem = validateJson(base).result
|
||||
to_be_copied = "$" + base_node_name.toLowerCase().replaceAll(" ", "_");
|
||||
for (let copykey in copy.namespace) {
|
||||
if (copy.namespace[copykey].includes("Results for")) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (newitem !== undefined && newitem !== null) {
|
||||
newitem = newitem[copy.namespace[copykey]];
|
||||
if (!isNaN(copy.namespace[copykey])) {
|
||||
to_be_copied += ".#";
|
||||
} else {
|
||||
to_be_copied += "." + copy.namespace[copykey];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (newitem !== undefined && newitem !== null) {
|
||||
newitem = newitem[copy.name];
|
||||
if (!isNaN(copy.name)) {
|
||||
to_be_copied += ".#";
|
||||
} else {
|
||||
to_be_copied += "." + copy.name;
|
||||
}
|
||||
}
|
||||
|
||||
to_be_copied.replaceAll(" ", "_");
|
||||
const elementName = "copy_element_shuffle";
|
||||
var copyText = document.getElementById(elementName);
|
||||
if (copyText !== null && copyText !== undefined) {
|
||||
console.log("NAVIGATOR: ", navigator);
|
||||
const clipboard = navigator.clipboard;
|
||||
if (clipboard === undefined) {
|
||||
toast("Can only copy over HTTPS (port 3443)");
|
||||
return;
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(to_be_copied);
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999); /* For mobile devices *
|
||||
|
||||
/* Copy the text inside the text field */
|
||||
document.execCommand("copy");
|
||||
toast("Copied JSON path to clipboard.")
|
||||
console.log("COPYING!");
|
||||
} else {
|
||||
console.log("Couldn't find element ", elementName);
|
||||
}
|
||||
}
|
||||
|
||||
const ExecuteWorkflow = async (executionData, globalUrl) => {
|
||||
try {
|
||||
const workflowData = executionData.workflow;
|
||||
|
||||
// Execute workflow with original parameters
|
||||
await fetch(`${globalUrl}/api/v1/workflows/${workflowData.id}/execute`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
credentials: 'include',
|
||||
body: workflowData
|
||||
}).then(response => {
|
||||
window.location.href = `/workflows/${workflowData.id}/code?execution_id=` + response.json().execution_id;
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error re-executing workflow:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const ExecutionsList = ({ executions, onSelectExecution, activeExecutionId }) => {
|
||||
return (
|
||||
<Box>
|
||||
{executions.map((execution) => {
|
||||
const status = STATUS_CONFIG[execution.status] || STATUS_CONFIG.ABORTED;
|
||||
return (
|
||||
<Box
|
||||
key={execution.execution_id}
|
||||
onClick={() => onSelectExecution(execution)}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
py: 1,
|
||||
px: 2,
|
||||
borderBottom: '1px solid #2A2A2A',
|
||||
backgroundColor: activeExecutionId === execution.execution_id ?
|
||||
'rgba(255,255,255,0.05)' : 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255,255,255,0.05)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{status.icon()}
|
||||
|
||||
<Box sx={{ ml: 2, flex: 1, overflow: 'hidden' }}>
|
||||
<Typography variant="body2" sx={{
|
||||
color: '#E0E0E0',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}}>
|
||||
{new Date(execution.started_at * 1000).toLocaleString()}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{
|
||||
color: status.color
|
||||
}}>
|
||||
{status.label}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const ExecutionDetail = ({ execution: initialExecution, onBack, globalUrl, onExecutionUpdate, selectedAction, executeWorkflow }) => {
|
||||
const [execution, setExecution] = useState(initialExecution);
|
||||
const [status, setStatus] = useState(STATUS_CONFIG[execution.status] || STATUS_CONFIG.EXECUTING);
|
||||
const [validResult, setValidResult] = useState("{}")
|
||||
|
||||
const abortExecution = async () => {
|
||||
try {
|
||||
await fetch(`${globalUrl}/api/v1/workflows/${execution.workflow.id}/executions/${execution.execution_id}/abort`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
}).then((response) => {
|
||||
if (response.ok) {
|
||||
const updatedExecution = {
|
||||
...execution,
|
||||
status: "ABORTED",
|
||||
};
|
||||
setExecution(updatedExecution);
|
||||
onExecutionUpdate(updatedExecution);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.log("Abort error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setStatus(STATUS_CONFIG[execution.status] || STATUS_CONFIG.EXECUTING);
|
||||
}, [execution]);
|
||||
|
||||
const pollExecutionStatus = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch(`${globalUrl}/api/v1/streams/results`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({
|
||||
execution_id: execution.execution_id,
|
||||
authorization: execution.authorization,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const currentStatus = data.results?.[0]?.status || 'EXECUTING';
|
||||
|
||||
const updatedExecution = {
|
||||
...execution,
|
||||
...data,
|
||||
status: currentStatus
|
||||
};
|
||||
|
||||
setExecution(updatedExecution);
|
||||
onExecutionUpdate(updatedExecution);
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Polling error:', error);
|
||||
}
|
||||
}, [execution, globalUrl, onExecutionUpdate]);
|
||||
|
||||
useEffect(() => {
|
||||
let pollTimeout;
|
||||
if (execution.status === 'EXECUTING') {
|
||||
pollTimeout = setTimeout(() => pollExecutionStatus(), 3000);
|
||||
}
|
||||
|
||||
if (execution?.results?.length === 1) {
|
||||
setValidResult(JSON.parse(execution?.results[0]?.result || "{}"))
|
||||
}
|
||||
|
||||
return () => clearTimeout(pollTimeout);
|
||||
}, [execution.status, pollExecutionStatus]);
|
||||
|
||||
return (
|
||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
p: 2,
|
||||
borderBottom: '1px solid #454545'
|
||||
}}>
|
||||
<IconButton onClick={onBack} size="small" sx={{ mr: 2 }}>
|
||||
<ArrowBack fontSize="small" />
|
||||
</IconButton>
|
||||
<Typography variant="subtitle2" sx={{ color: '#E0E0E0', mr: 2 }}>
|
||||
Execution Details
|
||||
</Typography>
|
||||
{status.icon()}
|
||||
<Typography variant="body2" sx={{ ml: 1, color: status.color }}>
|
||||
{status.label}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ ml: 'auto' }}>
|
||||
{execution.status === "EXECUTING" && (
|
||||
<Tooltip title="Abort workflow" placement="top">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={abortExecution}
|
||||
sx={{ color: theme.palette.error.main }}
|
||||
>
|
||||
<PauseIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
<Tooltip title="Rerun workflow (uses same startnode as the original)" placement="top">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => {
|
||||
ExecuteWorkflow(
|
||||
execution,
|
||||
globalUrl
|
||||
);
|
||||
}}
|
||||
sx={{ color: theme.palette.primary.main }}
|
||||
>
|
||||
<CachedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" sx={{ color: '#888', display: 'block', mb: 1 }}>
|
||||
Started at
|
||||
</Typography>
|
||||
<Typography variant="body2">
|
||||
{new Date(execution.started_at * 1000).toLocaleString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="caption" sx={{ color: '#888', display: 'block', mb: 1 }}>
|
||||
Execution ID
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{
|
||||
backgroundColor: '#2A2A2A',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
fontFamily: 'monospace'
|
||||
}}>
|
||||
{execution.execution_id}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: '#888', display: 'block', mb: 1 }}>
|
||||
Result
|
||||
</Typography>
|
||||
<Box sx={{
|
||||
backgroundColor: '#2A2A2A',
|
||||
borderRadius: 1,
|
||||
overflow: 'auto',
|
||||
maxHeight: '200px'
|
||||
}}>
|
||||
<pre style={{
|
||||
margin: 0,
|
||||
padding: '1rem',
|
||||
fontSize: '12px',
|
||||
color: status.color,
|
||||
fontFamily: "'JetBrains Mono', monospace"
|
||||
}}>
|
||||
{execution?.status === 'EXECUTING' ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', p: 2 }}>
|
||||
<CircularProgress size={24} />
|
||||
<Typography sx={{ ml: 2, color: '#888' }}>Executing...</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
execution?.results?.length === 1 ?
|
||||
<ReactJson
|
||||
src={validResult}
|
||||
theme={theme.palette.jsonTheme}
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
border: `2px solid ${theme.palette.inputColor}`,
|
||||
padding: 10,
|
||||
maxHeight: 450,
|
||||
minheight: 450,
|
||||
overflow: "auto",
|
||||
minWidth: 450,
|
||||
maxWidth: "100%",
|
||||
zIndex: 1200
|
||||
}}
|
||||
enableClipboard={(copy) => {
|
||||
handleReactJsonClipboard(copy);
|
||||
}}
|
||||
collapsed={false}
|
||||
displayDataTypes={false}
|
||||
onSelect={(select) => {
|
||||
var basename = "exec"
|
||||
if (selectedAction !== undefined && selectedAction !== null && Object.keys(selectedAction).length !== 0) {
|
||||
basename = selectedAction.label.toLowerCase().replaceAll(" ", "_")
|
||||
}
|
||||
HandleJsonCopy(validResult, select, basename)
|
||||
}}
|
||||
name={"JSON autocompletion"}
|
||||
/> :
|
||||
<ReactJson
|
||||
src={{}}
|
||||
theme={theme.palette.jsonTheme}
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
border: `2px solid ${theme.palette.inputColor}`,
|
||||
padding: 10,
|
||||
maxHeight: 450,
|
||||
minheight: 450,
|
||||
overflow: "auto",
|
||||
minWidth: 450,
|
||||
maxWidth: "100%",
|
||||
zIndex: 1200
|
||||
}}
|
||||
collapsed={false}
|
||||
enableClipboard={(copy) => { }}
|
||||
displayDataTypes={false}
|
||||
name={"JSON autocompletion"}
|
||||
/>
|
||||
)}
|
||||
</pre>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
const ExecutionPanel = ({
|
||||
workflow,
|
||||
globalUrl,
|
||||
onClose,
|
||||
currentExecution,
|
||||
mainAction
|
||||
}) => {
|
||||
const [executions, setExecutions] = useState([]);
|
||||
const [selectedExecution, setSelectedExecution] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const handleExecutionUpdate = useCallback((updatedExecution) => {
|
||||
setExecutions(prevExecutions => {
|
||||
const updatedExecutions = [...prevExecutions];
|
||||
const index = updatedExecutions.findIndex(
|
||||
e => e.execution_id === updatedExecution.execution_id
|
||||
);
|
||||
if (index !== -1) {
|
||||
updatedExecutions[index] = updatedExecution;
|
||||
}
|
||||
return updatedExecutions;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fetchExecutions = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(`${globalUrl}/api/v2/workflows/${workflow.id}/executions`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setExecutions(data.executions);
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const executionId = urlParams.get('execution_id');
|
||||
if (executionId) {
|
||||
const execution = data.executions.find(e => e.execution_id === executionId);
|
||||
if (execution) {
|
||||
setSelectedExecution(execution);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch executions:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [workflow.id, globalUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchExecutions();
|
||||
}, [fetchExecutions]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentExecution?.execution_id) {
|
||||
setExecutions(prev => {
|
||||
const existingIndex = prev.findIndex(e => e.execution_id === currentExecution.execution_id);
|
||||
if (existingIndex === -1) {
|
||||
return [currentExecution, ...prev];
|
||||
}
|
||||
const updated = [...prev];
|
||||
updated[existingIndex] = currentExecution;
|
||||
return updated;
|
||||
});
|
||||
setSelectedExecution(currentExecution);
|
||||
}
|
||||
}, [currentExecution]);
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: "fit-content",
|
||||
backgroundColor: '#1E1E1E',
|
||||
borderTop: '1px solid #454545',
|
||||
overflow: 'hidden',
|
||||
color: '#CCCCCC',
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{loading && !executions.length ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
) : selectedExecution ? (
|
||||
<ExecutionDetail
|
||||
execution={selectedExecution}
|
||||
onBack={() => {
|
||||
setSelectedExecution(null);
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.delete('execution_id');
|
||||
window.history.pushState({}, '', url);
|
||||
fetchExecutions();
|
||||
}}
|
||||
globalUrl={globalUrl}
|
||||
selecteAction={mainAction}
|
||||
onExecutionUpdate={handleExecutionUpdate}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{
|
||||
p: 2,
|
||||
borderBottom: '1px solid #454545',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Typography variant="subtitle2" sx={{ color: '#E0E0E0' }}>
|
||||
Execution History
|
||||
</Typography>
|
||||
<IconButton size="small" onClick={onClose} sx={{ color: '#888' }}>
|
||||
<Close fontSize="small" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Box sx={{ flex: 1, overflow: 'auto' }}>
|
||||
<ExecutionsList
|
||||
executions={executions}
|
||||
onSelectExecution={(execution) => {
|
||||
setSelectedExecution(execution);
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('execution_id', execution.execution_id);
|
||||
window.history.pushState({}, '', url);
|
||||
}}
|
||||
activeExecutionId={currentExecution?.execution_id}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default ExecutionPanel;
|
||||
@@ -0,0 +1,197 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Paper, Typography, Box, CircularProgress, TextField, Button } from "@mui/material";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const MFASetup = ({ isLoaded, globalUrl, setCookie }) => {
|
||||
const [image2FA, setImage2FA] = useState("");
|
||||
const [secret2FA, setSecret2FA] = useState("");
|
||||
const [mfaCode, setMfaCode] = useState("");
|
||||
const [code, setCode] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
handleGet2FACode();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
const code = window.location.pathname.split("/")[2];
|
||||
setMfaCode(code);
|
||||
}
|
||||
}, [isLoaded]);
|
||||
|
||||
const handleGet2FACode = () => {
|
||||
if (mfaCode === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${globalUrl}/api/v1/users/${mfaCode}/get2fa`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 404) {
|
||||
toast("User not found. Redirecting to login page in 3 seconds...");
|
||||
setTimeout(() => {
|
||||
window.location.pathname = "/login";
|
||||
return;
|
||||
}, 3000);
|
||||
}
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for apps :O!");
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson.success === true) {
|
||||
setImage2FA(responseJson.reason);
|
||||
setSecret2FA(responseJson.extra);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
toast(error.toString());
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (mfaCode) {
|
||||
handleGet2FACode();
|
||||
}
|
||||
}, [mfaCode]);
|
||||
|
||||
const handleVerify2FA = (mfaCode, code, changeMFAActive) => {
|
||||
const data = {
|
||||
code: code,
|
||||
changeMFAActive: changeMFAActive,
|
||||
};
|
||||
|
||||
toast("Verifying 2fa code. Please wait...");
|
||||
|
||||
fetch(`${globalUrl}/api/v1/users/${mfaCode}/set2fa`, {
|
||||
mode: "cors",
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
credentials: "include",
|
||||
crossDomain: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 500) {
|
||||
toast("Wrong code sent. Please try again.");
|
||||
return;
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson.success === true) {
|
||||
toast.success("Successfully setup 2fa. Redirecting in 3 seconds...");
|
||||
for (var key in responseJson["cookies"]) {
|
||||
setCookie(responseJson["cookies"][key].key, responseJson["cookies"][key].value, { path: "/" });
|
||||
}
|
||||
|
||||
const tmpView = new URLSearchParams(window.location.search).get("view");
|
||||
if (tmpView !== undefined && tmpView !== null) {
|
||||
var newUrl = `/${tmpView}`;
|
||||
if (tmpView.startsWith("/")) {
|
||||
newUrl = `${tmpView}`;
|
||||
}
|
||||
window.location.pathname = newUrl;
|
||||
return;
|
||||
}
|
||||
|
||||
if (responseJson.tutorials !== undefined && responseJson.tutorials !== null) {
|
||||
const welcome = responseJson.tutorials.find((element) => element.name === "welcome");
|
||||
if (welcome === undefined || welcome === null) {
|
||||
setTimeout(() => {
|
||||
window.location.pathname = "/welcome";
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.pathname = "/workflows";
|
||||
}, 3000);
|
||||
} else {
|
||||
toast("Failed to setup 2fa. Please try again.");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error:", error);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ margin: "50px auto", width: "500px" }}>
|
||||
<Paper elevation={3} style={{ padding: "30px", backgroundColor: "#212121" }}>
|
||||
<Typography variant="h5" style={{ color: "white", marginBottom: 10, textAlign: "center" }}>
|
||||
Multi-Factor Authentication Setup
|
||||
</Typography>
|
||||
<div style={{ marginTop: 15 }}>
|
||||
<QRCodeSection secret2FA={secret2FA} image2FA={image2FA} />
|
||||
</div>
|
||||
<Typography variant="body1" style={{ color: "white", marginTop: 15 }}>
|
||||
Enter the code from your authenticator app below.
|
||||
</Typography>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="code"
|
||||
label="Code"
|
||||
name="code"
|
||||
autoComplete="code"
|
||||
autoFocus
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === "Enter" && code !== null && code !== "" && code.length === 6) {
|
||||
handleVerify2FA(mfaCode, code, true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => handleVerify2FA(mfaCode, code, true)}
|
||||
style={{
|
||||
backgroundColor: code === null || code === "" || code.length !== 6 ? "gray" : "#f86743",
|
||||
marginTop: 10,
|
||||
color: "#fff",
|
||||
cursor: code === null || code === "" || code.length !== 6 ? "" : "pointer",
|
||||
}}
|
||||
disabled={code === null || code === "" || code.length !== 6}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
</Paper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const QRCodeSection = ({ secret2FA, image2FA }) => {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", width: "100%" }}>
|
||||
{secret2FA && image2FA ? (
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<Typography variant="body2" style={{ color: "white", textAlign: "justify", marginBottom: 10, fontSize: 16 }}>
|
||||
Scan the image below with the two-factor authentication app on your phone. If you can’t use a QR code, use the code {secret2FA} instead.
|
||||
</Typography>
|
||||
<img alt="2FA QR code" src={image2FA} style={{ maxHeight: 200, maxWidth: 200, }} />
|
||||
</div>
|
||||
) : (
|
||||
<CircularProgress style={{ margin: "15px auto" }} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MFASetup;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,466 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Button, Box, Typography, Paper, Toolbar, Divider, CircularProgress } from '@mui/material';
|
||||
|
||||
import {
|
||||
PlayArrow as PlayArrowIcon,
|
||||
Save as SaveIcon,
|
||||
History as HistoryIcon
|
||||
} from '@mui/icons-material';
|
||||
|
||||
import ExecutionPanel from '../components/ExecutionPanel.jsx';
|
||||
import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
|
||||
|
||||
const CodeWorkflow = (defaultprops) => {
|
||||
const { serverside, userdata, globalUrl, isLoaded, isLoggedIn, surfaceColor, inputColor, ...props } = defaultprops;
|
||||
|
||||
const [workflow, setWorkflow] = useState({});
|
||||
|
||||
const [showExecutions, setShowExecutions] = useState(false);
|
||||
// In CodeWorkflow, add this state
|
||||
const [panelHeight, setPanelHeight] = useState(400);
|
||||
const [executions, setExecutions] = useState([]);
|
||||
const [currentExecution, setCurrentExecution] = useState(null);
|
||||
const [mainAction, setMainAction] = useState(null);
|
||||
const editorRef = useRef(null);
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
|
||||
const [editorData, setEditorData] = React.useState({
|
||||
"name": "",
|
||||
"value": "",
|
||||
"field_number": -1,
|
||||
"actionlist": [],
|
||||
"field_id": "",
|
||||
})
|
||||
|
||||
const getSettings = async () => {
|
||||
try {
|
||||
const response = await fetch(`${globalUrl}/api/v1/getsettings`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for getsettings :O!");
|
||||
if (response.status >= 500) {
|
||||
toast("Something went wrong while loading the settings. Please reload.")
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const responseJson = await response.json();
|
||||
setApiKey(responseJson.apikey);
|
||||
console.log("API Key: ", responseJson.apikey);
|
||||
|
||||
return responseJson.apikey;
|
||||
} catch (error) {
|
||||
console.log("Get settings error: ", error.toString());
|
||||
return null;
|
||||
}
|
||||
}
|
||||
// Calculate editor height based on execution panel visibility
|
||||
const getEditorHeight = () => {
|
||||
return `calc(100vh - ${showExecutions ? `${panelHeight + 40}px` : '40px'})`;
|
||||
};
|
||||
|
||||
let url = window.location.pathname;
|
||||
const workflowId = url.split("/")[2];
|
||||
|
||||
const getWorkflow = async (workflow_id, sourcenode) => {
|
||||
try {
|
||||
const response = await fetch(`${globalUrl}/api/v1/workflows/${workflow_id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for workflows :O!");
|
||||
if (response.status >= 500) {
|
||||
toast("Something went wrong while loading the workflow. Please reload.")
|
||||
}
|
||||
}
|
||||
|
||||
const responseJson = await response.json();
|
||||
setWorkflow(responseJson);
|
||||
|
||||
for (let i = 0; i < responseJson.actions.length; i++) {
|
||||
if (responseJson.actions[i].app_id === "3e320a20966d33c9b7e6790b2705f0bf") {
|
||||
console.log("Setting code to: ", responseJson.actions[i].parameters[0].value);
|
||||
setCode(responseJson.actions[i].parameters[0].value);
|
||||
setMainAction(responseJson.actions[i]);
|
||||
|
||||
if (responseJson.actions[i].parameters[0].value.length === 0) {
|
||||
// fetch API key of the user
|
||||
const result = await getSettings();
|
||||
|
||||
console.log("accessible result: ", result);
|
||||
|
||||
// await setCode(`
|
||||
// from shufflepy import Shuffle
|
||||
|
||||
// shuffle = Shuffle(
|
||||
// "${result}",
|
||||
// url='https://shuffler.io',
|
||||
// )
|
||||
// `
|
||||
// );
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("Get workflows error: ", error.toString());
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getWorkflow(workflowId);
|
||||
}, []);
|
||||
|
||||
// In CodeWorkflow component, add this effect:
|
||||
useEffect(() => {
|
||||
if (workflow.id) {
|
||||
// Check URL for execution_id parameter
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const executionId = urlParams.get('execution_id');
|
||||
if (executionId) {
|
||||
setShowExecutions(true); // Show the panel if execution_id is present
|
||||
}
|
||||
}
|
||||
}, [workflow]);
|
||||
|
||||
const [code, setCode] = useState("");
|
||||
const [testResult, setTestResult] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const saveLatestWorkflow = () => {
|
||||
let newWorkflow = workflow;
|
||||
|
||||
console.log("Workflow actions: ", newWorkflow.actions);
|
||||
|
||||
// find the latest "Shuffle tools fork" node
|
||||
for (let i = 0; i < newWorkflow.actions.length; i++) {
|
||||
console.log("Actios: ", newWorkflow.actions[i]);
|
||||
if (newWorkflow.actions[i].app_id === "3e320a20966d33c9b7e6790b2705f0bf") {
|
||||
// update the code
|
||||
console.log("Updating code: ", code);
|
||||
newWorkflow.actions[i].parameters[0].value = code;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
fetch(`${globalUrl}/api/v1/workflows/${workflow.id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify(newWorkflow),
|
||||
}).then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for workflows :O!");
|
||||
toast("Something went wrong while saving the workflow. Please try again.", { type: "error" });
|
||||
} else if (response.status === 200) {
|
||||
toast("Workflow saved successfully!");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getParents = async () => {
|
||||
return [
|
||||
{
|
||||
"label": "Execution Argument",
|
||||
"type": "INTERNAL"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const handleRunCode = async () => {
|
||||
saveLatestWorkflow();
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
let start_node = "";
|
||||
|
||||
for (let i = 0; i < workflow.actions.length; i++) {
|
||||
if (workflow.actions[i].isStartNode) {
|
||||
start_node = workflow.actions[i].id;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${globalUrl}/api/v1/workflows/${workflow.id}/execute`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
"start": start_node,
|
||||
"execution_arguments": "",
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const responseJson = await response.json();
|
||||
const newExecution = {
|
||||
execution_id: responseJson.execution_id,
|
||||
authorization: responseJson.authorization,
|
||||
status: 'EXECUTING',
|
||||
started_at: new Date().toISOString()
|
||||
};
|
||||
setShowExecutions(true);
|
||||
setCurrentExecution(newExecution);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log("Error: ", error);
|
||||
setError(error.toString());
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleSaveCode = async () => {
|
||||
saveLatestWorkflow();
|
||||
};
|
||||
|
||||
const handleEditorDidMount = (editor, monaco) => {
|
||||
if (monaco.languages && monaco.languages.python) {
|
||||
if (monaco.languages.python.pythonDefaults) {
|
||||
monaco.languages.python.pythonDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES2020,
|
||||
allowNonTsExtensions: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
monaco.languages.setLanguageConfiguration('python', {
|
||||
autoClosingPairs: [
|
||||
{ open: '{', close: '}' },
|
||||
{ open: '[', close: ']' },
|
||||
{ open: '(', close: ')' },
|
||||
{ open: '"', close: '"' },
|
||||
{ open: "'", close: "'" }
|
||||
],
|
||||
surroundingPairs: [
|
||||
{ open: '{', close: '}' },
|
||||
{ open: '[', close: ']' },
|
||||
{ open: '(', close: ')' },
|
||||
{ open: '"', close: '"' },
|
||||
{ open: "'", close: "'" }
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditorChange = (value) => {
|
||||
setCode(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh', // Set to full viewport height
|
||||
backgroundColor: '#252526'
|
||||
}}>
|
||||
{/* IDE-like toolbar */}
|
||||
<Toolbar
|
||||
variant="dense"
|
||||
sx={{
|
||||
backgroundColor: '#333333',
|
||||
borderBottom: '1px solid #454545',
|
||||
minHeight: '40px',
|
||||
px: 1,
|
||||
flex: '0 0 auto' // Prevent toolbar from flexing
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{
|
||||
color: '#CCCCCC',
|
||||
marginRight: 2
|
||||
}}
|
||||
>
|
||||
{workflow.name || 'Untitled Workflow'}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
onClick={handleRunCode}
|
||||
disabled={loading}
|
||||
startIcon={<PlayArrowIcon />}
|
||||
sx={{
|
||||
backgroundColor: '#0098FF',
|
||||
'&:hover': {
|
||||
backgroundColor: '#0076CE'
|
||||
},
|
||||
textTransform: 'none',
|
||||
minWidth: '80px'
|
||||
}}
|
||||
>
|
||||
{loading ? 'Running...' : 'Run'}
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
startIcon={<HistoryIcon />}
|
||||
onClick={() => setShowExecutions(true)}
|
||||
sx={{
|
||||
color: '#CCCCCC',
|
||||
borderColor: '#454545',
|
||||
'&:hover': {
|
||||
borderColor: '#666666',
|
||||
backgroundColor: 'rgba(255,255,255,0.1)'
|
||||
},
|
||||
textTransform: 'none'
|
||||
}}
|
||||
>
|
||||
Show Executions
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
onClick={handleSaveCode}
|
||||
startIcon={<SaveIcon />}
|
||||
sx={{
|
||||
color: '#CCCCCC',
|
||||
borderColor: '#454545',
|
||||
'&:hover': {
|
||||
borderColor: '#666666',
|
||||
backgroundColor: 'rgba(255,255,255,0.1)'
|
||||
},
|
||||
textTransform: 'none',
|
||||
marginLeft: 1
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
|
||||
{/* Editor container */}
|
||||
<Box sx={{
|
||||
height: getEditorHeight(),
|
||||
// flex: '1 1 auto', // Allow editor to grow and shrink
|
||||
// minHeight: 0, // Important for flex child
|
||||
transition: 'height 0.2s ease-in-out',
|
||||
position: 'relative' // Needed for Editor's absolute positioning
|
||||
}}>
|
||||
{workflow && mainAction ? (
|
||||
<ShuffleCodeEditor
|
||||
expansionModalOpen={true}
|
||||
setExpansionModalOpen={true}
|
||||
isCloud={true}
|
||||
globalUrl={globalUrl}
|
||||
workflowExecutions={executions}
|
||||
getParents={getParents}
|
||||
selectedAction={mainAction}
|
||||
aiSubmit={() => { }}
|
||||
toolsAppId={mainAction.app_id}
|
||||
codedata={code}
|
||||
setcodedata={setCode}
|
||||
parameterName={editorData.name}
|
||||
fieldCount={editorData.field_number}
|
||||
actionlist={editorData.actionlist}
|
||||
fieldname={editorData.field_id}
|
||||
changeActionParameterCodeMirror={() => { }}
|
||||
activeDialog={() => { }}
|
||||
setActiveDialog={() => { }}
|
||||
fullScreenMode={true}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* <Editor
|
||||
height="100%" // Take full height of container
|
||||
language="python"
|
||||
theme="vs-dark"
|
||||
value={code}
|
||||
onChange={handleEditorChange}
|
||||
onMount={handleEditorDidMount}
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
fontSize: 14,
|
||||
lineHeight: 24,
|
||||
fontFamily: "'JetBrains Mono', Consolas, monospace",
|
||||
fontLigatures: true,
|
||||
scrollBeyondLastLine: false,
|
||||
automaticLayout: true,
|
||||
contextmenu: false,
|
||||
wordWrap: 'on',
|
||||
snippetSuggestions: 'top',
|
||||
quickSuggestions: {
|
||||
other: true,
|
||||
comments: false,
|
||||
strings: false
|
||||
},
|
||||
intellisenseOptions: {
|
||||
includeAutoCompletionsFromLanguageFile: true,
|
||||
maxCompletionItems: 10
|
||||
}
|
||||
}}
|
||||
/> */}
|
||||
</Box>
|
||||
|
||||
{/* Create an input element called "copy_element_shuffle" that is not visible */}
|
||||
<input type="text" id="copy_element_shuffle" style={{ position: "absolute", left: "-9999px" }} />
|
||||
|
||||
{/* Results Panel */}
|
||||
{(error || testResult) && (
|
||||
<Box sx={{
|
||||
height: '200px',
|
||||
backgroundColor: '#1E1E1E',
|
||||
borderTop: '1px solid #454545',
|
||||
overflow: 'auto',
|
||||
flex: '0 0 auto' // Prevent panel from flexing
|
||||
}}>
|
||||
{error && (
|
||||
<Box sx={{ p: 2, color: '#f44336' }}>
|
||||
<Typography variant="subtitle2">Error:</Typography>
|
||||
<pre style={{ margin: 0 }}>{error}</pre>
|
||||
</Box>
|
||||
)}
|
||||
{testResult && (
|
||||
<Box sx={{ p: 2, color: '#4caf50' }}>
|
||||
<Typography variant="subtitle2">Test Result:</Typography>
|
||||
<pre style={{ margin: 0 }}>{JSON.stringify(testResult, null, 2)}</pre>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* In CodeWorkflow component */}
|
||||
{showExecutions && (
|
||||
<ExecutionPanel
|
||||
workflow={workflow}
|
||||
globalUrl={globalUrl}
|
||||
onClose={() => setShowExecutions(false)}
|
||||
currentExecution={currentExecution}
|
||||
height={panelHeight}
|
||||
onHeightChange={setPanelHeight} // Add this prop to handle height updates
|
||||
mainAction={mainAction}
|
||||
/>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeWorkflow;
|
||||
Reference in New Issue
Block a user