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 c8e4abf2f [Feat][UI] Add the delete modal in the data pipes. (#2319)
c8e4abf2f is described below
commit c8e4abf2ffd1fbe902dbf13c1f8ae98b36592cd2
Author: songjianet <[email protected]>
AuthorDate: Mon Aug 1 17:24:24 2022 +0800
[Feat][UI] Add the delete modal in the data pipes. (#2319)
---
seatunnel-ui/src/locales/en_US/data-pipes.ts | 28 +++++++++-
.../data-pipes/list/components/delete-modal.tsx | 64 ++++++++++++++++++++++
seatunnel-ui/src/views/data-pipes/list/index.tsx | 19 ++++++-
.../src/views/data-pipes/list/use-table.ts | 15 +++--
4 files changed, 118 insertions(+), 8 deletions(-)
diff --git a/seatunnel-ui/src/locales/en_US/data-pipes.ts
b/seatunnel-ui/src/locales/en_US/data-pipes.ts
index b1109701b..94567e1bd 100644
--- a/seatunnel-ui/src/locales/en_US/data-pipes.ts
+++ b/seatunnel-ui/src/locales/en_US/data-pipes.ts
@@ -29,7 +29,31 @@ export default {
killed: 'Killed',
un_start: 'Un Start',
execute: 'Execute',
- edite: 'Edite',
+ edit: 'Edit',
publish: 'Publish',
- delete: 'Delete'
+ delete: 'Delete',
+ save: 'Save',
+ cancel: 'Cancel',
+ script: 'Script',
+ kill: 'Kill',
+ stop: 'Stop',
+ configuration: 'Configuration',
+ run_log: 'Run Log',
+ add: 'Add',
+ key: 'Key',
+ value: 'Value',
+ engine_parameter: 'Engine Parameter',
+ self_defined_parameter: 'Self Defined Parameter',
+ name_tips: 'Required fields,number, letter case, 100 characters',
+ overview: 'Overview',
+ input_metrics: 'Input Metrics',
+ historical_run_logs: 'Historical Run Logs',
+ bytes_per_second: 'Bytes Per Second',
+ total_bytes: 'Total Bytes',
+ record_per_second: 'Record Per Second',
+ total_records: 'Total Records',
+ output_metrics: 'Output Metrics',
+ end_time: 'End Time',
+ data_pipes_delete_tips:
+ 'Whether to delete the data Pipe，It cannot be restored after being
deleted.'
}
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
new file mode 100644
index 000000000..c98ab3ff5
--- /dev/null
+++ b/seatunnel-ui/src/views/data-pipes/list/components/delete-modal.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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 } from 'vue'
+import type { PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Modal from '@/components/modal'
+
+const props = {
+ showModal: {
+ type: Boolean as PropType<boolean>,
+ default: false
+ },
+ row: {
+ type: Object as PropType<any>,
+ default: {}
+ }
+}
+
+const DeleteModal = defineComponent({
+ props,
+ emits: ['cancelModal', 'confirmModal'],
+ setup(props, ctx) {
+ const { t } = useI18n()
+
+ const handleCancel = () => {
+ ctx.emit('cancelModal', props.showModal)
+ }
+
+ const handleConfirm = () => {}
+
+ return { t, handleCancel, handleConfirm }
+ },
+ render() {
+ return (
+ <Modal
+ title={this.t('data_pipes.delete')}
+ show={this.showModal}
+ onCancel={this.handleCancel}
+ onConfirm={this.handleConfirm}
+ >
+ {{
+ default: () =>
<span>{this.t('data_pipes.data_pipes_delete_tips')}</span>
+ }}
+ </Modal>
+ )
+ }
+})
+
+export default DeleteModal
\ No newline at end of file
diff --git a/seatunnel-ui/src/views/data-pipes/list/index.tsx
b/seatunnel-ui/src/views/data-pipes/list/index.tsx
index 2c0b4a957..951fa4153 100644
--- a/seatunnel-ui/src/views/data-pipes/list/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/list/index.tsx
@@ -19,17 +19,26 @@ import { defineComponent, onMounted, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import { NButton, NCard, NDataTable, NPagination, NSpace } from 'naive-ui'
+import DeleteModal from './components/delete-modal'
const DataPipesList = defineComponent({
setup() {
const { t } = useI18n()
const { state, createColumns } = useTable()
+ const handleCancelDeleteModal = () => {
+ state.showDeleteModal = false
+ }
+
+ const handleConfirmDeleteModal = () => {
+ state.showDeleteModal = false
+ }
+
onMounted(() => {
createColumns(state)
})
- return { t, ...toRefs(state) }
+ return { t, ...toRefs(state), handleCancelDeleteModal,
handleConfirmDeleteModal }
},
render() {
return (
@@ -44,7 +53,7 @@ const DataPipesList = defineComponent({
<NCard>
<NSpace vertical>
<NDataTable
- loading={this.loadingRef}
+ loading={this.loading}
columns={this.columns}
data={this.tableData}
/>
@@ -60,6 +69,12 @@ const DataPipesList = defineComponent({
</NSpace>
</NSpace>
</NCard>
+ <DeleteModal
+ showModal={this.showDeleteModal}
+ row={this.row}
+ onCancelModal={this.handleCancelDeleteModal}
+ onConfirmModal={this.handleConfirmDeleteModal}
+ />
</NSpace>
)
}
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 8f7c2b2c0..1f95fd15a 100644
--- a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
+++ b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
@@ -29,7 +29,8 @@ export function useTable() {
pageSize: ref(10),
totalPage: ref(1),
row: {},
- loadingRef: ref(false)
+ loading: ref(false),
+ showDeleteModal: ref(false)
})
const createColumns = (state: any) => {
@@ -53,11 +54,11 @@ export function useTable() {
{
title: t('data_pipes.operation'),
key: 'operation',
- render: () =>
+ render: (row: any) =>
h(NSpace, null, {
default: () => [
h(NButton, { text: true }, t('data_pipes.execute')),
- h(NButton, { text: true }, t('data_pipes.edite')),
+ h(NButton, { text: true }, t('data_pipes.edit')),
h(NButton, { text: true }, t('data_pipes.publish')),
h(
NButton,
@@ -68,7 +69,8 @@ export function useTable() {
h(
NDropdown,
{
- options: [{ key: 'delete', label: t('data_pipes.delete') }]
+ options: [{ key: 'delete', label: t('data_pipes.delete')
}],
+ onClick: () => handleDelete(row)
},
h(NIcon, {}, h(EllipsisOutlined))
)
@@ -79,5 +81,10 @@ export function useTable() {
]
}
+ const handleDelete = (row: any) => {
+ state.showDeleteModal = true
+ state.row = row
+ }
+
return { state, createColumns }
}
