windmill/frontend/src/lib/components/apps/editor/RunnableJobPanelInner.svelte

<script lang="ts">
	import DisplayResult from '$lib/components/DisplayResult.svelte'
	import LogViewer from '$lib/components/LogViewer.svelte'
	import { Splitpanes, Pane } from 'svelte-splitpanes'
	import type { Job } from '$lib/gen'
	import { Loader2 } from 'lucide-svelte'

	interface Props {
		frontendJob?: boolean | any
		testJob?: Job | any
		testIsLoading?: boolean
	}

	let { frontendJob = false, testJob = undefined, testIsLoading = false }: Props = $props()

	let logDrawerOpen = $state(false)
	let resultDrawerOpen = $state(false)
</script>

<Splitpanes horizontal>
	<Pane size={frontendJob ? 30 : 50} minSize={10}>
		{#if frontendJob}
			<div class="p-2 bg-surface-secondary h-full w-full">
				<div class="text-sm text-primary pb-4">Frontend Job</div>
				<div class="text-2xs text-primary">Check your browser console to see the logs</div>
			</div>
		{:else}
			<LogViewer
				bind:drawerOpen={logDrawerOpen}
				small
				jobId={testJob?.id}
				duration={testJob?.['duration_ms']}
				mem={testJob?.['mem_peak']}
				content={testJob?.logs}
				isLoading={testIsLoading && testJob?.['running'] == false}
				tag={testJob?.tag}
			/>
		{/if}
	</Pane>
	<Pane size={frontendJob ? 70 : 50} minSize={10} class="text-sm text-primary">
		{#if frontendJob}
			<div class="break-words relative h-full px-1">
				<DisplayResult bind:drawerOpen={resultDrawerOpen} result={frontendJob} />
			</div>
		{:else if testJob != undefined && (testJob.type == 'CompletedJob' || testJob.result_stream)}
			<div class="break-words relative h-full px-1">
				<DisplayResult
					bind:drawerOpen={resultDrawerOpen}
					workspaceId={testJob?.workspace_id}
					result_stream={testJob?.result_stream}
					jobId={testJob?.id}
					result={testJob.result}
					language={testJob?.language}
				/></div
			>
		{:else}
			<div class="px-1 pt-1">
				{#if testIsLoading}
					<Loader2 class="animate-spin" />
				{:else}
					Test to see the result here
				{/if}
			</div>
		{/if}
	</Pane>
</Splitpanes>