Files
windmill/frontend/src/lib/components/SchemaViewer.svelte
T
Guilhem 3b5c1657c7 fix(frontend): improve runs detail page (#7694)
* separate flow and status with splitpane

* fix autoscroll behavior

* Flow log viewer nit

* not graph viewer

* Improve flow job result

* Create job detail header to replace metadata

* Remove FlowPreviewResult

* Create compact job header

* Use job header in runs page

* Improve runs page run preview

* Use flow header in detail section

* Show logs for script steps

* Clean old schedule status

* Limit result height

* Script run detail improvement

* Script run preview improvement

* Fix csv table overflow

* surface tertiary as background for Inputs

* nit

* Improve runs detail skeleton

* fix check

* nit

* Improve node definition

* fix flow module component overflow

* Use component DataTable for flow schema viewer

* Add language icon to step detail

* improve run header

* Improve Job detail header

* nit

* restore isOwner logic

* Handle resume flows

* restore execution status in run preview

* restore flow execution status in the preview

* flow preview, add status bar

* nit module status

* nit

* Remove flor preview result

* nit

* nit

* fix flow result card

* nit

* nit

* nit

* improve field selection on runs detail based on job type

* Improve column layout

* create JobStatusIcon component

* remove job status badge icons

* improve compact version

* use shared job field display

* improve job detail field display

* fix badge alignment

* increase padding

* nit

* nit

* improve compact display

* make background darker for metadata

* use auto layout

* fix auto layout

* improve display

* fix truncate logic

* fix compact

* improve flex adaptibility

* improve responsive layout

* improve extra compact header

* nit

* remove unused icons

* nit

* Improve flow result display

* nit

* merge progressbar and execution status

* handle canceled flow better
2026-02-03 17:20:35 +00:00

116 lines
3.3 KiB
Svelte

<script lang="ts">
import type { Schema } from '$lib/common'
import { copyToClipboard, emptySchema } from '$lib/utils'
import Highlight from 'svelte-highlight'
import json from 'svelte-highlight/languages/json'
import DataTable from './table/DataTable.svelte'
import Head from './table/Head.svelte'
import Cell from './table/Cell.svelte'
import Row from './table/Row.svelte'
import Tab from './common/tabs/Tab.svelte'
import TabContent from './common/tabs/TabContent.svelte'
import Tabs from './common/tabs/Tabs.svelte'
import { Badge } from './common'
import HighlightTheme from './HighlightTheme.svelte'
import Button from './common/button/Button.svelte'
import { ClipboardCopy } from 'lucide-svelte'
interface Props {
schema?: Schema | undefined | any
}
let { schema = emptySchema() }: Props = $props()
function getProperties(schema: Schema) {
if (schema.properties) {
return Object.entries(schema.properties)
}
return []
}
</script>
<HighlightTheme />
<div class="w-full">
<Tabs selected="arguments">
<Tab value="arguments" label="Inputs" />
<Tab value="json" label="JSON" />
{#snippet content()}
<div class="overflow-auto pt-2">
<TabContent value="arguments">
{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
<DataTable size="sm" containerClass="bg-surface-tertiary">
<Head>
<tr class="w-full">
<Cell head first>Name</Cell>
<Cell head>Type</Cell>
<Cell head>Description</Cell>
<Cell head>Default</Cell>
<Cell head>Format</Cell>
<Cell head last>Required</Cell>
</tr>
</Head>
<tbody class="divide-y w-full">
{#each getProperties(schema) as [name, property] (name)}
<Row>
<Cell first>
<span class="font-semibold">{name}</span>
</Cell>
<Cell>
<Badge color="blue">
{#if !property.type}
any
{:else}
{property.type}
{/if}
</Badge>
</Cell>
<Cell wrap>
{property.description ?? ''}
</Cell>
<Cell>
{property.default == '<function call>'
? '<function call>'
: property.default
? JSON.stringify(property.default)
: ''}
</Cell>
<Cell>
{property.format ?? ''}
{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}
</Cell>
<Cell last>
{#if schema.required.includes(name)}
<span class="text-red-600 font-bold text-lg">*</span>
{/if}
</Cell>
</Row>
{/each}
</tbody>
</DataTable>
{:else}
<div class="text-secondary text-xs italic m-1">No arguments</div>
{/if}
</TabContent>
<TabContent value="json">
<div class="h-full relative">
<Button
wrapperClasses="absolute top-2 right-2 z-20"
on:click={() => copyToClipboard(JSON.stringify(schema, null, 4))}
color="light"
size="xs2"
startIcon={{
icon: ClipboardCopy
}}
iconOnly
/>
<Highlight language={json} code={JSON.stringify(schema, null, 4)} />
</div>
</TabContent>
</div>
{/snippet}
</Tabs>
</div>