Merge pull request #1072 from notmd/1068_admin_system_config

System config parameter view
LAION-AI · Feb 3, 2023 · 95d143c · 95d143c
2 parents 94cbeb8 + fa9a0cc
commit 95d143c
Show file tree

Hide file tree

Showing 12 changed files with 219 additions and 168 deletions.
diff --git a/website/src/components/AdminArea.tsx b/website/src/components/AdminArea.tsx
@@ -0,0 +1,19 @@
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { ReactNode, useEffect } from "react";
+
+export const AdminArea = ({ children }: { children: ReactNode }) => {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  useEffect(() => {
+    if (status === "loading") {
+      return;
+    }
+    if (session?.user.role === "admin") {
+      return;
+    }
+    router.push("/");
+  }, [router, session, status]);
+  return <main>{status === "loading" ? "loading..." : children}</main>;
+};
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx
@@ -1,7 +1,7 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import { Box, Grid } from "@chakra-ui/react";
-import { Activity, BarChart2, Layout, MessageSquare, Users } from "lucide-react";
+import { Activity, BarChart2, Layout, MessageSquare, Settings, Users } from "lucide-react";
 import type { NextPage } from "next";
 import { Header } from "src/components/Header";
 
@@ -37,19 +37,16 @@ export const getDashboardLayout = (page: React.ReactElement) => (
         {
           label: "Dashboard",
           pathname: "/dashboard",
-          desc: "Dashboard Home",
           icon: Layout,
         },
         {
           label: "Messages",
           pathname: "/messages",
-          desc: "Messages Dashboard",
           icon: MessageSquare,
         },
         {
           label: "Leaderboard",
           pathname: "/leaderboard",
-          desc: "User Leaderboard",
           icon: BarChart2,
         },
       ]}
@@ -72,15 +69,18 @@ export const getAdminLayout = (page: React.ReactElement) => (
         {
           label: "Users",
           pathname: "/admin",
-          desc: "Users Dashboard",
           icon: Users,
         },
         {
           label: "Status",
           pathname: "/admin/status",
-          desc: "Status Dashboard",
           icon: Activity,
         },
+        {
+          label: "Parameters",
+          pathname: "/admin/parameters",
+          icon: Settings,
+        },
       ]}
     >
       {page}

diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx
@@ -6,7 +6,6 @@ import { useRouter } from "next/router";
 export interface MenuButtonOption {
   label: string;
   pathname: string;
-  desc: string;
   icon: LucideIcon;
 }
 

diff --git a/website/src/lib/oasst_api_client.ts b/website/src/lib/oasst_api_client.ts
@@ -29,6 +29,15 @@ export class OasstApiClient {
       };
     }
   }
+
+  fetch_full_settings() {
+    return this.get<Record<string, any>>("/api/v1/admin/backend_settings/full");
+  }
+
+  fetch_public_settings() {
+    return this.get<Record<string, any>>("/api/v1/admin/backend_settings/public");
+  }
+
   // TODO return a strongly typed Task?
   // This method is used to store a task in RegisteredTask.task.
   // This is a raw Json type, so we can't use it to strongly type the task.

diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
@@ -2,8 +2,9 @@ import "../styles/globals.css";
 import "focus-visible";
 
 import type { AppProps } from "next/app";
+import Head from "next/head";
 import { SessionProvider } from "next-auth/react";
-import { appWithTranslation } from "next-i18next";
+import { appWithTranslation, useTranslation } from "next-i18next";
 import { FlagsProvider } from "react-feature-flags";
 import { getDefaultLayout, NextPageWithLayout } from "src/components/Layout";
 import flags from "src/flags";
@@ -24,15 +25,21 @@ const swrConfig: SWRConfiguration = {
 function MyApp({ Component, pageProps: { session, cookies, ...pageProps } }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? getDefaultLayout;
   const page = getLayout(<Component {...pageProps} />);
+  const { t } = useTranslation();
 
   return (
-    <FlagsProvider value={flags}>
-      <Chakra cookies={cookies}>
-        <SWRConfig value={swrConfig}>
-          <SessionProvider session={session}>{page}</SessionProvider>
-        </SWRConfig>
-      </Chakra>
-    </FlagsProvider>
+    <>
+      <Head>
+        <meta name="description" key="description" content={t("index:description")} />
+      </Head>
+      <FlagsProvider value={flags}>
+        <Chakra cookies={cookies}>
+          <SWRConfig value={swrConfig}>
+            <SessionProvider session={session}>{page}</SessionProvider>
+          </SWRConfig>
+        </Chakra>
+      </FlagsProvider>
+    </>
   );
 }
 export { getServerSideProps };

diff --git a/website/src/pages/admin/index.tsx b/website/src/pages/admin/index.tsx
@@ -1,7 +1,5 @@
 import Head from "next/head";
-import { useRouter } from "next/router";
-import { useSession } from "next-auth/react";
-import { useEffect } from "react";
+import { AdminArea } from "src/components/AdminArea";
 import { getAdminLayout } from "src/components/Layout";
 import { UserTable } from "src/components/UserTable";
 export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
@@ -11,33 +9,14 @@ export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_
  * admins the ability to manage their access rights.
  */
 const AdminIndex = () => {
-  const router = useRouter();
-  const { data: session, status } = useSession();
-
-  // 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]);
   return (
     <>
       <Head>
         <title>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>
-      <main>{status === "loading" ? "loading..." : <UserTable />}</main>
+      <AdminArea>
+        <UserTable />
+      </AdminArea>
     </>
   );
 };

diff --git a/website/src/pages/admin/parameters.tsx b/website/src/pages/admin/parameters.tsx
@@ -0,0 +1,36 @@
+import { Card, CardBody, CircularProgress } from "@chakra-ui/react";
+import Head from "next/head";
+import { AdminArea } from "src/components/AdminArea";
+import { getAdminLayout } from "src/components/Layout";
+import { get } from "src/lib/api";
+import useSWRImmutable from "swr/immutable";
+export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
+
+export default function Parameters() {
+  const { data, isLoading, error } = useSWRImmutable("/api/admin/parameters", get);
+
+  return (
+    <>
+      <Head>
+        <title>Parameters - Open Assistant</title>
+      </Head>
+      <AdminArea>
+        <Card>
+          <CardBody>
+            {isLoading && <CircularProgress isIndeterminate></CircularProgress>}
+            {error && "Unable to load data"}
+            {data && (
+              <Card variant="json" overflowX="auto">
+                <CardBody>
+                  <pre>{JSON.stringify(data, null, 2)}</pre>
+                </CardBody>
+              </Card>
+            )}
+          </CardBody>
+        </Card>
+      </AdminArea>
+    </>
+  );
+}
+
+Parameters.getLayout = getAdminLayout;