Add 'dismiss pipeline error' button

Karakatiza666 · Karakatiza666 · commit 6b1c1bd94491 · 2026-03-04T22:13:16.000Z
Improve detection of error message overflow in the case of long single-line message

Signed-off-by: Karakatiza666 &lt;bulakh.96@gmail.com&gt;
diff --git a/js-packages/web-console/src/lib/components/layout/pipelines/PipelineEditLayout.svelte b/js-packages/web-console/src/lib/components/layout/pipelines/PipelineEditLayout.svelte
@@ -92,6 +92,7 @@
   )
 
   const { updatePipelines } = useUpdatePipelineList()
+  const api = usePipelineManager()
   const pipelineAction = getPipelineAction()
   const pipelineActionCallbacks = usePipelineActionCallbacks()
   const handleActionSuccess = async (pipelineName: string, action: PipelineAction) => {
@@ -242,7 +243,8 @@ example = "1.0"`
       return {
         header: `The last execution of the pipeline failed with the error code: ${pipeline.current.deploymentError.error_code}`,
         message: pipeline.current.deploymentError.message,
-        style: 'error' as const
+        style: 'error' as const,
+        onClose: () => api.dismissDeploymentError(pipeline.current.name)
       }
     } else if (pipeline.current.status === 'AwaitingApproval') {
       return {
@@ -435,12 +437,7 @@ example = "1.0"`
       <PaneGroup direction="vertical" class="!overflow-visible">
         {#if pipelineBannerMessage}
           <div class="pb-2 md:pb-4">
-            <PipelineBanner
-              header={pipelineBannerMessage.header}
-              message={pipelineBannerMessage.message}
-              actions={pipelineBannerMessage.actions ?? []}
-              style={pipelineBannerMessage.style}
-            ></PipelineBanner>
+            <PipelineBanner {...pipelineBannerMessage}></PipelineBanner>
           </div>
         {/if}
         <CodeEditor
diff --git a/js-packages/web-console/src/lib/components/pipelines/editor/PipelineBanner.svelte b/js-packages/web-console/src/lib/components/pipelines/editor/PipelineBanner.svelte
@@ -6,17 +6,44 @@
     header,
     message,
     actions = [],
-    style
+    style,
+    onClose
   }: {
     header: string
     message?: string
     actions?: {
       label: string
       onclick: () => void
     }[]
+    onClose?: () => void
     style: 'info' | 'warning' | 'error'
   } = $props()
   let showMore = $state(false)
+  let spanEl: HTMLElement | undefined = $state()
+  let isTruncated = $state(false)
+
+  // Track whether the message overflows its single visible line (line-clamp-1).
+  // Skipped while expanded (showMore) to preserve isTruncated=true for "Show less".
+  // ResizeObserver keeps the check in sync as the viewport width changes.
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    message // re-run the effect when message changes
+
+    if (!spanEl || showMore) {
+      return
+    }
+
+    const checkTruncation = () => {
+      isTruncated = spanEl!.scrollHeight > spanEl!.clientHeight
+    }
+
+    const observer = new ResizeObserver(checkTruncation)
+    observer.observe(spanEl)
+    checkTruncation()
+
+    return () => observer.disconnect()
+  })
+
   const textClass = $derived(
     style === 'info'
       ? 'text-surface-950-50'
@@ -45,18 +72,29 @@
     <div class=" flex w-full flex-col">
       <div class="flex justify-between pb-2 font-semibold">
         <span class={textClass}>{header}</span>
-        {#if message}
-          <ClipboardCopyButton value={message} class="-m-2"></ClipboardCopyButton>
-        {/if}
+        <div class="flex flex-nowrap gap-4">
+          {#if message}
+            <ClipboardCopyButton value={message} class="-m-2"></ClipboardCopyButton>
+          {/if}
+          {#if onClose}
+            <button
+              onclick={onClose}
+              class="fd fd-x -m-2 btn-icon text-[24px]"
+              aria-label="Dismiss pipeline deployment error"
+            >
+            </button>
+          {/if}
+        </div>
       </div>
       <span
+        bind:this={spanEl}
         class="{textClass} break-all whitespace-pre-wrap {showMore
           ? 'scrollbar max-h-[30vh] overflow-auto '
           : 'line-clamp-1'}"
       >
         {message}
       </span>
-      {#if message && message.indexOf('\n') !== -1}
+      {#if message && isTruncated}
         <button
           onclick={() => {
             showMore = !showMore
diff --git a/js-packages/web-console/src/lib/compositions/usePipelineManager.svelte.ts b/js-packages/web-console/src/lib/compositions/usePipelineManager.svelte.ts
@@ -6,6 +6,7 @@ import {
   collectSamplyProfile,
   deleteApiKey,
   deletePipeline,
+  dismissDeploymentError,
   type FetchOptions,
   getApiKeys,
   getAuthConfig,
@@ -197,6 +198,10 @@ export const usePipelineManager = (options?: FetchOptions) => {
       return x
     },
     deleteApiKey: reportError(deleteApiKey, (keyName) => `Failed to delete ${keyName} API key`),
+    dismissDeploymentError: reportError(
+      dismissDeploymentError,
+      (pipelineName) => `Failed to dismiss deployment error for ${pipelineName} pipeline`
+    ),
     getClusterEvents: reportError(getClusterEvents),
     getClusterEvent: reportError(getClusterEvent),
     getSamplyProfile: reportError(getSamplyProfile),
diff --git a/js-packages/web-console/src/lib/services/manager/index.ts b/js-packages/web-console/src/lib/services/manager/index.ts
@@ -45,6 +45,7 @@ export {
   postPipelineActivate,
   postPipelineApprove,
   postPipelineClear,
+  postPipelineDismissError,
   postPipelineInputConnectorAction,
   postPipelinePause,
   postPipelineRebalance,
@@ -90,6 +91,7 @@ export type {
   ColumnType,
   CombinedDesiredStatus,
   CombinedStatus,
+  CommitProgressSummary,
   CommitTransactionData,
   CommitTransactionError,
   CommitTransactionErrors,
@@ -366,6 +368,7 @@ export type {
   PostApiKeyResponse,
   PostApiKeyResponses,
   PostgresReaderConfig,
+  PostgresTlsConfig,
   PostgresWriteMode,
   PostgresWriterConfig,
   PostPipelineActivateData,
@@ -383,6 +386,10 @@ export type {
   PostPipelineClearErrors,
   PostPipelineClearResponses,
   PostPipelineData,
+  PostPipelineDismissErrorData,
+  PostPipelineDismissErrorError,
+  PostPipelineDismissErrorErrors,
+  PostPipelineDismissErrorResponses,
   PostPipelineError,
   PostPipelineErrors,
   PostPipelineInputConnectorActionData,
diff --git a/js-packages/web-console/src/lib/services/manager/sdk.gen.ts b/js-packages/web-console/src/lib/services/manager/sdk.gen.ts
@@ -129,6 +129,9 @@ import type {
   PostPipelineClearErrors,
   PostPipelineClearResponses,
   PostPipelineData,
+  PostPipelineDismissErrorData,
+  PostPipelineDismissErrorErrors,
+  PostPipelineDismissErrorResponses,
   PostPipelineErrors,
   PostPipelineInputConnectorActionData,
   PostPipelineInputConnectorActionErrors,
@@ -726,6 +729,27 @@ export const getPipelineDataflowGraph = <ThrowOnError extends boolean = false>(
     ...options
   })
 
+/**
+ * Dismiss Pipeline Deployment Error
+ *
+ * Clears the `deployment_error` field of the pipeline, such that a subsequent call to
+ * `/start?dismiss_error=false` succeeds. It will return an error if the pipeline is not fully
+ * stopped (i.e., both current and desired status must be `Stopped`) AND a deployment error
+ * is present.
+ */
+export const postPipelineDismissError = <ThrowOnError extends boolean = false>(
+  options: Options<PostPipelineDismissErrorData, ThrowOnError>
+) =>
+  (options.client ?? client).post<
+    PostPipelineDismissErrorResponses,
+    PostPipelineDismissErrorErrors,
+    ThrowOnError
+  >({
+    security: [{ scheme: 'bearer', type: 'http' }],
+    url: '/v0/pipelines/{pipeline_name}/dismiss_error',
+    ...options
+  })
+
 /**
  * Subscribe to View
  *
diff --git a/js-packages/web-console/src/lib/services/manager/types.gen.ts b/js-packages/web-console/src/lib/services/manager/types.gen.ts
diff --git a/js-packages/web-console/src/lib/services/pipelineManager.ts b/js-packages/web-console/src/lib/services/pipelineManager.ts
