starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-07 00:01:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loading state

Browse Source
This commit is contained in:
Guilhem
2025-06-23 11:45:39 +01:00
parent 8566c5dfdf
commit f4c54db84e
8 changed files with 61 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/FlowBuilder.svelte
+6
View File
@@ -319,7 +319,11 @@
loadingDraft = false
}
let loadingJobs: 'wait' | 'loading' | 'done' = $state('wait')
onMount(() => {
setTimeout(() => {
loadingJobs = 'loading'
}, 2000)
setSavedraftCb?.(() => saveDraft())
})
@@ -987,6 +991,7 @@
}}
bind:this={flowPreviewButtons}
{loading}
bind:loadingJobs
/>
<Button
loading={loadingDraft}
@@ -1050,6 +1055,7 @@
}}
{forceTestTab}
{highlightArg}
{loadingJobs}
/>
{:else}
<CenteredPage>Loading...</CenteredPage>
frontend/src/lib/components/FlowPreviewContent.svelte
+2
View File
@@ -41,6 +41,7 @@
export let localModuleStates: Writable<Record<string, GraphModuleState>> = writable({})
export let localDurationStatuses: Writable<Record<string, DurationStatus>> = writable({})
export let onJobsLoaded: (() => void) | undefined = undefined
let restartBranchNames: [number, string][] = []
@@ -552,6 +553,7 @@
on:jobsLoaded={() => {
if (initial) {
loadIndividualStepsStates()
onJobsLoaded?.()
}
}}
bind:selectedJobStep
frontend/src/lib/components/ModulePreviewResultViewer.svelte
+7 -3
View File
@@ -24,6 +24,7 @@
disableMock?: boolean
disableHistory?: boolean
onUpdateMock?: (mock: { enabled: boolean; return_value?: unknown }) => void
loadingHistory?: boolean
}
let {
@@ -38,7 +39,8 @@
testIsLoading = false,
disableMock = false,
disableHistory = false,
onUpdateMock
onUpdateMock,
loadingHistory = false
}: Props = $props()
const { testSteps } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -82,7 +84,7 @@
mock={mod.mock}
bind:forceJson
bind:selectedJob
isLoading={(testIsLoading && !scriptProgress) || fetchingLastJob}
isLoading={(testIsLoading && !scriptProgress) || fetchingLastJob || loadingHistory}
bind:preview
path={`path` in mod.value ? mod.value.path : ''}
{loopStatus}
@@ -112,7 +114,9 @@
duration={selectedJob?.['duration_ms']}
mem={selectedJob?.['mem_peak']}
content={selectedJob?.logs}
isLoading={(testIsLoading && selectedJob?.['running'] == false) || fetchingLastJob}
isLoading={(testIsLoading && selectedJob?.['running'] == false) ||
fetchingLastJob ||
loadingHistory}
tag={selectedJob?.tag}
/>
{/if}
frontend/src/lib/components/flows/FlowEditor.svelte
+4 -1
View File
@@ -36,6 +36,7 @@
onEditInput?: ((moduleId: string, key: string) => void) | undefined
forceTestTab?: Record<string, boolean>
highlightArg?: Record<string, string | undefined>
loadingJobs?: 'wait' | 'loading' | 'done'
}
let {
@@ -52,7 +53,8 @@
onTestUpTo = undefined,
onEditInput = undefined,
forceTestTab,
highlightArg
highlightArg,
loadingJobs
}: Props = $props()
let flowModuleSchemaMap: FlowModuleSchemaMap | undefined = $state()
@@ -125,6 +127,7 @@
{onDeployTrigger}
{forceTestTab}
{highlightArg}
{loadingJobs}
/>
{/if}
</Pane>
frontend/src/lib/components/flows/content/FlowEditorPanel.svelte
+4 -1
View File
@@ -27,6 +27,7 @@
onDeployTrigger?: (trigger: Trigger) => void
forceTestTab?: Record<string, boolean>
highlightArg?: Record<string, string | undefined>
loadingJobs?: 'wait' | 'loading' | 'done'
}
let {
@@ -37,7 +38,8 @@
savedFlow = undefined,
onDeployTrigger = () => {},
forceTestTab,
highlightArg
highlightArg,
loadingJobs
}: Props = $props()
const {
@@ -144,6 +146,7 @@
savedModule={savedFlow?.value.modules[index]}
{forceTestTab}
{highlightArg}
{loadingJobs}
/>
{/each}
{/key}
frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+29 -14
View File
@@ -79,6 +79,7 @@
savedModule?: FlowModule | undefined
forceTestTab?: boolean
highlightArg?: string
loadingJobs?: 'wait' | 'loading' | 'done'
}
let {
@@ -93,7 +94,8 @@
enableAi,
savedModule = undefined,
forceTestTab = false,
highlightArg = undefined
highlightArg = undefined,
loadingJobs
}: Props = $props()
let tag: string | undefined = $state(undefined)
@@ -821,20 +823,32 @@
{#if selected === 'test'}
<Pane minSize={20} class="relative">
{#if $flowStateStore[flowModule.id]?.initial}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
onclick={() => {
$flowStateStore[flowModule.id]!.initial = false
}}
class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
>
<div class="text-center text-primary text-sm py-2 pt-20"
><span class="font-bold border p-2 bg-surface-secondary rounded-md"
>Run loaded from history</span
></div
{#if loadingJobs && loadingJobs !== 'done'}
<div
class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
>
</div>
<div class="text-center text-primary text-sm py-2 pt-20">
<span class="font-bold border p-2 bg-surface-secondary rounded-md">
Loading history...
</span>
</div>
</div>
{:else}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
onclick={() => {
$flowStateStore[flowModule.id]!.initial = false
}}
class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
>
<div class="text-center text-primary text-sm py-2 pt-20"
><span class="font-bold border p-2 bg-surface-secondary rounded-md"
>Run loaded from history</span
></div
>
</div>
{/if}
{/if}
<ModulePreviewResultViewer
lang={flowModule.value['language'] ?? 'deno'}
@@ -855,6 +869,7 @@
{testIsLoading}
disableMock={preprocessorModule || failureModule}
disableHistory={failureModule}
loadingHistory={loadingJobs !== undefined && loadingJobs !== 'done'}
/>
</Pane>
{/if}
frontend/src/lib/components/flows/content/FlowModuleWrapper.svelte
+4 -1
View File
@@ -42,6 +42,7 @@
previousModule?: FlowModule | undefined
forceTestTab?: Record<string, boolean>
highlightArg?: Record<string, string | undefined>
loadingJobs?: 'wait' | 'loading' | 'done'
}
let {
@@ -52,7 +53,8 @@
parentModule = $bindable(),
previousModule = undefined,
forceTestTab,
highlightArg
highlightArg,
loadingJobs
}: Props = $props()
function initializePrimaryScheduleForTriggerScript(module: FlowModule) {
@@ -202,6 +204,7 @@
{savedModule}
forceTestTab={forceTestTab?.[flowModule.id]}
highlightArg={highlightArg?.[flowModule.id]}
{loadingJobs}
/>
{/if}
{:else if flowModule.value.type === 'forloopflow' || flowModule.value.type == 'whileloopflow'}
frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+5 -1
View File
@@ -27,6 +27,7 @@
}
flowPreviewContent?.test()
}
export let loadingJobs: 'wait' | 'loading' | 'done' = 'wait'
const dispatch = createEventDispatcher()
@@ -111,7 +112,7 @@
</Button>
{#if !loading}
<Drawer bind:open={previewOpen} size="75%" {preventEscape}>
<Drawer bind:open={previewOpen} size="75%" {preventEscape} alwaysOpen={loadingJobs === 'loading'}>
<FlowPreviewContent
bind:this={flowPreviewContent}
bind:localModuleStates
@@ -127,6 +128,9 @@
bind:selectedJobStepType
bind:branchOrIterationN
bind:rightColumnSelect
onJobsLoaded={() => {
loadingJobs = 'done'
}}
on:close={() => {
previewOpen = false
}}