8166330fc5
* all * all * all * all * fix * remove vite config * remove uncessary app.css * all * all * all * all * all
155 lines
3.7 KiB
Svelte
155 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { ChevronRightSquare, ClipboardCopy, Download, Expand } from 'lucide-svelte'
|
|
import ArgInfo from './ArgInfo.svelte'
|
|
import { Button, Drawer, DrawerContent, Skeleton } from './common'
|
|
|
|
import { Highlight } from 'svelte-highlight'
|
|
import { copyToClipboard } from '$lib/utils'
|
|
import { json } from 'svelte-highlight/languages'
|
|
import DataTable from './table/DataTable.svelte'
|
|
import Cell from './table/Cell.svelte'
|
|
import Head from './table/Head.svelte'
|
|
import Row from './table/Row.svelte'
|
|
import HighlightTheme from './HighlightTheme.svelte'
|
|
|
|
export let args: any
|
|
export let argLabel: string | undefined = undefined
|
|
|
|
let jsonViewer: Drawer
|
|
let runLocally: Drawer
|
|
let jsonStr = ''
|
|
|
|
function pythonCode() {
|
|
return `
|
|
if __name__ == "__main__":
|
|
${Object.entries(args)
|
|
.map(([arg, value]) => {
|
|
return ` ${arg} = ${JSON.stringify(value)}`
|
|
})
|
|
.join('\n')}
|
|
|
|
main(${Object.keys(args)
|
|
.map((x) => `${x} = ${x}`)
|
|
.join(', ')})
|
|
`
|
|
}
|
|
|
|
function typescriptCode() {
|
|
return `
|
|
if (import.meta.main) {
|
|
${Object.entries(args)
|
|
.map(([arg, value]) => {
|
|
return ` let ${arg} = ${JSON.stringify(value)}`
|
|
})
|
|
.join('\n')}
|
|
|
|
await main(...)
|
|
}
|
|
`
|
|
}
|
|
</script>
|
|
|
|
<div class="relative">
|
|
<DataTable size="sm">
|
|
<Head>
|
|
<tr>
|
|
<Cell head first>{argLabel ?? 'Arg'}</Cell>
|
|
<Cell head last>Value</Cell>
|
|
</tr>
|
|
<svelte:fragment slot="headerAction">
|
|
<button
|
|
on:click={() => {
|
|
jsonStr = JSON.stringify(args, null, 4)
|
|
jsonViewer.openDrawer()
|
|
}}
|
|
>
|
|
<Expand size={18} />
|
|
</button>
|
|
</svelte:fragment>
|
|
</Head>
|
|
|
|
<tbody class="divide-y">
|
|
{#if args && Object.keys(args).length > 0}
|
|
{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
|
|
<Row>
|
|
<Cell first>{arg}</Cell>
|
|
<Cell last><ArgInfo {value} /></Cell>
|
|
</Row>
|
|
{/each}
|
|
{:else if args}
|
|
<Row><Cell>No arguments</Cell></Row>
|
|
{:else}
|
|
<Row>
|
|
<Cell first>
|
|
<Skeleton layout={[[1], 0.5, [1]]} />
|
|
</Cell>
|
|
<Cell last>
|
|
<Skeleton layout={[[1], 0.5, [1]]} />
|
|
</Cell>
|
|
</Row>
|
|
{/if}
|
|
</tbody>
|
|
</DataTable>
|
|
</div>
|
|
|
|
<HighlightTheme />
|
|
|
|
<Drawer bind:this={jsonViewer} size="900px">
|
|
<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
|
|
<svelte:fragment slot="actions">
|
|
<Button
|
|
download="windmill-args.json"
|
|
href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
|
|
startIcon={{ icon: Download }}
|
|
size="xs"
|
|
color="light"
|
|
>
|
|
Download
|
|
</Button>
|
|
<Button
|
|
on:click={runLocally.openDrawer}
|
|
color="light"
|
|
size="xs"
|
|
startIcon={{ icon: ChevronRightSquare }}
|
|
>
|
|
Use in a local script
|
|
</Button>
|
|
<Button
|
|
on:click={() => copyToClipboard(jsonStr)}
|
|
color="light"
|
|
size="xs"
|
|
startIcon={{ icon: ClipboardCopy }}
|
|
>
|
|
Copy to clipboard
|
|
</Button>
|
|
</svelte:fragment>
|
|
{#if jsonStr.length > 100000}
|
|
<div class="text-sm mb-2 text-tertiary">
|
|
<a
|
|
download="windmill-args.json"
|
|
href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
|
|
>
|
|
JSON is too large to be displayed in full.
|
|
</div>
|
|
{:else}
|
|
<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
|
|
{/if}
|
|
</DrawerContent>
|
|
</Drawer>
|
|
<Drawer bind:this={runLocally} size="900px">
|
|
<DrawerContent title="Run locally" on:close={runLocally.closeDrawer}>
|
|
<h3 class="mb-2">Envs</h3>
|
|
If using the wmill client in your code, set the following env variables:
|
|
<pre
|
|
><code
|
|
>BASE_URL="{window.location.origin}"
|
|
WM_TOKEN="{'<TOKEN>'}"</code
|
|
></pre
|
|
>
|
|
<h3 class="mt-8">TypeScript</h3>
|
|
<pre><code>{typescriptCode()}</code></pre>
|
|
<h3 class="mt-8">Python</h3>
|
|
<pre><code>{pythonCode()}</code></pre>
|
|
</DrawerContent>
|
|
</Drawer>
|