Skip to content

Commit

Permalink
feat:integrate orkes-workflow-visualizer
Browse files Browse the repository at this point in the history
  • Loading branch information
najeebkp committed Oct 16, 2024
1 parent e45a068 commit af81442
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 28 deletions.
5 changes: 3 additions & 2 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@
"moment": "^2.29.2",
"monaco-editor": "^0.44.0",
"node-forge": "^1.3.0",
"orkes-workflow-visualizer": "^1.0.0",
"parse-svg-path": "^0.1.2",
"prop-types": "^15.7.2",
"react": "^16.8.0",
"react": "^18.3.1",
"react-cron-generator": "^1.3.5",
"react-data-table-component": "^6.11.8",
"react-dom": "^16.8.0",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-is": "^17.0.2",
"react-query": "^3.19.4",
Expand Down
52 changes: 33 additions & 19 deletions ui/src/pages/definition/WorkflowDefinition.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
useWorkflowNamesAndVersions,
} from "../../data/workflow";
import WorkflowDAG from "../../components/diagram/WorkflowDAG";
import WorkflowGraph from "../../components/diagram/WorkflowGraph";
import ResetConfirmationDialog from "./ResetConfirmationDialog";
import {
configureMonaco,
Expand All @@ -23,6 +22,7 @@ import SaveWorkflowDialog from "./SaveWorkflowDialog";
import update from "immutability-helper";
import { usePushHistory } from "../../components/NavLink";
import { timestampRenderer } from "../../utils/helpers";
import { WorkflowVisualizer } from "orkes-workflow-visualizer";

import {
KeyboardArrowLeftRounded,
Expand Down Expand Up @@ -67,8 +67,8 @@ const useStyles = makeStyles({
gap: 8,
},
editorLineDecorator: {
backgroundColor: "rgb(45, 45, 45, 0.1)"
}
backgroundColor: "rgb(45, 45, 45, 0.1)",
},
});

const actions = {
Expand Down Expand Up @@ -240,21 +240,26 @@ export default function Workflow() {
};

const handleWorkflowNodeClick = (node) => {
let editor = editorRef.current.getModel()
let searchResult = editor.findMatches(`"taskReferenceName": "${node.ref}"`)
if (searchResult.length){
editorRef.current.revealLineInCenter(searchResult[0]?.range?.startLineNumber, 0);
setDecorations(editorRef.current.deltaDecorations(decorations, [
{
range: searchResult[0]?.range,
options: {
isWholeLine: true,
inlineClassName: classes.editorLineDecorator
}
}
]))
let editor = editorRef.current.getModel();
let searchResult = editor.findMatches(`"taskReferenceName": "${node.ref}"`);
if (searchResult.length) {
editorRef.current.revealLineInCenter(
searchResult[0]?.range?.startLineNumber,
0
);
setDecorations(
editorRef.current.deltaDecorations(decorations, [
{
range: searchResult[0]?.range,
options: {
isWholeLine: true,
inlineClassName: classes.editorLineDecorator,
},
},
])
);
}
}
};

return (
<>
Expand Down Expand Up @@ -369,8 +374,17 @@ export default function Workflow() {
className={classes.resizer}
onMouseDown={(e) => handleMouseDown(e)}
/>
<div className={classes.workflowGraph}>
{dag && <WorkflowGraph dag={dag} onClick={handleWorkflowNodeClick} />}
<div className={classes.workflowGraph} style={{ overflow: "scroll" }}>
{dag && dag?.workflowDef && (
<WorkflowVisualizer
maxHeightOverride
pannable
zoomable
zoom={0.7}
data={dag?.workflowDef}
onClick={(e, data) => handleWorkflowNodeClick({ ref: data?.id })}
/>
)}
</div>
</div>
</>
Expand Down
7 changes: 6 additions & 1 deletion ui/src/pages/execution/Execution.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,12 @@ export default function Execution() {
</div>
)}
<div className={classes.frItem}>
<NavLink newTab path={`/workflowDef/${execution.workflowName}`}>Definition</NavLink>
<NavLink
newTab
path={`/workflowDef/${execution.workflowName}`}
>
Definition
</NavLink>
</div>
<SecondaryButton onClick={refresh} style={{ marginRight: 10 }}>
Refresh
Expand Down
15 changes: 9 additions & 6 deletions ui/src/pages/execution/TaskDetails.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState } from "react";
import { useState } from "react";
import { Tabs, Tab, Paper } from "../../components";
import Timeline from "./Timeline";
import TaskList from "./TaskList";
import WorkflowGraph from "../../components/diagram/WorkflowGraph";
import { makeStyles } from "@material-ui/styles";
import { WorkflowVisualizer } from "orkes-workflow-visualizer";

const useStyles = makeStyles({
taskWrapper: {
Expand Down Expand Up @@ -32,11 +32,14 @@ export default function TaskDetails({
</Tabs>

{tabIndex === 0 && (
<WorkflowGraph
selectedTask={selectedTask}
<WorkflowVisualizer
maxHeightOverride
pannable
zoomable
zoom={0.7}
data={dag?.execution}
executionMode={true}
dag={dag}
onClick={setSelectedTask}
onClick={(e, data) => setSelectedTask({ ref: data?.id })}
/>
)}
{tabIndex === 1 && (
Expand Down

0 comments on commit af81442

Please sign in to comment.