Feature: add resources page (#820)

Author: kraleppa

assets/app/app.js

@@ -13,6 +13,7 @@ import CopyButton from './hooks/copy_button';
 import TraceBodySearchHighlight from './hooks/trace_body_search_highlight';
 import TraceLabelSearchHighlight from './hooks/trace_label_search_highlight';
 import AssignsBodySearchHighlight from './hooks/assigns_body_search_highlight';
+import ChartHook from './hooks/chart_hook';
 
 import topbar from './vendor/topbar';
 
@@ -38,6 +39,7 @@ function createHooks() {
     TraceBodySearchHighlight,
     TraceLabelSearchHighlight,
     AssignsBodySearchHighlight,
+    ChartHook,
   };
 }
 

assets/app/hooks/chart_hook.js

@@ -0,0 +1,117 @@
+import Chart from 'chart.js/auto';
+
+const MAX_DATA_POINTS = 50;
+
+const DATASET_CONFIG = [
+  { key: 'memory', label: 'Memory', color: 'blue', hidden: false },
+  {
+    key: 'total_heap_size',
+    label: 'Total Heap Size',
+    color: 'red',
+    hidden: true,
+  },
+  { key: 'heap_size', label: 'Heap Size', color: 'green', hidden: true },
+  { key: 'stack_size', label: 'Stack Size', color: 'orange', hidden: true },
+  { key: 'reductions', label: 'Reductions', color: 'purple', hidden: true },
+  {
+    key: 'message_queue_len',
+    label: 'Message Queue Length',
+    color: 'cyan',
+    hidden: true,
+  },
+];
+
+const ChartHook = {
+  mounted() {
+    this.initializeChart();
+    this.setupEventHandlers();
+  },
+
+  setupEventHandlers() {
+    this.handleEvent('update-chart', (data) => {
+      this.updateChartData(data);
+    });
+  },
+
+  initializeChart() {
+    const style = getComputedStyle(document.documentElement);
+    const primaryText = style.getPropertyValue('--primary-text').trim();
+    const defaultBorder = style.getPropertyValue('--default-border').trim();
+
+    this.chart = new Chart(this.el, {
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: this.createDatasets(),
+      },
+      options: this.createChartOptions(primaryText, defaultBorder),
+    });
+  },
+
+  createDatasets() {
+    return DATASET_CONFIG.map(({ label, color, hidden }) => ({
+      label,
+      backgroundColor: color,
+      borderColor: color,
+      hidden,
+      data: [],
+    }));
+  },
+
+  createChartOptions(primaryText, defaultBorder) {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      plugins: {
+        legend: {
+          labels: {
+            color: primaryText,
+          },
+        },
+      },
+      scales: {
+        x: {
+          ticks: { color: primaryText },
+          grid: { color: defaultBorder },
+        },
+        y: {
+          ticks: { color: primaryText },
+          grid: { color: defaultBorder },
+          beginAtZero: true,
+        },
+      },
+    };
+  },
+
+  updateChartData(data) {
+    const timeString = this.formatTimestamp();
+    this.chart.data.labels.push(timeString);
+
+    DATASET_CONFIG.forEach(({ key }, index) => {
+      const value = Number(data[key]);
+      this.chart.data.datasets[index].data.push(value);
+    });
+
+    this.trimOldDataIfNeeded();
+    this.chart.update('none');
+  },
+
+  formatTimestamp() {
+    return new Date().toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    });
+  },
+
+  trimOldDataIfNeeded() {
+    if (this.chart.data.labels.length > MAX_DATA_POINTS) {
+      this.chart.data.labels.shift();
+      this.chart.data.datasets.forEach((dataset) => dataset.data.shift());
+    }
+  },
+};
+
+export default ChartHook;

assets/app/icons/chart-line.svg

@@ -1,9 +1,10 @@
 {
   "dependencies": {
     "@alpinejs/collapse": "^3.14.7",
-    "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.10",
     "alpinejs": "^3.14.7",
+    "chart.js": "^4.5.1",
     "phoenix": "^1.7.17",
     "phoenix_html": "^3.3.4",
     "phoenix_live_view": "^1.0.0"

assets/app/icons/stopwatch.svg

@@ -0,0 +1,59 @@
+defmodule LiveDebugger.API.System.ProcessInfo do
+  @moduledoc """
+  This module provides wrappers for system functions that queries process information.
+  """
+
+  @callback get_info(pid :: pid()) :: {:ok, keyword()} | {:error, term()}
+
+  @doc """
+  Wrapper for `:erlang.process_info/1`.
+  Returns a keyword list of data items for the given process.
+  """
+
+  @spec get_info(pid :: pid()) :: {:ok, keyword()} | {:error, term()}
+  def get_info(pid) when is_pid(pid) do
+    impl().get_info(pid)
+  end
+
+  defp impl() do
+    Application.get_env(
+      :live_debugger,
+      :api_process_info,
+      __MODULE__.Impl
+    )
+  end
+
+  defmodule Impl do
+    @moduledoc false
+    @behaviour LiveDebugger.API.System.ProcessInfo
+
+    @items_list ~w(
+      current_function
+      garbage_collection
+      heap_size
+      initial_call
+      links
+      memory
+      message_queue_len
+      monitored_by
+      monitors
+      priority
+      reductions
+      registered_name
+      stack_size
+      status
+      suspending
+      total_heap_size
+    )a
+
+    @impl true
+    def get_info(pid) when is_pid(pid) do
+      pid
+      |> :erlang.process_info(@items_list)
+      |> case do
+        info when is_list(info) -> {:ok, info}
+        _ -> {:error, "Could not find process"}
+      end
+    end
+  end
+end

assets/app/package-lock.json

@@ -0,0 +1,135 @@
+defmodule LiveDebugger.App.Debugger.Resources.Components do
+  @moduledoc false
+
+  use LiveDebugger.App.Web, :component
+
+  alias LiveDebugger.App.Web.LiveComponents.LiveDropdown
+  alias LiveDebugger.App.Debugger.Resources.Structs.ProcessInfo
+  alias LiveDebugger.Utils.Memory
+
+  @refresh_intervals [
+    {"1 second", 1000},
+    {"5 seconds", 5000},
+    {"15 seconds", 15_000},
+    {"30 seconds", 30_000}
+  ]
+
+  @keys_order ~w(
+    initial_call
+    current_function
+    registered_name
+    status
+    message_queue_len
+    priority
+    reductions
+    memory
+    total_heap_size
+    heap_size
+    stack_size
+  )a
+
+  @memory_keys ~w(memory total_heap_size heap_size stack_size)a
+
+  attr(:id, :string, required: true)
+  attr(:name, :string, required: true)
+  attr(:class, :string, default: "", doc: "Additional classes to add to the dropdown container")
+
+  attr(:selected_interval, :integer,
+    required: true,
+    doc: "Currently selected refresh interval in milliseconds"
+  )
+
+  def refresh_select(assigns) do
+    assigns = assign(assigns, :options, @refresh_intervals)
+
+    ~H"""
+    <.live_component module={LiveDropdown} id={@id} class={@class} direction={:bottom_left}>
+      <:button>
+        <.refresh_button selected_interval={@selected_interval} />
+      </:button>
+      <div class="min-w-44 flex flex-col p-2 gap-1">
+        <.form for={%{}} phx-change="change-refresh-interval">
+          <.radio_button
+            :for={{label, value} <- @options}
+            name={@name}
+            value={value}
+            label={label}
+            checked={value == @selected_interval}
+          />
+        </.form>
+      </div>
+    </.live_component>
+    """
+  end
+
+  attr(:process_info, ProcessInfo, required: true)
+
+  def process_info(assigns) do
+    assigns = assign(assigns, keys_order: @keys_order)
+
+    ~H"""
+    <div>
+      <%= for key <- @keys_order do %>
+        <div class="flex py-1">
+          <span class="font-medium w-40 flex-shrink-0"><%= display_key(key) %>:</span>
+          <span class={"font-code #{value_color_class(key)} truncate"}>
+            <%= @process_info |> Map.get(key) |> display_value(key) %>
+          </span>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  attr(:selected_interval, :integer, required: true)
+
+  defp refresh_button(assigns) do
+    ~H"""
+    <button
+      aria-label="Refresh Rate"
+      class={[
+        "border border-default-border rounded-md p-2 text-accent-text flex items-center gap-1"
+      ]}
+    >
+      <.icon name="icon-stopwatch" class="h-4 w-4" />
+      <span class="text-xs font-semibold">
+        Refresh Rate (<%= Kernel.round(@selected_interval / 1000) %> s)
+      </span>
+    </button>
+    """
+  end
+
+  defp display_key(:message_queue_len), do: "Message Queue Length"
+
+  defp display_key(key) do
+    key
+    |> to_string()
+    |> String.replace(":", " ")
+    |> String.split("_")
+    |> Enum.map_join(" ", &String.capitalize/1)
+  end
+
+  defp value_color_class(:message_queue_len), do: "text-code-1"
+  defp value_color_class(:reductions), do: "text-code-1"
+  defp value_color_class(:memory), do: "text-code-4"
+  defp value_color_class(:total_heap_size), do: "text-code-4"
+  defp value_color_class(:heap_size), do: "text-code-4"
+  defp value_color_class(:stack_size), do: "text-code-4"
+  defp value_color_class(_), do: "text-code-2"
+
+  defp display_value(mfa, :current_function), do: mfa_to_string(mfa)
+  defp display_value(mfa, :initial_call), do: mfa_to_string(mfa)
+  defp display_value(priority, :priority), do: "#{priority}"
+  defp display_value(status, :status), do: "#{status}"
+  defp display_value([], :registered_name), do: ""
+
+  defp display_value(size, key) when key in @memory_keys do
+    Memory.bytes_to_pretty_string(size)
+  end
+
+  defp display_value(value, _key), do: inspect(value)
+
+  defp mfa_to_string({module, function, arity}) do
+    "#{inspect(module)}.#{function}/#{arity}"
+  end
+end