Skip to content

[web-console] Fix incorrect background when scrolling Performance tab #6684

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

Open
Karakatiza666 wants to merge 1 commit into
base: main
Choose a base branch
from
+52 −6
Open

[web-console] Fix incorrect background when scrolling Performance tab #6684

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
4 changes: 2 additions & 2 deletions js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
</script>

{#snippet mainPane()}
<Pane order={mainOrder} minSize={mainMinSize} class="!overflow-visible">
<Pane order={mainOrder} minSize={mainMinSize} class="min-w-0 !overflow-visible">
{@render main()}
</Pane>
{/snippet}
Expand All @@ -50,7 +50,7 @@
defaultSize={percentValue(defaultSize)}
minSize={percentValue(minSize)}
maxSize={percentValue(maxSize)}
class="!overflow-visible"
class="min-w-0 !overflow-visible"
>
<div class="h-full {_class}">
{@render children()}
Expand Down
45 changes: 45 additions & 0 deletions js-packages/web-console/src/lib/components/layout/InlineDrawer.svelte.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,49 @@ describe('InlineDrawer', () => {
expect(panes[0]?.textContent).toContain('DRAWER CONTENT')
expect(panes[1]?.textContent).toContain('MAIN CONTENT')
})

// A long unbreakable line gives the main content a large min-content width,
// reproducing the wide connector table that triggered these regressions.
const wideMain = createRawSnippet(() => ({
render: () => `<div style="white-space: nowrap">${'WIDE '.repeat(400)}</div>`
}))

// Regression test for https://github.com/feldera/feldera/issues/6675: content
// wider than the pane (e.g. the connector table) must not stretch the pane past
// its container. The panes use `overflow: visible` so popovers are not clipped,
// which re-enables the flex default `min-width: auto`; `min-w-0` counteracts it.
it('keeps the main pane within its container when the content is wider', async () => {
const { container } = render(InlineDrawer, {
open: false,
side: 'right',
main: wideMain,
children: textSnippet('DRAWER CONTENT')
})
container.style.width = '400px'

const pane = container.querySelector('[data-pane]') as HTMLElement
await expect.element(page.getByText('WIDE', { exact: false })).toBeInTheDocument()
expect(pane.getBoundingClientRect().width).toBeLessThanOrEqual(400)
})

// Regression test for the drawer being unresizable: with wide main content and
// no `min-w-0`, the main pane cannot shrink below its intrinsic width, so the
// drawer pane collapses to nothing and the resizer has no room to move. The
// drawer pane must keep the width the resizer allotted it (its `defaultSize`).
it('gives the drawer pane its allotted width even when the main content is wide', async () => {
const { container } = render(InlineDrawer, {
open: true,
side: 'right',
main: wideMain,
children: textSnippet('DRAWER CONTENT'),
defaultSize: '40%'
})
container.style.width = '1000px'

await expect.element(page.getByText('DRAWER CONTENT')).toBeInTheDocument()
const panes = [...container.querySelectorAll('[data-pane]')] as HTMLElement[]
const drawerPane = panes.find((p) => p.textContent?.includes('DRAWER CONTENT'))!
// 40% of 1000px, minus the resizer's margins; assert it kept most of its share.
expect(drawerPane.getBoundingClientRect().width).toBeGreaterThan(300)
})
})
9 changes: 5 additions & 4 deletions js-packages/web-console/src/lib/components/pipelines/editor/TabPerformance.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,16 +218,17 @@
>
{#snippet main()}
<div
class="-mr-2 scrollbar flex min-w-0 flex-1 flex-col gap-4 overflow-x-clip overflow-y-auto pr-2"
class="-mr-2 scrollbar flex h-full min-w-0 flex-1 flex-col gap-4 overflow-x-clip overflow-y-auto pr-2"
>
<div class="flex w-full flex-col gap-4">
{#if pipeline.current.status === 'Unavailable'}
<WarningBanner class="rounded!">
Pipeline has been unavailable for {formatElapsedTime(
new Date(pipeline.current.deploymentStatusSince)
)} since {Dayjs(pipeline.current.deploymentStatusSince).format('MMM D, YYYY h:mm A')}.
Showing the last known metrics while reconnecting. You can attempt to suspend or shut it
down.
)} since {Dayjs(pipeline.current.deploymentStatusSince).format(
'MMM D, YYYY h:mm A'
)}. Showing the last known metrics while reconnecting. You can attempt to suspend or
shut it down.
</WarningBanner>
{/if}
<div class="flex flex-wrap gap-4">
Expand Down
Loading