feat: Add filtering to Inspector tool

Adds a filter field to the Inspector tool to set filters when creating a new connection

assets/js/app.js

@@ -10,7 +10,7 @@ import { createClient } from "@supabase/supabase-js";
 
 let Hooks = {};
 Hooks.payload = {
- initRealtime(channelName, host, log_level, token, schema, table, bearer) {
+ initRealtime(channelName, host, log_level, token, schema, table, filter, bearer) {
  // Instantiate our client with the Realtime server and params to connect with
  {
  }
@@ -79,28 +79,24 @@ Hooks.payload = {
  });
 
  // Listen for all (`*`) `postgres_changes` events on tables in the `public` schema
- this.channel.on(
- "postgres_changes",
- { event: "*", schema: schema, table: table },
- (payload) => {
- let ts = performance.now() + performance.timeOrigin;
- let iso_ts = new Date();
- let payload_ts = Date.parse(payload.commit_timestamp);
- let latency = ts - payload_ts;
- let line = `<tr class="bg-white border-b hover:bg-gray-50">
+ let postgres_changes_opts = { event: "*", schema: schema, table: table };
+ postgres_changes_opts = filter != "" ? { ...postgres_changes_opts, filter: filter } : postgres_changes_opts;
+ this.channel.on("postgres_changes", postgres_changes_opts, (payload) => {
+ let ts = performance.now() + performance.timeOrigin;
+ let iso_ts = new Date();
+ let payload_ts = Date.parse(payload.commit_timestamp);
+ let latency = ts - payload_ts;
+ let line = `<tr class="bg-white border-b hover:bg-gray-50">
  <td class="py-4 px-6">POSTGRES</td>
  <td class="py-4 px-6">${iso_ts.toISOString()}</td>
  <td class="py-4 px-6">
  <div class="pb-3">${JSON.stringify(payload)}</div>
- <div class="pt-3 border-t hover:bg-gray-50">Latency: ${latency.toFixed(
- 1
- )} ms</div>
+ <div class="pt-3 border-t hover:bg-gray-50">Latency: ${latency.toFixed(1)} ms</div>
  </td>
  </tr>`;
- let list = document.querySelector("#plist");
- list.innerHTML = line + list.innerHTML;
- }
- );
+ let list = document.querySelector("#plist");
+ list.innerHTML = line + list.innerHTML;
+ });
 
  // Finally, subscribe to the Channel we just setup
  this.channel.subscribe(async (status, error) => {
@@ -208,13 +204,12 @@ Hooks.payload = {
  connection.token,
  connection.schema,
  connection.table,
+ connection.filter,
  connection.bearer
  )
  );
 
- this.handleEvent("send_message", ({ message }) =>
- this.sendRealtime(message.event, message.payload)
- );
+ this.handleEvent("send_message", ({ message }) => this.sendRealtime(message.event, message.payload));
 
  this.handleEvent("disconnect", ({}) => this.disconnectRealtime());
 
@@ -232,9 +227,7 @@ Hooks.latency = {
  },
 };
 
-let csrfToken = document
- .querySelector("meta[name='csrf-token']")
- .getAttribute("content");
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
  hooks: Hooks,
  params: { _csrf_token: csrfToken },

lib/realtime_web/live/inspector_live/conn_component.ex

@@ -13,6 +13,7 @@ defmodule RealtimeWeb.InspectorLive.ConnComponent do
  field(:channel, :string, default: "room_a")
  field(:schema, :string, default: "public")
  field(:table, :string, default: "*")
+ field(:filter, :string)
  field(:bearer, :string)
  end
 

lib/realtime_web/live/inspector_live/conn_component.html.heex

@@ -78,6 +78,20 @@
  <%= error_tag(f, :table) %>
  <p class="text-gray-600 text-xs italic">Listen to changes from this table</p>
  </div>
+ <div class="mb-4">
+ <%= label(f, :filter, class: "block text-gray-700 text-sm font-bold mb-2") %>
+ <%= text_input(f, :filter, class: "
+ my-1
+ block
+ w-full
+ rounded-md
+ border-gray-300
+ shadow-sm
+ focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
+ ") %>
+ <%= error_tag(f, :filter) %>
+ <p class="text-gray-600 text-xs italic">Listen to changes from this table</p>
+ </div>
  <div class="mb-4">
  <%= label(f, :log_level, class: "block text-gray-700 text-sm font-bold mb-2") %>
  <%= select(f, :log_level, ["debug", "info", "warn", "error"], selected: "info", class: "

mix.exs

@@ -4,7 +4,7 @@ defmodule Realtime.MixProject do
  def project do
  [
  app: :realtime,
- version: "2.19.5",
+ version: "2.19.6",
  elixir: "~> 1.14.0",
  elixirc_paths: elixirc_paths(Mix.env()),
  start_permanent: Mix.env() == :prod,