✨ Add banner if http endpoints are unused

sequinstream · Dec 10, 2024 · 6212968 · 6212968
1 parent 7762cbf
commit 6212968
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/assets/svelte/http_endpoints/Index.svelte b/assets/svelte/http_endpoints/Index.svelte
@@ -16,13 +16,35 @@
     };
   }>;
   export let live: any;
+  export let sinkConsumerCount: number;
 
   function handleHttpEndpointClick(id: string) {
     live.pushEvent("http_endpoint_clicked", { id });
   }
 </script>
 
 <div class="container mx-auto py-10">
+  {#if httpEndpoints.length > 0 && sinkConsumerCount === 0}
+    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="font-semibold">Create a Webhook sink</h3>
+          <p class="">
+            Create a webhook sink to push records or changes to your HTTP
+            Endpoint
+          </p>
+        </div>
+        <a
+          href="/sinks/new?kind=http_push"
+          data-phx-link="redirect"
+          data-phx-link-state="push"
+        >
+          <Button variant="outline">Create Webhook Sink</Button>
+        </a>
+      </div>
+    </div>
+  {/if}
+
   <div class="flex justify-between items-center mb-4">
     <div class="flex items-center">
       <ChevronsLeftRightEllipsis class="h-6 w-6 mr-2" />

diff --git a/assets/svelte/http_endpoints/Show.svelte b/assets/svelte/http_endpoints/Show.svelte
@@ -29,6 +29,7 @@
   export let metrics;
   export let live;
   export let parent_id;
+  export let sink_consumer_count: number;
 
   let showDeleteConfirmDialog = false;
   let deleteConfirmDialogLoading = false;
@@ -73,6 +74,29 @@
 </script>
 
 <div class="min-h-screen font-sans bg-white">
+  {#if sink_consumer_count === 0}
+    <div class="container mx-auto px-4 pt-4">
+      <div class="p-4 bg-blue-50 border border-blue-200 rounded-lg">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="font-semibold">Create a Webhook sink</h3>
+            <p>
+              Create a webhook sink to push records or changes to your HTTP
+              Endpoint
+            </p>
+          </div>
+          <a
+            href="/sinks/new?kind=http_push"
+            data-phx-link="redirect"
+            data-phx-link-state="push"
+          >
+            <Button variant="outline">Create Webhook Sink</Button>
+          </a>
+        </div>
+      </div>
+    </div>
+  {/if}
+
   <header class="bg-white border-b sticky top-0 z-10">
     <div class="container mx-auto px-4 py-4">
       <div class="flex items-center justify-between">

diff --git a/lib/sequin_web/live/http_endpoints/index.ex b/lib/sequin_web/live/http_endpoints/index.ex
@@ -16,6 +16,7 @@ defmodule SequinWeb.HttpEndpointsLive.Index do
       |> Enum.map(&HttpEndpoint.preload_sink_consumers/1)
 
     http_endpoints = load_http_endpoint_health(http_endpoints)
+    sink_consumer_count = account_id |> Consumers.list_sink_consumers_for_account() |> length()
 
     if connected?(socket) do
       Process.send_after(self(), :update_health, 1000)
@@ -25,6 +26,8 @@ defmodule SequinWeb.HttpEndpointsLive.Index do
       socket
       |> assign(:http_endpoints, http_endpoints)
       |> assign(:form_errors, %{})
+      |> assign(:sink_consumer_count, sink_consumer_count)
+      |> assign(:api_base_url, Application.fetch_env!(:sequin, :api_base_url))
 
     {:ok, socket}
   end
@@ -40,7 +43,9 @@ defmodule SequinWeb.HttpEndpointsLive.Index do
         props={
           %{
             httpEndpoints: @encoded_http_endpoints,
-            formErrors: @form_errors
+            formErrors: @form_errors,
+            sinkConsumerCount: @sink_consumer_count,
+            apiBaseUrl: @api_base_url
           }
         }
         socket={@socket}

diff --git a/lib/sequin_web/live/http_endpoints/show.ex b/lib/sequin_web/live/http_endpoints/show.ex
@@ -40,6 +40,13 @@ defmodule SequinWeb.HttpEndpointsLive.Show do
   @impl Phoenix.LiveView
   def render(assigns) do
     assigns = assign(assigns, :parent_id, "http-endpoint-show")
+    # Get the count of sink consumers for this endpoint
+    sink_consumer_count =
+      assigns.http_endpoint.id
+      |> Consumers.list_sink_consumers_for_http_endpoint()
+      |> length()
+
+    assigns = assign(assigns, :sink_consumer_count, sink_consumer_count)
 
     ~H"""
     <div id={@parent_id}>
@@ -49,7 +56,8 @@ defmodule SequinWeb.HttpEndpointsLive.Show do
           %{
             http_endpoint: encode_http_endpoint(@http_endpoint),
             parent_id: @parent_id,
-            metrics: @metrics
+            metrics: @metrics,
+            sink_consumer_count: @sink_consumer_count
           }
         }
       />