pghero 3.7.0 → 4.0.0

data/app/assets/javascripts/pghero/nouislider.js

@@ -713,6 +713,7 @@
         var snap = entry.indexOf("snap") >= 0;
         var hover = entry.indexOf("hover") >= 0;
         var unconstrained = entry.indexOf("unconstrained") >= 0;
+        var invertConnects = entry.indexOf("invert-connects") >= 0;
         var dragAll = entry.indexOf("drag-all") >= 0;
         var smoothSteps = entry.indexOf("smooth-steps") >= 0;
         if (fixed) {
@@ -722,6 +723,9 @@
             // Use margin to enforce fixed state
             testMargin(parsed, parsed.start[1] - parsed.start[0]);
         }
+        if (invertConnects && parsed.handles !== 2) {
+            throw new Error("noUiSlider: 'invert-connects' behaviour must be used with 2 handles");
+        }
         if (unconstrained && (parsed.margin || parsed.limit)) {
             throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit");
         }
@@ -734,6 +738,7 @@
             snap: snap,
             hover: hover,
             unconstrained: unconstrained,
+            invertConnects: invertConnects,
         };
     }
     function testTooltips(parsed, entry) {
@@ -904,6 +909,7 @@
         // Slider DOM Nodes
         var scope_Target = target;
         var scope_Base;
+        var scope_ConnectBase;
         var scope_Handles;
         var scope_Connects;
         var scope_Pips;
@@ -915,6 +921,7 @@
         var scope_HandleNumbers = [];
         var scope_ActiveHandlesCount = 0;
         var scope_Events = {};
+        var scope_ConnectsInverted = false;
         // Document Nodes
         var scope_Document = target.ownerDocument;
         var scope_DocumentElement = options.documentElement || scope_Document.documentElement;
@@ -971,17 +978,17 @@
         }
         // Add handles to the slider base.
         function addElements(connectOptions, base) {
-            var connectBase = addNodeTo(base, options.cssClasses.connects);
+            scope_ConnectBase = addNodeTo(base, options.cssClasses.connects);
             scope_Handles = [];
             scope_Connects = [];
-            scope_Connects.push(addConnect(connectBase, connectOptions[0]));
+            scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[0]));
             // [::::O====O====O====]
             // connectOptions = [0, 1, 1, 1]
             for (var i = 0; i < options.handles; i++) {
                 // Keep a list of all added handles.
                 scope_Handles.push(addOrigin(base, i));
                 scope_HandleNumbers[i] = i;
-                scope_Connects.push(addConnect(connectBase, connectOptions[i + 1]));
+                scope_Connects.push(addConnect(scope_ConnectBase, connectOptions[i + 1]));
             }
         }
         // Initialize a single slider.
@@ -1930,8 +1937,26 @@
             var translation = transformDirection(to, 0) - scope_DirOffset;
             var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
             scope_Handles[handleNumber].style[options.transformRule] = translateRule;
+            // sanity check for at least 2 handles (e.g. during setup)
+            if (options.events.invertConnects && scope_Locations.length > 1) {
+                // check if handles passed each other, but don't match the ConnectsInverted state
+                var handlesAreInOrder = scope_Locations.every(function (position, index, locations) {
+                    return index === 0 || position >= locations[index - 1];
+                });
+                if (scope_ConnectsInverted !== !handlesAreInOrder) {
+                    // invert connects when handles pass each other
+                    invertConnects();
+                    // invertConnects already updates all connect elements
+                    return;
+                }
+            }
             updateConnect(handleNumber);
             updateConnect(handleNumber + 1);
+            if (scope_ConnectsInverted) {
+                // When connects are inverted, we also have to update adjacent connects
+                updateConnect(handleNumber - 1);
+                updateConnect(handleNumber + 2);
+            }
         }
         // Handles before the slider middle are stacked later = higher,
         // Handles after the middle later is lower
@@ -1961,13 +1986,20 @@
             if (!scope_Connects[index]) {
                 return;
             }
+            // Create a copy of locations, so we can sort them for the local scope logic
+            var locations = scope_Locations.slice();
+            if (scope_ConnectsInverted) {
+                locations.sort(function (a, b) {
+                    return a - b;
+                });
+            }
             var l = 0;
             var h = 100;
             if (index !== 0) {
-                l = scope_Locations[index - 1];
+                l = locations[index - 1];
             }
             if (index !== scope_Connects.length - 1) {
-                h = scope_Locations[index];
+                h = locations[index];
             }
             // We use two rules:
             // 'translate' to change the left/top offset;
@@ -2159,6 +2191,7 @@
                 "format",
                 "pips",
                 "tooltips",
+                "connect",
             ];
             // Only change options that we're actually passed to update.
             updateAble.forEach(function (name) {
@@ -2196,6 +2229,32 @@
             // Invalidate the current positioning so valueSet forces an update.
             scope_Locations = [];
             valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent);
+            // Update connects only if it was set
+            if (optionsToUpdate.connect) {
+                updateConnectOption();
+            }
+        }
+        function updateConnectOption() {
+            // IE supported way of removing children including event handlers
+            while (scope_ConnectBase.firstChild) {
+                scope_ConnectBase.removeChild(scope_ConnectBase.firstChild);
+            }
+            // Adding new connects according to the new connect options
+            for (var i = 0; i <= options.handles; i++) {
+                scope_Connects[i] = addConnect(scope_ConnectBase, options.connect[i]);
+                updateConnect(i);
+            }
+            // re-adding drag events for the new connect elements
+            // to ignore the other events we have to negate the 'if (!behaviour.fixed)' check
+            bindSliderEvents({ drag: options.events.drag, fixed: true });
+        }
+        // Invert options for connect handles
+        function invertConnects() {
+            scope_ConnectsInverted = !scope_ConnectsInverted;
+            testConnect(options, 
+            // inverse the connect boolean array
+            options.connect.map(function (b) { return !b; }));
+            updateConnectOption();
         }
         // Initialization steps
         function setupSlider() {

data/app/assets/stylesheets/pghero/application.css

@@ -20,7 +20,7 @@ body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   line-height: 1.4;
   color: #333;
 }
@@ -618,3 +618,9 @@ a.relation-link {
   color: #f0ad4e;
   background-color: #333;
 }
+
+#copy {
+  float: right;
+  margin-top: 10px;
+  margin-right: 10px;
+}

data/app/controllers/pg_hero/home_controller.rb

@@ -1,16 +1,16 @@
 module PgHero
   class HomeController < ActionController::Base
-    layout "pg_hero/application"
+    http_basic_authenticate_with name: PgHero.username, password: PgHero.password if PgHero.password
 
     protect_from_forgery with: :exception
 
-    http_basic_authenticate_with name: PgHero.username, password: PgHero.password if PgHero.password
-
     before_action :check_api
     before_action :set_database
+    before_action :check_server_version
     before_action :set_query_stats_enabled
     before_action :set_show_details, only: [:index, :queries, :show_query]
-    before_action :ensure_query_stats, only: [:queries]
+    before_action :ensure_query_stats, only: [:queries, :show_query, :reset_query_stats]
+    before_action :ensure_kill_enabled, only: [:kill, :kill_long_running_queries, :kill_all]
 
     if PgHero.config["override_csp"]
       # note: this does not take into account asset hosts
@@ -23,6 +23,8 @@ module PgHero
       end
     end
 
+    layout "pg_hero/application"
+
     def index
       @title = "Overview"
       @extended = params[:extended]
@@ -76,7 +78,7 @@ module PgHero
         @index_hit_rate = @database.index_hit_rate || 0
         @table_hit_rate = @database.table_hit_rate || 0
         @good_cache_rate = @table_hit_rate >= @database.cache_hit_rate_threshold / 100.0 && @index_hit_rate >= @database.cache_hit_rate_threshold / 100.0
-        @unused_indexes = @database.unused_indexes(max_scans: 0)
+        @unused_indexes = @database.unused_indexes(max_scans: 0, min_size: @database.unused_index_bytes)
       end
 
       @show_migrations = PgHero.show_migrations
@@ -106,6 +108,7 @@ module PgHero
       across = params[:across].to_s.split(",")
       @unused_indexes = @database.unused_indexes(max_scans: 0, across: across)
       @unused_index_names = Set.new(@unused_indexes.map { |r| r[:index] })
+      @unused_indexes = @unused_indexes.select { |r| r[:size_bytes] >= @database.unused_index_bytes }
       @show_migrations = PgHero.show_migrations
       @system_stats_enabled = @database.system_stats_enabled?
       @index_bloat = [] # @database.index_bloat
@@ -116,7 +119,7 @@ module PgHero
       @relation = params[:relation]
       @title = @relation
       relation_space_stats = @database.relation_space_stats(@relation, schema: @schema)
-      @chart_data = [{name: "Value", data: relation_space_stats.map { |r| [r[:captured_at].change(sec: 0), r[:size_bytes].to_i] }, library: chart_library_options}]
+      @chart_data = [{name: "Size", data: relation_space_stats.map { |r| [r[:captured_at].change(sec: 0), r[:size_bytes].to_i] }, library: chart_library_options}]
     end
 
     def index_bloat
@@ -140,6 +143,8 @@ module PgHero
       @sort = %w(average_time calls).include?(params[:sort]) ? params[:sort] : nil
       @min_average_time = params[:min_average_time] ? params[:min_average_time].to_i : nil
       @min_calls = params[:min_calls] ? params[:min_calls].to_i : nil
+      @user = params[:user] ? params[:user].to_s : nil
+      @link_user = !@user
 
       if @historical_query_stats_enabled
         begin
@@ -150,6 +155,13 @@ module PgHero
         end
       end
 
+      @link_options = {sort: @sort}
+      if @historical_query_stats_enabled
+        # use same format as JavaScript
+        @link_options[:start_at] = @start_at.utc.iso8601 if params[:start_at]
+        @link_options[:end_at] = @end_at.utc.iso8601 if params[:end_at]
+      end
+
       @query_stats =
         if @historical_query_stats_enabled && !request.xhr?
           []
@@ -164,6 +176,11 @@ module PgHero
           )
         end
 
+      if @user
+        # filter in Ruby for accurate percent of total time
+        @query_stats = @query_stats.select { |v| v[:user] == @user }
+      end
+
       if !@historical_query_stats_enabled || request.xhr?
         set_suggested_indexes
       else
@@ -178,21 +195,40 @@ module PgHero
     end
 
     def show_query
-      @query_hash = params[:query_hash].to_i
-      @user = params[:user].to_s
-      @title = @query_hash
+      query_hash = params[:query_hash].to_s
+
+      # v needed for ambiguous values
+      hash_format =
+        if params[:v] != "2" && query_hash.size <= 20 && /\A-?\d{1,19}\z/.match?(query_hash)
+          1
+        elsif query_hash.size == 16 && /\A[0-9a-f]{16}\z/.match?(query_hash)
+          2
+        end
+
+      @query_hash =
+        case hash_format
+        when 2
+          # this format uses big endian to match Postgres to_hex
+          [query_hash].pack("H16").unpack1("q>")
+        when 1
+          query_hash.to_i
+        end
+
+      if @query_hash
+        stats = @database.query_stats(historical: true, user: @user, query_hash: @query_hash, start_at: 24.hours.ago).first
+      end
 
-      stats = @database.query_stats(historical: true, query_hash: @query_hash, start_at: 24.hours.ago).find { |qs| qs[:user] == @user }
       if stats
         @query = stats[:query]
-        @explainable_query = stats[:explainable_query]
+        @title = @query.truncate(70)
+        @explainable_query = stats[:query] if @database.send(:explainable?, stats[:query])
 
         if @show_details
-          query_hash_stats = @database.query_hash_stats(@query_hash, user: @user, current: true)
+          query_hash_stats = @database.query_hash_stats(@query_hash, user: @user)
 
-          @chart_data = [{name: "Value", data: query_hash_stats.map { |r| [r[:captured_at].change(sec: 0), (r[:total_minutes] * 60 * 1000).round] }, library: chart_library_options}]
-          @chart2_data = [{name: "Value", data: query_hash_stats.map { |r| [r[:captured_at].change(sec: 0), r[:average_time].round(1)] }, library: chart_library_options}]
-          @chart3_data = [{name: "Value", data: query_hash_stats.map { |r| [r[:captured_at].change(sec: 0), r[:calls]] }, library: chart_library_options}]
+          @chart_data = [{name: "Total Time", data: query_hash_stats.map { |r| [r[:captured_at].change(sec: 0), r[:total_time].round] }, library: chart_library_options}]
+          @chart2_data = [{name: "Average Time", data: query_hash_stats.map { |r| [r[:captured_at].change(sec: 0), r[:average_time].round(1)] }, library: chart_library_options}]
+          @chart3_data = [{name: "Calls", data: query_hash_stats.map { |r| [r[:captured_at].change(sec: 0), r[:calls]] }, library: chart_library_options}]
 
           @origins = query_hash_stats.group_by { |r| r[:origin].to_s }.to_h { |k, v| [k, v.size] }
           @total_count = query_hash_stats.size
@@ -219,10 +255,6 @@ module PgHero
         "1 week" => {duration: 1.week, period: 30.minutes},
         "2 weeks" => {duration: 2.weeks, period: 1.hours}
       }
-      if @database.system_stats_provider == :azure
-        # doesn't support 10, just 5 and 15
-        @periods["1 day"][:period] = 15.minutes
-      end
 
       @duration = (params[:duration] || 1.hour).to_i
       @period = (params[:period] || 60.seconds).to_i
@@ -249,17 +281,6 @@ module PgHero
     def load_stats
       stats =
         case @database.system_stats_provider
-        when :azure
-          if @database.send(:azure_flexible_server?)
-            [
-              {name: "Read IOPS", data: @database.read_iops_stats(**system_params).map { |k, v| [k, v ? v.round : v] }, library: chart_library_options},
-              {name: "Write IOPS", data: @database.write_iops_stats(**system_params).map { |k, v| [k, v ? v.round : v] }, library: chart_library_options}
-            ]
-          else
-            [
-              {name: "IO Consumption", data: @database.azure_stats("io_consumption_percent", **system_params), library: chart_library_options}
-            ]
-          end
         when :gcp
           [
             {name: "Read Ops", data: @database.read_iops_stats(**system_params).map { |k, v| [k, v ? v.round : v] }, library: chart_library_options},
@@ -317,7 +338,7 @@ module PgHero
             return
           end
 
-          @explanation = @database.explain_v2(@query, **explain_options)
+          @explanation = @database.explain(@query, **explain_options)
           @suggested_index = @database.suggested_indexes(queries: [@query]).first if @database.suggested_indexes_enabled?
           @visualize = params[:commit] == "Visualize"
         rescue ActiveRecord::StatementInvalid => e
@@ -357,7 +378,7 @@ module PgHero
       @connections_by_database = group_connections_by_key(connections, :database)
       @connections_by_user = group_connections_by_key(connections, :user)
 
-      if params[:security] && @database.server_version_num >= 90500
+      if params[:security]
         connections.each do |connection|
           connection[:ssl_status] =
             if connection[:ssl]
@@ -419,14 +440,14 @@ module PgHero
       redirect_backward alert: "The database user does not have permission to enable query stats"
     end
 
-    # TODO disable if historical query stats enabled?
     def reset_query_stats
-      success =
-        if @database.server_version_num >= 120000
-          @database.reset_query_stats
-        else
-          @database.reset_instance_query_stats
-        end
+      # also disable when upgrading
+      if @database.historical_query_stats_enabled? || @database.query_stats_table_exists?
+        render_text "Cannot reset when historical query stats are enabled", status: :bad_request
+        return
+      end
+
+      success = @database.reset_query_stats
 
       if success
         redirect_backward notice: "Query stats reset"
@@ -437,7 +458,7 @@ module PgHero
 
     protected
 
-    def redirect_backward(options = {})
+    def redirect_backward(**options)
       redirect_back fallback_location: root_path, **options
     end
 
@@ -462,6 +483,7 @@ module PgHero
       @system_stats_enabled = @database.system_stats_enabled?
       @replica = @database.replica?
       @explain_enabled = PgHero.explain_enabled?
+      @kill_enabled = PgHero.kill_enabled?
     end
 
     def set_suggested_indexes(min_average_time = 0, min_calls = 0)
@@ -495,7 +517,7 @@ module PgHero
 
     def set_show_details
       @historical_query_stats_enabled = @query_stats_enabled && @database.historical_query_stats_enabled?
-      @show_details = @historical_query_stats_enabled && @database.supports_query_hash?
+      @show_details = @historical_query_stats_enabled
     end
 
     def group_connections(connections, keys)
@@ -515,6 +537,12 @@ module PgHero
       end
     end
 
+    def check_server_version
+      if @database.server_version_num < 140000
+        render_text "Requires PostgreSQL 14+", status: :internal_server_error
+      end
+    end
+
     def render_text(message, status:)
       render plain: message, status: status
     end
@@ -525,6 +553,12 @@ module PgHero
       end
     end
 
+    def ensure_kill_enabled
+      unless @kill_enabled
+        render_text "Kill not enabled", status: :bad_request
+      end
+    end
+
     # rescue QueryCanceled for case when
     # statement timeout is less than lock timeout
     def rescue_timeout(default)

data/app/views/layouts/pg_hero/application.html.erb

@@ -7,7 +7,7 @@
     <%= favicon_link_tag "pghero/favicon.png" %>
     <% if defined?(Propshaft::Railtie) && Rails.application.assets.is_a?(Propshaft::Assembly) %>
       <%= 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", nonce: true %>
+      <%= javascript_include_tag "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", nonce: true %>

data/app/views/pg_hero/home/_live_queries_table.html.erb

@@ -35,13 +35,15 @@
           <% unless @database.filter_data %>
             <%= button_to "Explain", explain_path, params: {query: query[:query]}, form: {target: "_blank"}, class: "btn btn-info" %>
           <% end %>
-          <%= button_to "Kill", kill_path(pid: query[:pid]), class: "btn btn-danger" %>
+          <% if @kill_enabled %>
+            <%= button_to "Kill", kill_path(pid: query[:pid]), class: "btn btn-danger" %>
+          <% end %>
         </td>
       </tr>
       <tr>
         <td colspan="4" class="query-row">
           <%= query[:source] %> <span class="text-muted"><%= query[:user] %></span>
-          <pre class="query-pre"><code><%= query[:query] %></code></pre>
+          <pre class="query-pre"><code class="language-pgsql"><%= query[:query] %></code></pre>
         </td>
       </tr>
     <% end %>

data/app/views/pg_hero/home/_queries_table.html.erb

@@ -2,9 +2,9 @@
   <% unless local_assigns[:xhr] %>
     <thead>
       <tr>
-        <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>
+        <th class="width-33"><%= local_assigns[:sort_headers] ? link_to("Total Time", {sort: nil, user: @user}, data: {sort: nil}) : "Total Time" %></th>
+        <th class="width-33"><%= local_assigns[:sort_headers] ? link_to("Average Time", {sort: "average_time", user: @user}, data: {sort: "average_time"}) : "Average Time" %></th>
+        <th class="width-33"><%= local_assigns[:sort_headers] ? link_to("Calls", {sort: "calls", user: @user}, data: {sort: "calls"}) : "Calls" %></th>
       </tr>
     </thead>
   <% end %>
@@ -25,7 +25,7 @@
     <% queries.each do |query| %>
       <tr>
         <td>
-          <%= number_with_delimiter(query[:total_minutes].round) %> min
+          <%= number_with_delimiter((query[:total_time] / 1000 / 60).round) %> min
           <span class="percent">
             <% percent = query[:total_percent] %>
             <% if percent > 1 %>
@@ -45,20 +45,21 @@
 
           <span class="user">
             <% if query[:user] %>
-              <%= query[:user] %>
+              <%= @link_user ? link_to(query[:user], {user: query[:user]}.merge(@link_options)) : query[:user] %>
               <% if @show_details %>
                 &middot;
               <% end %>
             <% end %>
             <% if @show_details && query[:query_hash] %>
-              <%= link_to "details", show_query_path(query[:query_hash], user: query[:user]), target: "_blank" %>
+              <% hex_hash = [query[:query_hash]].pack("q>").unpack1("H16") %>
+              <%= link_to "details", show_query_path(hex_hash, user: query[:user], v: /\A\d{16}\z/.match?(hex_hash) ? 2 : nil), target: "_blank" %>
             <% end %>
           </span>
         </td>
       </tr>
       <tr>
         <td colspan="3" class="query-row">
-          <pre><code class="query-code"><%= query[:query] %></code></pre>
+          <pre><code class="query-code language-pgsql"><%= 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 %>

data/app/views/pg_hero/home/_query_stats_slider.html.erb

@@ -8,6 +8,7 @@
   var sort = <%= pghero_js_value(@sort) %>;
   var minAverageTime = <%= pghero_js_value(@min_average_time) %>;
   var minCalls = <%= pghero_js_value(@min_calls) %>;
+  var user = <%= pghero_js_value(@user) %>;
   var debug = <%= pghero_js_value(@debug) %>;
   var startAt = <%= pghero_js_value(params[:start_at] ? @start_at.to_i * 1000 : nil) %>;
   var endAt = <%= pghero_js_value(@end_at.to_i * 1000) %>;

data/app/views/pg_hero/home/_suggested_index.html.erb

@@ -2,10 +2,10 @@
   <% unless @debug %>
     <div class="show-details">Details</div>
   <% end %>
-  <code><pre class="create-index">CREATE INDEX CONCURRENTLY ON <%= index[:table] %><% if index[:using] %> USING <%= index[:using] %><% end %> (<%= index[:columns].join(", ") %>)</pre></code>
+  <pre class="create-index"><code>CREATE INDEX CONCURRENTLY ON <%= index[:table] %><% if index[:using] %> USING <%= index[:using] %><% end %> (<%= index[:columns].join(", ") %>)</code></pre>
 <% end %>
 <div class="details<%= " hide" unless @debug %>">
-  <code><pre><% if details[:explanation] %><%= details[:explanation] %>
+  <pre><% if details[:explanation] %><%= details[:explanation] %>
 <% end %><% if details[:row_estimates] %>Rows: <%= details[:rows] %>
 <% if details[:row_progression] %>Row progression: <%= details[:row_progression].to_a.join(", ") %>
 <% end %>
@@ -15,5 +15,5 @@ Row estimates
 
 Existing indexes
 <% details[:table_indexes].sort_by { |i| [i[:primary] ? 0 : 1, i[:columns]] }.each do |i3| %>- <%= i3[:columns].join(", ") %><% if i3[:using] != "btree" %> <%= i3[:using].to_s.upcase %><% end %><% if i3[:primary] %> PRIMARY<% elsif i3[:unique] %> UNIQUE<% end %>
-<% end %><% end %></pre></code>
+<% end %><% end %></pre>
 </div>

data/app/views/pg_hero/home/explain.html.erb

@@ -15,8 +15,9 @@
   <% if @explanation %>
     <% if @visualize %>
       <p>Paste the output below into the <%= link_to "explain visualizer", PgHero.visualize_url, target: "_blank" %></p>
+      <button id="copy" class="btn btn-info hide">Copy</button>
     <% end %>
-    <pre><code><%= @explanation %></code></pre>
+    <pre><code id="explanation"><%= @explanation %></code></pre>
     <% unless @visualize %>
       <p><%= link_to "See how to interpret this", "https://www.postgresql.org/docs/current/static/using-explain.html", target: "_blank" %></p>
     <% end %>

data/app/views/pg_hero/home/index.html.erb

@@ -170,7 +170,7 @@
     <h1>Inactive Replication Slots</h1>
     <p>Inactive replication slots can cause a lot of disk space to be consumed.</p>
     <p>For each, run:</p>
-    <pre><code>SELECT pg_drop_replication_slot('slot_name');</code></pre>
+    <pre><code class="language-pgsql">SELECT pg_drop_replication_slot('slot_name');</code></pre>
     <table class="table">
       <thead>
         <tr>
@@ -190,12 +190,14 @@
 
 <% if @long_running_queries.any? %>
   <div class="content">
-    <%= button_to "Kill All", kill_long_running_queries_path, class: "btn btn-danger", style: "float: right;" %>
+    <% if @kill_enabled %>
+      <%= button_to "Kill All", kill_long_running_queries_path, class: "btn btn-danger push-right" %>
+    <% end %>
     <h1>Long Running Queries</h1>
 
     <p>We recommend setting a statement timeout on all non-superusers with:</p>
 
-    <pre><code>ALTER ROLE &lt;user&gt; SET statement_timeout TO '60s';</code></pre>
+    <pre><code class="language-pgsql">ALTER ROLE &lt;user&gt; SET statement_timeout TO '60s';</code></pre>
 
     <%= render partial: "live_queries_table", locals: {queries: @long_running_queries, vacuum_progress: {}} %>
   </div>
@@ -246,7 +248,7 @@
     <p>Try <%= link_to "tuning autovacuum", "https://blog.2ndquadrant.com/autovacuum-tuning-basics/", target: "_blank" %> - specifically autovacuum_vacuum_cost_limit.</p>
 
     <p>If that doesn’t work, for each table, run:</p>
-    <pre><code>VACUUM FREEZE VERBOSE table;</code></pre>
+    <pre><code class="language-pgsql">VACUUM FREEZE VERBOSE table;</code></pre>
     <table class="table">
       <thead>
         <tr>
@@ -333,7 +335,7 @@
           </tr>
           <tr>
             <td class="query-row">
-              <pre><code>DROP INDEX CONCURRENTLY <%= pghero_pretty_ident(index[:name], schema: index[:schema]) %>;
+              <pre><code class="language-pgsql">DROP INDEX CONCURRENTLY <%= pghero_pretty_ident(index[:name], schema: index[:schema]) %>;
 <%= index[:definition].sub("CREATE INDEX ", "CREATE INDEX CONCURRENTLY ") %>;</code></pre>
             </td>
           </tr>
@@ -367,7 +369,7 @@
           </tr>
           <tr>
             <td class="query-row">
-              <pre><code>ALTER TABLE <%= pghero_pretty_ident(constraint[:table], schema: constraint[:schema]) %> VALIDATE CONSTRAINT <%= pghero_pretty_ident(constraint[:name]) %>;</code></pre>
+              <pre><code class="language-pgsql">ALTER TABLE <%= pghero_pretty_ident(constraint[:table], schema: constraint[:schema]) %> VALIDATE CONSTRAINT <%= pghero_pretty_ident(constraint[:name]) %>;</code></pre>
             </td>
           </tr>
         <% end %>
@@ -389,10 +391,9 @@
     </p>
 
     <div class="migration">
-      <pre>rails generate migration remove_unneeded_indexes</pre>
+      <pre><code>rails generate migration remove_unneeded_indexes</code></pre>
       <p>And paste</p>
-      <pre><% @duplicate_indexes.each do |query| %>
-<%= pghero_remove_index(query[:unneeded_index]) %><% end %></pre>
+      <pre><code><%= @duplicate_indexes.map { |q| pghero_remove_index(q[:unneeded_index]) }.join("\n") %></code></pre>
     </div>
 
     <table class="table duplicate-indexes">
@@ -431,15 +432,15 @@
     </p>
 
     <div class="migration">
-      <pre>rails generate migration add_suggested_indexes</pre>
+      <pre><code>rails generate migration add_suggested_indexes</code></pre>
       <p>And paste</p>
-      <pre>commit_db_transaction
+      <pre><code>commit_db_transaction
 <% @suggested_indexes.each do |index| %>
 <% if index[:using] && index[:using] != "btree" %>
 add_index <%= index[:table].to_sym.inspect %>, <%= index[:columns].first.inspect %>, using: <%= index[:using].inspect %>, algorithm: :concurrently
 <% else %>
 add_index <%= index[:table].to_sym.inspect %>, [<%= index[:columns].map(&:to_sym).map(&:inspect).join(", ") %>], algorithm: :concurrently<% end %>
-<% end %></pre>
+<% end %></code></pre>
     </div>
 
     <% @suggested_indexes.each_with_index do |index, i| %>
@@ -461,9 +462,8 @@ add_index <%= index[:table].to_sym.inspect %>, [<%= index[:columns].map(&:to_sym
         <%= button_to "Enable", enable_query_stats_path, class: "btn btn-info" %>
       </p>
     <% else %>
-      <p>Make them available by adding the following lines to <code>postgresql.conf</code>:</p>
-      <pre>shared_preload_libraries = 'pg_stat_statements'
-pg_stat_statements.track = all</pre>
+      <p>Make them available by adding the following line to <code>postgresql.conf</code>:</p>
+      <pre><code>shared_preload_libraries = 'pg_stat_statements'</code></pre>
       <p>Restart the server for the changes to take effect.</p>
     <% end %>
   </div>
@@ -493,10 +493,9 @@ pg_stat_statements.track = all</pre>
     </p>
 
     <div class="migration">
-      <pre>rails generate migration remove_unused_indexes</pre>
+      <pre><code>rails generate migration remove_unused_indexes</code></pre>
       <p>And paste</p>
-      <pre><% @unused_indexes.each do |query| %>
-<%= pghero_remove_index(query)%><% end %></pre>
+      <pre><code><%= @unused_indexes.map { |q| pghero_remove_index(q) }.join("\n") %></code></pre>
     </div>
 
     <table class="table">