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

fix responsive issues

Browse Source
This commit is contained in:
csehviktor
2025-07-06 04:44:20 +02:00
parent f08b4067ae
commit 92bfa6e4e8
4 changed files with 95 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { UptimeMessage } from "@/services/types";
import { formatRelativeTime, isAgentOnline } from "@/services/utils";
import { DottedProgressBar } from "./Progressbar";
import { Progressbar } from "./Progressbar";
export type AgentOverviewCardProps = {
count: number;
@@ -69,24 +69,23 @@ export function AgentCard({ props }: { props: AgentCardProps }) {
onClick={() => props.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">
<div className="flex items-center justify-between space-x-10">
<div className="flex items-center space-x-3">
<div
className={`px-2 py-1 rounded-md text-xs font-medium ${status.bgColor} ${status.textColor} border ${status.borderColor}`}
>
{status.name.toUpperCase()}
</div>
<h3 className="text-lg font-semibold text-white transition-colors">
<h3 className="text-sm md:text-md lg:text-lg font-semibold text-white transition-colors">
{props.data.agent}
</h3>
</div>
<div className="flex items-center space-x-3 flex-1 justify-end">
<div className="flex flex-col max-w-lg gap-y-2">
<DottedProgressBar
<Progressbar
color={status.color}
percentage={props.data.uptime}
totalDots={20}
/>
<div className="flex justify-between items-center text-xs">
<span>

2
ui/src/components/Header.tsx
View File

@@ -9,7 +9,7 @@ export type HeaderProps = {
export function Header({ props }: { props: HeaderProps }) {
return (
<header className="bg-[#111111] border-b border-[#111111]">
<header className="bg-[#0d0d0d] border-b border-[#191919]">
<div className="max-w-7xl mx-auto py-4 flex justify-between items-center">
<div className="flex items-center space-x-3">
<div className="w-11 h-11 text-yellow-500 flex items-center justify-center">

44
ui/src/components/Progressbar.tsx
View File

@@ -1,20 +1,54 @@
export function DottedProgressBar({
"use client";
import { useEffect, useRef, useState } from "react";
export function Progressbar({
color,
percentage,
totalDots = 10,
}: {
color: string;
percentage: number;
totalDots?: number;
}) {
const containerRef = useRef<HTMLDivElement>(null);
const [totalDots, setTotalDots] = useState<number>(0);
useEffect(() => {
const calculateDots = () => {
if (!containerRef.current) return;
const parent =
containerRef.current.parentElement?.parentElement
?.parentElement;
if (!parent) return;
const availableWidth = parent.clientWidth;
const dotCount = Math.floor(availableWidth / 48);
setTotalDots(Math.max(5, Math.min(20, dotCount)));
};
calculateDots();
const resizeObserver = new ResizeObserver(calculateDots);
if (containerRef.current) {
resizeObserver.observe(containerRef.current);
}
return () => resizeObserver.disconnect();
});
const filledDots = Math.round((percentage / 100) * totalDots);
return (
<div className="flex items-center justify-center space-x-2">
<div
ref={containerRef}
className="flex items-center justify-center space-x-2"
>
{Array.from({ length: totalDots }).map((_, index) => (
<div
key={index}
className={`w-[14px] h-[14px] rounded-full transition-all duration-300 ${
className={`w-3 h-3 lg:w-4 lg:h-4 rounded-full transition-all duration-300 ${
index < filledDots ? color : "bg-[#232323]"
}`}
/>

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

@@ -32,55 +32,60 @@ export function HomePage() {
}}
/>
<main className="max-w-7xl mx-auto py-8">
<h2 className="text-xl font-semibold mb-4">Overview</h2>
<div className="mx-2">
<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 />,
color: "rgb(96, 165, 250)",
bgColor: "rgba(59, 130, 246, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: onlineAgents,
title: "online",
icon: {
ref: (
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
),
color: "rgb(34, 197, 94)",
bgColor: "rgba(34, 197, 94, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: offlineAgents,
title: "offline",
icon: {
ref: (
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
),
color: "rgb(239, 68, 68)",
bgColor: "rgba(239, 68, 68, 0.2)",
},
}}
/>
</div>
<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 />,
color: "rgb(96, 165, 250)",
bgColor: "rgba(59, 130, 246, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: onlineAgents,
title: "online",
icon: {
ref: (
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
),
color: "rgb(34, 197, 94)",
bgColor: "rgba(34, 197, 94, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: offlineAgents,
title: "offline",
icon: {
ref: (
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
),
color: "rgb(239, 68, 68)",
bgColor: "rgba(239, 68, 68, 0.2)",
},
}}
/>
</div>
<div className="mb-6">
<h2 className="text-xl font-semibold mb-4">Agents</h2>
<div className="mb-6">
<h2 className="text-xl font-semibold mb-4">Agents</h2>
<div className="space-y-6">
{agents.map((agent, index) => (
<AgentCard key={index} props={{ data: agent }} />
))}
<div className="space-y-6">
{agents.map((agent, index) => (
<AgentCard
key={index}
props={{ data: agent }}
/>
))}
</div>
</div>
</div>
</main>