pgbouncerhero 3.0.0 → 3.2.0

data/app/javascript/pgbouncerhero/controllers/data_table_controller.js

@@ -0,0 +1,183 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["columnMenu", "empty", "query", "row", "status"]
+  static values = { defaultHidden: Array }
+
+  connect() {
+    this.columns = Array.from(this.element.querySelectorAll("thead th"))
+    this.columns.forEach(column => { column.dataset.columnLabel ||= column.textContent.trim() })
+    this.collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" })
+    this.columnPreferences = this.loadColumnPreferences()
+    this.buildColumnMenu()
+    this.buildSortControls()
+    this.filter()
+  }
+
+  filter() {
+    const query = this.queryTarget.value.trim().toLowerCase()
+    let visible = 0
+
+    this.rowTargets.forEach(row => {
+      const matches = query.length === 0 || row.textContent.toLowerCase().includes(query)
+      row.hidden = !matches
+      if (matches) visible += 1
+    })
+
+    this.emptyTarget.hidden = visible !== 0
+    this.statusTarget.textContent = query.length === 0 ? `${visible} rows` : `${visible} of ${this.rowTargets.length} rows`
+  }
+
+  toggleColumn(event) {
+    const index = Number(event.currentTarget.dataset.columnIndex)
+    const key = event.currentTarget.dataset.columnKey
+    const visible = event.currentTarget.checked
+
+    this.setColumnVisibility(index, visible)
+    this.columnPreferences[key] = visible
+    this.saveColumnPreferences()
+  }
+
+  resetColumns() {
+    this.columnPreferences = {}
+
+    this.columnMenuTarget.querySelectorAll("input[type='checkbox']").forEach(checkbox => {
+      const index = Number(checkbox.dataset.columnIndex)
+      const visible = !this.defaultHiddenValue.includes(checkbox.dataset.columnKey)
+
+      checkbox.checked = visible
+      this.setColumnVisibility(index, visible)
+    })
+
+    try {
+      window.localStorage.removeItem(this.storageKey)
+    } catch {
+      // The table remains usable when storage is disabled.
+    }
+  }
+
+  sort(event) {
+    const index = Number(event.currentTarget.dataset.columnIndex)
+    const direction = this.sortIndex === index && this.sortDirection === "ascending" ? "descending" : "ascending"
+    const rows = this.rowTargets.map((row, originalIndex) => ({ row, originalIndex }))
+
+    rows.sort((left, right) => {
+      const leftValue = left.row.children[index]?.textContent.trim() || ""
+      const rightValue = right.row.children[index]?.textContent.trim() || ""
+      const comparison = this.compareValues(leftValue, rightValue, direction)
+
+      return comparison || left.originalIndex - right.originalIndex
+    })
+
+    const body = this.element.querySelector("tbody")
+    rows.forEach(({ row }) => body.append(row))
+    this.sortIndex = index
+    this.sortDirection = direction
+    this.updateSortControls(index, direction)
+  }
+
+  buildColumnMenu() {
+    this.columnMenuTarget.replaceChildren()
+
+    this.columns.forEach((column, index) => {
+      if (column.dataset.columnLocked === "true") return
+
+      const key = column.dataset.columnKey
+      const savedVisibility = this.columnPreferences[key]
+      const checked = savedVisibility === undefined ? !this.defaultHiddenValue.includes(key) : savedVisibility
+      const label = document.createElement("label")
+      label.className = "flex items-center gap-2 whitespace-nowrap"
+
+      const checkbox = document.createElement("input")
+      checkbox.type = "checkbox"
+      checkbox.checked = checked
+      checkbox.dataset.columnIndex = index
+      checkbox.dataset.columnKey = key
+      checkbox.dataset.action = "data-table#toggleColumn"
+
+      const text = document.createElement("span")
+      text.textContent = column.dataset.columnLabel
+
+      label.append(checkbox, text)
+      this.columnMenuTarget.append(label)
+
+      this.setColumnVisibility(index, checked)
+    })
+  }
+
+  buildSortControls() {
+    this.sortIndicators = new Map()
+
+    this.columns.forEach((column, index) => {
+      if (column.dataset.columnLocked === "true") return
+
+      const label = column.dataset.columnLabel
+      const button = document.createElement("button")
+      button.type = "button"
+      button.className = "inline-flex items-center gap-1 text-left text-inherit hover:text-gray-900"
+      button.dataset.columnIndex = index
+      button.dataset.action = "data-table#sort"
+      button.setAttribute("aria-label", `Sort by ${label} ascending`)
+
+      const text = document.createElement("span")
+      text.textContent = label
+
+      const indicator = document.createElement("span")
+      indicator.className = "text-gray-400"
+      indicator.setAttribute("aria-hidden", "true")
+      indicator.textContent = "↕"
+
+      button.append(text, indicator)
+      column.replaceChildren(button)
+      column.setAttribute("aria-sort", "none")
+      this.sortIndicators.set(index, { button, column, indicator, label })
+    })
+  }
+
+  updateSortControls(activeIndex, direction) {
+    this.sortIndicators.forEach(({ button, column, indicator, label }, index) => {
+      const active = index === activeIndex
+      const nextDirection = active && direction === "ascending" ? "descending" : "ascending"
+
+      column.setAttribute("aria-sort", active ? direction : "none")
+      indicator.textContent = active ? (direction === "ascending" ? "↑" : "↓") : "↕"
+      button.setAttribute("aria-label", `Sort by ${label} ${nextDirection}`)
+    })
+  }
+
+  compareValues(left, right, direction) {
+    if (left.length === 0 && right.length > 0) return 1
+    if (right.length === 0 && left.length > 0) return -1
+
+    const comparison = this.collator.compare(left, right)
+    return direction === "ascending" ? comparison : -comparison
+  }
+
+  setColumnVisibility(index, visible) {
+    this.element.querySelectorAll("tr").forEach(row => {
+      const cell = row.children[index]
+      if (cell) cell.hidden = !visible
+    })
+  }
+
+  loadColumnPreferences() {
+    try {
+      const preferences = JSON.parse(window.localStorage.getItem(this.storageKey))
+      return preferences && typeof preferences === "object" && !Array.isArray(preferences) ? preferences : {}
+    } catch {
+      return {}
+    }
+  }
+
+  saveColumnPreferences() {
+    try {
+      window.localStorage.setItem(this.storageKey, JSON.stringify(this.columnPreferences))
+    } catch {
+      // The table remains usable when storage is disabled or full.
+    }
+  }
+
+  get storageKey() {
+    return `pgbouncerhero:data-table:${this.queryTarget.id}`
+  }
+}

data/app/javascript/pgbouncerhero/controllers/fleet_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["headline", "offline", "waiting", "utilization", "group", "item"]
+  static values = { total: Number }
+
+  connect() {
+    this.refresh()
+  }
+
+  refresh() {
+    const healthChecks = this.itemTargets.map(item => item.querySelector("[data-fleet-health]")).filter(Boolean)
+    const pending = this.totalValue - healthChecks.length
+    const offline = healthChecks.filter(health => health.dataset.status === "offline").length
+    const waiting = healthChecks.reduce((total, health) => total + Number(health.dataset.waitingClients), 0)
+    const highUtilization = healthChecks.filter(health => health.dataset.highUtilization === "true").length
+    const affected = healthChecks.filter(health => health.dataset.status !== "healthy").length
+
+    this.offlineTarget.textContent = offline
+    this.waitingTarget.textContent = waiting
+    this.utilizationTarget.textContent = highUtilization
+
+    if (pending > 0) {
+      this.headlineTarget.textContent = `Checking ${healthChecks.length} of ${this.totalValue} ${this.instances()}…`
+      return
+    }
+
+    this.headlineTarget.textContent = affected === 0
+      ? `All ${this.totalValue} ${this.instances()} healthy`
+      : `${affected} of ${this.totalValue} ${this.instances()} ${affected === 1 ? "needs" : "need"} attention`
+    this.sortGroups()
+  }
+
+  instances() {
+    return this.totalValue === 1 ? "instance" : "instances"
+  }
+
+  sortGroups() {
+    this.groupTargets.forEach(group => {
+      const items = Array.from(group.querySelectorAll(":scope > [data-fleet-target~='item']"))
+      items.sort((left, right) => {
+        const severityDifference = this.severity(right) - this.severity(left)
+        return severityDifference || Number(left.dataset.fleetOriginalIndex) - Number(right.dataset.fleetOriginalIndex)
+      })
+      items.forEach(item => group.appendChild(item))
+    })
+  }
+
+  severity(item) {
+    return Number(item.querySelector("[data-fleet-health]")?.dataset.severity || 0)
+  }
+}

data/app/javascript/pgbouncerhero/controllers/polling_controller.js

@@ -2,26 +2,70 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static values = { interval: { type: Number, default: 60000 } }
+  static targets = ["status"]
 
   connect() {
+    this.visibilityChanged = this.visibilityChanged.bind(this)
+    document.addEventListener("visibilitychange", this.visibilityChanged)
     this.startPolling()
   }
 
   disconnect() {
+    document.removeEventListener("visibilitychange", this.visibilityChanged)
     this.stopPolling()
   }
 
   startPolling() {
-    this.timer = setInterval(() => {
-      this.element.querySelectorAll("turbo-frame[src]").forEach(frame => {
-        frame.reload()
-      })
-    }, this.intervalValue)
+    this.stopPolling()
+    if (document.hidden) return
+
+    this.timer = setInterval(() => this.refresh(), this.intervalValue)
   }
 
   stopPolling() {
     if (this.timer) {
       clearInterval(this.timer)
+      this.timer = null
     }
   }
+
+  refresh() {
+    if (document.hidden) return
+
+    let refreshing = false
+
+    this.element.querySelectorAll("turbo-frame").forEach(frame => {
+      if (frame.hasAttribute("busy")) return
+
+      if (frame.src) {
+        frame.reload()
+        refreshing = true
+      } else if (frame.dataset.pollingRefreshUrl) {
+        frame.src = frame.dataset.pollingRefreshUrl
+        refreshing = true
+      }
+    })
+
+    if (refreshing) this.updateStatus("Refreshing…")
+  }
+
+  refreshed() {
+    const time = new Intl.DateTimeFormat([], { timeStyle: "medium" }).format(new Date())
+    this.updateStatus(`Updated ${time}`)
+  }
+
+  visibilityChanged() {
+    if (document.hidden) {
+      this.stopPolling()
+    } else {
+      this.refresh()
+      this.startPolling()
+    }
+  }
+
+  updateStatus(message) {
+    this.statusTargets.forEach(status => {
+      status.textContent = message
+    })
+  }
 }

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

@@ -12,7 +12,7 @@
     <%= csrf_meta_tags %>
   </head>
   <body class="bg-gray-100 min-h-screen">
-    <nav class="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-sm">
+    <nav class="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-50 shadow-xs">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex items-center h-14">
           <%= link_to "PgBouncerHero", root_path, class: "text-lg font-bold text-gray-900 hover:text-gray-700" %>

data/app/views/pg_bouncer_hero/database/_actions.html.erb

@@ -1,4 +1,4 @@
-<div class="bg-white rounded-lg border border-gray-200 shadow-sm p-4">
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs p-4">
   <h4 class="text-base font-semibold text-gray-900 mb-3">Actions</h4>
   <div class="flex flex-wrap gap-2">
     <button class="px-3 py-1.5 text-sm font-medium rounded-md border border-red-300 text-red-700 hover:bg-red-50">Pause</button>

data/app/views/pg_bouncer_hero/database/_clients.html.erb

@@ -1,21 +1,22 @@
-<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
-  <div class="px-4 py-3 border-b border-gray-200">
-    <h4 class="text-base font-semibold text-gray-900">Clients</h4>
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs" data-controller="data-table" data-data-table-default-hidden-value='["type","replication","local_addr","local_port","request_time","wait_us","close_needed","ptr","link","remote_pid","tls","prepared_statements"]'>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Clients</h4>
+    <%= render "shared/data_table_toolbar", title: "Clients", table_id: "clients", row_count: clients.to_a.size %>
   </div>
-  <div class="overflow-x-auto">
+  <div class="overflow-x-auto rounded-b-lg">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
           <% clients.first.keys.each do |key| %>
-            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= key.titleize %></th>
+            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if key == "database" %>" data-column-key="<%= key %>"><%= key.titleize %></th>
           <% end %>
         </tr>
       </thead>
       <tbody class="bg-white divide-y divide-gray-200">
         <% clients.each do |row| %>
-          <tr class="hover:bg-gray-50">
-            <% row.each do |_k, v| %>
-              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= v %></td>
+          <tr class="group hover:bg-gray-50" data-data-table-target="row">
+            <% row.each do |key, value| %>
+              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if key == "database" %>"><%= value %></td>
             <% end %>
           </tr>
         <% end %>

data/app/views/pg_bouncer_hero/database/_conf.html.erb

@@ -1,21 +1,22 @@
-<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
-  <div class="px-4 py-3 border-b border-gray-200">
-    <h4 class="text-base font-semibold text-gray-900">Configuration</h4>
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs" data-controller="data-table" data-data-table-default-hidden-value='["default","changeable"]'>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Configuration</h4>
+    <%= render "shared/data_table_toolbar", title: "Configuration", table_id: "configuration", row_count: conf.to_a.size %>
   </div>
-  <div class="overflow-x-auto">
+  <div class="overflow-x-auto rounded-b-lg">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
-          <% conf.first.keys.each do |key| %>
-            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= key.titleize %></th>
+          <% conf.first.keys.each_with_index do |key, index| %>
+            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if index.zero? %>" data-column-key="<%= key %>"><%= key.titleize %></th>
           <% end %>
         </tr>
       </thead>
       <tbody class="bg-white divide-y divide-gray-200">
         <% conf.each do |row| %>
-          <tr class="hover:bg-gray-50">
-            <% row.each do |_k, v| %>
-              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= v %></td>
+          <tr class="group hover:bg-gray-50" data-data-table-target="row">
+            <% row.each_value.with_index do |value, index| %>
+              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= value %></td>
             <% end %>
           </tr>
         <% end %>

data/app/views/pg_bouncer_hero/database/_databases.html.erb

@@ -1,21 +1,42 @@
-<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
-  <div class="px-4 py-3 border-b border-gray-200">
-    <h4 class="text-base font-semibold text-gray-900">Databases</h4>
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs" data-controller="data-table" data-data-table-default-hidden-value='["force_user","min_pool_size","reserve_pool","server_lifetime","pool_mode","max_connections","paused","disabled"]'>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Databases</h4>
+    <%= render "shared/data_table_toolbar", title: "Databases", table_id: "databases", row_count: databases.to_a.size %>
   </div>
-  <div class="overflow-x-auto">
+  <div class="overflow-x-auto rounded-b-lg">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
-          <% databases.first.keys.each do |key| %>
-            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= key.titleize %></th>
+          <% databases.first.keys.each_with_index do |key, index| %>
+            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if index.zero? %>" data-column-key="<%= key %>"><%= key.titleize %></th>
+          <% end %>
+          <% unless database.read_only? %>
+            <th class="sticky right-0 z-10 min-w-52 bg-gray-50 px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" data-column-key="maintenance" data-column-locked="true">Maintenance</th>
           <% end %>
         </tr>
       </thead>
       <tbody class="bg-white divide-y divide-gray-200">
         <% databases.each do |row| %>
-          <tr class="hover:bg-gray-50">
-            <% row.each do |_k, v| %>
-              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= v %></td>
+          <tr class="group hover:bg-gray-50" data-data-table-target="row">
+            <% row.each_value.with_index do |value, index| %>
+              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= value %></td>
+            <% end %>
+            <% unless database.read_only? %>
+              <td class="sticky right-0 min-w-52 bg-white px-4 py-2 whitespace-nowrap group-hover:bg-gray-50">
+                <% target_database = row["name"].to_s %>
+                <% unless target_database == "pgbouncer" %>
+                  <div class="grid grid-cols-2 gap-2">
+                    <% if row["paused"].to_i.zero? %>
+                      <%= button_to "Pause", pause_database_path(database: database.name.parameterize), method: :post, params: { target_database: target_database }, class: "w-full px-2 py-1 text-xs font-medium rounded-md border border-amber-300 text-amber-800 hover:bg-amber-50", form: { data: { turbo_confirm: "Pause #{target_database}? New client queries will wait until this database is resumed." } } %>
+                    <% end %>
+                    <%= button_to "Reconnect", reconnect_database_path(database: database.name.parameterize), method: :post, params: { target_database: target_database }, class: "w-full px-2 py-1 text-xs font-medium rounded-md border border-blue-300 text-blue-700 hover:bg-blue-50", form: { data: { turbo_confirm: "Reconnect released server connections for #{target_database}?" } } %>
+                    <%= button_to "Wait close", wait_close_database_path(database: database.name.parameterize), method: :post, params: { target_database: target_database }, class: "w-full px-2 py-1 text-xs font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50", form: { data: { turbo_confirm: "Wait until all marked server connections for #{target_database} have closed?" } } %>
+                    <% if row["paused"].to_i.positive? %>
+                      <%= button_to "Resume", resume_database_path(database: database.name.parameterize), method: :post, params: { target_database: target_database }, class: "w-full px-2 py-1 text-xs font-medium rounded-md border border-green-300 text-green-700 hover:bg-green-50", form: { data: { turbo_confirm: "Resume client processing for #{target_database}?" } } %>
+                    <% end %>
+                  </div>
+                <% end %>
+              </td>
             <% end %>
           </tr>
         <% end %>

data/app/views/pg_bouncer_hero/database/_menu.html.erb

@@ -1,4 +1,7 @@
-<nav class="bg-white rounded-lg border border-gray-200 shadow-sm mb-6">
+<% state_rows = @admin_state&.to_a || [] %>
+<% state_known = state_rows.any? %>
+<% resumable = state_rows.any? { |row| %w[paused suspended].include?(row["key"]) && row["value"] == "yes" } %>
+<nav class="bg-white rounded-lg border border-gray-200 shadow-xs mb-6">
   <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between flex-wrap gap-2">
     <div class="flex items-center gap-4 flex-wrap">
       <span class="font-semibold text-gray-900"><%= "#{database.group.name} > #{database.name}" %></span>
@@ -6,12 +9,24 @@
       <%= link_to "Stats", stats_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('stats') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
       <%= link_to "Pools", pools_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('pools') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
       <%= link_to "Clients", clients_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('clients') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
+      <%= link_to "Servers", servers_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('servers') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
+      <%= link_to "Users", users_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('users') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
       <%= link_to "Configuration", conf_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('conf') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
+      <%= link_to "State", state_path(database: database.name.parameterize), class: "px-3 py-1.5 text-sm rounded-md #{is_active('state') ? 'bg-gray-900 text-white' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'}" %>
     </div>
     <div class="flex items-center gap-2">
-      <%= button_to "Reload", reload_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-green-300 text-green-700 hover:bg-green-50", form: { data: { turbo_confirm: "Are you sure?" } } %>
-      <%= button_to "Suspend", suspend_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-blue-300 text-blue-700 hover:bg-blue-50", form: { data: { turbo_confirm: "Are you sure?" } } %>
-      <%= button_to "Shutdown", shutdown_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-red-300 text-red-700 hover:bg-red-50", form: { data: { turbo_confirm: "Are you sure?" } } %>
+      <% if database.read_only? %>
+        <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-gray-300 ring-inset">Read-only</span>
+      <% else %>
+        <%= button_to "Reload", reload_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-green-300 text-green-700 hover:bg-green-50", form: { data: { turbo_confirm: "Reload PgBouncer configuration?" } } %>
+        <% if !state_known || !resumable %>
+          <%= button_to "Suspend", suspend_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-blue-300 text-blue-700 hover:bg-blue-50", form: { data: { turbo_confirm: "Suspend all PgBouncer socket processing until Resume is selected?" } } %>
+        <% end %>
+        <% if !state_known || resumable %>
+          <%= button_to "Resume all", resume_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-green-300 text-green-700 hover:bg-green-50", form: { data: { turbo_confirm: "Resume all paused or suspended PgBouncer processing?" } } %>
+        <% end %>
+        <%= button_to "Graceful shutdown", shutdown_path(database: database.name.parameterize), method: :post, class: "px-3 py-1.5 text-sm font-medium rounded-md border border-red-300 text-red-700 hover:bg-red-50", form: { data: { turbo_confirm: "Stop accepting new clients and shut down after existing clients disconnect?" } } %>
+      <% end %>
     </div>
   </div>
 </nav>

data/app/views/pg_bouncer_hero/database/_pools.html.erb

@@ -1,21 +1,22 @@
-<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
-  <div class="px-4 py-3 border-b border-gray-200">
-    <h4 class="text-base font-semibold text-gray-900">Pools</h4>
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs" data-controller="data-table" data-data-table-default-hidden-value='["cl_active_cancel_req","cl_waiting_cancel_req","sv_active_cancel","sv_being_canceled","sv_used","sv_tested","sv_login","maxwait_us"]'>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Pools</h4>
+    <%= render "shared/data_table_toolbar", title: "Pools", table_id: "pools", row_count: pools.to_a.size %>
   </div>
-  <div class="overflow-x-auto">
+  <div class="overflow-x-auto rounded-b-lg">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
-          <% pools.first.keys.each do |key| %>
-            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= key.titleize %></th>
+          <% pools.first.keys.each_with_index do |key, index| %>
+            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if index.zero? %>" data-column-key="<%= key %>"><%= key.titleize %></th>
           <% end %>
         </tr>
       </thead>
       <tbody class="bg-white divide-y divide-gray-200">
         <% pools.each do |row| %>
-          <tr class="hover:bg-gray-50">
-            <% row.each do |_k, v| %>
-              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= v %></td>
+          <tr class="group hover:bg-gray-50" data-data-table-target="row">
+            <% row.each_value.with_index do |value, index| %>
+              <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= value %></td>
             <% end %>
           </tr>
         <% end %>

data/app/views/pg_bouncer_hero/database/_servers.html.erb

@@ -0,0 +1,31 @@
+<% rows = servers.to_a %>
+<%= tag.div class: "bg-white rounded-lg border border-gray-200 shadow-xs", data: rows.empty? ? {} : { controller: "data-table", data_table_default_hidden_value: %w[type replication local_addr local_port request_time wait_us close_needed ptr link remote_pid tls prepared_statements] } do %>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Servers</h4>
+    <%= render "shared/data_table_toolbar", title: "Servers", table_id: "servers", row_count: rows.size unless rows.empty? %>
+  </div>
+  <% if rows.empty? %>
+    <p class="px-4 py-6 text-sm text-gray-500">No server connections.</p>
+  <% else %>
+    <div class="overflow-x-auto rounded-b-lg">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <% rows.first.keys.each do |key| %>
+              <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if key == "database" %>" data-column-key="<%= key %>"><%= key.titleize %></th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <% rows.each do |row| %>
+            <tr class="group hover:bg-gray-50" data-data-table-target="row">
+              <% row.each do |key, value| %>
+                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if key == "database" %>"><%= value %></td>
+              <% end %>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
+<% end %>

data/app/views/pg_bouncer_hero/database/_state.html.erb

@@ -0,0 +1,11 @@
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs p-4">
+  <h4 class="text-base font-semibold text-gray-900 mb-3">State</h4>
+  <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+    <% state.each do |row| %>
+      <div>
+        <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider"><%= row["key"].titleize %></dt>
+        <dd class="mt-1 text-sm text-gray-900"><%= row["value"] %></dd>
+      </div>
+    <% end %>
+  </dl>
+</div>

data/app/views/pg_bouncer_hero/database/_stats.html.erb

@@ -1,26 +1,27 @@
-<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
-  <div class="px-4 py-3 border-b border-gray-200">
-    <h4 class="text-base font-semibold text-gray-900">Stats</h4>
+<div class="bg-white rounded-lg border border-gray-200 shadow-xs" data-controller="data-table" data-data-table-default-hidden-value='["total_server_assignment_count","total_xact_time","total_query_time","total_wait_time","avg_server_assignment_count","avg_xact_count","avg_query_count","avg_recv","avg_sent","avg_xact_time"]'>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Stats</h4>
+    <%= render "shared/data_table_toolbar", title: "Stats", table_id: "stats", row_count: stats.to_a.size %>
   </div>
-  <div class="overflow-x-auto">
+  <div class="overflow-x-auto rounded-b-lg">
     <table class="min-w-full divide-y divide-gray-200">
       <thead class="bg-gray-50">
         <tr>
-          <% stats.first.keys.each do |key| %>
-            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= key.titleize %></th>
+          <% stats.first.keys.each_with_index do |key, index| %>
+            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if index.zero? %>" data-column-key="<%= key %>"><%= key.titleize %></th>
           <% end %>
         </tr>
       </thead>
       <tbody class="bg-white divide-y divide-gray-200">
         <% stats.each do |row| %>
-          <tr class="hover:bg-gray-50">
-            <% row.each do |k, v| %>
+          <tr class="group hover:bg-gray-50" data-data-table-target="row">
+            <% row.each_with_index do |(k, v), index| %>
               <% if %w[total_received total_sent avg_recv avg_sent].include?(k) %>
-                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= number_to_human_size(v) %></td>
+                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= number_to_human_size(v) %></td>
               <% elsif %w[total_query_time avg_query].include?(k) %>
-                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= humanize_ms(v.to_i) %></td>
+                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= humanize_ms(v.to_i) %></td>
               <% else %>
-                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap"><%= v %></td>
+                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= v %></td>
               <% end %>
             <% end %>
           </tr>

data/app/views/pg_bouncer_hero/database/_users.html.erb

@@ -0,0 +1,31 @@
+<% rows = users.to_a %>
+<%= tag.div class: "bg-white rounded-lg border border-gray-200 shadow-xs", data: rows.empty? ? {} : { controller: "data-table" } do %>
+  <div class="px-4 py-3 border-b border-gray-200 flex items-start justify-between gap-3 flex-wrap">
+    <h4 class="text-base font-semibold text-gray-900 py-1.5">Users</h4>
+    <%= render "shared/data_table_toolbar", title: "Users", table_id: "users", row_count: rows.size unless rows.empty? %>
+  </div>
+  <% if rows.empty? %>
+    <p class="px-4 py-6 text-sm text-gray-500">No configured users.</p>
+  <% else %>
+    <div class="overflow-x-auto rounded-b-lg">
+      <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+          <tr>
+            <% rows.first.keys.each_with_index do |key, index| %>
+              <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider <%= "sticky left-0 z-10 bg-gray-50" if index.zero? %>" data-column-key="<%= key %>"><%= key.titleize %></th>
+            <% end %>
+          </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+          <% rows.each do |row| %>
+            <tr class="group hover:bg-gray-50" data-data-table-target="row">
+              <% row.each_value.with_index do |value, index| %>
+                <td class="px-4 py-2 text-sm text-gray-700 whitespace-nowrap <%= "sticky left-0 bg-white group-hover:bg-gray-50" if index.zero? %>"><%= value %></td>
+              <% end %>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  <% end %>
+<% end %>