Merge branch 'main' into 766_admin_enhancement

2026-07-26 13:07:22 +08:00 · 2023-01-22 14:07:19 +07:00
parent 15acd1c64e 91ea5eab9b
commit fa5702ac9e
33 changed files with 1186 additions and 38 deletions
@@ -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;
@@ -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;
@@ -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;
@@ -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>