diff --git a/apps/web/app/dashboard/admin/page.tsx b/apps/web/app/dashboard/admin/page.tsx index 155b2e17..18efc889 100644 --- a/apps/web/app/dashboard/admin/page.tsx +++ b/apps/web/app/dashboard/admin/page.tsx @@ -1,288 +1,23 @@ -"use client"; - -import { useRouter } from "next/navigation"; -import { ActionButton } from "@/components/ui/action-button"; -import { Separator } from "@/components/ui/separator"; -import LoadingSpinner from "@/components/ui/spinner"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { toast } from "@/components/ui/use-toast"; -import { useClientConfig } from "@/lib/clientConfig"; -import { api } from "@/lib/trpc"; -import { keepPreviousData, useQuery } from "@tanstack/react-query"; -import { Trash } from "lucide-react"; -import { useSession } from "next-auth/react"; - -const REPO_LATEST_RELEASE_API = - "https://api.github.com/repos/hoarder-app/hoarder/releases/latest"; -const REPO_RELEASE_PAGE = "https://github.com/hoarder-app/hoarder/releases"; - -function useLatestRelease() { - const { data } = useQuery({ - queryKey: ["latest-release"], - queryFn: async () => { - const res = await fetch(REPO_LATEST_RELEASE_API); - if (!res.ok) { - return undefined; - } - const data = (await res.json()) as { name: string }; - return data.name; - }, - staleTime: 60 * 60 * 1000, - enabled: !useClientConfig().disableNewReleaseCheck, - }); - return data; -} - -function ReleaseInfo() { - const currentRelease = useClientConfig().serverVersion ?? "not set"; - const latestRelease = useLatestRelease(); - - let newRelease; - if (latestRelease && currentRelease != latestRelease) { - newRelease = ( - - (New release available: {latestRelease}) - - ); +import { redirect } from "next/navigation"; +import AdminActions from "@/components/dashboard/admin/AdminActions"; +import ServerStats from "@/components/dashboard/admin/ServerStats"; +import UserList from "@/components/dashboard/admin/UserList"; +import { getServerAuthSession } from "@/server/auth"; + +export default async function AdminPage() { + const session = await getServerAuthSession(); + if (!session || session.user.role !== "admin") { + redirect("/"); } - return ( -

- {currentRelease} {newRelease} -

- ); -} - -function ActionsSection() { - const { mutate: recrawlLinks, isPending: isRecrawlPending } = - api.admin.recrawlLinks.useMutation({ - onSuccess: () => { - toast({ - description: "Recrawl enqueued", - }); - }, - onError: (e) => { - toast({ - variant: "destructive", - description: e.message, - }); - }, - }); - - const { mutate: reindexBookmarks, isPending: isReindexPending } = - api.admin.reindexAllBookmarks.useMutation({ - onSuccess: () => { - toast({ - description: "Reindex enqueued", - }); - }, - onError: (e) => { - toast({ - variant: "destructive", - description: e.message, - }); - }, - }); - return ( <> -

Actions

- - recrawlLinks({ crawlStatus: "failure", runInference: true }) - } - > - Recrawl Failed Links Only - - recrawlLinks({ crawlStatus: "all", runInference: true })} - > - Recrawl All Links - - - recrawlLinks({ crawlStatus: "all", runInference: false }) - } - > - Recrawl All Links (Without Inference) - - reindexBookmarks()} - > - Reindex All Bookmarks - +
+ + +
+
+ +
); } - -function ServerStatsSection() { - const { data: serverStats } = api.admin.stats.useQuery(undefined, { - refetchInterval: 1000, - placeholderData: keepPreviousData, - }); - - if (!serverStats) { - return ; - } - - return ( - <> -

Server Stats

- - - - Num Users - {serverStats.numUsers} - - - Num Bookmarks - {serverStats.numBookmarks} - - - Server Version - - - - - -
- -

Background Jobs

- - - Job - Queued - Pending - Failed - - - - Crawling Jobs - {serverStats.crawlStats.queuedInRedis} - {serverStats.crawlStats.pending} - {serverStats.crawlStats.failed} - - - Indexing Jobs - {serverStats.indexingStats.queuedInRedis} - - - - - - - Inference Jobs - {serverStats.inferenceStats.queuedInRedis} - {serverStats.inferenceStats.pending} - {serverStats.inferenceStats.failed} - - -
- - ); -} - -function UsersSection() { - const { data: session } = useSession(); - const invalidateUserList = api.useUtils().users.list.invalidate; - const { data: users } = api.users.list.useQuery(); - const { mutate: deleteUser, isPending: isDeletionPending } = - api.users.delete.useMutation({ - onSuccess: () => { - toast({ - description: "User deleted", - }); - invalidateUserList(); - }, - onError: (e) => { - toast({ - variant: "destructive", - description: `Something went wrong: ${e.message}`, - }); - }, - }); - - if (!users) { - return ; - } - - return ( - <> -

Users

- - - Name - Email - Role - Action - - - {users.users.map((u) => ( - - {u.name} - {u.email} - {u.role} - - deleteUser({ userId: u.id })} - loading={isDeletionPending} - disabled={session!.user.id == u.id} - > - - - - - ))} - -
- - ); -} - -export default function AdminPage() { - const router = useRouter(); - const { data: session, status } = useSession(); - - if (status == "loading") { - return ; - } - - if (!session || session.user.role != "admin") { - router.push("/"); - return; - } - - return ( -
-

Admin

- - - - - - -
- ); -} diff --git a/apps/web/components/dashboard/admin/AdminActions.tsx b/apps/web/components/dashboard/admin/AdminActions.tsx new file mode 100644 index 00000000..783f7e76 --- /dev/null +++ b/apps/web/components/dashboard/admin/AdminActions.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { ActionButton } from "@/components/ui/action-button"; +import { toast } from "@/components/ui/use-toast"; +import { api } from "@/lib/trpc"; + +export default function AdminActions() { + const { mutate: recrawlLinks, isPending: isRecrawlPending } = + api.admin.recrawlLinks.useMutation({ + onSuccess: () => { + toast({ + description: "Recrawl enqueued", + }); + }, + onError: (e) => { + toast({ + variant: "destructive", + description: e.message, + }); + }, + }); + + const { mutate: reindexBookmarks, isPending: isReindexPending } = + api.admin.reindexAllBookmarks.useMutation({ + onSuccess: () => { + toast({ + description: "Reindex enqueued", + }); + }, + onError: (e) => { + toast({ + variant: "destructive", + description: e.message, + }); + }, + }); + + return ( +
+
Actions
+
+ + recrawlLinks({ crawlStatus: "failure", runInference: true }) + } + > + Recrawl Failed Links Only + + + recrawlLinks({ crawlStatus: "all", runInference: true }) + } + > + Recrawl All Links + + + recrawlLinks({ crawlStatus: "all", runInference: false }) + } + > + Recrawl All Links (Without Inference) + + reindexBookmarks()} + > + Reindex All Bookmarks + +
+
+ ); +} diff --git a/apps/web/components/dashboard/admin/ServerStats.tsx b/apps/web/components/dashboard/admin/ServerStats.tsx new file mode 100644 index 00000000..06e3421f --- /dev/null +++ b/apps/web/components/dashboard/admin/ServerStats.tsx @@ -0,0 +1,130 @@ +"use client"; + +import LoadingSpinner from "@/components/ui/spinner"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { useClientConfig } from "@/lib/clientConfig"; +import { api } from "@/lib/trpc"; +import { keepPreviousData, useQuery } from "@tanstack/react-query"; + +const REPO_LATEST_RELEASE_API = + "https://api.github.com/repos/hoarder-app/hoarder/releases/latest"; +const REPO_RELEASE_PAGE = "https://github.com/hoarder-app/hoarder/releases"; + +function useLatestRelease() { + const { data } = useQuery({ + queryKey: ["latest-release"], + queryFn: async () => { + const res = await fetch(REPO_LATEST_RELEASE_API); + if (!res.ok) { + return undefined; + } + const data = (await res.json()) as { name: string }; + return data.name; + }, + staleTime: 60 * 60 * 1000, + enabled: !useClientConfig().disableNewReleaseCheck, + }); + return data; +} + +function ReleaseInfo() { + const currentRelease = useClientConfig().serverVersion ?? "NA"; + const latestRelease = useLatestRelease(); + + let newRelease; + if (latestRelease && currentRelease != latestRelease) { + newRelease = ( + + ({latestRelease} ⬆️) + + ); + } + return ( +
+ {currentRelease} + {newRelease} +
+ ); +} + +export default function ServerStats() { + const { data: serverStats } = api.admin.stats.useQuery(undefined, { + refetchInterval: 1000, + placeholderData: keepPreviousData, + }); + + if (!serverStats) { + return ; + } + + return ( + <> +
Server Stats
+
+
+
Total Users
+
{serverStats.numUsers}
+
+
+
+ Total Bookmarks +
+
+ {serverStats.numBookmarks} +
+
+
+
+ Server Version +
+ +
+
+ +
+
Background Jobs
+ + + Job + Queued + Pending + Failed + + + + Crawling Jobs + {serverStats.crawlStats.queuedInRedis} + {serverStats.crawlStats.pending} + {serverStats.crawlStats.failed} + + + Indexing Jobs + {serverStats.indexingStats.queuedInRedis} + - + - + + + Inference Jobs + {serverStats.inferenceStats.queuedInRedis} + {serverStats.inferenceStats.pending} + {serverStats.inferenceStats.failed} + + +
+
+ + ); +} diff --git a/apps/web/components/dashboard/admin/UserList.tsx b/apps/web/components/dashboard/admin/UserList.tsx new file mode 100644 index 00000000..024325a3 --- /dev/null +++ b/apps/web/components/dashboard/admin/UserList.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { ActionButton } from "@/components/ui/action-button"; +import LoadingSpinner from "@/components/ui/spinner"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { toast } from "@/components/ui/use-toast"; +import { api } from "@/lib/trpc"; +import { Trash } from "lucide-react"; +import { useSession } from "next-auth/react"; + +export default function UsersSection() { + const { data: session } = useSession(); + const invalidateUserList = api.useUtils().users.list.invalidate; + const { data: users } = api.users.list.useQuery(); + const { mutate: deleteUser, isPending: isDeletionPending } = + api.users.delete.useMutation({ + onSuccess: () => { + toast({ + description: "User deleted", + }); + invalidateUserList(); + }, + onError: (e) => { + toast({ + variant: "destructive", + description: `Something went wrong: ${e.message}`, + }); + }, + }); + + if (!users) { + return ; + } + + return ( + <> +
Users List
+ + + + Name + Email + Role + Action + + + {users.users.map((u) => ( + + {u.name} + {u.email} + {u.role} + + deleteUser({ userId: u.id })} + loading={isDeletionPending} + disabled={session!.user.id == u.id} + > + + + + + ))} + +
+ + ); +}