From fab9398e58683ad54c5bad31ac20d1f98998a979 Mon Sep 17 00:00:00 2001 From: labbomb <739955946@qq.com> Date: Sat, 21 Oct 2023 23:10:15 +0800 Subject: [PATCH] feat: add new page for cdc and system --- .../content/components/menubar/index.tsx | 20 +++++++++++-- .../src/router/modules/cdc_ingestion.ts | 2 +- .../src/router/modules/system.ts | 2 +- paimon-web-ui-new/src/store/config/index.ts | 5 +--- paimon-web-ui-new/src/store/config/type.ts | 20 +++++++++++++ .../src/views/cdc/index.module.scss | 28 +++++++++++++++++ paimon-web-ui-new/src/views/cdc/index.tsx | 30 +++++++++++++++++++ paimon-web-ui-new/src/views/login/use-form.ts | 1 + .../components/metadata-tabs/index.tsx | 2 +- .../src/views/system/index.module.scss | 28 +++++++++++++++++ paimon-web-ui-new/src/views/system/index.tsx | 30 +++++++++++++++++++ 11 files changed, 159 insertions(+), 9 deletions(-) create mode 100644 paimon-web-ui-new/src/store/config/type.ts create mode 100644 paimon-web-ui-new/src/views/cdc/index.module.scss create mode 100644 paimon-web-ui-new/src/views/cdc/index.tsx create mode 100644 paimon-web-ui-new/src/views/system/index.module.scss create mode 100644 paimon-web-ui-new/src/views/system/index.tsx 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 7a6d71343..cdd25dde8 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('playground') + + const handleUpdateValue = (value: string) => { + activeKey.value = value + configStore.setCurrentNavActive(value as NavBar) + } + + onMounted(() => { + activeKey.value = configStore.getCurrentNavActive + }) + return { - activeKey: ref('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 4ec83e7da..d8d30c686 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 d3fde59a3..aff5d3c5a 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 02669adce..2b81a42b8 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/store/config/type.ts b/paimon-web-ui-new/src/store/config/type.ts new file mode 100644 index 000000000..f4a1f98fd --- /dev/null +++ b/paimon-web-ui-new/src/store/config/type.ts @@ -0,0 +1,20 @@ +/* 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. */ + +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/views/cdc/index.module.scss b/paimon-web-ui-new/src/views/cdc/index.module.scss new file mode 100644 index 000000000..fe437d971 --- /dev/null +++ b/paimon-web-ui-new/src/views/cdc/index.module.scss @@ -0,0 +1,28 @@ +/* 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. */ + +.container { + display: flex; + width: 100%; + height: 100%; + + .content { + display: flex; + width: calc(100% - 60px); + height: 100%; + } +} diff --git a/paimon-web-ui-new/src/views/cdc/index.tsx b/paimon-web-ui-new/src/views/cdc/index.tsx new file mode 100644 index 000000000..b70967b63 --- /dev/null +++ b/paimon-web-ui-new/src/views/cdc/index.tsx @@ -0,0 +1,30 @@ +/* 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 styles from './index.module.scss'; + +export default defineComponent({ + name: 'CDCPage', + setup() { + return {} + }, + render() { + return ( +
CDCPage
+ ) + } +}) 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 8225d9d4b..f5f729887 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 e757fb9a8..fb0a160a9 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 (
- + Table 信息 diff --git a/paimon-web-ui-new/src/views/system/index.module.scss b/paimon-web-ui-new/src/views/system/index.module.scss new file mode 100644 index 000000000..fe437d971 --- /dev/null +++ b/paimon-web-ui-new/src/views/system/index.module.scss @@ -0,0 +1,28 @@ +/* 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. */ + +.container { + display: flex; + width: 100%; + height: 100%; + + .content { + display: flex; + width: calc(100% - 60px); + height: 100%; + } +} diff --git a/paimon-web-ui-new/src/views/system/index.tsx b/paimon-web-ui-new/src/views/system/index.tsx new file mode 100644 index 000000000..5932fcc0c --- /dev/null +++ b/paimon-web-ui-new/src/views/system/index.tsx @@ -0,0 +1,30 @@ +/* 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 styles from './index.module.scss'; + +export default defineComponent({ + name: 'SystemPage', + setup() { + return {} + }, + render() { + return ( +
SystemPage
+ ) + } +})