Update Error Handling

- Move registry pages behind auth check - Create get.ts which holds api endpoints that get updated - Fix AuthenticatedContent.tsx to check it auth value is true
PelicanPlatform · Nov 21, 2024 · 24bad1b · 24bad1b
1 parent 15729b6
commit 24bad1b
Show file tree

Hide file tree

Showing 17 changed files with 148 additions and 116 deletions.
diff --git a/web_ui/frontend/app/registry/cache/edit/page.tsx b/web_ui/frontend/app/registry/cache/edit/page.tsx
@@ -24,6 +24,7 @@ import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
 
 import { putGeneralNamespace } from '@/helpers/api';
+import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 
 export default function Page() {
   const putCache = async (data: any) => {
@@ -43,7 +44,9 @@ export default function Page() {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <PutPage update={putCache} />
+          <AuthenticatedContent redirect={true}>
+            <PutPage update={putCache} />
+          </AuthenticatedContent>
         </Grid>
       </Grid>
     </Box>

diff --git a/web_ui/frontend/app/registry/cache/register/page.tsx b/web_ui/frontend/app/registry/cache/register/page.tsx
@@ -23,6 +23,7 @@ import { PostPage } from '@/app/registry/components/PostPage';
 import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
 import { postGeneralNamespace } from '@/helpers/api';
+import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 
 export default function Page() {
   const postCache = async (data: any) => {
@@ -42,7 +43,9 @@ export default function Page() {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <PostPage update={postCache} />
+          <AuthenticatedContent redirect={true}>
+            <PostPage update={postCache} />
+          </AuthenticatedContent>
         </Grid>
       </Grid>
     </Box>

diff --git a/web_ui/frontend/app/registry/components/Form.tsx b/web_ui/frontend/app/registry/components/Form.tsx
@@ -58,12 +58,16 @@ const Form = ({ namespace, onSubmit }: FormProps) => {
     Omit<CustomRegistrationFieldProps, 'onChange'>[] | undefined
   >(
     'optionsNamespaceRegistrationFields',
-    async () =>
-      await alertOnError(
+    async () => {
+      const response = await alertOnError(
         optionsNamespaceRegistrationFields,
         "Couldn't fetch registration fields",
         dispatch
-      ),
+      );
+      if(response){
+        return await response.json();
+      }
+    },
     { fallbackData: [] }
   );
 

diff --git a/web_ui/frontend/app/registry/components/PutPage.tsx b/web_ui/frontend/app/registry/components/PutPage.tsx
@@ -116,7 +116,7 @@ const PutPage = ({ update }: NamespaceFormPage) => {
           dispatch
         );
         if (response) {
-          setNamespace(response);
+          setNamespace(await response.json());
         }
       }
     })();

diff --git a/web_ui/frontend/app/registry/denied/page.tsx b/web_ui/frontend/app/registry/denied/page.tsx
@@ -28,14 +28,14 @@ import useSWR from 'swr';
 import { CardProps } from '@/components/Namespace/Card';
 import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 import DeniedCard from '@/components/Namespace/DeniedCard';
-import { getExtendedNamespaces } from '@/helpers/api';
+import { getExtendedNamespaces } from '@/helpers/get';
 import { AlertDispatchContext } from '@/components/AlertProvider';
 import { alertOnError } from '@/helpers/util';
 
 export default function Home() {
   const dispatch = useContext(AlertDispatchContext);
 
-  const { data } = useSWR('getNamespaces', async () =>
+  const { data } = useSWR('getExtendedNamespaces', async () =>
     alertOnError(getExtendedNamespaces, "Couldn't fetch namespaces", dispatch)
   );
   const { data: user, error } = useSWR('getUser', async () =>

diff --git a/web_ui/frontend/app/registry/namespace/edit/page.tsx b/web_ui/frontend/app/registry/namespace/edit/page.tsx
@@ -22,6 +22,7 @@ import { PutPage } from '@/app/registry/components/PutPage';
 import { putGeneralNamespace } from '@/helpers/api';
 import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
+import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 
 export default function Page() {
   const putCache = async (data: any) => {
@@ -40,7 +41,9 @@ export default function Page() {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <PutPage update={putCache} />
+          <AuthenticatedContent redirect={true}>
+            <PutPage update={putCache} />
+          </AuthenticatedContent>
         </Grid>
       </Grid>
     </Box>

diff --git a/web_ui/frontend/app/registry/namespace/register/page.tsx b/web_ui/frontend/app/registry/namespace/register/page.tsx
@@ -22,6 +22,7 @@ import { postGeneralNamespace } from '@/helpers/api';
 import { PostPage } from '@/app/registry/components/PostPage';
 import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
+import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 
 export default function Page() {
   const postCache = async (data: any) => {
@@ -40,7 +41,9 @@ export default function Page() {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <PostPage update={postCache} />
+          <AuthenticatedContent redirect={true}>
+              <PostPage update={postCache} />
+          </AuthenticatedContent>
         </Grid>
       </Grid>
     </Box>

diff --git a/web_ui/frontend/app/registry/origin/edit/page.tsx b/web_ui/frontend/app/registry/origin/edit/page.tsx
@@ -23,6 +23,7 @@ import { namespaceToOrigin } from '@/app/registry/components/util';
 import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
 import { putGeneralNamespace } from '@/helpers/api';
+import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 
 export default function Page() {
   const putCache = async (data: any) => {
@@ -42,7 +43,9 @@ export default function Page() {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <PutPage update={putCache} />
+          <AuthenticatedContent redirect={true} promptLogin={false}>
+            <PutPage update={putCache} />
+          </AuthenticatedContent>
         </Grid>
       </Grid>
     </Box>

diff --git a/web_ui/frontend/app/registry/origin/register/page.tsx b/web_ui/frontend/app/registry/origin/register/page.tsx
@@ -23,6 +23,7 @@ import { PostPage } from '@/app/registry/components/PostPage';
 import { Box, Grid, Typography } from '@mui/material';
 import React from 'react';
 import { postGeneralNamespace } from '@/helpers/api';
+import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 
 export default function Page() {
   const postCache = async (data: any) => {
@@ -42,7 +43,9 @@ export default function Page() {
           </Typography>
         </Grid>
         <Grid item xs={12}>
-          <PostPage update={postCache} />
+          <AuthenticatedContent redirect={true}>
+            <PostPage update={postCache} />
+          </AuthenticatedContent>
         </Grid>
       </Grid>
     </Box>

diff --git a/web_ui/frontend/app/registry/page.tsx b/web_ui/frontend/app/registry/page.tsx
@@ -46,15 +46,15 @@ import { CardProps } from '@/components/Namespace/Card';
 import { PendingCardProps } from '@/components/Namespace/PendingCard';
 import { AlertDispatchContext } from '@/components/AlertProvider';
 import { alertOnError } from '@/helpers/util';
-import { getExtendedNamespaces } from '@/helpers/api';
+import { getExtendedNamespaces } from '@/helpers/get';
 
 export default function Home() {
   const dispatch = useContext(AlertDispatchContext);
 
   const { data, mutate: mutateNamespaces } = useSWR<
     { namespace: Namespace }[] | undefined
   >(
-    'getNamespaces',
+    'getExtendedNamespaces',
     () =>
       alertOnError(
         getExtendedNamespaces,

diff --git a/web_ui/frontend/components/FederationOverview.tsx b/web_ui/frontend/components/FederationOverview.tsx
@@ -8,6 +8,8 @@ import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 import Link from 'next/link';
 import { getErrorMessage, getObjectValue } from '@/helpers/util';
 import { getConfig } from '@/helpers/api';
+import { getFederationUrls } from '@/helpers/get';
+import useSWR from 'swr';
 
 const LinkBox = ({ href, text }: { href: string; text: string }) => {
   return (
@@ -30,66 +32,28 @@ const LinkBox = ({ href, text }: { href: string; text: string }) => {
   );
 };
 
-const UrlData = [
-  { key: ['Federation', 'NamespaceUrl'], text: 'Namespace Registry' },
-  { key: ['Federation', 'DirectorUrl'], text: 'Director' },
-  { key: ['Federation', 'RegistryUrl'], text: 'Registry' },
-  {
-    key: ['Federation', 'TopologyNamespaceUrl'],
-    text: 'Topology Namespace',
-  },
-  { key: ['Federation', 'DiscoveryUrl'], text: 'Discovery' },
-  { key: ['Federation', 'JwkUrl'], text: 'JWK' },
-];
 
 const FederationOverview = () => {
-  const [config, setConfig] = useState<
-    { text: string; url: string | undefined }[]
-  >([]);
 
-  let getConfigJson = async () => {
-    const response = await getConfig();
-    const responseData = (await response.json()) as Config;
-
-    const federationUrls = UrlData.map(({ key, text }) => {
-      let url = getObjectValue<string>(responseData, key);
-      if (url && !url?.startsWith('http://') && !url?.startsWith('https://')) {
-        url = 'https://' + url;
-      }
-
-      return {
-        text,
-        url,
-      };
-    });
-
-    setConfig(federationUrls);
-  };
-
-  useEffect(() => {
-    getConfigJson();
-  }, []);
-
-  if (config === undefined) {
-    return;
-  }
+  const {data : federationUrls , error} = useSWR(
+    'getFederationUrls',
+    getFederationUrls,
+    {fallbackData: []}
+  );
 
   return (
-    <AuthenticatedContent
-      redirect={true}
-      checkAuthentication={(u) => u?.role == 'admin'}
-    >
-      {!Object.values(config).every((x) => x == undefined) ? (
+    <>
+      {!Object.values(federationUrls).every((x) => x == undefined) ? (
         <Typography variant={'h4'} component={'h2'} mb={2}>
           Federation Overview
         </Typography>
       ) : null}
-      {config.map(({ text, url }) => {
+      {federationUrls.map(({ text, url }) => {
         if (url) {
           return <LinkBox key={text} href={url} text={text}></LinkBox>;
         }
       })}
-    </AuthenticatedContent>
+    </>
   );
 };
 

diff --git a/web_ui/frontend/components/Namespace/Card.tsx b/web_ui/frontend/components/Namespace/Card.tsx
@@ -109,7 +109,7 @@ export const Card = ({ namespace, authenticated, onUpdate }: CardProps) => {
                           'Could Not Delete Registration',
                           dispatch
                         );
-                        setTimeout(() => mutate('getNamespaces'), 600);
+                        setTimeout(() => mutate('getExtendedNamespaces'), 600);
                         if (onUpdate) {
                           onUpdate();
                         }

diff --git a/web_ui/frontend/components/Namespace/DeniedCard.tsx b/web_ui/frontend/components/Namespace/DeniedCard.tsx
@@ -105,7 +105,7 @@ export const DeniedCard = ({ namespace, authenticated }: DeniedCardProps) => {
                           'Could Not Approve Registration',
                           dispatch
                         );
-                        setTimeout(() => mutate('getNamespaces'), 600);
+                        setTimeout(() => mutate('getExtendedNamespaces'), 600);
                       }}
                     >
                       <Check />

diff --git a/web_ui/frontend/components/layout/AuthenticatedContent.tsx b/web_ui/frontend/components/layout/AuthenticatedContent.tsx
@@ -69,7 +69,7 @@ const AuthenticatedContent = ({
     if (data && checkAuthentication) {
       return checkAuthentication(data);
     } else {
-      return data?.authenticated !== undefined;
+      return data?.authenticated === undefined ? false : data.authenticated;
     }
   }, [data, checkAuthentication]);
 
@@ -84,9 +84,9 @@ const AuthenticatedContent = ({
   // Redirect to login page if not authenticated and redirect is true
   useEffect(() => {
     if (!isValidating && !authenticated && redirect) {
-      router.push('/login/?returnURL=' + pageUrl);
+      router.replace('/login/?returnURL=' + pageUrl);
     }
-  }, [data, isValidating]);
+  }, [data, isValidating, authenticated]);
 
   // If there was a error then print it to the screen
   if (error) {

diff --git a/web_ui/frontend/dev/image/nginx.conf b/web_ui/frontend/dev/image/nginx.conf
@@ -56,6 +56,8 @@ http {
             proxy_connect_timeout 10s;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_pass http://host.docker.internal:3000;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
         }
 
         gzip on;