add more stats and add a tooltip to them
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 58s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 58s
This commit is contained in:
parent
3ebc3c0612
commit
b978bc14df
@ -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>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user