runs chart tooltip improvement

frontend/src/lib/components/RunChart.svelte

@@ -45,15 +45,24 @@
 				backgroundColor: '#f87171',
 				label: 'Failed',
 				data:
-					failed?.map((job) => ({ x: job.created_at as any, y: job.duration_ms, id: job.id })) ?? []
+					failed?.map((job) => ({
+						x: job.created_at as any,
+						y: job.duration_ms,
+						id: job.id,
+						path: job.script_path
+					})) ?? []
 			},
 			{
 				// borderColor: 'rgba(99,0,125, .2)',
 				backgroundColor: '#4ade80',
 				label: 'Successful',
 				data:
-					success?.map((job) => ({ x: job.created_at as any, y: job.duration_ms, id: job.id })) ??
-					[]
+					success?.map((job) => ({
+						x: job.created_at as any,
+						y: job.duration_ms,
+						id: job.id,
+						path: job.script_path
+					})) ?? []
 			}
 		]
 	}
@@ -76,6 +85,10 @@
 			}
 		}
 	}
+
+	function getPath(x: any): string {
+		return x.path
+	}
 </script>
 
 <Scatter
@@ -91,15 +104,7 @@
 			tooltip: {
 				callbacks: {
 					label: function (context) {
-						let label = context.dataset.label || 'X'
-
-						if (label) {
-							label += ': '
-						}
-						if (context.parsed.y !== null) {
-							label += JSON.stringify(context.parsed)
-						}
-						return label
+						return getPath(context.raw)
 					}
 				}
 			}

frontend/src/lib/components/flows/content/CapturePayload.svelte

@@ -14,7 +14,7 @@
 	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
 	import { getContext } from 'svelte'
 	import type { FlowEditorContext } from '../types'
-	import { copyToClipboard } from '$lib/utils'
+	import { copyToClipboard, sendUserToast } from '$lib/utils'
 	import Icon from 'svelte-awesome'
 	import { faClipboard } from '@fortawesome/free-solid-svg-icons'
 
@@ -97,6 +97,7 @@
 				on:click={() => {
 					$previewArgs = captureInput
 					$flowStore.schema = jsonSchema
+					sendUserToast('Copied as flow inputs and test args')
 				}}>Copy as flow inputs and test args</Button
 			>
 			<Button
@@ -104,6 +105,7 @@
 				variant="border"
 				on:click={() => {
 					$previewArgs = captureInput
+					sendUserToast('Copied as test args')
 				}}>Copy only as test args</Button
 			>
 		</div>

frontend/src/lib/components/flows/flowStore.ts

@@ -1,4 +1,5 @@
 import type { Flow, FlowModule, ForloopFlow, InputTransform } from '$lib/gen'
+import { sendUserToast } from '$lib/utils'
 import { get, writable, derived } from 'svelte/store'
 import { flowStateStore, initFlowState, type FlowState } from './flowState'
 import { numberToChars } from './utils'
@@ -124,4 +125,5 @@ export async function copyFirstStepSchema() {
 		}
 		return flow
 	})
+	sendUserToast('Copied first step schema as flow input schema')
 }

frontend/src/routes/flows/get/[...path].svelte

@@ -43,6 +43,7 @@
 	import UserSettings from '$lib/components/UserSettings.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
 	import CronInput from '$lib/components/CronInput.svelte'
+	import Icon from 'svelte-awesome'
 
 	let userSettings: UserSettings
 
@@ -194,7 +195,6 @@
 				<h2 class="font-bold pb-4">{flow.path}</h2>
 			{/if}
 		{/if}
-
 		<ShareModal bind:this={shareModal} kind="flow" path={flow?.path ?? ''} />
 
 		<div class="grid grid-cols-1 gap-6 max-w-7xl pb-6">
@@ -204,7 +204,10 @@
 			/>
 			{#if flow}
 				<p class="text-sm text-gray-600"
-					>Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}</p
+					>Edited {displayDaysAgo(flow.edited_at ?? '')} by {flow.edited_by}
+					<a href="#webhook" class="ml-2">
+						<Badge color="dark-blue">Webhook</Badge>
+					</a></p
 				>
 
 				{#if flow.archived}
@@ -213,13 +216,13 @@
 						<p>This version was archived</p>
 					</div>
 				{/if}
-				<div class="prose text-sm box max-w-6xl w-full">
+				<div class="prose text-sm box max-w-6xl w-full mt-4">
 					<SvelteMarkdown source={defaultIfEmptyString(flow?.description, 'No description')} />
 				</div>
-				<div>
+				<div class="mt-4">
 					<FlowViewer {flow} noSummary={true} />
 
-					<h2 class="my-4 text-gray-700 pb-1 mb-3 border-b"
+					<h2 id="webhook" class="mb-4 mt-10 text-gray-700 pb-1 mb-3 border-b"
 						>Webhook<Tooltip
 							>To trigger this script with a webhook, do a POST request to the endpoint below. Flows
 							are not public and can only be run by users with at least view rights on them. You
@@ -232,25 +235,24 @@
 					<div class="box max-w-2xl">
 						<div class="flex flex-row gap-x-2 w-full">
 							<a
+								on:click={(e) => {
+									e.preventDefault()
+									copyToClipboard(url)
+								}}
 								href={$page.url.protocol + '//' + url}
 								class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 							>
 								{url}
+								<span class="text-gray-700 ml-2">
+									<Icon data={faClipboard} />
+								</span>
 							</a>
-							<Button
-								on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
-								color="blue"
-								size="xs"
-								startIcon={{ icon: faClipboard }}
-								btnClasses="ml-2"
-							>
-								Copy
-							</Button>
+
 							<Button size="xs" on:click={userSettings.openDrawer}>Create token</Button>
 						</div>
 					</div>
 					{#if schedule}
-						<div class="mt-8">
+						<div class="mt-10">
 							<h2 class="text-gray-700 pb-1 mb-3 border-b inline-flex flex-row items-center gap-x-4"
 								><div>Primary Schedule </div>
 								<Badge color="gray">{schedule.schedule}</Badge>

frontend/src/routes/run/[...run].svelte

@@ -264,19 +264,6 @@
 		<div class="flex flex-col mr-2 sm:mr-0 sm:grid sm:grid-cols-3 sm:gap-5">
 			<div class="col-span-2">
 				<JobArgs args={job?.args} />
-
-				{#if job?.job_kind == 'flow' || job?.job_kind == 'flowpreview'}
-					<div class="mt-10" />
-					<FlowProgressBar {job} class="py-4" />
-					<div class="max-w-lg">
-						<FlowStatusViewer
-							jobId={job.id}
-							on:jobsLoaded={({ detail }) => {
-								job = detail
-							}}
-						/>
-					</div>
-				{/if}
 			</div>
 			<div>
 				<Skeleton loading={!job} layout={[[9.5]]} />
@@ -320,6 +307,17 @@
 					</div>
 				{/if}
 			</div>
+		{:else}
+			<div class="mt-10" />
+			<FlowProgressBar {job} class="py-4" />
+			<div class="w-full mt-10 mb-20">
+				<FlowStatusViewer
+					jobId={job.id}
+					on:jobsLoaded={({ detail }) => {
+						job = detail
+					}}
+				/>
+			</div>
 		{/if}
 	</CenteredPage>
 {/if}

frontend/src/routes/scripts/get/[...hash].svelte

@@ -45,6 +45,7 @@
 	import { Badge, Tabs, Tab, TabContent, Button, ActionRow } from '$lib/components/common'
 	import Skeleton from '../../../lib/components/common/skeleton/Skeleton.svelte'
 	import UserSettings from '$lib/components/UserSettings.svelte'
+	import Icon from 'svelte-awesome'
 
 	let userSettings: UserSettings
 	let script: Script | undefined
@@ -257,6 +258,9 @@
 							<Badge color="dark-gray">
 								{truncateHash(script?.hash ?? '')}
 							</Badge>
+							<a href="#webhooks">
+								<Badge color="dark-blue">Webhooks</Badge>
+							</a>
 							{#if script?.is_template}
 								<Badge color="blue">Template</Badge>
 							{/if}
@@ -286,7 +290,7 @@
 			<Skeleton {loading} layout={[[3], 1]} />
 
 			{#if script}
-				<div class="flex flex-col lg:flex-row gap-4">
+				<div class="flex flex-col lg:flex-row gap-4 mt-4">
 					<div class="lg:w-1/2">
 						<h3 class="text-lg mb-1 font-bold text-gray-600">Description</h3>
 
@@ -359,7 +363,7 @@
 				{/if}
 			{/if}
 
-			<div class="">
+			<div class="mt-4">
 				<h2 class="text-lg mb-1 font-bold text-gray-600">
 					Arguments JSON schema
 					<Tooltip>
@@ -377,7 +381,7 @@
 				{/if}
 			</div>
 			<div>
-				<h2 class="text-lg mb-1 font-bold text-gray-600 border-b">Code</h2>
+				<h2 class="text-lg mb-1 mt-4 font-bold text-gray-600 border-b">Code</h2>
 				<Skeleton {loading} layout={[[20]]} />
 				{#if script}
 					<HighlightCode language={script.language} code={script.content} />
@@ -385,7 +389,7 @@
 			</div>
 		</div>
 
-		<h3 class="text-lg mb-1 mt-8 font-bold text-gray-600"
+		<h3 id="webhooks" class="text-lg mb-1 mt-8 font-bold text-gray-600"
 			>Webhooks<Tooltip
 				>To trigger this script with a webhook, do a POST request to the endpoints below. Scripts
 				are not public and can only be run by users with at least view rights on them. You will need
@@ -409,25 +413,21 @@
 										{@const url = webhooks[key][type]}
 										<li class="flex justify-between items-center mt-2">
 											<a
+												on:click={(e) => {
+													e.preventDefault()
+													copyToClipboard(url)
+												}}
 												href={$page.url.protocol + '//' + url}
 												class="whitespace-nowrap text-ellipsis overflow-hidden mr-1"
 											>
 												{url}
+												<span class="text-gray-700 ml-2">
+													<Icon data={faClipboard} />
+												</span>
 											</a>
-											<div class="flex">
-												<Badge color="dark-gray" capitalize>
-													{type}
-												</Badge>
-												<Button
-													on:click={() => copyToClipboard($page.url.protocol + '//' + url)}
-													color="blue"
-													size="xs"
-													startIcon={{ icon: faClipboard }}
-													btnClasses="ml-2"
-												>
-													Copy
-												</Button>
-											</div>
+											<Badge color="dark-gray" capitalize>
+												{type}
+											</Badge>
 										</li>
 									{/each}
 								</ul>