You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by so...@apache.org on 2023/03/04 15:20:57 UTC
[incubator-seatunnel-web] branch main updated: [Feat][UI] Complete data pipes function. (#38)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel-web.git
The following commit(s) were added to refs/heads/main by this push:
new ce06affb [Feat][UI] Complete data pipes function. (#38)
ce06affb is described below
commit ce06affb928e8e877694285c10020d5da9487a3d
Author: songjianet <17...@qq.com>
AuthorDate: Sat Mar 4 23:20:53 2023 +0800
[Feat][UI] Complete data pipes function. (#38)
---
seatunnel-ui/src/App.tsx | 21 +++-
seatunnel-ui/src/locales/en_US/data-pipes.ts | 14 ---
seatunnel-ui/src/locales/en_US/setting.ts | 6 +-
seatunnel-ui/src/router/data-pipes.ts | 4 +-
seatunnel-ui/src/service/script/index.ts | 9 +-
seatunnel-ui/src/service/script/types.ts | 13 +--
seatunnel-ui/src/store/setting/index.ts | 9 +-
seatunnel-ui/src/store/setting/types.ts | 1 +
.../create/components/configuration-modal.tsx | 98 ----------------
.../create/components/use-configuration-modal.ts | 85 --------------
seatunnel-ui/src/views/data-pipes/create/index.tsx | 82 ++++---------
.../detail/components/detail-overview.tsx | 130 ---------------------
.../detail/components/use-detail-overview.ts | 51 --------
seatunnel-ui/src/views/data-pipes/detail/index.tsx | 57 ++++-----
seatunnel-ui/src/views/data-pipes/edit/index.tsx | 48 ++++++--
.../src/views/data-pipes/list/use-table.ts | 7 +-
seatunnel-ui/src/views/setting/index.tsx | 34 +++++-
17 files changed, 172 insertions(+), 497 deletions(-)
diff --git a/seatunnel-ui/src/App.tsx b/seatunnel-ui/src/App.tsx
index 4c3e60bc..5ed0f946 100644
--- a/seatunnel-ui/src/App.tsx
+++ b/seatunnel-ui/src/App.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, watch } from 'vue'
import {
NConfigProvider,
NMessageProvider,
@@ -27,6 +27,7 @@ import {
} from 'naive-ui'
import { useThemeStore } from '@/store/theme'
import { useLocalesStore } from '@/store/locale'
+import { useSettingStore } from '@/store/setting'
import themeList from '@/themes'
import type { GlobalThemeOverrides } from 'naive-ui'
@@ -37,20 +38,28 @@ const App = defineComponent({
themeStore.darkTheme ? darkTheme : undefined
)
const localesStore = useLocalesStore()
+ const themeOverrides: GlobalThemeOverrides =
+ themeList[currentTheme.value ? 'dark' : 'light']
+
+ watch(
+ () => useSettingStore().getFilletValue,
+ () => {
+ ;(themeOverrides.common as any).borderRadius =
+ useSettingStore().getFilletValue + 'px'
+ }
+ )
return {
currentTheme,
- localesStore
+ localesStore,
+ themeOverrides
}
},
render() {
- const themeOverrides: GlobalThemeOverrides =
- themeList[this.currentTheme ? 'dark' : 'light']
-
return (
<NConfigProvider
theme={this.currentTheme}
- theme-overrides={themeOverrides}
+ theme-overrides={this.themeOverrides}
date-locale={
String(this.localesStore.getLocales) === 'zh_CN' ? dateZhCN : dateEnUS
}
diff --git a/seatunnel-ui/src/locales/en_US/data-pipes.ts b/seatunnel-ui/src/locales/en_US/data-pipes.ts
index bea9dcc2..af381770 100644
--- a/seatunnel-ui/src/locales/en_US/data-pipes.ts
+++ b/seatunnel-ui/src/locales/en_US/data-pipes.ts
@@ -38,24 +38,10 @@ export default {
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',
- 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/locales/en_US/setting.ts b/seatunnel-ui/src/locales/en_US/setting.ts
index 6c6cfc9a..0e6ade7f 100644
--- a/seatunnel-ui/src/locales/en_US/setting.ts
+++ b/seatunnel-ui/src/locales/en_US/setting.ts
@@ -24,5 +24,9 @@ export default {
theme_setting: 'Theme Setting',
theme: 'Theme',
english: 'English',
- light: 'Light'
+ light: 'Light',
+ model: 'Model',
+ hue: 'Hue',
+ purple: 'Purple',
+ fillet: 'Fillet'
}
diff --git a/seatunnel-ui/src/router/data-pipes.ts b/seatunnel-ui/src/router/data-pipes.ts
index 365d7bc0..9a06ede6 100644
--- a/seatunnel-ui/src/router/data-pipes.ts
+++ b/seatunnel-ui/src/router/data-pipes.ts
@@ -39,7 +39,7 @@ export default {
}
},
{
- path: '/data-pipes/:dataPipeCode',
+ path: '/data-pipes/:dataPipeId',
name: 'data-pipes-detail',
component: components['data-pipes-detail'],
meta: {
@@ -47,7 +47,7 @@ export default {
}
},
{
- path: '/data-pipes/:dataPipeCode/edit',
+ path: '/data-pipes/:dataPipeId/edit',
name: 'data-pipes-edit',
component: components['data-pipes-edit'],
meta: {
diff --git a/seatunnel-ui/src/service/script/index.ts b/seatunnel-ui/src/service/script/index.ts
index abf8f628..e5b39c29 100644
--- a/seatunnel-ui/src/service/script/index.ts
+++ b/seatunnel-ui/src/service/script/index.ts
@@ -34,6 +34,13 @@ export function scriptAdd(data: ScriptAdd): any {
})
}
+export function scriptDetail(scriptId: number): any {
+ return axios({
+ url: `/script/${scriptId}`,
+ method: 'get'
+ })
+}
+
export function scriptDelete(scriptId: number): any {
return axios({
url: `/script/${scriptId}`,
@@ -48,7 +55,7 @@ export function scriptContent(scriptId: number): any {
})
}
-export function scriptContentUpdate(scriptId: number, content: string): any {
+export function scriptUpdate(scriptId: number, content: string): any {
return axios({
url: `/script/${scriptId}/content`,
method: 'put',
diff --git a/seatunnel-ui/src/service/script/types.ts b/seatunnel-ui/src/service/script/types.ts
index 7fb80bd7..8c72a321 100644
--- a/seatunnel-ui/src/service/script/types.ts
+++ b/seatunnel-ui/src/service/script/types.ts
@@ -24,22 +24,17 @@ interface ScriptList {
interface ScriptAdd {
name: string
- type: string
+ type: number
+ content: string
}
-interface ScriptDetail {
+interface ScriptDetail extends ScriptAdd {
id: number
- name: string
status: string
- type: number
creatorId: number
menderId: number
createTime: string
updateTime: string
}
-export {
- ScriptList,
- ScriptAdd,
- ScriptDetail
-}
+export { ScriptList, ScriptAdd, ScriptDetail }
diff --git a/seatunnel-ui/src/store/setting/index.ts b/seatunnel-ui/src/store/setting/index.ts
index 03cbe909..0e9f40bd 100644
--- a/seatunnel-ui/src/store/setting/index.ts
+++ b/seatunnel-ui/src/store/setting/index.ts
@@ -22,7 +22,8 @@ export const useSettingStore = defineStore({
id: 'setting',
state: (): SettingStore => ({
sequenceColumn: false,
- dataUniqueValue: false
+ dataUniqueValue: false,
+ fillet: 15
}),
persist: true,
getters: {
@@ -31,6 +32,9 @@ export const useSettingStore = defineStore({
},
getDataUniqueValue(): boolean {
return this.dataUniqueValue
+ },
+ getFilletValue(): number {
+ return this.fillet
}
},
actions: {
@@ -39,6 +43,9 @@ export const useSettingStore = defineStore({
},
setDataUniqueValue(status: boolean): void {
this.dataUniqueValue = status
+ },
+ setFilletValue(status: number): void {
+ this.fillet = status
}
}
})
diff --git a/seatunnel-ui/src/store/setting/types.ts b/seatunnel-ui/src/store/setting/types.ts
index d45fe2cf..bc34f910 100644
--- a/seatunnel-ui/src/store/setting/types.ts
+++ b/seatunnel-ui/src/store/setting/types.ts
@@ -18,6 +18,7 @@
interface SettingStore {
sequenceColumn: boolean
dataUniqueValue: boolean
+ fillet: number
}
export { SettingStore }
diff --git a/seatunnel-ui/src/views/data-pipes/create/components/configuration-modal.tsx b/seatunnel-ui/src/views/data-pipes/create/components/configuration-modal.tsx
deleted file mode 100644
index 0f558368..00000000
--- a/seatunnel-ui/src/views/data-pipes/create/components/configuration-modal.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * 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 { useI18n } from 'vue-i18n'
-import { NButton, NDataTable, NForm, NFormItem, NInput, NSpace } from 'naive-ui'
-import { useConfigurationModal } from './use-configuration-modal'
-import Modal from '@/components/modal'
-import type { PropType } from 'vue'
-
-const props = {
- showModal: {
- type: Boolean as PropType<boolean>,
- default: false
- },
- type: {
- type: String as PropType<'engine-parameter' | 'self-defined-parameter'>
- }
-}
-
-const ConfigurationModal = defineComponent({
- props,
- emits: ['cancelModal', 'confirmModal'],
- setup(props, ctx) {
- const { t } = useI18n()
- const { state, createColumns, handleValidate } = useConfigurationModal()
-
- const handleCancel = () => {
- ctx.emit('cancelModal', props.showModal)
- }
-
- const handleConfirm = () => {}
-
- const handleClickAdd = () => {
- handleValidate()
- }
-
- onMounted(() => {
- createColumns(state)
- })
-
- return { t, ...toRefs(state), handleCancel, handleConfirm, handleClickAdd }
- },
- render($props: any) {
- return (
- <Modal
- title={
- this.t(
- 'data_pipes.' +
- ($props.type === 'engine-parameter'
- ? 'engine_parameter'
- : 'self_defined_parameter')
- ) +
- ' ' +
- this.t('data_pipes.configuration')
- }
- show={this.showModal}
- onCancel={this.handleCancel}
- onConfirm={this.handleConfirm}
- >
- <NSpace vertical>
- <NForm model={this.model} rules={this.rules} ref='parameterForm'>
- <NFormItem label={this.t('data_pipes.key')} path='key'>
- <NInput v-model={[this.model.key, 'value']} clearable />
- </NFormItem>
- <NFormItem label={this.t('data_pipes.value')} path='value'>
- <NInput v-model={[this.model.value, 'value']} clearable />
- </NFormItem>
- <NButton class='w-full' onClick={this.handleClickAdd}>
- {this.t('data_pipes.add')}
- </NButton>
- </NForm>
- <NDataTable
- loading={this.loading}
- columns={this.columns}
- data={this.tableData}
- />
- </NSpace>
- </Modal>
- )
- }
-})
-
-export default ConfigurationModal
diff --git a/seatunnel-ui/src/views/data-pipes/create/components/use-configuration-modal.ts b/seatunnel-ui/src/views/data-pipes/create/components/use-configuration-modal.ts
deleted file mode 100644
index 5b28e29d..00000000
--- a/seatunnel-ui/src/views/data-pipes/create/components/use-configuration-modal.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * 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 { h, reactive, ref, SetupContext } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { NButton, NSpace } from 'naive-ui'
-
-export function useConfigurationModal() {
- const { t } = useI18n()
- const state = reactive({
- parameterForm: ref(),
- model: {
- key: ref(''),
- value: ref('')
- },
- rules: {
- key: {
- required: true,
- trigger: ['input', 'blur'],
- message: t('data_pipes.model_validate_tips')
- },
- value: {
- required: true,
- trigger: ['input', 'blur'],
- message: t('data_pipes.model_validate_tips')
- }
- },
- loading: ref(false),
- columns: [],
- tableData: [{ key: 'key1', value: 'value1' }]
- })
-
- const createColumns = (state: any) => {
- state.columns = [
- {
- title: t('data_pipes.key'),
- key: 'key'
- },
- {
- title: t('data_pipes.value'),
- key: 'value'
- },
- {
- title: t('data_pipes.operation'),
- key: 'operation',
- render: (row: any) =>
- h(
- NButton,
- { text: true, onClick: () => handleDelete(row) },
- t('user_manage.delete')
- )
- }
- ]
- }
-
- const handleValidate = () => {
- state.parameterForm.validate((errors: any) => {
- if (!errors) {
- state.tableData.push({ key: state.model.key, value: state.model.value })
- state.model.key = ''
- state.model.value = ''
- } else {
- return
- }
- })
- }
-
- const handleDelete = (row: any) => {}
-
- return { state, createColumns, handleValidate }
-}
diff --git a/seatunnel-ui/src/views/data-pipes/create/index.tsx b/seatunnel-ui/src/views/data-pipes/create/index.tsx
index de3a9061..2699f08a 100644
--- a/seatunnel-ui/src/views/data-pipes/create/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/create/index.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { defineComponent, ref } from 'vue'
+import { defineComponent, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import {
@@ -26,52 +26,38 @@ import {
NIcon,
NInput,
NSpace,
- NTooltip,
- NDropdown
+ NTooltip
} from 'naive-ui'
import { BulbOutlined } from '@vicons/antd'
+import { scriptAdd } from '@/service/script'
import MonacoEditor from '@/components/monaco-editor'
-import Log from '@/views/data-pipes/components/log'
-import ConfigurationModal from './components/configuration-modal'
import type { Router } from 'vue-router'
-import type { Ref } from 'vue'
const DataPipesCreate = defineComponent({
setup() {
const { t } = useI18n()
const router: Router = useRouter()
- const showConfigurationModal: Ref<boolean> = ref(false)
- const configurationType: Ref<
- 'engine-parameter' | 'self-defined-parameter'
- > = ref('engine-parameter')
+ const variables = reactive({
+ name: '',
+ type: 0,
+ content: ''
+ })
const handleClickDataPipes = () => {
router.push({ path: '/data-pipes/list' })
}
- const handleSelectConfiguration = (
- key: 'engine-parameter' | 'self-defined-parameter'
- ) => {
- configurationType.value = key
- showConfigurationModal.value = true
- }
-
- const handleCancelConfigurationModal = () => {
- showConfigurationModal.value = false
- }
-
- const handleConfirmConfigurationModal = () => {
- showConfigurationModal.value = false
+ const handleAdd = () => {
+ scriptAdd(variables).then(() => {
+ handleClickDataPipes()
+ })
}
return {
t,
- showConfigurationModal,
- configurationType,
+ ...toRefs(variables),
handleClickDataPipes,
- handleSelectConfiguration,
- handleCancelConfigurationModal,
- handleConfirmConfigurationModal
+ handleAdd
}
},
render() {
@@ -93,8 +79,10 @@ const DataPipesCreate = defineComponent({
),
'header-extra': () => (
<NSpace>
- <NButton secondary>{this.t('data_pipes.cancel')}</NButton>
- <NButton secondary type='primary'>
+ <NButton secondary onClick={this.handleClickDataPipes}>
+ {this.t('data_pipes.cancel')}
+ </NButton>
+ <NButton secondary type='primary' onClick={this.handleAdd}>
{this.t('data_pipes.save')}
</NButton>
</NSpace>
@@ -110,6 +98,7 @@ const DataPipesCreate = defineComponent({
maxlength='100'
showCount
style={{ width: '600px' }}
+ v-model={[this.name, 'value']}
/>
<NTooltip placement='right' trigger='hover'>
{{
@@ -125,39 +114,8 @@ const DataPipesCreate = defineComponent({
</NSpace>
</NCard>
<NCard>
- <NSpace vertical>
- <NSpace justify='end'>
- <NDropdown
- trigger='click'
- options={[
- {
- label: this.t('data_pipes.engine_parameter'),
- key: 'engine-parameter'
- },
- {
- label: this.t('data_pipes.self_defined_parameter'),
- key: 'self-defined-parameter'
- }
- ]}
- onSelect={this.handleSelectConfiguration}
- >
- <NButton secondary>
- {this.t('data_pipes.configuration')}
- </NButton>
- </NDropdown>
- </NSpace>
- <MonacoEditor />
- </NSpace>
- </NCard>
- <NCard>
- <Log />
+ <MonacoEditor v-model={[this.content, 'value']} />
</NCard>
- <ConfigurationModal
- type={this.configurationType}
- showModal={this.showConfigurationModal}
- onCancelModal={this.handleCancelConfigurationModal}
- onConfirmModal={this.handleConfirmConfigurationModal}
- />
</NSpace>
)
}
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
deleted file mode 100644
index 0151f77d..00000000
--- a/seatunnel-ui/src/views/data-pipes/detail/components/detail-overview.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * 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'
-import Log from '@/views/data-pipes/components/log'
-
-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')}>
- <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
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
deleted file mode 100644
index c9eba531..00000000
--- a/seatunnel-ui/src/views/data-pipes/detail/components/use-detail-overview.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * 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 }
-}
diff --git a/seatunnel-ui/src/views/data-pipes/detail/index.tsx b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
index cf01bb73..aa34cfdf 100644
--- a/seatunnel-ui/src/views/data-pipes/detail/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/detail/index.tsx
@@ -15,31 +15,42 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
-import {
- NSpace,
- NCard,
- NBreadcrumb,
- NBreadcrumbItem,
- NTabs,
- NTabPane
-} from 'naive-ui'
+import { defineComponent, onMounted, reactive, toRefs } from 'vue'
+import { NSpace, NCard, NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { scriptDetail } from '@/service/script'
import MonacoEditor from '@/components/monaco-editor'
-import DetailOverview from './components/detail-overview'
-import type { Router } from 'vue-router'
+import type { Router, RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ResponseBasic } from '@/service/types'
+import type { ScriptDetail } from '@/service/script/types'
const DataPipesDetail = defineComponent({
setup() {
const { t } = useI18n()
const router: Router = useRouter()
+ const route: RouteLocationNormalizedLoaded = useRoute()
+ const variables = reactive({
+ name: '',
+ type: 0,
+ content: ''
+ })
const handleClickDataPipes = () => {
router.push({ path: '/data-pipes/list' })
}
- return { t, handleClickDataPipes }
+ onMounted(() => {
+ scriptDetail(Number(route.params.dataPipeId)).then(
+ (res: ResponseBasic<ScriptDetail>) => {
+ variables.name = res.data.name
+ variables.type = res.data.type
+ variables.content = res.data.content
+ }
+ )
+ })
+
+ return { t, ...toRefs(variables), handleClickDataPipes }
},
render() {
return (
@@ -52,24 +63,18 @@ const DataPipesDetail = defineComponent({
<NBreadcrumbItem onClick={this.handleClickDataPipes}>
{this.t('data_pipes.data_pipes')}
</NBreadcrumbItem>
- <NBreadcrumbItem>user-order-tables-10</NBreadcrumbItem>
+ <NBreadcrumbItem>{this.name}</NBreadcrumbItem>
</NBreadcrumb>
</NSpace>
)
}}
</NCard>
- <NTabs type='segment' class='mt-9'>
- <NTabPane name='overview' tab={this.t('data_pipes.overview')}>
- <NCard>
- <DetailOverview />
- </NCard>
- </NTabPane>
- <NTabPane name='script' tab={this.t('data_pipes.script')}>
- <NCard>
- <MonacoEditor />
- </NCard>
- </NTabPane>
- </NTabs>
+ <NCard>
+ <MonacoEditor
+ v-model={[this.content, 'value']}
+ options={{ readOnly: true }}
+ />
+ </NCard>
</NSpace>
)
}
diff --git a/seatunnel-ui/src/views/data-pipes/edit/index.tsx b/seatunnel-ui/src/views/data-pipes/edit/index.tsx
index d5f9111f..7a5564f7 100644
--- a/seatunnel-ui/src/views/data-pipes/edit/index.tsx
+++ b/seatunnel-ui/src/views/data-pipes/edit/index.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import {
NBreadcrumb,
NBreadcrumbItem,
@@ -27,21 +27,48 @@ import {
NTooltip
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
import { BulbOutlined } from '@vicons/antd'
+import { scriptDetail, scriptUpdate } from '@/service/script'
import MonacoEditor from '@/components/monaco-editor'
-import type { Router } from 'vue-router'
+import type { Router, RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ResponseBasic } from '@/service/types'
+import type { ScriptDetail } from '@/service/script/types'
const DataPipesEdit = defineComponent({
setup() {
const { t } = useI18n()
const router: Router = useRouter()
+ const route: RouteLocationNormalizedLoaded = useRoute()
+ const variables = reactive({
+ name: '',
+ type: 0,
+ content: ''
+ })
const handleClickDataPipes = () => {
router.push({ path: '/data-pipes/list' })
}
- return { t, handleClickDataPipes }
+ const handleAdd = () => {
+ scriptUpdate(Number(route.params.dataPipeId), variables.content).then(
+ () => {
+ handleClickDataPipes()
+ }
+ )
+ }
+
+ onMounted(() => {
+ scriptDetail(Number(route.params.dataPipeId)).then(
+ (res: ResponseBasic<ScriptDetail>) => {
+ variables.name = res.data.name
+ variables.type = res.data.type
+ variables.content = res.data.content
+ }
+ )
+ })
+
+ return { t, ...toRefs(variables), handleClickDataPipes, handleAdd }
},
render() {
return (
@@ -54,14 +81,16 @@ const DataPipesEdit = defineComponent({
<NBreadcrumbItem onClick={this.handleClickDataPipes}>
{this.t('data_pipes.data_pipes')}
</NBreadcrumbItem>
- <NBreadcrumbItem>{this.t('data_pipes.edit')}</NBreadcrumbItem>
+ <NBreadcrumbItem>{this.name}</NBreadcrumbItem>
</NBreadcrumb>
</NSpace>
),
'header-extra': () => (
<NSpace>
- <NButton secondary>{this.t('data_pipes.cancel')}</NButton>
- <NButton secondary type='primary'>
+ <NButton secondary onClick={this.handleClickDataPipes}>
+ {this.t('data_pipes.cancel')}
+ </NButton>
+ <NButton secondary type='primary' onClick={this.handleAdd}>
{this.t('data_pipes.save')}
</NButton>
</NSpace>
@@ -73,10 +102,11 @@ const DataPipesEdit = defineComponent({
<span>{this.t('data_pipes.name')}</span>
<NSpace align='center'>
<NInput
- clearable
+ disabled
maxlength='100'
showCount
style={{ width: '600px' }}
+ v-model={[this.name, 'value']}
/>
<NTooltip placement='right' trigger='hover'>
{{
@@ -92,7 +122,7 @@ const DataPipesEdit = defineComponent({
</NSpace>
</NCard>
<NCard>
- <MonacoEditor />
+ <MonacoEditor v-model={[this.content, 'value']} />
</NCard>
</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 ae52e1ae..32a3299f 100644
--- a/seatunnel-ui/src/views/data-pipes/list/use-table.ts
+++ b/seatunnel-ui/src/views/data-pipes/list/use-table.ts
@@ -101,7 +101,12 @@ export function useTable() {
NButton,
{
text: true,
- disabled: row.status === 'published'
+ disabled: row.status === 'published',
+ onClick: () => {
+ router.push({
+ path: `/data-pipes/${row.id}/edit`
+ })
+ }
},
t('data_pipes.edit')
),
diff --git a/seatunnel-ui/src/views/setting/index.tsx b/seatunnel-ui/src/views/setting/index.tsx
index e7daa044..dc116c3e 100644
--- a/seatunnel-ui/src/views/setting/index.tsx
+++ b/seatunnel-ui/src/views/setting/index.tsx
@@ -79,7 +79,7 @@ const Setting = defineComponent({
<NList>
<NListItem>
<NSpace justify='space-between' align='center'>
- <span>{this.t('setting.theme')}</span>
+ <span>{this.t('setting.model')}</span>
<div class='w-56'>
<NSelect
value={'light'}
@@ -90,6 +90,38 @@ const Setting = defineComponent({
</div>
</NSpace>
</NListItem>
+ <NListItem>
+ <NSpace justify='space-between' align='center'>
+ <span>{this.t('setting.hue')}</span>
+ <div class='w-56'>
+ <NSelect
+ value={'purple'}
+ options={[
+ { value: 'purple', label: this.t('setting.purple') }
+ ]}
+ />
+ </div>
+ </NSpace>
+ </NListItem>
+ <NListItem>
+ <NSpace justify='space-between' align='center'>
+ <span>{this.t('setting.fillet')}</span>
+ <div class='w-56'>
+ <NSelect
+ value={useSettingStore().getFilletValue}
+ onUpdateValue={(s) => {
+ useSettingStore().setFilletValue(s)
+ }}
+ options={[
+ { value: 5, label: '5px' },
+ { value: 10, label: '10px' },
+ { value: 15, label: '15px' },
+ { value: 20, label: '20px' }
+ ]}
+ />
+ </div>
+ </NSpace>
+ </NListItem>
</NList>
</NCard>
</NSpace>