Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI/Refactor] Admin Settings #249

Merged
merged 6 commits into from
Jun 29, 2024
Merged

[UI/Refactor] Admin Settings #249

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c8b3f62
ui: refactor admin ui
mdsaban Jun 22, 2024
df03fb2
fix: pr comments
mdsaban Jun 25, 2024
03d35e0
chore: lint fix
mdsaban Jun 25, 2024
cd1ff80
Merge branch 'main' into admin-ui
mdsaban Jun 25, 2024
26ff78c
chore: refactor
mdsaban Jun 26, 2024
655aa4d
minor tweaks
MohamedBassem Jun 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 10 additions & 266 deletions apps/web/app/dashboard/admin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,266 +1,11 @@
"use client";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be a server component now and replace useSession with getServerAuthSession

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is throwing error, as we are using useClientConfig in serverStats component, which can not be used if the parent is not client side.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can access it by importing it directly from shared/config.ts


import { useRouter } from "next/navigation";
import { ActionButton } from "@/components/ui/action-button";
import { Separator } from "@/components/ui/separator";
import ServerStats from "@/components/dashboard/admin/ServerStats";
import Users from "@/components/dashboard/admin/Users";
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 = (
<a
href={REPO_RELEASE_PAGE}
target="_blank"
className="text-blue-500"
rel="noreferrer"
>
(New release available: {latestRelease})
</a>
);
}
return (
<p className="text-nowrap">
{currentRelease} {newRelease}
</p>
);
}

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 (
<>
<p className="text-xl">Actions</p>
<ActionButton
className="lg:w-1/2"
variant="destructive"
loading={isRecrawlPending}
onClick={() =>
recrawlLinks({ crawlStatus: "failure", runInference: true })
}
>
Recrawl Failed Links Only
</ActionButton>
<ActionButton
className="lg:w-1/2"
variant="destructive"
loading={isRecrawlPending}
onClick={() => recrawlLinks({ crawlStatus: "all", runInference: true })}
>
Recrawl All Links
</ActionButton>
<ActionButton
className="lg:w-1/2"
variant="destructive"
loading={isRecrawlPending}
onClick={() =>
recrawlLinks({ crawlStatus: "all", runInference: false })
}
>
Recrawl All Links (Without Inference)
</ActionButton>
<ActionButton
className="lg:w-1/2"
variant="destructive"
loading={isReindexPending}
onClick={() => reindexBookmarks()}
>
Reindex All Bookmarks
</ActionButton>
</>
);
}

function ServerStatsSection() {
const { data: serverStats } = api.admin.stats.useQuery(undefined, {
refetchInterval: 1000,
placeholderData: keepPreviousData,
});

if (!serverStats) {
return <LoadingSpinner />;
}

return (
<>
<p className="text-xl">Server Stats</p>
<Table className="lg:w-1/2">
<TableBody>
<TableRow>
<TableCell className="lg:w-2/3">Num Users</TableCell>
<TableCell>{serverStats.numUsers}</TableCell>
</TableRow>
<TableRow>
<TableCell>Num Bookmarks</TableCell>
<TableCell>{serverStats.numBookmarks}</TableCell>
</TableRow>
<TableRow>
<TableCell className="lg:w-2/3">Server Version</TableCell>
<TableCell>
<ReleaseInfo />
</TableCell>
</TableRow>
</TableBody>
</Table>
<Separator />
<p className="text-xl">Background Jobs</p>
<Table className="lg:w-1/2">
<TableHeader>
<TableHead>Job</TableHead>
<TableHead>Queued</TableHead>
<TableHead>Pending</TableHead>
<TableHead>Failed</TableHead>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="lg:w-2/3">Crawling Jobs</TableCell>
<TableCell>{serverStats.crawlStats.queuedInRedis}</TableCell>
<TableCell>{serverStats.crawlStats.pending}</TableCell>
<TableCell>{serverStats.crawlStats.failed}</TableCell>
</TableRow>
<TableRow>
<TableCell>Indexing Jobs</TableCell>
<TableCell>{serverStats.indexingStats.queuedInRedis}</TableCell>
<TableCell>-</TableCell>
<TableCell>-</TableCell>
</TableRow>
<TableRow>
<TableCell>Inference Jobs</TableCell>
<TableCell>{serverStats.inferenceStats.queuedInRedis}</TableCell>
<TableCell>{serverStats.inferenceStats.pending}</TableCell>
<TableCell>{serverStats.inferenceStats.failed}</TableCell>
</TableRow>
</TableBody>
</Table>
</>
);
}

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 <LoadingSpinner />;
}

return (
<>
<p className="text-xl">Users</p>
<Table>
<TableHeader>
<TableHead>Name</TableHead>
<TableHead>Email</TableHead>
<TableHead>Role</TableHead>
<TableHead>Action</TableHead>
</TableHeader>
<TableBody>
{users.users.map((u) => (
<TableRow key={u.id}>
<TableCell>{u.name}</TableCell>
<TableCell>{u.email}</TableCell>
<TableCell>{u.role}</TableCell>
<TableCell>
<ActionButton
variant="destructive"
onClick={() => deleteUser({ userId: u.id })}
loading={isDeletionPending}
disabled={session!.user.id == u.id}
>
<Trash />
</ActionButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</>
);
}

export default function AdminPage() {
const router = useRouter();
const { data: session, status } = useSession();
Expand All @@ -275,14 +20,13 @@ export default function AdminPage() {
}

return (
<div className="flex flex-col gap-5 rounded-md border bg-background p-4">
<p className="text-2xl">Admin</p>
<Separator />
<ServerStatsSection />
<Separator />
<UsersSection />
<Separator />
<ActionsSection />
</div>
<>
<div className="rounded-md border bg-background p-4">
<ServerStats />
</div>
<div className="mt-4 rounded-md border bg-background p-4">
<Users />
mdsaban marked this conversation as resolved.
Show resolved Hide resolved
</div>
</>
);
}
77 changes: 77 additions & 0 deletions apps/web/components/dashboard/admin/AdminActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
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 (
<div>
<div className="mb-2 mt-8 text-xl font-medium">Actions</div>
<div className="flex max-w-screen-sm flex-col gap-2">
<ActionButton
variant="destructive"
loading={isRecrawlPending}
onClick={() =>
recrawlLinks({ crawlStatus: "failure", runInference: true })
}
>
Recrawl Failed Links Only
</ActionButton>
<ActionButton
variant="destructive"
loading={isRecrawlPending}
onClick={() =>
recrawlLinks({ crawlStatus: "all", runInference: true })
}
>
Recrawl All Links
</ActionButton>
<ActionButton
variant="destructive"
loading={isRecrawlPending}
onClick={() =>
recrawlLinks({ crawlStatus: "all", runInference: false })
}
>
Recrawl All Links (Without Inference)
</ActionButton>
<ActionButton
variant="destructive"
loading={isReindexPending}
onClick={() => reindexBookmarks()}
>
Reindex All Bookmarks
</ActionButton>
</div>
</div>
);
}
Loading
Loading