Aditya
1286 lines
38 KiB
React
1286 lines
38 KiB
React
import React, { useState, useEffect, useContext } from 'react';
|
|
|
|
import {
|
|
TextField,
|
|
Link,
|
|
Button,
|
|
ButtonGroup,
|
|
CircularProgress,
|
|
Select,
|
|
MenuList,
|
|
MenuItem,
|
|
FormControl,
|
|
InputLabel,
|
|
Autocomplete,
|
|
Tooltip,
|
|
Typography,
|
|
IconButton,
|
|
Switch,
|
|
} from '@mui/material';
|
|
import { Context } from '../context/ContextApi.jsx';
|
|
|
|
import { toast } from "react-toastify"
|
|
import { makeStyles } from "@mui/styles";
|
|
import {getTheme} from '../theme.jsx';
|
|
import dayjs from 'dayjs';
|
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
|
|
import Pagination from '@mui/material/Pagination';
|
|
import { triggers as alltriggers } from "../views/AngularWorkflow.jsx"
|
|
import {
|
|
DatePicker,
|
|
DateTimePicker,
|
|
LocalizationProvider,
|
|
} from '@mui/x-date-pickers'
|
|
|
|
import {
|
|
OpenInNew as OpenInNewIcon,
|
|
PlayArrow as PlayArrowIcon,
|
|
Insights as InsightsIcon,
|
|
Replay as ReplayIcon,
|
|
EditNote as EditNoteIcon,
|
|
AccountTree as AccountTreeIcon,
|
|
Cached as CachedIcon,
|
|
FilterAltOff as FilterAltOffIcon,
|
|
Send as SendIcon,
|
|
} from '@mui/icons-material';
|
|
|
|
import { DataGrid } from '@mui/x-data-grid'
|
|
import {
|
|
Search as SearchIcon,
|
|
} from "@mui/icons-material";
|
|
|
|
import {
|
|
InputAdornment,
|
|
} from "@mui/material"
|
|
|
|
import ClearIcon from '@mui/icons-material/Clear';
|
|
|
|
const useStyles = makeStyles({
|
|
notchedOutline: {
|
|
borderColor: "#f85a3e !important",
|
|
},
|
|
});
|
|
|
|
const RuntimeDebugger = (props) => {
|
|
const { userdata, globalUrl, } = props
|
|
|
|
const classes = useStyles();
|
|
|
|
const [workflowId, setWorkflowId] = useState("")
|
|
const [status, setStatus] = useState("")
|
|
const [endTime, setEndTime] = useState("")
|
|
const [startTime, setStartTime] = useState("")
|
|
const [totalCount, setTotalCount] = useState(0)
|
|
const {themeMode, supportEmail} = useContext(Context)
|
|
const theme = getTheme(themeMode)
|
|
|
|
const [workflow, setWorkflow] = useState({})
|
|
const [ignoreOrg, setIgnoreOrg] = useState(false)
|
|
const [searchLoading, setSearchLoading] = useState(false)
|
|
const [rowCursor, setCursor] = useState("")
|
|
const [rowsPerPage, setRowsPerPage] = useState(20)
|
|
const [maxExecutionCount, setMaxExecutionCount] = useState(50)
|
|
const [resultRows, setResultRows] = useState([])
|
|
const [selectedWorkflowExecutions, setSelectedWorkflowExecutions] = useState([])
|
|
const [suborgWorkflowRuns, setSuborgWorkflowRuns] = useState(false)
|
|
const [paginationModel, setPaginationModel] = useState({
|
|
page: 0,
|
|
pageSize: 10,
|
|
})
|
|
const [openWorkflowMenu, setOpenWorkflowMenu] = useState(false)
|
|
const [workflows, setWorkflows] = useState([
|
|
{"id": "", "name": "All Workflows",}
|
|
])
|
|
|
|
if (document != undefined) {
|
|
document.title = "Workflow Run Debugger"
|
|
}
|
|
|
|
// Shitty workflow search on purpose :)
|
|
const handleWorkflowUsageCount = (workflows) => {
|
|
if (workflows === undefined || workflows === null || workflows.length === 0) {
|
|
return
|
|
}
|
|
|
|
setTotalCount(0)
|
|
|
|
var starttime = ""
|
|
var endtime = ""
|
|
var count = 0
|
|
try {
|
|
starttime = startTime === undefined || startTime === null || startTime === "" ? "" : new Date(startTime).toISOString()
|
|
endtime = endTime === undefined || endTime === null || endTime == "" ? "" : new Date(endTime).toISOString()
|
|
} catch (e) {
|
|
toast("Invalid date format", { type: "error" })
|
|
}
|
|
|
|
var maxworkflows = 5
|
|
|
|
//console.log("Looking for MAX this amount of workflows: ", maxworkflows)
|
|
for (let key in workflows) {
|
|
if (key > maxworkflows) {
|
|
break
|
|
}
|
|
|
|
const workflowId = workflows[key].id
|
|
|
|
if (workflowId === undefined || workflowId === null || workflowId === "") {
|
|
continue
|
|
}
|
|
|
|
// Fetch the data for the workflow
|
|
var url = `${globalUrl}/api/v1/workflows/${workflowId}/executions/count`
|
|
if (starttime !== "") {
|
|
url += `?start_time=${starttime}`
|
|
}
|
|
|
|
if (endtime !== "") {
|
|
if (starttime !== "") {
|
|
url += `&end_time=${endtime}`
|
|
} else {
|
|
url += `?end_time=${endtime}`
|
|
}
|
|
}
|
|
|
|
fetch(url, {
|
|
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!");
|
|
return;
|
|
}
|
|
|
|
return response.json()
|
|
})
|
|
.then((data) => {
|
|
if (data.success) {
|
|
if (data.count !== undefined && data.count !== null) {
|
|
count += data.count
|
|
}
|
|
} else {
|
|
console.log("Failed to get workflow usage count: ", data)
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
})
|
|
}
|
|
|
|
setTimeout(() => {
|
|
setTotalCount(count)
|
|
}, maxworkflows*300)
|
|
}
|
|
|
|
const submitSearch = (workflowId, status, startTime, endTime, cursor, limit, suborg_runs) => {
|
|
handleWorkflowUsageCount(workflows)
|
|
//setResultRows([])
|
|
setSearchLoading(true)
|
|
const fetchData = {
|
|
workflow_id: workflowId,
|
|
cursor: cursor,
|
|
limit: limit,
|
|
|
|
status: status.toUpperCase(),
|
|
start_time: startTime,
|
|
end_time: endTime,
|
|
ignore_org: ignoreOrg,
|
|
suborg_runs: suborg_runs,
|
|
}
|
|
|
|
fetch(`${globalUrl}/api/v1/workflows/search`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
credentials: "include",
|
|
body: JSON.stringify(fetchData),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setSearchLoading(false)
|
|
if (data.success) {
|
|
if (data.runs !== undefined && data.runs !== null && data.runs.length > 0) {
|
|
for (let key in data.runs) {
|
|
data.runs[key].id = data.runs[key].execution_id
|
|
|
|
// make started_at field into ISO string
|
|
//data.runs[key].endTimestamp = data.runs[key].ended_at.toISOString().slice(0, 19).replace('T', ' ')
|
|
const startTimestamp = new Date(data.runs[key].started_at*1000)
|
|
data.runs[key].startTimestamp = startTimestamp.toISOString().slice(0, 19).replace('T', ' ')
|
|
|
|
const endTimestamp = new Date(data.runs[key].completed_at*1000)
|
|
data.runs[key].endTimestamp = endTimestamp.toISOString().slice(0, 19).replace('T', ' ')
|
|
if (data.runs[key].completed_at === 0 || data.runs[key].completed_at === null) {
|
|
data.runs[key].endTimestamp = ""
|
|
}
|
|
|
|
if (data.runs[key]?.workflow_id === data.runs[key]?.execution_id && data.runs[key].type === "AGENT") {
|
|
data.runs[key].workflow.name = "Agent Execution"
|
|
}
|
|
}
|
|
|
|
|
|
// Add 20 empty rows to the end of the resultRows array
|
|
// This is to make sure that the scrollbar is always visible
|
|
setResultRows(data.runs)
|
|
} else {
|
|
toast("No results found. Keeping old runs")
|
|
}
|
|
} else {
|
|
toast("Failed to search for runs. Please try again.")
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setSearchLoading(false)
|
|
console.error("Error:", error);
|
|
toast("Failed to search for runs. Please try again (2)")
|
|
})
|
|
}
|
|
|
|
|
|
const getAvailableWorkflows = (workflowId) => {
|
|
fetch(globalUrl + "/api/v1/workflows", {
|
|
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!");
|
|
return;
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson !== undefined) {
|
|
var foundWorkflows = [{"id": "", "name": "All Workflows",}]
|
|
foundWorkflows.push(...responseJson)
|
|
setWorkflows(foundWorkflows)
|
|
|
|
if (workflowId !== undefined && workflowId !== null && workflowId !== "" && workflowId.length === 36) {
|
|
for (var key in responseJson) {
|
|
if (responseJson[key].id === workflowId) {
|
|
setWorkflow(responseJson[key])
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error getting workflows: " + error);
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
|
|
// Find workflow_id in url query
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const workflowId = urlParams.get('workflow_id');
|
|
if (workflowId !== undefined && workflowId !== null && workflowId !== "" && workflowId.length === 36) {
|
|
setWorkflowId(workflowId)
|
|
|
|
// find the workflow in workflows and select it
|
|
for (let key in workflows) {
|
|
if (workflows[key].id === workflowId) {
|
|
setWorkflow(workflows[key])
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
getAvailableWorkflows(workflowId)
|
|
|
|
const foundStatus = urlParams.get('status');
|
|
if (foundStatus !== undefined && foundStatus !== null && foundStatus !== "") {
|
|
setStatus(foundStatus)
|
|
}
|
|
}, [])
|
|
|
|
const forceContinue = (execution) => {
|
|
console.log(`FORCE CONTINUE execution ${execution.execution_id} for workflow ${execution.workflow.id}`)
|
|
|
|
fetch(`${globalUrl}/api/v1/workflows/${execution.workflow.id}/executions/${execution.execution_id}/rerun`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.success) {
|
|
if (data.reason !== undefined && data.reason !== null && data.reason !== "") {
|
|
toast("Successful response: " + data.reason)
|
|
} else {
|
|
toast("Successfully forced continue")
|
|
}
|
|
} else {
|
|
if (data.reason !== undefined && data.reason !== null && data.reason !== "") {
|
|
toast(`Failed to force continue: ${data.reason}`)
|
|
} else {
|
|
toast("Failed to force continue")
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
toast(`Failed to force continue: ${error}`)
|
|
})
|
|
}
|
|
const imageSize = 30
|
|
const timenowUnix = Math.floor(Date.now() / 1000)
|
|
const columns = [
|
|
{
|
|
field: 'execution_source',
|
|
headerName: 'Source',
|
|
width: 75,
|
|
renderCell: (params) => {
|
|
var foundSource = <PlayArrowIcon style={{color: theme.palette.primary.main, height: imageSize, width: imageSize, }} />
|
|
|
|
var source = params.row.execution_source
|
|
if (source === "schedule") {
|
|
foundSource = <img src={alltriggers[1].large_image} alt="schedule" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
|
|
} else if (source === "webhook") {
|
|
foundSource = <img src={alltriggers[0].large_image} alt="webhook" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
|
|
} else if (source === "subflow" || source.length === 36) {
|
|
foundSource = <img src={alltriggers[3].large_image} alt="subflow" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
|
|
source = "subflow"
|
|
} else if (source === "rerun" || source.length === 36) {
|
|
foundSource = <ReplayIcon style={{color: theme.palette.primary.secondary, height: imageSize, width: imageSize, }} />
|
|
source = "rerun of a previous run"
|
|
} else if (source === "form") {
|
|
foundSource = <EditNoteIcon style={{color: theme.palette.primary.secondary, height: imageSize, width: imageSize, }} />
|
|
} else if (source === "single_action" || source == "single_api" || source === "direct_api") {
|
|
foundSource = <SendIcon color="secondary" style={{height: imageSize-5, }} />
|
|
source = "Single API call"
|
|
} else if (params?.row?.type === "AGENT") {
|
|
foundSource = <img src={theme.palette.singulBlackWhite} alt="agent" style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
|
|
} else {
|
|
source = "manual"
|
|
}
|
|
|
|
var imageSource = "";
|
|
if (params?.row?.org?.id?.length > 0) {
|
|
if (params?.row?.org?.image?.length > 0){
|
|
imageSource = params?.row?.org?.image
|
|
}else {
|
|
imageSource = "/images/no_image.png"
|
|
}
|
|
} else {
|
|
if (userdata?.active_org?.image?.length > 0){
|
|
imageSource = userdata?.active_org?.image
|
|
}else {
|
|
imageSource = "/images/no_image.png"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span style={{}} onClick={() => {
|
|
//setStatus(params.row.status)
|
|
}}>
|
|
{userdata?.active_org?.creator_org?.length === 0 && suborgWorkflowRuns ? (
|
|
<img src={imageSource} alt={source} style={{borderRadius: theme.palette?.borderRadius, height: imageSize, width: imageSize, }} />
|
|
) : null}
|
|
<Tooltip title={source} placement="top">
|
|
{foundSource}
|
|
</Tooltip>
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
field: 'status',
|
|
headerName: 'Status',
|
|
width: 100,
|
|
renderCell: (params) => (
|
|
<span style={{cursor: "pointer", }} onClick={() => {
|
|
setStatus(params.row.status)
|
|
}}>
|
|
{params.row.status}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
field: 'workflow.name',
|
|
headerName: 'Workflow Name',
|
|
width: 250,
|
|
renderCell: (params) => (
|
|
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", cursor: "pointer", }} onClick={() => {
|
|
setWorkflowId(params.row.workflow.id)
|
|
|
|
for (let key in workflows) {
|
|
if (workflows[key].id === params.row.workflow.id) {
|
|
setWorkflow(workflows[key])
|
|
break
|
|
}
|
|
}
|
|
}}>
|
|
<span>{params.row.workflow.name}</span>
|
|
{params?.row?.org?.id?.length > 0 &&
|
|
<Tooltip title={(
|
|
<div style={{display: "flex", }}>
|
|
<img src={params.row.org.image || "/images/no_image.png"} alt={params.row.org.name} style={{height: 24, width: 24, borderRadius: 12, }} />
|
|
<Typography variant="body2" style={{marginLeft: 5, }}>{params.row.org.name}</Typography>
|
|
</div>
|
|
)} placement="top" arrow>
|
|
<AccountTreeIcon style={{color: "#B0B0B0", height: "24px", width: "24px", marginLeft: 10}} />
|
|
</Tooltip>
|
|
}
|
|
</div>
|
|
),
|
|
},
|
|
|
|
{
|
|
field: 'workflow results',
|
|
headerName: 'Results',
|
|
width: 75,
|
|
renderCell: (params) => {
|
|
//console.log("PARAMS: ", params)
|
|
var extraItems = 0
|
|
if (params.row.workflow.triggers !== null) {
|
|
for (let key in params.row.workflow.triggers) {
|
|
if (params.row.workflow.triggers[key].app_name === "User Input" || params.row.workflow.triggers[key].app_name === "Shuffle Workflow") {
|
|
extraItems += 1
|
|
}
|
|
}
|
|
}
|
|
|
|
const actionLength = params.row.workflow.actions === null ? 0 : params.row.workflow.actions.length+extraItems
|
|
const resultLength = params.row.results === null ? 0 : params.row.results.length
|
|
|
|
//console.log("actionLength: ", actionLength, " resultLength: ", resultLength)
|
|
return (
|
|
<span style={{}} onClick={() => {
|
|
}}>
|
|
{resultLength} / {actionLength}
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
field: 'finished',
|
|
headerName: 'Finished',
|
|
width: 75,
|
|
renderCell: (params) => {
|
|
var foundItems = 0
|
|
var foundSkipped = 0
|
|
if (params.row.results !== null && params.row.results !== undefined) {
|
|
for (let key in params.row.results) {
|
|
if (params.row.results[key].status === "SUCCESS") {
|
|
foundItems += 1
|
|
}
|
|
|
|
if (params.row.results[key].status === "SKIPPED") {
|
|
foundSkipped += 1
|
|
}
|
|
}
|
|
}
|
|
|
|
var foundError = ""
|
|
if (foundItems + foundSkipped < params.row.workflow.actions.length && params.row.status === "FINISHED") {
|
|
foundError = "Workflow is done, but all nodes are not finished. This most likely indicates a problem with the workflow"
|
|
}
|
|
|
|
return (
|
|
<Tooltip title={foundError} placement="top">
|
|
<span style={{backgroundColor: foundError.length > 0 ? "rgba(244,0,0,0.6)" : "inherit"}} onClick={() => {
|
|
}}>
|
|
{foundItems}
|
|
</span>
|
|
</Tooltip>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
field: 'skipped',
|
|
headerName: 'Skipped',
|
|
width: 75,
|
|
renderCell: (params) => {
|
|
var foundItems = 0
|
|
if (params.row.results !== null && params.row.results !== undefined) {
|
|
for (let key in params.row.results) {
|
|
if (params.row.results[key].status === "SKIPPED") {
|
|
foundItems += 1
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span style={{}} onClick={() => {
|
|
}}>
|
|
{foundItems}
|
|
</span>
|
|
)
|
|
},
|
|
},
|
|
{ field: 'startTimestamp', headerName: 'Start time (UTC)', width: 160,
|
|
renderCell: (params) => {
|
|
const comparisonTimestamp = params.row.completed_at === 0 ? timenowUnix : params.row.completed_at
|
|
const hasError = comparisonTimestamp-params.row.started_at > 300
|
|
|
|
return (
|
|
<Tooltip title={hasError ? "More than 5 minutes from start to finish" : ""} placement="top">
|
|
<span style={{cursor: "pointer", backgroundColor: !hasError ? "inherit" : "rgba(244,0,0,0.4)",}} onClick={() => {
|
|
console.log("Zoom in on end timestamp is this one: ", params.row.endTimestamp)
|
|
//setEndTimestamp(params.row.endTimestamp)
|
|
|
|
// Make a new Date() from params.row.startTimestamp and set it in the endTime
|
|
const newEndTime = new Date(params.row.startTimestamp)
|
|
if (newEndTime !== null && newEndTime !== undefined && newEndTime !== "" && newEndTime !== "Invalid Date") {
|
|
// Translate newEndTime to UTC no matter what timezone we are in. Based it on local()
|
|
// Plus 1 minute to make sure it comes in
|
|
setEndTime(dayjs(newEndTime.setMinutes(newEndTime.getMinutes()+1)))
|
|
|
|
// Use dayjs to translate it into something useful
|
|
|
|
// Remove 5 minutes from it and set startTime
|
|
//newEndTime.setMinutes(newEndTime.getMinutes()-5)
|
|
//setStartTime(dayjs(newEndTime))
|
|
}
|
|
}}>
|
|
{params.row.startTimestamp}
|
|
</span>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
},
|
|
{ field: 'endTimestamp', headerName: 'End time (UTC)', width: 160, },
|
|
{
|
|
field: 'id',
|
|
headerName: 'Explore',
|
|
width: 120,
|
|
renderCell: (params) => {
|
|
const parsedResult = params.row.result === null || params.row.result === undefined || params.row.result === "" ? "" : params.row.result
|
|
|
|
var errorReason = ""
|
|
var hasError = parsedResult !== null && parsedResult !== undefined && parsedResult !== "" ? parsedResult.includes("{%") && parsedResult.includes("%}") : false
|
|
|
|
if (hasError) {
|
|
errorReason = "Liquid parsing error"
|
|
}
|
|
|
|
// if success: false
|
|
// if node == FAILURE or ABORTED
|
|
if (parsedResult.includes(`\"success\": false`)) {
|
|
errorReason = "success: false in last result"
|
|
hasError = true
|
|
}
|
|
|
|
if (!hasError && parsedResult.includes(`\"status\":`)) {
|
|
// Look for any status that is 300 or higher
|
|
const statusSplit = parsedResult.split(`\"status\":`)
|
|
if (statusSplit.length > 1) {
|
|
var foundStatus = statusSplit[1].trim()
|
|
// Check if pattern is \d,
|
|
if (foundStatus.includes(",")) {
|
|
const foundStatusSplit = foundStatus.split(",")
|
|
|
|
if (foundStatusSplit.length > 1) {
|
|
foundStatus = foundStatusSplit[0].trim()
|
|
// Check if it's a number
|
|
}
|
|
} else {
|
|
foundStatus = ""
|
|
}
|
|
|
|
if (!isNaN(foundStatus) && foundStatus >= 300) {
|
|
errorReason = "Status code: "+foundStatus
|
|
hasError = true
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!hasError) {
|
|
// Find last node that isn't skipped and check status
|
|
var lastresult = {}
|
|
for (var key in params.row.results) {
|
|
const result = params.row.results[key]
|
|
if (result.status === "SKIPPED") {
|
|
continue
|
|
}
|
|
|
|
if (result.completed_at === undefined || result.completed_at === null) {
|
|
continue
|
|
}
|
|
|
|
if (result.completed_at >= lastresult.completed_at) {
|
|
lastresult = result
|
|
}
|
|
}
|
|
|
|
if (lastresult.id !== undefined && lastresult.status !== "SUCCESS" && lastresult.status !== "SKIPPED") {
|
|
errorReason = "Bad status for last node: "+lastresult.status
|
|
hasError = true
|
|
}
|
|
}
|
|
|
|
if (!hasError && params.row.notifications_created !== null && params.row.notifications_created !== undefined && params.row.notifications_created !== 0) {
|
|
hasError = true
|
|
errorReason = "Generated notifications: "+params.row.notifications_created
|
|
}
|
|
|
|
return (
|
|
<div style={{display: "flex", }}>
|
|
<Tooltip arrow placement="left" title={
|
|
params.row.type === "AGENT" ?
|
|
"See agent result"
|
|
:
|
|
<Typography variant="body2" style={{whiteSpace: "pre-line", padding: 10, }}>
|
|
Workflow result: {errorReason}<br/><br/>
|
|
{params.row.result !== null && params.row.result !== undefined && params.row.result !== "" ?
|
|
params.row.result
|
|
:
|
|
null
|
|
}
|
|
</Typography>
|
|
}>
|
|
<span style={{backgroundColor: !hasError ? "inherit" : "rgba(244,0,0,0.45)", display: "flex", }}>
|
|
{params.row.type === "AGENT" ?
|
|
<Link href={`/agents?execution_id=${params.row.execution_id}&authorization=${params.row.authorization}`} target="_blank" rel="noopener noreferrer">
|
|
<OpenInNewIcon fontSize="small" style={{marginTop: 7, }} />
|
|
</Link>
|
|
:
|
|
<Link href={`/workflows/${params.row.workflow.id}?execution_id=${params.row.id}`} target="_blank" rel="noopener noreferrer">
|
|
<OpenInNewIcon fontSize="small" style={{marginTop: 7, }} />
|
|
</Link>
|
|
}
|
|
</span>
|
|
</Tooltip>
|
|
<Tooltip arrow title={`Force continue workflow. Only workflows for workflows in EXECUTING state. This is NOT a rerun, but way for Shuffle to figure out the next steps automatically. If the execution doesn't finish even after trying this, please contact ${supportEmail}`}>
|
|
<IconButton
|
|
style={{marginLeft: 5, }}
|
|
disabled={params.row.status !== "EXECUTING"}
|
|
onClick={() => {
|
|
forceContinue(params.row)
|
|
|
|
}}
|
|
>
|
|
<PlayArrowIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip arrow title="Explore workflow run logs">
|
|
<IconButton
|
|
style={{marginLeft: 5, }}
|
|
onClick={() => {
|
|
window.open(`${globalUrl}/api/v1/workflows/search/${params.row.id}`, "_blank")
|
|
}}
|
|
disabled={userdata.region_url !== "https://shuffler.io"}
|
|
>
|
|
<InsightsIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
]
|
|
|
|
useEffect(() => {
|
|
setPaginationModel(prev => ({
|
|
...prev,
|
|
pageSize: rowsPerPage
|
|
}))
|
|
}, [rowsPerPage])
|
|
|
|
useEffect(() => {
|
|
// Check if the user is currently focusing a texxtfield or not
|
|
// If they are, don't submit the search
|
|
if (document.activeElement.tagName === "INPUT") {
|
|
return
|
|
}
|
|
|
|
submitSearch(workflowId, status, startTime, endTime, rowCursor, maxExecutionCount, suborgWorkflowRuns)
|
|
}, [workflowId, status, startTime, endTime])
|
|
|
|
const textfieldStyle = {
|
|
marginTop: 7,
|
|
marginLeft: 5,
|
|
}
|
|
|
|
const handleStartTimeChange = (date) => {
|
|
setStartTime(date)
|
|
}
|
|
|
|
const handleEndTimeChange = (date) => {
|
|
setEndTime(date)
|
|
}
|
|
|
|
const abortExecution = (workflowId, executionId) => {
|
|
fetch(`${globalUrl}/api/v1/workflows/${workflowId}/executions/${executionId}/abort`,
|
|
{
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for ABORT EXECUTION :O!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.catch((error) => {
|
|
toast.error("Error aborting execution: "+error.toString())
|
|
});
|
|
};
|
|
|
|
const handleWorkflowSelectionUpdate = (e, isUserinput) => {
|
|
if (e.target.value === undefined || e.target.value === null || e.target.value.id === undefined) {
|
|
console.log("Returning as there's no id")
|
|
return null
|
|
}
|
|
|
|
console.log("DATA: ", e.target.value)
|
|
|
|
setWorkflow(e.target.value)
|
|
setWorkflowId(e.target.value.id)
|
|
setSuborgWorkflowRuns(false)
|
|
|
|
submitSearch(e.target.value.id, status, startTime, endTime, rowCursor, maxExecutionCount, false)
|
|
}
|
|
|
|
const executeWorkflow = (execution) => {
|
|
const data = {
|
|
execution_argument: execution.execution_argument,
|
|
start: execution.start,
|
|
execution_source: "rerun",
|
|
};
|
|
|
|
fetch(`${globalUrl}/api/v1/workflows/${execution.workflow.id}/execute?start=${execution.start}`,
|
|
{
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
body: JSON.stringify(data),
|
|
}
|
|
)
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for WORKFLOW EXECUTION :O!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (!responseJson.success) {
|
|
toast("Error executing workflow: "+responseJson.error)
|
|
} else {
|
|
console.log("Executed workflow: ", responseJson)
|
|
submitSearch(workflowId, status, startTime, endTime, rowCursor, maxExecutionCount, suborgWorkflowRuns)
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
toast("Failed to execute workflow: "+error.toString())
|
|
});
|
|
}
|
|
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [filteredRows, setFilteredRows] = useState([]);
|
|
const [defaultRows, setDefaultRows] = useState([]);
|
|
|
|
const handleQueryChange = (e) => {
|
|
const query = e.target.value.toLowerCase();
|
|
setSearchQuery(query);
|
|
}
|
|
|
|
useEffect(() => {
|
|
setDefaultRows(resultRows);
|
|
}, [resultRows]);
|
|
|
|
useEffect(() => {
|
|
if (searchQuery.trim() === "") {
|
|
setFilteredRows(defaultRows);
|
|
} else {
|
|
const filterRow = defaultRows.filter((data) => {
|
|
|
|
//Filter workflow base on the workflow status
|
|
if (data.status.toLowerCase().includes(searchQuery)) {
|
|
return true;
|
|
}
|
|
|
|
//Filter workflow base on workflow name
|
|
if (data.workflow.name.toLowerCase().includes(searchQuery)) {
|
|
return true;
|
|
}
|
|
|
|
//Filter the workflow base on execution argument
|
|
if (data.execution_argument && data.execution_argument.length > 0) {
|
|
if (data.execution_argument.toLowerCase().includes(searchQuery)) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
//Filter the workflow base on the result
|
|
if (data.results && data.results.length > 0) {
|
|
for (let result of data.results) {
|
|
if (result && result.result && result.result.toLowerCase().includes(searchQuery)) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
|
|
return false;
|
|
});
|
|
setFilteredRows(filterRow);
|
|
}
|
|
}, [searchQuery, defaultRows]);
|
|
|
|
return (
|
|
<div style={{minWidth: 1150, maxWidth: 1150, margin: "auto", }}>
|
|
<div style={{display: "flex", paddingTop: 50, }}>
|
|
<div style={{display: 'flex', flexDirection: 'column'}}>
|
|
<div style={{display: "flex", width: "100%", }}>
|
|
<Typography variant="h3" style={{flex: 3, whiteSpace: "nowrap" }}>
|
|
Workflow Run Debugger {totalCount !== 0 ? ` (~${totalCount})` : ""}
|
|
</Typography>
|
|
|
|
{selectedWorkflowExecutions.length > 0 ?
|
|
<ButtonGroup>
|
|
<Tooltip title="Reruns ALL selected workflows. This will make a new execution for them, and not continue the existing.">
|
|
<Button
|
|
variant="outlined"
|
|
color="secondary"
|
|
style={{maxHeight: 40, marginTop: 25, marginLeft: 20, }}
|
|
onClick={() => {
|
|
|
|
for (var i = 0; i < selectedWorkflowExecutions.length; i++) {
|
|
const selected = selectedWorkflowExecutions[i]
|
|
executeWorkflow(selected)
|
|
}
|
|
|
|
toast("Reran "+selectedWorkflowExecutions.length+" workflow run!")
|
|
setSelectedWorkflowExecutions([])
|
|
|
|
}}
|
|
>
|
|
Rerun Selected ({selectedWorkflowExecutions.length})
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip title="Aborts ALL selected workflows in EXECUTING state">
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
style={{maxHeight: 40, marginTop: 25, }}
|
|
onClick={() => {
|
|
toast("Attempting to abort "+selectedWorkflowExecutions.length+" workflow runs...")
|
|
|
|
var aborted = 0
|
|
for (var i = 0; i < selectedWorkflowExecutions.length; i++) {
|
|
const selected = selectedWorkflowExecutions[i]
|
|
if (selected.status === "EXECUTING") {
|
|
abortExecution(selected.workflow.id, selected.execution_id)
|
|
aborted += 1
|
|
}
|
|
}
|
|
|
|
if (aborted === 0) {
|
|
toast("No workflows were aborted as they are not executing.")
|
|
} else {
|
|
toast("Aborted "+aborted+" workflows.")
|
|
// Research
|
|
submitSearch(workflowId, status, startTime, endTime, rowCursor, maxExecutionCount, suborgWorkflowRuns)
|
|
|
|
setSelectedWorkflowExecutions([])
|
|
}
|
|
|
|
}}
|
|
>
|
|
Abort Selected ({selectedWorkflowExecutions.length})
|
|
</Button>
|
|
</Tooltip>
|
|
</ButtonGroup>
|
|
|
|
: null}
|
|
|
|
{userdata.support === true ?
|
|
<Button
|
|
variant={ignoreOrg ? "contained" : "outlined"}
|
|
color="secondary"
|
|
style={{marginLeft: 20, maxHeight: 40, marginTop: 25, }}
|
|
onClick={() => {
|
|
setIgnoreOrg(!ignoreOrg)
|
|
}}
|
|
>
|
|
{ignoreOrg ? "Ignoring Org" : "Ignore Org (Support Only)"}
|
|
</Button>
|
|
: null}
|
|
</div>
|
|
<div style={{display: "flex", justifyContent: "space-between", width: "100%"}}>
|
|
<div style={{position: 'relative', right: 10, marginBottom: 10}}>
|
|
<TextField
|
|
fullWidth
|
|
value={searchQuery}
|
|
style={{
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.textColor,
|
|
marginTop: 20,
|
|
marginLeft: 10,
|
|
marginRight: 12,
|
|
width: 643,
|
|
height: 51,
|
|
borderRadius: 4,
|
|
fontSize: 16,
|
|
}}
|
|
InputProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.textColor,
|
|
fontSize: "1em",
|
|
height: 51,
|
|
width: 643,
|
|
borderRadius: 4,
|
|
},
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<SearchIcon style={{ marginLeft: 5}} />
|
|
</InputAdornment>
|
|
),
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
{searchQuery.length > 0 && (
|
|
<ClearIcon
|
|
style={{
|
|
color: "white",
|
|
cursor: "pointer",
|
|
marginRight: 10
|
|
}}
|
|
onClick={() => setSearchQuery('')}
|
|
/>
|
|
)}
|
|
</InputAdornment>
|
|
),
|
|
|
|
}}
|
|
onChange={(e)=>{handleQueryChange(e)}}
|
|
color="primary"
|
|
placeholder="Filter by Workflow Name, Status, Execution Argument, Results"
|
|
id="shuffle_search_field"
|
|
/>
|
|
<Tooltip title="Set the maximum number of workflow executions to retrieve in search results" placement="top">
|
|
<FormControl style={{ minWidth: 120, marginTop: 20 }}>
|
|
<InputLabel id="max-execution-count-label" style={{ fontSize: '0.875rem' }}>Max Results</InputLabel>
|
|
<Select
|
|
labelId="max-execution-count-label"
|
|
id="max-execution-count-select"
|
|
value={maxExecutionCount}
|
|
label="Max Results"
|
|
size="small"
|
|
onChange={(e) => {
|
|
setMaxExecutionCount(e.target.value)
|
|
submitSearch(workflowId, status, startTime, endTime, rowCursor, e.target.value, suborgWorkflowRuns)
|
|
}}
|
|
style={{
|
|
height: 50,
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.textColor,
|
|
}}
|
|
>
|
|
<MenuItem value={10}>10</MenuItem>
|
|
<MenuItem value={25}>25</MenuItem>
|
|
<MenuItem value={50}>50</MenuItem>
|
|
<MenuItem value={100}>100</MenuItem>
|
|
<MenuItem value={200}>200</MenuItem>
|
|
<MenuItem value={500}>500</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Tooltip>
|
|
</div>
|
|
{userdata?.active_org?.creator_org?.length === 0 ? (
|
|
<div style={{display: "flex", margin: 'auto',marginTop: 20,justifyContent: 'center', alignItems: 'center', }}>
|
|
<Switch
|
|
checked={suborgWorkflowRuns}
|
|
onChange={() => {
|
|
setSuborgWorkflowRuns(!suborgWorkflowRuns);
|
|
//set selected workflow to all workflows when switching between suborg and all workflows
|
|
setWorkflowId("")
|
|
setWorkflow({"id": "", "name": "All Workflows"})
|
|
setStatus("")
|
|
setStartTime("")
|
|
setEndTime("")
|
|
setSearchQuery("")
|
|
setMaxExecutionCount(50)
|
|
submitSearch("", "", "", "", rowCursor, 50, !suborgWorkflowRuns)}
|
|
}
|
|
color="secondary"
|
|
/>
|
|
<Typography variant="body2">Show workflow runs from suborgs</Typography>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form onSubmit={(e) => {
|
|
submitSearch(workflowId, status, startTime, endTime, rowCursor, maxExecutionCount, suborgWorkflowRuns)
|
|
}} style={{display: "flex", justifyContent: "center", alignItems: "center", }}>
|
|
<FormControl fullWidth style={{marginTop: 5, }}>
|
|
<InputLabel id="status-label">Status</InputLabel>
|
|
<Select
|
|
labelId="status-label"
|
|
id="status-label-select"
|
|
value={status}
|
|
label="Status"
|
|
onChange={(event) => {
|
|
console.log("Changed: ", event.target)
|
|
setStatus(event.target.value)
|
|
}}
|
|
>
|
|
<MenuItem value="">No selection</MenuItem>
|
|
<MenuItem value="FINISHED">FINISHED</MenuItem>
|
|
<MenuItem value="EXECUTING">EXECUTING</MenuItem>
|
|
<MenuItem value="WAITING">WAITING</MenuItem>
|
|
<MenuItem value="ABORTED">ABORTED</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
{/*
|
|
<TextField
|
|
label="Workflow ID"
|
|
fullWidth
|
|
value={workflowId}
|
|
onChange={(e) => {
|
|
setWorkflowId(e.target.value)
|
|
}}
|
|
style={textfieldStyle}
|
|
/>
|
|
*/}
|
|
<Autocomplete
|
|
id="workflow_search"
|
|
value={workflow}
|
|
open={openWorkflowMenu}
|
|
onOpen={()=>{setOpenWorkflowMenu(true)}}
|
|
onClose={() => {setOpenWorkflowMenu(false)}}
|
|
classes={{ inputRoot: classes.inputRoot }}
|
|
ListboxProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.textColor,
|
|
},
|
|
}}
|
|
getOptionLabel={(option) => {
|
|
if (option === undefined || option === null ||
|
|
option.name === undefined || option.name === null
|
|
) {
|
|
return "No Workflow Selected";
|
|
}
|
|
|
|
const newname = (
|
|
option.name.charAt(0).toUpperCase() + option.name.substring(1)
|
|
).replaceAll("_", " ");
|
|
return newname;
|
|
}}
|
|
options={[{
|
|
"name": "Agent Runs",
|
|
"id": "AGENT",
|
|
}].concat(workflows)}
|
|
fullWidth
|
|
style={{
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
height: 50,
|
|
borderRadius: 4,
|
|
marginLeft: 5,
|
|
marginBottom: 3,
|
|
}}
|
|
onChange={(event, newValue) => {
|
|
console.log("Found value: ", newValue)
|
|
|
|
var parsedinput = { target: { value: newValue } }
|
|
|
|
// For variables
|
|
if (typeof newValue === 'string' && newValue.startsWith("$")) {
|
|
parsedinput = {
|
|
target: {
|
|
value: {
|
|
"name": newValue,
|
|
"id": newValue,
|
|
"actions": [],
|
|
"triggers": [],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
handleWorkflowSelectionUpdate(parsedinput)
|
|
}}
|
|
renderOption={(props, data, state) => {
|
|
if (data.id === workflow.id) {
|
|
data = workflow;
|
|
}
|
|
|
|
return (
|
|
<Tooltip arrow placement="left" title={
|
|
<span style={{}}>
|
|
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
|
|
<img src={data.image} alt={data.name} style={{ backgroundColor: theme.palette.surfaceColor, maxHeight: 200, minHeigth: 200, borderRadius: theme.palette?.borderRadius, }} />
|
|
: null}
|
|
<Typography>
|
|
Choose {data.name}
|
|
</Typography>
|
|
</span>
|
|
}>
|
|
<MenuItem
|
|
style={{
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: data.id === workflow.id ? "red" : theme.palette.textColor,
|
|
}}
|
|
sx={{
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.hoverColor,
|
|
},
|
|
}}
|
|
value={data}
|
|
onClick={(e) => {
|
|
var parsedinput = { target: { value: data } }
|
|
setOpenWorkflowMenu(false)
|
|
handleWorkflowSelectionUpdate(parsedinput)
|
|
}}
|
|
>
|
|
{data.name}
|
|
</MenuItem>
|
|
</Tooltip>
|
|
)
|
|
}}
|
|
renderInput={(params) => {
|
|
return (
|
|
<TextField
|
|
style={{
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.textColor,
|
|
borderRadius: 4,
|
|
}}
|
|
inputProps={{
|
|
style: {
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.textColor,
|
|
},
|
|
}}
|
|
{...params}
|
|
label="Workflow"
|
|
variant="outlined"
|
|
/>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
<DateTimePicker
|
|
sx={{
|
|
marginLeft: 1,
|
|
minHeight: 50,
|
|
maxHeight: 50,
|
|
minWidth: 240,
|
|
maxWidth: 240,
|
|
}}
|
|
ampm={false}
|
|
label="Search from"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value={startTime}
|
|
onChange={handleStartTimeChange}
|
|
renderInput={(params) => <TextField {...params} />}
|
|
/>
|
|
<DateTimePicker
|
|
sx={{
|
|
marginLeft: 1,
|
|
minWidth: 240,
|
|
maxWidth: 240,
|
|
minHeight: 50,
|
|
maxHeight: 50,
|
|
}}
|
|
ampm={false}
|
|
label="Search until"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value={endTime}
|
|
onChange={handleEndTimeChange}
|
|
renderInput={(params) => <TextField {...params} />}
|
|
/>
|
|
</LocalizationProvider>
|
|
|
|
<Tooltip title="Clear all filters and search parameters">
|
|
<Button
|
|
style={{ marginLeft: 10, minHeight: 60, marginTop: 10, backgroundColor: theme.palette.backgroundColor, border: "1px solid #424242", boxShadow: 'none', borderRadius: 4, width: 81, height: 51, marginRight: 15 }}
|
|
onClick={() => {
|
|
setWorkflowId("")
|
|
setWorkflow({"id": "", "name": "All Workflows"})
|
|
setStatus("")
|
|
setStartTime("")
|
|
setEndTime("")
|
|
setSearchQuery("")
|
|
setSuborgWorkflowRuns(false)
|
|
setMaxExecutionCount(50)
|
|
submitSearch("", "", "", "", rowCursor, 50, false)
|
|
}}
|
|
>
|
|
<FilterAltOffIcon />
|
|
</Button>
|
|
</Tooltip>
|
|
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
onClick={() => {
|
|
submitSearch(workflowId, status, startTime, endTime, rowCursor, maxExecutionCount, suborgWorkflowRuns)
|
|
}}
|
|
disabled={searchLoading}
|
|
style={{height: 50, minWidth: 100, marginTop: 15, }}
|
|
>
|
|
{searchLoading ? <CircularProgress size={30} /> : "Search"}
|
|
</Button>
|
|
</form>
|
|
<div style={{height: 700, padding: "10px 0px 10px 0px", }}>
|
|
<DataGrid
|
|
rows={filteredRows}
|
|
columns={columns}
|
|
paginationModel={paginationModel}
|
|
pageSizeOptions={[10, 20, 50, 75, 100]}
|
|
checkboxSelection
|
|
disableSelectionOnClick
|
|
|
|
onPaginationModelChange={(newPaginationModel) => {
|
|
setPaginationModel(newPaginationModel)
|
|
setRowsPerPage(newPaginationModel.pageSize)
|
|
// No API call needed - this is just for client-side pagination
|
|
}}
|
|
selectionModel={selectedWorkflowExecutions.map((workflow) => workflow.id)}
|
|
onSelectionModelChange={(newSelection) => {
|
|
//console.log("newSelection: ", newSelection)
|
|
//setSelectedWorkflowExecutionsIndexes(newSelection)
|
|
var found = []
|
|
for (var i = 0; i < newSelection.length; i++) {
|
|
// Find the workflow in the resultRows
|
|
var selected = resultRows.find((workflow) => {
|
|
return workflow.id === newSelection[i]
|
|
})
|
|
|
|
if (selected === undefined || selected === null) {
|
|
continue
|
|
}
|
|
|
|
found.push(selected)
|
|
}
|
|
|
|
setSelectedWorkflowExecutions(found)
|
|
}}
|
|
// Track which items are selected
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RuntimeDebugger;
|