pghero 2.8.3 → 3.3.3

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

@@ -187,7 +187,7 @@ hr {
 }
 
 #slider-container {
-  padding: 6px 140px 20px 140px;
+  padding: 6px 8px 14px 8px;
 }
 
 .queries-table th a, .space-table th a {
@@ -195,7 +195,7 @@ hr {
 }
 
 #slider {
-  margin-bottom: 20px;
+  margin: 0px 14px 18px 14px;
 }
 
 #range-start {
@@ -485,6 +485,12 @@ body {
   color: #999;
 }
 
+.pie-chart {
+  height: 260px;
+  line-height: 260px;
+  margin-bottom: 20px;
+}
+
 .unused-index {
   color: #f0ad4e;
   font-size: 11px;

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

@@ -1,4 +1,3 @@
-/*! nouislider - 14.6.1 - 8/17/2020 */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
@@ -39,20 +38,14 @@
   z-index: 1;
   top: 0;
   right: 0;
+  height: 100%;
+  width: 100%;
   -ms-transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
   -webkit-transform-style: preserve-3d;
   transform-origin: 0 0;
   transform-style: flat;
 }
-.noUi-connect {
-  height: 100%;
-  width: 100%;
-}
-.noUi-origin {
-  height: 10%;
-  width: 10%;
-}
 /* Offset direction
  */
 .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
@@ -63,6 +56,7 @@
  * connect elements.
  */
 .noUi-vertical .noUi-origin {
+  top: -100%;
   width: 0;
 }
 .noUi-horizontal .noUi-origin {
@@ -103,7 +97,7 @@
   width: 28px;
   height: 34px;
   right: -6px;
-  top: -17px;
+  bottom: -17px;
 }
 .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
   left: -17px;

data/app/controllers/pg_hero/home_controller.rb

@@ -46,11 +46,18 @@ module PgHero
 
       @transaction_id_danger = @database.transaction_id_danger(threshold: 1500000000)
 
-      @readable_sequences, @unreadable_sequences = @database.sequences.partition { |s| s[:readable] }
+      sequences, @sequences_timeout = rescue_timeout([]) { @database.sequences }
+      @readable_sequences, @unreadable_sequences = sequences.partition { |s| s[:readable] }
 
       @sequence_danger = @database.sequence_danger(threshold: (params[:sequence_threshold] || 0.9).to_f, sequences: @readable_sequences)
 
-      @indexes = @database.indexes
+      @indexes, @indexes_timeout =
+        if @sequences_timeout
+          # skip indexes for faster loading
+          [[], true]
+        else
+          rescue_timeout([]) { @database.indexes }
+        end
       @invalid_indexes = @database.invalid_indexes(indexes: @indexes)
       @invalid_constraints = @database.invalid_constraints
       @duplicate_indexes = @database.duplicate_indexes(indexes: @indexes)
@@ -80,11 +87,11 @@ module PgHero
       @days = (params[:days] || 7).to_i
       @database_size = @database.database_size
       @only_tables = params[:tables].present?
-      @relation_sizes = @only_tables ? @database.table_sizes : @database.relation_sizes
+      @relation_sizes, @sizes_timeout = rescue_timeout([]) { @only_tables ? @database.table_sizes : @database.relation_sizes }
       @space_stats_enabled = @database.space_stats_enabled? && !@only_tables
       if @space_stats_enabled
         space_growth = @database.space_growth(days: @days, relation_sizes: @relation_sizes)
-        @growth_bytes_by_relation = Hash[ space_growth.map { |r| [[r[:schema], r[:relation]], r[:growth_bytes]] } ]
+        @growth_bytes_by_relation = space_growth.to_h { |r| [[r[:schema], r[:relation]], r[:growth_bytes]] }
         if params[:sort] == "growth"
           @relation_sizes.sort_by! { |r| s = @growth_bytes_by_relation[[r[:schema], r[:relation]]]; [s ? 0 : 1, -s.to_i, r[:schema], r[:relation]] }
         end
@@ -157,8 +164,9 @@ module PgHero
           )
         end
 
-      @indexes = @database.indexes
-      set_suggested_indexes
+      if !@historical_query_stats_enabled || request.xhr?
+        set_suggested_indexes
+      end
 
       # fix back button issue with caching
       response.headers["Cache-Control"] = "must-revalidate, no-store, no-cache, private"
@@ -184,7 +192,7 @@ module PgHero
           @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}]
 
-          @origins = Hash[query_hash_stats.group_by { |r| r[:origin].to_s }.map { |k, v| [k, v.size] }]
+          @origins = query_hash_stats.group_by { |r| r[:origin].to_s }.to_h { |k, v| [k, v.size] }
           @total_count = query_hash_stats.size
         end
 
@@ -192,11 +200,12 @@ module PgHero
         @tables.sort!
 
         if @tables.any?
-          @row_counts = Hash[@database.table_stats(table: @tables).map { |i| [i[:table], i[:estimated_rows]] }]
-          @indexes_by_table = @database.indexes.group_by { |i| i[:table] }
+          @row_counts = @database.table_stats(table: @tables).to_h { |i| [i[:table], i[:estimated_rows]] }
+          indexes, @indexes_timeout = rescue_timeout([]) { @database.indexes }
+          @indexes_by_table = indexes.group_by { |i| i[:table] }
         end
       else
-        render_text "Unknown query"
+        render_text "Unknown query", status: :not_found
       end
     end
 
@@ -217,9 +226,9 @@ module PgHero
       @period = (params[:period] || 60.seconds).to_i
 
       if @duration / @period > 1440
-        render_text "Too many data points"
+        render_text "Too many data points", status: :bad_request
       elsif @period % 60 != 0
-        render_text "Period must be a multiple of 60"
+        render_text "Period must be a multiple of 60", status: :bad_request
       end
     end
 
@@ -239,9 +248,16 @@ module PgHero
       stats =
         case @database.system_stats_provider
         when :azure
-          [
-            {name: "IO Consumption", data: @database.azure_stats("io_consumption_percent", **system_params), library: chart_library_options}
-          ]
+          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},
@@ -263,30 +279,57 @@ module PgHero
     end
 
     def explain
+      unless @explain_enabled
+        render_text "Explain not enabled", status: :bad_request
+        return
+      end
+
       @title = "Explain"
       @query = params[:query]
+      @explain_analyze_enabled = PgHero.explain_mode == "analyze"
+
       # TODO use get + token instead of post so users can share links
       # need to prevent CSRF and DoS
-      if request.post? && @query
+      if request.post? && @query.present?
         begin
-          prefix =
+          explain_options =
             case params[:commit]
             when "Analyze"
-              "ANALYZE "
+              {analyze: true}
             when "Visualize"
-              "(ANALYZE, COSTS, VERBOSE, BUFFERS, FORMAT JSON) "
+              if @explain_analyze_enabled
+                {analyze: true, costs: true, verbose: true, buffers: true, format: "json"}
+              else
+                {costs: true, verbose: true, format: "json"}
+              end
             else
-              ""
+              {}
             end
-          @explanation = @database.explain("#{prefix}#{@query}")
+
+          if explain_options[:analyze] && !@explain_analyze_enabled
+            render_text "Explain analyze not enabled", status: :bad_request
+            return
+          end
+
+          @explanation = @database.explain_v2(@query, **explain_options)
           @suggested_index = @database.suggested_indexes(queries: [@query]).first if @database.suggested_indexes_enabled?
           @visualize = params[:commit] == "Visualize"
         rescue ActiveRecord::StatementInvalid => e
-          @error = e.message
-
-          if @error.include?("bind message supplies 0 parameters")
-            @error = "Can't explain queries with bind parameters"
-          end
+          message = e.message
+          @error =
+            if message == "Unsafe statement"
+              "Unsafe statement"
+            elsif message.start_with?("PG::ProtocolViolation: ERROR:  bind message supplies 0 parameters")
+              "Can't explain queries with bind parameters"
+            elsif message.start_with?("PG::SyntaxError")
+              "Syntax error with query"
+            elsif message.start_with?("PG::QueryCanceled")
+              "Query timed out"
+            else
+              # default to a generic message
+              # since data can be extracted through the Postgres error message
+              "Error explaining query"
+            end
         end
       end
     end
@@ -368,11 +411,20 @@ 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
-      @database.reset_query_stats
-      redirect_backward notice: "Query stats reset"
-    rescue ActiveRecord::StatementInvalid
-      redirect_backward alert: "The database user does not have permission to reset query stats"
+      success =
+        if @database.server_version_num >= 120000
+          @database.reset_query_stats
+        else
+          @database.reset_instance_query_stats
+        end
+
+      if success
+        redirect_backward notice: "Query stats reset"
+      else
+        redirect_backward alert: "The database user does not have permission to reset query stats"
+      end
     end
 
     protected
@@ -401,17 +453,22 @@ module PgHero
       @query_stats_enabled = @database.query_stats_enabled?
       @system_stats_enabled = @database.system_stats_enabled?
       @replica = @database.replica?
+      @explain_enabled = PgHero.explain_enabled?
     end
 
     def set_suggested_indexes(min_average_time = 0, min_calls = 0)
+      if @database.suggested_indexes_enabled? && !@indexes
+        @indexes, @indexes_timeout = rescue_timeout([]) { @database.indexes }
+      end
+
       @suggested_indexes_by_query =
-        if @database.suggested_indexes_enabled?
-          @database.suggested_indexes_by_query(query_stats: @query_stats.select { |qs| qs[:average_time] >= min_average_time && qs[:calls] >= min_calls })
+        if !@indexes_timeout && @database.suggested_indexes_enabled?
+          @database.suggested_indexes_by_query(query_stats: @query_stats.select { |qs| qs[:average_time] >= min_average_time && qs[:calls] >= min_calls }, indexes: @indexes)
         else
           {}
         end
 
-      @suggested_indexes = @database.suggested_indexes(suggested_indexes_by_query: @suggested_indexes_by_query, indexes: @indexes)
+      @suggested_indexes = @database.suggested_indexes(suggested_indexes_by_query: @suggested_indexes_by_query)
       @query_stats_by_query = @query_stats.index_by { |q| q[:query] }
       @debug = params[:debug].present?
     end
@@ -445,12 +502,13 @@ module PgHero
     end
 
     def check_api
-      render_text "No support for Rails API. See https://github.com/pghero/pghero for a standalone app." if Rails.application.config.try(:api_only)
+      if Rails.application.config.try(:api_only)
+        render_text "No support for Rails API. See https://github.com/pghero/pghero for a standalone app.", status:  :internal_server_error
+      end
     end
 
-    # TODO return error status code
-    def render_text(message)
-      render plain: message
+    def render_text(message, status:)
+      render plain: message, status: status
     end
 
     def ensure_query_stats
@@ -458,5 +516,13 @@ module PgHero
         redirect_to root_path, alert: "Query stats not enabled"
       end
     end
+
+    # rescue QueryCanceled for case when
+    # statement timeout is less than lock timeout
+    def rescue_timeout(default)
+      [yield, false]
+    rescue ActiveRecord::LockWaitTimeout, ActiveRecord::QueryCanceled
+      [default, true]
+    end
   end
 end

data/app/helpers/pg_hero/home_helper.rb

@@ -12,8 +12,8 @@ module PgHero
       end
     end
 
-    def pghero_js_var(name, value)
-      "var #{name} = #{json_escape(value.to_json(root: false))};".html_safe
+    def pghero_js_value(value)
+      json_escape(value.to_json(root: false)).html_safe
     end
 
     def pghero_remove_index(query)

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

@@ -7,7 +7,7 @@
     <%= 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.pack", "pghero/application" %>
+      <%= javascript_include_tag "pghero/jquery", "pghero/nouislider", "pghero/Chart.bundle", "pghero/chartkick", "pghero/highlight.min", "pghero/application" %>
     <% else %>
       <%= stylesheet_link_tag "pghero/application" %>
       <%= javascript_include_tag "pghero/application" %>
@@ -48,7 +48,9 @@
             <% unless @database.replica? %>
               <li class="<%= controller.action_name == "maintenance" ? "active" : "" %>"><%= link_to "Maintenance", maintenance_path %></li>
             <% end %>
-            <li class="<%= controller.action_name == "explain" ? "active" : "" %>"><%= link_to "Explain", explain_path %></li>
+            <% if @explain_enabled %>
+              <li class="<%= controller.action_name == "explain" ? "active" : "" %>"><%= link_to "Explain", explain_path %></li>
+            <% end %>
             <li class="<%= controller.action_name == "tune" ? "active" : "" %>"><%= link_to "Tune", tune_path %></li>
           </ul>
 

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

@@ -5,12 +5,12 @@
 </div>
 
 <script>
-  <%= pghero_js_var("sort", @sort) %>
-  <%= pghero_js_var("minAverageTime", @min_average_time) %>
-  <%= pghero_js_var("minCalls", @min_calls) %>
-  <%= pghero_js_var("debug", @debug) %>
-  <%= pghero_js_var("startAt", params[:start_at] ? @start_at.to_i * 1000 : nil) %>
-  <%= pghero_js_var("endAt", @end_at.to_i * 1000) %>
+  var sort = <%= pghero_js_value(@sort) %>;
+  var minAverageTime = <%= pghero_js_value(@min_average_time) %>;
+  var minCalls = <%= pghero_js_value(@min_calls) %>;
+  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) %>;
 
   initSlider();
 </script>

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

@@ -6,24 +6,24 @@
   <% if @total_connections > 0 %>
     <h3>By Database</h3>
 
-    <div id="chart-1" class="chart" style="height: 260px; line-height: 260px; margin-bottom: 20px;">Loading...</div>
+    <div id="chart-1" class="chart pie-chart">Loading...</div>
     <script>
-      new Chartkick.PieChart("chart-1", <%= json_escape(@connections_by_database.to_json).html_safe %>);
+      new Chartkick.PieChart("chart-1", <%= pghero_js_value(@connections_by_database) %>);
     </script>
 
     <h3>By User</h3>
 
-    <div id="chart-2" class="chart" style="height: 260px; line-height: 260px; margin-bottom: 20px;">Loading...</div>
+    <div id="chart-2" class="chart pie-chart">Loading...</div>
     <script>
-      new Chartkick.PieChart("chart-2", <%= json_escape(@connections_by_user.to_json).html_safe %>);
+      new Chartkick.PieChart("chart-2", <%= pghero_js_value(@connections_by_user) %>);
     </script>
 
     <% if @connections_by_ssl_status %>
       <h3>By Security</h3>
 
-      <div id="chart-3" class="chart" style="height: 260px; line-height: 260px; margin-bottom: 20px;">Loading...</div>
+      <div id="chart-3" class="chart pie-chart">Loading...</div>
       <script>
-        new Chartkick.PieChart("chart-3", <%= json_escape(@connections_by_ssl_status.to_json).html_safe %>);
+        new Chartkick.PieChart("chart-3", <%= pghero_js_value(@connections_by_ssl_status) %>);
       </script>
     <% end %>
 

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

@@ -5,14 +5,16 @@
     <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 "Analyze", class: "btn btn-danger", style: "margin-right: 10px;" %>
+      <% if @explain_analyze_enabled %>
+        <%= submit_tag "Analyze", class: "btn btn-danger", style: "margin-right: 10px;" %>
+      <% end %>
       <%= submit_tag "Visualize", class: "btn btn-danger" %>
     </p>
   <% end %>
 
   <% if @explanation %>
     <% if @visualize %>
-      <p>Paste the output below into the <%= link_to "Postgres Explain Visualizer", "https://tatiyants.com/pev/#/plans/new", target: "_blank" %></p>
+      <p>Paste the output below into the <%= link_to "explain visualizer", PgHero.visualize_url, target: "_blank" %></p>
     <% end %>
     <pre><code><%= @explanation %></code></pre>
     <% unless @visualize %>

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

@@ -55,9 +55,11 @@
       Vacuuming healthy
     <% end %>
   </div>
-  <div class="alert alert-<%= @sequence_danger && @sequence_danger.empty? ? "success" : "warning" %>">
+  <div class="alert alert-<%= @sequence_danger && @sequence_danger.empty? && !@sequences_timeout ? "success" : "warning" %>">
     <% if @sequence_danger.any? %>
       <%= pluralize(@sequence_danger.size, "column") %> approaching overflow
+    <% elsif @sequences_timeout %>
+      Sequences not available (system catalog locked)
     <% else %>
       No columns near integer overflow
     <% end %>

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

@@ -1,9 +1,11 @@
 <div class="content">
-  <% if @query_stats_enabled %>
+  <% if @query_stats_enabled && !@historical_query_stats_enabled %>
     <%= button_to "Reset", reset_query_stats_path, class: "btn btn-danger", style: "float: right;" %>
   <% end %>
 
-  <h1 style="float: left;">Queries</h1>
+  <% if !@historical_query_stats_enabled %>
+    <h1 style="float: left;">Queries</h1>
+  <% end %>
 
   <% if @historical_query_stats_enabled %>
     <%= render partial: "query_stats_slider" %>

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

@@ -9,6 +9,6 @@
   <h1>Size</h1>
   <div id="chart-1" class="chart" style="margin-bottom: 20px;">Loading...</div>
   <script>
-    new Chartkick.LineChart("chart-1", <%= json_escape(@chart_data.to_json).html_safe %>, {colors: ["#5bc0de"], legend: false, min: null, bytes: true, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
+    new Chartkick.LineChart("chart-1", <%= pghero_js_value(@chart_data) %>, {colors: ["#5bc0de"], legend: false, min: null, bytes: true, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
   </script>
 </div>

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

@@ -4,7 +4,7 @@
     highlightQueries()
   </script>
 
-  <% if @explainable_query %>
+  <% if @explain_enabled && @explainable_query %>
     <p>
       <%= button_to "Explain", explain_path, params: {query: @explainable_query}, form: {target: "_blank"}, class: "btn btn-info" %>
     </p>
@@ -49,19 +49,19 @@
     <h1>Total Time <small>ms</small></h1>
     <div id="chart-1" class="chart" style="margin-bottom: 20px;">Loading...</div>
     <script>
-      new Chartkick.LineChart("chart-1", <%= json_escape(@chart_data.to_json).html_safe %>, {colors: ["#5bc0de"], legend: false, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
+      new Chartkick.LineChart("chart-1", <%= pghero_js_value(@chart_data) %>, {colors: ["#5bc0de"], legend: false, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
     </script>
 
     <h1>Average Time <small>ms</small></h1>
     <div id="chart-2" class="chart" style="margin-bottom: 20px;">Loading...</div>
     <script>
-      new Chartkick.LineChart("chart-2", <%= json_escape(@chart2_data.to_json).html_safe %>, {colors: ["#5bc0de"], legend: false, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
+      new Chartkick.LineChart("chart-2", <%= pghero_js_value(@chart2_data) %>, {colors: ["#5bc0de"], legend: false, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
     </script>
 
     <h1>Calls</h1>
     <div id="chart-3" class="chart" style="margin-bottom: 20px;">Loading...</div>
     <script>
-      new Chartkick.LineChart("chart-3", <%= json_escape(@chart3_data.to_json).html_safe %>, {colors: ["#5bc0de"], legend: false, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
+      new Chartkick.LineChart("chart-3", <%= pghero_js_value(@chart3_data) %>, {colors: ["#5bc0de"], legend: false, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
     </script>
   <% else %>
     <p>
@@ -88,15 +88,19 @@
             <td><%= table %></td>
             <td><%= @row_counts[table] %></td>
             <td>
-              <ul>
-                <% @indexes_by_table[table].to_a.sort_by { |i| [i[:primary] ? 0 : 1, i[:columns]] }.each do |i3| %>
-                  <li>
-                    <%= i3[:columns].join(", ") %><% if i3[:using] != "btree" %>
-                    <%= i3[:using].to_s.upcase %><% end %>
-                    <% if i3[:primary] %> PRIMARY<% elsif i3[:unique] %> UNIQUE<% end %>
-                  </li>
-                <% end %>
-              </ul>
+              <% if @indexes_timeout %>
+                Not available
+              <% else %>
+                <ul>
+                  <% @indexes_by_table[table].to_a.sort_by { |i| [i[:primary] ? 0 : 1, i[:columns]] }.each do |i3| %>
+                    <li>
+                      <%= i3[:columns].join(", ") %><% if i3[:using] != "btree" %>
+                      <%= i3[:using].to_s.upcase %><% end %>
+                      <% if i3[:primary] %> PRIMARY<% elsif i3[:unique] %> UNIQUE<% end %>
+                    </li>
+                  <% end %>
+                </ul>
+              <% end %>
             </td>
           </tr>
         <% end %>

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

@@ -6,7 +6,7 @@
   <% if @system_stats_enabled %>
     <div id="chart-1" class="chart" style="margin-bottom: 20px;">Loading...</div>
     <script>
-      new Chartkick.LineChart("chart-1", <%= json_escape(free_space_stats_path.to_json).html_safe %>, {colors: ["#5bc0de"], bytes: true, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
+      new Chartkick.LineChart("chart-1", <%= pghero_js_value(free_space_stats_path) %>, {colors: ["#5bc0de"], bytes: true, library: {plugins: {tooltip: {intersect: false, mode: "index"}}}})
     </script>
   <% end %>
 
@@ -37,47 +37,51 @@
     </div>
   <% end %>
 
-  <table class="table space-table">
-    <thead>
-      <tr>
-        <th><%= link_to (@only_tables ? "Table" : "Relation"), @header_options.merge(sort: "name") %></th>
-        <th style="width: 15%;"><%= link_to "Size", @header_options %></th>
-        <% if @space_stats_enabled %>
-          <th style="width: 15%;"><%= link_to "#{@days}d Growth", @header_options.merge(sort: "growth") %></th>
-        <% end %>
-      </tr>
-    </thead>
-    <tbody>
-      <% @relation_sizes.each do |query| %>
+  <% if @sizes_timeout %>
+    <p>Breakdown not available (system catalog locked)</p>
+  <% else %>
+    <table class="table space-table">
+      <thead>
         <tr>
-          <td style="<%= query[:type] == "index" ? "font-style: italic;" : "" %>">
-            <span style="word-break: break-all;">
-              <% name = query[:relation] || query[:table] %>
-              <% if @space_stats_enabled %>
-                <%= link_to name, relation_space_path(name, schema: query[:schema]), target: "_blank", style: "color: inherit;" %>
-              <% else %>
-                <%= name %>
-              <% end %>
-            </span>
-            <% if query[:schema] != "public" %>
-              <span class="text-muted"><%= query[:schema] %></span>
-            <% end %>
-            <% if @unused_index_names.include?(query[:relation]) %>
-              <span class="unused-index">UNUSED</span>
-            <% end %>
-          </td>
-          <td><%= query[:size] %></td>
+          <th><%= link_to (@only_tables ? "Table" : "Relation"), @header_options.merge(sort: "name") %></th>
+          <th style="width: 15%;"><%= link_to "Size", @header_options %></th>
           <% if @space_stats_enabled %>
-            <td>
-              <% if @growth_bytes_by_relation[[query[:schema], query[:relation]]] %>
-                <% if @growth_bytes_by_relation[[query[:schema], query[:relation]]] < 0 %>-<% end %><%= PgHero.pretty_size(@growth_bytes_by_relation[[query[:schema], query[:relation]]].abs) %>
-              <% else %>
-                <span class="text-muted">Unknown</span>
-              <% end %>
-            </td>
+            <th style="width: 15%;"><%= link_to "#{@days}d Growth", @header_options.merge(sort: "growth") %></th>
           <% end %>
         </tr>
-      <% end %>
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        <% @relation_sizes.each do |query| %>
+          <tr>
+            <td style="<%= query[:type] == "index" ? "font-style: italic;" : "" %>">
+              <span style="word-break: break-all;">
+                <% name = query[:relation] || query[:table] %>
+                <% if @space_stats_enabled %>
+                  <%= link_to name, relation_space_path(name, schema: query[:schema]), target: "_blank", style: "color: inherit;" %>
+                <% else %>
+                  <%= name %>
+                <% end %>
+              </span>
+              <% if query[:schema] != "public" %>
+                <span class="text-muted"><%= query[:schema] %></span>
+              <% end %>
+              <% if @unused_index_names.include?(query[:relation]) %>
+                <span class="unused-index">UNUSED</span>
+              <% end %>
+            </td>
+            <td><%= query[:size] %></td>
+            <% if @space_stats_enabled %>
+              <td>
+                <% if @growth_bytes_by_relation[[query[:schema], query[:relation]]] %>
+                  <% if @growth_bytes_by_relation[[query[:schema], query[:relation]]] < 0 %>-<% end %><%= PgHero.pretty_size(@growth_bytes_by_relation[[query[:schema], query[:relation]]].abs) %>
+                <% else %>
+                  <span class="text-muted">Unknown</span>
+                <% end %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
 </div>