Add refresh_interval as a reporting option for chart components (#474)

Author: pkinney

assets/js/metrics_live/index.js

@@ -125,6 +125,7 @@ function nextTaggedValueForCallback({ x, y, z }, callback) {
 }
 
 const getPruneThreshold = ({ pruneThreshold = 1000 }) => pruneThreshold
+const getRefreshInterval = ({ refreshInterval = 1000 }) => refreshInterval
 
 // Handles the basic metrics like Counter, LastValue, and Sum.
 class CommonMetric {
@@ -210,6 +211,7 @@ class Summary {
     this.datasets = [{ key: "|x|", data: [] }]
     this.chart = new uPlot(config, this.constructor.initialData(options), chartEl)
     this.pruneThreshold = getPruneThreshold(options)
+    this.refreshInterval = getRefreshInterval(options)
     this.options = options
 
     if (options.tagged) {
@@ -467,8 +469,7 @@ const PhxChartComponent = {
       tagged: (chartEl.dataset.tags && chartEl.dataset.tags !== "") || false,
       width: Math.max(size.width, minChartSize.width),
       height: minChartSize.height,
-      now: new Date() / 1e3,
-      refreshInterval: 1000
+      now: new Date() / 1e3
     })
 
     this.chart = new TelemetryChart(chartEl, options)

guides/metrics.md

@@ -151,6 +151,9 @@ The following reporter options are available to the dashboard:
     points. When the threshold is reached, the chart data will
     be pruned by half. Default is `1_000`.
 
+  * `:refresh_interval` - the interval in milliseconds at which the chart
+    will be refreshed. The default value is `1_000`.
+
   * `:bucket_size` - the unit width of each bucket. This option only
     applies to `distribution` histograms. The default value is `20`.
 

lib/phoenix/live_dashboard/components/chart_component.ex

@@ -16,6 +16,7 @@ defmodule Phoenix.LiveDashboard.ChartComponent do
   defp validate_assigns!(assigns) do
     validate_positive_integer_or_nil!(assigns[:bucket_size], :bucket_size)
     validate_positive_integer_or_nil!(assigns[:prune_threshold], :prune_threshold)
+    validate_positive_integer_or_nil!(assigns[:refresh_interval], :refresh_interval)
     :ok
   end
 
@@ -48,6 +49,7 @@ defmodule Phoenix.LiveDashboard.ChartComponent do
             data-tags={Enum.join(@tags, "-")}
             data-unit={@unit}
             data-prune-threshold={@prune_threshold}
+            data-refresh-interval={@refresh_interval}
             {bucket_size(@bucket_size)}
           >
           </div>

lib/phoenix/live_dashboard/page_builder.ex

@@ -916,6 +916,11 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
   attr :label, :string, default: nil, doc: "Default label to use in the chart."
   attr :tags, :list, default: [], doc: "Optional list of tags."
   attr :prune_threshold, :integer, default: 1_000, doc: "Number of points to keep before pruning."
+
+  attr :refresh_interval, :integer,
+    default: 1_000,
+    doc: "The interval in milliseconds to refresh the chart."
+
   attr :unit, :string, default: "", doc: "The unit that represent the chart."
 
   attr :bucket_size, :integer,
@@ -939,6 +944,7 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
       label={@label}
       tags={@tags}
       prune_threshold={@prune_threshold}
+      refresh_interval={@refresh_interval}
       unit={@unit}
       bucket_size={@bucket_size}
       full_width={@full_width}

lib/phoenix/live_dashboard/pages/metrics_page.ex

@@ -95,6 +95,7 @@ defmodule Phoenix.LiveDashboard.MetricsPage do
       label: chart_label(metric),
       tags: metric.tags,
       prune_threshold: prune_threshold(metric),
+      refresh_interval: refresh_interval(metric),
       unit: chart_unit(metric.unit),
       bucket_size: bucket_size(kind, metric)
     }
@@ -134,6 +135,11 @@ defmodule Phoenix.LiveDashboard.MetricsPage do
     metric.reporter_options[:prune_threshold] || @default_prune_threshold
   end
 
+  @default_refresh_interval 1_000
+  defp refresh_interval(metric) do
+    metric.reporter_options[:refresh_interval] || @default_refresh_interval
+  end
+
   defp bucket_size(:distribution, metric), do: normalize_bucket_size(metric)
   defp bucket_size(_kind, _metric), do: nil
 

test/phoenix/live_dashboard/components/chart_component_test.exs

@@ -17,6 +17,7 @@ defmodule Phoenix.LiveDashboard.ChartComponentTest do
       tags: [],
       unit: "",
       prune_threshold: 1_000,
+      refresh_interval: 1_000,
       bucket_size: 20
     }
 
@@ -61,6 +62,11 @@ defmodule Phoenix.LiveDashboard.ChartComponentTest do
       assert result =~ ~s|data-prune-threshold="5"|
     end
 
+    test "renders refresh interval" do
+      result = render_chart(refresh_interval: 5)
+      assert result =~ ~s|data-refresh-interval="5"|
+    end
+
     test "renders data" do
       result = render_chart(data: [{"x", "y", "z"}])
       assert result =~ ~s|<span data-x="x" data-y="y" data-z="z">|
@@ -115,5 +121,19 @@ defmodule Phoenix.LiveDashboard.ChartComponentTest do
         render_chart(prune_threshold: true)
       end
     end
+
+    test "refresh_interval" do
+      msg = ":refresh_interval must be a positive integer, got: -1"
+
+      assert_raise ArgumentError, msg, fn ->
+        render_chart(refresh_interval: -1)
+      end
+
+      msg = ":refresh_interval must be a positive integer, got: true"
+
+      assert_raise ArgumentError, msg, fn ->
+        render_chart(refresh_interval: true)
+      end
+    end
   end
 end

test/phoenix/live_dashboard/pages/metrics_page_test.exs

@@ -139,5 +139,10 @@ defmodule Phoenix.LiveDashboard.MetricsPageTest do
       opts = [reporter_options: [prune_threshold: 5]]
       assert %{prune_threshold: 5} = subject(last_value([:a, :b, :c, :size], opts))
     end
+
+    test "adds refresh_interval from report_options" do
+      opts = [reporter_options: [refresh_interval: 5]]
+      assert %{refresh_interval: 5} = subject(last_value([:a, :b, :c, :size], opts))
+    end
   end
 end