Improved CSP support

ankane · Jun 30, 2024 · b9c2156 · b9c2156
1 parent 58d1bb8
commit b9c2156
Show file tree

Hide file tree

Showing 20 changed files with 224 additions and 109 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## 3.6.0 (unreleased)
 
+- Improved CSP support
 - Dropped support for Ruby < 3.1 and Rails < 6.1
 
 ## 3.5.0 (2024-05-21)

diff --git a/app/assets/javascripts/pghero/application.js b/app/assets/javascripts/pghero/application.js
@@ -157,3 +157,17 @@ function initSlider() {
     refreshStats(false);
   });
 }
+
+$(document).on("click", ".query-code", function () {
+  this.style.maxHeight = "none";
+});
+
+$(document).on("click", ".migration-link", function (e) {
+  e.preventDefault();
+  $(this).parent().next(".migration").css("display", "block");
+});
+
+$(document).on("click", ".show-details", function () {
+  $(this).nextAll(".details").css("display", "block");
+  $(this).css("display", "none");
+});
diff --git a/app/assets/stylesheets/pghero/application.css b/app/assets/stylesheets/pghero/application.css
@@ -483,12 +483,12 @@ body {
   line-height: 300px;
   text-align: center;
   color: #999;
+  margin-bottom: 20px;
 }
 
 .pie-chart {
   height: 260px;
   line-height: 260px;
-  margin-bottom: 20px;
 }
 
 .unused-index {
@@ -503,8 +503,18 @@ body {
   font-weight: bold;
 }
 
+.origins-table {
+  table-layout: auto;
+}
+
 .origin {
   word-break: break-word;
+  width: 90%;
+}
+
+.origin-pct {
+  text-align: right;
+  width: 10%;
 }
 
 .duplicate-indexes td {
@@ -518,3 +528,93 @@ body {
 .no-outline:focus {
   outline: none;
 }
+
+.width-10 {
+  width: 10%;
+}
+
+.width-15 {
+  width: 15%;
+}
+
+.width-20 {
+  width: 20%;
+}
+
+.width-25 {
+  width: 25%;
+}
+
+.width-33 {
+  width: 33.33%;
+}
+
+.right-5 {
+  margin-right: 5px;
+}
+
+.query-row {
+  border-top: none;
+  padding: 0;
+}
+
+.query-pre {
+  margin-top: 1em;
+}
+
+.query-code {
+  max-height: 230px;
+  overflow: hidden;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.migration {
+  display: none;
+}
+
+.migration pre {
+  overflow: scroll;
+  white-space: pre;
+  word-break: normal;
+}
+
+.space-index {
+  font-style: italic;
+}
+
+a.relation-link {
+  color: inherit;
+}
+
+.push-left {
+  float: left;
+}
+
+.clear-both {
+  clear: both;
+}
+
+.create-index {
+  color: #eee;
+  background-color: #333;
+}
+
+.hide {
+  display: none;
+}
+
+.show-details {
+  float: right;
+  color: #f0ad4e;
+  margin-top: 0px;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.details pre {
+  color: #f0ad4e;
+  background-color: #333;
+}
diff --git a/app/views/layouts/pg_hero/application.html.erb b/app/views/layouts/pg_hero/application.html.erb
@@ -7,10 +7,10 @@
     <%= favicon_link_tag "pghero/favicon.png" %>
     <% if defined?(Propshaft::Railtie) %>
       <%= stylesheet_link_tag "pghero/nouislider", "pghero/arduino-light", "pghero/application" %>
-      <%= javascript_include_tag "pghero/jquery", "pghero/nouislider", "pghero/Chart.bundle", "pghero/chartkick", "pghero/highlight.min", "pghero/application" %>
+      <%= javascript_include_tag "pghero/jquery", "pghero/nouislider", "pghero/Chart.bundle", "pghero/chartkick", "pghero/highlight.min", "pghero/application", nonce: true %>
     <% else %>
       <%= stylesheet_link_tag "pghero/application" %>
-      <%= javascript_include_tag "pghero/application" %>
+      <%= javascript_include_tag "pghero/application", nonce: true %>
     <% end %>
   </head>
   <body>

diff --git a/app/views/pg_hero/home/_connections_table.html.erb b/app/views/pg_hero/home/_connections_table.html.erb
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th>Top Sources</th>
-      <th style="width: 20%;">Connections</th>
+      <th class="width-20">Connections</th>
     </tr>
   </thead>
   <tbody>

diff --git a/app/views/pg_hero/home/_live_queries_table.html.erb b/app/views/pg_hero/home/_live_queries_table.html.erb
@@ -1,10 +1,10 @@
 <table class="table queries">
   <thead>
     <tr>
-      <th style="width: 25%;">Pid</th>
-      <th style="width: 25%;">Duration</th>
-      <th style="width: 25%;">State</th>
-      <th style="width: 25%;"></th>
+      <th class="width-25">Pid</th>
+      <th class="width-25">Duration</th>
+      <th class="width-25">State</th>
+      <th class="width-25"></th>
     </tr>
   </thead>
   <tbody>
@@ -39,15 +39,15 @@
         </td>
       </tr>
       <tr>
-        <td colspan="6" style="border-top: none; padding: 0;">
+        <td colspan="4" class="query-row">
           <%= query[:source] %> <span class="text-muted"><%= query[:user] %></span>
-          <pre style="margin-top: 1em;"><code><%= query[:query] %></code></pre>
+          <pre class="query-pre"><code><%= query[:query] %></code></pre>
         </td>
       </tr>
     <% end %>
   </tbody>
 </table>
 
-<script>
+<%= javascript_tag nonce: true do %>
   highlightQueries();
-</script>
+<% end %>
diff --git a/app/views/pg_hero/home/_queries_table.html.erb b/app/views/pg_hero/home/_queries_table.html.erb
@@ -2,9 +2,9 @@
   <% unless local_assigns[:xhr] %>
     <thead>
       <tr>
-        <th style="width: 33.33%;"><%= local_assigns[:sort_headers] ? link_to("Total Time", {sort: nil}, data: {sort: nil}) : "Total Time" %></th>
-        <th style="width: 33.33%;"><%= local_assigns[:sort_headers] ? link_to("Average Time", {sort: "average_time"}, data: {sort: "average_time"}) : "Average Time" %></th>
-        <th style="width: 33.33%;"><%= local_assigns[:sort_headers] ? link_to("Calls", {sort: "calls"}, data: {sort: "calls"}) : "Calls" %></th>
+        <th class="width-33"><%= local_assigns[:sort_headers] ? link_to("Total Time", {sort: nil}, data: {sort: nil}) : "Total Time" %></th>
+        <th class="width-33"><%= local_assigns[:sort_headers] ? link_to("Average Time", {sort: "average_time"}, data: {sort: "average_time"}) : "Average Time" %></th>
+        <th class="width-33"><%= local_assigns[:sort_headers] ? link_to("Calls", {sort: "calls"}, data: {sort: "calls"}) : "Calls" %></th>
       </tr>
     </thead>
   <% end %>
@@ -57,8 +57,8 @@
         </td>
       </tr>
       <tr>
-        <td colspan="3" style="border-top: none; padding: 0;">
-          <pre><code style="max-height: 230px; overflow: hidden;" onclick="this.style.maxHeight = 'none';"><%= query[:query] %></code></pre>
+        <td colspan="3" class="query-row">
+          <pre><code class="query-code"><%= query[:query] %></code></pre>
           <% if query[:query] == "<insufficient privilege>" %>
             <p class="text-muted">For security reasons, only superusers can see queries executed by other users.</p>
           <% end %>

diff --git a/app/views/pg_hero/home/_query_stats_slider.html.erb b/app/views/pg_hero/home/_query_stats_slider.html.erb
@@ -4,7 +4,7 @@
   <div id="range-start"></div>
 </div>
 
-<script>
+<%= javascript_tag nonce: true do %>
   var sort = <%= pghero_js_value(@sort) %>;
   var minAverageTime = <%= pghero_js_value(@min_average_time) %>;
   var minCalls = <%= pghero_js_value(@min_calls) %>;
@@ -13,4 +13,4 @@
   var endAt = <%= pghero_js_value(@end_at.to_i * 1000) %>;
 
   initSlider();
-</script>
+<% end %>
diff --git a/app/views/pg_hero/home/_suggested_index.html.erb b/app/views/pg_hero/home/_suggested_index.html.erb
@@ -1,11 +1,11 @@
 <% if index && !details[:covering_index] %>
   <% unless @debug %>
-    <div style="float: right; color: #f0ad4e; margin-top: 0px; padding: 10px; cursor: pointer;" onclick="document.getElementById('details-<%= index.object_id %>').style.display = 'block'; this.style.display = 'none';">Details</div>
+    <div class="show-details">Details</div>
   <% end %>
-  <code><pre style="color: #eee; background-color: #333;">CREATE INDEX CONCURRENTLY ON <%= index[:table] %><% if index[:using] %> USING <%= index[:using] %><% end %> (<%= index[:columns].join(", ") %>)</pre></code>
+  <code><pre class="create-index">CREATE INDEX CONCURRENTLY ON <%= index[:table] %><% if index[:using] %> USING <%= index[:using] %><% end %> (<%= index[:columns].join(", ") %>)</pre></code>
 <% end %>
-<div id="details-<%= index.object_id %>" style="<%= "display: none;" unless @debug %>">
-  <code><pre style="color: #f0ad4e; background-color: #333;"><% if details[:explanation] %><%= details[:explanation] %>
+<div class="details <%= "hide" unless @debug %>">
+  <code><pre><% if details[:explanation] %><%= details[:explanation] %>
 <% end %><% if details[:row_estimates] %>Rows: <%= details[:rows] %>
 Row progression: <%= details[:row_progression].to_a.join(", ") %>
 

diff --git a/app/views/pg_hero/home/connections.html.erb b/app/views/pg_hero/home/connections.html.erb
@@ -7,24 +7,24 @@
     <h3>By Database</h3>
 
     <div id="chart-1" class="chart pie-chart">Loading...</div>
-    <script>
+    <%= javascript_tag nonce: true do %>
       new Chartkick.PieChart("chart-1", <%= pghero_js_value(@connections_by_database) %>);
-    </script>
+    <% end %>
 
     <h3>By User</h3>
 
     <div id="chart-2" class="chart pie-chart">Loading...</div>
-    <script>
+    <%= javascript_tag nonce: true do %>
       new Chartkick.PieChart("chart-2", <%= pghero_js_value(@connections_by_user) %>);
-    </script>
+    <% end %>
 
     <% if @connections_by_ssl_status %>
       <h3>By Security</h3>
 
       <div id="chart-3" class="chart pie-chart">Loading...</div>
-      <script>
+      <%= javascript_tag nonce: true do %>
         new Chartkick.PieChart("chart-3", <%= pghero_js_value(@connections_by_ssl_status) %>);
-      </script>
+      <% end %>
     <% end %>
 
     <%= render partial: "connections_table", locals: {connection_sources: @connection_sources} %>

diff --git a/app/views/pg_hero/home/explain.html.erb b/app/views/pg_hero/home/explain.html.erb
@@ -4,9 +4,9 @@
   <%= form_tag explain_path do %>
     <div class="field"><%= text_area_tag :query, @query, placeholder: "Enter a SQL query" %></div>
     <p>
-      <%= submit_tag "Explain", class: "btn btn-info", style: "margin-right: 10px;" %>
+      <%= submit_tag "Explain", class: "btn btn-info right-5" %>
       <% if @explain_analyze_enabled %>
-        <%= submit_tag "Analyze", class: "btn btn-danger", style: "margin-right: 10px;" %>
+        <%= submit_tag "Analyze", class: "btn btn-danger right-5" %>
       <% end %>
       <%= submit_tag "Visualize", class: "btn btn-danger" %>
     </p>