Uniform Error Handling

PelicanPlatform · Nov 21, 2024 · 7503842 · 7503842
1 parent 3d66971
commit 7503842
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 46 deletions.
diff --git a/web_ui/frontend/app/config/Config.tsx b/web_ui/frontend/app/config/Config.tsx
@@ -27,7 +27,7 @@ import {
   IconButton,
   Alert,
 } from '@mui/material';
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
   AppRegistration,
   AssistantDirection,
@@ -51,21 +51,30 @@ import StatusSnackBar, {
   StatusSnackBarProps,
 } from '@/components/StatusSnackBar';
 import { ServerType } from '@/index';
-import { getEnabledServers } from '@/helpers/util';
+import { alertOnError, getEnabledServers } from '@/helpers/util';
 import DownloadButton from '@/components/DownloadButton';
 import { PaddedContent } from '@/components/layout';
 import { ConfigDisplay, TableOfContents } from '@/app/config/components';
 import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
+import { getConfig } from '@/helpers/api';
+import { AlertDispatchContext } from '@/components/AlertProvider';
 
 function Config({ metadata }: { metadata: ParameterMetadataRecord }) {
+
+  const dispatch = useContext(AlertDispatchContext);
+
   const [status, setStatus] = useState<StatusSnackBarProps | undefined>(
     undefined
   );
   const [patch, _setPatch] = useState<ParameterValueRecord>({});
 
-  const { data, mutate, error } = useSWR<ParameterValueRecord>(
+  const { data, mutate, error } = useSWR<ParameterValueRecord | undefined>(
     'getConfig',
-    getConfig
+    async () => await alertOnError(
+      getConfigJson,
+      "Could not get config",
+      dispatch
+    )
   );
   const { data: enabledServers } = useSWR<ServerType[]>(
     'getEnabledServers',
@@ -94,8 +103,6 @@ function Config({ metadata }: { metadata: ParameterMetadataRecord }) {
     );
   }, [serverConfig, patch]);
 
-  console.error(error, data);
-
   return (
     <>
       <Sidebar>
@@ -215,17 +222,11 @@ function Config({ metadata }: { metadata: ParameterMetadataRecord }) {
   );
 }
 
-const getConfig = async (): Promise<ParameterValueRecord> => {
-  let response = await fetch('/api/v1.0/config');
-
-  if (!response.ok) {
-    if (response.status == 401) {
-      throw new Error('You must be logged in to view and access the config');
-    }
-    throw new Error('Failed to fetch config');
+const getConfigJson = async (): Promise<ParameterValueRecord | undefined> => {
+  const response = await getConfig()
+  if(response){
+    return await response.json();
   }
-
-  return await response.json();
 };
 
 export default Config;
diff --git a/web_ui/frontend/components/FederationOverview.tsx b/web_ui/frontend/components/FederationOverview.tsx
@@ -7,6 +7,7 @@ import { Box, Typography } from '@mui/material';
 import AuthenticatedContent from '@/components/layout/AuthenticatedContent';
 import Link from 'next/link';
 import { getErrorMessage, getObjectValue } from '@/helpers/util';
+import { getConfig } from '@/helpers/api';
 
 const LinkBox = ({ href, text }: { href: string; text: string }) => {
   return (
@@ -30,51 +31,48 @@ const LinkBox = ({ href, text }: { href: string; text: string }) => {
 };
 
 const UrlData = [
-  { key: ['Federation', 'NamespaceUrl', 'Value'], text: 'Namespace Registry' },
-  { key: ['Federation', 'DirectorUrl', 'Value'], text: 'Director' },
-  { key: ['Federation', 'RegistryUrl', 'Value'], text: 'Registry' },
+  { key: ['Federation', 'NamespaceUrl'], text: 'Namespace Registry' },
+  { key: ['Federation', 'DirectorUrl'], text: 'Director' },
+  { key: ['Federation', 'RegistryUrl'], text: 'Registry' },
   {
-    key: ['Federation', 'TopologyNamespaceUrl', 'Value'],
+    key: ['Federation', 'TopologyNamespaceUrl'],
     text: 'Topology Namespace',
   },
-  { key: ['Federation', 'DiscoveryUrl', 'Value'], text: 'Discovery' },
-  { key: ['Federation', 'JwkUrl', 'Value'], text: 'JWK' },
+  { key: ['Federation', 'DiscoveryUrl'], text: 'Discovery' },
+  { key: ['Federation', 'JwkUrl'], text: 'JWK' },
 ];
 
 const FederationOverview = () => {
   const [config, setConfig] = useState<
     { text: string; url: string | undefined }[]
   >([]);
 
-  let getConfig = async () => {
-    let response = await fetch('/api/v1.0/config');
-    if (response.ok) {
-      const responseData = (await response.json()) as Config;
+  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;
-        }
+    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,
+      };
+    });
 
-        return {
-          text,
-          url,
-        };
-      });
+    setConfig(federationUrls);
 
-      setConfig(federationUrls);
-    } else {
-      console.error(await getErrorMessage(response));
-    }
   };
 
   useEffect(() => {
-    getConfig();
+    getConfigJson();
   }, []);
 
   if (config === undefined) {

diff --git a/web_ui/frontend/helpers/api.ts b/web_ui/frontend/helpers/api.ts
@@ -37,6 +37,16 @@ export async function fetchApi(
 }
 
 
+/**
+ * Get config
+ */
+export const getConfig = async (): Promise<Response> => {
+  return fetchApi(
+    async () => await secureFetch('/api/v1.0/config')
+  )
+}
+
+
 /**
  * Deletes a namespace
  * @param id Namespace ID

diff --git a/web_ui/frontend/helpers/get.ts b/web_ui/frontend/helpers/get.ts
@@ -1,8 +1,9 @@
 import { Config, ParameterValueRecord } from '@/components/configuration';
+import { getConfig as getConfigResponse } from '@/helpers/api'
 import { flattenObject } from '@/app/config/util';
 
 export const getConfig = async (): Promise<ParameterValueRecord> => {
-  let response = await fetch('/api/v1.0/config');
+  let response = await getConfigResponse();
   let data = await response.json();
   let flatData = flattenObject(data);
   return flatData;