@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/integration-view/task-icon.tsx

@@ -0,0 +1,193 @@
+import DownloadIcon from "@mui/icons-material/Download";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import IosShareIcon from "@mui/icons-material/IosShare";
+import StorageIcon from "@mui/icons-material/Storage";
+import SystemUpdateAltIcon from "@mui/icons-material/SystemUpdateAlt";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import TimerIcon from "@mui/icons-material/Timer";
+
+import { Box } from "@mui/material";
+
+export const mapIconByOrchestrationType = (code: string | undefined) => {
+	let light: string;
+	let dark: string;
+
+	switch (code) {
+		case "PubSubPush":
+			light = "orange.100";
+			dark = "orange.600";
+			break;
+		case "PubSubPull":
+			light = "bluish.100";
+			dark = "bluish.600";
+			break;
+		case "SQLProcess":
+			light = "paste.100";
+			dark = "paste.600";
+			break;
+		case "ExportStaged":
+			light = "paste.100";
+			dark = "paste.600";
+			break;
+		default:
+			return inputIcon();
+	}
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: light,
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: dark,
+				padding: "2px",
+			}}
+		>
+			{code === "PubSubPush" ? (
+				<FileUploadIcon sx={{ color: dark }} />
+			) : code === "PubSubPull" ? (
+				<DownloadIcon sx={{ color: dark }} />
+			) : code === "SQLProcess" ? (
+				<StorageIcon sx={{ color: dark }} />
+			) : code === "ExportStaged" ? (
+				<IosShareIcon sx={{ color: dark }} />
+			) : null}
+		</Box>
+	);
+};
+
+//Temporary icons until logic is added to determine icon based on integration
+export const pullIcon = () => {};
+
+export const pushIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "orange.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "orange.600",
+				padding: "2px",
+			}}
+		>
+			<FileUploadIcon sx={{ color: "orange.600" }} />
+		</Box>
+	);
+};
+
+export const storageIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<StorageIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+export const exportIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<IosShareIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+export const chartIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<TableChartIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+export const timerIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "info.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "info.600",
+				padding: "2px",
+			}}
+		>
+			<TimerIcon sx={{ color: "info.500" }} />
+		</Box>
+	);
+};
+
+export const triggerIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "success.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "success.600",
+				padding: "2px",
+			}}
+		>
+			<ExitToAppIcon sx={{ color: "success.600" }} />
+		</Box>
+	);
+};
+
+export const inputIcon = () => {
+	return (
+		<Box>
+			<SystemUpdateAltIcon sx={{ color: "grey.600" }} />
+		</Box>
+	);
+};

package/src/components/integration-view/temp-data/initialElements.tsx

@@ -1,11 +1,9 @@
-import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-types";
-
 import StorageIcon from "@mui/icons-material/Storage";
 import TableChartIcon from "@mui/icons-material/TableChart";
-import SystemUpdateAltIcon from "@mui/icons-material/SystemUpdateAlt";
+import { Box } from "@mui/material";
 
 import { MarkerType } from "@xyflow/react";
-import { Box } from "@mui/material";
+import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-types";
 
 const pullIcon = () => {
 	return (
@@ -35,22 +33,15 @@ const chartIcon = () => {
 				alignItems: "center",
 				justifyContent: "center",
 				borderRadius: "5px",
-				bgcolor: "paste.100",
+				bgcolor: "#EADDFF", // Purple not implemented in the theme
 				borderWidth: 1,
 				borderStyle: "solid",
-				borderColor: "paste.600",
+				borderColor: "#6750A4", // Purple not implemented in the theme
 				padding: "2px",
 			}}
 		>
-			<TableChartIcon sx={{ color: "paste.600" }} />
-		</Box>
-	);
-};
-
-const inputIcon = () => {
-	return (
-		<Box>
-			<SystemUpdateAltIcon sx={{ color: "grey.600" }} />
+			<TableChartIcon sx={{ color: "#6750A4" }} />{" "}
+			{/* Purple not implemented in the theme */}
 		</Box>
 	);
 };
@@ -58,9 +49,15 @@ const inputIcon = () => {
 export const initialNodes: ElkNodeWithFlow[] = [
 	{
 		id: "1",
-		type: "task-node",
-		data: { label: "Set Entry Point", icon: inputIcon() },
-		width: 450,
+		type: "execution-entry-node",
+		data: {
+			label: "Trigger",
+			//icon: timerIcon(),
+			label2: "Schedule",
+			//icon2: triggerIcon(),
+			executionStatus: "400",
+		},
+		width: 200,
 		height: 70,
 		position: { x: 0, y: 0 },
 		layoutOptions: {
@@ -80,9 +77,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 					label: "Pull Data From External MS DB 1",
 					icon: pullIcon(),
 					isLast: true,
+					executionStatus: "500",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -93,11 +91,12 @@ export const initialNodes: ElkNodeWithFlow[] = [
 				data: {
 					label: "Stage Data 1",
 					icon: chartIcon(),
+					executionStatus: "400",
 				},
 				position: { x: 0, y: 0 },
 				width: 450,
 				height: 70,
-				type: "task-node",
+				type: "execution-task-node",
 				extent: "parent",
 			},
 			{
@@ -113,9 +112,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 				data: {
 					label: "Stage Data 2",
 					icon: chartIcon(),
+					executionStatus: "300",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -126,9 +126,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 					label: "Process Data",
 					icon: chartIcon(),
 					isLast: true,
+					executionStatus: "400",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -147,9 +148,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 					label: "Stage Data 3",
 					icon: chartIcon(),
 					isLast: true,
+					executionStatus: "500",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -173,52 +175,52 @@ export const initialEdges: ElkExtendedEdgeWithFlow[] = [
 		id: "2gs-2gc",
 		sources: ["2gs"],
 		targets: ["2gconnect1"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
 		id: "2gs-2g1",
 		sources: ["2gconnect1"],
 		targets: ["2g1"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 	{
 		id: "2gs-2g2",
 		sources: ["2gconnect1"],
 		targets: ["2g2"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 	{
 		id: "2gs-2g3",
 		sources: ["2gconnect1"],
 		targets: ["2g3"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 	{
 		id: "2g1-2g4",
 		sources: ["2g1"],
 		targets: ["2gconnect2"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
 		id: "2g2-2g4",
 		sources: ["2g2"],
 		targets: ["2gconnect2"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
-		id: "2g3-2g4",
+		id: "2g3->2g4",
 		sources: ["2g3"],
 		targets: ["2gconnect2"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
 		id: "2gc-2g4",
 		sources: ["2gconnect2"],
 		targets: ["2g4"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 ];

package/src/components/integration-view/types.ts

@@ -1,6 +1,6 @@
-interface ElkOptions {}
+type ElkOptions = {};
 
-interface ElkPosition {}
+type ElkPosition = {};
 
 interface ElkItem {
 	id: string;