Skip to content

Commit

Permalink
Adjusting UI components and colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@thiagoesteves
thiagoesteves committed Nov 29, 2024
1 parent 4acd282 commit d6644d3
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 46 deletions.
21 changes: 20 additions & 1 deletion lib/deployex/tracer/server.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,9 @@ defmodule Deployex.Tracer.Server do
_from,
_state
) do
Logger.warning(
Process.monitor(request_pid)

Logger.info(
"New trace requested session: #{session_id} functions: #{inspect(functions_by_node)}"
)

Expand Down Expand Up @@ -177,6 +179,23 @@ defmodule Deployex.Tracer.Server do
{:noreply, state}
end

# NOTE: Request PID process was terminated
def handle_info(
{:DOWN, _reference, :process, target_pid, _reason},
%{request_pid: request_pid}
)
when target_pid == request_pid do
Logger.warning("target process was terminated")

:dbg.stop()

{:noreply, %DeployexT{}}
end

def handle_info({:DOWN, _reference, :process, _target_pid, _reason}, state) do
{:noreply, state}
end

### ==========================================================================
### Public APIs
### ==========================================================================
Expand Down
9 changes: 7 additions & 2 deletions lib/deployex_web/components/core_components.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -619,6 +619,7 @@ defmodule DeployexWeb.CoreComponents do
attr :row_id, :any, default: nil, doc: "the function for generating the row id"
attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
attr :transition, :boolean, default: false
attr :h_max_size, :string, default: "max-h-[600px]"

attr :row_item, :any,
default: &Function.identity/1,
Expand All @@ -638,7 +639,11 @@ defmodule DeployexWeb.CoreComponents do

~H"""
<div class="px-4 sm:overflow-visible sm:px-0 ">
<div id={"#{@id}-table"} class="block overflow-y-auto max-h-[600px]" phx-hook="ScrollBottom">
<div
id={"#{@id}-table"}
class={["block overflow-y-auto", "#{@h_max_size}"]}
phx-hook="ScrollBottom"
>
<table class="items-center w-full border-collapse ">
<thead class="text-xs text-left align-middle leading-6 bg-white text-blueGray-500 uppercase sticky top-0 z-10">
<tr>
Expand Down Expand Up @@ -678,7 +683,7 @@ defmodule DeployexWeb.CoreComponents do
>
<div class="block px-1 py-1 pr-6 text-xs font-mono ">
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
<span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
<span class={["relative", i == 0 && "whitespace-nowrap font-semibold text-zinc-900"]}>
<%= render_slot(col, @row_item.(row)) %>
</span>
</div>
Expand Down
84 changes: 51 additions & 33 deletions lib/deployex_web/live/components/multi_select.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,14 @@ defmodule DeployexWeb.Components.MultiSelect do
<%= for item <- @selected do %>
<%= for key <- item.keys do %>
<div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
<div class="text-xs font-normal leading-none max-w-full flex-initial">
<div class={[
"flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full border",
border_item_color(item.name)
]}>
<div class={[
"text-xs font-normal leading-none max-w-full flex-initial",
text_item_color(item.name)
]}>
<%= "#{item.name}:#{key}" %>
</div>
<button
Expand Down Expand Up @@ -107,42 +113,44 @@ defmodule DeployexWeb.Components.MultiSelect do
)
}>
<%= for item <- @unselected do %>
<div class="flex w-full flex-wrap">
<div class="w-full flex-wrap">
<div class="flex items-start p-2">
<div class="text-xs font-bold text-black"><%= item.name %>:</div>
</div>
<%= 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 py-1 px-2 rounded-full text-gray-700 bg-gray-100 border border-gray-300"
phx-click="multi-select-add-item"
phx-value-key={key}
phx-value-item={item.name}
>
<div class="text-xs font-normal leading-none max-w-full flex-initial">
<%= key %>
</div>
<div class="flex flex-auto flex-row-reverse">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
<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"
phx-click="multi-select-add-item"
phx-value-key={key}
phx-value-item={item.name}
>
<div class="text-xs font-normal leading-none max-w-full flex-initial">
<%= key %>
</div>
</div>
</button>
<% end %>
<div class="flex flex-auto flex-row-reverse">
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x cursor-pointer hover:text-teal-400 rounded-full w-4 h-4 ml-2"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
</button>
<% end %>
</div>
</div>
<% end %>
</div>
Expand All @@ -153,4 +161,14 @@ defmodule DeployexWeb.Components.MultiSelect do
</div>
"""
end

def border_item_color("services"), do: "border-teal-300"
def border_item_color("logs"), do: "border-yellow-400"
def border_item_color("apps"), do: "border-blue-400"
def border_item_color(_), do: "border-gray-300"

def text_item_color("services"), do: "text-teal-700"
def text_item_color("logs"), do: "text-yellow-700"
def text_item_color("apps"), do: "text-blue-700"
def text_item_color(_), do: "text-teal-700"
end
20 changes: 18 additions & 2 deletions lib/deployex_web/live/components/multi_select_list.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,14 @@ defmodule DeployexWeb.Components.MultiSelectList do
<%= for item <- @selected do %>
<%= for key <- item.keys do %>
<div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 ">
<div class="text-xs font-normal leading-none max-w-full flex-initial">
<div class={[
"flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full border",
border_item_color(item.name)
]}>
<div class={[
"text-xs font-normal leading-none max-w-full flex-initial",
text_item_color(item.name)
]}>
<%= "#{item.name}:#{key}" %>
</div>
<button
Expand Down Expand Up @@ -155,4 +161,14 @@ defmodule DeployexWeb.Components.MultiSelectList do
</div>
"""
end

def border_item_color("services"), do: "border-teal-300"
def border_item_color("modules"), do: "border-red-500"
def border_item_color("functions"), do: "border-blue-400"
def border_item_color(_), do: "border-gray-300"

def text_item_color("services"), do: "text-teal-700"
def text_item_color("modules"), do: "text-red-500"
def text_item_color("functions"), do: "text-blue-400"
def text_item_color(_), do: "text-teal-700"
end
2 changes: 1 addition & 1 deletion lib/deployex_web/live/logs/index.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ defmodule DeployexWeb.LogsLive do
|> assign(unselected_logs_keys: unselected_logs_keys)

~H"""
<div class="min-h-screen bg-gray-500 ">
<div class="min-h-screen bg-white">
<div class="flex">
<MultiSelect.content
id="log-multi-select"
Expand Down
2 changes: 1 addition & 1 deletion lib/deployex_web/live/observer/index.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ defmodule DeployexWeb.ObserverLive do
|> assign(unselected_apps_keys: unselected_apps_keys)

~H"""
<div class="min-h-screen bg-white ">
<div class="min-h-screen bg-white">
<div class="flex">
<MultiSelect.content
id="observer-multi-select"
Expand Down
34 changes: 28 additions & 6 deletions lib/deployex_web/live/tracing/index.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ defmodule DeployexWeb.TracingLive do
|> assign(show_tracing_options: show_tracing_options)

~H"""
<div class="min-h-screen bg-white ">
<div class="min-h-screen bg-white">
<div class="flex">
<MultiSelectList.content
id="tracing-multi-select"
Expand Down Expand Up @@ -69,7 +69,18 @@ defmodule DeployexWeb.TracingLive do
Stop
</button>
</div>
<div class="p-2"></div>
<div class="p-2">
<div class="bg-white w-full shadow-lg rounded">
<.table_logs id="live-logs" h_max_size="max-h-[400px]" rows={@streams.tracing_messages}>
<:col :let={{_id, tracing_message}} label="SERVICE">
<span><%= tracing_message.service %></span>
</:col>
<:col :let={{_id, tracing_message}} label="CONTENT">
<%= tracing_message.content %>
</:col>
</.table_logs>
</div>
</div>
</div>
"""
end
Expand All @@ -84,7 +95,8 @@ defmodule DeployexWeb.TracingLive do
|> assign(:node_info, update_node_info())
|> assign(:node_data, %{})
|> assign(:trace_session_id, nil)
|> assign(:show_tracing_options, false)}
|> assign(:show_tracing_options, false)
|> stream(:tracing_messages, [])}
end

def mount(_params, _session, socket) do
Expand All @@ -93,7 +105,8 @@ defmodule DeployexWeb.TracingLive do
|> assign(:node_info, node_info_new())
|> assign(:node_data, %{})
|> assign(:trace_session_id, nil)
|> assign(:show_tracing_options, false)}
|> assign(:show_tracing_options, false)
|> stream(:tracing_messages, [])}
end

@impl true
Expand Down Expand Up @@ -177,7 +190,10 @@ defmodule DeployexWeb.TracingLive do

case DeployexT.start_trace(functions_to_monitor) do
{:ok, %{session_id: session_id}} ->
{:noreply, assign(socket, :trace_session_id, session_id)}
{:noreply,
socket
|> assign(:trace_session_id, session_id)
|> stream(:tracing_messages, [], reset: true)}

{:error, _} ->
{:noreply, assign(socket, :trace_session_id, nil)}
Expand Down Expand Up @@ -319,7 +335,13 @@ defmodule DeployexWeb.TracingLive do
def handle_info({:new_trace_message, _session_id, node, index, message}, socket) do
Logger.info("Message: #{node} - [#{index}] :: #{message}")

{:noreply, socket}
data = %{
service: node,
id: Deployex.Common.uuid4(),
content: message
}

{:noreply, stream(socket, :tracing_messages, [data])}
end

def handle_info({event, _session_id}, socket)
Expand Down

0 comments on commit d6644d3

Please sign in to comment.