From eb43ea5a682449e0e74ab769159e3b6f7fce87f5 Mon Sep 17 00:00:00 2001
From: Ivan Dzikovsky <ivandzikovsky@gmail.com>
Date: Thu, 1 Oct 2026 14:33:56 +0300
Subject: [PATCH] [LIVY-1088] Fix Web UI progress bar and select styling
 blocked by default CSP

---
 .../apache/livy/server/ui/static/css/livy-ui.css  | 15 ++++++++++++++-
 .../apache/livy/server/ui/static/js/livy-ui.js    | 12 ++++++++++--
 .../apache/livy/server/ui/static/js/session.js    |  1 +
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/server/src/main/resources/org/apache/livy/server/ui/static/css/livy-ui.css b/server/src/main/resources/org/apache/livy/server/ui/static/css/livy-ui.css
index a7df0ec2a..17cb5e54f 100644
--- a/server/src/main/resources/org/apache/livy/server/ui/static/css/livy-ui.css
+++ b/server/src/main/resources/org/apache/livy/server/ui/static/css/livy-ui.css
@@ -49,4 +49,17 @@ td .progress {
 
 #session-summary {
   margin: 20px 0;
-}
\ No newline at end of file
+}
+
+/*
+ * Bootstrap styles select.custom-select elements with an inline SVG arrow
+ * loaded from a data: URI background image, which the default
+ * Content-Security-Policy (img-src 'self') blocks:
+ * https://getbootstrap.com/docs/4.6/components/input-group/#custom-select
+ * Fall back to the browser's native <select> appearance instead.
+ */
+.custom-select {
+  appearance: auto;
+  background: #fff;
+  padding-right: .75rem;
+}
diff --git a/server/src/main/resources/org/apache/livy/server/ui/static/js/livy-ui.js b/server/src/main/resources/org/apache/livy/server/ui/static/js/livy-ui.js
index af9352512..4b8c8ee76 100644
--- a/server/src/main/resources/org/apache/livy/server/ui/static/js/livy-ui.js
+++ b/server/src/main/resources/org/apache/livy/server/ui/static/js/livy-ui.js
@@ -110,8 +110,16 @@ function divWrap(inner) {
 
 function progressBar(double) {
   var cent = +(double * 100).toFixed(3);
-  return '<div class="progress"><div class="progress-bar" style="width:'
-    + cent + '%"><span>' + cent + '%</span></div></div>';
+  return '<div class="progress"><div class="progress-bar" data-width="'
+    + cent + '"><span>' + cent + '%</span></div></div>';
+}
+
+// Inline style attributes are blocked by the default Content-Security-Policy,
+// so progress bar widths are applied through CSSOM instead.
+function applyProgressBarWidths(container) {
+  $(container).find(".progress-bar[data-width]").each(function() {
+    this.style.width = $(this).attr("data-width") + "%";
+  });
 }
 
 function getPathArray() {
diff --git a/server/src/main/resources/org/apache/livy/server/ui/static/js/session.js b/server/src/main/resources/org/apache/livy/server/ui/static/js/session.js
index 3a23dc982..77c5bf0b1 100644
--- a/server/src/main/resources/org/apache/livy/server/ui/static/js/session.js
+++ b/server/src/main/resources/org/apache/livy/server/ui/static/js/session.js
@@ -126,6 +126,7 @@ function loadStatementsTable(statements) {
        "</tr>"
     );
   });
+  applyProgressBarWidths("#session-statements .statements-table-body");
 }
 
 $(document).ready(function () {