Remove hardacoded cpu- from shared usage IDs

Author: josevalim

lib/phoenix/live_dashboard/page_builder.ex

@@ -497,7 +497,7 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
     attr :current, :integer, required: true, doc: "The current value of the usage."
     attr :limit, :integer, required: true, doc: "The max value of usage."
 
-    attr :dom_sub_id, :string,
+    attr :dom_id, :string,
       required: true,
       doc: "An unique identifier for the usage that will be concatenated to `dom_id`."
 
@@ -513,7 +513,7 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
     <div class="card">
       <div class="card-body card-usage">
         <%= for usage <- @usage do %>
-          <.title_bar_component dom_id={"#{@dom_id}-#{usage.dom_sub_id}"} percent={usage.percent} csp_nonces={@csp_nonces} >
+          <.title_bar_component dom_id={"#{@dom_id}-#{usage.dom_id}"} percent={usage.percent} csp_nonces={@csp_nonces} >
             <div>
               <%= usage.title %>
               <.hint text={usage[:hint]} :if={usage[:hint]}/>
@@ -574,7 +574,7 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
     doc: """
     A list of `Map` with the following keys:
       * `:data` - A list of tuples with 4 elements with the following data: `{usage_name, usage_percent, color, hint}`
-      * `:dom_sub_id` - Required. Usage identifier.
+      * `:dom_id` - Required. Usage identifier.
       * `:title`- Bar title.
     """
 
@@ -585,6 +585,7 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
 
   attr :total_legend, :string, required: true, doc: "The legent of the total usage."
   attr :total_usage, :string, required: true, doc: "The value of the total usage."
+  attr :dom_id, :string, default: nil, doc: "id attribute for the HTML the main tag."
 
   attr :csp_nonces, :any,
     required: true,
@@ -606,12 +607,12 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
     <div class="card">
       <.card_title title={@inner_title} hint={@inner_hint} />
       <div class="card-body">
-        <div phx-hook="PhxColorBarHighlight" id="cpu-color-bars">
+        <div phx-hook="PhxColorBarHighlight" id={"#{@dom_id}-color-bars"}>
           <div :for={usage <- @usages} class="flex-grow-1 mb-3">
             <div class="progress color-bar-progress flex-grow-1 mb-3">
               <span :if={usage[:title]} class="color-bar-progress-title"><%= usage[:title] %></span>
               <%= for {{name, value, color, _desc}, index} <- Enum.with_index(usage.data) do %>
-                <style nonce={@csp_nonces.style}>#<%= "cpu-#{usage.dom_sub_id}-progress-#{index}" %>{width:<%= value %>%}</style>
+                <style nonce={@csp_nonces.style}>#<%= "#{@dom_id}-#{usage.dom_id}-progress-#{index}" %>{width:<%= value %>%}</style>
                 <div
                     title={"#{name} - #{Phoenix.LiveDashboard.Helpers.format_percent(value)}"}
                     class={"progress-bar color-bar-progress-bar bg-gradient-#{color}"}
@@ -621,7 +622,7 @@ defmodule Phoenix.LiveDashboard.PageBuilder do
                     aria-valuemax="100"
                     data-name={name}
                     data-empty={empty?(value)}
-                    id={"cpu-#{usage.dom_sub_id}-progress-#{index}"}>
+                    id={"#{@dom_id}-#{usage.dom_id}-progress-#{index}"}>
                 </div>
               <% end %>
             </div>

lib/phoenix/live_dashboard/pages/home_page.ex

@@ -276,7 +276,7 @@ defmodule Phoenix.LiveDashboard.HomePage do
       current: system_usage[type],
       limit: system_limits[type],
       percent: percentage(system_usage[type], system_limits[type]),
-      dom_sub_id: "total",
+      dom_id: "total",
       hint: raw(@hints[type]),
       title: Phoenix.Naming.humanize(type)
     }
@@ -293,6 +293,7 @@ defmodule Phoenix.LiveDashboard.HomePage do
     <.row>
       <:col>
         <.shared_usage_card
+          dom_id="memory"
           title="Memory"
           usages={[calculate_memory_usage_percent(@memory_usage, @system_usage.memory.total)]}
           total_data={@memory_usage}
@@ -320,7 +321,7 @@ defmodule Phoenix.LiveDashboard.HomePage do
 
     %{
       data: data,
-      dom_sub_id: "total"
+      dom_id: "total"
     }
   end
 

lib/phoenix/live_dashboard/pages/os_mon_page.ex

@@ -71,7 +71,7 @@ defmodule Phoenix.LiveDashboard.OSMonPage do
         current: format_bytes(current),
         limit: format_bytes(limit),
         percent: percentage(current, limit),
-        dom_sub_id: value_key,
+        dom_id: value_key,
         hint: hint,
         title: key
       }
@@ -102,7 +102,7 @@ defmodule Phoenix.LiveDashboard.OSMonPage do
         current: format_percent(percent),
         limit: format_bytes(kbytes * 1024),
         percent: percent,
-        dom_sub_id: index,
+        dom_id: index,
         title: mountpoint
       }
     end)

test/phoenix/live_dashboard/page_builder_test.exs

@@ -91,7 +91,7 @@ defmodule Phoenix.LiveDashboard.PageBuilderTest do
           usages={[
             %{
               data: [{"foo", 123, "green", nil}, {"bar", 456, "blue", nil}],
-              dom_sub_id: "test-dom-sub-id",
+              dom_id: "sub-id",
               title: "test-usage-title"
             }
           ]}
@@ -120,12 +120,12 @@ defmodule Phoenix.LiveDashboard.PageBuilderTest do
     assert result =~ ~S|<span class="color-bar-progress-title">test-usage-title</span>|
 
     assert result =~
-             ~r|<style nonce="style_nonce">#cpu-test-dom-sub-id-progress-(1\|2){width:(123\|456)%}</style>|
+             ~r|<style nonce="style_nonce">#test-dom-id-sub-id-progress-(1\|2){width:(123\|456)%}</style>|
 
     assert result =~ ~r|title=\"(foo\|bar) - (123\|456)%\"|
     assert result =~ ~r|class=\"progress-bar color-bar-progress-bar bg-gradient-(blue\|green)\"|
     assert result =~ ~r|data-name=\"(foo\|bar)\"|
-    assert result =~ ~r|id=\"cpu-test-dom-sub-id-progress-(0\|1)\"|
+    assert result =~ ~r|id=\"test-dom-id-sub-id-progress-(0\|1)\"|
 
     assert result =~ ~r|color-bar-legend-entry\" data-name=\"(foo\|bar)\"|
     assert result =~ ~r|<div class="color-bar-legend-color bg-(blue\|green) mr-2"></div>|
@@ -149,7 +149,7 @@ defmodule Phoenix.LiveDashboard.PageBuilderTest do
           <:usage
               current={10}
               limit={150}
-              dom_sub_id="test-dom-sub-id"
+              dom_id="test-dom-sub-id"
               title="test-usage-title"
               hint="test-usage-hint"
               percent={13}