[Feature][UI Next] Add the page of task group queue. (#8243)
This commit is contained in:
calvin
GitHub
parent
baf0c95add
commit
7c5a53f70f
File diff suppressed because it is too large
Load Diff
|
|
@ -80,12 +80,14 @@ const Content = defineComponent({
|
|||
changeMenuOption(state)
|
||||
getSideMenu(state)
|
||||
}
|
||||
sideKeyRef.value =
|
||||
route.matched[1].path.includes(':projectCode')
|
||||
? route.matched[1].path.replace(':projectCode', menuStore.getProjectCode)
|
||||
: route.matched[1].path
|
||||
sideKeyRef.value = route.matched[1].path.includes(':projectCode')
|
||||
? route.matched[1].path.replace(
|
||||
':projectCode',
|
||||
menuStore.getProjectCode
|
||||
)
|
||||
: route.matched[1].path
|
||||
},
|
||||
{immediate: true}
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -162,7 +162,11 @@ export function useDataList() {
|
|||
children: [
|
||||
{
|
||||
label: t('menu.task_group_option'),
|
||||
key: `/resource/task-group-option`
|
||||
key: 'task-group-option'
|
||||
},
|
||||
{
|
||||
label: t('menu.task_group_queue'),
|
||||
key: 'task-group-queue'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,10 @@ const menu = {
|
|||
worker_group_manage: 'Worker Group Manage',
|
||||
yarn_queue_manage: 'Yarn Queue Manage',
|
||||
environment_manage: 'Environment Manage',
|
||||
token_manage: 'Token Manage'
|
||||
token_manage: 'Token Manage',
|
||||
task_group_manage: 'Task Group Manage',
|
||||
task_group_option: 'Task Group Option',
|
||||
task_group_queue: 'Task Group Queue'
|
||||
}
|
||||
|
||||
const home = {
|
||||
|
|
@ -295,6 +298,13 @@ const resource = {
|
|||
please_enter_keywords: 'Please enter keywords'
|
||||
},
|
||||
task_group_queue: {
|
||||
id: 'No.',
|
||||
actions: 'Actions',
|
||||
task_name: 'Task name',
|
||||
task_group_name: 'Task group name',
|
||||
project_name: 'Project name',
|
||||
process_name: 'Process name',
|
||||
process_instance_name: 'Process instance',
|
||||
queue: 'Task group queue',
|
||||
priority: 'Priority',
|
||||
priority_be_a_number:
|
||||
|
|
@ -306,10 +316,14 @@ const resource = {
|
|||
the_status_of_waiting: 'Waiting into the queue',
|
||||
the_status_of_queuing: 'Queuing',
|
||||
the_status_of_releasing: 'Released',
|
||||
modify_priority: 'Edit the priority of the task group queue',
|
||||
modify_priority: 'Edit the priority',
|
||||
start_task: 'Start the task',
|
||||
priority_not_empty: 'The value of priority can not be empty',
|
||||
priority_must_be_number: 'The value of priority should be number',
|
||||
please_select_task_name: 'Please select a task name'
|
||||
please_select_task_name: 'Please select a task name',
|
||||
create_time: 'Create time',
|
||||
update_time: 'Update time',
|
||||
edit_priority: 'Edit the task priority'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -294,6 +294,13 @@ const resource = {
|
|||
please_enter_keywords: '请输入搜索关键词'
|
||||
},
|
||||
task_group_queue: {
|
||||
id: '编号',
|
||||
actions: '操作',
|
||||
task_name: '任务名称',
|
||||
task_group_name: '任务组名称',
|
||||
project_name: '项目名称',
|
||||
process_name: '工作流名称',
|
||||
process_instance_name: '工作流实例',
|
||||
queue: '任务组队列',
|
||||
priority: '组内优先级',
|
||||
priority_be_a_number: '优先级必须是大于等于0的数值',
|
||||
|
|
@ -305,10 +312,13 @@ const resource = {
|
|||
the_status_of_queuing: '排队中',
|
||||
the_status_of_releasing: '已释放',
|
||||
modify_priority: '修改优先级',
|
||||
force_to_start_task: '强制启动',
|
||||
start_task: '强制启动',
|
||||
priority_not_empty: '优先级不能为空',
|
||||
priority_must_be_number: '优先级必须是数值',
|
||||
please_select_task_name: '请选择节点名称'
|
||||
please_select_task_name: '请选择节点名称',
|
||||
create_time: '创建时间',
|
||||
update_time: '更新时间',
|
||||
edit_priority: '修改优先级'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -110,21 +110,14 @@ export default {
|
|||
}
|
||||
},
|
||||
{
|
||||
path: '/resource/task-group',
|
||||
name: 'task-group-manage',
|
||||
component: components['resource-task-group-option'],
|
||||
children: [
|
||||
{
|
||||
path: '/resource/task-group-option',
|
||||
name: 'task-group-option',
|
||||
component: components['resource-task-group-option']
|
||||
},
|
||||
{
|
||||
path: '/resource/task-group-queue',
|
||||
name: 'task-group-queue',
|
||||
component: components['resource-task-group-queue']
|
||||
}
|
||||
]
|
||||
path: '/resource/task-group-option',
|
||||
name: 'task-group-option',
|
||||
component: components['resource-task-group-option']
|
||||
},
|
||||
{
|
||||
path: '/resource/task-group-queue',
|
||||
name: 'task-group-queue',
|
||||
component: components['resource-task-group-queue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ import { axios } from '@/service/service'
|
|||
import {
|
||||
ListReq,
|
||||
TaskGroupIdReq,
|
||||
TaskGroupQueueIdReq,
|
||||
TaskGroupQueuePriorityUpdateReq,
|
||||
TaskGroupReq,
|
||||
TaskGroupUpdateReq
|
||||
} from './types'
|
||||
|
|
@ -79,7 +81,9 @@ export function queryTaskListInTaskGroupQueueById(params: ListReq): any {
|
|||
})
|
||||
}
|
||||
|
||||
export function modifyTaskGroupQueuePriority(data: TaskGroupIdReq): any {
|
||||
export function modifyTaskGroupQueuePriority(
|
||||
data: TaskGroupQueuePriorityUpdateReq
|
||||
): any {
|
||||
return axios({
|
||||
url: '/task-group/modifyPriority',
|
||||
method: 'post',
|
||||
|
|
@ -87,7 +91,7 @@ export function modifyTaskGroupQueuePriority(data: TaskGroupIdReq): any {
|
|||
})
|
||||
}
|
||||
|
||||
export function forceStartTaskInQueue(data: TaskGroupIdReq): any {
|
||||
export function forceStartTaskInQueue(data: TaskGroupQueueIdReq): any {
|
||||
return axios({
|
||||
url: '/task-group/forceStart',
|
||||
method: 'post',
|
||||
|
|
|
|||
|
|
@ -57,11 +57,49 @@ interface TaskGroupRes {
|
|||
start: number
|
||||
}
|
||||
|
||||
interface TaskGroupQueue {
|
||||
id: number
|
||||
taskId: number
|
||||
taskName: string
|
||||
projectName: string
|
||||
projectCode: string
|
||||
processInstanceName: string
|
||||
groupId: number
|
||||
processId: number
|
||||
priority: number
|
||||
forceStart: number
|
||||
inQueue: number
|
||||
status: string
|
||||
createTime: string
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
interface TaskGroupQueueRes {
|
||||
totalList: TaskGroupQueue[]
|
||||
total: number
|
||||
totalPage: number
|
||||
pageSize: number
|
||||
currentPage: number
|
||||
start: number
|
||||
}
|
||||
|
||||
interface TaskGroupQueueIdReq {
|
||||
queueId: number
|
||||
}
|
||||
|
||||
interface TaskGroupQueuePriorityUpdateReq extends TaskGroupQueueIdReq {
|
||||
priority: number
|
||||
}
|
||||
|
||||
export {
|
||||
ListReq,
|
||||
TaskGroupIdReq,
|
||||
TaskGroupReq,
|
||||
TaskGroupUpdateReq,
|
||||
TaskGroup,
|
||||
TaskGroupRes
|
||||
TaskGroupRes,
|
||||
TaskGroupQueue,
|
||||
TaskGroupQueueRes,
|
||||
TaskGroupQueueIdReq,
|
||||
TaskGroupQueuePriorityUpdateReq
|
||||
}
|
||||
|
|
|
|||
|
|
@ -140,10 +140,22 @@ const TaskInstance = defineComponent({
|
|||
value: 'NEED_FAULT_TOLERANCE'
|
||||
},
|
||||
{ label: t('project.task.kill'), value: 'KILL' },
|
||||
{ label: t('project.task.waiting_thread'), value: 'WAITING_THREAD' },
|
||||
{ label: t('project.task.waiting_depend'), value: 'WAITING_DEPEND' },
|
||||
{ label: t('project.task.delay_execution'), value: 'DELAY_EXECUTION' },
|
||||
{ label: t('project.task.forced_success'), value: 'FORCED_SUCCESS' },
|
||||
{
|
||||
label: t('project.task.waiting_thread'),
|
||||
value: 'WAITING_THREAD'
|
||||
},
|
||||
{
|
||||
label: t('project.task.waiting_depend'),
|
||||
value: 'WAITING_DEPEND'
|
||||
},
|
||||
{
|
||||
label: t('project.task.delay_execution'),
|
||||
value: 'DELAY_EXECUTION'
|
||||
},
|
||||
{
|
||||
label: t('project.task.forced_success'),
|
||||
value: 'FORCED_SUCCESS'
|
||||
},
|
||||
{ label: t('project.task.serial_wait'), value: 'SERIAL_WAIT' }
|
||||
]}
|
||||
placeholder={t('project.task.state')}
|
||||
|
|
|
|||
|
|
@ -83,52 +83,52 @@ $toolbarHeight: 50px;
|
|||
background-size: 100% 100%;
|
||||
margin-right: 10px;
|
||||
&.icon-shell {
|
||||
background-image: url("@/assets/images/task-icons/shell.png");
|
||||
background-image: url('@/assets/images/task-icons/shell.png');
|
||||
}
|
||||
&.icon-sub_process {
|
||||
background-image: url("@/assets/images/task-icons/sub_process.png");
|
||||
background-image: url('@/assets/images/task-icons/sub_process.png');
|
||||
}
|
||||
&.icon-procedure {
|
||||
background-image: url("@/assets/images/task-icons/procedure.png");
|
||||
background-image: url('@/assets/images/task-icons/procedure.png');
|
||||
}
|
||||
&.icon-sql {
|
||||
background-image: url("@/assets/images/task-icons/sql.png");
|
||||
background-image: url('@/assets/images/task-icons/sql.png');
|
||||
}
|
||||
&.icon-flink {
|
||||
background-image: url("@/assets/images/task-icons/flink.png");
|
||||
background-image: url('@/assets/images/task-icons/flink.png');
|
||||
}
|
||||
&.icon-mr {
|
||||
background-image: url("@/assets/images/task-icons/mr.png");
|
||||
background-image: url('@/assets/images/task-icons/mr.png');
|
||||
}
|
||||
&.icon-python {
|
||||
background-image: url("@/assets/images/task-icons/python.png");
|
||||
background-image: url('@/assets/images/task-icons/python.png');
|
||||
}
|
||||
&.icon-dependent {
|
||||
background-image: url("@/assets/images/task-icons/dependent.png");
|
||||
background-image: url('@/assets/images/task-icons/dependent.png');
|
||||
}
|
||||
&.icon-http {
|
||||
background-image: url("@/assets/images/task-icons/http.png");
|
||||
background-image: url('@/assets/images/task-icons/http.png');
|
||||
}
|
||||
&.icon-datax {
|
||||
background-image: url("@/assets/images/task-icons/datax.png");
|
||||
background-image: url('@/assets/images/task-icons/datax.png');
|
||||
}
|
||||
&.icon-pigeon {
|
||||
background-image: url("@/assets/images/task-icons/pigeon.png");
|
||||
background-image: url('@/assets/images/task-icons/pigeon.png');
|
||||
}
|
||||
&.icon-sqoop {
|
||||
background-image: url("@/assets/images/task-icons/sqoop.png");
|
||||
background-image: url('@/assets/images/task-icons/sqoop.png');
|
||||
}
|
||||
&.icon-conditions {
|
||||
background-image: url("@/assets/images/task-icons/conditions.png");
|
||||
background-image: url('@/assets/images/task-icons/conditions.png');
|
||||
}
|
||||
&.icon-seatunnel {
|
||||
background-image: url("@/assets/images/task-icons/seatunnel.png");
|
||||
background-image: url('@/assets/images/task-icons/seatunnel.png');
|
||||
}
|
||||
&.icon-spark {
|
||||
background-image: url("@/assets/images/task-icons/spark.png");
|
||||
background-image: url('@/assets/images/task-icons/spark.png');
|
||||
}
|
||||
&.icon-switch {
|
||||
background-image: url("@/assets/images/task-icons/switch.png");
|
||||
background-image: url('@/assets/images/task-icons/switch.png');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -138,52 +138,52 @@ $toolbarHeight: 50px;
|
|||
background-color: $blueBg;
|
||||
.sidebar-icon {
|
||||
&.icon-shell {
|
||||
background-image: url("@/assets/images/task-icons/shell_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/shell_hover.png');
|
||||
}
|
||||
&.icon-sub_process {
|
||||
background-image: url("@/assets/images/task-icons/sub_process_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/sub_process_hover.png');
|
||||
}
|
||||
&.icon-procedure {
|
||||
background-image: url("@/assets/images/task-icons/procedure_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/procedure_hover.png');
|
||||
}
|
||||
&.icon-sql {
|
||||
background-image: url("@/assets/images/task-icons/sql_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/sql_hover.png');
|
||||
}
|
||||
&.icon-flink {
|
||||
background-image: url("@/assets/images/task-icons/flink_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/flink_hover.png');
|
||||
}
|
||||
&.icon-mr {
|
||||
background-image: url("@/assets/images/task-icons/mr_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/mr_hover.png');
|
||||
}
|
||||
&.icon-python {
|
||||
background-image: url("@/assets/images/task-icons/python_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/python_hover.png');
|
||||
}
|
||||
&.icon-dependent {
|
||||
background-image: url("@/assets/images/task-icons/dependent_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/dependent_hover.png');
|
||||
}
|
||||
&.icon-http {
|
||||
background-image: url("@/assets/images/task-icons/http_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/http_hover.png');
|
||||
}
|
||||
&.icon-datax {
|
||||
background-image: url("@/assets/images/task-icons/datax_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/datax_hover.png');
|
||||
}
|
||||
&.icon-pigeon {
|
||||
background-image: url("@/assets/images/task-icons/pigeon_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/pigeon_hover.png');
|
||||
}
|
||||
&.icon-sqoop {
|
||||
background-image: url("@/assets/images/task-icons/sqoop_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/sqoop_hover.png');
|
||||
}
|
||||
&.icon-conditions {
|
||||
background-image: url("@/assets/images/task-icons/conditions_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/conditions_hover.png');
|
||||
}
|
||||
&.icon-seatunnel {
|
||||
background-image: url("@/assets/images/task-icons/seatunnel_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/seatunnel_hover.png');
|
||||
}
|
||||
&.icon-spark {
|
||||
background-image: url("@/assets/images/task-icons/spark_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/spark_hover.png');
|
||||
}
|
||||
&.icon-switch {
|
||||
background-image: url("@/assets/images/task-icons/switch_hover.png");
|
||||
background-image: url('@/assets/images/task-icons/switch_hover.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,22 +14,21 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
$STROKE_BLUE: #288fff;
|
||||
$BG_WHITE: #ffffff;
|
||||
|
||||
.x6-node[data-shape="dag-task"] {
|
||||
&.available {
|
||||
.dag-task-body {
|
||||
stroke: $STROKE_BLUE;
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 5, 2;
|
||||
}
|
||||
&.adsorbed {
|
||||
.dag-task-body {
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$STROKE_BLUE: #288fff;
|
||||
$BG_WHITE: #ffffff;
|
||||
|
||||
.x6-node[data-shape='dag-task'] {
|
||||
&.available {
|
||||
.dag-task-body {
|
||||
stroke: $STROKE_BLUE;
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 5, 2;
|
||||
}
|
||||
&.adsorbed {
|
||||
.dag-task-body {
|
||||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.container{
|
||||
.container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
|
||||
import { defineComponent, PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { Router } from 'vue-router'
|
||||
import { NSpace, NTooltip, NButton, NIcon, NSwitch } from 'naive-ui'
|
||||
import { EditOutlined, UnorderedListOutlined } from '@vicons/antd'
|
||||
import type {
|
||||
|
|
@ -24,6 +25,7 @@ import type {
|
|||
TaskGroup
|
||||
} from '@/service/modules/task-group/types'
|
||||
import { startTaskGroup, closeTaskGroup } from '@/service/modules/task-group'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
interface ItemRow extends TaskGroup {
|
||||
projectList: []
|
||||
|
|
@ -42,6 +44,7 @@ const TableAction = defineComponent({
|
|||
emits: ['resetTableData', 'updateItem'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
const router: Router = useRouter()
|
||||
|
||||
const handleEdit = (
|
||||
id: number,
|
||||
|
|
@ -68,7 +71,9 @@ const TableAction = defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
const handleViewQueue = (id: number) => {}
|
||||
const handleViewQueue = (id: number) => {
|
||||
router.push({ name: 'task-group-queue', params: { id: id } })
|
||||
}
|
||||
|
||||
return { t, handleEdit, handleViewQueue, handleSwitchStatus }
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
/*
|
||||
* 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,
|
||||
PropType,
|
||||
toRefs,
|
||||
ref,
|
||||
toRaw,
|
||||
Ref,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
import { NForm, NFormItem, NInput } from 'naive-ui'
|
||||
import { useForm } from '../use-form'
|
||||
import Modal from '@/components/modal'
|
||||
import { modifyTaskGroupQueuePriority } from '@/service/modules/task-group'
|
||||
|
||||
const props = {
|
||||
show: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object as PropType<any>
|
||||
}
|
||||
}
|
||||
|
||||
const FormModal = defineComponent({
|
||||
name: 'FormModal',
|
||||
props,
|
||||
emits: ['confirm', 'cancel'],
|
||||
setup(props, { emit }) {
|
||||
const { state, t } = useForm()
|
||||
|
||||
onMounted(() => {
|
||||
state.formData.queueId = props.data.queueId
|
||||
state.formData.priority = props.data.priority
|
||||
})
|
||||
|
||||
const onConfirm = () => {
|
||||
let value = state.formData.priority + ''
|
||||
if (value) {
|
||||
modifyTaskGroupQueuePriority(state.formData).then(() => {
|
||||
emit('confirm')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
state.formData.priority = 0
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
return { ...toRefs(state), t, onConfirm, onCancel }
|
||||
},
|
||||
render() {
|
||||
const { t, onConfirm, onCancel, show } = this
|
||||
return (
|
||||
<Modal
|
||||
title={t('resource.task_group_queue.edit_priority')}
|
||||
show={show}
|
||||
onConfirm={onConfirm}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
<NForm rules={this.rules} ref='formRef'>
|
||||
<NFormItem
|
||||
label={t('resource.task_group_queue.priority')}
|
||||
path='priority'
|
||||
>
|
||||
<NInput v-model:value={this.formData.priority} />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default FormModal
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
* 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, PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { NSpace, NTooltip, NButton, NIcon } from 'naive-ui'
|
||||
import { EditOutlined, PlayCircleOutlined } from '@vicons/antd'
|
||||
import type {
|
||||
TaskGroupQueueIdReq,
|
||||
TaskGroupQueuePriorityUpdateReq,
|
||||
TaskGroupQueue
|
||||
} from '@/service/modules/task-group/types'
|
||||
import { forceStartTaskInQueue } from '@/service/modules/task-group'
|
||||
|
||||
interface ItemRow extends TaskGroupQueue {}
|
||||
|
||||
const props = {
|
||||
row: {
|
||||
type: Object as PropType<ItemRow>,
|
||||
default: {}
|
||||
}
|
||||
}
|
||||
|
||||
const TableAction = defineComponent({
|
||||
name: 'TableAction',
|
||||
props,
|
||||
emits: ['resetTableData', 'updatePriority'],
|
||||
setup(props, { emit }) {
|
||||
const { t } = useI18n()
|
||||
|
||||
const handleEditPriority = (id: number, priority: number) => {
|
||||
emit('updatePriority', id, priority)
|
||||
}
|
||||
|
||||
const handleStartTask = (id: number) => {
|
||||
const params: TaskGroupQueueIdReq = { queueId: id }
|
||||
|
||||
forceStartTaskInQueue(params).then(() => {
|
||||
emit('resetTableData')
|
||||
})
|
||||
}
|
||||
|
||||
return { t, handleEditPriority, handleStartTask }
|
||||
},
|
||||
render() {
|
||||
const { t, handleEditPriority, handleStartTask } = this
|
||||
|
||||
return (
|
||||
<NSpace>
|
||||
<NTooltip trigger={'hover'}>
|
||||
{{
|
||||
default: () => t('resource.task_group_queue.modify_priority'),
|
||||
trigger: () => (
|
||||
<NButton
|
||||
size='small'
|
||||
type='info'
|
||||
tag='div'
|
||||
onClick={() =>
|
||||
handleEditPriority(this.row.id, this.row.priority)
|
||||
}
|
||||
circle
|
||||
>
|
||||
<NIcon>
|
||||
<EditOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NTooltip>
|
||||
<NTooltip trigger={'hover'}>
|
||||
{{
|
||||
default: () => t('resource.task_group_queue.start_task'),
|
||||
trigger: () => (
|
||||
<NButton
|
||||
size='small'
|
||||
type='primary'
|
||||
tag='div'
|
||||
onClick={() => handleStartTask(this.row.id)}
|
||||
circle
|
||||
>
|
||||
<NIcon>
|
||||
<PlayCircleOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NTooltip>
|
||||
</NSpace>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default TableAction
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/*
|
||||
* 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;
|
||||
.right {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
div {
|
||||
margin-left: 5px;
|
||||
}
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,232 @@
|
|||
/*
|
||||
* 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 { ref, defineComponent, toRefs, reactive, onMounted, Ref } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NIcon,
|
||||
NInput,
|
||||
NCard,
|
||||
NDataTable,
|
||||
NPagination,
|
||||
NSelect
|
||||
} 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'
|
||||
|
||||
const taskGroupQueue = defineComponent({
|
||||
name: 'taskGroupQueue',
|
||||
setup() {
|
||||
const router: Router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const { variables, getTableData } = useTable()
|
||||
const showModalRef = ref(false)
|
||||
const taskGroupOptions: Ref<Array<SelectMixedOption>> = ref([])
|
||||
|
||||
const idRef = ref(Number(router.currentRoute.value.params.id))
|
||||
|
||||
const searchParamRef = reactive({
|
||||
groupId: 0,
|
||||
processName: '',
|
||||
instanceName: '',
|
||||
pageSize: 10,
|
||||
pageNo: 1
|
||||
})
|
||||
|
||||
let updateItemData = reactive({
|
||||
queueId: 0,
|
||||
priority: 0
|
||||
})
|
||||
|
||||
const requestData = () => {
|
||||
getTableData({
|
||||
pageSize: variables.pageSize,
|
||||
pageNo: variables.page,
|
||||
groupId: variables.groupId
|
||||
})
|
||||
}
|
||||
|
||||
const resetTableData = () => {
|
||||
getTableData({
|
||||
pageSize: variables.pageSize,
|
||||
pageNo: variables.page,
|
||||
groupId: searchParamRef.groupId,
|
||||
taskInstanceName: searchParamRef.instanceName,
|
||||
processInstanceName: searchParamRef.processName
|
||||
})
|
||||
}
|
||||
|
||||
const onCancel = () => {
|
||||
showModalRef.value = false
|
||||
}
|
||||
|
||||
const onConfirm = () => {
|
||||
showModalRef.value = false
|
||||
updateItemData = {
|
||||
queueId: 0,
|
||||
priority: 0
|
||||
}
|
||||
resetTableData()
|
||||
}
|
||||
|
||||
const onUpdatePageSize = () => {
|
||||
variables.page = 1
|
||||
resetTableData()
|
||||
}
|
||||
|
||||
const updatePriority = (queueId: number, priority: number) => {
|
||||
showModalRef.value = true
|
||||
updateItemData.queueId = queueId
|
||||
updateItemData.priority = priority
|
||||
}
|
||||
|
||||
const onSearch = () => {
|
||||
resetTableData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const taskGroupOptionsParams = {
|
||||
pageNo: 1,
|
||||
pageSize: 2147483647
|
||||
}
|
||||
if (idRef.value) {
|
||||
searchParamRef.groupId = idRef.value
|
||||
}
|
||||
queryTaskGroupListPaging(taskGroupOptionsParams).then(
|
||||
(res: TaskGroupRes) => {
|
||||
res.totalList.map((item) => {
|
||||
if (!searchParamRef.groupId) {
|
||||
searchParamRef.groupId = item.id
|
||||
}
|
||||
let option: SelectMixedOption = { label: item.name, value: item.id }
|
||||
taskGroupOptions.value.push(option)
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
resetTableData()
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(variables),
|
||||
t,
|
||||
onSearch,
|
||||
searchParamRef,
|
||||
resetTableData,
|
||||
onUpdatePageSize,
|
||||
updatePriority,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
showModalRef,
|
||||
updateItemData,
|
||||
taskGroupOptions
|
||||
}
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
resetTableData,
|
||||
onUpdatePageSize,
|
||||
updatePriority,
|
||||
onCancel,
|
||||
onConfirm,
|
||||
onSearch,
|
||||
showModalRef,
|
||||
updateItemData,
|
||||
taskGroupOptions
|
||||
} = this
|
||||
|
||||
const { columns } = useTable(updatePriority, resetTableData)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<NCard>
|
||||
<div class={styles.toolbar}>
|
||||
<div class={styles.right}>
|
||||
<NSelect
|
||||
size='small'
|
||||
options={taskGroupOptions}
|
||||
v-model:value={this.searchParamRef.groupId}
|
||||
placeholder={t('resource.task_group_queue.task_group_name')}
|
||||
/>
|
||||
<NInput
|
||||
size='small'
|
||||
v-model={[this.searchParamRef.processName, 'value']}
|
||||
placeholder={t('resource.task_group_queue.process_name')}
|
||||
></NInput>
|
||||
<NInput
|
||||
size='small'
|
||||
v-model={[this.searchParamRef.instanceName, 'value']}
|
||||
placeholder={t(
|
||||
'resource.task_group_queue.process_instance_name'
|
||||
)}
|
||||
></NInput>
|
||||
<NButton size='small' type='primary' onClick={onSearch}>
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
<Card
|
||||
class={styles['table-card']}
|
||||
title={t('resource.task_group_option.option')}
|
||||
>
|
||||
<div>
|
||||
<NDataTable
|
||||
columns={columns}
|
||||
size={'small'}
|
||||
data={this.tableData}
|
||||
striped
|
||||
/>
|
||||
<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={resetTableData}
|
||||
onUpdatePageSize={onUpdatePageSize}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{showModalRef && (
|
||||
<FormModal
|
||||
show={showModalRef}
|
||||
onCancel={onCancel}
|
||||
onConfirm={onConfirm}
|
||||
data={updateItemData}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export default taskGroupQueue
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
* 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 { useI18n } from 'vue-i18n'
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormRules } from 'naive-ui'
|
||||
import type { TaskGroupQueuePriorityUpdateReq } from '@/service/modules/task-group/types'
|
||||
import _ from 'lodash'
|
||||
|
||||
export function useForm() {
|
||||
const { t } = useI18n()
|
||||
|
||||
const state = reactive({
|
||||
formRef: ref(),
|
||||
formData: {
|
||||
queueId: 0,
|
||||
priority: 0
|
||||
} as TaskGroupQueuePriorityUpdateReq,
|
||||
rules: {
|
||||
priority: {
|
||||
required: true,
|
||||
trigger: ['input', 'blur'],
|
||||
validator() {
|
||||
let value = state.formData.priority + ''
|
||||
if (value && state.formData.priority >= 0) {
|
||||
} else {
|
||||
return new Error(t('resource.task_group_queue.priority_not_empty'))
|
||||
}
|
||||
}
|
||||
}
|
||||
} as FormRules
|
||||
})
|
||||
|
||||
return { state, t }
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
/*
|
||||
* 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 { useAsyncState, useAsyncQueue } from '@vueuse/core'
|
||||
import { h, reactive, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { format } from 'date-fns'
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { Router } from 'vue-router'
|
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
|
||||
import {
|
||||
queryTaskGroupListPaging,
|
||||
queryTaskListInTaskGroupQueueById
|
||||
} from '@/service/modules/task-group'
|
||||
import TableAction from './components/table-action'
|
||||
import _ from 'lodash'
|
||||
|
||||
export function useTable(
|
||||
updatePriority = (queueId: number, priority: number): void => {},
|
||||
resetTableData = () => {}
|
||||
) {
|
||||
const { t } = useI18n()
|
||||
const router: Router = useRouter()
|
||||
|
||||
const columns: TableColumns<any> = [
|
||||
{ title: t('resource.task_group_queue.id'), key: 'index' },
|
||||
{ title: t('resource.task_group_queue.project_name'), key: 'projectName' },
|
||||
{ title: t('resource.task_group_queue.task_name'), key: 'taskName' },
|
||||
{
|
||||
title: t('resource.task_group_queue.process_instance_name'),
|
||||
key: 'processInstanceName'
|
||||
},
|
||||
{
|
||||
title: t('resource.task_group_queue.task_group_name'),
|
||||
key: 'taskGroupName'
|
||||
},
|
||||
{ title: t('resource.task_group_queue.priority'), key: 'priority' },
|
||||
{
|
||||
title: t('resource.task_group_queue.force_starting_status'),
|
||||
key: 'forceStart'
|
||||
},
|
||||
{ title: t('resource.task_group_queue.in_queue'), key: 'inQueue' },
|
||||
{ title: t('resource.task_group_queue.task_status'), key: 'status' },
|
||||
{ title: t('resource.task_group_queue.create_time'), key: 'createTime' },
|
||||
{ title: t('resource.task_group_queue.update_time'), key: 'updateTime' },
|
||||
{
|
||||
title: t('resource.task_group_queue.actions'),
|
||||
key: 'actions',
|
||||
width: 150,
|
||||
render: (row: any) =>
|
||||
h(TableAction, {
|
||||
row,
|
||||
onResetTableData: () => {
|
||||
if (variables.page > 1 && variables.tableData.length === 1) {
|
||||
variables.page -= 1
|
||||
}
|
||||
resetTableData()
|
||||
},
|
||||
onUpdatePriority: (queueId: number, priority: number) => {
|
||||
updatePriority(queueId, priority)
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
const variables = reactive({
|
||||
tableData: [],
|
||||
page: ref(1),
|
||||
pageSize: ref(10),
|
||||
groupId: ref(3),
|
||||
totalPage: ref(1)
|
||||
})
|
||||
|
||||
const getTableData = (params: any) => {
|
||||
const taskGroupSearchParams = {
|
||||
pageNo: 1,
|
||||
pageSize: 2147483647
|
||||
}
|
||||
Promise.all([
|
||||
queryTaskListInTaskGroupQueueById(params),
|
||||
queryTaskGroupListPaging(taskGroupSearchParams)
|
||||
]).then((values: any[]) => {
|
||||
const taskGroupList = values[1].totalList
|
||||
variables.totalPage = values[0].totalPage
|
||||
variables.tableData = values[0].totalList.map(
|
||||
(item: any, index: number) => {
|
||||
item.taskGroupName = _.find(taskGroupList, {
|
||||
id: item.groupId
|
||||
}).name
|
||||
item.createTime = format(
|
||||
new Date(item.createTime),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
)
|
||||
item.updateTime = format(
|
||||
new Date(item.updateTime),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
)
|
||||
return {
|
||||
index: index + 1,
|
||||
...item
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return { getTableData, variables, columns }
|
||||
}
|
||||
Loading…
Reference in New Issue