mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-19 16:02:14 +00:00
fix(frontend): Flow editor design updates (#1477)
* fix(frontend): Add seconds input to flow retries * fix(frontend): Update flow branch editor styling
This commit is contained in:
Ádám Kovács
GitHub
@@ -1,15 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { Alert, Tab } from '$lib/components/common'
|
||||
import { Alert, Badge, Tab } from '$lib/components/common'
|
||||
import TabContent from '$lib/components/common/tabs/TabContent.svelte'
|
||||
import Tabs from '$lib/components/common/tabs/Tabs.svelte'
|
||||
import Toggle from '$lib/components/Toggle.svelte'
|
||||
|
||||
import type { BranchAll, FlowModule } from '$lib/gen'
|
||||
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
||||
import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte'
|
||||
import FlowCard from '../common/FlowCard.svelte'
|
||||
import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
|
||||
import FlowModuleSleep from './FlowModuleSleep.svelte'
|
||||
import FlowModuleSuspend from './FlowModuleSuspend.svelte'
|
||||
// import FlowRetries from './FlowRetries.svelte'
|
||||
|
||||
export let flowModule: FlowModule
|
||||
export let previousModule: FlowModule | undefined
|
||||
@@ -22,76 +23,73 @@
|
||||
|
||||
<div class="h-full flex flex-col w-full">
|
||||
<FlowCard title={value.type == 'branchall' ? 'Run all branches' : 'Run one branch'}>
|
||||
<div class="flex flex-col h-full w-full">
|
||||
<div class="border w-full">
|
||||
<Alert notRounded type="info" title="All branches will be run">
|
||||
The result of this step is the list of the result of each branch.
|
||||
</Alert>
|
||||
<SplitPanesWrapper>
|
||||
<Splitpanes horizontal>
|
||||
<Pane size={flowModule ? 60 : 100}>
|
||||
<Alert notRounded type="info" title="All branches will be run" class="m-2">
|
||||
The result of this step is the list of the result of each branch.
|
||||
</Alert>
|
||||
|
||||
<div class="p-4 mt-4 w-full">
|
||||
<h3 class="mb-4">{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
|
||||
>
|
||||
<div class="flex flex-col gap-y-4 py-2 w-full max-w-xl">
|
||||
{#each value.branches as branch}
|
||||
<div class="flex flex-row gap-x-4 w-full items-center">
|
||||
<div class="grow">
|
||||
<input type="text" bind:value={branch.summary} placeholder="Summary" />
|
||||
<div class="p-4 mt-4 w-full">
|
||||
<h3 class="mb-4"
|
||||
>{value.branches.length} branch{value.branches.length > 1 ? 'es' : ''}</h3
|
||||
>
|
||||
<div class="flex flex-col gap-y-4 py-2 w-full">
|
||||
{#each value.branches as branch, i}
|
||||
<div class="flex flex-row gap-x-4 w-full items-center">
|
||||
<div class="grow flex gap-2">
|
||||
<Badge large={true} color="blue">Branch {i + 1}</Badge>
|
||||
<input type="text" bind:value={branch.summary} placeholder="Summary" />
|
||||
</div>
|
||||
<div class="w-min-sm">
|
||||
<Toggle
|
||||
bind:checked={branch.skip_failure}
|
||||
options={{
|
||||
right: 'Skip failure'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-min-sm">
|
||||
<Toggle
|
||||
bind:checked={branch.skip_failure}
|
||||
options={{
|
||||
right: 'Skip failure'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
|
||||
<Toggle
|
||||
bind:checked={value.parallel}
|
||||
options={{
|
||||
right: 'All branches run in parallel'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if flowModule}
|
||||
<Tabs bind:selected>
|
||||
<!-- <Tab value="retries">Retries</Tab> -->
|
||||
<Tab value="early-stop">Early Stop/Break</Tab>
|
||||
<Tab value="suspend">Suspend</Tab>
|
||||
<Tab value="sleep">Sleep</Tab>
|
||||
|
||||
<svelte:fragment slot="content">
|
||||
<div class="overflow-hidden bg-white">
|
||||
<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowRetries bind:flowModule />
|
||||
</div>
|
||||
</TabContent> -->
|
||||
|
||||
<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleEarlyStop bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
|
||||
<TabContent value="suspend" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSuspend bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
<TabContent value="sleep" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
{/each}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Tabs>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
|
||||
<Toggle
|
||||
bind:checked={value.parallel}
|
||||
options={{
|
||||
right: 'All branches run in parallel'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Pane>
|
||||
{#if flowModule}
|
||||
<Pane size={40}>
|
||||
<Tabs bind:selected>
|
||||
<Tab value="early-stop">Early Stop/Break</Tab>
|
||||
<Tab value="suspend">Suspend</Tab>
|
||||
<Tab value="sleep">Sleep</Tab>
|
||||
<svelte:fragment slot="content">
|
||||
<div class="overflow-hidden bg-white">
|
||||
<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleEarlyStop bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
<TabContent value="suspend" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSuspend bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
<TabContent value="sleep" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Tabs>
|
||||
</Pane>
|
||||
{/if}
|
||||
</Splitpanes>
|
||||
</SplitPanesWrapper>
|
||||
</FlowCard>
|
||||
</div>
|
||||
|
||||
@@ -4,11 +4,13 @@
|
||||
import Tabs from '$lib/components/common/tabs/Tabs.svelte'
|
||||
|
||||
import type { BranchOne, FlowModule } from '$lib/gen'
|
||||
import { Pane, Splitpanes } from 'svelte-splitpanes'
|
||||
import FlowCard from '../common/FlowCard.svelte'
|
||||
import BranchPredicateEditor from './BranchPredicateEditor.svelte'
|
||||
import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
|
||||
import FlowModuleSleep from './FlowModuleSleep.svelte'
|
||||
import FlowModuleSuspend from './FlowModuleSuspend.svelte'
|
||||
import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte'
|
||||
// import FlowRetries from './FlowRetries.svelte'
|
||||
|
||||
export let flowModule: FlowModule
|
||||
@@ -22,73 +24,72 @@
|
||||
|
||||
<div class="h-full">
|
||||
<FlowCard title="Run one branch">
|
||||
<div class="flex flex-col h-full overflow-auto">
|
||||
<div class="border">
|
||||
<Alert notRounded type="info" title="Only one branch will be run">
|
||||
The result of this step is the result of the branch.
|
||||
</Alert>
|
||||
|
||||
<div class="p-2">
|
||||
<h3 class="my-4"
|
||||
>{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}</h3
|
||||
>
|
||||
<div class="flex flex-col gap-y-4 py-2">
|
||||
<div class="flex flex-row gap-2 text-sm border border-gray-400 p-2">
|
||||
<Badge large={true} color="blue">Default branch</Badge>
|
||||
<p class="italic text-gray-600"
|
||||
>If none of the predicates' expressions evaluated in-order match, this branch is
|
||||
chosen</p
|
||||
>
|
||||
</div>
|
||||
{#each value.branches as branch}
|
||||
<div class="flex flex-col gap-x-2 p-2 items-center border border-gray-400">
|
||||
<input
|
||||
class="w-full"
|
||||
type="text"
|
||||
bind:value={branch.summary}
|
||||
placeholder="Summary"
|
||||
/>
|
||||
<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
|
||||
<SplitPanesWrapper>
|
||||
<Splitpanes horizontal>
|
||||
<Pane size={flowModule ? 60 : 100}>
|
||||
<Alert notRounded type="info" title="Only one branch will be run" class="m-2">
|
||||
The result of this step is the result of the branch.
|
||||
</Alert>
|
||||
<div class="p-2">
|
||||
<h3 class="my-4">
|
||||
{value.branches.length + 1} branch{value.branches.length + 1 > 1 ? 'es' : ''}
|
||||
</h3>
|
||||
<div class="py-2">
|
||||
<div class="flex flex-row gap-2 text-sm p-2">
|
||||
<Badge large={true} color="blue">Default branch</Badge>
|
||||
<p class="italic text-gray-600"
|
||||
>If none of the predicates' expressions evaluated in-order match, this branch is
|
||||
chosen</p
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if flowModule}
|
||||
<Tabs bind:selected>
|
||||
<!-- <Tab value="retries">Retries</Tab> -->
|
||||
<Tab value="early-stop">Early Stop/Break</Tab>
|
||||
<Tab value="suspend">Suspend</Tab>
|
||||
<Tab value="sleep">Sleep</Tab>
|
||||
|
||||
<svelte:fragment slot="content">
|
||||
<div class="overflow-hidden bg-white">
|
||||
<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowRetries bind:flowModule />
|
||||
{#each value.branches as branch, i}
|
||||
<div class="flex flex-col gap-x-2 items-center">
|
||||
<div class="w-full flex gap-2 px-2 pt-10 pb-2">
|
||||
<Badge large={true} color="blue">Branch {i + 1}</Badge>
|
||||
<input
|
||||
class="w-full"
|
||||
type="text"
|
||||
bind:value={branch.summary}
|
||||
placeholder="Summary"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full border">
|
||||
<BranchPredicateEditor {branch} parentModule={flowModule} {previousModule} />
|
||||
</div>
|
||||
</div>
|
||||
</TabContent> -->
|
||||
|
||||
<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleEarlyStop bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
|
||||
<TabContent value="suspend" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSuspend bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
<TabContent value="sleep" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
{/each}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Tabs>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Pane>
|
||||
{#if flowModule}
|
||||
<Pane size={40}>
|
||||
<Tabs bind:selected>
|
||||
<Tab value="early-stop">Early Stop/Break</Tab>
|
||||
<Tab value="suspend">Suspend</Tab>
|
||||
<Tab value="sleep">Sleep</Tab>
|
||||
<svelte:fragment slot="content">
|
||||
<div class="overflow-hidden bg-white">
|
||||
<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleEarlyStop bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
<TabContent value="suspend" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSuspend bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
<TabContent value="sleep" class="flex flex-col flex-1 h-full">
|
||||
<div class="p-4 overflow-y-auto">
|
||||
<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
|
||||
</div>
|
||||
</TabContent>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</Tabs>
|
||||
</Pane>
|
||||
{/if}
|
||||
</Splitpanes>
|
||||
</SplitPanesWrapper>
|
||||
</FlowCard>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import Toggle from '$lib/components/Toggle.svelte'
|
||||
import Tooltip from '$lib/components/Tooltip.svelte'
|
||||
import type { FlowModule } from '$lib/gen'
|
||||
import { SecondsInput } from '$lib/components/common'
|
||||
|
||||
export let flowModule: FlowModule
|
||||
|
||||
@@ -30,7 +31,7 @@
|
||||
$: isExponentialRetryEnabled = Boolean(flowModule.retry?.exponential)
|
||||
</script>
|
||||
|
||||
<div class={$$props.class}>
|
||||
<div class="h-full flex flex-col {$$props.class ?? ''}">
|
||||
<h2>
|
||||
Retries
|
||||
<Tooltip>
|
||||
@@ -40,8 +41,8 @@
|
||||
</Tooltip>
|
||||
</h2>
|
||||
|
||||
<div class="flex">
|
||||
<div class="w-1/2 mr-2">
|
||||
<div class="flex h-[calc(100%-22px)]">
|
||||
<div class="w-1/2 h-full overflow-auto pr-2">
|
||||
<div class="pt-4">
|
||||
<Toggle
|
||||
checked={isConstantRetryEnabled}
|
||||
@@ -60,13 +61,13 @@
|
||||
{#if flowModule.retry?.constant}
|
||||
<div class="text-xs font-bold !mt-2">Attempts</div>
|
||||
<input bind:value={flowModule.retry.constant.attempts} type="number" />
|
||||
<div class="text-xs font-bold !mt-2">Delay (in seconds)</div>
|
||||
<input bind:value={flowModule.retry.constant.seconds} type="number" />
|
||||
<div class="text-xs font-bold !mt-2">Delay</div>
|
||||
<SecondsInput bind:seconds={flowModule.retry.constant.seconds} />
|
||||
{:else}
|
||||
<div class="text-xs font-bold !mt-2">Attempts</div>
|
||||
<input type="number" disabled />
|
||||
<div class="text-xs font-bold !mt-2">Delay (in seconds)</div>
|
||||
<input type="number" disabled />
|
||||
<div class="text-xs font-bold !mt-2">Delay</div>
|
||||
<SecondsInput disabled />
|
||||
{/if}
|
||||
<div class="pt-6">
|
||||
<Toggle
|
||||
@@ -101,7 +102,7 @@
|
||||
<input type="number" disabled />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="w-1/2 ml-2">
|
||||
<div class="w-1/2 h-full overflow-auto pl-2">
|
||||
{#if true}
|
||||
{@const { attempts: cAttempts, seconds: cSeconds } = flowModule.retry?.constant || {}}
|
||||
{@const {
|
||||
@@ -115,14 +116,12 @@
|
||||
(_, i) => (multiplier || 0) * (eSeconds || 0) ** (i + cArray.length + 1)
|
||||
)}
|
||||
{@const array = [...cArray, ...eArray]}
|
||||
<div
|
||||
class="bg-gray-50 border border-gray-300 rounded max-h-[431px] overflow-auto px-4 py-2"
|
||||
>
|
||||
<div class="bg-gray-50 border border-gray-300 rounded px-4 py-2">
|
||||
<div class="text-xs font-medium mb-2">Retry attempts</div>
|
||||
{#if array.length > 0}
|
||||
<table class="text-xs">
|
||||
<tr>
|
||||
<td class="font-semibold pr-1">1:</td>
|
||||
<td class="font-semibold pr-1 pb-1">1:</td>
|
||||
<td class="pb-1">After {array[0]} second{array[0] === 1 ? '' : 's'}</td>
|
||||
</tr>
|
||||
{#each array.slice(1) as delay, i}
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
on:click_outside={() => propPickerConfig.set(undefined)}
|
||||
>
|
||||
<Splitpanes>
|
||||
<Pane minSize={20} size={60} class="relative p-4 !transition-none">
|
||||
<Pane minSize={20} size={60} class="relative p-2 !transition-none">
|
||||
<slot />
|
||||
</Pane>
|
||||
<Pane
|
||||
|
||||
Reference in New Issue
Block a user