add more stats and add a tooltip to them
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 58s

This commit is contained in:
Lee 2024-04-18 02:31:52 +01:00
parent 3ebc3c0612
commit b978bc14df
5 changed files with 39 additions and 15 deletions

@ -1,9 +1,9 @@
import Link from "next/link";
import { Button } from "../components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
import { Separator } from "../components/ui/separator";
import { ReactElement } from "react";
import { Stats } from "@/app/components/stats"; import { Stats } from "@/app/components/stats";
import Link from "next/link";
import { ReactElement } from "react";
import { Button } from "../components/ui/button";
import { Separator } from "../components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
type Button = { type Button = {
title: string; title: string;
@ -29,7 +29,7 @@ const buttons: Button[] = [
export default function Home(): ReactElement { export default function Home(): ReactElement {
return ( return (
<div className="text-center flex flex-col gap-4"> <div className="text-center flex flex-col gap-4 mt-4">
<div> <div>
<h1 className="text-4xl mb-2">Minecraft Utilities</h1> <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
<div className="text-lg"> <div className="text-lg">

@ -8,7 +8,7 @@ export default function Container({
return ( return (
<div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]"> <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
<NavBar /> <NavBar />
<div className="w-full flex m-4 justify-center">{children}</div> <div className="w-full flex mt-4 justify-center">{children}</div>
</div> </div>
); );
} }

@ -37,14 +37,14 @@ export function LookupPlayer(): JSX.Element {
}; };
return ( return (
<form className="flex gap-2 justify-center mt-2" action="" onSubmit={(event) => event.preventDefault()}> <form className="flex gap-2 justify-center mt-2" action="" onSubmit={event => event.preventDefault()}>
<Input <Input
className="w-fit" className="w-fit"
type="search" type="search"
name="query" name="query"
placeholder="Name / UUID" placeholder="Name / UUID"
value={id} value={id}
onChange={(event) => { onChange={event => {
setId(event.target.value); setId(event.target.value);
}} }}
maxLength={36} maxLength={36}

@ -68,7 +68,7 @@ export function LookupServer(): JSX.Element {
<form <form
className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row" className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row"
action="" action=""
onSubmit={(event) => event.preventDefault()} onSubmit={event => event.preventDefault()}
> >
<Input <Input
className="w-fit" className="w-fit"

@ -1,13 +1,15 @@
"use client"; "use client";
import { ReactElement } from "react";
import { StorageIcon } from "@/app/components/icon/storage-icon"; import { StorageIcon } from "@/app/components/icon/storage-icon";
import { Stat } from "@/app/components/stat"; import { Stat } from "@/app/components/stat";
import { ReactElement } from "react";
import useWebSocket from "react-use-websocket"; import useWebSocket from "react-use-websocket";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
type Stat = { type Stat = {
id: string; id: string;
displayName: string; displayName: string;
tooltip: string;
icon: ReactElement; icon: ReactElement;
}; };
@ -15,21 +17,43 @@ const stats: Stat[] = [
{ {
id: "totalRequests", id: "totalRequests",
displayName: "Total Requests", displayName: "Total Requests",
tooltip: "The total amount of requests to the API",
icon: <StorageIcon />,
},
{
id: "totalPlayerLookups",
displayName: "Player Lookups",
tooltip: "The total amount of player lookups",
icon: <StorageIcon />,
},
{
id: "totalServerLookups",
displayName: "Server Lookups",
tooltip: "The total amount of server lookups",
icon: <StorageIcon />, icon: <StorageIcon />,
}, },
]; ];
export function Stats(): ReactElement { export function Stats(): ReactElement {
const { lastMessage, readyState } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics"); const { lastMessage } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
const metrics = lastMessage !== null ? JSON.parse(lastMessage.data).metrics : undefined; const metrics = lastMessage !== null ? JSON.parse(lastMessage.data).metrics : undefined;
return ( return (
<> <div className="flex gap-4">
{stats.map((stat, index) => { {stats.map((stat, index) => {
const value = metrics ? metrics[stat.id] : "???"; const value = metrics ? metrics[stat.id] : "???";
return <Stat key={index} title={stat.displayName} value={value} icon={stat.icon} />; return (
<Tooltip key={index}>
<TooltipTrigger className="cursor-default">
<Stat title={stat.displayName} value={value} icon={stat.icon} />
</TooltipTrigger>
<TooltipContent>
<p>{stat.tooltip}</p>
</TooltipContent>
</Tooltip>
);
})} })}
</> </div>
); );
} }