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 d1f19a1 [Feature] Introduce new page for cdc and system (#75)
d1f19a1 is described below
commit d1f19a1f09d4a04d974e48958c405e561f48c368
Author: labbomb <[email protected]>
AuthorDate: Mon Oct 23 14:22:22 2023 +0800
[Feature] Introduce new page for cdc and system (#75)
---
.../src/layouts/content/components/menubar/index.tsx | 20 ++++++++++++++++++--
.../src/router/modules/cdc_ingestion.ts | 2 +-
paimon-web-ui-new/src/router/modules/system.ts | 2 +-
paimon-web-ui-new/src/store/config/index.ts | 5 +----
.../modules/system.ts => store/config/type.ts} | 9 +++------
.../system.ts => views/cdc/index.module.scss} | 15 ++++++++++-----
.../modules/cdc_ingestion.ts => views/cdc/index.tsx} | 19 +++++++++++++------
paimon-web-ui-new/src/views/login/use-form.ts | 1 +
.../metadata/components/metadata-tabs/index.tsx | 2 +-
.../components/query/components/console/index.tsx | 2 +-
.../workbench/components/console/index.tsx | 2 +-
.../system.ts => views/system/index.module.scss} | 15 ++++++++++-----
.../cdc_ingestion.ts => views/system/index.tsx} | 19 +++++++++++++------
13 files changed, 74 insertions(+), 39 deletions(-)
diff --git a/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
b/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
index 7a6d713..cdd25dd 100644
--- a/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
+++ b/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
@@ -15,12 +15,15 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
+import { useConfigStore } from "@/store/config"
import { RouterLink } from "vue-router"
+import type { NavBar } from "@/store/config/type"
export default defineComponent({
name: 'MenuBar',
setup() {
const { t } = useLocaleHooks()
+ const configStore = useConfigStore()
const renderLabel = (label: string, link: string) => {
return h(
@@ -51,9 +54,21 @@ export default defineComponent({
},
]))
+ const activeKey = ref<string>('playground')
+
+ const handleUpdateValue = (value: string) => {
+ activeKey.value = value
+ configStore.setCurrentNavActive(value as NavBar)
+ }
+
+ onMounted(() => {
+ activeKey.value = configStore.getCurrentNavActive
+ })
+
return {
- activeKey: ref<string | null>('playground'),
- menuOptions
+ activeKey,
+ menuOptions,
+ handleUpdateValue
}
},
render () {
@@ -62,6 +77,7 @@ export default defineComponent({
v-model:value={this.activeKey}
mode="horizontal"
options={this.menuOptions}
+ on-update:value={this.handleUpdateValue}
/>
)
}
diff --git a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
index 4ec83e7..d8d30c6 100644
--- a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
+++ b/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
@@ -19,5 +19,5 @@ export default {
path: '/cdc_ingestion',
name: 'cdc_ingestion',
meta: { title: 'CDC Ingestion' },
- component: () => import('@/layouts/content'),
+ component: () => import('@/views/cdc'),
}
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/router/modules/system.ts
index d3fde59..aff5d3c 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/router/modules/system.ts
@@ -19,5 +19,5 @@ export default {
path: '/system',
name: 'system',
meta: { title: 'System' },
- component: () => import('@/layouts/content'),
+ component: () => import('@/views/system'),
}
diff --git a/paimon-web-ui-new/src/store/config/index.ts
b/paimon-web-ui-new/src/store/config/index.ts
index 02669ad..2b81a42 100644
--- a/paimon-web-ui-new/src/store/config/index.ts
+++ b/paimon-web-ui-new/src/store/config/index.ts
@@ -16,10 +16,7 @@ specific language governing permissions and limitations
under the License. */
import { LANGUAGES } from "@/locales"
-
-type Theme = 'dark' | 'light'
-type NavBar = 'playground' | 'cdc' | 'system' | 'settings'
-type Menu = 'Query' | 'Workbench'
+import type { Menu, NavBar, Theme } from "./type"
export const useConfigStore = defineStore({
id: 'config',
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/store/config/type.ts
similarity index 84%
copy from paimon-web-ui-new/src/router/modules/system.ts
copy to paimon-web-ui-new/src/store/config/type.ts
index d3fde59..f4a1f98 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/store/config/type.ts
@@ -15,9 +15,6 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/system',
- name: 'system',
- meta: { title: 'System' },
- component: () => import('@/layouts/content'),
-}
+export type Theme = 'dark' | 'light'
+export type NavBar = 'playground' | 'cdc' | 'system' | 'settings'
+export type Menu = 'Query' | 'Workbench'
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/views/cdc/index.module.scss
similarity index 83%
copy from paimon-web-ui-new/src/router/modules/system.ts
copy to paimon-web-ui-new/src/views/cdc/index.module.scss
index d3fde59..fe437d9 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/views/cdc/index.module.scss
@@ -15,9 +15,14 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/system',
- name: 'system',
- meta: { title: 'System' },
- component: () => import('@/layouts/content'),
+.container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+
+ .content {
+ display: flex;
+ width: calc(100% - 60px);
+ height: 100%;
+ }
}
diff --git a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
b/paimon-web-ui-new/src/views/cdc/index.tsx
similarity index 77%
copy from paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
copy to paimon-web-ui-new/src/views/cdc/index.tsx
index 4ec83e7..b70967b 100644
--- a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
+++ b/paimon-web-ui-new/src/views/cdc/index.tsx
@@ -15,9 +15,16 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/cdc_ingestion',
- name: 'cdc_ingestion',
- meta: { title: 'CDC Ingestion' },
- component: () => import('@/layouts/content'),
-}
+import styles from './index.module.scss';
+
+export default defineComponent({
+ name: 'CDCPage',
+ setup() {
+ return {}
+ },
+ render() {
+ return (
+ <div class={styles.container}>CDCPage</div>
+ )
+ }
+})
diff --git a/paimon-web-ui-new/src/views/login/use-form.ts
b/paimon-web-ui-new/src/views/login/use-form.ts
index 8225d9d..f5f7298 100644
--- a/paimon-web-ui-new/src/views/login/use-form.ts
+++ b/paimon-web-ui-new/src/views/login/use-form.ts
@@ -15,6 +15,7 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
+import { onLogin } from '@/api'
import type { FormValidationError } from 'naive-ui'
import type { Router } from 'vue-router'
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
index e757fb9..fb0a160 100644
--- 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
@@ -43,7 +43,7 @@ export default defineComponent({
render() {
return (
<div class={styles.tabs}>
- <n-tabs ref="tabsInstRef" type='bar' animated>
+ <n-tabs ref="tabsInstRef" type='bar' animated default-value="table">
<n-tab-pane name='table' tab={this.t('metadata.table_info')}>
Table 信息
</n-tab-pane>
diff --git
a/paimon-web-ui-new/src/views/playground/components/query/components/console/index.tsx
b/paimon-web-ui-new/src/views/playground/components/query/components/console/index.tsx
index 4ecf92a..47a06b4 100644
---
a/paimon-web-ui-new/src/views/playground/components/query/components/console/index.tsx
+++
b/paimon-web-ui-new/src/views/playground/components/query/components/console/index.tsx
@@ -46,7 +46,7 @@ export default defineComponent({
size="large"
default-value="logs"
tabs-padding={20}
- pane-style="padding: 20px;"
+ pane-style="padding: 20px;box-sizing: border-box;"
>
<n-tab-pane name="logs" tab={this.t('playground.logs')}>
{this.t('playground.logs')}
diff --git
a/paimon-web-ui-new/src/views/playground/components/workbench/components/console/index.tsx
b/paimon-web-ui-new/src/views/playground/components/workbench/components/console/index.tsx
index 4ecf92a..47a06b4 100644
---
a/paimon-web-ui-new/src/views/playground/components/workbench/components/console/index.tsx
+++
b/paimon-web-ui-new/src/views/playground/components/workbench/components/console/index.tsx
@@ -46,7 +46,7 @@ export default defineComponent({
size="large"
default-value="logs"
tabs-padding={20}
- pane-style="padding: 20px;"
+ pane-style="padding: 20px;box-sizing: border-box;"
>
<n-tab-pane name="logs" tab={this.t('playground.logs')}>
{this.t('playground.logs')}
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/views/system/index.module.scss
similarity index 83%
copy from paimon-web-ui-new/src/router/modules/system.ts
copy to paimon-web-ui-new/src/views/system/index.module.scss
index d3fde59..fe437d9 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/views/system/index.module.scss
@@ -15,9 +15,14 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/system',
- name: 'system',
- meta: { title: 'System' },
- component: () => import('@/layouts/content'),
+.container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+
+ .content {
+ display: flex;
+ width: calc(100% - 60px);
+ height: 100%;
+ }
}
diff --git a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
b/paimon-web-ui-new/src/views/system/index.tsx
similarity index 77%
copy from paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
copy to paimon-web-ui-new/src/views/system/index.tsx
index 4ec83e7..5932fcc 100644
--- a/paimon-web-ui-new/src/router/modules/cdc_ingestion.ts
+++ b/paimon-web-ui-new/src/views/system/index.tsx
@@ -15,9 +15,16 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/cdc_ingestion',
- name: 'cdc_ingestion',
- meta: { title: 'CDC Ingestion' },
- component: () => import('@/layouts/content'),
-}
+import styles from './index.module.scss';
+
+export default defineComponent({
+ name: 'SystemPage',
+ setup() {
+ return {}
+ },
+ render() {
+ return (
+ <div class={styles.container}>SystemPage</div>
+ )
+ }
+})
