albert/status-monitor
1
0
Fork 0
mirror of https://github.com/csehviktor/status-monitor.git synced 2025-08-08 18:06:14 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
csehviktor
2025-07-10 03:00:11 +02:00
parent 76098532ea
commit aa6b171614
13 changed files with 344 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ui/src/components/AgentCard.tsx
View File

@@ -2,7 +2,7 @@ import { UptimeMessage } from "@/services/types";
import { formatRelativeTime, isAgentOnline } from "@/services/utils";
import { Progressbar } from "./Progressbar";
export type AgentOverviewCardProps = {
type AgentOverviewCardProps = {
count: number;
title: string;
icon: {
@@ -42,13 +42,13 @@ export function AgentOverviewCard({
);
}
export type AgentCardProps = {
type AgentCardProps = {
data: UptimeMessage;
onClick?: () => void;
onClick: () => void;
};
export function AgentCard({ props }: { props: AgentCardProps }) {
const status = isAgentOnline(props.data)
export function AgentCard({ data, onClick }: AgentCardProps) {
const status = isAgentOnline(data)
? {
name: "online",
color: "bg-green-500",
@@ -66,7 +66,7 @@ export function AgentCard({ props }: { props: AgentCardProps }) {
return (
<div
onClick={() => props.onClick?.()}
onClick={() => onClick()}
className="bg-[#111111] border border-[#262626] rounded-lg p-6 hover:bg-[#151515] transition-all cursor-pointer group"
>
<div className="flex items-center justify-between space-x-10">
@@ -77,7 +77,7 @@ export function AgentCard({ props }: { props: AgentCardProps }) {
{status.name.toUpperCase()}
</div>
<h3 className="text-sm md:text-md lg:text-lg font-semibold text-white transition-colors">
{props.data.agent}
{data.agent}
</h3>
</div>
@@ -85,13 +85,11 @@ export function AgentCard({ props }: { props: AgentCardProps }) {
<div className="flex flex-col max-w-lg gap-y-2">
<Progressbar
color={status.color}
percentage={props.data.uptime}
percentage={data.uptime}
/>
<div className="flex justify-between items-center text-xs">
<span>
{formatRelativeTime(props.data.last_seen)}
</span>
<span>{props.data.uptime.toFixed(2)}%</span>
<span>{formatRelativeTime(data.last_seen)}</span>
<span>{data.uptime.toFixed(2)}%</span>
</div>
</div>
</div>