From d45ff5490588258e31435b220ebd88bffe189104 Mon Sep 17 00:00:00 2001
From: Thiago Esteves <calori@gmail.com>
Date: Mon, 26 May 2025 10:59:53 -0300
Subject: [PATCH 1/2] Normalizing functions and adding highlight to nodes that
 are current online

---
 lib/web/components/metrics/phx_lv_socket.ex   |  3 +-
 lib/web/components/metrics/vm_limits.ex       |  3 +-
 lib/web/components/metrics/vm_memory.ex       |  3 +-
 lib/web/components/metrics/vm_run_queue.ex    |  3 +-
 lib/web/components/multi_select.ex            | 56 +++++++++----------
 lib/web/components/multi_select_list.ex       | 17 +-----
 lib/web/helpers.ex                            | 13 +++++
 lib/web/pages/apps/page.ex                    |  4 +-
 lib/web/pages/metrics/page.ex                 | 12 +++-
 test/observer_web/web/live/apps/page_test.exs | 20 +++----
 .../web/live/metrics/page_test.exs            | 10 ++--
 .../web/live/metrics/phoenix_test.exs         | 16 +++---
 .../web/live/metrics/phx_lv_socket_test.exs   | 12 ++--
 .../web/live/metrics/vm_limits_test.exs       | 12 ++--
 .../web/live/metrics/vm_memory_test.exs       | 12 ++--
 .../web/live/metrics/vm_run_queue_test.exs    | 12 ++--
 .../web/live/tracing/page_test.exs            | 18 +++---
 test/support/conn_case.ex                     |  2 +
 18 files changed, 122 insertions(+), 106 deletions(-)

diff --git a/lib/web/components/metrics/phx_lv_socket.ex b/lib/web/components/metrics/phx_lv_socket.ex
index 361bf93..b8ba93b 100644
--- a/lib/web/components/metrics/phx_lv_socket.ex
+++ b/lib/web/components/metrics/phx_lv_socket.ex
@@ -5,6 +5,7 @@ defmodule Observer.Web.Components.Metrics.PhxLvSocket do
   use Phoenix.Component
 
   alias Observer.Web.Components.Metrics.Common
+  alias Observer.Web.Helpers
 
   attr :title, :string, required: true
   attr :service, :string, required: true
@@ -18,7 +19,7 @@ defmodule Observer.Web.Components.Metrics.PhxLvSocket do
       :if={String.match?(@metric, ~r/^phoenix\.liveview\.socket\..+\.total$/)}
       style={"grid-column: span #{@cols};"}
     >
-      <% id = String.replace("#{@service}-#{@metric}", ["@", ".", "/"], "-") %>
+      <% id = Helpers.normalize_id("#{@service}-#{@metric}") %>
       <div class="relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg rounded">
         <div class="rounded-t mb-0 px-4 py-3 border border-b border-solid">
           <div class="flex flex-wrap items-center">
diff --git a/lib/web/components/metrics/vm_limits.ex b/lib/web/components/metrics/vm_limits.ex
index 56c7385..21af9d6 100644
--- a/lib/web/components/metrics/vm_limits.ex
+++ b/lib/web/components/metrics/vm_limits.ex
@@ -5,6 +5,7 @@ defmodule Observer.Web.Components.Metrics.VmLimits do
   use Phoenix.Component
 
   alias Observer.Web.Components.Metrics.Common
+  alias Observer.Web.Helpers
 
   attr :title, :string, required: true
   attr :service, :string, required: true
@@ -22,7 +23,7 @@ defmodule Observer.Web.Components.Metrics.VmLimits do
   def content(assigns) do
     ~H"""
     <div :if={@metric in @supported_metrics} style={"grid-column: span #{@cols};"}>
-      <% id = String.replace("#{@service}-#{@metric}", ["@", ".", "/"], "-") %>
+      <% id = Helpers.normalize_id("#{@service}-#{@metric}") %>
       <div class="relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg rounded">
         <div class="rounded-t mb-0 px-4 py-3 border border-b border-solid">
           <div class="flex flex-wrap items-center">
diff --git a/lib/web/components/metrics/vm_memory.ex b/lib/web/components/metrics/vm_memory.ex
index a6ac6d2..cf3e777 100644
--- a/lib/web/components/metrics/vm_memory.ex
+++ b/lib/web/components/metrics/vm_memory.ex
@@ -5,6 +5,7 @@ defmodule Observer.Web.Components.Metrics.VmMemory do
   use Phoenix.Component
 
   alias Observer.Web.Components.Metrics.Common
+  alias Observer.Web.Helpers
 
   attr :title, :string, required: true
   attr :service, :string, required: true
@@ -15,7 +16,7 @@ defmodule Observer.Web.Components.Metrics.VmMemory do
   def content(assigns) do
     ~H"""
     <div :if={@metric == "vm.memory.total"} style={"grid-column: span #{@cols};"}>
-      <% id = String.replace("#{@service}-#{@metric}", ["@", ".", "/"], "-") %>
+      <% id = Helpers.normalize_id("#{@service}-#{@metric}") %>
       <div class="relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg rounded">
         <div class="rounded-t mb-0 px-4 py-3 border border-b border-solid">
           <div class="flex flex-wrap items-center">
diff --git a/lib/web/components/metrics/vm_run_queue.ex b/lib/web/components/metrics/vm_run_queue.ex
index f41b532..8c8771e 100644
--- a/lib/web/components/metrics/vm_run_queue.ex
+++ b/lib/web/components/metrics/vm_run_queue.ex
@@ -5,6 +5,7 @@ defmodule Observer.Web.Components.Metrics.VmRunQueue do
   use Phoenix.Component
 
   alias Observer.Web.Components.Metrics.Common
+  alias Observer.Web.Helpers
 
   attr :title, :string, required: true
   attr :service, :string, required: true
@@ -22,7 +23,7 @@ defmodule Observer.Web.Components.Metrics.VmRunQueue do
   def content(assigns) do
     ~H"""
     <div :if={@metric in @supported_metrics} style={"grid-column: span #{@cols};"}>
-      <% id = String.replace("#{@service}-#{@metric}", ["@", ".", "/"], "-") %>
+      <% id = Helpers.normalize_id("#{@service}-#{@metric}") %>
       <div class="relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg rounded">
         <div class="rounded-t mb-0 px-4 py-3 border border-b border-solid">
           <div class="flex flex-wrap items-center">
diff --git a/lib/web/components/multi_select.ex b/lib/web/components/multi_select.ex
index 880be80..cd795a1 100644
--- a/lib/web/components/multi_select.ex
+++ b/lib/web/components/multi_select.ex
@@ -8,6 +8,7 @@ defmodule Observer.Web.Components.MultiSelect do
   """
   use Phoenix.Component
 
+  alias Observer.Web.Helpers
   alias Phoenix.LiveView.JS
 
   attr :id, :string, required: true
@@ -42,13 +43,7 @@ defmodule Observer.Web.Components.MultiSelect do
                         {"#{item.name}:#{key}"}
                       </div>
                       <button
-                        id={
-                          String.replace(
-                            "#{@id}-#{item.name}-#{key}-remove-item",
-                            ["@", ".", "/"],
-                            "-"
-                          )
-                        }
+                        id={Helpers.normalize_id("#{@id}-#{item.name}-#{key}-remove-item")}
                         class="flex flex-auto flex-row-reverse"
                         phx-click="multi-select-remove-item"
                         phx-value-key={key}
@@ -85,7 +80,7 @@ defmodule Observer.Web.Components.MultiSelect do
               </div>
               <div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 ">
                 <button
-                  id={"#{@id}-toggle-options"}
+                  id={Helpers.normalize_id("#{@id}-toggle-options")}
                   class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none"
                   phx-click="toggle-options"
                 >
@@ -128,14 +123,11 @@ defmodule Observer.Web.Components.MultiSelect do
                     <div class="flex flex-wrap">
                       <%= for key <- item.keys do %>
                         <button
-                          id={
-                            String.replace(
-                              "#{@id}-#{item.name}-#{key}-add-item",
-                              ["@", ".", "/"],
-                              "-"
-                            )
-                          }
-                          class="flex justify-center items-center m-1 font-medium px-2 rounded-full text-gray-700 bg-gray-100 border border-gray-300"
+                          id={Helpers.normalize_id("#{@id}-#{item.name}-#{key}-add-item")}
+                          class={[
+                            "flex justify-center items-center m-1 font-medium px-2 rounded-full",
+                            unselected_highlight_color(key, item.unselected_highlight)
+                          ]}
                           phx-click="multi-select-add-item"
                           phx-value-key={key}
                           phx-value-item={item.name}
@@ -175,24 +167,32 @@ defmodule Observer.Web.Components.MultiSelect do
     """
   end
 
-  def border_item_color("services"), do: "border-teal-300"
-  def border_item_color("apps"), do: "border-blue-400"
-  def border_item_color("metrics"), do: "border-orange-400"
+  defp border_item_color("services"), do: "border-teal-300"
+  defp border_item_color("apps"), do: "border-blue-400"
+  defp border_item_color("metrics"), do: "border-orange-400"
   # coveralls-ignore-start
-  def border_item_color(_), do: "border-gray-300"
+  defp border_item_color(_), do: "border-gray-300"
   # coveralls-ignore-stop
 
-  def bg_item_color("services"), do: "bg-teal-50"
-  def bg_item_color("apps"), do: "bg-blue-50"
-  def bg_item_color("metrics"), do: "bg-orange-50"
+  defp bg_item_color("services"), do: "bg-teal-50"
+  defp bg_item_color("apps"), do: "bg-blue-50"
+  defp bg_item_color("metrics"), do: "bg-orange-50"
   # coveralls-ignore-start
-  def bg_item_color(_), do: "bg-gray-50"
+  defp bg_item_color(_), do: "bg-gray-50"
   # coveralls-ignore-stop
 
-  def text_item_color("services"), do: "text-teal-700"
-  def text_item_color("apps"), do: "text-blue-700"
-  def text_item_color("metrics"), do: "text-orange-700"
+  defp text_item_color("services"), do: "text-teal-700"
+  defp text_item_color("apps"), do: "text-blue-700"
+  defp text_item_color("metrics"), do: "text-orange-700"
   # coveralls-ignore-start
-  def text_item_color(_), do: "text-teal-700"
+  defp text_item_color(_), do: "text-teal-700"
   # coveralls-ignore-stop
+
+  defp unselected_highlight_color(key, unselected_highlight) do
+    if key in unselected_highlight do
+      "text-gray-700 bg-green-100 borde border-green-300"
+    else
+      "text-gray-700 bg-gray-100 borde border-gray-300"
+    end
+  end
 end
diff --git a/lib/web/components/multi_select_list.ex b/lib/web/components/multi_select_list.ex
index 9b79f33..0e9e008 100644
--- a/lib/web/components/multi_select_list.ex
+++ b/lib/web/components/multi_select_list.ex
@@ -9,6 +9,7 @@ defmodule Observer.Web.Components.MultiSelectList do
   use Phoenix.Component
 
   alias Observer.Web.Components.Core
+  alias Observer.Web.Helpers
   alias Phoenix.LiveView.JS
 
   attr :id, :string, required: true
@@ -63,13 +64,7 @@ defmodule Observer.Web.Components.MultiSelectList do
                         {"#{item.name}:#{key}"}
                       </div>
                       <button
-                        id={
-                          String.replace(
-                            "#{@id}-#{item.name}-#{key}-remove-item",
-                            ["@", ".", "/"],
-                            "-"
-                          )
-                        }
+                        id={Helpers.normalize_id("#{@id}-#{item.name}-#{key}-remove-item")}
                         class="flex flex-auto flex-row-reverse"
                         phx-click="multi-select-remove-item"
                         phx-value-key={key}
@@ -168,13 +163,7 @@ defmodule Observer.Web.Components.MultiSelectList do
 
                       <%= for key <- item.keys do %>
                         <button
-                          id={
-                            String.replace(
-                              "#{@id}-#{item.name}-#{key}-add-item",
-                              ["@", ".", "/"],
-                              "-"
-                            )
-                          }
+                          id={Helpers.normalize_id("#{@id}-#{item.name}-#{key}-add-item")}
                           class="flex justify-center items-center m-1 font-medium  px-2 rounded-full text-gray-700 bg-gray-100 border border-gray-300"
                           phx-click="multi-select-add-item"
                           phx-value-key={key}
diff --git a/lib/web/helpers.ex b/lib/web/helpers.ex
index ec09b18..37e5143 100644
--- a/lib/web/helpers.ex
+++ b/lib/web/helpers.ex
@@ -33,6 +33,19 @@ defmodule Observer.Web.Helpers do
     end
   end
 
+  @doc """
+  This function exchange "@", ".", "/" to "-"
+
+  ## Examples
+
+    iex> alias Observer.Web.Helpers
+    ...> assert Helpers.normalize_id("my_app-1@host") == "my_app-1-host"
+    ...> assert Helpers.normalize_id("my_app-2@host") == "my_app-2-host"
+  """
+  def normalize_id(text) do
+    String.replace(text, ["@", ".", "/"], "-")
+  end
+
   @doc """
   Construct a path to a dashboard page with optional params.
 
diff --git a/lib/web/pages/apps/page.ex b/lib/web/pages/apps/page.ex
index 7a2c8bd..e150798 100644
--- a/lib/web/pages/apps/page.ex
+++ b/lib/web/pages/apps/page.ex
@@ -118,8 +118,8 @@ defmodule Observer.Web.Apps.Page do
             %{name: "apps", keys: @node_info.selected_apps_keys}
           ]}
           unselected={[
-            %{name: "services", keys: @unselected_services_keys},
-            %{name: "apps", keys: @unselected_apps_keys}
+            %{name: "services", keys: @unselected_services_keys, unselected_highlight: []},
+            %{name: "apps", keys: @unselected_apps_keys, unselected_highlight: []}
           ]}
           show_options={@show_observer_options}
         />
diff --git a/lib/web/pages/metrics/page.ex b/lib/web/pages/metrics/page.ex
index 2e14530..175aad8 100644
--- a/lib/web/pages/metrics/page.ex
+++ b/lib/web/pages/metrics/page.ex
@@ -46,6 +46,10 @@ defmodule Observer.Web.Metrics.Page do
       |> assign(unselected_metrics_keys: unselected_metrics_keys)
       |> assign(attention_msg: attention_msg)
       |> assign(mode_color: mode_color)
+      |> assign(
+        services_unselected_highlight:
+          (Node.list() ++ [Node.self()]) |> Enum.map(&Atom.to_string/1)
+      )
 
     ~H"""
     <div class="min-h-screen bg-white">
@@ -96,8 +100,12 @@ defmodule Observer.Web.Metrics.Page do
             %{name: "metrics", keys: @node_info.selected_metrics_keys}
           ]}
           unselected={[
-            %{name: "services", keys: @unselected_services_keys},
-            %{name: "metrics", keys: @unselected_metrics_keys}
+            %{
+              name: "services",
+              keys: @unselected_services_keys,
+              unselected_highlight: @services_unselected_highlight
+            },
+            %{name: "metrics", keys: @unselected_metrics_keys, unselected_highlight: []}
           ]}
           show_options={@show_metric_options}
         />
diff --git a/test/observer_web/web/live/apps/page_test.exs b/test/observer_web/web/live/apps/page_test.exs
index d6a1e5e..6097fe4 100644
--- a/test/observer_web/web/live/apps/page_test.exs
+++ b/test/observer_web/web/live/apps/page_test.exs
@@ -45,7 +45,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Add/Remove Local Service + Kernel App", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -87,7 +87,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Add/Remove Kernel App + Local Service", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -129,7 +129,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Select Service+Apps and select a process to request information", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
@@ -182,7 +182,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
     conn: conn
   } do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
@@ -279,7 +279,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Select Service+Apps and select a process that is dead or doesn't exist", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
@@ -324,7 +324,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Select Service+Apps and select a port to request information", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
@@ -375,7 +375,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Select Service+Apps and select a port that is dead or doesn't exist", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
@@ -420,7 +420,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
 
   test "Select Service+Apps and select a reference to request information", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
@@ -472,7 +472,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
   @tag :capture_log
   test "Update buttom with Observer Web App + Local Service", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -503,7 +503,7 @@ defmodule Observer.Web.Apps.PageLiveTest do
   test "Testing NodeUp/NodeDown", %{conn: conn} do
     fake_node = :myapp@nohost
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
diff --git a/test/observer_web/web/live/metrics/page_test.exs b/test/observer_web/web/live/metrics/page_test.exs
index f5bc0d8..93e3b4d 100644
--- a/test/observer_web/web/live/metrics/page_test.exs
+++ b/test/observer_web/web/live/metrics/page_test.exs
@@ -95,9 +95,9 @@ defmodule Observer.Web.Metrics.PageLiveTest do
 
   test "GET /metrics + update form", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "vm.memory.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
     test_pid_process = self()
 
     TelemetryStubber.defaults()
@@ -164,7 +164,7 @@ defmodule Observer.Web.Metrics.PageLiveTest do
 
   test "Testing NodeDown, removing the current node from the selected services", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     test_pid_process = self()
 
     TelemetryStubber.defaults()
@@ -196,7 +196,7 @@ defmodule Observer.Web.Metrics.PageLiveTest do
 
   test "Testing NodeDown in oberver mode MUST NOT affect selected services", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.TelemetryMock
@@ -231,7 +231,7 @@ defmodule Observer.Web.Metrics.PageLiveTest do
 
   test "Testing NodeUp, no previous service is removed", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     test_pid_process = self()
 
     TelemetryStubber.defaults()
diff --git a/test/observer_web/web/live/metrics/phoenix_test.exs b/test/observer_web/web/live/metrics/phoenix_test.exs
index 6123d99..e13c44e 100644
--- a/test/observer_web/web/live/metrics/phoenix_test.exs
+++ b/test/observer_web/web/live/metrics/phoenix_test.exs
@@ -25,9 +25,9 @@ defmodule Observer.Web.Metrics.PhoenixTest do
   |> Enum.each(fn {element, %{metric: metric}} ->
     test "#{element} - Add/Remove Service + #{metric}", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       TelemetryStubber.defaults()
       |> expect(:subscribe_for_new_keys, fn -> :ok end)
@@ -84,9 +84,9 @@ defmodule Observer.Web.Metrics.PhoenixTest do
   |> Enum.each(fn {element, %{metric: metric}} ->
     test "#{element} - #{metric} + Service", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       TelemetryStubber.defaults()
       |> expect(:subscribe_for_new_keys, fn -> :ok end)
@@ -148,9 +148,9 @@ defmodule Observer.Web.Metrics.PhoenixTest do
       conn: conn
     } do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       init = unquote(init)
       update = unquote(update)
@@ -217,9 +217,9 @@ defmodule Observer.Web.Metrics.PhoenixTest do
       conn: conn
     } do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       init = unquote(init)
       update = unquote(update)
diff --git a/test/observer_web/web/live/metrics/phx_lv_socket_test.exs b/test/observer_web/web/live/metrics/phx_lv_socket_test.exs
index eae02eb..b8999f0 100644
--- a/test/observer_web/web/live/metrics/phx_lv_socket_test.exs
+++ b/test/observer_web/web/live/metrics/phx_lv_socket_test.exs
@@ -14,9 +14,9 @@ defmodule Observer.Web.Metrics.PhxLvSocketTest do
 
   test "Add/Remove Service + phoenix.liveview.socket.total", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "phoenix.liveview.socket.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
     telemetry_data = TelemetryFixtures.build_telemetry_data_phx_lv_socket_total()
 
     TelemetryStubber.defaults()
@@ -63,9 +63,9 @@ defmodule Observer.Web.Metrics.PhxLvSocketTest do
 
   test "Add/Remove phoenix.liveview.socket.totall + Service", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "phoenix.liveview.socket.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
     telemetry_data = TelemetryFixtures.build_telemetry_data_phx_lv_socket_total()
 
     TelemetryStubber.defaults()
@@ -112,9 +112,9 @@ defmodule Observer.Web.Metrics.PhxLvSocketTest do
 
   test "Init and Push phoenix.liveview.socket.observer.web.total data", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "phoenix.liveview.socket.observer.web.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
 
     test_pid_process = self()
 
diff --git a/test/observer_web/web/live/metrics/vm_limits_test.exs b/test/observer_web/web/live/metrics/vm_limits_test.exs
index 35e9b36..cf37005 100644
--- a/test/observer_web/web/live/metrics/vm_limits_test.exs
+++ b/test/observer_web/web/live/metrics/vm_limits_test.exs
@@ -20,9 +20,9 @@ defmodule Observer.Web.Metrics.VmLimitsTest do
   |> Enum.each(fn {element, %{metric: metric}} ->
     test "#{element} - Add/Remove Service + #{metric}", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       TelemetryStubber.defaults()
       |> expect(:subscribe_for_new_keys, fn -> :ok end)
@@ -75,9 +75,9 @@ defmodule Observer.Web.Metrics.VmLimitsTest do
   |> Enum.each(fn {element, %{metric: metric}} ->
     test "#{element} - #{metric} + Service", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       TelemetryStubber.defaults()
       |> expect(:subscribe_for_new_keys, fn -> :ok end)
@@ -144,9 +144,9 @@ defmodule Observer.Web.Metrics.VmLimitsTest do
       conn: conn
     } do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       init = unquote(init)
       update = unquote(update)
diff --git a/test/observer_web/web/live/metrics/vm_memory_test.exs b/test/observer_web/web/live/metrics/vm_memory_test.exs
index a947274..7137bc7 100644
--- a/test/observer_web/web/live/metrics/vm_memory_test.exs
+++ b/test/observer_web/web/live/metrics/vm_memory_test.exs
@@ -14,9 +14,9 @@ defmodule Observer.Web.Metrics.VmMemoryTest do
 
   test "Add/Remove Service + vm.memory.total", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "vm.memory.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
     telemetry_data = TelemetryFixtures.build_telemetry_data_vm_total_memory()
 
     TelemetryStubber.defaults()
@@ -63,9 +63,9 @@ defmodule Observer.Web.Metrics.VmMemoryTest do
 
   test "Add/Remove vm.memory.total + Service", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "vm.memory.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
     telemetry_data = TelemetryFixtures.build_telemetry_data_vm_total_memory()
 
     TelemetryStubber.defaults()
@@ -112,9 +112,9 @@ defmodule Observer.Web.Metrics.VmMemoryTest do
 
   test "Init and Push vm.memory.total data", %{conn: conn} do
     node = Node.self() |> to_string
-    service_id = String.replace(node, "@", "-")
+    service_id = Helpers.normalize_id(node)
     metric = "vm.memory.total"
-    metric_id = String.replace(metric, ".", "-")
+    metric_id = Helpers.normalize_id(metric)
 
     test_pid_process = self()
 
diff --git a/test/observer_web/web/live/metrics/vm_run_queue_test.exs b/test/observer_web/web/live/metrics/vm_run_queue_test.exs
index 8bd126d..1d9c974 100644
--- a/test/observer_web/web/live/metrics/vm_run_queue_test.exs
+++ b/test/observer_web/web/live/metrics/vm_run_queue_test.exs
@@ -20,9 +20,9 @@ defmodule Observer.Web.Metrics.VmRunQueueTest do
   |> Enum.each(fn {element, %{metric: metric}} ->
     test "#{element} - Add/Remove Service + #{metric}", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       TelemetryStubber.defaults()
       |> expect(:subscribe_for_new_keys, fn -> :ok end)
@@ -75,9 +75,9 @@ defmodule Observer.Web.Metrics.VmRunQueueTest do
   |> Enum.each(fn {element, %{metric: metric}} ->
     test "#{element} - #{metric} + Service", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       TelemetryStubber.defaults()
       |> expect(:subscribe_for_new_keys, fn -> :ok end)
@@ -130,9 +130,9 @@ defmodule Observer.Web.Metrics.VmRunQueueTest do
   |> Enum.each(fn {element, %{metric: metric, init: init, update: update}} ->
     test "#{element} - Phoenix Duration - Init and Push #{metric}", %{conn: conn} do
       node = Node.self() |> to_string
-      service_id = String.replace(node, "@", "-")
+      service_id = Helpers.normalize_id(node)
       metric = unquote(metric)
-      metric_id = String.replace(metric, ".", "-")
+      metric_id = Helpers.normalize_id(metric)
 
       init = unquote(init)
       update = unquote(update)
diff --git a/test/observer_web/web/live/tracing/page_test.exs b/test/observer_web/web/live/tracing/page_test.exs
index 0e18c26..a8046d4 100644
--- a/test/observer_web/web/live/tracing/page_test.exs
+++ b/test/observer_web/web/live/tracing/page_test.exs
@@ -38,7 +38,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Add/Remove Local Service + Module + Function + MatchSpec", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -114,7 +114,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Filtering by Module", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -146,7 +146,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Filtering by Function", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -182,7 +182,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Run Trace for module ObserverWeb.Common", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -228,7 +228,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Run Trace for function ObserverWeb.Common.uuid4/0", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -273,7 +273,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Run Trace for mix Elixir.Enum and function ObserverWeb.Common.uuid4/0", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -315,7 +315,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Observer timing out", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -359,7 +359,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
 
   test "Try to RUN tracing when it is already running", %{conn: conn} do
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
 
     RpcStubber.defaults()
     TelemetryStubber.defaults()
@@ -409,7 +409,7 @@ defmodule Observer.Web.Tracing.PageLiveTest do
   test "Testing NodeUp/NodeDown", %{conn: conn} do
     fake_node = :myapp@nohost
     node = Node.self() |> to_string
-    service = String.replace(node, "@", "-")
+    service = Helpers.normalize_id(node)
     test_pid_process = self()
 
     ObserverWeb.RpcMock
diff --git a/test/support/conn_case.ex b/test/support/conn_case.ex
index 9ff4a4e..de5acac 100644
--- a/test/support/conn_case.ex
+++ b/test/support/conn_case.ex
@@ -24,6 +24,8 @@ defmodule Observer.Web.ConnCase do
       import Observer.Web.ConnCase
       import Phoenix.LiveViewTest
 
+      alias Observer.Web.Helpers
+
       @endpoint Observer.Web.Endpoint
     end
   end

From 2983a5baead062aa40ce3e839b91fd7fdcb44db2 Mon Sep 17 00:00:00 2001
From: Thiago Esteves <calori@gmail.com>
Date: Mon, 26 May 2025 11:08:02 -0300
Subject: [PATCH 2/2] Updating changelog and version

---
 CHANGELOG.md | 11 +++++++++++
 mix.exs      |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2214351..b4525a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # CHANGELOG (v0.1.X)
 
+## 0.1.10 🚀 (2025-05-26)
+
+### Backwards incompatible changes for 0.1.9
+ * None
+
+### Bug fixes
+ * None
+
+### Enhancements
+ * [[`PR-18`](https://github.com/thiagoesteves/observer_web/pull/18)] Normalizing functions and adding highlight to nodes that are current online for metrics
+
 ## 0.1.9 🚀 (2025-05-07)
 
 ### Backwards incompatible changes for 0.1.8
diff --git a/mix.exs b/mix.exs
index 3f94d4a..3e26715 100644
--- a/mix.exs
+++ b/mix.exs
@@ -2,7 +2,7 @@ defmodule ObserverWeb.MixProject do
   use Mix.Project
 
   @source_url "https://github.com/thiagoesteves/observer_web"
-  @version "0.1.9"
+  @version "0.1.10"
 
   def project do
     [