diff --git a/web/src/app/metalakes/metalake/MetalakeTree.js b/web/src/app/metalakes/metalake/MetalakeTree.js index 58141684290..9435bf7e648 100644 --- a/web/src/app/metalakes/metalake/MetalakeTree.js +++ b/web/src/app/metalakes/metalake/MetalakeTree.js @@ -79,7 +79,7 @@ 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 @@ -87,7 +87,7 @@ const MetalakeTree = props => { 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 index 44c3e2e2daf..992e6af46b4 100644 --- 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 index f3005fcd4f5..cfab9e650db 100644 --- 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 ( diff --git a/web/src/app/metalakes/metalake/rightContent/tabsContent/detailsView/DetailsView.js b/web/src/app/metalakes/metalake/rightContent/tabsContent/detailsView/DetailsView.js index a15b287a259..84728a83cf5 100644 --- 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 index eeba3508a4c..78f122462bc 100644 --- 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}}}`,