This is an automated email from the ASF dual-hosted git repository.
nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new b276090 [Feature] Enhance Metadata layout style (#68)
b276090 is described below
commit b2760905a1b70d068ae3bf099067fb5828a6fad3
Author: xiaomo <[email protected]>
AuthorDate: Thu Oct 19 15:14:04 2023 +0800
[Feature] Enhance Metadata layout style (#68)
---
.gitignore | 3 +
paimon-web-ui-new/auto-imports.d.ts | 108 ---------------------
paimon-web-ui-new/src/locales/en/index.ts | 4 +-
.../locales/en/{index.ts => modules/metadata.ts} | 13 ++-
paimon-web-ui-new/src/locales/zh/index.ts | 4 +-
.../{en/index.ts => zh/modules/metadata.ts} | 13 ++-
.../metadata/{ => components/breadcrumb}/index.tsx | 21 ++--
.../components/menu-tree/index.module.scss | 4 +-
.../metadata-tabs}/index.module.scss | 12 +--
.../metadata/components/metadata-tabs/index.tsx | 67 +++++++++++++
.../src/views/metadata/index.module.scss | 4 +
paimon-web-ui-new/src/views/metadata/index.tsx | 4 +
12 files changed, 112 insertions(+), 145 deletions(-)
diff --git a/.gitignore b/.gitignore
index 0828d4a..ba63f6c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,3 +71,6 @@ coverage
*.njsproj
*.sln
*.sw?
+
+# paimon-web-ui-new
+paimon-web-ui-new/auto-imports.d.ts
diff --git a/paimon-web-ui-new/auto-imports.d.ts
b/paimon-web-ui-new/auto-imports.d.ts
deleted file mode 100644
index e380cf0..0000000
--- a/paimon-web-ui-new/auto-imports.d.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-/* 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. */
-
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
-// Generated by unplugin-auto-import
-export {}
-declare global {
- const EffectScope: typeof import('vue')['EffectScope']
- const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
- const computed: typeof import('vue')['computed']
- const createApp: typeof import('vue')['createApp']
- const createPinia: typeof import('pinia')['createPinia']
- const customRef: typeof import('vue')['customRef']
- const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
- const defineComponent: typeof import('vue')['defineComponent']
- const defineStore: typeof import('pinia')['defineStore']
- const effectScope: typeof import('vue')['effectScope']
- const getActivePinia: typeof import('pinia')['getActivePinia']
- const getCurrentInstance: typeof import('vue')['getCurrentInstance']
- const getCurrentScope: typeof import('vue')['getCurrentScope']
- const h: typeof import('vue')['h']
- const inject: typeof import('vue')['inject']
- const isProxy: typeof import('vue')['isProxy']
- const isReactive: typeof import('vue')['isReactive']
- const isReadonly: typeof import('vue')['isReadonly']
- const isRef: typeof import('vue')['isRef']
- const locales: typeof import('./src/composables/locales')['default']
- const mapActions: typeof import('pinia')['mapActions']
- const mapGetters: typeof import('pinia')['mapGetters']
- const mapState: typeof import('pinia')['mapState']
- const mapStores: typeof import('pinia')['mapStores']
- const mapWritableState: typeof import('pinia')['mapWritableState']
- const markRaw: typeof import('vue')['markRaw']
- const nextTick: typeof import('vue')['nextTick']
- const onActivated: typeof import('vue')['onActivated']
- const onBeforeMount: typeof import('vue')['onBeforeMount']
- const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
- const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
- const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
- const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
- const onDeactivated: typeof import('vue')['onDeactivated']
- const onErrorCaptured: typeof import('vue')['onErrorCaptured']
- const onLogin: typeof import('./src/api/models/login')['onLogin']
- const onMounted: typeof import('vue')['onMounted']
- const onRenderTracked: typeof import('vue')['onRenderTracked']
- const onRenderTriggered: typeof import('vue')['onRenderTriggered']
- const onScopeDispose: typeof import('vue')['onScopeDispose']
- const onServerPrefetch: typeof import('vue')['onServerPrefetch']
- const onUnmounted: typeof import('vue')['onUnmounted']
- const onUpdated: typeof import('vue')['onUpdated']
- const provide: typeof import('vue')['provide']
- const reactive: typeof import('vue')['reactive']
- const readonly: typeof import('vue')['readonly']
- const ref: typeof import('vue')['ref']
- const request: typeof import('./src/api/request')['default']
- const resolveComponent: typeof import('vue')['resolveComponent']
- const setActivePinia: typeof import('pinia')['setActivePinia']
- const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
- const shallowReactive: typeof import('vue')['shallowReactive']
- const shallowReadonly: typeof import('vue')['shallowReadonly']
- const shallowRef: typeof import('vue')['shallowRef']
- const storeToRefs: typeof import('pinia')['storeToRefs']
- const toRaw: typeof import('vue')['toRaw']
- const toRef: typeof import('vue')['toRef']
- const toRefs: typeof import('vue')['toRefs']
- const toValue: typeof import('vue')['toValue']
- const triggerRef: typeof import('vue')['triggerRef']
- const types: typeof import('./src/api/types')['default']
- const unref: typeof import('vue')['unref']
- const useAttrs: typeof import('vue')['useAttrs']
- const useCssModule: typeof import('vue')['useCssModule']
- const useCssVars: typeof import('vue')['useCssVars']
- const useDialog: typeof import('naive-ui')['useDialog']
- const useLink: typeof import('vue-router')['useLink']
- const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
- const useLocaleHooks: typeof
import('./src/composables/locales')['useLocaleHooks']
- const useMessage: typeof import('naive-ui')['useMessage']
- const useNotification: typeof import('naive-ui')['useNotification']
- const useRoute: typeof import('vue-router')['useRoute']
- const useRouter: typeof import('vue-router')['useRouter']
- const useSlots: typeof import('vue')['useSlots']
- const watch: typeof import('vue')['watch']
- const watchEffect: typeof import('vue')['watchEffect']
- const watchPostEffect: typeof import('vue')['watchPostEffect']
- const watchSyncEffect: typeof import('vue')['watchSyncEffect']
-}
-// for type re-export
-declare global {
- // @ts-ignore
- export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey,
PropType, Ref, VNode, WritableComputedRef } from 'vue'
-}
diff --git a/paimon-web-ui-new/src/locales/en/index.ts
b/paimon-web-ui-new/src/locales/en/index.ts
index db4b713..c4475e9 100644
--- a/paimon-web-ui-new/src/locales/en/index.ts
+++ b/paimon-web-ui-new/src/locales/en/index.ts
@@ -18,9 +18,11 @@ under the License. */
import layout from './modules/layout'
import login from './modules/login'
import playground from './modules/playground'
+import metadata from './modules/metadata'
export default {
login,
layout,
- playground
+ playground,
+ metadata
}
diff --git a/paimon-web-ui-new/src/locales/en/index.ts
b/paimon-web-ui-new/src/locales/en/modules/metadata.ts
similarity index 82%
copy from paimon-web-ui-new/src/locales/en/index.ts
copy to paimon-web-ui-new/src/locales/en/modules/metadata.ts
index db4b713..9e89e8c 100644
--- a/paimon-web-ui-new/src/locales/en/index.ts
+++ b/paimon-web-ui-new/src/locales/en/modules/metadata.ts
@@ -15,12 +15,11 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import layout from './modules/layout'
-import login from './modules/login'
-import playground from './modules/playground'
-
export default {
- login,
- layout,
- playground
+ table_info: 'Table',
+ option_info: 'Option',
+ schema_info: 'Schema',
+ snapshot_file: 'Snapshot File',
+ manifests_file: 'Manifest File',
+ data_file: 'Data File'
}
diff --git a/paimon-web-ui-new/src/locales/zh/index.ts
b/paimon-web-ui-new/src/locales/zh/index.ts
index db4b713..c4475e9 100644
--- a/paimon-web-ui-new/src/locales/zh/index.ts
+++ b/paimon-web-ui-new/src/locales/zh/index.ts
@@ -18,9 +18,11 @@ under the License. */
import layout from './modules/layout'
import login from './modules/login'
import playground from './modules/playground'
+import metadata from './modules/metadata'
export default {
login,
layout,
- playground
+ playground,
+ metadata
}
diff --git a/paimon-web-ui-new/src/locales/en/index.ts
b/paimon-web-ui-new/src/locales/zh/modules/metadata.ts
similarity index 80%
copy from paimon-web-ui-new/src/locales/en/index.ts
copy to paimon-web-ui-new/src/locales/zh/modules/metadata.ts
index db4b713..cdf733f 100644
--- a/paimon-web-ui-new/src/locales/en/index.ts
+++ b/paimon-web-ui-new/src/locales/zh/modules/metadata.ts
@@ -15,12 +15,11 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import layout from './modules/layout'
-import login from './modules/login'
-import playground from './modules/playground'
-
export default {
- login,
- layout,
- playground
+ table_info: 'Table 信息',
+ option_info: 'Option 信息',
+ schema_info: 'Schema 信息',
+ snapshot_file: 'Snapshot 文件',
+ manifests_file: 'Manifest 文件',
+ data_file: '数据文件'
}
diff --git a/paimon-web-ui-new/src/views/metadata/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
similarity index 66%
copy from paimon-web-ui-new/src/views/metadata/index.tsx
copy to paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
index 3785271..3941c2a 100644
--- a/paimon-web-ui-new/src/views/metadata/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/components/breadcrumb/index.tsx
@@ -15,20 +15,21 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import styles from './index.module.scss'
-import MenuTree from "./components/menu-tree"
+import { Folder, FileTray } from '@vicons/ionicons5'
export default defineComponent({
- name: 'MetadataPage',
+ name: 'MetaDataBreadcrumb',
setup() { },
render() {
return (
- <div class={styles.container}>
- <MenuTree />
- <div class={styles.content}>
- <router-view />
- </div>
- </div>
+ <n-breadcrumb>
+ <n-breadcrumb-item>
+ <n-icon component={Folder} /> paimon2</n-breadcrumb-item>
+ <n-breadcrumb-item>
+ <n-icon component={Folder} /> user</n-breadcrumb-item>
+ <n-breadcrumb-item>
+ <n-icon component={FileTray} /> user_table</n-breadcrumb-item>
+ </n-breadcrumb>
);
- },
+ }
});
diff --git
a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
index 536333a..8926adc 100644
---
a/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
+++
b/paimon-web-ui-new/src/views/metadata/components/menu-tree/index.module.scss
@@ -16,8 +16,10 @@ specific language governing permissions and limitations
under the License. */
.container {
- width: 100%;
+ width: 20%;
height: 100%;
+ box-sizing: border-box;
+ background-color: var(--n-color);
.card {
height: 100%;
diff --git a/paimon-web-ui-new/src/views/metadata/index.module.scss
b/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.module.scss
similarity index 83%
copy from paimon-web-ui-new/src/views/metadata/index.module.scss
copy to
paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.module.scss
index fe437d9..0877b03 100644
--- a/paimon-web-ui-new/src/views/metadata/index.module.scss
+++
b/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.module.scss
@@ -15,14 +15,6 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-.container {
- display: flex;
- width: 100%;
- height: 100%;
-
- .content {
- display: flex;
- width: calc(100% - 60px);
- height: 100%;
- }
+.tabs {
+ margin-top: 10px;
}
diff --git
a/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx
b/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx
new file mode 100644
index 0000000..a2130f7
--- /dev/null
+++ b/paimon-web-ui-new/src/views/metadata/components/metadata-tabs/index.tsx
@@ -0,0 +1,67 @@
+/* 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 type { TabsInst } from 'naive-ui'
+
+import { useConfigStore } from '@/store/config'
+
+import styles from './index.module.scss'
+
+
+export default defineComponent({
+ name: 'MetadataTabs',
+ setup() {
+ const { t } = useLocaleHooks()
+ const tabsInstRef = ref<TabsInst | null>(null)
+ const configStore = useConfigStore()
+
+ watch(() => configStore.getCurrentLocale, () => {
+ nextTick(tabsInstRef.value?.syncBarPosition)
+ })
+
+ return {
+ tabsInstRef,
+ t,
+ }
+ },
+ render() {
+ return (
+ <div class={styles.tabs}>
+ <n-tabs ref="tabsInstRef" type='bar' animated>
+ <n-tab-pane name='table' tab={this.t('metadata.table_info')}>
+ Table 信息
+ </n-tab-pane>
+ <n-tab-pane name='option' tab={this.t('metadata.option_info')}>
+ Option 信息
+ </n-tab-pane>
+ <n-tab-pane name='schema' tab={this.t('metadata.schema_info')}>
+ Schema 信息
+ </n-tab-pane>
+ <n-tab-pane name='snapshot' tab={this.t('metadata.snapshot_file')}>
+ Snapshot 文件
+ </n-tab-pane>
+ <n-tab-pane name='manifest' tab={this.t('metadata.manifests_file')}>
+ Manifest 文件
+ </n-tab-pane>
+ <n-tab-pane name='datafile' tab={this.t('metadata.data_file')}>
+ 数据文件
+ </n-tab-pane>
+ </n-tabs>
+ </div>
+ );
+ },
+});
diff --git a/paimon-web-ui-new/src/views/metadata/index.module.scss
b/paimon-web-ui-new/src/views/metadata/index.module.scss
index fe437d9..f4df25c 100644
--- a/paimon-web-ui-new/src/views/metadata/index.module.scss
+++ b/paimon-web-ui-new/src/views/metadata/index.module.scss
@@ -22,7 +22,11 @@ under the License. */
.content {
display: flex;
+ flex-direction: column;
+
width: calc(100% - 60px);
height: 100%;
+
+ padding: 14px 20px;
}
}
diff --git a/paimon-web-ui-new/src/views/metadata/index.tsx
b/paimon-web-ui-new/src/views/metadata/index.tsx
index 3785271..22c0f6a 100644
--- a/paimon-web-ui-new/src/views/metadata/index.tsx
+++ b/paimon-web-ui-new/src/views/metadata/index.tsx
@@ -17,6 +17,8 @@ under the License. */
import styles from './index.module.scss'
import MenuTree from "./components/menu-tree"
+import Breadcrumb from './components/breadcrumb'
+import Tabs from './components/metadata-tabs'
export default defineComponent({
name: 'MetadataPage',
@@ -26,6 +28,8 @@ export default defineComponent({
<div class={styles.container}>
<MenuTree />
<div class={styles.content}>
+ <Breadcrumb />
+ <Tabs />
<router-view />
</div>
</div>
