[Feature-7785][UI Next] Add a new page for the module of next ui to manage the task group option. (#8060)

* add a few settings

* add a few pages

* modify locals

* modify pages

* add taskGroupOption

* merge from dev

* modify taskGroupOption

* modify task group

* request api

* modify taskGroupOptions

* modify taskGroupOption

* modify task group option

* merge from dev

* prettier the codes

* fix a little issue

* merge from dev

dolphinscheduler-ui-next/.prettierrc.js

@@ -16,15 +16,15 @@
  */
 
 module.exports = {
-  "useTabs": false,
+  useTabs: false,
-  "semi": false,
+  semi: false,
-  "vueIndentScriptAndStyle": true,
+  vueIndentScriptAndStyle: true,
-  "singleQuote": true,
+  singleQuote: true,
-  "quoteProps": "as-needed",
+  quoteProps: 'as-needed',
-  "jsxBracketSameLine": false,
+  jsxBracketSameLine: false,
-  "jsxSingleQuote": true,
+  jsxSingleQuote: true,
-  "arrowParens": "always",
+  arrowParens: 'always',
-  "htmlWhitespaceSensitivity": "strict",
+  htmlWhitespaceSensitivity: 'strict',
-  "endOfLine": "lf",
+  endOfLine: 'lf',
-  "trailingComma": "none"
+  trailingComma: 'none'
-};
+}

dolphinscheduler-ui-next/src/assets/styles/default.scss

@@ -19,7 +19,8 @@
   outline: 0;
 }
 
-html, body {
+html,
+body {
   width: 100%;
   height: 100%;
   //scrollbar-width: none;
@@ -29,7 +30,12 @@ html, body {
   //}
 }
 
-html, body, p, dl, dd, dt {
+html,
+body,
+p,
+dl,
+dd,
+dt {
   margin: 0;
   padding: 0;
 }

dolphinscheduler-ui-next/src/layouts/content/components/locales/index.module.scss

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
 .icon {
   margin: 0 12px;
 }

dolphinscheduler-ui-next/src/layouts/content/components/user/index.module.scss

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
 .icon {
   margin: 0 12px;
 }

dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts

@@ -41,7 +41,8 @@ import {
   SlackOutlined,
   EnvironmentOutlined,
   KeyOutlined,
-  SafetyOutlined
+  SafetyOutlined,
+  GroupOutlined
 } from '@vicons/antd'
 
 export function useDataList() {
@@ -145,6 +146,17 @@ export function useDataList() {
                 key: 'function-manage'
               }
             ]
+          },
+          {
+            label: t('menu.task_group_manage'),
+            key: 'task-group-manage',
+            icon: renderIcon(GroupOutlined),
+            children: [
+              {
+                label: t('menu.task_group_option'),
+                key: 'task-group-option'
+              }
+            ]
           }
         ]
       },

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -186,6 +186,53 @@ const resource = {
     file_details: 'File Details',
     return: 'Return',
     save: 'Save'
+  },
+  task_group_option: {
+    id: 'No.',
+    manage: 'Task group manage',
+    option: 'Task group option',
+    create: 'Create task group',
+    edit: 'Edit task group',
+    delete: 'Delete task group',
+    view_queue: 'View the queue of the task group',
+    switch_status: 'Switch status',
+    code: 'Task group code',
+    name: 'Task group name',
+    project_name: 'Project name',
+    resource_pool_size: 'Resource pool size',
+    resource_pool_size_be_a_number:
+      'The size of the task group resource pool should be more than 1',
+    resource_used_pool_size: 'Used resource',
+    desc: 'Task group desc',
+    status: 'Task group status',
+    enable_status: 'Enable',
+    disable_status: 'Disable',
+    please_enter_name: 'Please enter task group name',
+    please_enter_desc: 'Please enter task group description',
+    please_enter_resource_pool_size:
+      'Please enter task group resource pool size',
+    please_select_project: 'Please select a project',
+    create_time: 'Create time',
+    update_time: 'Update time',
+    actions: 'Actions',
+    please_enter_keywords: 'Please enter keywords'
+  },
+  task_group_queue: {
+    queue: 'Task group queue',
+    priority: 'Priority',
+    priority_be_a_number:
+      'The priority of the task group queue should be a positive number',
+    force_starting_status: 'Starting status',
+    in_queue: 'In queue',
+    task_status: 'Task status',
+    view: 'View task group queue',
+    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',
+    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'
   }
 }
 

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -71,7 +71,10 @@ const menu = {
   worker_group_manage: 'Worker分组管理',
   yarn_queue_manage: 'Yarn队列管理',
   environment_manage: '环境管理',
-  token_manage: '令牌管理'
+  token_manage: '令牌管理',
+  task_group_manage: '任务组管理',
+  task_group_option: '任务组配置',
+  task_group_queue: '任务组队列'
 }
 
 const home = {
@@ -185,6 +188,51 @@ const resource = {
     file_details: '文件详情',
     return: '返回',
     save: '保存'
+  },
+  task_group_option: {
+    id: '编号',
+    manage: '任务组管理',
+    option: '任务组配置',
+    create: '创建任务组',
+    edit: '编辑任务组',
+    delete: '删除任务组',
+    view_queue: '查看任务组队列',
+    switch_status: '切换任务组状态',
+    code: '任务组编号',
+    name: '任务组名称',
+    project_name: '项目名称',
+    resource_pool_size: '资源容量',
+    resource_used_pool_size: '已用资源',
+    desc: '描述信息',
+    status: '任务组状态',
+    enable_status: '启用',
+    disable_status: '不可用',
+    please_enter_name: '请输入任务组名称',
+    please_enter_desc: '请输入任务组描述',
+    please_enter_resource_pool_size: '请输入资源容量大小',
+    resource_pool_size_be_a_number: '资源容量大小必须大于等于1的数值',
+    please_select_project: '请选择项目',
+    create_time: '创建时间',
+    update_time: '更新时间',
+    actions: '操作',
+    please_enter_keywords: '请输入搜索关键词'
+  },
+  task_group_queue: {
+    queue: '任务组队列',
+    priority: '组内优先级',
+    priority_be_a_number: '优先级必须是大于等于0的数值',
+    force_starting_status: '是否强制启动',
+    in_queue: '是否排队中',
+    task_status: '任务状态',
+    view_task_group_queue: '查看任务组队列',
+    the_status_of_waiting: '等待入队',
+    the_status_of_queuing: '排队中',
+    the_status_of_releasing: '已释放',
+    modify_priority: '修改优先级',
+    force_to_start_task: '强制启动',
+    priority_not_empty: '优先级不能为空',
+    priority_must_be_number: '优先级必须是数值',
+    please_select_task_name: '请选择节点名称'
   }
 }
 

dolphinscheduler-ui-next/src/router/modules/resources.ts

@@ -76,6 +76,23 @@ export default {
       meta: {
         title: '文件创建'
       }
+    },
+    {
+      path: '/resource/task-group',
+      name: 'task-group-manage',
+      component: components['taskGroupOption'],
+      children: [
+        {
+          path: '/resource/task-group-option',
+          name: 'task-group-option',
+          component: components['taskGroupOption']
+        },
+        {
+          path: '/resource/task-group-queue',
+          name: 'task-group-queue',
+          component: components['taskGroupQueue']
+        }
+      ]
     }
   ]
 }

dolphinscheduler-ui-next/src/service/modules/task-group/index.ts

@@ -0,0 +1,96 @@
+/*
+ * 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 { axios } from '@/service/service'
+import {
+  ListReq,
+  TaskGroupIdReq,
+  TaskGroupReq,
+  TaskGroupUpdateReq
+} from './types'
+
+export function queryTaskGroupListPaging(params: ListReq): any {
+  return axios({
+    url: '/task-group/list-paging',
+    method: 'get',
+    params
+  })
+}
+
+export function queryTaskGroupListPagingByProjectCode(params: ListReq): any {
+  return axios({
+    url: '/task-group/query-list-by-projectCode',
+    method: 'get',
+    params
+  })
+}
+
+export function createTaskGroup(data: TaskGroupReq): any {
+  return axios({
+    url: '/task-group/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateTaskGroup(data: TaskGroupUpdateReq): any {
+  return axios({
+    url: '/task-group/update',
+    method: 'post',
+    data
+  })
+}
+
+export function closeTaskGroup(data: TaskGroupIdReq): any {
+  return axios({
+    url: '/task-group/close-task-group',
+    method: 'post',
+    data
+  })
+}
+
+export function startTaskGroup(data: TaskGroupIdReq): any {
+  return axios({
+    url: '/task-group/start-task-group',
+    method: 'post',
+    data
+  })
+}
+
+export function queryTaskListInTaskGroupQueueById(params: ListReq): any {
+  return axios({
+    url: '/task-group/query-list-by-group-id',
+    method: 'get',
+    params
+  })
+}
+
+export function modifyTaskGroupQueuePriority(data: TaskGroupIdReq): any {
+  return axios({
+    url: '/task-group/modifyPriority',
+    method: 'post',
+    data
+  })
+}
+
+export function forceStartTaskInQueue(data: TaskGroupIdReq): any {
+  return axios({
+    url: '/task-group/forceStart',
+    method: 'post',
+    data
+  })
+}

dolphinscheduler-ui-next/src/service/modules/task-group/types.ts

@@ -0,0 +1,66 @@
+/*
+ * 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.
+ */
+
+interface ListReq {
+  pageNo: number
+  pageSize: number
+  searchVal?: string
+}
+
+interface TaskGroupIdReq {
+  id: number
+}
+
+interface TaskGroupReq {
+  name: string
+  projectCode: string
+  groupSize: number
+  description: string
+}
+
+interface TaskGroupUpdateReq extends TaskGroupReq, TaskGroupIdReq {}
+
+interface TaskGroup {
+  id: number
+  name: string
+  projectCode: number
+  projectName: string
+  groupSize: number
+  useSize: number
+  status: number
+  description: string
+  createTime: string
+  updateTime: string
+}
+
+interface TaskGroupRes {
+  totalList: TaskGroup[]
+  total: number
+  totalPage: number
+  pageSize: number
+  currentPage: number
+  start: number
+}
+
+export {
+  ListReq,
+  TaskGroupIdReq,
+  TaskGroupReq,
+  TaskGroupUpdateReq,
+  TaskGroup,
+  TaskGroupRes
+}

dolphinscheduler-ui-next/src/views/monitor/servers/db/index.module.scss

@@ -39,5 +39,3 @@
   @include base;
   color: dodgerblue;
 }
-
-

dolphinscheduler-ui-next/src/views/monitor/statistics/statistics/index.module.scss

@@ -23,5 +23,3 @@
   min-height: 160px;
   color: dodgerblue;
 }
-
-

dolphinscheduler-ui-next/src/views/resource/file/index.module.scss

@@ -19,7 +19,7 @@
   width: 100%;
   background: #fff;
   padding-bottom: 20px;
-  >h2 {
+  > h2 {
     line-height: 60px;
     text-align: center;
     padding-right: 170px;
@@ -50,7 +50,8 @@
     tr {
       height: 40px;
       font-size: 12px;
-      th,td{
+      th,
+      td {
         &:nth-child(1) {
           width: 50px;
           text-align: center;
@@ -61,7 +62,7 @@
           width: 60px;
           text-align: center;
         }
-        >span {
+        > span {
           font-size: 12px;
           color: #555;
         }

dolphinscheduler-ui-next/src/views/resource/file/index.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
     const router: Router = useRouter()
     const fileId = ref(Number(router.currentRoute.value.params.id) || -1)
 
-    const reload:any = inject('reload')
+    const reload: any = inject('reload')
     const resourceListRef = ref()
     const folderShowRef = ref(false)
     const uploadShowRef = ref(false)

dolphinscheduler-ui-next/src/views/resource/file/table/index.module.scss

@@ -15,11 +15,10 @@
  * limitations under the License.
  */
 
-
 .links {
   color: #2080f0;
   text-decoration: none;
   &:hover {
     text-decoration: underline;
   }
-}
+}

dolphinscheduler-ui-next/src/views/resource/index.module.scss

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+.container {
+  > .item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    > .label {
+      display: inline-block;
+      width: 100px;
+    }
+  }
+}

dolphinscheduler-ui-next/src/views/resource/index.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 } from 'vue'
+
+const resource = defineComponent({
+  name: 'resource',
+  setup() {},
+  render() {
+    return {}
+  }
+})
+
+export default resource

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/components/form-modal.tsx

@@ -0,0 +1,146 @@
+/*
+ * 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, onMounted, ref, toRaw } from 'vue'
+import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
+import { useForm } from '../use-form'
+import Modal from '@/components/modal'
+import { createTaskGroup, updateTaskGroup } from '@/service/modules/task-group'
+import { queryAllProjectList } from '@/service/modules/projects'
+
+const props = {
+  show: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  data: {
+    type: Object as PropType<any>
+  },
+  status: {
+    type: Number as PropType<number>,
+    default: 0
+  }
+}
+
+const FormModal = defineComponent({
+  name: 'FormModal',
+  props,
+  emits: ['confirm', 'cancel'],
+  setup(props, { emit }) {
+    const { state, t } = useForm()
+    const projectOptions = ref([])
+
+    onMounted(() => {
+      queryAllProjectList().then((res: any) => {
+        res.map((item) => {
+          projectOptions.value.push({ label: item.name, value: item.code })
+        })
+      })
+      if (props.status === 1) {
+        state.formData.id = props.data.id
+        state.formData.name = props.data.name
+        state.formData.projectCode = props.data.projectCode
+        state.formData.groupSize = props.data.groupSize
+        state.formData.status = props.data.status
+        state.formData.description = props.data.description
+      } else {
+        state.formData.groupSize = 10
+      }
+    })
+
+    const onConfirm = () => {
+      ;(props.status === 1
+        ? updateTaskGroup(state.formData)
+        : createTaskGroup(state.formData)
+      ).then(() => {
+        emit('confirm')
+      })
+    }
+
+    const onCancel = () => {
+      state.formData.projectCode = 0
+      state.formData.description = ''
+      emit('cancel')
+    }
+
+    return { ...toRefs(state), t, onConfirm, onCancel, projectOptions }
+  },
+  render() {
+    const { t, onConfirm, onCancel, show, status, projectOptions } = this
+    return (
+      <Modal
+        title={
+          status === 0
+            ? t('resource.task_group_option.create')
+            : t('resource.task_group_option.edit')
+        }
+        show={show}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        confirmDisabled={
+          !this.formData.name ||
+          !this.formData.groupSize ||
+          !this.formData.description
+        }
+      >
+        <NForm rules={this.rules} ref='formRef'>
+          <NFormItem label={t('resource.task_group_option.name')} path='name'>
+            <NInput
+              v-model={[this.formData.name, 'value']}
+              placeholder={t('resource.task_group_option.please_enter_name')}
+            />
+          </NFormItem>
+          <NFormItem
+            label={t('resource.task_group_option.project_name')}
+            path='projectCode'
+          >
+            <NSelect
+              options={projectOptions}
+              v-model={[this.formData.projectCode, 'value']}
+              placeholder={t(
+                'resource.task_group_option.please_select_project'
+              )}
+            />
+          </NFormItem>
+          <NFormItem
+            label={t('resource.task_group_option.resource_pool_size')}
+            path='groupSize'
+          >
+            <NInput
+              v-model={[this.formData.groupSize, 'value']}
+              placeholder={t(
+                'resource.task_group_option.please_enter_resource_pool_size'
+              )}
+            />
+          </NFormItem>
+          <NFormItem
+            label={t('resource.task_group_option.desc')}
+            path='description'
+          >
+            <NInput
+              v-model={[this.formData.description, 'value']}
+              type='textarea'
+              placeholder={t('resource.task_group_option.please_enter_desc')}
+            />
+          </NFormItem>
+        </NForm>
+      </Modal>
+    )
+  }
+})
+
+export default FormModal

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/components/table-action.tsx

@@ -0,0 +1,145 @@
+/*
+ * 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, NSwitch } from 'naive-ui'
+import { EditOutlined, UnorderedListOutlined } from '@vicons/antd'
+import type {
+  TaskGroupIdReq,
+  TaskGroup
+} from '@/service/modules/task-group/types'
+import { startTaskGroup, closeTaskGroup } from '@/service/modules/task-group'
+
+interface ItemRow extends TaskGroup {
+  projectList: []
+}
+
+const props = {
+  row: {
+    type: Object as PropType<ItemRow>,
+    default: {}
+  }
+}
+
+const TableAction = defineComponent({
+  name: 'TableAction',
+  props,
+  emits: ['resetTableData', 'updateItem'],
+  setup(props, { emit }) {
+    const { t } = useI18n()
+
+    const handleEdit = (
+      id: number,
+      name: string,
+      projectCode: number,
+      groupSize: number,
+      description: string,
+      status: number
+    ) => {
+      emit('updateItem', id, name, projectCode, groupSize, description, status)
+    }
+
+    const handleSwitchStatus = (value: number, id: number) => {
+      const params: TaskGroupIdReq = { id: id }
+
+      if (value === 1) {
+        startTaskGroup(params).then(() => {
+          emit('resetTableData')
+        })
+      } else if (value === 0) {
+        closeTaskGroup(params).then(() => {
+          emit('resetTableData')
+        })
+      }
+    }
+
+    const handleViewQueue = (id: number) => {}
+
+    return { t, handleEdit, handleViewQueue, handleSwitchStatus }
+  },
+  render() {
+    const { t, handleEdit, handleViewQueue, handleSwitchStatus } = this
+
+    return (
+      <NSpace>
+        <NTooltip trigger={'hover'}>
+          {{
+            default: () => t('resource.task_group_option.switch_status'),
+            trigger: () => (
+              <NSwitch
+                v-model={[this.row.status, 'value']}
+                checkedValue={1}
+                uncheckedValue={0}
+                onUpdate:value={(value) =>
+                  handleSwitchStatus(value, this.row.id)
+                }
+              />
+            )
+          }}
+        </NTooltip>
+        <NTooltip trigger={'hover'}>
+          {{
+            default: () => t('resource.task_group_option.edit'),
+            trigger: () => (
+              <NButton
+                size='small'
+                type='info'
+                tag='div'
+                onClick={() =>
+                  handleEdit(
+                    this.row.id,
+                    this.row.name,
+                    this.row.projectCode,
+                    this.row.groupSize,
+                    this.row.description,
+                    this.row.status
+                  )
+                }
+                circle
+              >
+                <NIcon>
+                  <EditOutlined />
+                </NIcon>
+              </NButton>
+            )
+          }}
+        </NTooltip>
+        <NTooltip trigger={'hover'}>
+          {{
+            default: () => t('resource.task_group_option.view_queue'),
+            trigger: () => (
+              <NButton
+                size='small'
+                type='primary'
+                tag='div'
+                onClick={() => handleViewQueue(this.row.id)}
+                circle
+              >
+                <NIcon>
+                  <UnorderedListOutlined />
+                </NIcon>
+              </NButton>
+            )
+          }}
+        </NTooltip>
+      </NSpace>
+    )
+  }
+})
+
+export default TableAction

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/index.module.scss

@@ -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: space-between;
+  align-items: center;
+  padding: 0 0 0 0;
+  .left {
+    align-items: center;
+  }
+  .right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    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;
+  }
+}

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/index.tsx

@@ -0,0 +1,222 @@
+/*
+ * 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 } from 'vue'
+import {
+  NButton,
+  NIcon,
+  NInput,
+  NCard,
+  NDataTable,
+  NSwitch,
+  NPagination,
+  NTooltip
+} 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 './components/form-modal'
+
+const taskGroupOption = defineComponent({
+  name: 'taskGroupOption',
+  setup() {
+    const { t } = useI18n()
+    const { variables, getTableData } = useTable()
+    const showModalRef = ref(false)
+    const modelStatusRef = ref(0)
+
+    const searchParamRef = ref()
+
+    let updateItemData = reactive({
+      id: 0,
+      name: '',
+      projectCode: 0,
+      groupSize: 0,
+      status: 1,
+      description: ''
+    })
+
+    const requestData = () => {
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        name: variables.name
+      })
+    }
+
+    const resetTableData = () => {
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        name: variables.name
+      })
+    }
+
+    const onCancel = () => {
+      showModalRef.value = false
+    }
+
+    const onConfirm = () => {
+      showModalRef.value = false
+      updateItemData = {
+        id: 0,
+        name: '',
+        projectCode: 0,
+        groupSize: 0,
+        status: 1,
+        description: ''
+      }
+      resetTableData()
+    }
+
+    const onUpdatePageSize = () => {
+      variables.page = 1
+      resetTableData()
+    }
+
+    const updateItem = (
+      id: number,
+      name: string,
+      projectCode: number,
+      groupSize: number,
+      description: string
+    ) => {
+      modelStatusRef.value = 1
+      showModalRef.value = true
+      updateItemData.id = id
+      updateItemData.name = name
+      updateItemData.projectCode = projectCode
+      updateItemData.groupSize = groupSize
+      updateItemData.description = description
+    }
+
+    const onSearch = () => {
+      resetTableData()
+    }
+
+    const onCreate = () => {
+      modelStatusRef.value = 0
+      showModalRef.value = true
+    }
+
+    onMounted(() => {
+      requestData()
+    })
+
+    return {
+      ...toRefs(variables),
+      t,
+      onCreate,
+      onSearch,
+      searchParamRef,
+      resetTableData,
+      onUpdatePageSize,
+      updateItem,
+      showModalRef,
+      modelStatusRef,
+      onCancel,
+      onConfirm,
+      updateItemData
+    }
+  },
+  render() {
+    const {
+      t,
+      showModalRef,
+      modelStatusRef,
+      onCancel,
+      onConfirm,
+      updateItemData,
+      resetTableData,
+      onUpdatePageSize,
+      updateItem,
+      onSearch
+    } = this
+
+    const { columns } = useTable(updateItem, resetTableData)
+
+    return (
+      <div>
+        <NCard>
+          <div class={styles.toolbar}>
+            <div class={styles.left}>
+              <NButton
+                size='small'
+                type={'primary'}
+                onClick={() => this.onCreate()}
+              >
+                {t('resource.task_group_option.create')}
+              </NButton>
+            </div>
+            <div class={styles.right}>
+              <NInput
+                size='small'
+                v-model={[this.name, 'value']}
+                placeholder={t(
+                  'resource.task_group_option.please_enter_keywords'
+                )}
+              ></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}
+            status={modelStatusRef}
+          />
+        )}
+      </div>
+    )
+  }
+})
+
+export default taskGroupOption

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/use-form.ts

@@ -0,0 +1,58 @@
+/*
+ * 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'
+
+export function useForm() {
+  const { t } = useI18n()
+
+  const state = reactive({
+    formRef: ref(),
+    formData: {
+      id: 0,
+      name: '',
+      projectCode: 0,
+      groupSize: 0,
+      status: 1,
+      description: ''
+    },
+    rules: {
+      name: {
+        required: true,
+        trigger: ['input', 'blur'],
+        validator() {
+          if (state.formData.name === '') {
+            return new Error(t('resource.task_group_option.please_enter_name'))
+          }
+        }
+      },
+      description: {
+        required: true,
+        trigger: ['input', 'blur'],
+        validator() {
+          if (state.formData.description === '') {
+            return new Error(t('resource.task_group_option.please_enter_desc'))
+          }
+        }
+      }
+    } as FormRules
+  })
+
+  return { state, t }
+}

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/use-table.ts

@@ -0,0 +1,123 @@
+/*
+ * 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 { h, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAsyncState } from '@vueuse/core'
+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 } from '@/service/modules/task-group'
+import { queryAllProjectList } from '@/service/modules/projects'
+import TableAction from './components/table-action'
+import _ from 'lodash'
+
+export function useTable(
+  updateItem = (
+    id: number,
+    name: string,
+    projectCode: number,
+    groupSize: number,
+    description: string,
+    status: number
+  ): void => {},
+  resetTableData = () => {}
+) {
+  const { t } = useI18n()
+  const router: Router = useRouter()
+
+  const columns: TableColumns<any> = [
+    { title: t('resource.task_group_option.id'), key: 'index' },
+    { title: t('resource.task_group_option.name'), key: 'name' },
+    { title: t('resource.task_group_option.project_name'), key: 'projectName' },
+    {
+      title: t('resource.task_group_option.resource_pool_size'),
+      key: 'groupSize'
+    },
+    {
+      title: t('resource.task_group_option.resource_used_pool_size'),
+      key: 'useSize'
+    },
+    { title: t('resource.task_group_option.desc'), key: 'description' },
+    { title: t('resource.task_group_option.create_time'), key: 'createTime' },
+    { title: t('resource.task_group_option.update_time'), key: 'updateTime' },
+    {
+      title: t('resource.task_group_option.actions'),
+      key: 'actions',
+      width: 150,
+      render: (row: any) =>
+        h(TableAction, {
+          row,
+          onResetTableData: () => {
+            if (variables.page > 1 && variables.tableData.length === 1) {
+              variables.page -= 1
+            }
+            resetTableData()
+          },
+          onUpdateItem: (
+            id: number,
+            name: string,
+            projectCode: number,
+            groupSize: number,
+            description: string,
+            status: number
+          ) => {
+            updateItem(id, name, projectCode, groupSize, description, status)
+          }
+        })
+    }
+  ]
+
+  const variables = reactive({
+    tableData: [],
+    page: ref(1),
+    pageSize: ref(10),
+    name: ref(null),
+    totalPage: ref(1)
+  })
+
+  const getTableData = (params: any) => {
+    const { state } = useAsyncState(
+      Promise.all([
+        queryTaskGroupListPaging(params),
+        queryAllProjectList()
+      ]).then((values) => {
+        variables.totalPage = values[0].totalPage
+        variables.tableData = values[0].totalList.map((item, index) => {
+          item.projectName = _.find(values[1], { code: item.projectCode }).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
+          }
+        }) as any
+      }),
+      {}
+    )
+    return state
+  }
+
+  return { getTableData, variables, columns }
+}