227 lines
7.5 KiB
Elixir
227 lines
7.5 KiB
Elixir
defmodule PrymnWeb.ServerLive.Show do
|
|
use PrymnWeb, :live_view
|
|
|
|
require Logger
|
|
alias Prymn.{Agents, Servers}
|
|
|
|
@impl true
|
|
def mount(_params, _session, socket) do
|
|
# TODO: A more lightweight call instead of listing all data?
|
|
servers = Servers.list_servers()
|
|
{:ok, assign(socket, :servers, servers)}
|
|
end
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<div class="mx-auto max-w-2xl">
|
|
<div class="flex items-center justify-between">
|
|
<div id="server-name" class="relative flex items-center">
|
|
<.dropdown title="Select a different server">
|
|
<:button variant="tertiary">Server <%= @server.name %></:button>
|
|
<:item
|
|
:for={server <- Enum.filter(@servers, fn s -> s.id != @server.id end)}
|
|
patch={~p"/servers/#{server}"}
|
|
>
|
|
<%= server.name %>
|
|
</:item>
|
|
</.dropdown>
|
|
<Button.tertiary title="Edit server name" phx-click={show_edit_server_name()}>
|
|
<.icon class="h-4 w-4" name="hero-pencil-solid" />
|
|
</Button.tertiary>
|
|
<.indicator message={@health.message} />
|
|
</div>
|
|
<form class="hidden items-center" id="server-name-edit" phx-submit={submit_edit_server_name()}>
|
|
<input class="outline-none" type="text" name="name" value={@server.name} required />
|
|
<Button.tertiary type="submit" title="Confirm">
|
|
<.icon name="hero-check" />
|
|
</Button.tertiary>
|
|
</form>
|
|
<div class="space-x-2">
|
|
<.dropdown>
|
|
<:button variant="tertiary" size="sm">Quick actions</:button>
|
|
<:item>
|
|
Test
|
|
</:item>
|
|
</.dropdown>
|
|
<Button.primary size="sm">New App</Button.primary>
|
|
</div>
|
|
</div>
|
|
<span class="text-sm opacity-75"><%= @server.public_ip %></span>
|
|
<div :for={{name, task} <- @health.tasks} class="my-3 text-sm text-slate-700">
|
|
<p>Background task in progress: <%= name %></p>
|
|
<p><%= task.progress %> complete</p>
|
|
</div>
|
|
<div :if={@server.status == :unregistered} class="my-10">
|
|
<p class="mb-9">
|
|
Connect to your server using root credentials and execute the following command:
|
|
</p>
|
|
<div class="group inline-flex items-center rounded-lg bg-gray-800 p-4 pl-6 text-white">
|
|
<code class="flex gap-4">
|
|
<span class="select-none text-gray-500">#</span>
|
|
<span class="flex-1">
|
|
<%= @registration_command %>
|
|
</span>
|
|
</code>
|
|
<button type="button" tabindex="-1">
|
|
<.icon
|
|
name="hero-document-duplicate-solid"
|
|
class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form phx-change="change_dry_run">
|
|
<.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
|
|
</form>
|
|
<div :if={@server.status == :registered} class="my-10 space-y-5 divide-y">
|
|
<.live_component
|
|
id={"system_info-#{@server.name}"}
|
|
module={PrymnWeb.SystemInfo}
|
|
agent={assigns[:agent]}
|
|
/>
|
|
<section>
|
|
<h2 class="my-5 text-xl">System</h2>
|
|
<p>
|
|
Updates: <%= 0 %> pending updates.
|
|
<Button.primary type="button" class="ml-4" phx-click="system_update">
|
|
Update now
|
|
</Button.primary>
|
|
<p :for={output <- assigns.update_output}>
|
|
<%= output %>
|
|
</p>
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h2 class="my-5 text-xl">
|
|
Terminal
|
|
</h2>
|
|
<.live_component id="terminal" module={PrymnWeb.Terminal} server={@server} />
|
|
</section>
|
|
</div>
|
|
<.back navigate={~p"/servers"}>Back to servers</.back>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
@impl true
|
|
def handle_params(%{"id" => id}, _, socket) do
|
|
server = Servers.get_server!(id)
|
|
|
|
socket =
|
|
if connected?(socket) and server.status == :registered do
|
|
agent = Agents.from_server(server)
|
|
Agents.subscribe_to_health(agent)
|
|
assign(socket, :agent, agent)
|
|
else
|
|
socket
|
|
end
|
|
|
|
# health = Agents.get_health(server.public_ip)
|
|
|
|
{:noreply,
|
|
socket
|
|
|> assign(:page_title, server.name)
|
|
# |> assign(:health, health || %{message: "Connecting...", tasks: []})
|
|
|> assign(:server, server)
|
|
|> assign(:dry_run, false)
|
|
|> assign(:update_output, [])
|
|
# TODO: Do not assign this to the socket - instead generate it in the HTML
|
|
|> assign(:registration_command, Servers.create_setup_command(server))}
|
|
end
|
|
|
|
# @impl true
|
|
# def handle_info(%PrymnProto.Prymn.SysUpdateResponse{} = response, socket) do
|
|
# output = String.split(response.output, "\n")
|
|
# socket = assign(socket, :update_output, output)
|
|
# {:noreply, socket}
|
|
# end
|
|
|
|
# def handle_info(%Agents.Health{host: host} = health, socket) do
|
|
# socket =
|
|
# if host == socket.assigns.server.public_ip,
|
|
# do: assign(socket, :health, health),
|
|
# else: socket
|
|
|
|
# {:noreply, socket}
|
|
# end
|
|
|
|
@impl true
|
|
def handle_event("system_update", _params, socket) do
|
|
server_name = get_in(socket.assigns, [:server, Access.key(:name)])
|
|
pid = self()
|
|
|
|
if agent = socket.assigns[:agent] do
|
|
# TODO: This is ugly
|
|
Task.start_link(fn ->
|
|
Agents.sys_update(agent, %{dry_run: socket.assigns.dry_run})
|
|
|> Stream.each(fn
|
|
{:ok, msg} -> send(pid, msg)
|
|
{:error, error} -> Logger.error("error during system update call: #{inspect(error)}")
|
|
end)
|
|
|> Enum.to_list()
|
|
end)
|
|
|
|
put_flash(socket, :info, "Started a system update on server #{server_name}.")
|
|
else
|
|
put_flash(socket, :error, "Could not perform the update.")
|
|
end
|
|
|
|
{:noreply, socket}
|
|
end
|
|
|
|
def handle_event("edit_server_name", %{"name" => name}, socket) do
|
|
server =
|
|
socket.assigns.server
|
|
|> Servers.update_server(%{"name" => name})
|
|
|> case do
|
|
{:ok, server} -> server
|
|
{:error, _} -> raise "Oops"
|
|
end
|
|
|
|
{:noreply, assign(socket, :server, server)}
|
|
end
|
|
|
|
def handle_event("change_dry_run", %{"dry_run" => enabled}, socket) do
|
|
enabled = (enabled == "true" && true) || false
|
|
{:noreply, assign(socket, :dry_run, enabled)}
|
|
end
|
|
|
|
defp show_edit_server_name() do
|
|
JS.hide(to: "#server-name")
|
|
|> JS.show(to: "#server-name-edit", display: "flex")
|
|
|> JS.focus_first(to: "#server-name-edit")
|
|
end
|
|
|
|
defp submit_edit_server_name() do
|
|
JS.push("edit_server_name")
|
|
|> JS.hide()
|
|
|> JS.show(to: "#server-name", display: "flex")
|
|
end
|
|
|
|
defp indicator(assigns) do
|
|
~H"""
|
|
<span
|
|
role="tooltip"
|
|
class={[
|
|
"absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
|
|
"before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
|
|
"before:font-normal before:content-[attr(data-tip)] before:opacity-0",
|
|
"hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
|
|
"before:rounded before:pointer-events-none before:transition-opacity"
|
|
]}
|
|
data-tip={@message}
|
|
>
|
|
<%= case @message do %>
|
|
<% "Connected" -> %>
|
|
<span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
|
|
<span class="h-3 w-3 rounded-full bg-green-500" />
|
|
<% "Disconnected" -> %>
|
|
<span class="h-3 w-3 rounded-full bg-red-500" />
|
|
<% _ -> %>
|
|
<span class="h-3 w-3 rounded-full bg-yellow-500" />
|
|
<% end %>
|
|
</span>
|
|
"""
|
|
end
|
|
end
|