[#2996][#3011] fix(web): fix refresh issue and kafka topic property i…

…ssue (#3014)

<!--
1. Title: [#<issue>] <type>(<scope>): <subject>
   Examples:
     - "[#123] feat(operator): support xxx"
     - "[#233] fix: check null before access result in xxx"
     - "[MINOR] refactor: fix typo in variable name"
     - "[MINOR] docs: fix typo in README"
     - "[#255] test: fix flaky test NameOfTheTest"
   Reference: https://www.conventionalcommits.org/en/v1.0.0/
2. If the PR is unfinished, please mark this PR as draft.
-->

### What changes were proposed in this pull request?
Load catalogs first when refresh schema or table level page
<img width="1395" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/f3af84e6-d6dc-474e-9f55-e714edb9be35">
Fix kafka topic property issue

### Why are the changes needed?

Fix: #2996, Fix: #3011

### Does this PR introduce _any_ user-facing change?
When schema, table or fileset page network error, refresh the page

### How was this patch tested?
<img width="735" alt="image"
src="https://github.com/datastrato/gravitino/assets/9210625/d69bc9f3-d4f7-4f1e-bc2c-65941821a510">

web/src/app/metalakes/metalake/MetalakeTree.js

@@ -79,15 +79,15 @@ const MetalakeTree = props => {
       case 'fileset': {
         if (store.selectedNodes.includes(nodeProps.data.key)) {
           const pathArr = extractPlaceholder(nodeProps.data.key)
-          const [metalake, catalog, schema, fileset] = pathArr
+          const [metalake, catalog, type, schema, fileset] = pathArr
           dispatch(getFilesetDetails({ init: true, metalake, catalog, schema, fileset }))
         }
         break
       }
       case 'topic': {
         if (store.selectedNodes.includes(nodeProps.data.key)) {
           const pathArr = extractPlaceholder(nodeProps.data.key)
-          const [metalake, catalog, schema, topic] = pathArr
+          const [metalake, catalog, type, schema, topic] = pathArr
           dispatch(getTopicDetails({ init: true, metalake, catalog, schema, topic }))
         }
         break

web/src/app/metalakes/metalake/MetalakeView.js

@@ -9,7 +9,7 @@ import { useEffect } from 'react'
 
 import { Box } from '@mui/material'
 
-import { useAppDispatch } from '@/lib/hooks/useStore'
+import { useAppDispatch, useAppSelector } from '@/lib/hooks/useStore'
 import { useSearchParams } from 'next/navigation'
 import MetalakePageLeftBar from './MetalakePageLeftBar'
 import RightContent from './rightContent/RightContent'
@@ -32,8 +32,8 @@ import {
 const MetalakeView = () => {
   const dispatch = useAppDispatch()
   const searchParams = useSearchParams()
-
   const paramsSize = [...searchParams.keys()].length
+  const store = useAppSelector(state => state.metalakes)
 
   useEffect(() => {
     const routeParams = {
@@ -54,11 +54,18 @@ const MetalakeView = () => {
       }
 
       if (paramsSize === 3 && catalog) {
+        if (!store.catalogs.length) {
+          dispatch(fetchCatalogs({ metalake }))
+        }
         dispatch(fetchSchemas({ init: true, page: 'catalogs', metalake, catalog, type }))
         dispatch(getCatalogDetails({ metalake, catalog, type }))
       }
 
       if (paramsSize === 4 && catalog && type && schema) {
+        if (!store.catalogs.length) {
+          dispatch(fetchCatalogs({ metalake }))
+          dispatch(fetchSchemas({ metalake, catalog, type }))
+        }
         switch (type) {
           case 'relational':
             dispatch(fetchTables({ init: true, page: 'schemas', metalake, catalog, schema }))
@@ -75,16 +82,20 @@ const MetalakeView = () => {
         dispatch(getSchemaDetails({ metalake, catalog, schema }))
       }
 
-      if (paramsSize === 5 && catalog && schema && table) {
-        dispatch(getTableDetails({ init: true, metalake, catalog, schema, table }))
-      }
-
-      if (paramsSize === 5 && catalog && schema && fileset) {
-        dispatch(getFilesetDetails({ init: true, metalake, catalog, schema, fileset }))
-      }
-
-      if (paramsSize === 5 && catalog && schema && topic) {
-        dispatch(getTopicDetails({ init: true, metalake, catalog, schema, topic }))
+      if (paramsSize === 5 && catalog && schema) {
+        if (!store.catalogs.length) {
+          dispatch(fetchCatalogs({ metalake }))
+          dispatch(fetchSchemas({ metalake, catalog, type }))
+        }
+        if (table) {
+          dispatch(getTableDetails({ init: true, metalake, catalog, schema, table }))
+        }
+        if (fileset) {
+          dispatch(getFilesetDetails({ init: true, metalake, catalog, schema, fileset }))
+        }
+        if (topic) {
+          dispatch(getTopicDetails({ init: true, metalake, catalog, schema, topic }))
+        }
       }
     }
 

web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js

@@ -396,7 +396,7 @@ const CreateCatalogDialog = props => {
       setInnerProps(propsItems)
       setValue('propItems', propsItems)
     }
-  }, [open, data, setValue])
+  }, [open, data, setValue, type])
 
   return (
     <Dialog fullWidth maxWidth='sm' scroll='body' TransitionComponent={Transition} open={open} onClose={handleClose}>

web/src/app/metalakes/metalake/rightContent/tabsContent/detailsView/DetailsView.js

@@ -23,7 +23,7 @@ const DetailsView = () => {
 
   const audit = activatedItem?.audit || {}
 
-  const properties = Object.keys(activatedItem?.properties || [])
+  let properties = Object.keys(activatedItem?.properties || [])
     .filter(key => !['partition-count', 'replication-factor'].includes(key))
     .map(item => {
       return {
@@ -32,14 +32,15 @@ const DetailsView = () => {
       }
     })
   if (paramsSize === 5 && searchParams.get('topic')) {
-    properties.unshift({
-      key: 'replication-factor',
-      value: JSON.stringify(activatedItem?.properties['replication-factor'])?.replace(/^"|"$/g, '')
-    })
-    properties.unshift({
-      key: 'partition-count',
-      value: JSON.stringify(activatedItem?.properties['partition-count'])?.replace(/^"|"$/g, '')
-    })
+    const topicPros = Object.keys(activatedItem?.properties || [])
+      .filter(key => ['partition-count', 'replication-factor'].includes(key))
+      .map(item => {
+        return {
+          key: item,
+          value: JSON.stringify(activatedItem?.properties[item]).replace(/^"|"$/g, '')
+        }
+      })
+    properties = [...topicPros, ...properties]
   }
 
   const renderFieldText = ({ value, linkBreak = false, isDate = false }) => {

web/src/lib/store/metalakes/index.js

@@ -492,10 +492,6 @@ export const fetchSchemas = createAsyncThunk(
       )
     }
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(setExpandedNodes([`{{${metalake}}}`, `{{${metalake}}}{{${catalog}}}{{${type}}}`]))
 
     return { schemas, page, init }
@@ -567,10 +563,6 @@ export const fetchTables = createAsyncThunk(
       )
     }
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(
       setExpandedNodes([
         `{{${metalake}}}`,
@@ -688,10 +680,6 @@ export const getTableDetails = createAsyncThunk(
 
     dispatch(setTableProps(tableProps))
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(
       setExpandedNodes([
         `{{${metalake}}}`,
@@ -753,10 +741,6 @@ export const fetchFilesets = createAsyncThunk(
       )
     }
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(
       setExpandedNodes([
         `{{${metalake}}}`,
@@ -786,10 +770,6 @@ export const getFilesetDetails = createAsyncThunk(
 
     const { fileset: resFileset } = res
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(
       setExpandedNodes([
         `{{${metalake}}}`,
@@ -851,10 +831,6 @@ export const fetchTopics = createAsyncThunk(
       )
     }
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(
       setExpandedNodes([
         `{{${metalake}}}`,
@@ -884,10 +860,6 @@ export const getTopicDetails = createAsyncThunk(
 
     const { topic: resTopic } = res
 
-    if (getState().metalakes.metalakeTree.length === 0) {
-      dispatch(fetchCatalogs({ metalake }))
-    }
-
     dispatch(
       setExpandedNodes([
         `{{${metalake}}}`,