test/DolphinScheduler
1
0
Fork 0
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git synced 2024-12-04 21:28:00 +08:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

[Refactor][UI] Refactor yarn queue manage using NSpace component. (#10680)

Browse Source
This commit is contained in:
songjianet 2022-06-30 09:32:52 +08:00 committed by GitHub
parent 3fbfa27f13
commit cf7776fb8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.module.scss
View File

@ -1,32 +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;
}
.table-card {
margin-top: 8px;
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
}

70
dolphinscheduler-ui/src/views/security/yarn-queue-manage/index.tsx
View File

@ -28,9 +28,7 @@ import {
import { SearchOutlined } from '@vicons/antd'
import { useI18n } from 'vue-i18n'
import { useTable } from './use-table'
import Card from '@/components/card'
import YarnQueueModal from './components/yarn-queue-modal'
import styles from './index.module.scss'
const yarnQueueManage = defineComponent({
name: 'yarn-queue-manage',
@ -103,19 +101,17 @@ const yarnQueueManage = defineComponent({
} = this
return (
<div>
<NCard>
<div class={styles['search-card']}>
<div>
<NButton
size='small'
type='primary'
onClick={handleModalChange}
class='btn-create-queue'
>
{t('security.yarn_queue.create_queue')}
</NButton>
</div>
<NSpace vertical>
<NCard size='small'>
<NSpace justify='space-between'>
<NButton
size='small'
type='primary'
onClick={handleModalChange}
class='btn-create-queue'
>
{t('security.yarn_queue.create_queue')}
</NButton>
<NSpace>
<NInput
size='small'
@ -133,28 +129,30 @@ const yarnQueueManage = defineComponent({
}}
</NButton>
</NSpace>
</div>
</NSpace>
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
row-class-name='items'
columns={this.columns}
data={this.tableData}
/>
<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}
<NCard size='small'>
<NSpace vertical>
<NDataTable
loading={loadingRef}
row-class-name='items'
columns={this.columns}
data={this.tableData}
/>
</div>
</Card>
<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>
</NCard>
<YarnQueueModal
showModalRef={this.showModalRef}
statusRef={this.statusRef}
@ -162,7 +160,7 @@ const yarnQueueManage = defineComponent({
onCancelModal={onCancelModal}
onConfirmModal={onConfirmModal}
/>
</div>
</NSpace>
)
}
})