diff --git a/website/src/pages/admin/status/index.tsx b/website/src/pages/admin/status/index.tsx index 6af65b61..4eaa5a7e 100644 --- a/website/src/pages/admin/status/index.tsx +++ b/website/src/pages/admin/status/index.tsx @@ -1,32 +1,31 @@ -import { Box, Button, Container, Flex, FormControl, FormLabel, Input, Select, SimpleGrid, Stack, Text, useToast } from "@chakra-ui/react"; import { - Spacer, - Table, - TableCaption, - TableContainer, - Tbody, - Td, - Th, - Thead, - Tr, - useColorMode + Box, + Button, + CircularProgress, + Container, + SimpleGrid, + Text, + Table, + TableCaption, + TableContainer, + Tbody, + Td, + Th, + Thead, + Tr, + View, + useColorMode, + useToast, } from "@chakra-ui/react"; -/* import { Field, Form, Formik } from "formik"; */ import Head from "next/head"; import { useRouter } from "next/router"; import { useSession } from "next-auth/react"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; +import useSWRImmutable from "swr/immutable"; import { getAdminLayout } from "src/components/Layout"; import poster from "src/lib/poster"; import prisma from "src/lib/prismadb"; -import useSWR from "swr/mutation"; - -import { useState } from "react"; -import useSWRMutation from "swr/mutation"; -import useSWRImmutable from "swr/immutable"; -import { get, post } from "src/lib/api"; - -/* import TreeManagerCell from "src/components/TreeManagerCell"; */ +import { get } from "src/lib/api"; /** * Provides the admin status page that shows result of calls to several backend API endpoints, @@ -34,133 +33,156 @@ import { get, post } from "src/lib/api"; */ const StatusIndex = ({ user }) => { - const toast = useToast(); - const router = useRouter(); - const { data: session, status } = useSession(); + const toast = useToast(); + const router = useRouter(); + const { data: session, status } = useSession(); - const { colorMode } = useColorMode(); - const backgroundColor = colorMode === "light" ? "white" : "gray.700"; - const dataBackgroundColor = colorMode === "light" ? "gray.100" : "gray.700"; - // 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 { colorMode } = useColorMode(); + const backgroundColor = colorMode === "light" ? "white" : "gray.700"; + 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 [availability, setAvailability] = useState(0); - const [stats, setStats] = useState(0); - const [treeManager, setTreeManager] = useState(0); + const [availability, setAvailability] = useState(0); + const [stats, setStats] = useState(0); + const [treeManager, setTreeManager] = useState(0); - const {data: dataAvailability, error: errorAvailability, isLoading: isLoadingAvailability} = useSWRImmutable("/api/admin/tasks_availability", get, { - onSuccess: (data) => { - setAvailability(data); } - }); - const {data: dataStats, error: errorStats, isLoading: isLoadingStats} = useSWRImmutable("/api/admin/stats", get, { - onSuccess: (data) => { setStats(data); } - }); - const {data: dataTreeManager, error: errorTreeManager, isLoading: isLoadingTreeManager} = useSWRImmutable("/api/admin/tree_manager", get, { - onSuccess: (data) => { - setTreeManager(data); } - }); + const { + data: dataAvailability, + error: errorAvailability, + isLoading: isLoadingAvailability, + } = useSWRImmutable("/api/admin/tasks_availability", get, { + onSuccess: (data) => { + setAvailability(data); + }, + onError: (error) => { + setAvailability(error); + }, + }); + const { + data: dataStats, + error: errorStats, + isLoading: isLoadingStats, + } = useSWRImmutable("/api/admin/stats", get, { + onSuccess: (data) => { + setStats(data); + }, + onError: (error) => { + setStats(error); + }, + }); + const { + data: dataTreeManager, + error: errorTreeManager, + isLoading: isLoadingTreeManager, + } = useSWRImmutable("/api/admin/tree_manager", get, { + onSuccess: (data) => { + setTreeManager(data); + }, + onError: (error) => { + setTreeManager(error); + }, + }); - return ( - <> - - Status - Open Assistant - - + return ( + <> + + Status - Open Assistant + + - - - /api/v1/tasks/availability - - - 
-                            {availability ? JSON.stringify(availability, null, 2) : "None"}
-
- - - - - - /api/v1/stats/ - - - 
-                            {stats ? JSON.stringify(stats, null, 2) : "None"}
-
- - + + + /api/v1/tasks/availability + + + 
+              {availability ? JSON.stringify(availability, null, 2) : }
+
+ + + + + /api/v1/stats/ + + + 
{stats ? JSON.stringify(stats, null, 2) : }
+ + -
+
+ + + /api/v1/stats/tree_manager + - - - - /api/v1/stats/tree_manager - - - {treeManager ? - - - state_counts - - - 
-                                 {JSON.stringify(treeManager.state_counts, null, 2)}
-
- - -
- - message_counts - - - Tree Manager - - - - - - - - - - - - - {treeManager.message_counts.map(({ message_tree_id, state, depth, oldest, youngest, count, goal_tree_size }) => ( - - - - - - - - - - ))} - -
Message Tree IDStateDepthOldestYoungestCountGoal Tree Size
{message_tree_id}{state}{depth}{oldest}{youngest}{count}{goal_tree_size}
- - : "None"} - - - ); + {treeManager ? ( + + + state_counts + + + 
{JSON.stringify(treeManager.state_counts, null, 2)}
+ + +
+ + message_counts + + + Tree Manager + + + + + + + + + + + + + {treeManager.message_counts.map( + ({ message_tree_id, state, depth, oldest, youngest, count, goal_tree_size }) => ( + + + + + + + + + + ) + )} + +
Message Tree IDStateDepthOldestYoungestCountGoal Tree Size
{message_tree_id}{state}{depth}{oldest}{youngest}{count}{goal_tree_size}
+ + + ) : ( + + )} + + + ); }; StatusIndex.getLayout = getAdminLayout; diff --git a/website/src/pages/api/admin/stats.ts b/website/src/pages/api/admin/stats.ts index 1dedbd30..dfc4768b 100644 --- a/website/src/pages/api/admin/stats.ts +++ b/website/src/pages/api/admin/stats.ts @@ -10,6 +10,7 @@ const handler = withRole("admin", async (req, res) => { "X-API-Key": process.env.FASTAPI_KEY, }, }); + const stats = await statsRes.json(); res.status(statsRes.status).json(stats);