Add necessary scaffolding for enabling LV on dashboard

Author: zoldar

assets/js/dashboard/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
 import VisitorGraph from './stats/graph/visitor-graph'
 import Sources from './stats/sources'
 import Pages from './stats/pages'
@@ -8,6 +8,8 @@ import { TopBar } from './nav-menu/top-bar'
 import Behaviours from './stats/behaviours'
 import { useQueryContext } from './query-context'
 import { isRealTimeDashboard } from './util/filters'
+import { useAppNavigate } from './navigation/use-app-navigate'
+import { parseSearch } from './util/url-search-params'
 
 function DashboardStats({
   importedDataInView,
@@ -16,6 +18,21 @@ function DashboardStats({
   importedDataInView?: boolean
   updateImportedDataInView?: (v: boolean) => void
 }) {
+  const navigate = useAppNavigate()
+
+  useEffect(() => {
+    const unsubscribe = window.addEventListener('dashboard:live-navigate', ((
+      e: CustomEvent
+    ) => {
+      navigate({
+        path: e.detail.path,
+        search: () => parseSearch(e.detail.search),
+        replace: true
+      })
+    }) as EventListener)
+    return unsubscribe
+  }, [navigate])
+
   const statsBoxClass =
     'relative min-h-[436px] w-full mt-5 p-4 flex flex-col bg-white dark:bg-gray-900 shadow-sm rounded-md md:min-h-initial md:h-27.25rem md:w-[calc(50%-10px)] md:ml-[10px] md:mr-[10px] first:ml-0 last:mr-0'
 

assets/js/dashboard/navigation/use-app-navigate.tsx

@@ -63,6 +63,12 @@ export const useAppNavigate = () => {
       search,
       ...options
     }: AppNavigationTarget & NavigateOptions) => {
+      window.dispatchEvent(
+        new CustomEvent('dashboard:live-navigate-back', {
+          detail: { search: window.location.search }
+        })
+      )
+
       return _navigate(getToOptions({ path, params, search }), options)
     },
     [getToOptions, _navigate]

assets/js/liveview/live_dashboard.js

@@ -0,0 +1,109 @@
+/**
+ * Hook used for LiveView dashboard. Currently its main purpose
+ * is facilitiating migration from React to LiveView.
+ */
+
+const WIDGETS = {
+  'breakdown-tile': {
+    initialize: function () {
+      this.url = window.location.href
+
+      addListener.bind(this)('phx:update_local_storage', window, (e) => {
+        localStorage.setItem(e.detail.key, e.detail.value)
+      })
+
+      addListener.bind(this)('phx:update_local_storage', this.el, (e) => {
+        const type = e.target.dataset.type || null
+
+        if (type && type == 'dashboard-link') {
+          this.url = e.target.href
+          const uri = new URL(this.url)
+          const path = '/' + uri.pathname.split('/').slice(2).join('/')
+          this.el.dispatchEvent(
+            new CustomEvent('dashboard:live-navigate', {
+              bubbles: true,
+              detail: { path: path, search: uri.search }
+            })
+          )
+
+          this.pushEvent('handle_dashboard_params', { url: this.url })
+
+          e.preventDefault()
+        }
+      })
+
+      addListener.bind(this)('popstate', window, () => {
+        if (this.url !== window.location.href) {
+          this.pushEvent('handle_dashboard_params', {
+            url: window.location.href
+          })
+        }
+      })
+
+      addListener.bind(this)('dashboard:live-navigate-back', window, (e) => {
+        if (
+          typeof e.detail.search === 'string' &&
+          this.url !== window.location.href
+        ) {
+          this.pushEvent('handle_dashboard_params', {
+            url: window.location.href
+          })
+        }
+      })
+    },
+    cleanup: function () {
+      removeListeners.bind(this)()
+    }
+  }
+}
+
+function addListener(eventName, listener, callback) {
+  this.listeners = this.listeners || []
+
+  listener.addEventListener(eventName, callback)
+
+  this.listeners.push({
+    element: listener,
+    event: eventName,
+    callback: callback
+  })
+}
+
+function removeListeners() {
+  if (this.listeners) {
+    this.listeners.forEach((l) => {
+      l.element.removeEventListener(l.event, l.callback)
+    })
+
+    this.listeners = null
+  }
+}
+
+export default {
+  mounted() {
+    this.widget = this.el.getAttribute('data-widget')
+
+    this.initialize()
+  },
+
+  updated() {
+    this.initialize()
+  },
+
+  reconnected() {
+    this.initialize()
+  },
+
+  destroyed() {
+    this.cleanup()
+  },
+
+  initialize() {
+    this.cleanup()
+    WIDGETS[this.widget].initialize.bind(this)()
+  },
+
+  cleanup() {
+    WIDGETS[this.widget].cleanup.bind(this)()
+  }
+}

assets/js/liveview/live_socket.js

@@ -2,20 +2,24 @@
   The modules below this comment block are resolved from '../deps' folder,
   which does not exist when running the lint command in Github CI
 */
-/* eslint-disable import/no-unresolved */
+
 import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import { Modal, Dropdown } from 'prima'
+import LiveDashboard from './live_dashboard'
 import topbar from 'topbar'
-/* eslint-enable import/no-unresolved */
 
 import Alpine from 'alpinejs'
 
 let csrfToken = document.querySelector("meta[name='csrf-token']")
 let websocketUrl = document.querySelector("meta[name='websocket-url']")
+let disablePushStateFlag = document.querySelector(
+  "meta[name='live-socket-disable-push-state']"
+)
+let domain = document.querySelector("meta[name='dashboard-domain']")
 if (csrfToken && websocketUrl) {
-  let Hooks = { Modal, Dropdown }
+  let Hooks = { Modal, Dropdown, LiveDashboard }
   Hooks.Metrics = {
     mounted() {
       this.handleEvent('send-metrics', ({ event_name }) => {
@@ -48,9 +52,13 @@ if (csrfToken && websocketUrl) {
   let token = csrfToken.getAttribute('content')
   let url = websocketUrl.getAttribute('content')
   let liveUrl = url === '' ? '/live' : new URL('/live', url).href
+  let disablePushState =
+    !!disablePushStateFlag &&
+    disablePushStateFlag.getAttribute('content') === 'true'
+  let domainName = domain && domain.getAttribute('content')
   let liveSocket = new LiveSocket(liveUrl, Socket, {
+    disablePushState: disablePushState,
     heartbeatIntervalMs: 10000,
-    params: { _csrf_token: token },
     hooks: Hooks,
     uploaders: Uploaders,
     dom: {
@@ -60,6 +68,18 @@ if (csrfToken && websocketUrl) {
           Alpine.clone(from, to)
         }
       }
+    },
+    params: () => {
+      if (domainName) {
+        return {
+          user_prefs: {
+            page_tab: localStorage.getItem(`pageTab__${domainName}`)
+          },
+          _csrf_token: token
+        }
+      } else {
+        return { _csrf_token: token }
+      }
     }
   })
 

lib/plausible_web/live/dashboard.ex

@@ -0,0 +1,62 @@
+defmodule PlausibleWeb.Live.Dashboard do
+  @moduledoc """
+  LiveView for site dashboard.
+  """
+
+  use PlausibleWeb, :live_view
+
+  alias Plausible.Repo
+  alias Plausible.Teams
+
+  @spec enabled?(Plausible.Site.t() | nil) :: boolean()
+  def enabled?(nil), do: false
+
+  def enabled?(site) do
+    FunWithFlags.enabled?(:live_dashboard, for: site)
+  end
+
+  def mount(_params, %{"domain" => domain, "url" => url}, socket) do
+    user_prefs = get_connect_params(socket)["user_prefs"] || %{}
+
+    # As domain is passed via session, the associated site has already passed
+    # validation logic on plug level.
+    site =
+      Repo.get_by!(Plausible.Site, domain: domain)
+      |> Repo.preload([
+        :owners,
+        :completed_imports,
+        team: [:owners, subscription: Teams.last_subscription_query()]
+      ])
+
+    socket =
+      socket
+      |> assign(:site, site)
+      |> assign(:user_prefs, user_prefs)
+      |> assign(:params, %{})
+
+    {:noreply, socket} = handle_params_internal(%{}, url, socket)
+
+    {:ok, socket}
+  end
+
+  def handle_params_internal(_params, _url, socket) do
+    {:noreply, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div id="live-dashboard-container"></div>
+    """
+  end
+
+  def handle_event("handle_dashboard_params", %{"url" => url}, socket) do
+    query =
+      url
+      |> URI.parse()
+      |> Map.fetch!(:query)
+
+    params = URI.decode_query(query || "")
+
+    handle_params_internal(params, url, socket)
+  end
+end

lib/plausible_web/router.ex

@@ -706,7 +706,10 @@ defmodule PlausibleWeb.Router do
       put "/:domain/settings", SiteController, :update_settings
 
       get "/:domain/export", StatsController, :csv_export
-      get "/:domain/*path", StatsController, :stats
+
+      scope assigns: %{live_socket_disable_push_state: true} do
+        get "/:domain/*path", StatsController, :stats
+      end
     end
   end
 end

lib/plausible_web/templates/layout/app.html.heex

@@ -12,6 +12,12 @@
       <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />
       <meta name="websocket-url" content={websocket_url()} />
     <% end %>
+    <%= if PlausibleWeb.Live.Dashboard.enabled?(assigns[:site]) do %>
+      <%= if assigns[:live_socket_disable_push_state] do %>
+        <meta name="live-socket-disable-push-state" content="true" />
+      <% end %>
+      <meta name="dashboard-domain" content={@site.domain} />
+    <% end %>
     <meta name="robots" content={@conn.private.robots} />
 
     <PlausibleWeb.Components.Layout.favicon conn={@conn} />

lib/plausible_web/templates/stats/stats.html.heex

@@ -54,6 +54,15 @@
     data-team-identifier={@team_identifier}
   >
   </div>
+  <%= if PlausibleWeb.Live.Dashboard.enabled?(@site) do %>
+    {live_render(@conn, PlausibleWeb.Live.Dashboard,
+      id: "live-dashboard-lv",
+      session: %{
+        "domain" => @site.domain,
+        "url" => Plug.Conn.request_url(@conn)
+      }
+    )}
+  <% end %>
   <div id="modal_root"></div>
   <%= if !@conn.assigns[:current_user] && @conn.assigns[:demo] do %>
     <div class="py-12 lg:py-16 lg:flex lg:items-center lg:justify-between">

priv/repo/seeds.exs

@@ -55,6 +55,8 @@ long_random_urls =
     "https://dummy.site#{path}"
   end
 
+FunWithFlags.enable(:live_dashboard)
+
 site =
   new_site(
     domain: "dummy.site",

test/test_helper.exs

@@ -9,6 +9,8 @@ Mox.defmock(Plausible.DnsLookup.Mock,
   for: Plausible.DnsLookupInterface
 )
 
+FunWithFlags.enable(:live_dashboard)
+
 Application.ensure_all_started(:double)
 
 Ecto.Adapters.SQL.Sandbox.mode(Plausible.Repo, :manual)