feat: test an iteration
This commit is contained in:
Ruben Fiszel
161
frontend/src/lib/components/FlowLoopIterationPreview.svelte
Normal file
161
frontend/src/lib/components/FlowLoopIterationPreview.svelte
Normal file
@@ -0,0 +1,161 @@
|
||||
<script lang="ts">
|
||||
import { Job, JobService, type FlowModule, type RestartedFrom } from '$lib/gen'
|
||||
import { workspaceStore } from '$lib/stores'
|
||||
import { Button, Kbd } from './common'
|
||||
import { createEventDispatcher, getContext } from 'svelte'
|
||||
import type { FlowEditorContext } from './flows/types'
|
||||
import { runFlowPreview } from './flows/utils'
|
||||
import SchemaForm from './SchemaForm.svelte'
|
||||
import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
|
||||
import FlowProgressBar from './flows/FlowProgressBar.svelte'
|
||||
import { Play, RefreshCw, X } from 'lucide-svelte'
|
||||
import { getModifierKey } from '$lib/utils'
|
||||
import type { Schema } from '$lib/common'
|
||||
|
||||
export let open: boolean
|
||||
|
||||
export let jobId: string | undefined = undefined
|
||||
export let job: Job | undefined = undefined
|
||||
export let modules: FlowModule[]
|
||||
export let previewArgs: Record<string, any> = {}
|
||||
|
||||
const schema: Schema = {
|
||||
$schema: 'https://json-schema.org/draft/2020-12/schema' as string | undefined,
|
||||
properties: {
|
||||
iter: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
index: {
|
||||
type: 'number'
|
||||
},
|
||||
value: {
|
||||
type: 'object'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
required: [],
|
||||
type: 'object'
|
||||
}
|
||||
|
||||
let selectedJobStep: string | undefined = undefined
|
||||
|
||||
let isRunning: boolean = false
|
||||
let jobProgressReset: () => void
|
||||
|
||||
export function test() {
|
||||
runPreview(previewArgs, undefined)
|
||||
}
|
||||
|
||||
const { flowStateStore, pathStore } = getContext<FlowEditorContext>('FlowEditorContext')
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
export async function runPreview(
|
||||
args: Record<string, any>,
|
||||
restartedFrom: RestartedFrom | undefined
|
||||
) {
|
||||
jobProgressReset()
|
||||
const newFlow = { value: { modules }, summary: '' }
|
||||
jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom)
|
||||
isRunning = true
|
||||
}
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (open) {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
event.preventDefault()
|
||||
runPreview(previewArgs, undefined)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: if (job?.type === 'CompletedJob') {
|
||||
isRunning = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown} />
|
||||
|
||||
<div class="flex flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full" id="flow-preview-content">
|
||||
<div class="flex flex-row justify-between w-full items-center gap-x-2">
|
||||
<div class="w-8">
|
||||
<Button
|
||||
on:click={() => dispatch('close')}
|
||||
startIcon={{ icon: X }}
|
||||
iconOnly
|
||||
size="sm"
|
||||
color="light"
|
||||
btnClasses="hover:bg-surface-hover bg-surface-secondaryw-8 h-8 rounded-full p-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if isRunning}
|
||||
<Button
|
||||
color="red"
|
||||
on:click={async () => {
|
||||
isRunning = false
|
||||
try {
|
||||
jobId &&
|
||||
(await JobService.cancelQueuedJob({
|
||||
workspace: $workspaceStore ?? '',
|
||||
id: jobId,
|
||||
requestBody: {}
|
||||
}))
|
||||
} catch {}
|
||||
}}
|
||||
size="sm"
|
||||
btnClasses="w-full max-w-lg"
|
||||
loading={true}
|
||||
clickableWhileLoading
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={{ icon: isRunning ? RefreshCw : Play }}
|
||||
color="dark"
|
||||
size="sm"
|
||||
btnClasses="w-full max-w-lg"
|
||||
on:click={() => runPreview(previewArgs, undefined)}
|
||||
id="flow-editor-test-flow-drawer"
|
||||
>
|
||||
Test iteration <Kbd small isModifier>{getModifierKey()}</Kbd>
|
||||
<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
|
||||
</Button>
|
||||
{/if}
|
||||
<div />
|
||||
</div>
|
||||
<div class="w-full flex flex-col gap-y-1">
|
||||
<FlowProgressBar {job} bind:reset={jobProgressReset} />
|
||||
</div>
|
||||
<div class="overflow-y-auto grow pr-4">
|
||||
<div class="max-h-1/2 overflow-auto border-b">
|
||||
<SchemaForm
|
||||
noVariablePicker
|
||||
compact
|
||||
class="py-4 max-w-3xl"
|
||||
{schema}
|
||||
bind:args={previewArgs}
|
||||
/>
|
||||
</div>
|
||||
<div class="pt-4 grow">
|
||||
{#if jobId}
|
||||
<FlowStatusViewer
|
||||
{flowStateStore}
|
||||
{jobId}
|
||||
on:jobsLoaded={({ detail }) => {
|
||||
job = detail
|
||||
}}
|
||||
bind:selectedJobStep
|
||||
/>
|
||||
{:else}
|
||||
<div class="italic text-tertiary h-full grow"> Flow status will be displayed here </div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -9,13 +9,16 @@
|
||||
import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
|
||||
import FlowModuleSuspend from './FlowModuleSuspend.svelte'
|
||||
// import FlowRetries from './FlowRetries.svelte'
|
||||
import { Button, Tab, TabContent, Tabs } from '$lib/components/common'
|
||||
import { Button, Drawer, Tab, TabContent, Tabs } from '$lib/components/common'
|
||||
import type { FlowModule } from '$lib/gen/models/FlowModule'
|
||||
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
||||
import { getStepPropPicker } from '../previousResults'
|
||||
|
||||
import FlowModuleSleep from './FlowModuleSleep.svelte'
|
||||
import FlowModuleMock from './FlowModuleMock.svelte'
|
||||
import { Play } from 'lucide-svelte'
|
||||
import type { Job } from '$lib/gen'
|
||||
import FlowLoopIterationPreview from '$lib/components/FlowLoopIterationPreview.svelte'
|
||||
|
||||
const { previewArgs, flowStateStore, flowStore } =
|
||||
getContext<FlowEditorContext>('FlowEditorContext')
|
||||
@@ -37,8 +40,27 @@
|
||||
$previewArgs,
|
||||
false
|
||||
)
|
||||
|
||||
let previewOpen = false
|
||||
let jobId: string | undefined = undefined
|
||||
let job: Job | undefined = undefined
|
||||
|
||||
$: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {}
|
||||
</script>
|
||||
|
||||
<Drawer bind:open={previewOpen} alwaysOpen size="75%">
|
||||
<FlowLoopIterationPreview
|
||||
modules={mod.value.type == 'forloopflow' ? mod.value.modules : []}
|
||||
open={previewOpen}
|
||||
previewArgs={previewIterationArgs}
|
||||
bind:job
|
||||
bind:jobId
|
||||
on:close={() => {
|
||||
previewOpen = false
|
||||
}}
|
||||
/>
|
||||
</Drawer>
|
||||
|
||||
<div class="h-full flex flex-col">
|
||||
<FlowCard {noEditor} title="For loop">
|
||||
<div slot="header" class="grow">
|
||||
@@ -116,6 +138,11 @@
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="flex mt-4">
|
||||
<Button on:click={() => (previewOpen = true)} startIcon={{ icon: Play }} color="dark"
|
||||
>Test an iteration</Button
|
||||
>
|
||||
</div>
|
||||
</Pane>
|
||||
<Pane size={40} minSize={20} class="flex flex-col flex-1">
|
||||
<Tabs bind:selected>
|
||||
|
||||
Reference in New Issue
Block a user