-
-
+
);
diff --git a/gui/app/tasks/[id]/page.tsx b/gui/app/tasks/[id]/page.tsx
index f8220e47..370cf76d 100644
--- a/gui/app/tasks/[id]/page.tsx
+++ b/gui/app/tasks/[id]/page.tsx
@@ -1,30 +1,31 @@
-import { getTaskVariables, getTasks } from "@/src/utils/processUtils";
+import { getTask, getTaskVariables } from "@/src/utils/processUtils";
import styles from "./page.module.scss";
-import { Tasks } from "@/src/components/Tasks/Tasks";
import Panel from "@/src/components/Panel";
import { TaskForm } from "./taskForm";
+import Button from "@/src/components/Button";
+import { FaCrown } from "react-icons/fa6";
export default async function TaskPage({
params: { id },
}: {
params: { id: string };
}) {
- const tasks = await getData(id);
+ const task = await getData(id);
- if (!tasks.length) {
+ if (!task) {
return null;
}
- const task = tasks[0];
-
const formVars = await getTaskVariables(task.id);
- const abi = JSON.parse(formVars?.abi?.value || "{}");
+ const abi = formVars?.abi?.value ? JSON.parse(formVars?.abi?.value) : null;
return (
);
diff --git a/gui/next.config.js b/gui/next.config.js
index 049ae846..89227adb 100644
--- a/gui/next.config.js
+++ b/gui/next.config.js
@@ -1,22 +1,27 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
- basePath: '/dashboard',
+ basePath: "/dashboard",
experimental: {
- serverComponentsExternalPackages: [
- "hammerjs",
- ],
+ serverComponentsExternalPackages: ["hammerjs"],
},
rewrites: async () => {
return [
{
source: "/api/engine/:path*",
destination: "https://chainflow-engine.dexguru.biz/engine-rest/:path*",
- }
+ },
+ {
+ source: "/",
+ destination: "/dashboard",
+ },
];
},
webpack: (config, { isServer }) => {
if (!isServer) {
- config.externals.push({ bufferutil: "bufferutil", "utf-8-validate": "utf-8-validate" });
+ config.externals.push({
+ bufferutil: "bufferutil",
+ "utf-8-validate": "utf-8-validate",
+ });
}
return config;
diff --git a/gui/package.json b/gui/package.json
index 1e517c6c..ccbc1998 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -25,7 +25,7 @@
"eslint": "8.41.0",
"eslint-config-next": "13.4.4",
"mersenne-twister": "^1.1.0",
- "next": "13.5.6",
+ "next": "14.0.3",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
diff --git a/gui/src/components/Box/Box.module.scss b/gui/src/components/Box/Box.module.scss
new file mode 100644
index 00000000..7e9c3f0a
--- /dev/null
+++ b/gui/src/components/Box/Box.module.scss
@@ -0,0 +1,5 @@
+.container {
+ padding: 12px 16px;
+ border-radius: 8px;
+ background: #fff;
+}
diff --git a/gui/src/components/Box/Box.tsx b/gui/src/components/Box/Box.tsx
new file mode 100644
index 00000000..0f48a00b
--- /dev/null
+++ b/gui/src/components/Box/Box.tsx
@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+import styles from "./Box.module.scss";
+import clsx from "clsx";
+
+type BoxProps = {
+ className?: string;
+ children?: ReactNode | ReactNode[];
+};
+
+export const Box: FC = ({ className, children }) => {
+ return (null);
+ const refDialog = useRef(null);
const refModeler = useRef(null);
+ const [definitions, setDefinitions] = useState([]);
+
useEffect(() => {
//
}, []);
+ const importXML = async (xml: string) => {
+ await refModeler.current?.importXML(xml);
+ const canvas = refModeler.current?.get("canvas") as any;
+ canvas?.zoom("fit-viewport");
+ };
+
const handleOpenFile: ChangeEventHandler = (e) => {
e.preventDefault();
@@ -37,15 +54,13 @@ const ModelerPage: FC<{ className?: string }> = ({ className }) => {
const reader = new FileReader();
reader.onload = async (e) => {
const xml = e.target?.result;
- await refModeler.current?.importXML(xml?.toString() || "");
- const canvas = refModeler.current?.get("canvas") as any;
- canvas?.zoom("fit-viewport");
+ importXML(xml?.toString() || "");
};
reader.readAsText(e.target.files[0]);
};
- const handleOpenClick: MouseEventHandler = (e) => {
+ const handleOpenFileClick: MouseEventHandler = (e) => {
refFile.current?.click();
};
@@ -66,6 +81,58 @@ const ModelerPage: FC<{ className?: string }> = ({ className }) => {
refModeler.current = modeler;
};
+ const handleOpenDefinitionClick = () => {
+ refDialog.current?.showModal();
+
+ const getData = async () => {
+ const defs = await getDefinitions();
+ setDefinitions(defs);
+ };
+
+ getData();
+ };
+
+ const handleCloseDialogClick = () => {
+ refDialog.current?.close();
+ };
+
+ const loadXML = async (id: string) => {
+ const xml = await getDefinitionXML(id);
+ importXML(xml);
+ handleCloseDialogClick();
+ };
+
+ const handleDeploy = () => {
+ if (typeof window === "undefined") {
+ return;
+ }
+
+ const name = window?.prompt("Enter deployment name", "random name") || "";
+
+ if (!name?.trim()) {
+ return;
+ }
+
+ refModeler.current?.saveXML().then(async (xmlResult) => {
+ if (!xmlResult.xml) {
+ return;
+ }
+
+ const formData = new FormData();
+ formData.append("process.bpmn", new Blob([xmlResult.xml]));
+ formData.append("deployment-name", name);
+
+ const res = await fetch("api/engine/deployment/create", {
+ method: "POST",
+ body: formData,
+ });
+
+ if (!res.ok) {
+ console.log(`Failed to deploy data: ${res.statusText} [${res.status}]`);
+ }
+ });
+ };
+
return (
| Name | +Type | +Value | +
|---|---|---|
| {varKey} | -{varValue.type} | -- {JSON.stringify(varValue.value)} - | +
| {varKey} | +{varValue.type} | +{`${varValue.value}`} |
-
-
- {instances.map((instance) => {
- return (
-
-
+ {!!instances.length && (
+ | - - {instance.id} - - | -- {instance.ended ? "Ended" : "In progress"}{" "} - | -- {instance.suspended ? "Suspended" : "Active"} - | -
- |
-
|---|
+
+
+ {instances.map((instance) => {
+ return (
+
+
+ )}
diff --git a/gui/app/processes/page.tsx b/gui/app/processes/page.tsx
index 3b52475d..7e928b61 100644
--- a/gui/app/processes/page.tsx
+++ b/gui/app/processes/page.tsx
@@ -1,11 +1,16 @@
-import List from "@/src/components/List";
import styles from "./page.module.scss";
-import ProcessCard from "@/src/components/ProcessCard";
import { getDefinitions } from "@/src/utils/processUtils";
+import Link from "next/link";
+import Button from "@/src/components/Button";
+import { FaPlay } from "react-icons/fa6";
export default async function ProjectsPage() {
const processes = await getData();
+ const handleNewInstance = () => {
+ //
+ };
+
return (
| + + {instance.id} + + | ++ {instance.ended ? "Ended" : "In progress"}{" "} + | ++ {instance.suspended ? "Suspended" : "Active"} + | +
+ |
+
|---|
@@ -13,17 +18,45 @@ export default async function ProjectsPage() {
-
+
+
-
- {processes?.map((process) => {
- return (
-
| Name | +Instances | ++ |
|---|---|---|
| + + {process.name} + + | ++ {process.instanceCount || "No"} instance + {!process?.instanceCount || process?.instanceCount > 1 + ? "s" + : ""} + | ++ {/* } + caption="New Instance" + disabled + onClick={handleNewInstance} + /> */} + | +
Task {task.name}
- +
+ } disabled caption="Claim" />
+
-
+
+
+ )}
-
- {tasks?.map((task, idx) => {
- return
| Task | +Instance | +
|---|---|
| + + {task.name} + + | ++ + {task.processInstanceId} + + | +
{children}
;
+};
diff --git a/gui/src/components/Box/index.ts b/gui/src/components/Box/index.ts
new file mode 100644
index 00000000..609658d4
--- /dev/null
+++ b/gui/src/components/Box/index.ts
@@ -0,0 +1,3 @@
+import { Box } from "./Box";
+
+export default Box;
diff --git a/gui/src/components/Button/Button.module.scss b/gui/src/components/Button/Button.module.scss
index cf100f48..fef6745d 100644
--- a/gui/src/components/Button/Button.module.scss
+++ b/gui/src/components/Button/Button.module.scss
@@ -6,7 +6,7 @@
border: 2px transparent solid;
line-height: 1;
text-decoration: none;
- padding: 8px 12px;
+ padding: 0 8px;
background: #6046ff;
color: #fff;
font-size: 14px;
@@ -36,11 +36,11 @@
display: flex;
align-items: stretch;
justify-content: stretch;
- margin-left: -4px;
+ margin-left: -2px;
transition: all 0.25s ease;
&:only-child {
- margin-right: -4px;
+ margin-right: -2px;
}
}
@@ -67,6 +67,11 @@
}
}
+.xs {
+ height: 24px;
+ min-width: 24px;
+}
+
.md {
height: 32px;
min-width: 32px;
diff --git a/gui/src/components/List/List.module.scss b/gui/src/components/List/List.module.scss
index 587f3b92..c86eeb22 100644
--- a/gui/src/components/List/List.module.scss
+++ b/gui/src/components/List/List.module.scss
@@ -12,6 +12,8 @@
}
.item {
+ padding: 12px 16px;
+
&:not(:last-child) {
border-bottom: 1px #eceff1 solid;
}
diff --git a/gui/src/components/Modeler/Modeler.module.scss b/gui/src/components/Modeler/Modeler.module.scss
index 59513b18..3c68f7b7 100644
--- a/gui/src/components/Modeler/Modeler.module.scss
+++ b/gui/src/components/Modeler/Modeler.module.scss
@@ -12,6 +12,5 @@
.properties {
flex: 0 0 auto;
- background: #fff;
- border-radius: 8px;
+ width: 320px;
}
diff --git a/gui/src/components/Modeler/Modeler.tsx b/gui/src/components/Modeler/Modeler.tsx
index a5794b58..e9da953d 100644
--- a/gui/src/components/Modeler/Modeler.tsx
+++ b/gui/src/components/Modeler/Modeler.tsx
@@ -2,7 +2,6 @@
import { FC, useRef, useEffect } from "react";
-import "camunda-bpmn-js/dist/assets/camunda-platform-modeler.css";
import BpmnModeler from "camunda-bpmn-js/lib/camunda-platform/Modeler";
import styles from "./Modeler.module.scss";
diff --git a/gui/src/components/ModelerPage/ModelerPage.module.scss b/gui/src/components/ModelerPage/ModelerPage.module.scss
index 12d7a75c..b6e3aff1 100644
--- a/gui/src/components/ModelerPage/ModelerPage.module.scss
+++ b/gui/src/components/ModelerPage/ModelerPage.module.scss
@@ -37,3 +37,62 @@
left: -100vh;
top: -100vh;
}
+
+.modal {
+ max-width: 600px;
+ gap: 16px;
+ flex-flow: column;
+
+ &[open] {
+ display: flex;
+ }
+
+ &Close {
+ position: absolute;
+ right: 8px;
+ top: 8px;
+ }
+}
+
+.definitions {
+ margin: -8px;
+ padding: 0;
+ list-style: none;
+ display: grid;
+ grid-template-columns: repeat(2, minmax(240px, 1fr));
+}
+
+.definition {
+ width: 100%;
+ padding: 0;
+ display: flex;
+ flex-flow: column;
+ gap: 16px;
+ border: 2px transparent solid;
+ transition: 0.25s ease;
+ cursor: pointer;
+ padding: 8px;
+ align-items: stretch;
+ text-align: left;
+
+ &:hover,
+ &:focus {
+ border-color: #7583ff;
+ }
+
+ &View {
+ pointer-events: none;
+ position: relative;
+ aspect-ratio: 21/9;
+
+ & > div {
+ position: absolute !important;
+ left: 0;
+ top: 0;
+ }
+
+ &::after {
+ content: "";
+ }
+ }
+}
diff --git a/gui/src/components/ModelerPage/ModelerPage.tsx b/gui/src/components/ModelerPage/ModelerPage.tsx
index 6f2f6cc2..8cd56c7e 100644
--- a/gui/src/components/ModelerPage/ModelerPage.tsx
+++ b/gui/src/components/ModelerPage/ModelerPage.tsx
@@ -6,27 +6,44 @@ import {
MouseEventHandler,
useEffect,
useRef,
+ useState,
} from "react";
import Modeler from "@/src/components/Modeler";
import styles from "./ModelerPage.module.scss";
import {
FaCheckToSlot,
+ FaCross,
FaDownload,
FaFile,
FaRegFolderOpen,
+ FaUpload,
+ FaXmark,
} from "react-icons/fa6";
import BpmnModeler from "camunda-bpmn-js/lib/camunda-platform/Modeler";
import clsx from "clsx";
import Button from "../Button";
+import List from "../List";
+import { getDefinitionXML, getDefinitions } from "@/src/utils/processUtils";
+import { ProcessDefinition } from "@/app/processes/types";
+import Viewer from "../Viewer";
const ModelerPage: FC<{ className?: string }> = ({ className }) => {
const refFile = useRef
@@ -88,7 +155,13 @@ const ModelerPage: FC<{ className?: string }> = ({ className }) => {
}
- onClick={handleOpenClick}
+ onClick={handleOpenFileClick}
+ className={styles.toolsAction}
+ />
+
+ }
+ onClick={handleOpenDefinitionClick}
className={styles.toolsAction}
/>
@@ -101,40 +174,40 @@ const ModelerPage: FC<{ className?: string }> = ({ className }) => {
}
className={styles.toolsAction}
- onClick={() => {
- if (typeof window === "undefined") {
- return;
- }
-
- const name =
- window?.prompt("Enter deployment name", "random name") || "";
-
- if (!name?.trim()) {
- return;
- }
-
- refModeler.current?.saveXML().then(async (xmlResult) => {
- if (!xmlResult.xml) {
- return;
- }
-
- const formData = new FormData();
- formData.append("process.bpmn", new Blob([xmlResult.xml]));
- formData.append("deployment-name", name);
-
- const res = await fetch("api/engine/deployment/create", {
- method: "POST",
- body: formData,
- });
-
- if (!res.ok) {
- console.log(
- `Failed to deploy data: ${res.statusText} [${res.status}]`
- );
- }
- });
- }}
+ onClick={handleDeploy}
/>
+
+
diff --git a/gui/src/components/Navigation/Navigation.module.scss b/gui/src/components/Navigation/Navigation.module.scss
index a2e7003f..890a3923 100644
--- a/gui/src/components/Navigation/Navigation.module.scss
+++ b/gui/src/components/Navigation/Navigation.module.scss
@@ -67,6 +67,10 @@
color: #22d49f;
}
}
+
+ &.active {
+ border-right-color: #22d49f;
+ }
}
.sections {
diff --git a/gui/src/components/Navigation/Navigation.tsx b/gui/src/components/Navigation/Navigation.tsx
index 611c5703..4af9abfd 100644
--- a/gui/src/components/Navigation/Navigation.tsx
+++ b/gui/src/components/Navigation/Navigation.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { FC } from "react";
import styles from "./Navigation.module.scss";
import Link from "next/link";
@@ -5,8 +7,11 @@ import { FaDatabase, FaHome, FaProjectDiagram, FaList } from "react-icons/fa";
import { FaCodeBranch, FaUser } from "react-icons/fa6";
import clsx from "clsx";
import ConnectButton from "@/src/components/ConnectButton";
+import { usePathname } from "next/navigation";
export const Navigation: FC = () => {
+ const pathname = usePathname();
+
return (
@@ -17,7 +22,12 @@ export const Navigation: FC = () => {