Nodes Live View

2021-07-20 22:40:06 +05:30 · 2021-07-20 22:40:06 +05:30 · 5b0f218cbd
parent 4dbea96a35
commit 5b0f218cbd
9 changed files with 97 additions and 9 deletions
--- a/assets/js/app.js
+++ b/assets/js/app.js
@ -3,10 +3,8 @@
 // its own CSS file.

 import "../css/app.scss"
-import "@fontsource/inter/400.css"; 
 import "@fontsource/inter/variable.css"; 

-
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
 // in "webpack.config.js".
--- a/lib/zcash_explorer/application.ex
+++ b/lib/zcash_explorer/application.ex
@ -37,7 +37,8 @@ defmodule ZcashExplorer.Application do
         warmer(module: ZcashExplorer.Metrics.NetworkSolpsWarmer, state: {}),
         warmer(module: ZcashExplorer.Blocks.BlockWarmer, state: {}),
         warmer(module: ZcashExplorer.Transactions.TransactionWarmer, state: {}),
-         warmer(module: ZcashExplorer.Mempool.MempoolWarmer, state: {})
+         warmer(module: ZcashExplorer.Mempool.MempoolWarmer, state: {}),
+         warmer(module: ZcashExplorer.Nodes.NodeWarmer, state: {})
       ]}
    ]

--- a/lib/zcash_explorer/nodes/nodes_warmer.ex
+++ b/lib/zcash_explorer/nodes/nodes_warmer.ex
@ -0,0 +1,24 @@
+defmodule ZcashExplorer.Nodes.NodeWarmer do
+  use Cachex.Warmer
+
+  @doc """
+  Returns the interval for this warmer.
+  """
+  def interval,
+    do: :timer.seconds(60)
+
+  @doc """
+  Executes this cache warmer.
+  """
+  def execute(_state) do
+    Zcashex.getpeerinfo() |> handle_result()
+  end
+
+  # ignores the warmer result in case of error
+  defp handle_result({:error, _reason}),
+    do: :ignore
+
+  defp handle_result({:ok, nodes}) do
+    {:ok, [{"zcash_nodes", nodes}]}
+  end
+end
--- a/lib/zcash_explorer_web/live/nodes_live.ex
+++ b/lib/zcash_explorer_web/live/nodes_live.ex
@ -0,0 +1,53 @@
+defmodule ZcashExplorerWeb.NodesLive do
+  use Phoenix.LiveView
+
+  def render(assigns) do
+    ~L"""
+    <div class="shadow overflow-hidden border-b border-gray-200 rounded-lg overflow-x-auto">
+    <table class="min-w-full divide-y divide-gray-200">
+      <thead class="bg-white-500">
+      <tr>
+         <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Address</th>
+         <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Version</th>
+          <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-midnight-500 uppercase tracking-wider">Block Height</th>
+        </tr>
+       </thead>
+       <tbody class="bg-white-500 divide-y divide-gray-200">
+       <%= for node <- @zcash_nodes do %>
+        <tr class="hover:bg-indigo-50">
+        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-indigo-500 animate-pulse">
+               <%= node["addr"] %>
+        </td>  
+        <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
+            <%= node["subver"] %>
+        </td>
+        <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500 hover:text-gray-600">
+            <%= node["synced_blocks"] %>
+        </td>
+       </tr>                                           
+      <% end %>
+    </tbody>
+    </table>
+    </div>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    if connected?(socket), do: Process.send_after(self(), :update, 5000)
+
+    case Cachex.get(:app_cache, "zcash_nodes") do
+      {:ok, zcash_nodes} ->
+        {:ok, assign(socket, :zcash_nodes, zcash_nodes)}
+
+      {:error, _reason} ->
+        {:ok, assign(socket, :zcash_nodes, "loading...")}
+    end
+  end
+
+  def handle_info(:update, socket) do
+    Process.send_after(self(), :update, 5000)
+    {:ok, zcash_nodes} = Cachex.get(:app_cache, "zcash_nodes")
+    {:noreply, assign(socket, :zcash_nodes, zcash_nodes)}
+  end
+end
--- a/lib/zcash_explorer_web/live/raw_mempool_live.ex
+++ b/lib/zcash_explorer_web/live/raw_mempool_live.ex
@ -17,7 +17,7 @@ defmodule ZcashExplorerWeb.RawMempoolLive do
       <tbody class="bg-white-500 divide-y divide-gray-200">
       <%= for tx <- @raw_mempool do %>
        <tr class="hover:bg-indigo-50">
-        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500">
+        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600 hover:text-indigo-500 animate-pulse">
          <a href='/transactions/<%= tx["txid"] %>'>
               <%= tx["txid"] %>
          </a>
--- a/lib/zcash_explorer_web/router.ex
+++ b/lib/zcash_explorer_web/router.ex
@ -30,6 +30,7 @@ defmodule ZcashExplorerWeb.Router do
    live "/index/recent_blocks", RecentBlocksLive
    live "/index/recent_transactions", RecentTransactionsLive
    live "/live/raw_mempool", RawMempoolLive
+    live "/live/nodes", NodesLive
    get "/broadcast", PageController, :broadcast
    post "/broadcast", PageController, :do_broadcast
    get "/payment-disclosure", PageController, :disclosure
--- a/lib/zcash_explorer_web/templates/layout/app.html.eex
+++ b/lib/zcash_explorer_web/templates/layout/app.html.eex
@ -11,7 +11,7 @@
              </a>
                <a href="/">
                <div class="flex-shrink-0 px-1 text-white">
-                    Block Explorer
+                    Block Explorer ( beta )
                </div>
              </a>
            </div>
@ -50,8 +50,12 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class
            <div class="hidden lg:block lg:w-80 z-40">
                <div class="flex items-center justify-end">
                    <div class="flex">
-                        <a href="/blocks" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Blocks</a>
+
+                      <a href="/mempool" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Mempool</a>
                       
+                     <a href="/blocks" class="px-3 py-2 rounded-md text-sm font-medium text-indigo-200 hover:text-white">Blocks</a>
+                       
+

                        <div x-data="{ open: false }" @keydown.escape.stop="open = false" @click.away="open = false" class="relative inline-block text-left">
                            <div>
@ -65,6 +69,7 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class

                            <div x-description="Dropdown menu, show/hide based on menu state." x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                                <div class="py-1" role="none">
+                                    <a href="/nodes" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Nodes</a>
                                    <a href="/broadcast" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Broadcast Transaction</a>
                                    <a href="/payment-disclosure" class="block px-4 py-2 text-sm hover:bg-gray-200 bg-white" role="menuitem">Payment Disclosure</a>
                                </div>
@ -79,12 +84,18 @@ Heroicon name: outline/x" x-state:on="Menu open" x-state:off="Menu closed" class

    <div x-description="Mobile menu, show/hide based on menu state." class="lg:hidden" id="mobile-menu" x-show="open">
        <div class="px-2 pt-2 pb-3">
+
+            <a href="/mempool" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Mempool</a>
+
            <a href="/blocks" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Blocks</a>
           
        </div>
        <div class="pt-4 pb-3 border-t ">
            <div class="px-2">
+                 <a href="/nodes" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Nodes</a>
+
                <a href="/broadcast" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Broadcast Transaction</a>
+
                <a href="/payment-disclosure" class="text-indigo-200 hover:text-indigo-100 hover:bg-indigo-600 block px-3 py-2 rounded-md text-base font-medium">Payment Disclosure</a>
            </div>
        </div>
--- a/lib/zcash_explorer_web/templates/page/nodes.html.eex
+++ b/lib/zcash_explorer_web/templates/page/nodes.html.eex
@ -1,8 +1,8 @@
 <main class="py-4">
 <div class="grid grid-cols-1 mx-8">
 <h3 class="text-lg leading-6 font-medium text-gray-500 py-2">
-        Zcash Nodes
+        Zcash connected network nodes
 </h3>
-    <%= live_render(@conn, ZcashExplorerWeb.RawMempoolLive) %>
+    <%= live_render(@conn, ZcashExplorerWeb.NodesLive) %>
 </div>
 </main>
--- a/lib/zcash_explorer_web/templates/transaction/tx.html.eex
+++ b/lib/zcash_explorer_web/templates/transaction/tx.html.eex
@ -17,7 +17,7 @@
                <dt class="text-sm font-medium text-gray-500">
                Confirmations
                </dt>
-                <dd class="mt-1 text-xl font-black text-gray-900">
+                <dd class="mt-1 text-xl font-semibold text-gray-900">
                <%= if @tx.confirmations == nil do %>
                0
                <% else %>