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 home page

Browse Source
This commit is contained in:
csehviktor
2025-07-06 03:33:41 +02:00
parent 924187fea1
commit 6267733086
5 changed files with 150 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ui/src/pages/home.tsx
View File

@@ -1,8 +1,27 @@
import { AgentOverviewCard } from "@/components/AgentCard";
"use client";
import { AgentCard, AgentOverviewCard } from "@/components/AgentCard";
import { Header } from "@/components/Header";
import { UptimeMessage } from "@/services/types";
import { isAgentOnline } from "@/services/utils";
import { Box } from "lucide-react";
import { useEffect, useState } from "react";
export function HomePage() {
const [agents, setAgents] = useState<UptimeMessage[]>([]);
useEffect(() => {
fetch("http://localhost:3000/agents")
.then((res) => res.json())
.then((data) => {
setAgents(data);
});
}, []);
const totalAgents = agents.length;
const onlineAgents = agents.filter((agent) => isAgentOnline(agent)).length;
const offlineAgents = totalAgents - onlineAgents;
return (
<div>
<Header
@@ -13,9 +32,12 @@ export function HomePage() {
}}
/>
<main className="max-w-7xl mx-auto py-8">
<h2 className="text-xl font-semibold mb-4">Overview</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<AgentOverviewCard
props={{
count: totalAgents,
title: "total agents",
icon: {
ref: <Box />,
@@ -26,6 +48,7 @@ export function HomePage() {
/>
<AgentOverviewCard
props={{
count: onlineAgents,
title: "online",
icon: {
ref: (
@@ -38,6 +61,7 @@ export function HomePage() {
/>
<AgentOverviewCard
props={{
count: offlineAgents,
title: "offline",
icon: {
ref: (
@@ -53,7 +77,11 @@ export function HomePage() {
<div className="mb-6">
<h2 className="text-xl font-semibold mb-4">Agents</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
<div className="space-y-6">
{agents.map((agent, index) => (
<AgentCard key={index} props={{ data: agent }} />
))}
</div>
</div>
</main>
</div>