windmill-components 1.473.1 → 1.493.3

package/package/components/apps/editor/AppJobsDrawer.svelte

@@ -0,0 +1,285 @@
+<script lang="ts">import { Badge, Drawer, DrawerContent, Tab, Tabs } from '../../common';
+import Button from '../../common/button/Button.svelte';
+import DisplayResult from '../../DisplayResult.svelte';
+import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
+import FlowStatusViewer from '../../FlowStatusViewer.svelte';
+import JobArgs from '../../JobArgs.svelte';
+import LogViewer from '../../LogViewer.svelte';
+import { workspaceStore } from '../../../stores';
+import { BellOff, Loader2, RefreshCw } from 'lucide-svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { classNames, truncateRev, isFlowPreview } from '../../../utils';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
+import AppTimeline from './AppTimeline.svelte';
+import HighlightCode from '../../HighlightCode.svelte';
+import TestJobLoader from '../../TestJobLoader.svelte';
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+export let jobs;
+export let jobsById;
+export let hasErrors = false;
+export let selectedJobId = undefined;
+export let refreshComponents = undefined;
+export let errorByComponent = {};
+const dispatch = createEventDispatcher();
+let testJobLoader;
+let job = undefined;
+let testIsLoading = false;
+let rightColumnSelect = 'timeline';
+$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId);
+$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
+    job = undefined;
+}
+</script>
+
+<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
+
+<Drawer bind:open size="900px">
+	<DrawerContent
+		noPadding
+		title="Debug Runs"
+		on:close={() => {
+			open = false
+		}}
+		tooltip="Look at latests runs to spot potential bugs."
+		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
+	>
+		<Splitpanes class="!overflow-visible">
+			<Pane size={25}>
+				<PanelSection title="Past Runs">
+					<div class="flex flex-col gap-2 w-full">
+						{#if jobs.length > 0}
+							<div class="flex gap-2 flex-col-reverse">
+								{#each jobs ?? [] as id}
+									{@const selectedJob = jobsById[id]}
+									{#if selectedJob}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div
+											class={classNames(
+												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-secondary hover:text-blue-400',
+												selectedJob.error ? 'border border-red-500 text-primary' : '',
+												selectedJob.error && errorByComponent[selectedJob.component]?.id == id
+													? selectedJobId == id
+														? 'bg-red-600 !border-blue-600'
+														: 'bg-red-400'
+													: selectedJobId == id
+													? 'text-blue-600'
+													: ''
+											)}
+											on:click={() => {
+												selectedJobId = id
+												rightColumnSelect = 'detail'
+											}}
+										>
+											<span class="text-xs truncate">{truncateRev(selectedJob.job, 20)}</span>
+											<Badge color="indigo">{selectedJob.component}</Badge>
+										</div>
+									{/if}
+								{/each}
+							</div>
+						{:else}
+							<div class="text-sm text-tertiary">No items</div>
+						{/if}
+					</div>
+				</PanelSection>
+			</Pane>
+			<Pane size={75}>
+				<div class="w-full h-full flex flex-col">
+					<div>
+						<Tabs bind:selected={rightColumnSelect}>
+							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+						</Tabs>
+					</div>
+					{#if rightColumnSelect == 'timeline'}
+						<div class="p-2 grow overflow-auto">
+							<AppTimeline {jobs} {jobsById} />
+						</div>
+					{:else if rightColumnSelect == 'detail'}
+						<div class="grow flex flex-col w-full overflow-auto">
+							{#if selectedJobId}
+								{#if selectedJobId?.includes('Frontend')}
+									{@const jobResult = jobsById[selectedJobId]}
+									{#if jobResult?.error !== undefined}
+										<Splitpanes horizontal class="grow border w-full">
+											<Pane size={10} minSize={10}>
+												<LogViewer
+													content={`Logs are avaiable in the browser console directly`}
+													isLoading={false}
+													tag={undefined}
+												/>
+											</Pane>
+											<Pane size={90} minSize={10} class="text-sm text-secondary">
+												<div class="relative h-full px-2">
+													<DisplayResult
+														result={{
+															error: { name: 'Frontend execution error', message: jobResult.error }
+														}}
+													/>
+												</div>
+											</Pane>
+										</Splitpanes>
+									{:else if jobResult !== undefined}
+										<Splitpanes horizontal class="grow border w-full">
+											<Pane size={10} minSize={10}>
+												<LogViewer
+													content={`Logs are avaiable in the browser console directly`}
+													isLoading={false}
+													tag={undefined}
+												/>
+											</Pane>
+											<Pane size={90} minSize={10} class="text-sm text-secondary">
+												<div class="relative h-full px-2">
+													<DisplayResult
+														workspaceId={$workspaceStore}
+														jobId={selectedJobId}
+														result={jobResult.result}
+													/>
+												</div>
+											</Pane>
+										</Splitpanes>
+									{:else}
+										<Loader2 class="animate-spin" />
+									{/if}
+								{:else}
+									<div class="flex flex-col h-full w-full mb-4">
+										{#if job?.['running']}
+											<div class="flex flex-row-reverse w-full">
+												<Button
+													color="red"
+													variant="border"
+													on:click={() => testJobLoader?.cancelJob()}
+												>
+													<Loader2 size={14} class="animate-spin mr-2" />
+
+													Cancel
+												</Button>
+											</div>
+										{/if}
+										{#if job?.args}
+											<div class="p-2">
+												<JobArgs
+													id={job.id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={job?.args}
+												/>
+											</div>
+										{/if}
+										{#if job?.raw_code}
+											<div class="pb-2 pl-2 pr-2 w-full overflow-auto h-full max-h-[80px]">
+												<HighlightCode language={job?.language} code={job?.raw_code} />
+											</div>
+										{/if}
+
+										{#if job?.job_kind !== 'flow' && !isFlowPreview(job?.job_kind)}
+											{@const jobResult = jobsById[selectedJobId]}
+											<Splitpanes horizontal class="grow border w-full">
+												<Pane size={50} minSize={10}>
+													<LogViewer
+														duration={job?.['duration_ms']}
+														jobId={job?.id}
+														content={job?.logs}
+														isLoading={testIsLoading && job?.['running'] == false}
+														tag={job?.tag}
+													/>
+												</Pane>
+												<Pane size={50} minSize={10} class="text-sm text-secondary">
+													{#if job != undefined && 'result' in job && job.result != undefined}<div
+															class="relative h-full px-2"
+															><DisplayResult
+																workspaceId={$workspaceStore}
+																jobId={selectedJobId}
+																result={job.result}
+															/></div
+														>
+													{:else if testIsLoading}
+														<div class="p-2"><Loader2 class="animate-spin" /> </div>
+													{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+														<div class="p-2 text-tertiary">Result is undefined</div>
+													{:else}
+														<div class="p-2 text-tertiary">
+															<Loader2 size={14} class="animate-spin mr-2" />
+														</div>
+													{/if}
+												</Pane>
+												{#if jobResult?.transformer}
+													<Pane size={50} minSize={10} class="text-sm text-secondary p-2">
+														<div class="font-bold">Transformer results</div>
+														{#if job != undefined && 'result' in job && job.result != undefined}
+															<div class="relative h-full px-2">
+																<DisplayResult
+																	workspaceId={$workspaceStore}
+																	jobId={selectedJobId}
+																	result={jobResult?.transformer}
+																/>
+															</div>
+														{:else if testIsLoading}
+															<div class="p-2"><Loader2 class="animate-spin" /> </div>
+														{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+															<div class="p-2 text-tertiary">Result is undefined</div>
+														{:else}
+															<div class="p-2 text-tertiary">
+																<Loader2 size={14} class="animate-spin mr-2" />
+															</div>
+														{/if}
+													</Pane>
+												{/if}
+											</Splitpanes>
+										{:else}
+											<div class="mt-10"></div>
+											<FlowProgressBar {job} class="py-4" />
+											<div class="w-full mt-10 mb-20">
+												{#if job?.id}
+													<FlowStatusViewer
+														jobId={job?.id}
+														on:jobsLoaded={({ detail }) => {
+															job = detail
+														}}
+													/>
+												{:else}
+													<Loader2 class="animate-spin" />
+												{/if}
+											</div>
+										{/if}
+									</div>
+								{/if}
+							{:else}
+								<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</Pane>
+		</Splitpanes>
+		<svelte:fragment slot="actions">
+			{#if refreshComponents}
+				<Button
+					size="md"
+					color="light"
+					variant="border"
+					on:click={() => {
+						refreshComponents?.()
+					}}
+					title="Refresh App"
+				>
+					Refresh app&nbsp;<RefreshCw size={16} />
+				</Button>
+			{/if}
+			<Button
+				size="md"
+				color="light"
+				variant="border"
+				on:click={() => {
+					dispatch('clear')
+				}}
+				>Clear jobs
+			</Button>
+			{#if hasErrors}
+				<Button size="md" color="light" variant="border" on:click={() => dispatch('clearErrors')}>
+					>Clear Errors &nbsp;<BellOff size={14} />
+				</Button>
+			{/if}
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/package/components/apps/editor/AppJobsDrawer.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { JobById } from '../types';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AppJobsDrawer: $$__sveltets_2_IsomorphicComponent<{
+    open?: boolean;
+    jobs: string[];
+    jobsById: Record<string, JobById>;
+    hasErrors?: boolean;
+    selectedJobId?: string | undefined;
+    refreshComponents?: (() => void) | undefined;
+    errorByComponent?: Record<string, {
+        id?: string;
+        error: string;
+    }>;
+}, {
+    clear: CustomEvent<any>;
+    clearErrors: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AppJobsDrawer = InstanceType<typeof AppJobsDrawer>;
+export default AppJobsDrawer;

package/package/components/apps/editor/AppJsonEditor.svelte

@@ -1,4 +1,4 @@
-<script>import { Badge, Button } from '../../common';
+<script lang="ts">import { Badge, Button } from '../../common';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import JsonEditor from '../../JsonEditor.svelte';

package/package/components/apps/editor/AppJsonEditor.svelte.d.ts

@@ -1,23 +1,28 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        open?: ((path_l: string) => Promise<void>) | undefined;
-        saveApp?: (() => Promise<void>) | undefined;
-        saveDraft?: (() => Promise<void>) | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppJsonEditorProps = typeof __propDef.props;
-export type AppJsonEditorEvents = typeof __propDef.events;
-export type AppJsonEditorSlots = typeof __propDef.slots;
-export default class AppJsonEditor extends SvelteComponent<AppJsonEditorProps, AppJsonEditorEvents, AppJsonEditorSlots> {
-    get open(): (path_l: string) => Promise<void>;
-    get saveApp(): () => Promise<void>;
-    get saveDraft(): () => Promise<void>;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const AppJsonEditor: $$__sveltets_2_IsomorphicComponent<{
+    open?: (path_l: string) => Promise<void>;
+    saveApp?: () => Promise<void>;
+    saveDraft?: () => Promise<void>;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    open: (path_l: string) => Promise<void>;
+    saveApp: () => Promise<void>;
+    saveDraft: () => Promise<void>;
+}, string>;
+type AppJsonEditor = InstanceType<typeof AppJsonEditor>;
+export default AppJsonEditor;

package/package/components/apps/editor/AppPreview.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, onDestroy, setContext } from 'svelte';
+<script lang="ts">import { getContext, onDestroy, setContext } from 'svelte';
 import { get, writable } from 'svelte/store';
 import { buildWorld } from '../rx';
 import Button from '../../common/button/Button.svelte';
@@ -200,7 +200,6 @@ $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 </script>
 
 <svelte:head>
-	<link rel="stylesheet" href="/tailwind_full.css" />
 </svelte:head>
 
 <DarkModeObserver on:change={onThemeChange} />
@@ -208,8 +207,8 @@ $: maxRow = maxHeight($appStore.grid, appHeight, $breakpoint);
 <svelte:window on:hashchange={hashchange} on:resize={resizeWindow} />
 
 <div class="relative min-h-full grow" bind:clientHeight={appHeight}>
-	<div id="app-editor-top-level-drawer" />
-	<div id="app-editor-select" />
+	<div id="app-editor-top-level-drawer"></div>
+	<div id="app-editor-select"></div>
 
 	<div
 		class="{$$props.class} {lockedClasses} {width} h-full bg-surface {app.fullscreen

package/package/components/apps/editor/AppPreview.svelte.d.ts

@@ -1,32 +1,36 @@
-import { SvelteComponent } from "svelte";
 import { type Writable } from 'svelte/store';
 import type { App, EditorBreakpoint } from '../types';
 import type { Policy } from '../../../gen';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        app: App;
-        appPath?: string | undefined;
-        breakpoint?: Writable<EditorBreakpoint> | undefined;
-        policy?: Policy | undefined;
-        summary?: string | undefined;
-        workspace?: string | undefined;
-        isEditor?: boolean | undefined;
-        context: Record<string, any>;
-        noBackend?: boolean | undefined;
-        isLocked?: boolean | undefined;
-        hideRefreshBar?: boolean | undefined;
-        replaceStateFn?: ((path: string) => void) | undefined;
-        gotoFn?: ((path: string, opt?: Record<string, any> | undefined) => void) | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppPreviewProps = typeof __propDef.props;
-export type AppPreviewEvents = typeof __propDef.events;
-export type AppPreviewSlots = typeof __propDef.slots;
-export default class AppPreview extends SvelteComponent<AppPreviewProps, AppPreviewEvents, AppPreviewSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const AppPreview: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    app: App;
+    appPath?: string | undefined;
+    breakpoint?: Writable<EditorBreakpoint> | undefined;
+    policy?: Policy | undefined;
+    summary?: string | undefined;
+    workspace?: string | undefined;
+    isEditor?: boolean | undefined;
+    context: Record<string, any>;
+    noBackend?: boolean | undefined;
+    isLocked?: boolean | undefined;
+    hideRefreshBar?: boolean | undefined;
+    replaceStateFn?: ((path: string) => void) | undefined;
+    gotoFn?: ((path: string, opt?: Record<string, any> | undefined) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AppPreview = InstanceType<typeof AppPreview>;
+export default AppPreview;

package/package/components/apps/editor/AppReportsDrawer.svelte

@@ -1,4 +1,4 @@
-<script>import { Drawer } from '../../common';
+<script lang="ts">import { Drawer } from '../../common';
 import AppReportsDrawerInner from './AppReportsDrawerInner.svelte';
 export let appPath;
 export let open = false;

package/package/components/apps/editor/AppReportsDrawer.svelte.d.ts

@@ -1,17 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        appPath: string;
-        open?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppReportsDrawerProps = typeof __propDef.props;
-export type AppReportsDrawerEvents = typeof __propDef.events;
-export type AppReportsDrawerSlots = typeof __propDef.slots;
-export default class AppReportsDrawer extends SvelteComponent<AppReportsDrawerProps, AppReportsDrawerEvents, AppReportsDrawerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const AppReportsDrawer: $$__sveltets_2_IsomorphicComponent<{
+    appPath: string;
+    open?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AppReportsDrawer = InstanceType<typeof AppReportsDrawer>;
+export default AppReportsDrawer;