[LIVY-1088] Fix Web UI progress bar and select styling blocked by default CSP

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;
-}
+}
+
+/*
+ * 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;
+}

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() {

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 () {