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 { 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user