You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by so...@apache.org on 2022/08/15 13:05:54 UTC
[dolphinscheduler] branch dev updated: [Refactor][UI] Refactor task definition batch stream using NSpace component. (#11485)
This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 4d063192cd [Refactor][UI] Refactor task definition batch stream using NSpace component. (#11485)
4d063192cd is described below
commit 4d063192cda340e34575b211d0f7650b796ce42f
Author: songjianet <17...@qq.com>
AuthorDate: Mon Aug 15 21:05:42 2022 +0800
[Refactor][UI] Refactor task definition batch stream using NSpace component. (#11485)
* [Refactor][UI] Refactor task definition batch stream using NSpace component.
* [Refactor][UI] Refactor task definition batch stream using NSpace component.
* [Refactor][UI] Refactor task definition batch stream using NSpace component.
---
.../views/projects/task/definition/batch-task.tsx | 72 ++++++++++------------
.../task/definition/components/start-modal.tsx | 5 +-
.../projects/task/definition/index.module.scss | 44 -------------
.../views/projects/task/definition/stream-task.tsx | 51 +++++++--------
4 files changed, 57 insertions(+), 115 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx b/dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
index 4e58bd19cf..86f9f21d64 100644
--- a/dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx
@@ -25,7 +25,6 @@ import {
import { useRoute } from 'vue-router'
import {
NButton,
- NCard,
NDataTable,
NIcon,
NInput,
@@ -42,7 +41,6 @@ import Card from '@/components/card'
import VersionModal from './components/version-modal'
import MoveModal from './components/move-modal'
import TaskModal from '@/views/projects/task/components/node/detail-modal'
-import styles from './index.module.scss'
import type { INodeData } from './types'
const BatchTaskDefinition = defineComponent({
@@ -134,15 +132,13 @@ const BatchTaskDefinition = defineComponent({
} = this
return (
- <>
- <NCard>
- <div class={styles['search-card']}>
- <div>
- <NButton size='small' type='primary' onClick={onCreate}>
- {t('project.task.create_task')}
- </NButton>
- </div>
- <NSpace justify='end'>
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='space-between'>
+ <NButton size='small' type='primary' onClick={onCreate}>
+ {t('project.task.create_task')}
+ </NButton>
+ <NSpace>
<NInput
allowInput={this.trim}
size='small'
@@ -168,36 +164,34 @@ const BatchTaskDefinition = defineComponent({
clearable
/>
<NButton size='small' type='primary' onClick={onSearch}>
- {{
- icon: () => (
- <NIcon>
- <SearchOutlined />
- </NIcon>
- )
- }}
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
</NButton>
</NSpace>
- </div>
- </NCard>
- <Card class={styles['table-card']}>
- <NDataTable
- loading={loadingRef}
- columns={this.columns}
- data={this.tableData}
- scrollX={this.tableWidth}
- />
- <div class={styles.pagination}>
- <NPagination
- v-model:page={this.page}
- v-model:page-size={this.pageSize}
- page-count={this.totalPage}
- show-size-picker
- page-sizes={[10, 30, 50]}
- show-quick-jumper
- onUpdatePage={requestData}
- onUpdatePageSize={onUpdatePageSize}
+ </NSpace>
+ </Card>
+ <Card title={t('project.task.batch_task')}>
+ <NSpace vertical>
+ <NDataTable
+ loading={loadingRef}
+ columns={this.columns}
+ data={this.tableData}
+ scrollX={this.tableWidth}
/>
- </div>
+ <NSpace justify='center'>
+ <NPagination
+ v-model:page={this.page}
+ v-model:page-size={this.pageSize}
+ page-count={this.totalPage}
+ show-size-picker
+ page-sizes={[10, 30, 50]}
+ show-quick-jumper
+ onUpdatePage={requestData}
+ onUpdatePageSize={onUpdatePageSize}
+ />
+ </NSpace>
+ </NSpace>
</Card>
<VersionModal
show={this.showVersionModalRef}
@@ -221,7 +215,7 @@ const BatchTaskDefinition = defineComponent({
readonly={this.taskReadonly}
saving={this.taskSaving}
/>
- </>
+ </NSpace>
)
}
})
diff --git a/dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx b/dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
index 8e3a1cd060..b8ae6db145 100644
--- a/dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/components/start-modal.tsx
@@ -37,7 +37,6 @@ import {
NSwitch
} from 'naive-ui'
import { DeleteOutlined, PlusCircleOutlined } from '@vicons/antd'
-import styles from '../index.module.scss'
const props = {
row: {
@@ -161,7 +160,7 @@ export default defineComponent({
>
<NForm ref='startFormRef' model={this.startForm}>
<NFormItem label={t('project.task.task_name')} path='task_name'>
- <div class={styles.formItem} title={this.row.taskName}>
+ <div title={this.row.taskName}>
{this.row.taskName}
</div>
</NFormItem>
@@ -217,7 +216,7 @@ export default defineComponent({
) : (
<NSpace vertical>
{this.startParamsList.map((item, index) => (
- <NSpace class={styles.startup} key={Date.now() + index}>
+ <NSpace key={Date.now() + index}>
<NInput
allowInput={this.trim}
pair
diff --git a/dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss b/dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss
deleted file mode 100644
index 756290d163..0000000000
--- a/dolphinscheduler-ui/src/views/projects/task/definition/index.module.scss
+++ /dev/null
@@ -1,44 +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.
- */
-
-.search-card {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- .box {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- width: 300px;
-
- button,
- input {
- margin-left: 10px;
- }
- }
-}
-
-.table-card {
- margin-top: 8px;
-
- .pagination {
- margin-top: 20px;
- display: flex;
- justify-content: center;
- }
-}
diff --git a/dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx b/dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx
index 2fce2a9138..1f6c5d17b8 100644
--- a/dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx
+++ b/dolphinscheduler-ui/src/views/projects/task/definition/stream-task.tsx
@@ -27,11 +27,11 @@ import {
NPagination
} from 'naive-ui'
import { useRoute } from 'vue-router'
-import Card from '@/components/card'
-import TaskModal from '@/views/projects/task/components/node/detail-modal'
import { useTable } from './use-stream-table'
import { useTask } from './use-task'
import StartModal from './components/start-modal'
+import Card from '@/components/card'
+import TaskModal from '@/views/projects/task/components/node/detail-modal'
import type { INodeData } from './types'
const StreamTaskDefinition = defineComponent({
@@ -85,33 +85,26 @@ const StreamTaskDefinition = defineComponent({
return () => (
<NSpace vertical>
<Card>
- <NSpace justify='space-between'>
- <NSpace />
- <NSpace>
- <NInput
- allowInput={trim}
- size='small'
- clearable
- v-model={[variables.searchTaskName, 'value']}
- placeholder={t('project.task.task_name')}
- />
- <NInput
- allowInput={trim}
- size='small'
- clearable
- v-model={[variables.searchWorkflowName, 'value']}
- placeholder={t('project.task.workflow_name')}
- />
- <NButton size='small' type='primary' onClick={onSearch}>
- {{
- icon: () => (
- <NIcon>
- <SearchOutlined />
- </NIcon>
- )
- }}
- </NButton>
- </NSpace>
+ <NSpace justify='end'>
+ <NInput
+ allowInput={trim}
+ size='small'
+ clearable
+ v-model={[variables.searchTaskName, 'value']}
+ placeholder={t('project.task.task_name')}
+ />
+ <NInput
+ allowInput={trim}
+ size='small'
+ clearable
+ v-model={[variables.searchWorkflowName, 'value']}
+ placeholder={t('project.task.workflow_name')}
+ />
+ <NButton size='small' type='primary' onClick={onSearch}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
</NSpace>
</Card>
<Card>