Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
17 changes: 6 additions & 11 deletions js-packages/web-console/src/lib/components/pipelines/Table.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,12 @@
<th class="px-1 py-1 text-left"
><span class="text-base font-normal text-surface-950-50">Tags</span></th
>
<ThSort {table} class="w-20 px-1 py-1 xl:w-32" field="platformVersion">
<ThSort
{table}
class="w-20 px-1 py-1 xl:w-32"
field="platformVersion"
{...sortColumn('platformVersion')}
>
<span class="text-base font-normal text-surface-950-50">
Runtime <span class="hidden xl:!inline">version</span>
</span>
Expand All @@ -191,16 +196,6 @@
<span class="hidden xl:!inline">Runtime errors</span>
</span>
</ThSort>
<ThSort
{table}
class="w-20 px-1 py-1 xl:w-32"
field="platformVersion"
{...sortColumn('platformVersion')}
>
<span class="text-base font-normal text-surface-950-50">
Runtime <span class="hidden xl:!inline">version</span>
</span>
</ThSort>
<ThSort
{table}
class="px-1 py-1"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/**
* Mouse interaction tests for column sorting in the pipelines `Table`.
* Tests for the pipelines `Table`: the left-to-right column order and mouse
* interaction with column sorting.
*
* The real pipelines `Table` is mounted with a handful of pipeline thumbs whose name order
* and "status changed" order deliberately disagree, so every assertion about row
Expand Down Expand Up @@ -76,6 +77,14 @@ const rowOrder = () =>
const header = (label: string) => page.getByText(label, { exact: true })
const headerCell = (label: string) => header(label).element().closest('th')!

// The visible column order, read left to right off the header row. Each cell's
// text is whitespace-collapsed so responsive label variants (e.g. the short and
// long "Runtime errors" spans, both present in the DOM) compare deterministically.
const columnHeaders = () =>
Array.from(document.querySelectorAll('thead th')).map((th) =>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

this works only if there's a single table in the whole document

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

At the time of this test there is, but I'll narrow down the selection just to be safe

th.textContent!.replace(/\s+/g, ' ').trim()
)

const persistedSort = () => JSON.parse(localStorage.getItem(SORT_KEY)!)

const mountTable = () => render(Table, { props: { pipelines, selectedPipelines: [] } } as any)
Expand Down Expand Up @@ -151,3 +160,39 @@ describe('Table — column sorting', () => {
expect(headerCell('Pipeline name').classList.contains('active')).toBe(true)
})
})

describe('Table — column order', () => {
beforeEach(() => {
localStorage.clear()
useLayoutSettings().pipelinesTableSort.value = { column: 'name', direction: 'asc' }
})

afterEach(async () => {
// See the sorting suite's afterEach: wait out @vincjo/datatables' 2 ms
// scroll-restore timer so it fires while the component is still mounted.
await new Promise((resolve) => setTimeout(resolve, 10))
localStorage.clear()
})

it('renders the columns left to right in the expected order', async () => {
mountTable()

// The leading cell is the select-all checkbox and carries no label. "Runtime
// errors" holds both the short ("Errors") and long ("Runtime errors") span,
// so its collapsed text is the concatenation of the two.
await expect
.poll(columnHeaders)
.toEqual([
'',
'Pipeline name',
'Storage',
'Status',
'Message',
'Tags',
'Runtime version',
'Errors Runtime errors',
'Status changed',
'Deployed on'
])
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,11 @@ groups related actions into multi-action dropdowns when multiple options are ava
import { usePremiumFeatures } from '$lib/compositions/usePremiumFeatures.svelte'
import { useToast } from '$lib/compositions/useToastNotification'
import type { WritablePipeline } from '$lib/compositions/useWritablePipeline.svelte'
import { getDeploymentStatusLabel, isPipelineShutdown } from '$lib/functions/pipelines/status'
import {
deletePipelineDisabledReason,
getDeploymentStatusLabel,
isPipelineShutdown
} from '$lib/functions/pipelines/status'
import { resolve } from '$lib/functions/svelte'
import type { PipelineAction } from '$lib/services/pipelineManager'
import type { Snippet } from '$lib/types/svelte'
Expand Down Expand Up @@ -111,6 +115,10 @@ groups related actions into multi-action dropdowns when multiple options are ava
}
const { toastError } = useToast()

// An already-deleted pipeline offers no Delete action; otherwise the backend
// dictates when deletion is possible (fully stopped, storage cleared).
const deleteDisabledReason = $derived(deletePipelineDisabledReason(pipeline.current.status, pipeline.current.storageStatus, deleted))

const actions = {
_start,
_start_paused,
Expand Down Expand Up @@ -673,9 +681,8 @@ groups related actions into multi-action dropdowns when multiple options are ava
class="bg-white-dark absolute right-0 z-30 mt-2 flex w-44 flex-col justify-stretch rounded shadow-md"
>
<button
class="flex items-center gap-2 px-4 py-3 text-left hover:bg-surface-50-950 disabled:pointer-events-none disabled:opacity-50"
class="flex items-center gap-2 px-4 py-3 text-left hover:bg-surface-50-950 disabled:opacity-50"
disabled={!pipelineList.pipelines || unsavedChanges}
title={unsavedChanges ? 'Save the program before duplicating.' : duplicatePipelineTooltip}
onclick={() => {
close()
void duplicateCurrentPipeline()
Expand All @@ -684,10 +691,16 @@ groups related actions into multi-action dropdowns when multiple options are ava
<span class="fd fd-copy-plus text-[20px]"></span>
Duplicate
</button>
<Tooltip placement="top">
{#if unsavedChanges}
Save the program before duplicating.
{:else}
{duplicatePipelineTooltip}
{/if}
</Tooltip>
<button
class="flex items-center gap-2 px-4 py-3 text-left hover:bg-surface-50-950 disabled:pointer-events-none disabled:opacity-50"
disabled={editConfigDisabled}
title={editConfigDisabled ? 'Stop the pipeline to delete it' : undefined}
class="flex items-center gap-2 px-4 py-3 text-left hover:bg-surface-50-950 disabled:opacity-50"
disabled={!!deleteDisabledReason}
onclick={() => {
close()
globalDialog.dialog = deleteDialog
Expand All @@ -696,6 +709,9 @@ groups related actions into multi-action dropdowns when multiple options are ava
<span class="fd fd-trash-2 text-[20px]"></span>
Delete
</button>
{#if deleteDisabledReason}
<Tooltip class="whitespace-nowrap" placement="top">{deleteDisabledReason}</Tooltip>
{/if}
</div>
{/snippet}
</Popup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { PipelineThumb } from '$lib/services/pipelineManager'
import type { useUpdatePipelineList } from './pipelines/usePipelineList.svelte'

export const duplicatePipelineTooltip =
'Pipeline storage and state are not duplicated. The new pipeline starts fresh.'
'The connectors are preserved. Pipeline storage and state are not copied - the new pipeline starts fresh.'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

not entirely sure what "preserved" means. Does it mean the code is the same, or that the state of the storage systems behind the connectors is also somehow preserved?


export const MAX_DUPLICATE_ATTEMPTS = 10_000

Expand Down
68 changes: 68 additions & 0 deletions js-packages/web-console/src/lib/functions/pipelines/status.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
/**
* Unit tests for `deletePipelineDisabledReason`, the helper that names why a
* pipeline cannot be deleted. It mirrors the pipeline-manager's delete
* preconditions (fully stopped, storage cleared), so the tests walk the same
* two blockers and their resolution order.
*/
import { describe, expect, it } from 'vitest'
import type { StorageStatus } from '$lib/services/manager'
import type { PipelineStatus } from '$lib/services/pipelineManager'
import { deletePipelineDisabledReason } from './status'

describe('deletePipelineDisabledReason', () => {
it('allows deletion once the pipeline is stopped and storage is cleared', () => {
expect(deletePipelineDisabledReason('Stopped', 'Cleared', false)).toBeUndefined()
})

it('reports when the pipeline is already deleted', () => {
expect(deletePipelineDisabledReason('Stopped', 'Cleared', true)).toBe(
'This pipeline has already been deleted.'
)
})

it('asks to stop the pipeline while it is still running', () => {
expect(deletePipelineDisabledReason('Running', 'Cleared', false)).toBe('Stop the pipeline to delete it.')
})

// Stop takes priority: a running pipeline always holds its storage, so naming
// storage first would send the user down a step they cannot take yet.
it('asks to stop first even when storage is still in use', () => {
expect(deletePipelineDisabledReason('Running', 'InUse', false)).toBe('Stop the pipeline to delete it.')
})

it('asks to clear storage when stopped but storage is in use', () => {
expect(deletePipelineDisabledReason('Stopped', 'InUse', false)).toBe(
'Clear the pipeline storage to delete it.'
)
})

it('asks to wait while storage is mid-clear', () => {
expect(deletePipelineDisabledReason('Stopped', 'Clearing', false)).toBe(
'Wait for storage to finish clearing to delete the pipeline.'
)
})
Comment thread
Karakatiza666 marked this conversation as resolved.

// A pipeline in an error state is fully stopped, so cleared storage unblocks
// deletion just as it does for the normal Stopped state.
it('treats error states as stopped', () => {
const errorStates: PipelineStatus[] = ['SqlError', 'RustError', 'SystemError']
for (const status of errorStates) {
expect(deletePipelineDisabledReason(status, 'Cleared', false)).toBeUndefined()
expect(deletePipelineDisabledReason(status, 'InUse', false)).toBe(
'Clear the pipeline storage to delete it.'
)
}
})

// Transitional states are not fully stopped, so deletion stays blocked on stop
// regardless of the storage state.
it('blocks on stop for transitional states', () => {
const transitional: PipelineStatus[] = ['Pausing', 'Resuming', 'Stopping', 'Suspending']
const anyStorage: StorageStatus[] = ['Cleared', 'InUse', 'Clearing']
for (const status of transitional) {
for (const storage of anyStorage) {
expect(deletePipelineDisabledReason(status, storage, false)).toBe('Stop the pipeline to delete it.')
}
}
})
})
21 changes: 21 additions & 0 deletions js-packages/web-console/src/lib/functions/pipelines/status.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { match, P } from 'ts-pattern'
import type { StorageStatus } from '$lib/services/manager'
import type { ExtendedPipeline, PipelineStatus } from '$lib/services/pipelineManager'

export const getPipelineStatusLabel = (status: PipelineStatus) => {
Expand Down Expand Up @@ -193,6 +194,26 @@ export const isPipelineShutdown = (status: PipelineStatus) => {
.exhaustive()
}

export const deletePipelineDisabledReason = (
status: PipelineStatus,
storageStatus: StorageStatus,
deleted: boolean
): string | undefined => {
if (deleted) {
return 'This pipeline has already been deleted.'
}
if (!isPipelineShutdown(status)) {
return 'Stop the pipeline to delete it.'
}
if (storageStatus === 'Clearing') {
return 'Wait for storage to finish clearing to delete the pipeline.'
}
if (storageStatus !== 'Cleared') {
return 'Clear the pipeline storage to delete it.'
}
return undefined
}

export const isMetricsAvailable = (status: PipelineStatus) => {
return match(status)
.returnType<'yes' | 'no' | 'soon' | 'missing'>()
Expand Down