[apache#2996][apache#3011] fix refresh issue and kafka topic property…

… issue
LauraXia123 · Apr 18, 2024 · a403713 · a403713
1 parent 4a09d11
commit a403713
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 52 deletions.
diff --git a/web/src/app/metalakes/metalake/MetalakeTree.js b/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

diff --git a/web/src/app/metalakes/metalake/MetalakeView.js b/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 }))
+        }
       }
     }
 

diff --git a/web/src/app/metalakes/metalake/rightContent/CreateCatalogDialog.js b/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}>

diff --git a/web/src/app/metalakes/metalake/rightContent/tabsContent/detailsView/DetailsView.js b/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 }) => {

diff --git a/web/src/lib/store/metalakes/index.js b/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}}}`,