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/12 06:26:28 UTC
[dolphinscheduler] branch dev updated: [Refactor][UI] Refactor workflow instance using NSpace component. (#11446)
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 32361f4fef [Refactor][UI] Refactor workflow instance using NSpace component. (#11446)
32361f4fef is described below
commit 32361f4fef63439690988a649c043585ddd639cf
Author: songjianet <17...@qq.com>
AuthorDate: Fri Aug 12 14:26:22 2022 +0800
[Refactor][UI] Refactor workflow instance using NSpace component. (#11446)
* [Refactor][UI] Refactor workflow instance using NSpace component.
* [Refactor][UI] Refactor workflow instance using NSpace component.
---
.../components/process-instance-condition.tsx | 88 ++++++++++------------
.../projects/workflow/instance/index.module.scss | 80 --------------------
.../src/views/projects/workflow/instance/index.tsx | 65 ++++++++--------
3 files changed, 73 insertions(+), 160 deletions(-)
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
index 9322d40a41..c1f9efc8f8 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
@@ -17,13 +17,12 @@
import { SearchOutlined } from '@vicons/antd'
import {
- NGrid,
- NGridItem,
NInput,
NButton,
NDatePicker,
NSelect,
- NIcon
+ NIcon,
+ NSpace
} from 'naive-ui'
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -79,51 +78,46 @@ export default defineComponent({
render() {
const { t } = useI18n()
const options = stateType(t)
+
return (
- <NGrid xGap={6} cols={24}>
- <NGridItem offset={5} span={3}>
- <NInput
- allowInput={this.trim}
- v-model:value={this.searchValRef}
- placeholder={t('project.workflow.name')}
- />
- </NGridItem>
- <NGridItem span={3}>
- <NInput
- allowInput={this.trim}
- v-model:value={this.executorNameRef}
- placeholder={t('project.workflow.executor')}
- />
- </NGridItem>
- <NGridItem span={3}>
- <NInput
- allowInput={this.trim}
- v-model:value={this.hostRef}
- placeholder={t('project.workflow.host')}
- />
- </NGridItem>
- <NGridItem span={3}>
- <NSelect
- options={options}
- defaultValue={''}
- v-model:value={this.stateTypeRef}
- />
- </NGridItem>
- <NGridItem span={6}>
- <NDatePicker
- type='datetimerange'
- clearable
- v-model:value={this.startEndTimeRef}
- />
- </NGridItem>
- <NGridItem span={1}>
- <NButton type='primary' onClick={this.handleSearch}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
- </NButton>
- </NGridItem>
- </NGrid>
+ <NSpace justify='end'>
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ v-model:value={this.searchValRef}
+ placeholder={t('project.workflow.name')}
+ />
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ v-model:value={this.executorNameRef}
+ placeholder={t('project.workflow.executor')}
+ />
+ <NInput
+ allowInput={this.trim}
+ size='small'
+ v-model:value={this.hostRef}
+ placeholder={t('project.workflow.host')}
+ />
+ <NSelect
+ options={options}
+ size='small'
+ style={{width: '210px'}}
+ defaultValue={''}
+ v-model:value={this.stateTypeRef}
+ />
+ <NDatePicker
+ type='datetimerange'
+ size='small'
+ clearable
+ v-model:value={this.startEndTimeRef}
+ />
+ <NButton type='primary' size='small' onClick={this.handleSearch}>
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ </NButton>
+ </NSpace>
)
}
})
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss
deleted file mode 100644
index f29869391b..0000000000
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.module.scss
+++ /dev/null
@@ -1,80 +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.
- */
-
-.content {
- width: 100%;
-
- .card {
- margin-bottom: 8px;
- }
-
- .header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 10px 0;
- .right {
- > .search {
- .list {
- float: right;
- margin: 3px 0 3px 4px;
- }
- }
- }
- }
-}
-
-.table {
- table {
- width: 100%;
- tr {
- height: 40px;
- font-size: 12px;
- th,
- td {
- &:nth-child(1) {
- width: 50px;
- text-align: center;
- }
- }
- th {
- &:nth-child(1) {
- width: 60px;
- text-align: center;
- }
- > span {
- font-size: 12px;
- color: #555;
- }
- }
- }
- }
-}
-
-.pagination {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
-}
-
-.startup {
- align-items: center;
- > div:first-child {
- width: 86%;
- }
-}
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
index 1f4c73b358..8470bbe985 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
+++ b/dolphinscheduler-ui/src/views/projects/workflow/instance/index.tsx
@@ -17,18 +17,18 @@
import { defineComponent, onMounted, onUnmounted, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n'
-import Card from '@/components/card'
import {
NButton,
NDataTable,
NPagination,
NPopconfirm,
- NTooltip
+ NTooltip,
+ NSpace
} from 'naive-ui'
import { useTable } from './use-table'
+import Card from '@/components/card'
import ProcessInstanceCondition from './components/process-instance-condition'
-import { IWorkflowInstanceSearch } from './types'
-import styles from './index.module.scss'
+import type { IWorkflowInstanceSearch } from './types'
export default defineComponent({
name: 'WorkflowInstanceList',
@@ -92,37 +92,36 @@ export default defineComponent({
const { loadingRef } = this
return (
- <div class={styles.content}>
- <Card class={styles.card}>
- <div class={styles.header}>
- <ProcessInstanceCondition onHandleSearch={this.handleSearch} />
- </div>
+ <NSpace vertical>
+ <Card>
+ <ProcessInstanceCondition onHandleSearch={this.handleSearch} />
</Card>
<Card title={t('project.workflow.workflow_instance')}>
- <NDataTable
- loading={loadingRef}
- rowKey={(row) => row.id}
- columns={this.columns}
- data={this.tableData}
- striped
- size={'small'}
- class={styles.table}
- scrollX={this.tableWidth}
- v-model:checked-row-keys={this.checkedRowKeys}
- row-class-name='items-workflow-instances'
- />
- <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={this.requestData}
- onUpdatePageSize={this.handleChangePageSize}
+ <NSpace vertical>
+ <NDataTable
+ loading={loadingRef}
+ rowKey={(row) => row.id}
+ columns={this.columns}
+ data={this.tableData}
+ striped
+ size={'small'}
+ scrollX={this.tableWidth}
+ v-model:checked-row-keys={this.checkedRowKeys}
+ row-class-name='items-workflow-instances'
/>
- </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={this.requestData}
+ onUpdatePageSize={this.handleChangePageSize}
+ />
+ </NSpace>
+ </NSpace>
<NTooltip>
{{
default: () => t('project.workflow.delete'),
@@ -145,7 +144,7 @@ export default defineComponent({
}}
</NTooltip>
</Card>
- </div>
+ </NSpace>
)
}
})