windmill-components 1.623.1 → 1.642.0

package/package/components/JobOtelTraces.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">import { workspaceStore } from '../stores';
+import { Alert, Skeleton } from './common';
+import { Activity } from 'lucide-svelte';
+import { JobService } from '../gen';
+import { msToReadableTime } from '../utils';
+// OTEL SpanKind enum values from opentelemetry-proto/opentelemetry/proto/trace/v1/trace.proto
+const SpanKind = {
+    UNSPECIFIED: 0,
+    INTERNAL: 1,
+    SERVER: 2,
+    CLIENT: 3,
+    PRODUCER: 4,
+    CONSUMER: 5
+};
+// OTEL StatusCode enum values from opentelemetry-proto/opentelemetry/proto/trace/v1/trace.proto
+const StatusCode = {
+    UNSET: 0,
+    OK: 1,
+    ERROR: 2
+};
+let { jobId } = $props();
+let traces = $state([]);
+let loading = $state(true);
+let error = $state(null);
+let expandedSpans = $state(new Set());
+$effect(() => {
+    if (jobId) {
+        loadTraces();
+    }
+});
+async function loadTraces() {
+    if (!$workspaceStore || !jobId)
+        return;
+    loading = true;
+    error = null;
+    try {
+        const response = await JobService.getJobOtelTraces({
+            workspace: $workspaceStore,
+            id: jobId
+        });
+        traces = response;
+    }
+    catch (e) {
+        if (e?.status === 404) {
+            traces = [];
+        }
+        else {
+            error = `Error loading traces: ${e?.message ?? e}`;
+        }
+    }
+    finally {
+        loading = false;
+    }
+}
+function getDurationMs(span) {
+    return (span.end_time_unix_nano - span.start_time_unix_nano) / 1_000_000;
+}
+function formatTimestamp(ns) {
+    const date = new Date(ns / 1000000);
+    return date.toISOString();
+}
+function getStatusColor(statusCode) {
+    switch (statusCode) {
+        case StatusCode.UNSET:
+            return 'text-secondary';
+        case StatusCode.OK:
+            return 'text-green-600';
+        case StatusCode.ERROR:
+            return 'text-red-600';
+        default:
+            return 'text-secondary';
+    }
+}
+function getStatusLabel(statusCode) {
+    switch (statusCode) {
+        case StatusCode.UNSET:
+            return 'Unset';
+        case StatusCode.OK:
+            return 'OK';
+        case StatusCode.ERROR:
+            return 'Error';
+        default:
+            return 'Unknown';
+    }
+}
+function toggleSpan(spanId) {
+    const newSet = new Set(expandedSpans);
+    if (newSet.has(spanId)) {
+        newSet.delete(spanId);
+    }
+    else {
+        newSet.add(spanId);
+    }
+    expandedSpans = newSet;
+}
+function getKindLabel(kind) {
+    switch (kind) {
+        case SpanKind.INTERNAL: return 'Internal';
+        case SpanKind.SERVER: return 'Server';
+        case SpanKind.CLIENT: return 'Client';
+        case SpanKind.PRODUCER: return 'Producer';
+        case SpanKind.CONSUMER: return 'Consumer';
+        default: return 'Unknown';
+    }
+}
+// Parse OTEL proto AnyValue to a simple value
+function parseAnyValue(anyValue) {
+    if (!anyValue)
+        return null;
+    if (anyValue.stringValue !== undefined)
+        return anyValue.stringValue;
+    if (anyValue.intValue !== undefined)
+        return anyValue.intValue;
+    if (anyValue.boolValue !== undefined)
+        return anyValue.boolValue;
+    if (anyValue.doubleValue !== undefined)
+        return anyValue.doubleValue;
+    if (anyValue.arrayValue?.values) {
+        return anyValue.arrayValue.values.map(parseAnyValue);
+    }
+    if (anyValue.kvlistValue?.values) {
+        return parseAttributes(anyValue.kvlistValue.values);
+    }
+    return JSON.stringify(anyValue);
+}
+// Parse OTEL proto attributes array to a simple key-value object
+function parseAttributes(attributes) {
+    if (!attributes)
+        return {};
+    if (!Array.isArray(attributes))
+        return attributes; // already parsed
+    const result = {};
+    for (const attr of attributes) {
+        if (attr.key && attr.value !== undefined) {
+            result[attr.key] = parseAnyValue(attr.value);
+        }
+    }
+    return result;
+}
+// Calculate timeline metrics
+function getTimelineMetrics(spans) {
+    if (spans.length === 0)
+        return { minTime: 0, maxTime: 0, totalDuration: 0 };
+    const minTime = Math.min(...spans.map((s) => s.start_time_unix_nano));
+    const maxTime = Math.max(...spans.map((s) => s.end_time_unix_nano));
+    return { minTime, maxTime, totalDuration: maxTime - minTime };
+}
+let timelineMetrics = $derived(getTimelineMetrics(traces));
+</script>
+
+<div class="p-4">
+	{#if loading}
+		<Skeleton layout={[[4], [8], [6], [10]]} />
+	{:else if error}
+		<Alert type="error" title="Error">{error}</Alert>
+	{:else if traces.length === 0}
+		<div class="flex flex-col items-center justify-center py-8 text-secondary">
+			<Activity size={48} class="mb-4 opacity-50" />
+			<p class="text-lg font-medium">No HTTP requests captured</p>
+			<p class="text-sm mt-2">
+				This job did not make any HTTP/HTTPS requests, or HTTP Request Tracing is not enabled in instance settings.
+			</p>
+		</div>
+	{:else}
+		<div class="space-y-4">
+			<div class="flex items-center justify-between">
+				<h3 class="text-lg font-semibold">Traces ({traces.length} spans)</h3>
+				<button
+					class="text-sm text-blue-600 hover:underline"
+					onclick={loadTraces}
+				>
+					Refresh
+				</button>
+			</div>
+
+			<!-- Timeline view -->
+			<div class="border rounded-lg overflow-hidden">
+				<div class="bg-surface-secondary px-4 py-2 border-b">
+					<div class="grid grid-cols-12 gap-2 text-xs font-medium text-secondary">
+						<div class="col-span-4">Operation</div>
+						<div class="col-span-1">Status</div>
+						<div class="col-span-5">Timeline</div>
+						<div class="col-span-2 text-right">Duration</div>
+					</div>
+				</div>
+
+				<div class="divide-y">
+					{#each traces as span (span.span_id)}
+						{@const durationNs = span.end_time_unix_nano - span.start_time_unix_nano}
+						{@const startOffset =
+							((span.start_time_unix_nano - timelineMetrics.minTime) /
+								timelineMetrics.totalDuration) *
+							100}
+						{@const width = (durationNs / timelineMetrics.totalDuration) * 100}
+						{@const statusCode = span.status?.code ?? 0}
+
+						<div class="hover:bg-surface-hover">
+							<button
+								class="w-full px-4 py-2 text-left"
+								onclick={() => toggleSpan(span.span_id)}
+							>
+								<div class="grid grid-cols-12 gap-2 items-center">
+									<div class="col-span-4 flex items-center gap-2">
+										<span class="text-xs text-secondary">
+											{expandedSpans.has(span.span_id) ? '▼' : '▶'}
+										</span>
+										<span class="font-medium truncate" title={span.name}>
+											{span.name}
+										</span>
+									</div>
+									<div class="col-span-1">
+										<span class={`text-xs font-medium ${getStatusColor(statusCode)}`}>
+											{getStatusLabel(statusCode)}
+										</span>
+									</div>
+									<div class="col-span-5 relative h-4">
+										<div class="absolute inset-0 bg-surface-secondary rounded"></div>
+										<div
+											class="absolute h-full bg-blue-500 rounded opacity-75"
+											style="left: {startOffset}%; width: {Math.max(width, 0.5)}%;"
+										></div>
+									</div>
+									<div class="col-span-2 text-right text-sm font-mono">
+										{msToReadableTime(getDurationMs(span))}
+									</div>
+								</div>
+							</button>
+
+							{#if expandedSpans.has(span.span_id)}
+								{@const parsedAttrs = parseAttributes(span.attributes)}
+								<div class="px-4 pb-4 bg-surface-secondary/50">
+									<div class="grid grid-cols-2 gap-4 text-sm">
+										<div>
+											<p class="text-xs text-secondary mb-1">Trace ID</p>
+											<p class="font-mono text-xs break-all">{span.trace_id}</p>
+										</div>
+										<div>
+											<p class="text-xs text-secondary mb-1">Span ID</p>
+											<p class="font-mono text-xs">{span.span_id}</p>
+										</div>
+										{#if span.parent_span_id}
+											<div>
+												<p class="text-xs text-secondary mb-1">Parent Span ID</p>
+												<p class="font-mono text-xs">{span.parent_span_id}</p>
+											</div>
+										{/if}
+										<div>
+											<p class="text-xs text-secondary mb-1">Kind</p>
+											<p class="font-mono text-xs">{getKindLabel(span.kind)}</p>
+										</div>
+										<div>
+											<p class="text-xs text-secondary mb-1">Start Time</p>
+											<p class="font-mono text-xs">{formatTimestamp(span.start_time_unix_nano)}</p>
+										</div>
+										<div>
+											<p class="text-xs text-secondary mb-1">End Time</p>
+											<p class="font-mono text-xs">{formatTimestamp(span.end_time_unix_nano)}</p>
+										</div>
+										{#if span.status?.message}
+											<div class="col-span-2">
+												<p class="text-xs text-secondary mb-1">Status Message</p>
+												<p class="text-xs">{span.status.message}</p>
+											</div>
+										{/if}
+										{#if Object.keys(parsedAttrs).length > 0}
+											<div class="col-span-2">
+												<p class="text-xs text-secondary mb-1">Attributes</p>
+												<div class="bg-surface-secondary p-2 rounded text-xs space-y-1">
+													{#each Object.entries(parsedAttrs) as [key, value]}
+														<div class="flex gap-2">
+															<span class="text-secondary font-medium shrink-0">{key}:</span>
+															<span class="font-mono break-all">{typeof value === 'object' ? JSON.stringify(value) : value}</span>
+														</div>
+													{/each}
+												</div>
+											</div>
+										{/if}
+									</div>
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/package/components/JobOtelTraces.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    jobId: string;
+}
+declare const JobOtelTraces: import("svelte").Component<Props, {}, "">;
+type JobOtelTraces = ReturnType<typeof JobOtelTraces>;
+export default JobOtelTraces;

package/package/components/JobStatus.svelte

@@ -1,37 +1,40 @@
-<script lang="ts">import { displayDate } from '../utils';
+<script lang="ts">import { displayDate, msToReadableTime } from '../utils';
 import Badge from './common/badge/Badge.svelte';
 import { forLater } from '../forLater';
-import DurationMs from './DurationMs.svelte';
-import { Calendar, CheckCircle2, Circle, Clock, Hourglass, Play, XCircle } from 'lucide-svelte';
+import { Circle } from 'lucide-svelte';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import QueuePosition from './QueuePosition.svelte';
+import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte';
 const SMALL_ICON_SIZE = 12;
-let { job } = $props();
+let { job, large = false } = $props();
 </script>
 
 {#if job && 'success' in job && job.success}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
-			Success {job.is_skipped ? '(Skipped)' : ''}
-		</Badge>
-		<DurationMs
-			duration_ms={job.duration_ms}
-			self_wait_time_ms={job?.self_wait_time_ms}
-			aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-		/>
-	</div>
+	<Badge {large} color="green">
+		Successfully ran in {msToReadableTime(job.duration_ms)}
+		{job.is_skipped ? '(Skipped)' : ''}
+		{#if job.self_wait_time_ms || job.aggregate_wait_time_ms}
+			<WaitTimeWarning
+				self_wait_time_ms={job.self_wait_time_ms}
+				aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+				variant="alert"
+			/>
+		{/if}
+	</Badge>
 {:else if job && 'success' in job}
-	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
-		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
-		<DurationMs
-			duration_ms={job.duration_ms}
-			self_wait_time_ms={job?.self_wait_time_ms}
-			aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
-		/>
-	</div>
+	<Badge {large} color="red">
+		Failed after {msToReadableTime(job.duration_ms)}
+		{#if job.self_wait_time_ms || job.aggregate_wait_time_ms}
+			<WaitTimeWarning
+				self_wait_time_ms={job.self_wait_time_ms}
+				aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+				variant="alert"
+			/>
+		{/if}
+	</Badge>
 {:else if job && 'running' in job && job.running && job.suspend}
 	<div>
-		<Badge large color="violet" icon={{ icon: Hourglass, position: 'left' }}>
+		<Badge {large} color="violet">
 			Suspended
 			{#if job.flow_status}
 				({(job.flow_status?.step ?? 0) + 1} of {job.raw_flow?.modules?.length ?? '?'})
@@ -40,7 +43,7 @@ let { job } = $props();
 	</div>
 {:else if job && 'running' in job && job.running}
 	<div>
-		<Badge large color="yellow" icon={{ icon: Play, position: 'left' }}>
+		<Badge {large} color="yellow">
 			Running
 			{#if job.flow_status}
 				({(job.flow_status?.step ?? 0) + 1} of {job.raw_flow?.modules?.length ?? '?'})
@@ -49,13 +52,13 @@ let { job } = $props();
 	</div>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
 	<div>
-		<Badge color="blue" icon={{ icon: Calendar, position: 'left' }}>
+		<Badge color="blue" {large}>
 			Scheduled for {displayDate(job.scheduled_for)}
 		</Badge>
 	</div>
 {:else if job && 'running' in job}
 	<div class="flex flex-row gap-1 items-center">
-		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
+		<Badge color="orange" {large}>Queued</Badge>
 		<NoWorkerWithTagWarning tag={job.tag} />
 		<QueuePosition jobId={job.id} workspaceId={job.workspace_id} minimal />
 	</div>

package/package/components/JobStatus.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { CompletedJob, QueuedJob } from '../gen';
 interface Props {
     job: QueuedJob | CompletedJob | undefined;
+    large?: boolean;
 }
 declare const JobStatus: import("svelte").Component<Props, {}, "">;
 type JobStatus = ReturnType<typeof JobStatus>;

package/package/components/JsonInputs.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">import SimpleEditor from './SimpleEditor.svelte';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
-export let updateOnBlur = true;
-export let placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}';
-export let selected = false;
-let pendingJson = '';
-let simpleEditor = undefined;
-let focusTrap;
+let { updateOnBlur = true, placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}', selected = false } = $props();
+let pendingJson = $state('');
+let simpleEditor = $state(undefined);
+let focusTrap = $state();
 function updatePayloadFromJson(jsonInput) {
     if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
         dispatch('select', undefined);
@@ -36,12 +34,12 @@ function handleKeydown(event) {
 }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <!-- Add a hidden button that can receive focus -->
 <button bind:this={focusTrap} class="sr-only" tabindex="-1" aria-hidden="true">Focus trap</button>
 
-<div class="h-full py-3 rounded-md border">
+<div class="h-full rounded-md border">
 	<SimpleEditor
 		bind:this={simpleEditor}
 		on:focus={() => {

package/package/components/JsonInputs.svelte.d.ts

@@ -1,3 +1,8 @@
+interface Props {
+    updateOnBlur?: boolean;
+    placeholder?: string;
+    selected?: boolean;
+}
 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;
@@ -11,13 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const JsonInputs: $$__sveltets_2_IsomorphicComponent<{
-    updateOnBlur?: boolean;
-    placeholder?: string;
-    selected?: boolean;
-    setCode?: (code: string) => void;
-    resetSelected?: (dispatchEvent?: boolean) => void;
-}, {
+declare const JsonInputs: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     select: CustomEvent<any>;
@@ -26,6 +25,6 @@ declare const JsonInputs: $$__sveltets_2_IsomorphicComponent<{
 }, {}, {
     setCode: (code: string) => void;
     resetSelected: (dispatchEvent?: boolean) => void;
-}, string>;
+}, "">;
 type JsonInputs = InstanceType<typeof JsonInputs>;
 export default JsonInputs;

package/package/components/KanidmSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 const AUTH_URL_SUFFIX = '/ui/oauth2';
 $: enabled = value != undefined;
@@ -48,7 +49,7 @@ function changeValues({ baseUrl, id }) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Kanidm Url</span>
 				<span class="text-secondary font-normal text-xs">{'KANIDM_URL/ui/oauth2'}</span>
@@ -75,6 +76,6 @@ function changeValues({ baseUrl, id }) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/KeycloakSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 $: enabled = value != undefined;
 let org = '';
@@ -40,7 +41,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Realm Url </span>
 				<span class="text-secondary font-normal text-xs"
@@ -69,6 +70,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>