You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by zh...@apache.org on 2022/08/03 04:04:32 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add the run logs in the data pipes detail overview. (#2350)
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 4e867f6df [Feat][UI] Add the run logs in the data pipes detail overview. (#2350)
4e867f6df is described below
commit 4e867f6df0b84ed32b27ade2b97b789b5c0d11e5
Author: songjianet <17...@qq.com>
AuthorDate: Wed Aug 3 12:04:26 2022 +0800
[Feat][UI] Add the run logs in the data pipes detail overview. (#2350)
---
.../src/components/monaco-editor/index.tsx | 2 +-
seatunnel-ui/src/components/monaco-editor/types.ts | 2 +-
seatunnel-ui/src/locales/en_US/data-pipes.ts | 4 +-
seatunnel-ui/src/views/data-pipes/create/index.tsx | 6 +-
.../detail/components/detail-overview.tsx | 96 +++++++++++++++++-----
.../detail/components/use-detail-overview.ts | 2 +-
seatunnel-ui/src/views/data-pipes/detail/index.tsx | 56 +++++++++----
seatunnel-ui/src/views/data-pipes/edite/index.tsx | 6 +-
.../data-pipes/list/components/delete-modal.tsx | 6 +-
.../data-pipes/list/components/publish-modal.tsx | 6 +-
seatunnel-ui/src/views/data-pipes/list/index.tsx | 10 ++-
.../src/views/data-pipes/list/use-table.ts | 6 +-
12 files changed, 145 insertions(+), 57 deletions(-)
diff --git a/seatunnel-ui/src/components/monaco-editor/index.tsx b/seatunnel-ui/src/components/monaco-editor/index.tsx
index c60d6976f..a67dcb3b8 100644
--- a/seatunnel-ui/src/components/monaco-editor/index.tsx
+++ b/seatunnel-ui/src/components/monaco-editor/index.tsx
@@ -169,4 +169,4 @@ export default defineComponent({
/>
)
}
-})
\ No newline at end of file
+})
diff --git a/seatunnel-ui/src/components/monaco-editor/types.ts b/seatunnel-ui/src/components/monaco-editor/types.ts
index 69f920808..830c07aeb 100644
--- a/seatunnel-ui/src/components/monaco-editor/types.ts
+++ b/seatunnel-ui/src/components/monaco-editor/types.ts
@@ -19,4 +19,4 @@ import type { MaybeArray } from 'naive-ui/es/_utils'
type OnUpdateValue = <T extends string>(value: T) => void
type OnUpdateValueImpl = (value: string) => void
-export { MaybeArray, OnUpdateValue, OnUpdateValueImpl }
\ No newline at end of file
+export { MaybeArray, OnUpdateValue, OnUpdateValueImpl }
diff --git a/seatunnel-ui/src/locales/en_US/data-pipes.ts b/seatunnel-ui/src/locales/en_US/data-pipes.ts
index 076162b33..86adae682 100644
--- a/seatunnel-ui/src/locales/en_US/data-pipes.ts
+++ b/seatunnel-ui/src/locales/en_US/data-pipes.ts
@@ -57,5 +57,7 @@ export default {
execute_time: 'Execute Time',
data_pipes_delete_tips:
'Whether to delete the data Pipe，It cannot be restored after being deleted.',
- data_pipes_publish_tips: 'Whether to Publish the data pipe.'
+ data_pipes_publish_tips: 'Whether to Publish the data pipe.',
+ please_select_log: 'Please select log',
+ search: 'Search'
}
diff --git a/seatunnel-ui/src/views/data-pipes/create/index.tsx b/seatunnel-ui/src/views/data-pipes/create/index.tsx
index db3e51ff8..2dc2a6912 100644
--- a/seatunnel-ui/src/views/data-pipes/create/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/create/index.tsx
@@ -20,10 +20,8 @@ import { defineComponent } from 'vue'
const DataPipesCreate = defineComponent({
setup() {},
render() {
- return (
- <div></div>
- )
+ return <div></div>
}
})
-export default DataPipesCreate
\ No newline at end of file
+export default DataPipesCreate
diff --git a/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx b/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
index 9ad218296..ab276c4ee 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
@@ -16,7 +16,18 @@
*/
import { defineComponent, onMounted, toRefs } from 'vue'
-import { NGi, NGrid, NSpace, NTabs, NTabPane, NDataTable } from 'naive-ui'
+import {
+ NGi,
+ NGrid,
+ NSpace,
+ NTabs,
+ NTabPane,
+ NDataTable,
+ NLog,
+ NInput,
+ NButton,
+ NInputGroup
+} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { useDetailOverview } from './use-detail-overview'
@@ -39,46 +50,91 @@ const DetailOverview = defineComponent({
<NGi>{this.t('data_pipes.output_metrics')}</NGi>
</NGrid>
<NGrid x-gap='12' cols='4'>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}>
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.bytes_per_second')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.bytes_per_second')}
+ </span>
</NGi>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}>
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.record_per_second')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.record_per_second')}
+ </span>
</NGi>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}>
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.bytes_per_second')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.bytes_per_second')}
+ </span>
</NGi>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']} >
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.record_per_second')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.record_per_second')}
+ </span>
</NGi>
</NGrid>
<NGrid x-gap='12' cols='4'>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}>
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.total_bytes')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.total_bytes')}
+ </span>
</NGi>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}>
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.total_records')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.total_records')}
+ </span>
</NGi>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}>
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.total_bytes')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.total_bytes')}
+ </span>
</NGi>
- <NGi class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']} >
+ <NGi
+ class={['flex', 'justify-between', 'py-4', 'px-3', 'bg-gray-50']}
+ >
<span>1212</span>
- <span class='text-gray-400'>{this.t('data_pipes.total_records')}</span>
+ <span class='text-gray-400'>
+ {this.t('data_pipes.total_records')}
+ </span>
</NGi>
</NGrid>
<NTabs type='line' justify-content='space-evenly' class='mt-7'>
<NTabPane name='run-log' tab={this.t('data_pipes.run_log')}>
-
+ <NSpace vertical>
+ <NInputGroup>
+ <NInput placeholder={this.t('data_pipes.please_select_log')} />
+ <NButton ghost>{this.t('data_pipes.search')}</NButton>
+ </NInputGroup>
+ <NLog
+ rows={30}
+ log={'test'}
+ class={['py-5', 'px-3', 'bg-gray-50']}
+ />
+ </NSpace>
</NTabPane>
- <NTabPane name='historical-run-logs' tab={this.t('data_pipes.historical_run_logs')}>
+ <NTabPane
+ name='historical-run-logs'
+ tab={this.t('data_pipes.historical_run_logs')}
+ >
<NDataTable
loading={this.loading}
columns={this.columns}
@@ -91,4 +147,4 @@ const DetailOverview = defineComponent({
}
})
-export default DetailOverview
\ No newline at end of file
+export default DetailOverview
diff --git a/seatunnel-ui/src/views/data-pipes/detail/components/use-detail-overview.ts b/seatunnel-ui/src/views/data-pipes/detail/components/use-detail-overview.ts
index d89718acb..c9eba5315 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/components/use-detail-overview.ts
+++ b/seatunnel-ui/src/views/data-pipes/detail/components/use-detail-overview.ts
@@ -48,4 +48,4 @@ export function useDetailOverview() {
}
return { state, createColumns }
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/views/data-pipes/detail/index.tsx b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
index 49f7dda61..5f0907f24 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
@@ -16,7 +16,15 @@
*/
import { defineComponent } from 'vue'
-import { NSpace, NCard, NButton, NBreadcrumb, NBreadcrumbItem, NTabs, NTabPane } from 'naive-ui'
+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'
@@ -39,22 +47,34 @@ const DataPipesDetail = defineComponent({
<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>
+ 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-9'>
@@ -74,4 +94,4 @@ const DataPipesDetail = defineComponent({
}
})
-export default DataPipesDetail
\ No newline at end of file
+export default DataPipesDetail
diff --git a/seatunnel-ui/src/views/data-pipes/edite/index.tsx b/seatunnel-ui/src/views/data-pipes/edite/index.tsx
index c134dcee2..3d8c7d93c 100644
--- a/seatunnel-ui/src/views/data-pipes/edite/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/edite/index.tsx
@@ -20,10 +20,8 @@ import { defineComponent } from 'vue'
const DataPipesEdit = defineComponent({
setup() {},
render() {
- return (
- <div></div>
- )
+ return <div></div>
}
})
-export default DataPipesEdit
\ No newline at end of file
+export default DataPipesEdit
diff --git a/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx b/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
index 747017d53..f2355acef 100644
--- a/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
@@ -54,11 +54,13 @@ const DeleteModal = defineComponent({
onConfirm={this.handleConfirm}
>
{{
- default: () => <span>{this.t('data_pipes.data_pipes_delete_tips')}</span>
+ default: () => (
+ <span>{this.t('data_pipes.data_pipes_delete_tips')}</span>
+ )
}}
</Modal>
)
}
})
-export default DeleteModal
\ No newline at end of file
+export default DeleteModal
diff --git a/seatunnel-ui/src/views/data-pipes/list/components/publish-modal.tsx b/seatunnel-ui/src/views/data-pipes/list/components/publish-modal.tsx
index 5a2692af0..abfce10c5 100644
--- a/seatunnel-ui/src/views/data-pipes/list/components/publish-modal.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/components/publish-modal.tsx
@@ -54,11 +54,13 @@ const PublishModal = defineComponent({
onConfirm={this.handleConfirm}
>
{{
- default: () => <span>{this.t('data_pipes.data_pipes_publish_tips')}</span>
+ default: () => (
+ <span>{this.t('data_pipes.data_pipes_publish_tips')}</span>
+ )
}}
</Modal>
)
}
})
-export default PublishModal
\ No newline at end of file
+export default PublishModal
diff --git a/seatunnel-ui/src/views/data-pipes/list/index.tsx b/seatunnel-ui/src/views/data-pipes/list/index.tsx
index e9322c8bb..cca70930c 100644
--- a/seatunnel-ui/src/views/data-pipes/list/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/index.tsx
@@ -43,12 +43,18 @@ const DataPipesList = defineComponent({
state.showPublishModal = false
}
-
onMounted(() => {
createColumns(state)
})
- return { t, ...toRefs(state), handleCancelDeleteModal, handleConfirmDeleteModal, handleCancelPublishModal, handleConfirmPublishModal }
+ return {
+ t,
+ ...toRefs(state),
+ handleCancelDeleteModal,
+ handleConfirmDeleteModal,
+ handleCancelPublishModal,
+ handleConfirmPublishModal
+ }
},
render() {
return (
diff --git a/seatunnel-ui/src/views/data-pipes/list/use-table.ts b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
index 7e784627e..cfffaf51c 100644
--- a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
+++ b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
@@ -60,7 +60,11 @@ export function useTable() {
default: () => [
h(NButton, { text: true }, t('data_pipes.execute')),
h(NButton, { text: true }, t('data_pipes.edit')),
- h(NButton, { text: true, onClick: () => handlePublish(row) }, t('data_pipes.publish')),
+ h(
+ NButton,
+ { text: true, onClick: () => handlePublish(row) },
+ t('data_pipes.publish')
+ ),
h(
NButton,
{