This is an automated email from the ASF dual-hosted git repository.
lauraxia pushed a commit to branch antdUI-gravitino-base1.1.0
in repository https://gitbox.apache.org/repos/asf/gravitino.git
The following commit(s) were added to refs/heads/antdUI-gravitino-base1.1.0 by
this push:
new a012ff77e8 improve some issues
a012ff77e8 is described below
commit a012ff77e80bcc1b9a096fdc4cb89662ea4dd1ee
Author: Qian Xia <[email protected]>
AuthorDate: Fri Jan 16 18:22:05 2026 +0800
improve some issues
---
web/web/.env | 2 +-
.../app/catalogs/rightContent/CreateTableDialog.js | 2 +-
.../entitiesContent/CatalogDetailsPage.js | 29 +---------
.../entitiesContent/FilesetDetailsPage.js | 29 +---------
.../entitiesContent/ModelDetailsPage.js | 29 +---------
.../entitiesContent/SchemaDetailsPage.js | 29 +---------
.../entitiesContent/TableDetailsPage.js | 30 +----------
.../entitiesContent/TopicDetailsPage.js | 30 ++---------
web/web/src/app/jobs/CreateJobDialog.js | 16 ++++--
web/web/src/app/jobs/RegisterJobTemplateDialog.js | 6 ++-
web/web/src/app/jobs/page.js | 2 +-
web/web/src/app/metalakes/page.js | 37 ++++---------
web/web/src/components/PropertiesContent.js | 62 ++++++++++++++++++++++
13 files changed, 107 insertions(+), 196 deletions(-)
diff --git a/web/web/.env b/web/web/.env
index 5ac8651022..6858f39de4 100644
--- a/web/web/.env
+++ b/web/web/.env
@@ -22,6 +22,6 @@ NEXT_TELEMETRY_DISABLED=1
# Development ENV
BUILD_TARGET=new
NEXT_PUBLIC_BASE_PATH=''
-NEXT_PUBLIC_API_URL=http://localhost:8090
+NEXT_PUBLIC_API_URL=http://gravitino.example.com/
NEXT_PUBLIC_OAUTH_URI=http://localhost:9000
NEXT_PUBLIC_OAUTH_PATH=/oauth2/token
diff --git a/web/web/src/app/catalogs/rightContent/CreateTableDialog.js
b/web/web/src/app/catalogs/rightContent/CreateTableDialog.js
index 26c34e8ee0..67040e09bc 100644
--- a/web/web/src/app/catalogs/rightContent/CreateTableDialog.js
+++ b/web/web/src/app/catalogs/rightContent/CreateTableDialog.js
@@ -586,7 +586,7 @@ export default function CreateTableDialog({ ...props }) {
column['defaultValue'] = {
type: 'literal',
dataType: col.defaultValue?.dataType || 'string',
- value: ['', 'NULL',
undefined].includes(col.defaultValue?.value) ? 'NULL' : col.defaultValue?.value
+ value: col.defaultValue?.value
}
}
}
diff --git
a/web/web/src/app/catalogs/rightContent/entitiesContent/CatalogDetailsPage.js
b/web/web/src/app/catalogs/rightContent/entitiesContent/CatalogDetailsPage.js
index 4fdfa1971e..3289fc636b 100644
---
a/web/web/src/app/catalogs/rightContent/entitiesContent/CatalogDetailsPage.js
+++
b/web/web/src/app/catalogs/rightContent/entitiesContent/CatalogDetailsPage.js
@@ -46,6 +46,7 @@ import ConfirmInput from '@/components/ConfirmInput'
import Tags from '@/components/CustomTags'
import Icons from '@/components/Icons'
import Policies from '@/components/PolicyTag'
+import PropertiesContent from '@/components/PropertiesContent'
import { checkCatalogIcon } from '@/config/catalog'
import Link from 'next/link'
import { cn } from '@/lib/utils/tailwind'
@@ -166,33 +167,7 @@ export default function CatalogDetailsPage() {
)
const properties = store.activatedDetails?.properties
-
- const propertyContent = () => {
- return (
- <Space.Compact className='max-h-80 overflow-auto'>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span className='p-1' key={index}>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.values(properties).map((value, index) => (
- <span className='p-1' key={index}>
- {value || '-'}
- </span>
- ))
- : null}
- </Space.Compact>
- </Space.Compact>
- )
- }
+ const propertyContent = <PropertiesContent properties={properties} />
const tabOptions = anthEnable
? [
diff --git
a/web/web/src/app/catalogs/rightContent/entitiesContent/FilesetDetailsPage.js
b/web/web/src/app/catalogs/rightContent/entitiesContent/FilesetDetailsPage.js
index b2df658d87..8214d49908 100644
---
a/web/web/src/app/catalogs/rightContent/entitiesContent/FilesetDetailsPage.js
+++
b/web/web/src/app/catalogs/rightContent/entitiesContent/FilesetDetailsPage.js
@@ -27,6 +27,7 @@ import AssociatedTable from '@/components/AssociatedTable'
import Tags from '@/components/CustomTags'
import Policies from '@/components/PolicyTag'
import Icons from '@/components/Icons'
+import PropertiesContent from '@/components/PropertiesContent'
import ListFiles from './ListFiles'
import { cn } from '@/lib/utils/tailwind'
import { useAppSelector, useAppDispatch } from '@/lib/hooks/useStore'
@@ -106,33 +107,7 @@ export default function FilesetDetailsPage({ ...props }) {
)
const properties = store.activatedDetails?.properties
-
- const propertyContent = () => {
- return (
- <Space.Compact className='max-h-80 overflow-auto'>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span className='p-1' key={index}>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.values(properties).map((value, index) => (
- <span className='p-1' key={index}>
- {value || '-'}
- </span>
- ))
- : null}
- </Space.Compact>
- </Space.Compact>
- )
- }
+ const propertyContent = <PropertiesContent properties={properties} />
const storageLocations = store.activatedDetails?.storageLocations
diff --git
a/web/web/src/app/catalogs/rightContent/entitiesContent/ModelDetailsPage.js
b/web/web/src/app/catalogs/rightContent/entitiesContent/ModelDetailsPage.js
index b57351f3d1..c6a5d95ed7 100644
--- a/web/web/src/app/catalogs/rightContent/entitiesContent/ModelDetailsPage.js
+++ b/web/web/src/app/catalogs/rightContent/entitiesContent/ModelDetailsPage.js
@@ -46,6 +46,7 @@ import ConfirmInput from '@/components/ConfirmInput'
import Tags from '@/components/CustomTags'
import Policies from '@/components/PolicyTag'
import Icons from '@/components/Icons'
+import PropertiesContent from '@/components/PropertiesContent'
import { cn } from '@/lib/utils/tailwind'
import { useAppSelector, useAppDispatch } from '@/lib/hooks/useStore'
import { useSearchParams } from 'next/navigation'
@@ -129,33 +130,7 @@ export default function ModelDetailsPage({ ...props }) {
)
const properties = store.activatedDetails?.properties
-
- const propertyContent = () => {
- return (
- <Space.Compact className='max-h-80 overflow-auto'>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map(key => (
- <span key={key} className='p-1'>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.entries(properties).map(([key, value]) => (
- <span key={key} className='p-1'>
- {value || '-'}
- </span>
- ))
- : null}
- </Space.Compact>
- </Space.Compact>
- )
- }
+ const propertyContent = <PropertiesContent properties={properties} />
const tabOptions = [
{ label: 'Versions', key: 'Versions' },
diff --git
a/web/web/src/app/catalogs/rightContent/entitiesContent/SchemaDetailsPage.js
b/web/web/src/app/catalogs/rightContent/entitiesContent/SchemaDetailsPage.js
index b5d75a43a9..aa69ee9184 100644
--- a/web/web/src/app/catalogs/rightContent/entitiesContent/SchemaDetailsPage.js
+++ b/web/web/src/app/catalogs/rightContent/entitiesContent/SchemaDetailsPage.js
@@ -34,6 +34,7 @@ import Tags from '@/components/CustomTags'
import Icons from '@/components/Icons'
import Policies from '@/components/PolicyTag'
import TableActions from '@/components/TableActions'
+import PropertiesContent from '@/components/PropertiesContent'
import {
getCatalogDetails,
deleteFileset,
@@ -212,33 +213,7 @@ export default function SchemaDetailsPage() {
</div>
)
const properties = store.activatedDetails?.properties
-
- const propertyContent = () => {
- return (
- <Space.Compact className='max-h-80 overflow-auto'>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span className='p-1' key={index}>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.values(properties).map((value, index) => (
- <span className='p-1' key={index}>
- {value || '-'}
- </span>
- ))
- : null}
- </Space.Compact>
- </Space.Compact>
- )
- }
+ const propertyContent = <PropertiesContent properties={properties} />
const onSearchTable = e => {
const { value } = e.target
diff --git
a/web/web/src/app/catalogs/rightContent/entitiesContent/TableDetailsPage.js
b/web/web/src/app/catalogs/rightContent/entitiesContent/TableDetailsPage.js
index cde4b05c28..ffe5cf42ab 100644
--- a/web/web/src/app/catalogs/rightContent/entitiesContent/TableDetailsPage.js
+++ b/web/web/src/app/catalogs/rightContent/entitiesContent/TableDetailsPage.js
@@ -30,13 +30,13 @@ import Policies from '@/components/PolicyTag'
import DataPreview from './DataPreview'
import Icons from '@/components/Icons'
import { ColumnTypeColorEnum } from '@/config'
-import { sanitizeText } from '@/lib/utils/index'
import { cn } from '@/lib/utils/tailwind'
import { useAppSelector, useAppDispatch } from '@/lib/hooks/useStore'
import { useSearchParams } from 'next/navigation'
import { getCatalogDetails, getCurrentEntityOwner } from
'@/lib/store/metalakes'
import CreateTableDialog from '../CreateTableDialog'
import Loading from '@/components/Loading'
+import PropertiesContent from '@/components/PropertiesContent'
const SetOwnerDialog = dynamic(() => import('@/components/SetOwnerDialog'), {
loading: () => <Loading />,
@@ -138,33 +138,7 @@ export default function TableDetailsPage({ ...props }) {
</div>
)
const properties = store.activatedDetails?.properties
-
- const propertyContent = () => {
- return (
- <Space.Compact className='max-h-80 overflow-auto'>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span className='p-1' key={index}>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.values(properties).map((value, index) => (
- <span className='p-1' key={index}>
- {sanitizeText(value) || '-'}
- </span>
- ))
- : null}
- </Space.Compact>
- </Space.Compact>
- )
- }
+ const propertyContent = <PropertiesContent properties={properties} />
const partitioning = store.activatedDetails?.partitioning?.map((i, index) =>
{
let fields = i.fieldName || []
diff --git
a/web/web/src/app/catalogs/rightContent/entitiesContent/TopicDetailsPage.js
b/web/web/src/app/catalogs/rightContent/entitiesContent/TopicDetailsPage.js
index cbedf983cc..c5e7b6781c 100644
--- a/web/web/src/app/catalogs/rightContent/entitiesContent/TopicDetailsPage.js
+++ b/web/web/src/app/catalogs/rightContent/entitiesContent/TopicDetailsPage.js
@@ -27,6 +27,7 @@ import AssociatedTable from '@/components/AssociatedTable'
import Tags from '@/components/CustomTags'
import Policies from '@/components/PolicyTag'
import Icons from '@/components/Icons'
+import PropertiesGrid from '@/components/PropertiesContent'
import { cn } from '@/lib/utils/tailwind'
import { useAppSelector, useAppDispatch } from '@/lib/hooks/useStore'
import { useSearchParams } from 'next/navigation'
@@ -88,32 +89,9 @@ export default function TopicDetailsPage({ ...props }) {
)
const properties = store.activatedDetails?.properties
- const propertyContent = () => {
- return (
- <Space.Compact className='max-h-80 overflow-auto'
data-refer='properties-popover-content'>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span className='p-1' key={index}
data-refer={`props-key-${key}`}>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='divide-y
border-gray-100'>
- <span className='min-w-24 bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span className='p-1' key={index}
data-refer={`props-value-${key}`}>
- {properties[key] || '-'}
- </span>
- ))
- : null}
- </Space.Compact>
- </Space.Compact>
- )
- }
+ const propertyContent = (
+ <PropertiesGrid properties={properties} dataReferPrefix='props'
contentDataRefer='properties-popover-content' />
+ )
const tabOptions = [{ label: 'Associated roles', key: 'Associated roles' }]
const handleEditTable = () => {
diff --git a/web/web/src/app/jobs/CreateJobDialog.js
b/web/web/src/app/jobs/CreateJobDialog.js
index 31b818889a..ffd128512f 100644
--- a/web/web/src/app/jobs/CreateJobDialog.js
+++ b/web/web/src/app/jobs/CreateJobDialog.js
@@ -95,11 +95,17 @@ export default function CreateJobDialog({ ...props }) {
Object.values(obj || {}).forEach(val => pushString(val))
}
+ const pushObjectKeys = obj => {
+ Object.keys(obj || {}).forEach(key => pushString(key))
+ }
+
pushString(templateDetail.jobType)
pushString(templateDetail.comment)
pushString(templateDetail.executable)
pushArray(templateDetail.arguments)
+ pushObjectKeys(templateDetail.environments)
pushObjectValues(templateDetail.environments)
+ pushObjectKeys(templateDetail.customFields)
pushObjectValues(templateDetail.customFields)
if (jobType === 'spark') {
@@ -107,6 +113,7 @@ export default function CreateJobDialog({ ...props }) {
pushArray(templateDetail.jars)
pushArray(templateDetail.files)
pushArray(templateDetail.archives)
+ pushObjectKeys(templateDetail.configs)
pushObjectValues(templateDetail.configs)
}
@@ -301,7 +308,8 @@ export default function CreateJobDialog({ ...props }) {
<div className='space-y-1'>
{Object.entries(jobTemplateDetail?.environments ||
{}).map(([key, value]) => (
<div key={`env-${key}`} className='text-sm
text-gray-700'>
- <span className='text-gray-400'>{key}:</span>
{renderTemplateValue(value)}
+ <span
className='text-gray-400'>{renderTemplateValue(key)}:</span>{' '}
+ {renderTemplateValue(value)}
</div>
))}
</div>
@@ -317,7 +325,8 @@ export default function CreateJobDialog({ ...props }) {
<div className='space-y-1'>
{Object.entries(jobTemplateDetail?.customFields ||
{}).map(([key, value]) => (
<div key={`custom-${key}`} className='text-sm
text-gray-700'>
- <span className='text-gray-400'>{key}:</span>
{renderTemplateValue(value)}
+ <span
className='text-gray-400'>{renderTemplateValue(key)}:</span>{' '}
+ {renderTemplateValue(value)}
</div>
))}
</div>
@@ -383,7 +392,8 @@ export default function CreateJobDialog({ ...props }) {
<div className='space-y-1'>
{Object.entries(jobTemplateDetail?.configs ||
{}).map(([key, value]) => (
<div key={`config-${key}`}
className='text-[12px] text-gray-700'>
- <span
className='text-gray-400'>{key}:</span> {renderTemplateValue(value)}
+ <span
className='text-gray-400'>{renderTemplateValue(key)}:</span>{' '}
+ {renderTemplateValue(value)}
</div>
))}
</div>
diff --git a/web/web/src/app/jobs/RegisterJobTemplateDialog.js
b/web/web/src/app/jobs/RegisterJobTemplateDialog.js
index 9968c3af53..ccfbbe0131 100644
--- a/web/web/src/app/jobs/RegisterJobTemplateDialog.js
+++ b/web/web/src/app/jobs/RegisterJobTemplateDialog.js
@@ -346,7 +346,11 @@ export default function RegisterJobTemplateDialog({
...props }) {
</Form.Item>
{jobType === 'shell' && (
<Form.Item name='scripts' label='Script(s)'>
- <Select mode='tags' tokenSeparators={[',']} />
+ <Select
+ mode='tags'
+ tokenSeparators={[',']}
+ placeholder='e.g.
/path/to/script1.sh,/path/to/script2.sh'
+ />
</Form.Item>
)}
{jobType === 'spark' && (
diff --git a/web/web/src/app/jobs/page.js b/web/web/src/app/jobs/page.js
index 05c745c5e1..edd34cf211 100644
--- a/web/web/src/app/jobs/page.js
+++ b/web/web/src/app/jobs/page.js
@@ -78,7 +78,7 @@ export default function JobsPage() {
.map(job => {
return {
...job,
- key: job.id
+ key: job.jobId
}
})
diff --git a/web/web/src/app/metalakes/page.js
b/web/web/src/app/metalakes/page.js
index c863d726fa..19061d48a8 100644
--- a/web/web/src/app/metalakes/page.js
+++ b/web/web/src/app/metalakes/page.js
@@ -28,11 +28,18 @@ import { useAppSelector, useAppDispatch } from
'@/lib/hooks/useStore'
import { Button, Dropdown, Flex, Input, Modal, Popover, Space, Spin, Table,
Tooltip, Typography } from 'antd'
import { ExclamationCircleFilled, PlusOutlined } from '@ant-design/icons'
import { useAntdColumnResize } from 'react-antd-column-resize'
-import { fetchMetalakes, deleteMetalake, resetTree, switchMetalakeInUse } from
'@/lib/store/metalakes'
+import {
+ fetchMetalakes,
+ deleteMetalake,
+ resetTree,
+ switchMetalakeInUse,
+ resetMetalakeStore
+} from '@/lib/store/metalakes'
import { to } from '@/lib/utils'
import { formatToDateTime } from '@/lib/utils/date'
import Icons from '@/components/Icons'
import GetOwner from '@/components/GetOwner'
+import PropertiesContent from '@/components/PropertiesContent'
const CreateMetalakeDialog = dynamic(() => import('./CreateMetalakeDialog'), {
loading: () => <Loading />,
@@ -69,6 +76,7 @@ const MetalakeList = () => {
useEffect(() => {
dispatch(fetchMetalakes())
+ dispatch(resetMetalakeStore())
}, [dispatch])
useEffect(() => {
@@ -109,32 +117,7 @@ const MetalakeList = () => {
if (refresh) setOwnerRefreshKey(k => k + 1)
}
- const propertyContent = properties => {
- return (
- <Flex className='max-h-80 overflow-auto'>
- <Space.Compact direction='vertical' className='grow divide-y
border-gray-100'>
- <span className='bg-gray-100 p-1'>Key</span>
- {properties
- ? Object.keys(properties).map((key, index) => (
- <span key={index} className='p-1'>
- {key}
- </span>
- ))
- : null}
- </Space.Compact>
- <Space.Compact direction='vertical' className='grow divide-y
border-gray-100'>
- <span className='bg-gray-100 p-1'>Value</span>
- {properties
- ? Object.values(properties).map((value, index) => (
- <span key={index} className='p-1'>
- {value}
- </span>
- ))
- : null}
- </Space.Compact>
- </Flex>
- )
- }
+ const propertyContent = properties => <PropertiesContent
properties={properties} />
const showDeleteConfirm = (NameContext, metalake, type, isInUse = false) => {
let confirmInput = ''
diff --git a/web/web/src/components/PropertiesContent.js
b/web/web/src/components/PropertiesContent.js
new file mode 100644
index 0000000000..ce1ad551b0
--- /dev/null
+++ b/web/web/src/components/PropertiesContent.js
@@ -0,0 +1,62 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react'
+import { Space } from 'antd'
+import { sanitizeText } from '@/lib/utils/index'
+
+const PropertiesContent = ({ properties, dataReferPrefix, contentDataRefer })
=> {
+ const entries = properties ? Object.entries(properties) : []
+
+ const keyProps = key => (dataReferPrefix ? { 'data-refer':
`${dataReferPrefix}-key-${key}` } : {})
+ const valueProps = key => (dataReferPrefix ? { 'data-refer':
`${dataReferPrefix}-value-${key}` } : {})
+ const contentProps = contentDataRefer ? { 'data-refer': contentDataRefer } :
{}
+
+ return (
+ <Space.Compact className='max-h-80 overflow-auto' {...contentProps}>
+ <Space.Compact direction='vertical' className='divide-y border-gray-100'>
+ <span className='min-w-24 bg-gray-100 p-1'>Key</span>
+ {entries.map(([key]) => (
+ <span className='p-1 block min-w-24 max-w-60 truncate' title={key}
key={`prop-key-${key}`} {...keyProps(key)}>
+ {key}
+ </span>
+ ))}
+ </Space.Compact>
+ <Space.Compact direction='vertical' className='divide-y border-gray-100'>
+ <span className='min-w-24 bg-gray-100 p-1'>Value</span>
+ {entries.map(([key, value]) => {
+ const safeValue = sanitizeText(value) || '-'
+
+ return (
+ <span
+ className='p-1 block min-w-24 max-w-60 truncate'
+ title={safeValue}
+ key={`prop-val-${key}`}
+ {...valueProps(key)}
+ >
+ {safeValue}
+ </span>
+ )
+ })}
+ </Space.Compact>
+ </Space.Compact>
+ )
+}
+
+export default PropertiesContent
