This is an automated email from the ASF dual-hosted git repository.
jshao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/gravitino.git
The following commit(s) were added to refs/heads/main by this push:
new f1854630c3 feat(web): Display the index type in the UI and try to fix
refresh issue (#9293)
f1854630c3 is described below
commit f1854630c3da3bd9c5b795446cfbb9121532ffa9
Author: Qian Xia <[email protected]>
AuthorDate: Mon Dec 1 10:42:26 2025 +0800
feat(web): Display the index type in the UI and try to fix refresh issue
(#9293)
### What changes were proposed in this pull request?
Display the index type in the UI
<img width="1660" height="880" alt="image"
src="https://github.com/user-attachments/assets/9b80af3c-5e36-4e58-ae96-6cb6dc1972c6";
/>
try to fix refresh issue
### Why are the changes needed?
Fix: #6997
### Does this PR introduce _any_ user-facing change?
N/A
### How was this patch tested?
manually
---
.../tabsContent/tableView/TableView.js | 135 ++++++++++++++++-----
web/web/src/lib/provider/session.js | 17 ++-
2 files changed, 122 insertions(+), 30 deletions(-)
diff --git
a/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
b/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
index d345fe9d39..a4acf2e56b 100644
---
a/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
+++
b/web/web/src/app/metalakes/metalake/rightContent/tabsContent/tableView/TableView.js
@@ -83,7 +83,8 @@ const CustomTooltip = styled(({ className, ...props }) =>
<Tooltip {...props} cl
[`& .${tooltipClasses.tooltip}`]: {
backgroundColor: '#23282a',
padding: 0,
- border: '1px solid #dadde9'
+ border: '1px solid #dadde9',
+ maxWidth: 'none'
}
})
)
@@ -155,6 +156,84 @@ const TableView = () => {
const icon = propsItem?.icon
+ const renderIndexesTable = () => (
+ <Box component='table' sx={{ width: '100%', borderCollapse: 'collapse',
tableLayout: 'fixed', maxWidth: 400 }}>
+ <Box component='thead'>
+ <Box component='tr' sx={{ borderBottom: '1px solid #3a4245' }}>
+ <Box component='th' sx={{ width: '45%', py: 1, px: 1.5, textAlign:
'left', color: 'white', fontSize: 12 }}>
+ Name
+ </Box>
+ <Box component='th' sx={{ width: '30%', py: 1, px: 1.5, textAlign:
'left', color: 'white', fontSize: 12 }}>
+ Type
+ </Box>
+ <Box component='th' sx={{ width: '25%', py: 1, px: 1.5, textAlign:
'left', color: 'white', fontSize: 12 }}>
+ Fields
+ </Box>
+ </Box>
+ </Box>
+ <Box component='tbody'>
+ {items.map((it, idx) => {
+ const fieldsText = it.fields?.map(v => (Array.isArray(v) ?
v.join('.') : v)).join(', ')
+
+ return (
+ <Box
+ key={idx}
+ component='tr'
+ sx={{ borderBottom: idx < items.length - 1 ? '1px solid
#3a4245' : 'none' }}
+ >
+ <Tooltip title={it.name} placement='top'>
+ <Box
+ component='td'
+ sx={{
+ py: 1,
+ px: 1.5,
+ color: 'white',
+ fontSize: 12,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ }}
+ >
+ {it.name}
+ </Box>
+ </Tooltip>
+ <Box
+ component='td'
+ sx={{
+ py: 1,
+ px: 1.5,
+ color: '#8fd4f5',
+ fontSize: 12,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ }}
+ >
+ {it.indexType}
+ </Box>
+ <Tooltip title={fieldsText} placement='top'>
+ <Box
+ component='td'
+ sx={{
+ py: 1,
+ px: 1.5,
+ color: 'white',
+ fontSize: 12,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ }}
+ >
+ {fieldsText}
+ </Box>
+ </Tooltip>
+ </Box>
+ )
+ })}
+ </Box>
+ </Box>
+ )
+
return (
<>
{isCond && (
@@ -176,32 +255,34 @@ const TableView = () => {
</Typography>
</Box>
- <Box sx={{ p: 1.5, px: 4 }}>
- {items.map((it, idx) => {
- return (
- <Fragment key={idx}>
- <Typography
- variant='caption'
- color='white'
- className={fonts.className}
- sx={{ display: 'flex', flexDirection: 'column' }}
- data-refer={`tip-${type}-item-${name}`}
- >
- {it.text || it.fields}
- </Typography>
- {idx < items.length - 1 && (
- <Box
- component={'span'}
- sx={{
- display: 'block',
- my: 1,
- borderTop: theme => `1px solid
${theme.palette.grey[800]}`
- }}
- ></Box>
- )}
- </Fragment>
- )
- })}
+ <Box sx={{ p: type === 'indexes' ? 1 : 1.5, px: type ===
'indexes' ? 1 : 4 }}>
+ {type === 'indexes'
+ ? renderIndexesTable()
+ : items.map((it, idx) => {
+ return (
+ <Fragment key={idx}>
+ <Typography
+ variant='caption'
+ color='white'
+ className={fonts.className}
+ sx={{ display: 'flex', flexDirection: 'column' }}
+ data-refer={`tip-${type}-item-${name}`}
+ >
+ {it.text || it.fields}
+ </Typography>
+ {idx < items.length - 1 && (
+ <Box
+ component={'span'}
+ sx={{
+ display: 'block',
+ my: 1,
+ borderTop: theme => `1px solid
${theme.palette.grey[800]}`
+ }}
+ ></Box>
+ )}
+ </Fragment>
+ )
+ })}
</Box>
</>
}
diff --git a/web/web/src/lib/provider/session.js
b/web/web/src/lib/provider/session.js
index 5750c61dab..652de1e8fd 100644
--- a/web/web/src/lib/provider/session.js
+++ b/web/web/src/lib/provider/session.js
@@ -65,9 +65,20 @@ const AuthProvider = ({ children }) => {
}, [isIdle])
const goToMetalakeListPage = () => {
- if (paramsSize) {
- router.refresh()
- } else {
+ try {
+ const pathname = window.location.pathname
+ const doneFlag = sessionStorage.getItem('authInitDone')
+
+ if (!doneFlag) {
+ sessionStorage.setItem('authInitDone', 'true')
+
+ if (pathname === '/' || pathname === '/ui' || pathname === '/ui/') {
+ router.replace('/metalakes')
+ } else {
+ router.replace(pathname + window.location.search)
+ }
+ }
+ } catch (e) {
router.push('/metalakes')
}
}
