task inputs

main
alex 2023-05-14 14:57:22 +02:00
parent 65eed057a5
commit c0281620f0
2 changed files with 156 additions and 87 deletions

View File

@ -7,10 +7,11 @@ import {
Modal,
Popover,
Result,
Space,
Steps,
notification,
} from "antd";
import { useContext, useState } from "react";
import { useContext } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
Constants,
@ -19,6 +20,7 @@ import {
SentMessagesCommands,
GetDuration,
} from "../../utils";
import { InfoCircleOutlined } from "@ant-design/icons";
export default function GroupTasksViewModal({ isOpen }) {
const webSocketContext = useContext(WebSocketContext);
@ -226,7 +228,62 @@ export default function GroupTasksViewModal({ isOpen }) {
groupTasks.forEach((groupTask, index) => {
stepItems.push({
key: index,
title: groupTask.name,
title:
groupTaskSteps[index] !== undefined &&
groupTaskSteps[index].Inputs !== "" ? (
<>
{groupTask.name}{" "}
<Popover
key={groupTaskSteps[index].Id + index}
trigger="click"
placement="bottomLeft"
title={
<h2
style={{
fontWeight: "bold",
color: Constants.COLORS.SECONDARY,
}}
>
Specified Task Inputs
</h2>
}
content={
<>
{groupTask.parameters.length > 0 &&
groupTask.parameters.map((task) => {
return (
<span key={task.parameterName}>
<span style={{ fontWeight: "bold" }}>
{task.displayName}:{" "}
</span>
<span>
{
JSON.parse(groupTaskSteps[index].Inputs).find(
(step) =>
step.parameterName === task.parameterName
).value
}
</span>
<br />
</span>
);
})}
</>
}
>
<InfoCircleOutlined
style={{
fontSize: "18px",
color: Constants.COLORS.ICON_INFO,
marginBottom: "4px",
verticalAlign: "middle",
}}
/>
</Popover>
</>
) : (
<>{groupTask.name}</>
),
status:
groupTaskSteps[index] !== undefined
? getStepItemStatus(groupTaskSteps[index].Status)
@ -299,92 +356,104 @@ export default function GroupTasksViewModal({ isOpen }) {
return (
<div key={paramGroupTaskId}>
<Popover
placement="bottomLeft"
title={
<h2
key={"test"}
style={{
fontWeight: "bold",
color: Constants.COLORS.SECONDARY,
}}
>
Details
</h2>
}
content={
<>
<p>
<span style={{ fontWeight: "bold" }}>ID:</span>{" "}
{paramGroupTaskId} <br />
<span style={{ fontWeight: "bold" }}>Category:</span>{" "}
{currentGroupTask.Category}
<br />
<span style={{ fontWeight: "bold" }}>
Started at:
</span>{" "}
{FormatDatetime(currentGroupTask.StartedAt)}
<br />
<span style={{ fontWeight: "bold" }}>Endet at:</span>{" "}
{FormatDatetime(currentGroupTask.EndedAt)}
<br />
<span style={{ fontWeight: "bold" }}>Duration:</span>{" "}
{GetDuration(
currentGroupTask.StartedAt,
currentGroupTask.EndedAt
)}
</p>
{currentGroupTask.GlobalInputs !== "[]" ? (
<>
<h2
style={{
fontWeight: "bold",
color: Constants.COLORS.SECONDARY,
}}
>
Specified Global Inputs
</h2>
<p>
{JSON.parse(currentGroupTask.GlobalInputs).map(
(globalInput) => {
return (
<span
key={
globalInput.parameterName +
globalInput.value
}
>
<span style={{ fontWeight: "bold" }}>
{globalInput.parameterName}:{" "}
</span>
<span>
{globalInput.value !== ""
? globalInput.value
: Constants.TEXT_EMPTY_PLACEHOLDER}
</span>
<br />
</span>
);
}
)}
</p>
</>
) : null}
</>
}
trigger="click"
<h1
style={{
color: Constants.COLORS.PRIMARY,
fontWeight: "bold",
}}
>
<h1
style={{
color: Constants.COLORS.PRIMARY,
fontWeight: "bold",
}}
{currentGroupTask.GroupName}{" "}
<Popover
trigger="click"
title={
<h2
style={{
fontWeight: "bold",
color: Constants.COLORS.SECONDARY,
}}
>
Details
</h2>
}
content={
<>
<p>
<span style={{ fontWeight: "bold" }}>ID:</span>{" "}
{paramGroupTaskId} <br />
<span style={{ fontWeight: "bold" }}>
Category:
</span>{" "}
{currentGroupTask.Category}
<br />
<span style={{ fontWeight: "bold" }}>
Started at:
</span>{" "}
{FormatDatetime(currentGroupTask.StartedAt)}
<br />
<span style={{ fontWeight: "bold" }}>
Endet at:
</span>{" "}
{FormatDatetime(currentGroupTask.EndedAt)}
<br />
<span style={{ fontWeight: "bold" }}>
Duration:
</span>{" "}
{GetDuration(
currentGroupTask.StartedAt,
currentGroupTask.EndedAt
)}
</p>
{currentGroupTask.GlobalInputs !== "[]" ? (
<>
<h2
style={{
fontWeight: "bold",
color: Constants.COLORS.SECONDARY,
}}
>
Specified Global Inputs
</h2>
<p>
{JSON.parse(currentGroupTask.GlobalInputs).map(
(globalInput) => {
return (
<span
key={
globalInput.parameterName +
globalInput.value
}
>
<span style={{ fontWeight: "bold" }}>
{globalInput.parameterName}:{" "}
</span>
<span>
{globalInput.value !== ""
? globalInput.value
: Constants.TEXT_EMPTY_PLACEHOLDER}
</span>
<br />
</span>
);
}
)}
</p>
</>
) : null}
</>
}
>
{currentGroupTask.GroupName}
</h1>
</Popover>
<InfoCircleOutlined
style={{
fontSize: "18px",
color: Constants.COLORS.ICON_INFO,
marginBottom: "4px",
verticalAlign: "middle",
}}
/>
</Popover>{" "}
</h1>
<Steps direction="vertical" items={stepsItemHandler()} />
</div>

View File

@ -8,6 +8,7 @@ export const Constants = {
COLORS: {
PRIMARY: "#e67e22",
SECONDARY: "#9b59b6",
ICON_INFO: "#08c",
},
TEXT_EMPTY_PLACEHOLDER: "-/-",
API_ADDRESS: "http://localhost:8080/v1",
@ -195,7 +196,6 @@ export function WebSocketProvider({
duration: 2,
});
break;
case ReceivedMessagesCommands.default:
console.error("unknown command", cmd);
break;