add blocks and placeholders for where stuff will go later
This commit is contained in:
Nikos Papadakis
parent
085e000009
commit
53572d4993
9 changed files with 254 additions and 205 deletions
|
|
@ -473,11 +473,7 @@ defmodule PrymnWeb.CoreComponents do
|
||||||
<th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
|
<th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
|
||||||
<th class="relative p-0 pb-4">
|
<th class="relative p-0 pb-4">
|
||||||
<span class="sr-only">
|
<span class="sr-only">
|
||||||
<%= if @gettext do %>
|
Actions
|
||||||
<%= gettext("Actions") %>
|
|
||||||
<% else %>
|
|
||||||
Actions
|
|
||||||
<% end %>
|
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,39 @@
|
||||||
<header class="px-4 sm:px-6 lg:px-8">
|
<header>
|
||||||
<a
|
<a
|
||||||
href="#main"
|
href="#main"
|
||||||
class="absolute left-0 -translate-y-full bg-black p-2 text-white transition-transform focus:transform-none"
|
class="absolute left-0 -translate-y-full bg-black p-2 text-white transition-transform focus:transform-none"
|
||||||
>
|
>
|
||||||
<%= gettext("Skip to content") %>
|
<%= gettext("Skip to content") %>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
|
<div class="flex items-stretch justify-between border-b border-zinc-300 bg-gray-100 px-4 text-sm sm:px-6 lg:px-8">
|
||||||
<div class="flex items-center gap-4">
|
<div class="my-auto leading-tight">
|
||||||
<a href="/">
|
<p class="text-[9px]">codename</p>
|
||||||
<img src={~p"/images/logo.svg"} width="36" />
|
<a href="/" class="text-lg font-medium">
|
||||||
|
Prymn
|
||||||
</a>
|
</a>
|
||||||
<p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
|
<p class="inline text-xs">
|
||||||
v<%= Application.spec(:phoenix, :vsn) %>
|
v<%= Application.spec(:prymn, :vsn) %>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
|
<div class="flex items-center border-r border-l border-zinc-300 text-zinc-900 hover:bg-white">
|
||||||
<a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
|
<.link class="px-3 py-4" href={~p"/users/settings"}>
|
||||||
@elixirphoenix
|
<.icon name="hero-user" />
|
||||||
</a>
|
<.icon name="hero-chevron-down" />
|
||||||
<a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://hexdocs.pm/phoenix/overview.html"
|
|
||||||
class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
|
|
||||||
>
|
|
||||||
Get Started <span aria-hidden="true">→</span>
|
|
||||||
</a>
|
|
||||||
<.link href={~p"/users/settings"} class="hover:text-zinc-700">
|
|
||||||
<%= @current_user.email %>
|
|
||||||
</.link>
|
|
||||||
<.link href={~p"/auth/log_out"} method="delete" class="hover:text-zinc-700">
|
|
||||||
Log out
|
|
||||||
</.link>
|
</.link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main id="main" class="px-4 py-20 sm:px-6 lg:px-8">
|
<main id="main" class="px-4 sm:px-6 lg:px-10">
|
||||||
<div class="mx-auto max-w-2xl">
|
<div class="mb-8 border-b border-zinc-900 pt-10 pb-2 font-medium">
|
||||||
|
<ul class="flex gap-4">
|
||||||
|
<li>Projects</li>
|
||||||
|
<li>Usage</li>
|
||||||
|
<li>Activities</li>
|
||||||
|
<li>Limits</li>
|
||||||
|
<li>Support</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="pb-20">
|
||||||
<.flash_group flash={@flash} />
|
<.flash_group flash={@flash} />
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="csrf-token" content={get_csrf_token()} />
|
<meta name="csrf-token" content={get_csrf_token()} />
|
||||||
<.live_title suffix=" · Phoenix Framework">
|
<.live_title suffix="｜Prymn">
|
||||||
<%= assigns[:page_title] || "Prymn" %>
|
<%= assigns[:page_title] || "Prymn" %>
|
||||||
</.live_title>
|
</.live_title>
|
||||||
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
|
||||||
|
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<div class="px-4 py-10 sm:px-6 sm:py-28 lg:px-8 xl:px-28 xl:py-32">
|
|
||||||
<div class="mx-auto max-w-xl lg:mx-0">
|
|
||||||
<svg viewBox="0 0 71 48" class="h-12" aria-hidden="true">
|
|
||||||
<path
|
|
||||||
d="m26.371 33.477-.552-.1c-3.92-.729-6.397-3.1-7.57-6.829-.733-2.324.597-4.035 3.035-4.148 1.995-.092 3.362 1.055 4.57 2.39 1.557 1.72 2.984 3.558 4.514 5.305 2.202 2.515 4.797 4.134 8.347 3.634 3.183-.448 5.958-1.725 8.371-3.828.363-.316.761-.592 1.144-.886l-.241-.284c-2.027.63-4.093.841-6.205.735-3.195-.16-6.24-.828-8.964-2.582-2.486-1.601-4.319-3.746-5.19-6.611-.704-2.315.736-3.934 3.135-3.6.948.133 1.746.56 2.463 1.165.583.493 1.143 1.015 1.738 1.493 2.8 2.25 6.712 2.375 10.265-.068-5.842-.026-9.817-3.24-13.308-7.313-1.366-1.594-2.7-3.216-4.095-4.785-2.698-3.036-5.692-5.71-9.79-6.623C12.8-.623 7.745.14 2.893 2.361 1.926 2.804.997 3.319 0 4.149c.494 0 .763.006 1.032 0 2.446-.064 4.28 1.023 5.602 3.024.962 1.457 1.415 3.104 1.761 4.798.513 2.515.247 5.078.544 7.605.761 6.494 4.08 11.026 10.26 13.346 2.267.852 4.591 1.135 7.172.555ZM10.751 3.852c-.976.246-1.756-.148-2.56-.962 1.377-.343 2.592-.476 3.897-.528-.107.848-.607 1.306-1.336 1.49Zm32.002 37.924c-.085-.626-.62-.901-1.04-1.228-1.857-1.446-4.03-1.958-6.333-2-1.375-.026-2.735-.128-4.031-.61-.595-.22-1.26-.505-1.244-1.272.015-.78.693-1 1.31-1.184.505-.15 1.026-.247 1.6-.382-1.46-.936-2.886-1.065-4.787-.3-2.993 1.202-5.943 1.06-8.926-.017-1.684-.608-3.179-1.563-4.735-2.408l-.043.03a2.96 2.96 0 0 0 .04-.029c-.038-.117-.107-.12-.197-.054l.122.107c1.29 2.115 3.034 3.817 5.004 5.271 3.793 2.8 7.936 4.471 12.784 3.73A66.714 66.714 0 0 1 37 40.877c1.98-.16 3.866.398 5.753.899Zm-9.14-30.345c-.105-.076-.206-.266-.42-.069 1.745 2.36 3.985 4.098 6.683 5.193 4.354 1.767 8.773 2.07 13.293.51 3.51-1.21 6.033-.028 7.343 3.38.19-3.955-2.137-6.837-5.843-7.401-2.084-.318-4.01.373-5.962.94-5.434 1.575-10.485.798-15.094-2.553Zm27.085 15.425c.708.059 1.416.123 2.124.185-1.6-1.405-3.55-1.517-5.523-1.404-3.003.17-5.167 1.903-7.14 3.972-1.739 1.824-3.31 3.87-5.903 4.604.043.078.054.117.066.117.35.005.699.021 1.047.005 3.768-.17 7.317-.965 10.14-3.7.89-.86 1.685-1.817 2.544-2.71.716-.746 1.584-1.159 2.645-1.07Zm-8.753-4.67c-2.812.246-5.254 1.409-7.548 2.943-1.766 1.18-3.654 1.738-5.776 1.37-.374-.066-.75-.114-1.124-.17l-.013.156c.135.07.265.151.405.207.354.14.702.308 1.07.395 4.083.971 7.992.474 11.516-1.803 2.221-1.435 4.521-1.707 7.013-1.336.252.038.503.083.756.107.234.022.479.255.795.003-2.179-1.574-4.526-2.096-7.094-1.872Zm-10.049-9.544c1.475.051 2.943-.142 4.486-1.059-.452.04-.643.04-.827.076-2.126.424-4.033-.04-5.733-1.383-.623-.493-1.257-.974-1.889-1.457-2.503-1.914-5.374-2.555-8.514-2.5.05.154.054.26.108.315 3.417 3.455 7.371 5.836 12.369 6.008Zm24.727 17.731c-2.114-2.097-4.952-2.367-7.578-.537 1.738.078 3.043.632 4.101 1.728.374.388.763.768 1.182 1.106 1.6 1.29 4.311 1.352 5.896.155-1.861-.726-1.861-.726-3.601-2.452Zm-21.058 16.06c-1.858-3.46-4.981-4.24-8.59-4.008a9.667 9.667 0 0 1 2.977 1.39c.84.586 1.547 1.311 2.243 2.055 1.38 1.473 3.534 2.376 4.962 2.07-.656-.412-1.238-.848-1.592-1.507Zm17.29-19.32c0-.023.001-.045.003-.068l-.006.006.006-.006-.036-.004.021.018.012.053Zm-20 14.744a7.61 7.61 0 0 0-.072-.041.127.127 0 0 0 .015.043c.005.008.038 0 .058-.002Zm-.072-.041-.008-.034-.008.01.008-.01-.022-.006.005.026.024.014Z"
|
|
||||||
fill="#FD4F00"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
|
|
||||||
Phoenix Framework
|
|
||||||
<small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
|
|
||||||
v<%= Application.spec(:phoenix, :vsn) %>
|
|
||||||
</small>
|
|
||||||
</h1>
|
|
||||||
<p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
|
|
||||||
Welcome
|
|
||||||
</p>
|
|
||||||
<p class="mt-4 text-base leading-7 text-zinc-600">
|
|
||||||
Create your server or your site
|
|
||||||
</p>
|
|
||||||
<div class="my-9 flex flex-col gap-5 text-center">
|
|
||||||
<.link navigate={~p"/servers"} class="block rounded bg-black px-4 py-2 text-white">
|
|
||||||
Servers
|
|
||||||
</.link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
47
app/lib/prymn_web/live/dashboard_live.ex
Normal file
47
app/lib/prymn_web/live/dashboard_live.ex
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
defmodule PrymnWeb.DashboardLive do
|
||||||
|
use PrymnWeb, :live_view
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div class="mx-auto max-w-4xl">
|
||||||
|
<div class="mb-5">
|
||||||
|
<h1 class="text-3xl font-bold leading-snug">Good morning, <%= @current_user.email %>!</h1>
|
||||||
|
<h2 class="text-lg font-medium">Your overview</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="basis-6/12 rounded-lg p-3 shadow-md">
|
||||||
|
<span class="text-7xl font-medium">0</span>
|
||||||
|
<h2 class="mt-5 font-medium leading-snug text-gray-600">Total Servers</h2>
|
||||||
|
<.link class="text-sm text-blue-600" navigate={~p"/servers"}>
|
||||||
|
<.icon class="h-3 w-4" name="hero-arrow-right" /> View your servers
|
||||||
|
</.link>
|
||||||
|
</div>
|
||||||
|
<div class="basis-6/12 rounded-lg p-3 shadow-md">
|
||||||
|
<span class="text-7xl font-medium">0</span>
|
||||||
|
<h2 class="mt-5 font-medium leading-snug text-gray-600">Apps</h2>
|
||||||
|
<.link class="text-sm text-blue-600">
|
||||||
|
<.icon class="h-3 w-4" name="hero-arrow-right" /> View your apps
|
||||||
|
</.link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto mt-7 max-w-6xl">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="space-x-6 text-sm text-blue-600">
|
||||||
|
<button>24 Hours</button>
|
||||||
|
<button>7 Days</button>
|
||||||
|
<button>30 Days</button>
|
||||||
|
</div>
|
||||||
|
<p>15 November — 16 November</p>
|
||||||
|
</div>
|
||||||
|
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||||
|
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||||
|
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||||
|
<div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
@ -1,38 +1,40 @@
|
||||||
<.header>
|
<div class="mx-auto max-w-2xl">
|
||||||
Your servers
|
<.header>
|
||||||
<small class="block">
|
Your servers
|
||||||
<%= "#{Enum.count(@servers)} servers" %>
|
<small class="block">
|
||||||
</small>
|
<%= "#{Enum.count(@servers)} servers" %>
|
||||||
<:actions>
|
</small>
|
||||||
<.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
|
<:actions>
|
||||||
</:actions>
|
<.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
|
||||||
</.header>
|
</:actions>
|
||||||
|
</.header>
|
||||||
|
|
||||||
<div class="space-y-5" phx-update="replace" id="servers">
|
<div class="space-y-5" phx-update="replace" id="servers">
|
||||||
<.link
|
<.link
|
||||||
:for={server <- @servers}
|
:for={server <- @servers}
|
||||||
navigate={~p"/servers/#{server}"}
|
navigate={~p"/servers/#{server}"}
|
||||||
class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white"
|
class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white"
|
||||||
>
|
>
|
||||||
<div class="flex flex-row flex-wrap justify-between">
|
<div class="flex flex-row flex-wrap justify-between">
|
||||||
<h2 class="text-xl"><%= server.name %></h2>
|
<h2 class="text-xl"><%= server.name %></h2>
|
||||||
<.server_status status={server.status} health={@healths[server.public_ip]} />
|
<.server_status status={server.status} health={@healths[server.public_ip]} />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row flex-wrap justify-between lg:text-sm">
|
<div class="flex flex-row flex-wrap justify-between lg:text-sm">
|
||||||
<span>IP: <%= server.public_ip || "N/A" %></span>
|
<span>IP: <%= server.public_ip || "N/A" %></span>
|
||||||
<span
|
<span
|
||||||
:if={@healths[server.public_ip] && Enum.count(@healths[server.public_ip].tasks)}
|
:if={@healths[server.public_ip] && Enum.count(@healths[server.public_ip].tasks)}
|
||||||
class="text-right text-xs text-slate-700"
|
class="text-right text-xs text-slate-700"
|
||||||
>
|
>
|
||||||
<%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %>
|
<%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %>
|
||||||
<div>In progress: <%= name %></div>
|
<div>In progress: <%= name %></div>
|
||||||
<div><%= task.progress %></div>
|
<div><%= task.progress %></div>
|
||||||
<% end %>
|
<% end %>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</.link>
|
</.link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
|
||||||
|
<.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
|
||||||
|
</.modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
|
|
||||||
<.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
|
|
||||||
</.modal>
|
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ defmodule PrymnWeb.ServerLive.Show do
|
||||||
|
|
||||||
{:noreply,
|
{:noreply,
|
||||||
socket
|
socket
|
||||||
|> assign(:health, health || %{message: "Connecting..."})
|
|> assign(:health, health || %{message: "Connecting...", tasks: []})
|
||||||
|> assign(:page_title, server.name)
|
|> assign(:page_title, server.name)
|
||||||
|> assign(:server, server)
|
|> assign(:server, server)
|
||||||
|> assign(:dry_run, false)
|
|> assign(:dry_run, false)
|
||||||
|
|
|
||||||
|
|
@ -1,110 +1,145 @@
|
||||||
<.header>
|
<div class="mx-auto max-w-2xl">
|
||||||
<span class="relative flex items-center">
|
<.header>
|
||||||
Server <%= @server.name %>
|
<span class="relative flex items-center">
|
||||||
<span
|
<button>
|
||||||
role="tooltip"
|
Server <%= @server.name %>
|
||||||
class={[
|
<.icon name="hero-chevron-down" />
|
||||||
"absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
|
</button>
|
||||||
"before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
|
<button class="ml-4">
|
||||||
"before:font-normal before:content-[attr(data-tip)] before:opacity-0",
|
<.icon class="h-3 w-3" name="hero-pencil" />
|
||||||
"hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
|
</button>
|
||||||
"before:rounded before:pointer-events-none before:transition-opacity"
|
<span
|
||||||
]}
|
role="tooltip"
|
||||||
data-tip={@health.message}
|
class={[
|
||||||
>
|
"absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
|
||||||
<%= case @health.message do %>
|
"before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
|
||||||
<% "Connected" -> %>
|
"before:font-normal before:content-[attr(data-tip)] before:opacity-0",
|
||||||
<span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
|
"hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
|
||||||
<span class="h-3 w-3 rounded-full bg-green-500" />
|
"before:rounded before:pointer-events-none before:transition-opacity"
|
||||||
<% "Disconnected" -> %>
|
]}
|
||||||
<span class="h-3 w-3 rounded-full bg-red-500" />
|
data-tip={@health.message}
|
||||||
<% _ -> %>
|
>
|
||||||
<span class="h-3 w-3 rounded-full bg-yellow-500" />
|
<%= case @health.message do %>
|
||||||
<% end %>
|
<% "Connected" -> %>
|
||||||
</span>
|
<span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
|
||||||
</span>
|
<span class="h-3 w-3 rounded-full bg-green-500" />
|
||||||
<:subtitle>
|
<% "Disconnected" -> %>
|
||||||
<%= @server.public_ip %>
|
<span class="h-3 w-3 rounded-full bg-red-500" />
|
||||||
</:subtitle>
|
<% _ -> %>
|
||||||
</.header>
|
<span class="h-3 w-3 rounded-full bg-yellow-500" />
|
||||||
|
<% end %>
|
||||||
<div class="my-3 text-sm text-slate-700">
|
|
||||||
<%= for {name, task} <- @health.tasks do %>
|
|
||||||
Background task in progress: <%= name %>
|
|
||||||
<p><%= task.progress %> complete</p>
|
|
||||||
<% end %>
|
|
||||||
</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>
|
</span>
|
||||||
</code>
|
</span>
|
||||||
<button type="button" tabindex="-1">
|
<:subtitle>
|
||||||
<.icon
|
<%= @server.public_ip %>
|
||||||
name="hero-document-duplicate-solid"
|
</:subtitle>
|
||||||
class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
|
<:actions>
|
||||||
/>
|
<.button>+ New App</.button>
|
||||||
</button>
|
<.button class="border border-black bg-transparent text-black hover:text-white">
|
||||||
</div>
|
Quick actions <.icon name="hero-chevron-down" />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div :if={@server.status == :registered && @sys_info} class="my-10">
|
|
||||||
<section class="flex justify-between rounded bg-gray-800 p-5 text-white">
|
|
||||||
<div>
|
|
||||||
<p class="text-xl"><%= @sys_info.uptime || "" %>s</p>
|
|
||||||
<p class="text-sm">Uptime</p>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4">
|
|
||||||
<p class="text-xl"><%= Enum.count(@sys_info.cpus || []) %></p>
|
|
||||||
<p class="text-sm">CPUs</p>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4">
|
|
||||||
<p class="text-xl"><%= calculate_cpu_usage(@sys_info.cpus) %></p>
|
|
||||||
<p class="text-sm">CPU%</p>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4">
|
|
||||||
<p class="text-xl">
|
|
||||||
<%= bytes_to_gigabytes(@sys_info.mem_total_bytes - @sys_info.mem_avail_bytes) %>
|
|
||||||
<span>/</span>
|
|
||||||
<%= bytes_to_gigabytes(@sys_info.mem_total_bytes) %>
|
|
||||||
<span>GiB</span>
|
|
||||||
</p>
|
|
||||||
<p class="text-sm">Memory</p>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4">
|
|
||||||
<p class="text-xl">
|
|
||||||
<%= calculate_disk_used_percent(@sys_info.disks) %>
|
|
||||||
<span>%</span>
|
|
||||||
</p>
|
|
||||||
<p class="text-sm">Used Disk</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="mt-4">
|
|
||||||
<form phx-change="change_dry_run">
|
|
||||||
<.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="mt-4">
|
|
||||||
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
|
|
||||||
<p class="mt-4">
|
|
||||||
Updates: <%= @sys_info.updates_available %> pending updates.
|
|
||||||
<.button type="button" class="ml-4" phx-click="system_update">
|
|
||||||
Update now
|
|
||||||
</.button>
|
</.button>
|
||||||
<p :for={output <- assigns.update_output}>
|
</:actions>
|
||||||
<%= output %>
|
</.header>
|
||||||
</p>
|
<div class="my-3 text-sm text-slate-700">
|
||||||
|
<%= for {name, task} <- @health.tasks do %>
|
||||||
|
Background task in progress: <%= name %>
|
||||||
|
<p><%= task.progress %> complete</p>
|
||||||
|
<% end %>
|
||||||
|
</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>
|
</p>
|
||||||
</section>
|
<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>
|
||||||
|
<div :if={@server.status == :registered && @sys_info} class="my-10">
|
||||||
|
<section class="flex justify-between rounded bg-gray-800 p-5 text-white">
|
||||||
|
<div>
|
||||||
|
<p class="text-xl"><%= @sys_info.uptime || "" %>s</p>
|
||||||
|
<p class="text-sm">Uptime</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-xl"><%= Enum.count(@sys_info.cpus || []) %></p>
|
||||||
|
<p class="text-sm">CPUs</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-xl"><%= calculate_cpu_usage(@sys_info.cpus) %></p>
|
||||||
|
<p class="text-sm">CPU%</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-xl">
|
||||||
|
<%= bytes_to_gigabytes(@sys_info.mem_total_bytes - @sys_info.mem_avail_bytes) %>
|
||||||
|
<span>/</span>
|
||||||
|
<%= bytes_to_gigabytes(@sys_info.mem_total_bytes) %>
|
||||||
|
<span>GiB</span>
|
||||||
|
</p>
|
||||||
|
<p class="text-sm">Memory</p>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-xl">
|
||||||
|
<%= calculate_disk_used_percent(@sys_info.disks) %>
|
||||||
|
<span>%</span>
|
||||||
|
</p>
|
||||||
|
<p class="text-sm">Used Disk</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="mt-4">
|
||||||
|
<form phx-change="change_dry_run">
|
||||||
|
<.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<section class="mt-4">
|
||||||
|
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
|
||||||
|
<p class="mt-4">
|
||||||
|
Updates: <%= @sys_info.updates_available %> pending updates.
|
||||||
|
<.button type="button" class="ml-4" phx-click="system_update">
|
||||||
|
Update now
|
||||||
|
</.button>
|
||||||
|
<p :for={output <- assigns.update_output}>
|
||||||
|
<%= output %>
|
||||||
|
</p>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section class="mt-4">
|
||||||
|
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||||
|
Backups
|
||||||
|
</h2>
|
||||||
|
<.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
|
||||||
|
<:col :let={backup} label="Date"><%= backup.date %></:col>
|
||||||
|
<:action>
|
||||||
|
<.button>Restore</.button>
|
||||||
|
</:action>
|
||||||
|
</.table>
|
||||||
|
</section>
|
||||||
|
<section class="mt-4">
|
||||||
|
<h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
|
||||||
|
Manage Services
|
||||||
|
</h2>
|
||||||
|
<.table
|
||||||
|
id="services"
|
||||||
|
rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
|
||||||
|
>
|
||||||
|
<:col :let={service} label="Service"><%= service.name %></:col>
|
||||||
|
<:col :let={service} label="Status"><%= service.status %></:col>
|
||||||
|
<:action>
|
||||||
|
<.button>Activate</.button>
|
||||||
|
<.button>Deactivate</.button>
|
||||||
|
</:action>
|
||||||
|
</.table>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<.back navigate={~p"/servers"}>Back to servers</.back>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<.back navigate={~p"/servers"}>Back to servers</.back>
|
|
||||||
|
|
|
||||||
|
|
@ -27,10 +27,10 @@ defmodule PrymnWeb.Router do
|
||||||
scope "/", PrymnWeb do
|
scope "/", PrymnWeb do
|
||||||
pipe_through [:browser, :require_authenticated_user]
|
pipe_through [:browser, :require_authenticated_user]
|
||||||
|
|
||||||
get "/", PageController, :home
|
|
||||||
|
|
||||||
live_session :require_authenticated_user,
|
live_session :require_authenticated_user,
|
||||||
on_mount: [{PrymnWeb.UserAuth, :ensure_authenticated}] do
|
on_mount: [{PrymnWeb.UserAuth, :ensure_authenticated}] do
|
||||||
|
live "/", DashboardLive
|
||||||
|
|
||||||
live "/users/settings", UserSettingsLive
|
live "/users/settings", UserSettingsLive
|
||||||
live "/users/settings/confirm_email/:token", UserSettingsLive
|
live "/users/settings/confirm_email/:token", UserSettingsLive
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue