Skip to content

[web-console] Improve Samply profile download UX #5853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Karakatiza666 merged 1 commit into from
Mar 18, 2026
Merged

[web-console] Improve Samply profile download UX #5853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions js-packages/web-console/src/lib/components/dialogs/DownloadProgressDisplay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte'
import { humanSize } from '$lib/functions/common/string'

const {
progress,
label
}: {
progress: { percent: number | null; bytes: { downloaded: number; total: number } }
Copy link
Copy Markdown
Contributor

@mihaibudiu mihaibudiu Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is total always known?

Copy link
Copy Markdown
Contributor

@mihaibudiu mihaibudiu Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess "0" means "unknown"

Copy link
Copy Markdown
Contributor Author

@Karakatiza666 Karakatiza666 Mar 18, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not always. When the download response body is HTTP-compressed the total is not known, so I just show the number of downloaded bytes

label: string
} = $props()
</script>

<div class="flex flex-col items-center gap-3 py-4">
Copy link
Copy Markdown
Contributor

@mihaibudiu mihaibudiu Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No "cancel" button?
It would be nice to be able to stop it if it takes too long

Copy link
Copy Markdown
Contributor Author

@Karakatiza666 Karakatiza666 Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cancel button is wired up in usage sites, this component focuses just on displaying the progress

<Progress class="h-1" value={progress.percent} max={100}>
<Progress.Track>
<Progress.Range class="bg-primary-500" />
</Progress.Track>
</Progress>
<div class="flex w-full justify-between gap-2">
<span>{label}</span>
{#if progress.bytes.downloaded > 0}
<span>
{humanSize(progress.bytes.downloaded)}{progress.bytes.total > 0
? ` / ${humanSize(progress.bytes.total)}`
: ''}
</span>
{/if}
</div>
</div>
Copy link
Copy Markdown

@mythical-fred mythical-fred Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New shared component with no tests. This is a behavior change — please add Vitest + @testing-library/svelte tests for DownloadProgressDisplay. At minimum: renders progress during download, shows an error state, handles completion. The MetricsTables.svelte.spec.ts file next door is a good model.

18 changes: 3 additions & 15 deletions js-packages/web-console/src/lib/components/pipelines/editor/DownloadSupportBundle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<script lang="ts">
import { Progress, Switch } from '@skeletonlabs/skeleton-svelte'
import Tooltip from '$lib/components/common/Tooltip.svelte'
import GenericDialog from '$lib/components/dialogs/GenericDialog.svelte'
import DownloadProgressDisplay from '$lib/components/dialogs/DownloadProgressDisplay.svelte'
import { useGlobalDialog } from '$lib/compositions/layout/useGlobalDialog.svelte'
import { useDownloadProgress } from '$lib/compositions/useDownloadProgress.svelte'
import { usePipelineManager } from '$lib/compositions/usePipelineManager.svelte'
import { humanSize } from '$lib/functions/common/string'
import type { SupportBundleOptions } from '$lib/services/pipelineManager'

const { pipelineName }: { pipelineName: string } = $props()
Expand All @@ -26,6 +25,7 @@
result.cancel()
isDownloading = false
}
globalDialog.onclose = () => cancelDownload?.()

await result.dataPromise
}
Expand Down Expand Up @@ -118,19 +118,7 @@
{/snippet}
<div class="-mt-2 pb-2 font-semibold">{pipelineName}</div>
{#if isDownloading}
<div class="flex flex-col items-center gap-3 py-4">
<Progress class="h-1" value={progress.percent} max={100}>
<Progress.Track>
<Progress.Range class="bg-primary-500" />
</Progress.Track>
</Progress>
<div class="flex w-full justify-between gap-2">
<span>Downloading support bundle...</span>
{#if progress.percent}
<span>{humanSize(progress.bytes.downloaded)} / {humanSize(progress.bytes.total)}</span>
{/if}
</div>
</div>
<DownloadProgressDisplay {progress} label="Downloading support bundle..." />
{:else}
Select the details you want to include in the bundle
{@render supportBundleForm()}
Expand Down
52 changes: 21 additions & 31 deletions js-packages/web-console/src/lib/components/pipelines/editor/TabSamplyProfile.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
import { useGlobalDialog } from '$lib/compositions/layout/useGlobalDialog.svelte'
import { useDownloadProgress } from '$lib/compositions/useDownloadProgress.svelte'
import { useToast } from '$lib/compositions/useToastNotification'
import { humanSize } from '$lib/functions/common/string'
import { triggerFileDownload } from '$lib/services/browser'
import DownloadProgressDisplay from '$lib/components/dialogs/DownloadProgressDisplay.svelte'

let { pipeline }: { pipeline: { current: ExtendedPipeline } } = $props()

Expand Down Expand Up @@ -147,22 +147,28 @@

// Download profile handler
const handleDownloadProfile = async (latest: boolean) => {
try {
isDownloading = true
downloadProgress.reset()
downloadCancelFn = null
isDownloading = true
downloadProgress.reset()
downloadCancelFn = null

// Show dialog immediately so the indeterminate animation plays while the request is pending
globalDialog.dialog = downloadDialog
globalDialog.onclose = () => {
downloadCancelFn?.()
isDownloading = false
}

try {
const result = await api.getSamplyProfile(
pipeline.current.name,
latest,
downloadProgress.onProgress
)
if ('expectedInSeconds' in result) {
// Profile is still being collected, update countdown with the server's expected time
// Profile is still being collected, close the dialog and update countdown
globalDialog.dialog = null
const now = Date.now()
expectedCompletion = now + result.expectedInSeconds * 1000

// Ensure collecting state is active
if (!isCollecting) {
isCollecting = true
profileReady = false
Expand All @@ -172,15 +178,15 @@
return
}

// Store cancel function
downloadCancelFn = result.cancel
// If user dismissed the dialog while the request was pending, stop
if (!isDownloading) {
result.cancel()
return
}

// Show download dialog for actual download
globalDialog.dialog = downloadDialog
downloadCancelFn = result.cancel

const download = await result.downloadPromise

// Await the download to complete
triggerFileDownload(download.filename, await download.dataPromise)

globalDialog.dialog = null
Expand Down Expand Up @@ -355,22 +361,6 @@
{#snippet title()}
Downloading Samply Profile
{/snippet}
<div class="flex flex-col items-center gap-3 py-4">
<Progress class="h-1" value={downloadProgress.percent ?? 0} max={100}>
<Progress.Track>
<Progress.Range class="bg-primary-500" />
</Progress.Track>
</Progress>
<div class="flex w-full justify-between gap-2">
<span>Downloading profile...</span>
{#if downloadProgress.percent}
<span
>{humanSize(downloadProgress.bytes.downloaded)} / {humanSize(
downloadProgress.bytes.total
)}</span
>
{/if}
</div>
</div>
<DownloadProgressDisplay progress={downloadProgress} label="Downloading profile..." />
</GenericDialog>
{/snippet}
7 changes: 3 additions & 4 deletions js-packages/web-console/src/lib/services/pipelineManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -721,10 +721,9 @@ const streamToDownload = (
response.headers.get('content-length')
)

const streamWithProgress =
nonNull(totalBytes) && onProgress
? response.body!.pipeThrough(progressTransform(totalBytes, onProgress))
: response.body
const streamWithProgress = onProgress
? response.body!.pipeThrough(progressTransform(totalBytes ?? 0, onProgress))
: response.body

// Extract filename from Content-Disposition header
const contentDisposition = response.headers.get('Content-Disposition')
Expand Down
Loading