feat: Modify error page #1841

gui/app/(dashboard)/actions.ts

@@ -8,14 +8,17 @@ import {
   ITableSegment
 } from '@/lib/databse-interface';
 import { drop, get, post } from '@/lib/request';
+import { isResponseListExist } from '@/lib/utils';
+import { unstable_rethrow } from 'next/navigation';
 
 export const listDatabase = async () => {
   try {
     const x = await get(`${ApiUrl.databases}`);
     console.log('🚀 ~ x:', x);
     return x;
   } catch (error) {
-    console.log('🚀 ~ error:', error);
+    unstable_rethrow(error);
+    return { databases: [] };
   }
 };
 
@@ -142,6 +145,8 @@ export const showConfigs = async () => {
     return x;
   } catch (error) {
     console.log('🚀 ~ error:', error);
+    unstable_rethrow(error);
+    return {};
   }
 };
 
@@ -150,16 +155,9 @@ export const showVariables = async () => {
     const x = await get(`${ApiUrl.variables}/global`);
     return x;
   } catch (error) {
+    unstable_rethrow(error);
     console.log('🚀 ~ error:', error);
-  }
-};
-
-export const showCurrentNode = async () => {
-  try {
-    const x = await get(`${ApiUrl.variables}/global`);
-    return x;
-  } catch (error) {
-    console.log('🚀 ~ error:', error);
+    return {};
   }
 };
 
@@ -174,11 +172,12 @@ export const showTableColumns = async ({
     const x = await get(
       `${ApiUrl.databases}/${database_name}/${ApiUrl.tables}/${table_name}/${ApiUrl.columns}`
     );
-    if (x.error_code === 0) {
+    if (isResponseListExist(x, 'columns')) {
       return x.columns;
     }
     return [];
-  } catch (error) {
+  } catch (error: unknown) {
+    console.log('🚀 ~ error:', error);
     return [];
   }
 };
@@ -194,11 +193,12 @@ export const showTableIndexes = async ({
     const x = await get(
       `${ApiUrl.databases}/${database_name}/${ApiUrl.tables}/${table_name}/${ApiUrl.indexes}`
     );
-    if (x.error_code === 0) {
+    if (isResponseListExist(x, 'indexes')) {
       return x.indexes;
     }
     return [];
-  } catch (error) {
+  } catch (error: unknown) {
+    console.log('🚀 ~ error:', error);
     return [];
   }
 };
@@ -214,11 +214,12 @@ export const showTableSegments = async ({
     const x = await get(
       `${ApiUrl.databases}/${database_name}/${ApiUrl.tables}/${table_name}/${ApiUrl.segments}`
     );
-    if (x.error_code === 0) {
+    if (isResponseListExist(x, 'segments')) {
       return x?.segments ?? [];
     }
     return [];
-  } catch (error) {
+  } catch (error: unknown) {
+    console.log('🚀 ~ error:', error);
     return [];
   }
 };

gui/app/(dashboard)/database/[databaseId]/table/[tableId]/page.tsx

@@ -12,12 +12,16 @@ const TableMap = {
   [Leaf.Segments]: TableSegments
 };
 
+const Empty = () => {
+  return <div>empty</div>;
+};
+
 export default async function DatabasePage({
   searchParams: { tab },
   params: { tableId, databaseId }
 }: DatabaseRouteParams) {
   const DatabaseTable: React.FunctionComponent<DatabaseRouteParams['params']> =
-    TableMap[tab];
+    TableMap[tab] ?? Empty;
 
   return (
     <div>

gui/app/(dashboard)/database/hooks.ts

@@ -39,7 +39,7 @@ export const useHandleClickTreeName = () => {
           }
         }
       },
-    []
+    [router]
   );
 
   return { handleClickTreeName };
@@ -55,7 +55,7 @@ export const useBuildTreeData = () => {
     try {
       setLoading(true);
       const ret = await listDatabase();
-      if (ret.databases.length > 0) {
+      if (ret.databases?.length > 0) {
         setData(
           updateTreeData(
             [
@@ -125,7 +125,7 @@ export const useBuildTreeData = () => {
   }, [fetchDatabases]);
 
   const onLoadData = async ({ element }: { element: INode }) => {
-    if (element.children.length > 0) {
+    if (element?.children?.length > 0) {
       return;
     }
 
@@ -157,7 +157,7 @@ export const useBuildTreeData = () => {
   };
 
   const wrappedOnLoadData = async (props: ITreeViewOnLoadDataProps) => {
-    const nodeHasNoChildData = props.element.children.length === 0;
+    const nodeHasNoChildData = props.element.children?.length === 0;
     const nodeHasAlreadyBeenLoaded = nodesAlreadyLoaded.find(
       (e) => e.id === props.element.id
     );
@@ -196,7 +196,7 @@ export const useFetchTableColumns = ({
     });
 
     setTableColumns(data);
-  }, []);
+  }, [databaseId, tableId]);
 
   useEffect(() => {
     fetchTableColumns();
@@ -218,7 +218,7 @@ export const useFetchTableIndexes = ({
     });
 
     setTableIndexes(data);
-  }, []);
+  }, [databaseId, tableId]);
 
   useEffect(() => {
     fetchTableIndexes();
@@ -240,7 +240,7 @@ export const useFetchTableSegments = ({
     });
 
     setTableSegments(data);
-  }, []);
+  }, [databaseId, tableId]);
 
   useEffect(() => {
     fetchTableSegments();

gui/app/(dashboard)/database/layout.tsx

@@ -9,7 +9,7 @@ export default async function DatabaseLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex divide-x h-full">
+    <div className="flex divide-x h-[calc(100vh-32px)]">
       <section className="w-1/4">
         <AsyncTree></AsyncTree>
       </section>

gui/app/(dashboard)/database/tree.tsx

@@ -59,7 +59,7 @@ function AsyncTree() {
           const branchNode = (isExpanded: boolean, element: INode) => {
             return isExpanded &&
               !element.metadata?.isEmpty &&
-              element.children.length === 0 ? (
+              element.children?.length === 0 ? (
               <>
                 <span
                   role="alert"
@@ -76,19 +76,20 @@ function AsyncTree() {
           };
           return (
             <div
-              {...getNodeProps({ onClick: handleExpand })}
+              {...getNodeProps({
+                onClick: isBranch
+                  ? handleExpand
+                  : handleClickTreeName({
+                      level,
+                      name: element.name,
+                      parent: element.parent,
+                      data
+                    })
+              })}
               style={{ marginLeft: 40 * (level - 1) }}
             >
               {isBranch && branchNode(isExpanded, element)}
-              <div
-                className="flex items-center ml-1"
-                onClick={handleClickTreeName({
-                  level,
-                  name: element.name,
-                  parent: element.parent,
-                  data
-                })}
-              >
+              <div className="flex items-center ml-1">
                 {renderIcon(level, element.name)}
                 <span className="name">{element.name}</span>
               </div>

gui/app/(dashboard)/databases/page.tsx

@@ -1,51 +1,18 @@
 import { Card, CardHeader, CardTitle } from '@/components/ui/card';
 import AddIcon from '/public/add.svg';
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@radix-ui/react-select';
 import { listDatabase } from '../actions';
 import { DatabaseCard } from '../database-card';
 import { DatabaseCreatingDialog } from '../database-creating-dialog';
 
-interface IDatabaseSelectProps {
-  placeholder?: string;
-  options: Array<{ label: string; value: string }>;
-}
-
-export function DatabaseSelect({ placeholder, options }: IDatabaseSelectProps) {
-  return (
-    <Select>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        {options.map(({ value, label }) => (
-          <SelectItem value={value} key={value}>
-            {label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
-
-export default async function HomePage({
-  searchParams
-}: {
+export default async function HomePage({}: {
   searchParams: { q: string; offset: string };
 }) {
   const ret = await listDatabase();
-  const search = searchParams.q ?? '';
-  const offset = searchParams.offset ?? 0;
 
   return (
     <div className="grid grid-cols-4 gap-4">
-      {ret.databases.map((x: string, idx: number) => (
+      {ret?.databases?.map((x: string, idx: number) => (
         <DatabaseCard key={idx} data={x}></DatabaseCard>
       ))}
       <Card className="w-full max-w-sm">