Finish stats

firezone · Jul 12, 2024 · 9cc78fc · 9cc78fc
1 parent eb97805
commit 9cc78fc
Show file tree

Hide file tree

Showing 10 changed files with 10,005 additions and 9,875 deletions.
diff --git a/lib/probe/components/layouts/root.html.heex b/lib/probe/components/layouts/root.html.heex
@@ -23,9 +23,7 @@
       }
     </script>
   </head>
-  <body class="subpixel-antialiased bg-gray-50 dark:bg-slate-900">
-    <div class="flex w-full flex-col">
-      <%= @inner_content %>
-    </div>
+  <body class="subpixel-antialiased h-full bg-gray-50 dark:bg-slate-900">
+    <%= @inner_content %>
   </body>
 </html>
diff --git a/lib/probe/components/list_components.ex b/lib/probe/components/list_components.ex
@@ -1,6 +1,8 @@
 defmodule Probe.ListComponents do
   use Phoenix.Component
 
+  attr :stats, :list
+
   def results_table(assigns) do
     ~H"""
     <div class="relative overflow-x-auto">
@@ -19,16 +21,16 @@ defmodule Probe.ListComponents do
           </tr>
         </thead>
         <tbody>
-          <%= for %{country_code: country_code, rate: rate, num: num} <- @results do %>
+          <%= for stat <- @stats do %>
             <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
               <td class="px-6 py-4 whitespace-nowrap dark:text-white">
-                <%= country_code %>
+                <%= stat.country %>
               </td>
               <td class="px-6 py-4 whitespace-nowrap dark:text-white">
-                <%= num %>
+                <%= stat.num_runs %>
               </td>
               <td class="px-6 py-4 whitespace-nowrap dark:text-white">
-                <%= rate %>
+                <%= stat.num_succeeded * 100 / stat.num_runs %>%
               </td>
             </tr>
           <% end %>

diff --git a/lib/probe/components/map_components.ex b/lib/probe/components/map_components.ex
diff --git a/lib/probe/live/component/faq.ex b/lib/probe/live/component/faq.ex
@@ -3,7 +3,7 @@ defmodule Probe.Live.Component.Faq do
 
   def render(assigns) do
     ~H"""
-    <div class="max-w-screen-sm mx-auto">
+    <div class="max-w-screen-md mx-auto">
       <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200">FAQ</h1>
       <p class="text-gray-600 dark:text-gray-400 mt-4">
         All the things you wanted to know about Probe, and maybe even a few you didn't.
@@ -107,7 +107,10 @@ defmodule Probe.Live.Component.Faq do
               navigate="https://www.firezone.dev?utm_source=probe"
               class="text-blue-600 dark:text-blue-400 hover:no-underline underline"
               target="_blank"
-            >open a GitHub issue</.link>. If you think you've found a security vulnerability,
+            >open a GitHub issue</.link>.
+          </p>
+          <p class="text-gray-600 dark:text-gray-400">
+            If you think you've found a security vulnerability,
             please <.link
               navigate="https://www.github.com/firezone/probe/security/advisories/new"
               class="text-blue-600 dark:text-blue-400 hover:no-underline underline"
@@ -121,7 +124,7 @@ defmodule Probe.Live.Component.Faq do
             How do you locate my IP address?
           </p>
           <p class="text-gray-600 dark:text-gray-400">
-            Probe uses GeoLite2 data created by MaxMind, available from <.link
+            Probe uses GeoLite2 data created by <.link
               navigate="https://www.maxmind.com"
               class="text-blue-600 dark:text-blue-400 hover:no-underline underline"
               target="_blank"

diff --git a/lib/probe/live/component/results.ex b/lib/probe/live/component/results.ex
@@ -1,18 +1,24 @@
 defmodule Probe.Live.Component.Results do
   use Probe, :live_component
-
-  @results [
-    %{country_code: "us", rate: 0.986, num: 100},
-    %{country_code: "ca", rate: 0.987, num: 100}
-  ]
+  alias Probe.Stats
 
   def mount(socket) do
-    {:ok, assign(socket, :results, @results)}
+    if connected?(socket) do
+      stats = Stats.country_stats()
+      {:ok, assign(socket, :stats, stats)}
+    else
+      {:ok, assign(socket, :stats, nil)}
+    end
   end
 
   def render(assigns) do
     ~H"""
-    <div class="max-w-screen-lg mx-auto">
+    <div class="max-w-screen-xl mx-auto">
+      <div class="flex justify-center mb-8">
+        <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200">
+          Global WireGuard connectivity results
+        </h1>
+      </div>
       <div class="flex w-full justify-center mb-8">
         <div class="inline-flex rounded-md shadow-sm" role="group">
           <button phx-target={@myself} phx-click={show_map()} id="map-btn" type="button" class={~w[
@@ -76,13 +82,19 @@ defmodule Probe.Live.Component.Results do
         </div>
       </div>
 
-      <div id="results-map">
-        <.results_map results={@results} />
-      </div>
+      <%= if @stats do %>
+        <div id="results-map">
+          <.results_map stats={@stats} />
+        </div>
 
-      <div id="results-list" class="hidden">
-        <.results_table results={@results} />
-      </div>
+        <div id="results-list" class="hidden">
+          <.results_table stats={@stats} />
+        </div>
+      <% else %>
+        <div class="flex justify-center">
+          <p class="text-gray-500 dark:text-gray-400">Loading...</p>
+        </div>
+      <% end %>
     </div>
     """
   end