ui: add inline iframe viewer on advanced debug for detail files (#165955)

ui: add inline iframe viewer on advanced debug for detail files

Author: trunk-io[bot]

pkg/ui/ui.go

@@ -36,6 +36,7 @@ const (
 	cspHeader = "default-src 'self'; " +
 		"style-src 'self' 'unsafe-inline'; " +
 		"font-src 'self' data:; " +
+		"frame-src 'self' blob: https://cockroachdb.github.io; " +
 		"img-src 'self' data:; " +
 		"connect-src 'self' https://register.cockroachdb.com;"
 )

pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/executionDetailViewer.tsx

@@ -0,0 +1,66 @@
+// Copyright 2026 The Cockroach Authors.
+//
+// Use of this software is governed by the CockroachDB Software License
+// included in the /LICENSE file.
+
+import { Button, Icon } from "@cockroachlabs/ui-components";
+import classnames from "classnames/bind";
+import React, { useCallback } from "react";
+
+import styles from "./jobProfilerView.module.scss";
+
+const cx = classnames.bind(styles);
+
+interface ExecutionDetailViewerProps {
+  filename: string;
+  blobUrl: string;
+  onClose: () => void;
+}
+
+export const ExecutionDetailViewer: React.FC<ExecutionDetailViewerProps> = ({
+  filename,
+  blobUrl,
+  onClose,
+}) => {
+  const openInNewTab = useCallback(() => {
+    // Blob URL already exists so this is synchronous and won't
+    // trigger popup blockers.
+    window.open(blobUrl, "_blank");
+  }, [blobUrl]);
+
+  return (
+    <div className={cx("viewer-overlay")} onClick={onClose}>
+      <div className={cx("viewer-panel")} onClick={e => e.stopPropagation()}>
+        <div className={cx("viewer-header")}>
+          <span className={cx("viewer-filename")}>{filename}</span>
+          <span className={cx("viewer-actions")}>
+            <Button
+              as="a"
+              size="small"
+              intent="tertiary"
+              onClick={openInNewTab}
+              aria-label="Open in new tab"
+            >
+              <Icon iconName="Open" />
+            </Button>
+            <Button
+              as="a"
+              size="small"
+              intent="tertiary"
+              onClick={onClose}
+              aria-label="Close"
+            >
+              <Icon iconName="Cancel" />
+            </Button>
+          </span>
+        </div>
+        <iframe
+          src={blobUrl}
+          className={cx("viewer-iframe")}
+          sandbox="allow-same-origin allow-scripts"
+          title={filename}
+        />
+      </div>
+    </div>
+  );
+};

pkg/ui/workspaces/cluster-ui/src/jobs/jobDetailsPage/jobProfilerView.module.scss

@@ -6,34 +6,96 @@
 @import "src/core/index.module";
 
 .crl-job-profiler-view {
-    &__actions-column {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-    }
+  &__actions-column {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+  }
 }
 
 .column-size-medium {
-    width: 230px;
+  width: 230px;
 }
 
 .view-execution-detail-button {
-    white-space: nowrap;
+  white-space: nowrap;
 
-    >svg {
-        margin-right: $spacing-x-small;
-    }
+  > svg {
+    margin-right: $spacing-x-small;
+  }
 }
 
 .download-execution-detail-button {
-    white-space: nowrap;
+  white-space: nowrap;
 
-    >svg {
-        margin-right: $spacing-x-small;
-    }
+  > svg {
+    margin-right: $spacing-x-small;
+  }
 }
 
 .full-width {
   width: 100%;
 }
+
+// Execution detail viewer overlay and panel.
+.viewer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.viewer-panel {
+  background-color: white;
+  border: 0.5px solid $colors--neutral-2;
+  border-radius: 8px;
+  box-shadow: 0 0 4px rgba(154, 161, 171, 0.33);
+  width: 98vw;
+  height: 98vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.viewer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 0.5px solid $colors--neutral-2;
+}
+
+.viewer-filename {
+  font-family: $font-family--base;
+  font-weight: $font-weight--bold;
+  font-size: $font-size--small;
+  line-height: $line-height--small;
+  letter-spacing: 0.3px;
+  color: $colors--neutral-7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.viewer-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-left: 16px;
+}
+
+.viewer-iframe {
+  width: 100%;
+  border: none;
+  display: block;
+  flex: 1;
+  min-height: 0;
+}