thiagoesteves · thiagoesteves · May 26, 2025 · May 26, 2025 · May 26, 2025
diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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
     [

diff --git 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