Skip to content

Commit 1bc6317

Browse files
Kiryoustalboren
Kiryous
and
talboren
authored
fix: support test runs with alert or incident payload (#4496)
Co-authored-by: Tal <tal@keephq.dev>
1 parent 02de284 commit 1bc6317

30 files changed

+1300
-431
lines changed

‎keep-ui/app/(keep)/workflows/workflow-run-with-alert-modal.tsx

+59-60
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from "react";
2-
import { TextInput, Button, Text, Card } from "@tremor/react";
3-
import { TrashIcon } from "@heroicons/react/24/outline";
2+
import { TextInput, Button, Text } from "@tremor/react";
3+
import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
44
import Modal from "@/components/ui/Modal";
55

66
interface StaticField {
@@ -85,8 +85,8 @@ export default function AlertTriggerModal({
8585
};
8686

8787
const handleAddField = (e: React.FormEvent) => {
88-
setDynamicFields([...dynamicFields, { key: "", value: "" }]);
8988
e.preventDefault();
89+
setDynamicFields([...dynamicFields, { key: "", value: "" }]);
9090
};
9191

9292
const handleSubmit = (e: React.FormEvent) => {
@@ -167,89 +167,88 @@ export default function AlertTriggerModal({
167167
<Modal isOpen={isOpen} onClose={onClose} title="Build Alert Payload">
168168
<form onSubmit={handleSubmit}>
169169
{Array.isArray(staticFields) && staticFields.length > 0 && (
170-
<Card className="mb-4">
170+
<>
171171
<Text className="mb-2">Fields Defined As Workflow Filters</Text>
172172
{staticFields.map((field, index) => (
173173
<div key={field.key} className="flex gap-2 mb-2">
174174
<TextInput placeholder="Key" value={field.key} disabled />
175175
<TextInput placeholder="Value" value={field.value} disabled />
176176
</div>
177177
))}
178-
</Card>
178+
</>
179179
)}
180180

181-
<Card className="mb-4">
182-
<Text className="mb-2">
183-
Fields Needed for Workflow (used in the workflow)
184-
</Text>
185-
{Array.isArray(dependencies) &&
186-
dependencies.map((dependencyName, index) => (
187-
<div key={dependencyName} className="flex gap-2 mb-2">
188-
<TextInput
189-
placeholder={dependencyName}
190-
value={dependencyName}
191-
disabled
192-
/>
193-
<TextInput
194-
className={dependenciesErrors[index] ? "border-red-500" : ""}
195-
placeholder="value"
196-
value={dependencyValues[dependencyName] || ""}
197-
onChange={(e) =>
198-
handleDependencyChange(dependencyName, e.target.value)
199-
}
200-
/>
201-
</div>
202-
))}
203-
</Card>
204-
205-
<Card>
206-
{dynamicFields.map((field, index) => (
207-
<div
208-
key={index}
209-
className={`flex items-center gap-2 mb-2 ${
210-
fieldErrors[index] ? "border-2 border-red-500 p-2" : ""
211-
}`}
212-
>
181+
<Text className="mb-2">
182+
These fields are needed for the workflow to run
183+
</Text>
184+
{Array.isArray(dependencies) &&
185+
dependencies.map((dependencyName, index) => (
186+
<div key={dependencyName} className="flex gap-2 mb-2">
213187
<TextInput
214-
placeholder="Key"
215-
value={field.key}
216-
onChange={(e) =>
217-
handleFieldChange(index, "key", e.target.value)
218-
}
188+
placeholder={dependencyName}
189+
value={dependencyName}
190+
disabled
219191
/>
220192
<TextInput
221-
placeholder="Value"
222-
value={field.value}
193+
placeholder="value"
194+
value={dependencyValues[dependencyName] || ""}
223195
onChange={(e) =>
224-
handleFieldChange(index, "value", e.target.value)
196+
handleDependencyChange(dependencyName, e.target.value)
225197
}
198+
error={dependenciesErrors[index]}
226199
/>
227-
<button
228-
onClick={() => handleDeleteField(index)}
229-
className="flex items-center text-gray-500 hover:text-gray-700"
230-
>
231-
<TrashIcon className="h-5 w-5" aria-hidden="true" />
232-
</button>
233200
</div>
234201
))}
235-
<div className="flex justify-center">
236-
<Button color="orange" onClick={handleAddField}>
237-
Add another field
238-
</Button>
239-
</div>
240-
</Card>
241202

242-
<div className="mt-4 flex gap-2">
243-
<Button color="orange" type="submit">
244-
Run workflow
203+
{dynamicFields.map((field, index) => (
204+
<div
205+
key={index}
206+
className={`flex items-center gap-2 mb-2 ${
207+
fieldErrors[index] ? "border-2 border-red-500 p-2" : ""
208+
}`}
209+
>
210+
<TextInput
211+
placeholder="Key"
212+
value={field.key}
213+
onChange={(e) => handleFieldChange(index, "key", e.target.value)}
214+
/>
215+
<TextInput
216+
placeholder="Value"
217+
value={field.value}
218+
onChange={(e) =>
219+
handleFieldChange(index, "value", e.target.value)
220+
}
221+
/>
222+
<button
223+
onClick={() => handleDeleteField(index)}
224+
className="flex items-center text-gray-500 hover:text-gray-700"
225+
>
226+
<TrashIcon className="h-5 w-5" aria-hidden="true" />
227+
</button>
228+
</div>
229+
))}
230+
<div className="flex justify-end">
231+
<Button
232+
variant="light"
233+
icon={PlusIcon}
234+
color="orange"
235+
onClick={handleAddField}
236+
>
237+
Add another field
245238
</Button>
239+
</div>
240+
241+
<div className="mt-8 flex justify-end gap-2">
246242
<Button
247243
onClick={onClose}
248244
variant="secondary"
249245
className="border border-orange-500 text-orange-500"
250246
>
251247
Cancel
252248
</Button>
249+
<Button color="orange" type="submit">
250+
Run workflow
251+
</Button>
253252
</div>
254253
</form>
255254
</Modal>

‎keep-ui/components/ui/Modal.tsx

+27-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
2-
import { DialogPanel, Dialog, Title, Text, Badge } from "@tremor/react";
2+
import { DialogPanel, Dialog, Text, Badge, Button } from "@tremor/react";
3+
import { XMarkIcon } from "@heroicons/react/24/outline";
4+
import { PageTitle } from "@/shared/ui/PageTitle";
35

46
export default function Modal({
57
children,
@@ -9,6 +11,7 @@ export default function Modal({
911
beforeTitle,
1012
className = "",
1113
beta = false,
14+
description,
1215
}: {
1316
children: React.ReactNode;
1417
isOpen: boolean;
@@ -17,21 +20,39 @@ export default function Modal({
1720
title?: string;
1821
className?: string;
1922
beta?: boolean;
23+
description?: string;
2024
}) {
2125
return (
2226
<Dialog open={isOpen} onClose={onClose}>
2327
<DialogPanel
2428
className={`border-2 border-orange-300 rounded-lg ring-0 ${className}`}
2529
>
2630
{title && (
27-
<div className="flex flex-col">
31+
<header className="flex flex-col mb-4">
2832
{beforeTitle && (
2933
<Text className="text-sm text-gray-500">{beforeTitle}</Text>
3034
)}
31-
<Title>
32-
{title} {beta && <Badge color="orange">Beta</Badge>}
33-
</Title>
34-
</div>
35+
<div className="flex flex-row items-center justify-between gap-2">
36+
<PageTitle>
37+
{title}
38+
{beta && <Badge color="orange">Beta</Badge>}
39+
</PageTitle>
40+
<Button
41+
variant="light"
42+
color="gray"
43+
size="xl"
44+
className="aspect-square p-1 hover:bg-gray-100 hover:dark:bg-gray-400/10 rounded"
45+
icon={XMarkIcon}
46+
onClick={(e) => {
47+
e.preventDefault();
48+
onClose();
49+
}}
50+
/>
51+
</div>
52+
{description && (
53+
<Text className="text-sm text-gray-500">{description}</Text>
54+
)}
55+
</header>
3556
)}
3657
{children}
3758
</DialogPanel>

‎keep-ui/components/ui/TextInput.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ const TextInput = forwardRef(
1313
return (
1414
<TremorTextInput
1515
ref={ref}
16-
className={cn("[&>input]:placeholder:text-gray-400", className)}
16+
className={cn(
17+
"[&>input:not([disabled])]:placeholder:text-gray-400 [&>input:disabled]:text-gray-500",
18+
className
19+
)}
1720
{...props}
1821
/>
1922
);

‎keep-ui/entities/workflow-executions/model/useWorkflowExecutionsRevalidation.ts

+9
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,17 @@ export const useWorkflowExecutionsRevalidation = () => {
1313
revalidateLists();
1414
};
1515

16+
const revalidateForWorkflowExecution = (
17+
workflowId: string | null,
18+
workflowExecutionId: string
19+
) => {
20+
mutate(workflowExecutionsKeys.detail(workflowId, workflowExecutionId));
21+
revalidateLists();
22+
};
23+
1624
return {
1725
revalidateLists,
1826
revalidateForWorkflow,
27+
revalidateForWorkflowExecution,
1928
};
2029
};

‎keep-ui/entities/workflow-executions/model/workflowExecutionsKeys.ts

+2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ export const workflowExecutionsKeys = {
2424
workflowExecutionId,
2525
].join("::"),
2626
getListMatcher: () => (key: any) =>
27+
typeof key === "string" &&
2728
key.startsWith([workflowExecutionsKeys.all, "list"].join("::")),
2829
getDetailMatcher: (workflowId: string) => (key: any) =>
30+
typeof key === "string" &&
2931
key.startsWith(
3032
[workflowExecutionsKeys.all, "detail", workflowId].join("::")
3133
),

0 commit comments

Comments
 (0)