[Feature] Introduce Layout (#41)

apache · Sep 15, 2023 · e12b789 · e12b789
1 parent 58d4053
commit e12b789
Show file tree

Hide file tree

Showing 24 changed files with 426 additions and 18 deletions.
diff --git a/paimon-web-ui-new/index.html b/paimon-web-ui-new/index.html
@@ -21,9 +21,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="/favicon_blue.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Apache Paimon</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/paimon-web-ui-new/package.json b/paimon-web-ui-new/package.json
@@ -26,6 +26,7 @@
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^18.17.15",
     "@varlet/axle": "^0.1.2",
+    "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "@vue/eslint-config-prettier": "^8.0.0",

diff --git a/paimon-web-ui-new/pnpm-lock.yaml b/paimon-web-ui-new/pnpm-lock.yaml
diff --git a/paimon-web-ui-new/public/favicon.ico b/paimon-web-ui-new/public/favicon.ico
diff --git a/paimon-web-ui-new/public/favicon_blue.svg b/paimon-web-ui-new/public/favicon_blue.svg
diff --git a/paimon-web-ui-new/src/App.tsx b/paimon-web-ui-new/src/App.tsx
@@ -45,6 +45,7 @@ export default defineComponent({
       theme-overrides={this.themeOverrides}
       locale={this.locale === 'en' ? enUS : zhCN}
       date-locale={this.locale === 'en' ? dateEnUS : dateZhCN}
+      style={{ width: '100%', height: '100vh' }}
     >
       <router-view />
     </n-config-provider>

diff --git a/paimon-web-ui-new/src/api/request.ts b/paimon-web-ui-new/src/api/request.ts
@@ -45,12 +45,12 @@ axle.axios.interceptors.request.use(
 
 axle.axios.interceptors.response.use(
   (response) => {
-    const { code, message } = response.data
+    const { code, msg } = response.data
 
-    if (code !== 200 && message) {
+    if (code !== 200 && msg) {
       // do something there
+      return Promise.reject(response.data)
     }
-
     return response.data
   },
   (error) => {
@@ -104,4 +104,4 @@ class HttpRequest {
   }
 }
 
-export default new HttpRequest()
+export default new HttpRequest()
diff --git a/paimon-web-ui-new/src/assets/styles/main.scss b/paimon-web-ui-new/src/assets/styles/main.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. */
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
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
@@ -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 i18n from '@/locales'
+import { useConfigStore } from '@/store/config'
+
+export default defineComponent({
+  name: 'MenuBar',
+  setup() {
+    const configStore = useConfigStore()
+
+    const menuOptions = ref([] as any[]) 
+
+    watch(
+      () => configStore.getCurrentLocale,
+      () => {
+        menuOptions.value = [
+          {
+            label: i18n.global.t('layout.playground'),
+            key: 'playground',
+          },
+          {
+            label: i18n.global.t('layout.metadata'),
+            key: 'metadata',
+          },
+          {
+            label: i18n.global.t('layout.cdc_ingestion'),
+            key: 'cdc_ingestion',
+          },
+          {
+            label: i18n.global.t('layout.system'),
+            key: 'system',
+          },
+        ]
+      },
+      { immediate: true }
+    )
+
+    return {
+      activeKey: ref<string | null>('playground'),
+      menuOptions
+    }
+  },
+  render () {
+    return (
+      <n-menu 
+        v-model:value={this.activeKey}
+        mode="horizontal"
+        options={this.menuOptions}
+      />
+    )
+  }
+})
diff --git a/paimon-web-ui-new/src/layouts/content/components/toolbar/index.tsx b/paimon-web-ui-new/src/layouts/content/components/toolbar/index.tsx
@@ -0,0 +1,74 @@
+/* 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 i18n from '@/locales'
+import { useConfigStore } from '@/store/config'
+import { LogoGithub, Moon, SunnyOutline, Language, PersonCircleOutline } from '@vicons/ionicons5'
+
+export default defineComponent({
+  name: 'ToolBar',
+  setup() {
+    const handleLink = () => {
+      window.open('https://github.com/apache/incubator-paimon-webui')
+    }
+
+    const configStore = useConfigStore()
+    const handleTheme = () => {
+      configStore.setCurrentTheme(
+        configStore.getCurrentTheme === 'light' ? 'dark' : 'light'
+      )
+    }
+
+    const handleLanguage = () => {
+      configStore.setCurrentLocale(configStore.getCurrentLocale === 'zh' ? 'en' : 'zh')
+      i18n.global.locale.value = configStore.getCurrentLocale === 'zh' ? 'en' : 'zh'
+    }
+
+    return {
+      handleLink,
+      handleTheme,
+      handleLanguage,
+      configStore,
+      active: ref(false)
+    }
+  },
+  render () {
+    return (
+      <n-space align="center" size={20}>
+        <n-popover trigger="hover" placement="bottom"
+          v-slots={{
+            trigger: () => (
+              <n-icon size="24" onClick={this.handleTheme}>
+                {
+                  this.configStore.getCurrentTheme === 'light' ? <Moon /> : <SunnyOutline />
+                }
+              </n-icon>
+            )
+          }}
+          >
+          <span>{i18n.global.t('layout.' + String(this.configStore.getCurrentTheme === 'light' ? 'dark' : 'light'))}</span>
+        </n-popover>
+        <n-icon size="24" onClick={this.handleLink}>
+          <LogoGithub />
+        </n-icon>
+        <n-icon size="24" onClick={this.handleLanguage}>
+          <Language />
+        </n-icon>
+      </n-space>
+    )
+  }
+})
diff --git a/paimon-web-ui-new/src/layouts/content/components/topbar/index.module.scss b/paimon-web-ui-new/src/layouts/content/components/topbar/index.module.scss
@@ -0,0 +1,53 @@
+/* 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%;
+
+  .logo-bar {
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    width: 300px;
+    height: 100%;
+    font-size: 18px;
+    font-weight: 600;
+    .logo {
+      display: flex;
+      align-items: center;
+      img {
+        width: 50px;
+        height: 50px;
+      }
+    }
+  }
+
+  .menu-bar {
+    display: flex;
+    align-items: center;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex: 1;
+    padding-right: 20px;
+  }
+}
diff --git a/paimon-web-ui-new/src/layouts/content/components/topbar/index.tsx b/paimon-web-ui-new/src/layouts/content/components/topbar/index.tsx
@@ -0,0 +1,47 @@
+/* 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'
+import logoImage from '@/assets/logo.svg'
+import MenuBar from '../menubar'
+import ToolBar from '../toolbar'
+
+export default defineComponent({
+  name: 'TopBar',
+  setup() {
+  },
+  render () {
+    return (
+      <div class={styles.container}>
+        <div class={styles['logo-bar']}>
+          <n-space align='center' justify='center'>
+            <div class={styles.logo}>
+              <img src={logoImage} alt='logo-image'/>
+            </div>
+            <div>Apache Paimon</div>
+          </n-space>
+        </div>
+        <div class={styles['menu-bar']}>
+          <MenuBar />
+        </div>
+        <div class={styles.toolbar}>
+          <ToolBar />
+        </div>
+      </div>
+    )
+  }
+})
diff --git a/paimon-web-ui-new/src/layouts/content/index.module.scss b/paimon-web-ui-new/src/layouts/content/index.module.scss
@@ -0,0 +1,21 @@
+/* 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 {
+  width: 100%;
+  height: 100%;
+}