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 ddc11dad4 [Feat][UI] Add the historical run logs in the data pipes
detail overview. (#2343)
ddc11dad4 is described below
commit ddc11dad47d208f47b012f673561569ac2ea309d
Author: songjianet <[email protected]>
AuthorDate: Tue Aug 2 20:31:40 2022 +0800
[Feat][UI] Add the historical run logs in the data pipes detail overview.
(#2343)
---
seatunnel-ui/src/locales/en_US/data-pipes.ts | 1 +
.../detail/components/detail-overview.tsx | 94 ++++++++++++++++++++++
.../detail/components/use-detail-overview.ts | 51 ++++++++++++
seatunnel-ui/src/views/data-pipes/detail/index.tsx | 7 +-
4 files changed, 151 insertions(+), 2 deletions(-)
diff --git a/seatunnel-ui/src/locales/en_US/data-pipes.ts
b/seatunnel-ui/src/locales/en_US/data-pipes.ts
index 33488a8c5..076162b33 100644
--- a/seatunnel-ui/src/locales/en_US/data-pipes.ts
+++ b/seatunnel-ui/src/locales/en_US/data-pipes.ts
@@ -54,6 +54,7 @@ export default {
total_records: 'Total Records',
output_metrics: 'Output Metrics',
end_time: 'End Time',
+ 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.'
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
new file mode 100644
index 000000000..9ad218296
--- /dev/null
+++ b/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 { defineComponent, onMounted, toRefs } from 'vue'
+import { NGi, NGrid, NSpace, NTabs, NTabPane, NDataTable } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useDetailOverview } from './use-detail-overview'
+
+const DetailOverview = defineComponent({
+ setup() {
+ const { t } = useI18n()
+ const { state, createColumns } = useDetailOverview()
+
+ onMounted(() => {
+ createColumns(state)
+ })
+
+ return { t, ...toRefs(state) }
+ },
+ render() {
+ return (
+ <NSpace vertical>
+ <NGrid x-gap='12' cols='2'>
+ <NGi>{this.t('data_pipes.input_metrics')}</NGi>
+ <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']}>
+ <span>1212</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']}>
+ <span>1212</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']}>
+ <span>1212</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']} >
+ <span>1212</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']}>
+ <span>1212</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']}>
+ <span>1212</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']}>
+ <span>1212</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']} >
+ <span>1212</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')}>
+
+ </NTabPane>
+ <NTabPane name='historical-run-logs'
tab={this.t('data_pipes.historical_run_logs')}>
+ <NDataTable
+ loading={this.loading}
+ columns={this.columns}
+ data={this.tableData}
+ />
+ </NTabPane>
+ </NTabs>
+ </NSpace>
+ )
+ }
+})
+
+export default DetailOverview
\ No newline at end of file
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
new file mode 100644
index 000000000..d89718acb
--- /dev/null
+++ b/seatunnel-ui/src/views/data-pipes/detail/components/use-detail-overview.ts
@@ -0,0 +1,51 @@
+/*
+ * 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 { reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export function useDetailOverview() {
+ const { t } = useI18n()
+ const state = reactive({
+ loading: ref(false),
+ columns: [],
+ tableData: [{ name: '' }]
+ })
+
+ const createColumns = (state: any) => {
+ state.columns = [
+ {
+ title: t('data_pipes.name'),
+ key: 'name'
+ },
+ {
+ title: t('data_pipes.execute_time'),
+ key: 'executeTime'
+ },
+ {
+ title: t('data_pipes.end_time'),
+ key: 'endTime'
+ },
+ {
+ title: t('data_pipes.state'),
+ key: 'state'
+ }
+ ]
+ }
+
+ 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 7fcd2740a..49f7dda61 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
@@ -20,6 +20,7 @@ import { NSpace, NCard, NButton, NBreadcrumb,
NBreadcrumbItem, NTabs, NTabPane }
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import MonacoEditor from '@/components/monaco-editor'
+import DetailOverview from './components/detail-overview'
import type { Router } from 'vue-router'
const DataPipesDetail = defineComponent({
@@ -56,9 +57,11 @@ const DataPipesDetail = defineComponent({
</NSpace>
}}
</NCard>
- <NTabs type='segment' class='mt-7'>
+ <NTabs type='segment' class='mt-9'>
<NTabPane name='overview' tab={this.t('data_pipes.overview')}>
- <NCard>overview</NCard>
+ <NCard>
+ <DetailOverview />
+ </NCard>
</NTabPane>
<NTabPane name='script' tab={this.t('data_pipes.script')}>
<NCard>
