From e107f8b6c250759ab0f884b2fdd0283fae15cfe5 Mon Sep 17 00:00:00 2001 From: Md Saban <45597394+mdsaban@users.noreply.github.com> Date: Sun, 30 Jun 2024 03:44:44 +0530 Subject: ui: refactor admin settings page (#249) * ui: refactor admin ui * fix: pr comments * chore: lint fix * chore: refactor * minor tweaks --------- Co-authored-by: MohamedBassem --- .../components/dashboard/admin/AdminActions.tsx | 79 +++++++++++++ .../web/components/dashboard/admin/ServerStats.tsx | 130 +++++++++++++++++++++ apps/web/components/dashboard/admin/UserList.tsx | 75 ++++++++++++ 3 files changed, 284 insertions(+) create mode 100644 apps/web/components/dashboard/admin/AdminActions.tsx create mode 100644 apps/web/components/dashboard/admin/ServerStats.tsx create mode 100644 apps/web/components/dashboard/admin/UserList.tsx (limited to 'apps/web/components/dashboard/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} + > + + + + + ))} + +
+ + ); +} -- cgit v1.2.3-70-g09d2