timestamp improvement

This commit is contained in:
Graham McIntire 2026-01-15 08:03:30 -06:00
parent bb5766f1a6
commit b70ddfe166
No known key found for this signature in database
3 changed files with 100 additions and 4 deletions

View file

@ -89,4 +89,39 @@ defmodule ToweropsWeb.AgentLive.Helpers do
end
def format_uptime(_), do: "Unknown"
@doc """
Formats a DateTime into a full date and time string.
Returns strings like "Jan 15, 2026 at 2:34 PM UTC".
"""
def format_datetime(nil), do: "Never"
def format_datetime(datetime) do
Calendar.strftime(datetime, "%b %d, %Y at %I:%M %p %Z")
end
@doc """
Formats a DateTime into a short date string.
Returns strings like "Jan 15, 2026".
"""
def format_date(nil), do: "Never"
def format_date(datetime) do
Calendar.strftime(datetime, "%b %d, %Y")
end
@doc """
Formats a DateTime into a relative time with full datetime in parentheses.
Returns strings like "5m ago (Jan 15, 2026 at 2:34 PM UTC)".
"""
def format_last_seen_with_date(nil), do: "Never"
def format_last_seen_with_date(datetime) do
relative = format_last_seen(datetime)
full = format_datetime(datetime)
"#{relative} (#{full})"
end
end

View file

@ -98,11 +98,16 @@
</:col>
<:col :let={agent} label="Last Seen">
<div class="text-sm text-zinc-600 dark:text-zinc-400">
<div class="text-sm text-zinc-900 dark:text-zinc-100">
{format_last_seen(agent.last_seen_at)}
</div>
<%= if agent.last_seen_at do %>
<div class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
{format_datetime(agent.last_seen_at)}
</div>
<% end %>
<%= if agent.last_ip do %>
<div class="text-xs text-zinc-500 dark:text-zinc-500 mt-0.5">
<div class="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 font-mono">
{agent.last_ip}
</div>
<% end %>

View file

@ -55,18 +55,23 @@
<!-- Last Seen Card -->
<div class="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-6">
<div class="flex items-center justify-between">
<div>
<div class="min-w-0 flex-1">
<p class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Last Seen</p>
<p class="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
{format_last_seen(@agent_token.last_seen_at)}
</p>
<%= if @agent_token.last_seen_at do %>
<p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
{format_datetime(@agent_token.last_seen_at)}
</p>
<% end %>
<%= if @agent_token.last_ip do %>
<p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400 font-mono">
{@agent_token.last_ip}
</p>
<% end %>
</div>
<.icon name="hero-clock" class="h-8 w-8 text-zinc-400 dark:text-zinc-600" />
<.icon name="hero-clock" class="h-8 w-8 text-zinc-400 dark:text-zinc-600 flex-shrink-0" />
</div>
</div>
@ -130,6 +135,57 @@
</div>
<% end %>
<!-- Agent Timestamps -->
<div class="mt-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-6">
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
Timestamps
</h3>
<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Created</dt>
<dd class="mt-1 text-sm text-zinc-900 dark:text-zinc-100">
{format_datetime(@agent_token.inserted_at)}
</dd>
<dd class="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
{format_last_seen(@agent_token.inserted_at)} (created)
</dd>
</div>
<div>
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Last Updated</dt>
<dd class="mt-1 text-sm text-zinc-900 dark:text-zinc-100">
{format_datetime(@agent_token.updated_at)}
</dd>
<dd class="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
{format_last_seen(@agent_token.updated_at)}
</dd>
</div>
<div>
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">
Last Seen (Heartbeat)
</dt>
<dd class="mt-1 text-sm text-zinc-900 dark:text-zinc-100">
{format_datetime(@agent_token.last_seen_at)}
</dd>
<%= if @agent_token.last_seen_at do %>
<dd class="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
{format_last_seen(@agent_token.last_seen_at)}
</dd>
<% end %>
</div>
<%= if @agent_token.last_ip do %>
<div>
<dt class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Last IP Address</dt>
<dd class="mt-1 text-sm text-zinc-900 dark:text-zinc-100 font-mono">
{@agent_token.last_ip}
</dd>
</div>
<% end %>
</dl>
</div>
<!-- Equipment List -->
<div class="mt-6 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg">
<div class="p-6 border-b border-zinc-200 dark:border-zinc-800">