You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by wa...@apache.org on 2022/08/08 04:55:28 UTC
[dolphinscheduler] branch dev updated: [Refactor][UI] Refactor task group queue using NSpace component. (#11341)
This is an automated email from the ASF dual-hosted git repository.
wanggenhua 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 cfb5918e74 [Refactor][UI] Refactor task group queue using NSpace component. (#11341)
cfb5918e74 is described below
commit cfb5918e7492b209db118d528878663ff808ca8e
Author: songjianet <17...@qq.com>
AuthorDate: Mon Aug 8 12:55:17 2022 +0800
[Refactor][UI] Refactor task group queue using NSpace component. (#11341)
* [Refactor][UI] Refactor task group queue using NSpace component.
* [Refactor][UI] Refactor token manage using NSpace component.
---
.../views/projects/workflow/instance/use-table.ts | 1 -
.../resource/task-group/queue/index.module.scss | 44 ----------
.../src/views/resource/task-group/queue/index.tsx | 93 ++++++++++------------
3 files changed, 44 insertions(+), 94 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
index 611d52d14a..c2d8ed1243 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/use-table.ts
@@ -30,7 +30,6 @@ import {
import { execute } from '@/service/modules/executors'
import TableAction from './components/table-action'
import { renderTableTime, runningType } from '@/common/common'
-import styles from './index.module.scss'
import { renderStateCell } from '../../task/instance/use-table'
import {
COLUMN_WIDTH_CONFIG,
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.module.scss b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.module.scss
deleted file mode 100644
index 202f1e2d7e..0000000000
--- a/dolphinscheduler-ui/src/views/resource/task-group/queue/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.
- */
-
-.toolbar {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 0 0 0 0;
-}
-
-.table-card {
- margin-top: 2px;
-
- .table-action {
- display: flex;
- justify-content: center;
- align-items: center;
- button {
- margin: 0 2px 0 0;
- }
- div {
- margin: 0 2px 0 0;
- }
- }
- .pagination {
- margin-top: 20px;
- display: flex;
- justify-content: center;
- }
-}
diff --git a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
index 622a0f8e7b..5891a446f1 100644
--- a/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/task-group/queue/index.tsx
@@ -15,27 +15,27 @@
* limitations under the License.
*/
-import { ref, defineComponent, toRefs, reactive, onMounted, Ref, getCurrentInstance } from 'vue'
+import { ref, defineComponent, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
import {
NButton,
NIcon,
NInput,
- NCard,
NDataTable,
NPagination,
NSelect,
NSpace
} from 'naive-ui'
-import Card from '@/components/card'
import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
-import styles from './index.module.scss'
import { useTable } from './use-table'
-import FormModal from '@/views/resource/task-group/queue/components/form-modal'
import { queryTaskGroupListPaging } from '@/service/modules/task-group'
import { TaskGroupRes } from '@/service/modules/task-group/types'
import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
-import { Router, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+import FormModal from '@/views/resource/task-group/queue/components/form-modal'
+import Card from '@/components/card'
+import type { Ref } from 'vue'
+import type { Router } from 'vue-router'
const taskGroupQueue = defineComponent({
name: 'taskGroupQueue',
@@ -158,45 +158,40 @@ const taskGroupQueue = defineComponent({
const { columns } = useTable(updatePriority, resetTableData)
return (
- <div>
- <NCard>
- <div class={styles.toolbar}>
- <NSpace>
- <NSelect
- size='small'
- options={taskGroupOptions}
- clearable
- style={{ width: '180px' }}
- v-model:value={this.searchParamRef.groupId}
- placeholder={t('resource.task_group_queue.task_group_name')}
- />
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.searchParamRef.processName, 'value']}
- placeholder={t(
- 'resource.task_group_queue.workflow_instance_name'
- )}
- ></NInput>
- <NInput
- allowInput={this.trim}
- size='small'
- v-model={[this.searchParamRef.instanceName, 'value']}
- placeholder={t('resource.task_group_queue.task_instance_name')}
- ></NInput>
- <NButton size='small' type='primary' onClick={onSearch}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
- </NButton>
- </NSpace>
- </div>
- </NCard>
- <Card
- class={styles['table-card']}
- title={t('resource.task_group_queue.queue')}
- >
- <div>
+ <NSpace vertical>
+ <Card>
+ <NSpace justify='end'>
+ <NSelect
+ size='small'
+ options={taskGroupOptions}
+ clearable
+ style={{ width: '180px' }}
+ v-model:value={this.searchParamRef.groupId}
+ placeholder={t('resource.task_group_queue.task_group_name')}
+ />
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ v-model={[this.searchParamRef.processName, 'value']}
+ placeholder={t(
+ 'resource.task_group_queue.workflow_instance_name'
+ )}
+ ></NInput>
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ v-model={[this.searchParamRef.instanceName, 'value']}
+ placeholder={t('resource.task_group_queue.task_instance_name')}
+ ></NInput>
+ <NButton size='small' type='primary' onClick={onSearch}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
+ </NSpace>
+ </Card>
+ <Card title={t('resource.task_group_queue.queue')}>
+ <NSpace vertical>
<NDataTable
loading={loadingRef}
columns={columns}
@@ -205,7 +200,7 @@ const taskGroupQueue = defineComponent({
striped
scrollX={this.tableWidth}
/>
- <div class={styles.pagination}>
+ <NSpace justify='center'>
<NPagination
v-model:page={this.page}
v-model:page-size={this.pageSize}
@@ -216,8 +211,8 @@ const taskGroupQueue = defineComponent({
onUpdatePage={resetTableData}
onUpdatePageSize={onUpdatePageSize}
/>
- </div>
- </div>
+ </NSpace>
+ </NSpace>
</Card>
{showModalRef && (
<FormModal
@@ -227,7 +222,7 @@ const taskGroupQueue = defineComponent({
data={updateItemData}
/>
)}
- </div>
+ </NSpace>
)
}
})