[web-console] Make side panels for connector errors and pipeline health resizable#6630
Conversation
mythical-fred
left a comment
There was a problem hiding this comment.
APPROVE.
Nicely scoped: Drawer/InlineDrawer/OverlayDrawer gain a main snippet and pane-based resize with localStorageKey persistence, and the three call sites (TabHealth, TabPerformance, PipelineEditLayout) are updated consistently. Tests are targeted and meaningful — the InlineDrawer spec asserts the resize handle only appears when open (which is the whole point of the feature), the OverlayDrawer spec asserts the max-w-full cap and even guards with an innerWidth < 700 precondition so a wider CI viewport can't silently pass it. Commit is signed off with no AI trailers.
Two small comments (non-blocking):
-
autoSaveIdkey naming. You've picked a good, consistent scheme (layout/pipelines/monitoringPanel/size,layout/drawer/pipelineHealth, etc.), but these live in localStorage forever once written. If any of these keys change name in the future, users will silently lose their layout. Worth a brief note somewhere (a comment in the layout file or a keys constants module) so we don't collide or rename them casually later. -
mainsnippet is now required inDrawer. The type declares it non-optional, which is correct for the new callers, but if any external/embedded consumer ofDrawer(there don't appear to be any today, but it's a shared layout component) still passes onlychildrenthey'll get a runtime blank pane. If you want a belt-and-braces default,main = () => null as unknown as Snippetwould keep the old callers rendering — otherwise, current typing already catches it at build time, which is fine.
Manual test screencast plus browser-based specs is a good testing story for this kind of change; keep doing it.
| width?: string | ||
| inlineClass?: string | ||
| /** Inline drawer pane size on open, as a percentage of the container. */ | ||
| defaultSize?: number |
There was a problem hiding this comment.
why not name them defaultSizePercent?
There was a problem hiding this comment.
alternatively, you could define a Percentage data type and use it here
| <div class="w-52 pt-2"> | ||
| {#if global.start_time > 0} | ||
| On {formatDateTime({ ms: global.start_time * 1000 })} | ||
| {#snippet main()} |
There was a problem hiding this comment.
these diffs are terrible, one should be able to do better than this
…th resizable Signed-off-by: Karakatiza666 <bulakh.96@gmail.com>
Testing: manual, added unit tests
Fix #6539
Minor side change: the size of the Monitoring and Interaction panels i snow preserved across page reloads
Screencast.From.2026-07-14.19-10-17.webm