@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/pages/dashboard/dashboard-link-cards.tsx

@@ -1,18 +1,15 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, Grid2 as Grid } from "@mui/material";
+// Custom components
+import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
 import {
-	RocketLaunchOutlined,
+	AccessTimeOutlined,
 	IntegrationInstructionsOutlined,
 	PlaylistPlayOutlined,
-	AccessTimeOutlined,
+	RocketLaunchOutlined,
 } from "@mui/icons-material";
-
-// Custom components
-import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
+// MUI
+import { Box, Grid2 as Grid, type Theme, useTheme } from "@mui/material";
+import { useTranslations } from "next-intl";
+import React from "react";
 
 const breakpoints = {
 	xs: 6,

package/src/pages/dashboard/dashboard-list-sections.tsx

@@ -1,19 +1,17 @@
-import React, { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
-import {
-	ProcessExecutionInput,
+import type {
 	GetProcessExecutionsQuery,
+	ProcessExecutionInput,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
 // Custom components
 import SnackbarAlert, {
-	iSnackbarAlert,
+	type iSnackbarAlert,
 } from "@evenicanpm/admin-core/components/snackbar-alert";
 
+// API
+import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
 import DashboardList from "@evenicanpm/admin-integrate/components/dashboard-list";
+import { useTranslations } from "next-intl";
+import React, { useEffect, useState } from "react";
 
 const defaultInput: ProcessExecutionInput = {
 	sort: "startDate",

package/src/pages/dashboard/dashboard.tsx

@@ -1,8 +1,7 @@
-import React from "react";
-
 // Local page components
 import DashboardLinkCards from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-link-cards";
 import DashboardListSections from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-list-sections";
+import React from "react";
 
 export default function IntegrateDashboard() {
 	return (

package/src/pages/execution-details/execution-details.tsx

@@ -1,20 +1,44 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Box } from "@mui/material";
-
-// Custom components
+"use client";
+import type {
+	GetProcessExecutionDetailsQuery,
+	GetProcessExecutionsByProcessQuery,
+	ProcessExecutionDetails,
+	ProcessExecutionInput,
+	ProcessTaskExecution,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import SnackbarAlert, {
+	type iSnackbarAlert,
+} from "@evenicanpm/admin-core/components/snackbar-alert";
+import {
+	getProcessExecutionDetails,
+	getProcessExecutionsByProcess,
+} from "@evenicanpm/admin-integrate/api/execution-details/queries";
+import { runProcessWebhook } from "@evenicanpm/admin-integrate/api/process/mutations";
 import {
+	type Crumb,
 	IntegrateBreadcrumbs,
-	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { Loading } from "@evenicanpm/admin-integrate/components/core";
+import { ExecutionHistoryDrawer } from "@evenicanpm/admin-integrate/components/execution-history-drawer";
+import { ExecutionDetailsHeader } from "@evenicanpm/admin-integrate/components/header";
+import type { Execution } from "@evenicanpm/admin-integrate/components/header/execution-details-header";
 import IntegrationView from "@evenicanpm/admin-integrate/components/integration-view/integration-view";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import { Box, Button, useTheme } from "@mui/material";
+import { useParams, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import TaskExecutionDrawer from "./task-execution-drawer";
 
 export default function ExecutionDetails() {
 	const t = useTranslations("Integrate");
+	const theme = useTheme();
+	const params = useParams<{ processId: string }>();
+	const processId = params?.processId as string;
+	const searchParams = useSearchParams();
+	const selectedExecutionId = searchParams.get("ExecutionId");
 
-	const breadcrumbs: Crumb[] = [
+	const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>([
 		{
 			name: t("Header.dashboard"),
 			url: "/e4integrate",
@@ -23,15 +47,188 @@ export default function ExecutionDetails() {
 			name: t("Header.executions"),
 			url: "/e4integrate/executions",
 		},
-		{
-			name: "TODO: dynamic title",
-		},
-	];
+	]);
+
+	// very first render jumps to page of selected. disable processExecutionId argument for list query after first render.
+	const [disableExecutionId, setDisableExecutionId] = useState<boolean>(false);
+
+	const [selected, setSelected] = useState<Execution | null>(null);
+
+	const [drawerOpen, setDrawerOpen] = useState<boolean>(true);
+
+	const [input, setInput] = useState<ProcessExecutionInput>({
+		skip: 0,
+		sort: "startDate",
+		sortDesc: true,
+		top: 10,
+	});
+
+	const [selectedTaskExecution, setSelectedTaskExecution] =
+		useState<ProcessTaskExecution | null>(null);
+	const handleCloseDrawer = () => {
+		setSelectedTaskExecution(null);
+		setDrawerOpen(true);
+	};
+
+	const { data: executions, isLoading: executionsLoading } =
+		getProcessExecutionsByProcess.useData({
+			processId,
+			processExecutionId: disableExecutionId ? undefined : selectedExecutionId,
+			input,
+		});
+
+	const { data: details } = getProcessExecutionDetails.useData({
+		id: selectedExecutionId ?? "", // returns null if id = ""
+	});
+
+	const isLoading = executionsLoading;
+
+	const handleSelectedTaskExecution = (
+		processTaskExecution: ProcessTaskExecution,
+	) => {
+		setDrawerOpen(false);
+		setSelectedTaskExecution(processTaskExecution);
+	};
+
+	useEffect(() => {
+		const typedData = details as GetProcessExecutionDetailsQuery;
+		if (typedData?.processExecutionDetails) {
+			setSelected(typedData.processExecutionDetails as Execution);
+
+			if (breadcrumbs.length === 2) {
+				const newCrumbs: Crumb[] = JSON.parse(JSON.stringify(breadcrumbs));
+
+				newCrumbs.push({
+					name: typedData.processExecutionDetails.name as string,
+				});
+
+				setBreadcrumbs(newCrumbs);
+			}
+		}
+	}, [details]);
+
+	useEffect(() => {
+		const typedData = executions as GetProcessExecutionsByProcessQuery;
+		if (typedData?.processExecutionsByProcess) {
+			setDisableExecutionId(true);
+			setInput((prev) => ({
+				...prev,
+				skip: typedData.processExecutionsByProcess?.pageInfo.skip,
+			}));
+		}
+	}, [executions]);
+
+	const runProcess = runProcessWebhook();
+	const [message, setMessage] = useState<iSnackbarAlert>({ open: false });
+
+	const handleRun = () => {
+		runProcess.mutate(
+			{
+				input: { id: processId },
+			},
+			{
+				onSuccess: async (data) => {
+					const name = (details as GetProcessExecutionDetailsQuery)
+						?.processExecutionDetails?.name;
+
+					setMessage({
+						open: true,
+						severity:
+							data.runProcessWebhook?.status === "Success"
+								? "success"
+								: "error",
+						message:
+							data.runProcessWebhook?.status === "Success"
+								? `${name ?? "Integration"} successfully queued for execution.`
+								: `Failed to queue ${name ?? "integration"} for exeuction.`,
+					});
+				},
+				onError: (error) => {
+					const name = (details as GetProcessExecutionDetailsQuery)
+						?.processExecutionDetails?.name;
+
+					setMessage({
+						open: true,
+						severity: "error",
+						message: `Failed to queue ${name ?? "integration"} for exeuction.`,
+					});
+					console.error("RunProcess failed:", error);
+				},
+			},
+		);
+	};
+
+	if (isLoading) {
+		return (
+			<Box sx={{ padding: theme.spacing(40, 3, 0) }}>
+				<Loading />
+			</Box>
+		);
+	}
+
+	if (!isLoading && !executions) {
+		return "error";
+	}
 
 	return (
 		<Box>
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-			<IntegrationView />
+			{selected && (
+				<ExecutionDetailsHeader execution={selected as Execution}>
+					<Button
+						variant="contained"
+						color="info"
+						startIcon={<PlayArrowIcon />}
+						sx={{ padding: theme.spacing(1.3, 2) }}
+						onClick={handleRun}
+					>
+						{t("Executions.run")}
+					</Button>
+				</ExecutionDetailsHeader>
+			)}
+			<Box
+				sx={{
+					display: "flex",
+					height: "80vh",
+					width: "100%",
+					overflow: "hidden",
+					backgroundColor: theme.palette.background.default,
+					border: `1px solid ${theme.palette.grey[400]}`,
+					marginTop: theme.spacing(1),
+				}}
+			>
+				<ExecutionHistoryDrawer
+					data={executions as GetProcessExecutionsByProcessQuery}
+					loading={isLoading}
+					input={input}
+					setInput={setInput}
+					drawerOpen={drawerOpen}
+					setDrawerOpen={setDrawerOpen}
+				/>
+				<IntegrationView
+					data={
+						(details as GetProcessExecutionDetailsQuery)
+							?.processExecutionDetails as ProcessExecutionDetails
+					}
+					variant="process-execution"
+					onTaskClick={handleSelectedTaskExecution}
+					drawerOpen={!!selectedTaskExecution}
+					processTaskId={selectedTaskExecution?.id}
+				/>
+				<TaskExecutionDrawer
+					open={selectedTaskExecution !== null}
+					onClose={handleCloseDrawer}
+					anchor="right"
+					processTaskExecution={selectedTaskExecution}
+					handleClose={handleCloseDrawer}
+				/>
+			</Box>
+			<SnackbarAlert
+				open={message.open}
+				severity={message.severity}
+				message={message.message}
+				handleClose={() => setMessage({ open: false })}
+			/>
 		</Box>
 	);
 }

package/src/pages/execution-details/task-execution-details.tsx

@@ -0,0 +1,160 @@
+import type { ProcessTaskExecution } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import {
+	toDurationDate,
+	toShortDate,
+} from "@evenicanpm/admin-integrate/utils/date-functions";
+import { ChevronRightOutlined } from "@mui/icons-material";
+import {
+	Box,
+	IconButton,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+interface Props {
+	details: ProcessTaskExecution;
+}
+
+export default function TaskExecutionDetails({ details }: Props) {
+	const t = useTranslations("Integrate.Executions");
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
+
+	const [expandedParams, setExpandedParams] = useState<boolean>(false);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+
+	const toggleExpanded = () => {
+		setExpandedParams(!expandedParams);
+	};
+
+	return (
+		<>
+			<Box
+				display="flex"
+				justifyContent="space-between"
+				alignItems="center"
+				sx={{ marginBottom: theme.spacing(1) }}
+			>
+				<Typography variant="h5" fontWeight="medium" overflow="auto">
+					{details.name}
+				</Typography>
+				<ExecutionTag
+					executionStatusId={details.executionStatus?.id ?? "999"}
+				/>
+			</Box>
+
+			{details.startDate && (
+				<Stack direction="row" spacing={1}>
+					<Typography
+						variant="caption"
+						color="grey"
+						onMouseEnter={handlePopoverOpen}
+						onMouseLeave={handlePopoverClose}
+					>
+						{toShortDate(details.startDate as string)}
+					</Typography>
+					{details.endDate && (
+						<Typography variant="caption" color="grey">
+							{t("duration")}:{" "}
+							{toDurationDate(details.startDate, details.endDate)}
+						</Typography>
+					)}
+					<DateTimePopover
+						dateIsoString={details.startDate}
+						sx={{ pointerEvents: "none" }}
+						open={open}
+						anchorEl={anchorEl}
+						anchorOrigin={{
+							vertical: "bottom",
+							horizontal: "left",
+						}}
+						transformOrigin={{
+							vertical: "top",
+							horizontal: "left",
+						}}
+						onClose={handlePopoverClose}
+						disableRestoreFocus
+					/>
+				</Stack>
+			)}
+
+			{details.endpoint?.name && (
+				<Box sx={styles.detailContainer}>
+					<Typography variant="body1">{t("TaskExecution.endpoint")}</Typography>
+					<Typography variant="body2" color="grey">
+						{details.endpoint.name}
+					</Typography>
+				</Box>
+			)}
+
+			{details.processTaskType?.name && (
+				<Box sx={styles.detailContainer}>
+					<Typography variant="body1">{t("TaskExecution.taskType")}</Typography>
+					<Typography variant="body2" color="grey">
+						{details.processTaskType.name}
+					</Typography>
+				</Box>
+			)}
+
+			{details.params && (
+				<Box sx={styles.detailContainer}>
+					<Typography variant="body1">{t("TaskExecution.params")}</Typography>
+					<Box display="flex" justifyContent="space-between">
+						<Typography
+							variant="body2"
+							color="grey"
+							component="pre"
+							noWrap={!expandedParams}
+							alignSelf="center"
+						>
+							{JSON.stringify(JSON.parse(details.params), null, 2)}
+						</Typography>
+						<IconButton
+							onClick={toggleExpanded}
+							sx={{
+								height: "fit-content",
+								transform: expandedParams ? "rotate(90deg)" : undefined,
+								transition: "transform 0.1s",
+							}}
+						>
+							<ChevronRightOutlined />
+						</IconButton>
+					</Box>
+				</Box>
+			)}
+
+			{details.executionStatusMessage && (
+				<Box sx={styles.detailContainer}>
+					<Typography variant="body1">{t("TaskExecution.message")}</Typography>
+					<Typography variant="body2" color="grey">
+						{details.executionStatusMessage}
+					</Typography>
+				</Box>
+			)}
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		detailContainer: {
+			marginTop: theme.spacing(2),
+		},
+	};
+};

package/src/pages/execution-details/task-execution-drawer.tsx

@@ -0,0 +1,54 @@
+import type { ProcessTaskExecution } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
+import {
+	Box,
+	type DrawerProps,
+	Drawer as MuiDrawer,
+	useTheme,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+import TaskExecutionDetails from "./task-execution-details";
+
+interface Props extends DrawerProps {
+	processTaskExecution: ProcessTaskExecution | null;
+	handleClose: () => void;
+}
+
+const Drawer = styled(MuiDrawer)({
+	position: "relative", //imp
+	//width: 625, //drawer width
+	"& .MuiDrawer-paper": {
+		width: 525, //drawer width
+		position: "absolute", //imp
+		transition: "none !important",
+	},
+});
+
+export default function TaskExecutionDrawer({
+	processTaskExecution,
+	handleClose,
+	...props
+}: Props) {
+	const theme = useTheme();
+
+	return (
+		<Drawer
+			{...props}
+			variant="persistent"
+			sx={{ padding: theme.spacing(2), width: processTaskExecution ? 525 : 0 }}
+		>
+			<DrawerButtons handleClose={handleClose} />
+			<Box
+				sx={{
+					width: `min(${theme.spacing(70)}, 100vw)`,
+					padding: theme.spacing(2, 3),
+				}}
+			>
+				{processTaskExecution && (
+					<TaskExecutionDetails details={processTaskExecution} />
+				)}
+			</Box>
+		</Drawer>
+	);
+}

package/src/pages/executions/executions-list/executions-list-row.tsx

@@ -1,31 +1,29 @@
-import React, { useState } from "react";
-import { redirect, RedirectType } from "next/navigation";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, Stack, Typography } from "@mui/material";
-import { RemoveRedEye } from "@mui/icons-material";
-import { SxProps } from "@mui/material";
-
-// Custom components
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import {
+	StyledIconButton,
 	StyledTableCell,
 	StyledTableRow,
-	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import {
-	ExecutionTag,
 	ExecutionStatusIcon,
+	ExecutionTag,
 } from "@evenicanpm/admin-integrate/components/execution";
-import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
-
-// Hooks
-import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
-
-// Types
-import { Item } from "./executions-list";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { TableCellProps } from "@mui/material";
+import { toDistanceDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { RemoveRedEye } from "@mui/icons-material";
+import {
+	Box,
+	Stack,
+	type SxProps,
+	type TableCellProps,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import type React from "react";
+import { useState } from "react";
+import type { Item } from "./executions-list";
 
 interface Props {
 	item: Item;
@@ -37,10 +35,6 @@ const ExecutionsListRow: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	// e.g. "xx days ago"
-	const time = useTimestamp(props.item.startDate);
-	const localTime = new Date(props.item.startDate).toString();
-
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const open = Boolean(anchorEl);
 
@@ -94,10 +88,10 @@ const ExecutionsListRow: React.FC<Props> = (props: Props) => {
 					onMouseEnter={handlePopoverOpen}
 					onMouseLeave={handlePopoverClose}
 				>
-					{time}
+					{toDistanceDate(props.item.startDate)}
 				</Typography>
 				<DateTimePopover
-					dateIsoString={localTime}
+					dateIsoString={props.item.startDate}
 					sx={{ pointerEvents: "none" }}
 					open={open}
 					anchorEl={anchorEl}

package/src/pages/executions/executions-list/executions-list-table.tsx

@@ -1,18 +1,13 @@
-import React from "react";
-
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { Item } from "./executions-list";
-
 // API
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { TableContainer, Table, TableBody } from "@mui/material";
-import { SxProps } from "@mui/material";
-
+import type { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+// Types
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+// MUI
+import { type SxProps, Table, TableBody, TableContainer } from "@mui/material";
+import React from "react";
+import type { Item } from "./executions-list";
 
 // Local components
 import ExecutionsListRow from "./executions-list-row";
@@ -43,28 +38,26 @@ export default function ExecutionsListTable(props: Props) {
 	};
 
 	return (
-		<>
-			<TableContainer>
-				<Table>
-					<TableHeader
-						heading={props.heading}
-						orderBy={props.input.sort || ""}
-						order={props.input.sortDesc ? "desc" : "asc"}
-						onRequestSort={handleRequestSort}
-						rowSx={props.rowSx}
-					/>
-					<TableBody>
-						{props.items.map((item, index) => (
-							<ExecutionsListRow
-								key={index}
-								item={item}
-								heading={props.heading}
-								sx={props.rowSx}
-							/>
-						))}
-					</TableBody>
-				</Table>
-			</TableContainer>
-		</>
+		<TableContainer>
+			<Table>
+				<TableHeader
+					heading={props.heading}
+					orderBy={props.input.sort || ""}
+					order={props.input.sortDesc ? "desc" : "asc"}
+					onRequestSort={handleRequestSort}
+					rowSx={props.rowSx}
+				/>
+				<TableBody>
+					{props.items.map((item) => (
+						<ExecutionsListRow
+							key={item.id}
+							item={item}
+							heading={props.heading}
+							sx={props.rowSx}
+						/>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
 	);
 }