Merge branch 'main' into 766_admin_enhancement

website/src/components/Hero.tsx

@@ -6,7 +6,7 @@ import { AnimatedCircles } from "./AnimatedCircles";
 import { Container } from "./Container";
 
 export function Hero() {
-  const { t } = useTranslation("index");
+  const { t } = useTranslation(["index", "common"]);
   const { colorMode } = useColorMode();
   const pTextColor = colorMode === "light" ? "text-gray-600" : "text-white";
   const fancyTextGradientClasses =
@@ -17,7 +17,7 @@ export function Hero() {
         <Box className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <Box className="relative mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <Text as="h1" className="text-5xl mb-6 font-bold tracking-tight">
-              {t("title")}
+              {t("common:title")}
             </Text>
             <Text
               as="h2"

website/src/components/Layout.tsx

@@ -2,7 +2,7 @@
 
 import { Box, Grid } from "@chakra-ui/react";
 import type { NextPage } from "next";
-import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi";
+import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers, FiActivity } from "react-icons/fi";
 import { Header } from "src/components/Header";
 
 import { SlimFooter } from "./Dashboard/SlimFooter";
@@ -75,6 +75,12 @@ export const getAdminLayout = (page: React.ReactElement) => (
           desc: "Users Dashboard",
           icon: FiUsers,
         },
+        {
+          label: "Status",
+          pathname: "/admin/status",
+          desc: "Status Dashboard",
+          icon: FiActivity,
+        },
       ]}
     >
       {page}

website/src/components/LeaderboardGridCell/LeaderboardGridCell.tsx

@@ -6,19 +6,19 @@ import { get } from "src/lib/api";
 import { LeaderboardReply, LeaderboardTimeFrame } from "src/types/Leaderboard";
 import useSWRImmutable from "swr/immutable";
 
-const columns = [
+const getColumns = (t) => [
   {
-    Header: "Rank",
+    Header: t("rank"),
     accessor: "rank",
     style: { width: "90px" },
   },
   {
-    Header: "Score",
+    Header: t("score"),
     accessor: "leader_score",
     style: { width: "90px" },
   },
   {
-    Header: "User",
+    Header: t("user"),
     accessor: "display_name",
   },
 ];
@@ -27,11 +27,13 @@ const columns = [
  * Presents a grid of leaderboard entries with more detailed information.
  */
 const LeaderboardGridCell = ({ timeFrame }: { timeFrame: LeaderboardTimeFrame }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(["leaderboard", "common"]);
   const { data: reply } = useSWRImmutable<LeaderboardReply>(`/api/leaderboard?time_frame=${timeFrame}`, get, {
     revalidateOnMount: true,
   });
 
+  const columns = useMemo(() => getColumns(t), [t]);
+
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
     columns,
     data: reply?.leaderboard ?? [],

website/src/lib/oasst_api_client.ts

@@ -164,6 +164,27 @@ export class OasstApiClient {
     });
   }
 
+  /**
+   * Returns the tasks availability information for given `user`.
+   */
+  async fetch_tasks_availability(user: object): Promise<any> {
+    return this.post("/api/v1/tasks/availability", user);
+  }
+
+  /**
+   * Returns the message stats from the backend.
+   */
+  async fetch_stats(): Promise<any> {
+    return this.get("/api/v1/stats/");
+  }
+
+  /**
+   * Returns the tree manager stats from the backend.
+   */
+  async fetch_tree_manager(): Promise<any> {
+    return this.get("/api/v1/stats/tree_manager");
+  }
+
   /**
    * Returns the `BackendUser` associated with `user_id`
    */

website/src/pages/admin/status/index.tsx

@@ -0,0 +1,174 @@
+import {
+  Box,
+  Card,
+  CardBody,
+  CircularProgress,
+  SimpleGrid,
+  Text,
+  Table,
+  TableCaption,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useColorMode,
+} from "@chakra-ui/react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+import useSWRImmutable from "swr/immutable";
+import { getAdminLayout } from "src/components/Layout";
+import { get } from "src/lib/api";
+
+/**
+ * Provides the admin status page that shows result of calls to several backend API endpoints,
+ * namely /api/v1/tasks/availability, /api/v1/stats/, /api/v1/stats/tree_manager
+ */
+
+const StatusIndex = () => {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  const { colorMode } = useColorMode();
+  const dataBackgroundColor = colorMode === "light" ? "gray.100" : "gray.800";
+  // Check when the user session is loaded and re-route if the user is not an
+  // admin.  This follows the suggestion by NextJS for handling private pages:
+  //   https://nextjs.org/docs/api-reference/next/router#usage
+  //
+  // All admin pages should use the same check and routing steps.
+  useEffect(() => {
+    if (status === "loading") {
+      return;
+    }
+    if (session?.user?.role === "admin") {
+      return;
+    }
+    router.push("/");
+  }, [router, session, status]);
+
+  const {
+    data: dataStatus,
+    error: errorStatus,
+    isLoading: isLoadingStatus,
+  } = useSWRImmutable("/api/admin/status", get);
+
+  const { tasksAvailability, stats, treeManager } = dataStatus || {};
+
+  return (
+    <>
+      <Head>
+        <title>Status - Open Assistant</title>
+        <meta
+          name="description"
+          content="Conversational AI for everyone. An open source project to create a chat enabled GPT LLM run by LAION and contributors around the world."
+        />
+      </Head>
+
+      <SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
+        <Card>
+          <CardBody>
+            <Text as="h1" fontSize="3xl" textAlign="center">
+              /api/v1/tasks/availability
+            </Text>
+            <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+              {tasksAvailability?.status === "fulfilled" ? (
+                <pre>{JSON.stringify(tasksAvailability.value, null, 2)}</pre>
+              ) : tasksAvailability?.status === "rejected" ? (
+                <pre>{JSON.stringify(tasksAvailability.reason, null, 2)}</pre>
+              ) : errorStatus ? (
+                <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+              ) : (
+                <CircularProgress isIndeterminate />
+              )}
+            </Box>
+          </CardBody>
+        </Card>
+
+        <Card>
+          <CardBody>
+            <Text as="h1" fontSize="3xl" textAlign="center">
+              /api/v1/stats/
+            </Text>
+            <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+              {stats?.status === "fulfilled" ? (
+                <pre>{JSON.stringify(stats.value, null, 2)}</pre>
+              ) : stats?.status === "rejected" ? (
+                <pre>{JSON.stringify(stats.reason, null, 2)}</pre>
+              ) : errorStatus ? (
+                <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+              ) : (
+                <CircularProgress isIndeterminate />
+              )}
+            </Box>
+          </CardBody>
+        </Card>
+      </SimpleGrid>
+      <br />
+      <Card>
+        <CardBody>
+          <Text as="h1" fontSize="3xl" textAlign="center">
+            /api/v1/stats/tree_manager
+          </Text>
+          {treeManager?.status === "fulfilled" ? (
+            <Box>
+              <Text as="h2" fontSize="2xl">
+                state_counts
+              </Text>
+              <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+                <pre>{JSON.stringify(treeManager.value.state_counts, null, 2)}</pre>
+              </Box>
+              <TableContainer>
+                <br />
+                <Text as="h2" fontSize="2xl">
+                  message_counts
+                </Text>
+                <Table variant="simple">
+                  <TableCaption>Tree Manager</TableCaption>
+                  <Thead>
+                    <Tr>
+                      <Th>Message Tree ID</Th>
+                      <Th>State</Th>
+                      <Th>Depth</Th>
+                      <Th>Oldest</Th>
+                      <Th>Youngest</Th>
+                      <Th>Count</Th>
+                      <Th>Goal Tree Size</Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {treeManager.value.message_counts.map(
+                      ({ message_tree_id, state, depth, oldest, youngest, count, goal_tree_size }) => (
+                        <Tr key={message_tree_id}>
+                          <Td>{message_tree_id}</Td>
+                          <Td>{state}</Td>
+                          <Td>{depth}</Td>
+                          <Td>{oldest}</Td>
+                          <Td>{youngest}</Td>
+                          <Td>{count}</Td>
+                          <Td>{goal_tree_size}</Td>
+                        </Tr>
+                      )
+                    )}
+                  </Tbody>
+                </Table>
+              </TableContainer>
+            </Box>
+          ) : treeManager?.status === "rejected" ? (
+            <pre>{JSON.stringify(treeManager.reason, null, 2)}</pre>
+          ) : errorStatus ? (
+            <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+          ) : (
+            <CircularProgress isIndeterminate />
+          )}
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+StatusIndex.getLayout = getAdminLayout;
+
+export default StatusIndex;

website/src/pages/api/admin/status.ts

@@ -0,0 +1,30 @@
+import { getToken } from "next-auth/jwt";
+import { withRole } from "src/lib/auth";
+import { oasstApiClient } from "src/lib/oasst_api_client";
+import { getBackendUserCore } from "src/lib/users";
+
+/**
+ * Returns tasks availability, stats, and tree manager stats.
+ */
+const handler = withRole("admin", async (req, res) => {
+  const dummyUser = {
+    id: "__dummy_user__",
+    display_name: "Dummy User",
+    auth_method: "local",
+  };
+  const [tasksAvailabilityOutcome, statsOutcome, treeManagerOutcome] = await Promise.allSettled([
+    oasstApiClient.fetch_tasks_availability(dummyUser),
+    oasstApiClient.fetch_stats(),
+    oasstApiClient.fetch_tree_manager(),
+  ]);
+
+  const status = {
+    tasksAvailability: tasksAvailabilityOutcome,
+    stats: statsOutcome,
+    treeManager: treeManagerOutcome,
+  };
+
+  res.status(200).json(status);
+});
+
+export default handler;

website/src/pages/index.tsx

@@ -3,17 +3,17 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useEffect } from "react";
 import { CallToAction } from "src/components/CallToAction";
 import { Faq } from "src/components/Faq";
 import { Hero } from "src/components/Hero";
 import { getTransparentHeaderLayout } from "src/components/Layout";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 
 const Home = () => {
   const router = useRouter();
   const { status } = useSession();
-  const { t } = useTranslation("index");
+  const { t } = useTranslation();
   useEffect(() => {
     if (status === "authenticated") {
       router.push("/dashboard");
@@ -37,10 +37,4 @@ const Home = () => {
 
 Home.getLayout = getTransparentHeaderLayout;
 
-export const getStaticProps = async ({ locale }) => ({
-  props: {
-    ...(await serverSideTranslations(locale, ["index", "common"])),
-  },
-});
-
 export default Home;

website/src/pages/leaderboard.tsx

@@ -1,27 +1,29 @@
 import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
 import Head from "next/head";
+import { useTranslation } from "next-i18next";
 import { getDashboardLayout } from "src/components/Layout";
 import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
 import { LeaderboardTimeFrame } from "src/types/Leaderboard";
 
 const Leaderboard = () => {
+  const { t } = useTranslation(["leaderboard", "common"]);
   return (
     <>
       <Head>
-        <title>Leaderboard - Open Assistant</title>
+        <title>{`${t("leaderboard")} - ${t("common:title")}`}</title>
         <meta name="description" content="Leaderboard Rankings" charSet="UTF-8" />
       </Head>
       <Box display="flex" flexDirection="column">
         <Heading fontSize="2xl" fontWeight="bold" pb="4">
-          Leaderboard
+          {t("leaderboard")}
         </Heading>
         <Tabs isFitted isLazy>
           <TabList>
-            <Tab>Daily</Tab>
-            <Tab>Weekly</Tab>
-            <Tab>Monthly</Tab>
-            <Tab>Overall</Tab>
+            <Tab>{t("daily")}</Tab>
+            <Tab>{t("weekly")}</Tab>
+            <Tab>{t("monthly")}</Tab>
+            <Tab>{t("overall")}</Tab>
           </TabList>
 
           <TabPanels>