mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-06 16:02:23 +00:00
84 lines
2.5 KiB
Svelte
84 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { FlowGraph } from './graph'
|
|
import HighlightCode from './HighlightCode.svelte'
|
|
import InputTransformsViewer from './InputTransformsViewer.svelte'
|
|
import IconedPath from './IconedPath.svelte'
|
|
import { scriptPathToHref } from '../utils'
|
|
import type { FlowModule, FlowValue } from '$lib/gen'
|
|
export let flow: {
|
|
summary: string
|
|
description?: string
|
|
value: FlowValue
|
|
schema?: any
|
|
}
|
|
export let overflowAuto = false
|
|
let stepDetail: FlowModule | undefined = undefined
|
|
</script>
|
|
|
|
<div class="flex flex-col h-full">
|
|
<div class="h-full w-full border border-gray-700" class:overflow-auto={overflowAuto}>
|
|
<FlowGraph
|
|
modules={flow?.value?.modules}
|
|
failureModule={flow?.value?.failure_module}
|
|
on:click={(e) => (stepDetail = e.detail)}
|
|
/>
|
|
</div>
|
|
<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
|
|
{#if stepDetail == undefined}
|
|
<span class="font-black text-lg w-full my-4">
|
|
<span>Click on a step to see its details</span>
|
|
</span>
|
|
{:else}
|
|
<div class="font-black text-lg w-full mb-2 "
|
|
>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal">{stepDetail.summary || ''}</span
|
|
></div
|
|
>
|
|
{#if stepDetail.value.type == 'identity'}
|
|
<div> An identity step return as output its input </div>
|
|
{:else if stepDetail.value.type == 'rawscript'}
|
|
<div class="text-2xs mb-4">
|
|
<h3>Step Inputs</h3>
|
|
<InputTransformsViewer
|
|
inputTransforms={stepDetail?.value?.input_transforms ??
|
|
stepDetail?.input_transforms ??
|
|
{}}
|
|
/>
|
|
</div>
|
|
|
|
<h3>Code</h3>
|
|
<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
|
|
{:else if stepDetail.value.type == 'script'}
|
|
<div class="mb-4">
|
|
<a
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
href={scriptPathToHref(stepDetail?.value?.path ?? '')}
|
|
class=""
|
|
>
|
|
<IconedPath path={stepDetail?.value?.path ?? ''} />
|
|
</a>
|
|
</div>
|
|
<div class="text-2xs mb-4">
|
|
<h3>Step Inputs</h3>
|
|
<InputTransformsViewer
|
|
inputTransforms={stepDetail?.value?.input_transforms ??
|
|
stepDetail?.input_transforms ??
|
|
{}}
|
|
/>
|
|
</div>
|
|
{#if stepDetail.value.path.startsWith('hub/')}
|
|
<div class="mt-6">
|
|
<h3>Code</h3>
|
|
<iframe
|
|
class="w-full h-full text-sm"
|
|
title="embedded script from hub"
|
|
frameborder="0"
|
|
src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(4)}"
|
|
/>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|