Trollboard hide banned (#1786)

Fixes #1759
LAION-AI · Feb 23, 2023 · 4250425 · 4250425
1 parent 8727e84
commit 4250425
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 7 deletions.
diff --git a/website/src/components/LeaderboardTable/TrollboardTable.tsx b/website/src/components/LeaderboardTable/TrollboardTable.tsx
@@ -81,17 +81,21 @@ export const TrollboardTable = ({
   limit,
   rowPerPage,
   timeFrame,
+  enabled,
 }: {
   timeFrame: TrollboardTimeFrame;
   limit: number;
   rowPerPage: number;
+  enabled: boolean;
 }) => {
   const {
     data: trollboardRes,
     isLoading,
     error,
     lastUpdated,
-  } = useFetchBoard<FetchTrollBoardResponse>(`/api/admin/trollboard?time_frame=${timeFrame}&limit=${limit}`);
+  } = useFetchBoard<FetchTrollBoardResponse>(
+    `/api/admin/trollboard?time_frame=${timeFrame}&limit=${limit}&enabled=${enabled}`
+  );
 
   const { data, ...paginationProps } = useBoardPagination<TrollboardEntity>({
     rowPerPage,

diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts
@@ -389,9 +389,10 @@ export class OasstApiClient {
     return this.get<BackendUser>(`/api/v1/frontend_users/${user.auth_method}/${user.id}`);
   }
 
-  fetch_trollboard(time_frame: TrollboardTimeFrame, { limit }: { limit?: number }) {
+  fetch_trollboard(time_frame: TrollboardTimeFrame, { limit, enabled }: { limit?: number; enabled?: boolean }) {
     return this.get<FetchTrollBoardResponse>(`/api/v1/trollboards/${time_frame}`, {
       max_count: limit,
+      enabled: enabled,
     });
   }
 }
diff --git a/website/src/pages/admin/trollboard.tsx b/website/src/pages/admin/trollboard.tsx
@@ -1,4 +1,19 @@
-import { Box, Card, CardBody, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import React from "react";
+import {
+  Box,
+  Card,
+  CardBody,
+  Heading,
+  Radio,
+  RadioGroup,
+  Stack,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  useBoolean,
+} from "@chakra-ui/react";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
@@ -9,6 +24,8 @@ import { TrollboardTimeFrame } from "src/types/Trollboard";
 
 const Leaderboard = () => {
   const { t } = useTranslation(["leaderboard", "common"]);
+  const [enabled, setEnabled] = useBoolean(true);
+
   return (
     <>
       <Head>
@@ -22,6 +39,16 @@ const Leaderboard = () => {
           </Heading>
           <Card>
             <CardBody>
+              <RadioGroup defaultValue="1" onChange={setEnabled.toggle}>
+                <Stack direction="row" spacing={5}>
+                  <Radio value="1" colorScheme="green">
+                    Show active users
+                  </Radio>
+                  <Radio value="2" colorScheme="red">
+                    Show banned users
+                  </Radio>
+                </Stack>
+              </RadioGroup>
               <Tabs isFitted isLazy>
                 <TabList mb={4}>
                   <Tab>{t("daily")}</Tab>
@@ -31,16 +58,36 @@ const Leaderboard = () => {
                 </TabList>
                 <TabPanels>
                   <TabPanel p="0">
-                    <TrollboardTable timeFrame={TrollboardTimeFrame.day} limit={100} rowPerPage={20} />
+                    <TrollboardTable
+                      timeFrame={TrollboardTimeFrame.day}
+                      limit={100}
+                      rowPerPage={20}
+                      enabled={enabled}
+                    />
                   </TabPanel>
                   <TabPanel p="0">
-                    <TrollboardTable timeFrame={TrollboardTimeFrame.week} limit={100} rowPerPage={20} />
+                    <TrollboardTable
+                      timeFrame={TrollboardTimeFrame.week}
+                      limit={100}
+                      rowPerPage={20}
+                      enabled={enabled}
+                    />
                   </TabPanel>
                   <TabPanel p="0">
-                    <TrollboardTable timeFrame={TrollboardTimeFrame.month} limit={100} rowPerPage={20} />
+                    <TrollboardTable
+                      timeFrame={TrollboardTimeFrame.month}
+                      limit={100}
+                      rowPerPage={20}
+                      enabled={enabled}
+                    />
                   </TabPanel>
                   <TabPanel p="0">
-                    <TrollboardTable timeFrame={TrollboardTimeFrame.total} limit={100} rowPerPage={20} />
+                    <TrollboardTable
+                      timeFrame={TrollboardTimeFrame.total}
+                      limit={100}
+                      rowPerPage={20}
+                      enabled={enabled}
+                    />
                   </TabPanel>
                 </TabPanels>
               </Tabs>

diff --git a/website/src/pages/api/admin/trollboard.ts b/website/src/pages/api/admin/trollboard.ts
@@ -8,6 +8,7 @@ export default withAnyRole(["admin", "moderator"], async (req, res, token) => {
 
   const trollboard = await client.fetch_trollboard(req.query.time_frame as TrollboardTimeFrame, {
     limit: req.query.limit as unknown as number,
+    enabled: req.query.enabled as unknown as boolean,
   });
 
   trollboard.trollboard.forEach((troll) => {