[incubator-seatunnel] branch dev updated: [Feat][UI] Add the script in the data pipes detail. (#2335)

[zh...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel.git


The following commit(s) were added to refs/heads/dev by this push:
     new 21349ad05 [Feat][UI] Add the script in the data pipes detail. (#2335)
21349ad05 is described below

commit 21349ad05cf7a0bf797c8b497310540c94bb11f6
Author: songjianet <17...@qq.com>
AuthorDate: Tue Aug 2 14:33:32 2022 +0800

    [Feat][UI] Add the script in the data pipes detail. (#2335)
---
 seatunnel-ui/src/router/data-pipes.ts              |  8 ++++
 seatunnel-ui/src/views/data-pipes/detail/index.tsx | 49 +++++++++++++++++++++-
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/seatunnel-ui/src/router/data-pipes.ts b/seatunnel-ui/src/router/data-pipes.ts
index 6357a3132..6a7726cc7 100644
--- a/seatunnel-ui/src/router/data-pipes.ts
+++ b/seatunnel-ui/src/router/data-pipes.ts
@@ -37,6 +37,14 @@ export default {
       meta: {
         title: 'data-pipes-list'
       }
+    },
+    {
+      path: '/data-pipes/:dataPipeCode',
+      name: 'data-pipes-detail',
+      component: components['data-pipes-detail'],
+      meta: {
+        title: 'data-pipes-detail'
+      }
     }
   ]
 }
diff --git a/seatunnel-ui/src/views/data-pipes/detail/index.tsx b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
index 9f257f0e6..7fcd2740a 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
@@ -16,12 +16,57 @@
  */
 
 import { defineComponent } from 'vue'
+import { NSpace, NCard, NButton, NBreadcrumb, NBreadcrumbItem, NTabs, NTabPane } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import MonacoEditor from '@/components/monaco-editor'
+import type { Router } from 'vue-router'
 
 const DataPipesDetail = defineComponent({
-  setup() {},
+  setup() {
+    const { t } = useI18n()
+    const router: Router = useRouter()
+
+    const handleClickDataPipes = () => {
+      router.push({ path: '/data-pipes/list' })
+    }
+
+    return { t, handleClickDataPipes }
+  },
   render() {
     return (
-      <div></div>
+      <NSpace vertical>
+        <NCard>
+          {{
+            header: () => <NSpace align='center'>
+              <NBreadcrumb>
+                <NBreadcrumbItem onClick={this.handleClickDataPipes}>{this.t('data_pipes.data_pipes')}</NBreadcrumbItem>
+                <NBreadcrumbItem>user-order-tables-10</NBreadcrumbItem>
+              </NBreadcrumb>
+              <div class={['w-3', 'h-3', 'rounded-full', 'bg-green-400']}></div>
+              <span style={{
+                fontSize: 'var(--n-font-size)',
+                color: 'var(--n-item-text-color-active)'
+              }}>{this.t('data_pipes.stop')}</span>
+            </NSpace>,
+            'header-extra': () => <NSpace>
+              <NButton secondary>{this.t('data_pipes.execute')}</NButton>
+              <NButton secondary>{this.t('data_pipes.kill')}</NButton>
+              <NButton secondary>{this.t('data_pipes.stop')}</NButton>
+            </NSpace>
+          }}
+        </NCard>
+        <NTabs type='segment' class='mt-7'>
+          <NTabPane name='overview' tab={this.t('data_pipes.overview')}>
+            <NCard>overview</NCard>
+          </NTabPane>
+          <NTabPane name='script' tab={this.t('data_pipes.script')}>
+            <NCard>
+              <MonacoEditor />
+            </NCard>
+          </NTabPane>
+        </NTabs>
+      </NSpace>
     )
   }
 })