[Feature] Introduce new page for cdc and system

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}
       />
     )
   }

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'),
 }

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'),
 }

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',

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'

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%;
+  }
+}

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 (
+      <div class={styles.container}>CDCPage</div>
+    )
+  }
+})

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'
 

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>

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')}

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')}

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%;
+  }
+}

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 (
+      <div class={styles.container}>SystemPage</div>
+    )
+  }
+})