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 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 = {
title: string;
@ -29,7 +29,7 @@ const buttons: Button[] = [
export default function Home(): ReactElement {
return (
<div className="text-center flex flex-col gap-4">
<div className="text-center flex flex-col gap-4 mt-4">
<div>
<h1 className="text-4xl mb-2">Minecraft Utilities</h1>
<div className="text-lg">

@ -8,7 +8,7 @@ export default function Container({
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]">
<NavBar />
<div className="w-full flex m-4 justify-center">{children}</div>
<div className="w-full flex mt-4 justify-center">{children}</div>
</div>
);
}

@ -37,14 +37,14 @@ export function LookupPlayer(): JSX.Element {
};
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
className="w-fit"
type="search"
name="query"
placeholder="Name / UUID"
value={id}
onChange={(event) => {
onChange={event => {
setId(event.target.value);
}}
maxLength={36}

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

@ -1,13 +1,15 @@
"use client";
import { ReactElement } from "react";
import { StorageIcon } from "@/app/components/icon/storage-icon";
import { Stat } from "@/app/components/stat";
import { ReactElement } from "react";
import useWebSocket from "react-use-websocket";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
type Stat = {
id: string;
displayName: string;
tooltip: string;
icon: ReactElement;
};
@ -15,21 +17,43 @@ const stats: Stat[] = [
{
id: "totalRequests",
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 />,
},
];
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;
return (
<>
<div className="flex gap-4">
{stats.map((stat, index) => {
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>
);
}