lib/plausible_web/templates/debug/clickhouse.html.heex

<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-sm p-8 mb-4 mt-8 mx-auto">
  <section class="grid grid-cols-1 gap-y-3 divide-y">
    <%= for log <- @queries do %>
      <details class="group py-1">
        <summary class="flex cursor-pointer flex-row items-center justify-between py-1 font-semibold text-gray-800 dark:text-gray-200 pt-4">
          {log["request_method"]} {controller_name(log["phoenix_controller"])}.{log[
            "phoenix_action"
          ]} ({log[:query_duration_ms]}ms)
          <svg
            class="h-6 w-6 rotate-0 transform text-gray-400 dark:text-gray-200 group-open:rotate-180"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <table class="table table-striped table-auto text-gray-800 dark:text-gray-200">
          <tbody>
            <%= for {key, value} <- log do %>
              <tr class="table-row">
                <td class="table-cell p-2">{key}</td>
                <td class="table-cell p-2">
                  <%= case key do %>
                    <% :query -> %>
                      <pre class="whitespace-pre-wrap"><%= value %></pre>
                    <% "params" -> %>
                      <pre><%= Jason.encode!(value, pretty: true) %></pre>
                    <% _ -> %>
                      {value}
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </details>
    <% end %>
  </section>

  <%= if length(@queries) == 0 do %>
    <p class="text-gray-500">
      No queries run by user in the last few minutes. Try opening a dashboard
    </p>
  <% end %>
</div>