fix(任务中心): 修复任务中心请求过慢的缺陷

--bug=1020646 --user=王孝刚 【任务中心】github
#20425，任务中心接口请求时间长，导致任务中心访问时空白页经常出现，接口返回数据后，再次访问任务中心，非空白页
https://www.tapd.cn/55049933/s/1315602

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTaskMapper.java

@@ -2,15 +2,17 @@ package io.metersphere.base.mapper.ext;
 
 import io.metersphere.task.dto.TaskCenterDTO;
 import io.metersphere.task.dto.TaskCenterRequest;
+import io.metersphere.task.dto.TaskStatisticsDTO;
 import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
 
 public interface ExtTaskMapper {
 
-    List<TaskCenterDTO> getTasks(@Param("request") TaskCenterRequest request);
-
-    int getRunningTasks(@Param("request") TaskCenterRequest request);
+    List<TaskCenterDTO> getApiTasks(@Param("request") TaskCenterRequest request);
+    List<TaskCenterDTO> getScenarioTasks(@Param("request") TaskCenterRequest request);
+    List<TaskCenterDTO> getPerfTasks(@Param("request") TaskCenterRequest request);
+    TaskStatisticsDTO getRunningTasks(@Param("request") TaskCenterRequest request);
 
     List<TaskCenterDTO> getCases(@Param("id") String id);
 

backend/src/main/java/io/metersphere/base/mapper/ext/ExtTaskMapper.xml

@@ -1,74 +1,88 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
 <mapper namespace="io.metersphere.base.mapper.ext.ExtTaskMapper">
-    <select id="getTasks" resultType="io.metersphere.task.dto.TaskCenterDTO"
-            parameterType="java.lang.String">
-        SELECT tt.* FROM (
-        (select t.id,if(t.scenario_id like "[\"%\"]", t.name,t.scenario_name) as name ,'SCENARIO' as
-        executionModule,t.report_type, ifnull(t2.name,'LOCAL') as actuator, t1.`name` as executor,t.create_time as
-        executionTime, t.trigger_mode as triggerMode ,t.status as executionStatus
-        from api_scenario_report t inner join `user` t1 ON t.user_id = t1.id left join test_resource_pool t2 on
+    <select id="getApiTasks" resultType="io.metersphere.task.dto.TaskCenterDTO" parameterType="java.lang.String">
+        SELECT t.id,t.name,'API' AS executionModule, t.report_type, ifnull(t2.name,'LOCAL') AS actuator, t1.`name` AS
+        executor,t.create_time AS executionTime, ifnull(t.trigger_mode,'MANUAL') AS triggerMode
+        ,ifnull(t.status,'Saved') AS executionStatus
+        FROM api_definition_exec_result t INNER JOIN `user` t1 ON t.user_id = t1.id LEFT JOIN test_resource_pool t2 ON
         t.actuator = t2.id
-        where to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) and t.execute_type !='Debug' and t.execute_type
-        !='Marge' and t.project_id in
-        <foreach collection="request.projects" item="id" separator="," open="(" close=")">
-            #{id}
-        </foreach>
-        <if test="request.triggerMode != null and request.triggerMode != ''">
-            and t.trigger_mode = #{request.triggerMode}
-        </if>
-        <if test="request.executionStatus != null and request.executionStatus != ''">
-            and t.status = #{request.executionStatus}
-        </if>
-        <if test="request.executor != null and request.executor != ''">
-            and t.user_id = #{request.executor}
-        </if>
-        )
-        UNION ALL
-        (select t.id,t.name,'API' as executionModule, t.report_type, ifnull(t2.name,'LOCAL') as actuator, t1.`name` as
-        executor,t.create_time as executionTime, ifnull(t.trigger_mode,'MANUAL') as triggerMode
-        ,ifnull(t.status,'Saved') as executionStatus
-        from api_definition_exec_result t inner join `user` t1 ON t.user_id = t1.id left join test_resource_pool t2 on
-        t.actuator = t2.id
-        where to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) and t.project_id in
+        WHERE to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) AND t.project_id IN
         <foreach collection="request.projects" item="id" separator="," open="(" close=")">
             #{id}
         </foreach>
 
         <if test="request.triggerMode != null and request.triggerMode != ''">
-            and t.trigger_mode = #{request.triggerMode}
+            <choose>
+                <when test="request.triggerMode== 'API'">
+                    AND t.trigger_mode in ('JENKINS_API_PLAN', 'JENKINS_SCENARIO_PLAN', 'JENKINS_PERFORMANCE_TEST', 'JENKINS')
+                </when>
+            </choose>
         </if>
         <if test="request.executionStatus != null and request.executionStatus != ''">
-            and t.status = #{request.executionStatus}
+            AND t.status = #{request.executionStatus}
         </if>
         <if test="request.executor != null and request.executor != ''">
-            and t.user_id = #{request.executor}
+            AND t.user_id = #{request.executor}
         </if>
-        and (t.integrated_report_id is null or t.integrated_report_id = 'null')
-        )
-        UNION ALL
-        (select t.id,t.name,'PERFORMANCE' as executionModule,'PERFORMANCE' as report_type, ifnull(t2.name,'LOCAL') as
-        actuator, t1.`name` as executor,t.create_time as executionTime, t.trigger_mode as triggerMode ,t.`status` as
-        executionStatus
-        from load_test_report t inner join `user` t1 ON t.user_id = t1.id left join test_resource_pool t2 on
-        t.test_resource_pool_id = t2.id
-        where to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) and t.project_id in
+        AND (t.integrated_report_id IS NULL OR t.integrated_report_id = 'null')
+        ORDER BY t.create_time DESC
+    </select>
+
+    <select id="getScenarioTasks" resultType="io.metersphere.task.dto.TaskCenterDTO" parameterType="java.lang.String">
+        SELECT t.id,t.name AS name ,'SCENARIO' AS
+        executionModule,t.report_type, ifnull(t2.name,'LOCAL') AS actuator, t1.`name` AS executor,t.create_time AS
+        executionTime, t.trigger_mode AS triggerMode ,t.status AS executionStatus
+        FROM api_scenario_report t INNER JOIN `user` t1 ON t.user_id = t1.id LEFT JOIN test_resource_pool t2 ON
+        t.actuator = t2.id
+        WHERE to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) AND t.execute_type !='Debug' AND t.execute_type
+        !='Marge' AND t.project_id IN
         <foreach collection="request.projects" item="id" separator="," open="(" close=")">
             #{id}
         </foreach>
         <if test="request.triggerMode != null and request.triggerMode != ''">
-            and t.trigger_mode = #{request.triggerMode}
+            <choose>
+                <when test="request.triggerMode== 'API'">
+                    AND t.trigger_mode in ('JENKINS_API_PLAN', 'JENKINS_SCENARIO_PLAN', 'JENKINS_PERFORMANCE_TEST', 'JENKINS')
+                </when>
+            </choose>
         </if>
         <if test="request.executionStatus != null and request.executionStatus != ''">
-            and t.status = #{request.executionStatus}
+            AND t.status = #{request.executionStatus}
         </if>
         <if test="request.executor != null and request.executor != ''">
-            and t.user_id = #{request.executor}
+            AND t.user_id = #{request.executor}
         </if>
-        )
-        )tt ORDER BY tt.executionTime DESC
+        ORDER BY t.create_time DESC
     </select>
 
+    <select id="getPerfTasks" resultType="io.metersphere.task.dto.TaskCenterDTO"  parameterType="java.lang.String">
+        SELECT t.id,t.name,'PERFORMANCE' AS executionModule,'PERFORMANCE' AS report_type, ifnull(t2.name,'LOCAL') AS
+        actuator, t1.`name` AS executor,t.create_time AS executionTime, t.trigger_mode AS triggerMode ,t.`status` AS
+        executionStatus
+        FROM load_test_report t INNER JOIN `user` t1 ON t.user_id = t1.id LEFT JOIN test_resource_pool t2 ON
+        t.test_resource_pool_id = t2.id
+        WHERE to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) AND t.project_id IN
+        <foreach collection="request.projects" item="id" separator="," open="(" close=")">
+            #{id}
+        </foreach>
+        <if test="request.triggerMode != null and request.triggerMode != ''">
+            <choose>
+                <when test="request.triggerMode== 'API'">
+                    AND t.trigger_mode in ('JENKINS_API_PLAN', 'JENKINS_SCENARIO_PLAN', 'JENKINS_PERFORMANCE_TEST', 'JENKINS')
+                </when>
+            </choose>
+        </if>
+        <if test="request.executionStatus != null and request.executionStatus != ''">
+            AND t.status = #{request.executionStatus}
+        </if>
+        <if test="request.executor != null and request.executor != ''">
+            AND t.user_id = #{request.executor}
+        </if>
+        ORDER BY t.create_time DESC
+    </select>
+
+
     <select id="getCases" resultType="io.metersphere.task.dto.TaskCenterDTO" parameterType="java.lang.String">
         select t.id,t.name,'API' as executionModule, ifnull(t2.name,'LOCAL') as actuator, t1.`name` as executor,t.create_time as executionTime, ifnull(t.trigger_mode,'MANUAL') as triggerMode ,ifnull(t.status,'Saved') as executionStatus
         from api_definition_exec_result t
@@ -86,73 +100,93 @@
         where  t.execute_type ='Debug' and t.scenario_id=#{id} ORDER BY t.create_time desc LIMIT 5;
     </select>
 
-    <select id="getRunningTasks" resultType="java.lang.Integer" parameterType="java.lang.String">
-        SELECT count(tt.id) FROM (
-        (select t.id,'SCENARIO' as executionModule,t.report_type, ifnull(t2.name,'LOCAL') as actuator, t1.`name` as
-        executor,t.create_time as executionTime, t.trigger_mode as triggerMode ,t.status as executionStatus
-        from api_scenario_report t left join `user` t1 ON t.user_id = t1.id left join test_resource_pool t2 on
-        t.actuator = t2.id
-        where to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) and t.execute_type !='Debug' and t.execute_type
-        !='Marge' and t.project_id in
+    <select id="getRunningTasks" resultType="io.metersphere.task.dto.TaskStatisticsDTO" parameterType="java.lang.String">
+        SELECT (
+        SELECT
+        count( t.id )
+        FROM
+        api_scenario_report t
+        LEFT JOIN `user` t1 ON t.user_id = t1.id
+        LEFT JOIN test_resource_pool t2 ON t.actuator = t2.id
+        WHERE
+        to_days(FROM_UNIXTIME( t.create_time / 1000 ))= to_days(now())
+        AND t.execute_type != 'Debug'
+        AND t.execute_type != 'Marge'
+        AND t.project_id IN
         <foreach collection="request.projects" item="id" separator="," open="(" close=")">
             #{id}
         </foreach>
         <if test="request.triggerMode != null and request.triggerMode != ''">
-            and t.trigger_mode = #{request.triggerMode}
+            <choose>
+                <when test="request.triggerMode== 'API'">
+                    AND t.trigger_mode in ('JENKINS_API_PLAN', 'JENKINS_SCENARIO_PLAN', 'JENKINS_PERFORMANCE_TEST', 'JENKINS')
+                </when>
+            </choose>
         </if>
         <if test="request.executionStatus != null and request.executionStatus != ''">
-            and t.status = #{request.executionStatus}
+            AND t.status = #{request.executionStatus}
         </if>
         <if test="request.executor != null and request.executor != ''">
-            and t.user_id = #{request.executor}
+            AND t.user_id = #{request.executor}
         </if>
-        and t.status in ("running","starting","waiting")
-        )
-        UNION ALL
-        (select t.id,'API' as executionModule, t.report_type, ifnull(t2.name,'LOCAL') as actuator, t1.`name` as
-        executor,t.create_time as executionTime, ifnull(t.trigger_mode,'MANUAL') as triggerMode
-        ,ifnull(t.status,'Saved') as executionStatus
-        from api_definition_exec_result t left join `user` t1 ON t.user_id = t1.id left join test_resource_pool t2 on
-        t.actuator = t2.id
-        where to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) and t.project_id in
+        AND t.status IN ("running","starting","waiting")
+        ) as scenarioTotal ,
+        (SELECT
+        count( t.id )
+        FROM
+        api_definition_exec_result t
+        LEFT JOIN `user` t1 ON t.user_id = t1.id
+        LEFT JOIN test_resource_pool t2 ON t.actuator = t2.id
+        WHERE
+        to_days( FROM_UNIXTIME( t.create_time / 1000 ))= to_days(now())
+        AND t.project_id IN
         <foreach collection="request.projects" item="id" separator="," open="(" close=")">
             #{id}
         </foreach>
 
         <if test="request.triggerMode != null and request.triggerMode != ''">
-            and t.trigger_mode = #{request.triggerMode}
+            <choose>
+                <when test="request.triggerMode== 'API'">
+                    AND t.trigger_mode in ('JENKINS_API_PLAN', 'JENKINS_SCENARIO_PLAN', 'JENKINS_PERFORMANCE_TEST', 'JENKINS')
+                </when>
+            </choose>
         </if>
         <if test="request.executionStatus != null and request.executionStatus != ''">
-            and t.status = #{request.executionStatus}
+            AND t.status = #{request.executionStatus}
         </if>
         <if test="request.executor != null and request.executor != ''">
-            and t.user_id = #{request.executor}
+            AND t.user_id = #{request.executor}
         </if>
-        and (t.integrated_report_id is null or t.integrated_report_id = 'null')
-        and t.status in ("running","starting","waiting")
-        )
-        UNION ALL
-        (select t.id,'PERFORMANCE' as executionModule,'PERFORMANCE' as report_type, ifnull(t2.name,'LOCAL') as actuator,
-        t1.`name` as executor,t.create_time as executionTime, t.trigger_mode as triggerMode ,t.`status` as
-        executionStatus
-        from load_test_report t left join `user` t1 ON t.user_id = t1.id left join test_resource_pool t2 on
-        t.test_resource_pool_id = t2.id
-        where to_days(FROM_UNIXTIME(t.create_time/1000))= to_days(now()) and t.project_id in
+        AND (t.integrated_report_id IS NULL OR t.integrated_report_id = 'null')
+        AND t.status IN ("running","starting","waiting")
+        ) as apiTotal ,
+        (SELECT
+        count( t.id )
+        FROM
+        load_test_report t
+        LEFT JOIN `user` t1 ON t.user_id = t1.id
+        LEFT JOIN test_resource_pool t2 ON t.test_resource_pool_id = t2.id
+        WHERE
+        to_days(FROM_UNIXTIME( t.create_time / 1000 ))= to_days(now())
+        AND t.project_id IN
         <foreach collection="request.projects" item="id" separator="," open="(" close=")">
             #{id}
         </foreach>
         <if test="request.triggerMode != null and request.triggerMode != ''">
-            and t.trigger_mode = #{request.triggerMode}
+            <choose>
+                <when test="request.triggerMode== 'API'">
+                    AND t.trigger_mode in ('JENKINS_API_PLAN', 'JENKINS_SCENARIO_PLAN', 'JENKINS_PERFORMANCE_TEST', 'JENKINS')
+                </when>
+            </choose>
         </if>
         <if test="request.executionStatus != null and request.executionStatus != ''">
-            and t.status = #{request.executionStatus}
+            AND t.status = #{request.executionStatus}
         </if>
         <if test="request.executor != null and request.executor != ''">
-            and t.user_id = #{request.executor}
+            AND t.user_id = #{request.executor}
         </if>
-        and t.status in ("running","starting","waiting")
-        )
-        )tt;
+        AND t.status IN ("running","starting","waiting")
+        ) as perfTotal
     </select>
 
     <select id="checkActuator" resultType="java.lang.String" parameterType="java.lang.String">

backend/src/main/java/io/metersphere/commons/constants/TaskCenterType.java

@@ -0,0 +1,5 @@
+package io.metersphere.commons.constants;
+
+public enum TaskCenterType {
+    API, SCENARIO, PERF
+}

backend/src/main/java/io/metersphere/task/controller/TaskController.java

@@ -1,11 +1,9 @@
 package io.metersphere.task.controller;
 
-import com.github.pagehelper.Page;
-import com.github.pagehelper.PageHelper;
-import io.metersphere.commons.utils.PageUtils;
 import io.metersphere.commons.utils.Pager;
 import io.metersphere.task.dto.TaskCenterDTO;
 import io.metersphere.task.dto.TaskCenterRequest;
+import io.metersphere.task.dto.TaskStatisticsDTO;
 import io.metersphere.task.service.TaskService;
 import org.springframework.web.bind.annotation.*;
 
@@ -23,8 +21,7 @@ public class TaskController {
         request.setProjects(taskService.getOwnerProjectIds(request.getUserId()));
         request.setGoPage(goPage);
         request.setPageSize(pageSize);
-        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
-        return PageUtils.setPageInfo(page, taskService.getTasks(request));
+        return taskService.getTasks(request);
     }
 
     @GetMapping("/case/{id}")
@@ -38,7 +35,7 @@ public class TaskController {
     }
 
     @PostMapping("/count/running")
-    public int getRunningTasks(@RequestBody TaskCenterRequest request) {
+    public TaskStatisticsDTO getRunningTasks(@RequestBody TaskCenterRequest request) {
         return taskService.getRunningTasks(request);
     }
 

backend/src/main/java/io/metersphere/task/dto/TaskCenterRequest.java

@@ -29,4 +29,7 @@ public class TaskCenterRequest {
     private int pageSize;
 
     List<String> projects;
+
+    private String activeName;
+
 }

backend/src/main/java/io/metersphere/task/dto/TaskStatisticsDTO.java

@@ -0,0 +1,16 @@
+package io.metersphere.task.dto;
+
+import lombok.Data;
+
+@Data
+public class TaskStatisticsDTO {
+    private int apiTotal;
+    private int scenarioTotal;
+    private int perfTotal;
+    // 总量
+    private int total;
+
+    public int getTotal() {
+        return apiTotal + scenarioTotal + perfTotal;
+    }
+}

backend/src/main/java/io/metersphere/task/service/TaskService.java

@@ -1,6 +1,8 @@
 package io.metersphere.task.service;
 
 import com.alibaba.fastjson.JSON;
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageHelper;
 import io.metersphere.api.dto.automation.TaskRequest;
 import io.metersphere.api.exec.queue.ExecThreadPoolExecutor;
 import io.metersphere.api.exec.queue.PoolExecBlockingQueueUtil;
@@ -16,13 +18,17 @@ import io.metersphere.base.mapper.ext.ExtApiDefinitionExecResultMapper;
 import io.metersphere.base.mapper.ext.ExtApiScenarioReportMapper;
 import io.metersphere.base.mapper.ext.ExtLoadTestReportMapper;
 import io.metersphere.base.mapper.ext.ExtTaskMapper;
+import io.metersphere.commons.constants.TaskCenterType;
 import io.metersphere.commons.utils.LogUtil;
+import io.metersphere.commons.utils.PageUtils;
+import io.metersphere.commons.utils.Pager;
 import io.metersphere.dto.NodeDTO;
 import io.metersphere.jmeter.LocalRunner;
 import io.metersphere.performance.service.PerformanceTestService;
 import io.metersphere.service.CheckPermissionService;
 import io.metersphere.task.dto.TaskCenterDTO;
 import io.metersphere.task.dto.TaskCenterRequest;
+import io.metersphere.task.dto.TaskStatisticsDTO;
 import io.metersphere.utils.LoggerUtil;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
@@ -77,17 +83,42 @@ public class TaskService {
         return new ArrayList<>(userRelatedProjectIds);
     }
 
-    public List<TaskCenterDTO> getTasks(TaskCenterRequest request) {
+    public Pager<List<TaskCenterDTO>> getTasks(TaskCenterRequest request) {
+        Page<Object> page = PageHelper.startPage(request.getGoPage(), request.getPageSize(), true);
+        if (StringUtils.equals(request.getActiveName(), TaskCenterType.SCENARIO.name())) {
+            return PageUtils.setPageInfo(page, getScenarioTasks(request));
+        } else if (StringUtils.equals(request.getActiveName(), TaskCenterType.PERF.name())) {
+            return PageUtils.setPageInfo(page, getPerfTasks(request));
+        } else {
+            return PageUtils.setPageInfo(page, getApiTasks(request));
+        }
+    }
+
+    public List<TaskCenterDTO> getApiTasks(TaskCenterRequest request) {
         if (CollectionUtils.isEmpty(request.getProjects())) {
             return new ArrayList<>();
         }
-        return extTaskMapper.getTasks(request);
+        return extTaskMapper.getApiTasks(request);
     }
 
-    public int getRunningTasks(TaskCenterRequest request) {
+    public List<TaskCenterDTO> getPerfTasks(TaskCenterRequest request) {
+        if (CollectionUtils.isEmpty(request.getProjects())) {
+            return new ArrayList<>();
+        }
+        return extTaskMapper.getPerfTasks(request);
+    }
+
+    public List<TaskCenterDTO> getScenarioTasks(TaskCenterRequest request) {
+        if (CollectionUtils.isEmpty(request.getProjects())) {
+            return new ArrayList<>();
+        }
+        return extTaskMapper.getScenarioTasks(request);
+    }
+
+    public TaskStatisticsDTO getRunningTasks(TaskCenterRequest request) {
         request.setProjects(this.getOwnerProjectIds(request.getUserId()));
         if (CollectionUtils.isEmpty(request.getProjects())) {
-            return 0;
+            return new TaskStatisticsDTO();
         }
         return extTaskMapper.getRunningTasks(request);
     }

backend/src/main/java/io/metersphere/websocket/TaskCenterWebSocket.java

@@ -1,8 +1,11 @@
 package io.metersphere.websocket;
 
+import com.alibaba.fastjson.JSON;
 import io.metersphere.commons.utils.LogUtil;
 import io.metersphere.task.dto.TaskCenterRequest;
+import io.metersphere.task.dto.TaskStatisticsDTO;
 import io.metersphere.task.service.TaskService;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Component;
 
 import javax.annotation.Resource;
@@ -13,11 +16,12 @@ import java.util.Timer;
 import java.util.TimerTask;
 import java.util.concurrent.ConcurrentHashMap;
 
-@ServerEndpoint("/task/center/count/running/{projectId}/{userId}")
+@ServerEndpoint("/task/center/count/running/{userId}/{triggerMode}")
 @Component
 public class TaskCenterWebSocket {
     private static TaskService taskService;
     private static ConcurrentHashMap<Session, Timer> refreshTasks = new ConcurrentHashMap<>();
+    private final static String ALL = "ALL";
 
     @Resource
     public void setTaskService(TaskService taskService) {
@@ -28,9 +32,11 @@ public class TaskCenterWebSocket {
      * 开启连接的操作
      */
     @OnOpen
-    public void onOpen(@PathParam("projectId") String projectId, @PathParam("userId") String userId, Session session) {
+    public void onOpen(@PathParam("userId") String userId,
+                       @PathParam("triggerMode") String triggerMode,
+                       Session session) {
         Timer timer = new Timer(true);
-        TaskCenterWebSocket.TaskCenter task = new TaskCenterWebSocket.TaskCenter(session, projectId, userId);
+        TaskCenterWebSocket.TaskCenter task = new TaskCenterWebSocket.TaskCenter(session, userId,triggerMode);
         timer.schedule(task, 0, 10 * 1000);
         refreshTasks.putIfAbsent(session, timer);
     }
@@ -51,7 +57,9 @@ public class TaskCenterWebSocket {
      * 推送消息
      */
     @OnMessage
-    public void onMessage(@PathParam("projectId") String projectId, @PathParam("userId") String userId, Session session, String message) {
+    public void onMessage(@PathParam("userId") String userId,
+                          @PathParam("triggerMode") String triggerMode,
+                          Session session, String message) {
         int refreshTime = 10;
         try {
             refreshTime = Integer.parseInt(message);
@@ -62,7 +70,7 @@ public class TaskCenterWebSocket {
             timer.cancel();
 
             Timer newTimer = new Timer(true);
-            newTimer.schedule(new TaskCenterWebSocket.TaskCenter(session, projectId, userId), 0, refreshTime * 1000L);
+            newTimer.schedule(new TaskCenter(session, userId, triggerMode), 0, refreshTime * 1000L);
             refreshTasks.put(session, newTimer);
         } catch (Exception e) {
             LogUtil.error(e.getMessage(), e);
@@ -82,23 +90,27 @@ public class TaskCenterWebSocket {
         private Session session;
         private TaskCenterRequest request;
 
-        TaskCenter(Session session, String projectId, String userId) {
+        TaskCenter(Session session, String userId, String triggerMode) {
             this.session = session;
             TaskCenterRequest request = new TaskCenterRequest();
-            request.setProjectId(projectId);
+            if (!StringUtils.equals(triggerMode, ALL)) {
+                request.setTriggerMode(triggerMode);
+            }
             request.setUserId(userId);
+            request.setExecutor(userId);
             this.request = request;
         }
 
         @Override
         public void run() {
             try {
-                int taskTotal = taskService.getRunningTasks(request);
+                TaskStatisticsDTO task = taskService.getRunningTasks(request);
                 if (!session.isOpen()) {
                     return;
                 }
-                session.getBasicRemote().sendText(taskTotal + "");
-                if (taskTotal == 0) {
+                session.getBasicRemote().sendText(JSON.toJSONString(task));
+                if (task.getTotal() == 0) {
+                    session.getBasicRemote().sendText(JSON.toJSONString(task));
                     session.close();
                 }
             } catch (Exception e) {

frontend/src/business/components/task/TaskCenter.vue

@@ -32,7 +32,7 @@
       :title="$t('commons.task_center')"
       :size="size.toString()"
       custom-class="ms-drawer-task">
-      <el-card style="float: left;width: 850px" v-if="size > 550 ">
+      <el-card style="float: left;width: 850px" :style="{'width': (size - 600)+'px'}" v-if="size > 600 ">
         <div class="ms-task-opt-btn" @click="packUp">{{ $t('commons.task_close') }}</div>
         <!-- 接口用例结果 -->
         <ms-request-result-tail :response="response" ref="debugResult" v-if="executionModule === 'API' && reportType !=='API_INTEGRATED'"/>
@@ -48,7 +48,7 @@
             <el-row>
               <el-col :span="12">
                 <el-form-item :label="$t('test_track.report.list.trigger_mode')" prop="runMode">
-                  <el-select size="small" style="margin-right: 10px" v-model="condition.triggerMode" @change="init"
+                  <el-select size="mini" style="margin-right: 10px" v-model="condition.triggerMode" @change="changeInit"
                              :disabled="isDebugHistory">
                     <el-option v-for="item in runMode" :key="item.id" :value="item.id" :label="item.label"/>
                   </el-select>
@@ -56,7 +56,7 @@
               </el-col>
               <el-col :span="12">
                 <el-form-item :label="$t('commons.status')" prop="status">
-                  <el-select size="small" style="margin-right: 10px" v-model="condition.executionStatus" @change="init"
+                  <el-select size="mini" style="margin-right: 10px" v-model="condition.executionStatus" @change="init(true)"
                              :disabled="isDebugHistory">
                     <el-option v-for="item in runStatus" :key="item.id" :value="item.id" :label="item.label"/>
                   </el-select>
@@ -67,7 +67,7 @@
               <el-col :span="12">
                 <el-form-item :label="$t('commons.executor')" prop="status">
                   <el-select v-model="condition.executor" :placeholder="$t('commons.executor')" filterable size="small"
-                             style="margin-right: 10px" @change="init" :disabled="isDebugHistory">
+                             style="margin-right: 10px" @change="init(true)" :disabled="isDebugHistory">
                     <el-option
                       v-for="item in maintainerOptions"
                       :key="item.id"
@@ -78,7 +78,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-button size="small" class="ms-task-stop" @click="stop(null)" :disabled="isDebugHistory">
+                <el-button size="mini" class="ms-task-stop" @click="stop(null)" :disabled="isDebugHistory">
                   {{ $t('report.stop_btn_all') }}
                 </el-button>
               </el-col>
@@ -87,44 +87,26 @@
         </div>
         <el-divider direction="horizontal" style="width: 100%"/>
 
-        <div class="report-container">
-          <div v-for="item in taskData" :key="item.id" style="margin-bottom: 5px;">
-            <el-card class="ms-card-task" @click.native="showReport(item)">
-              <span>
-                {{ getModeName(item.executionModule) }} : <el-link type="primary" class="ms-task-name-width"> {{
-                  item.name
-                }} </el-link>
+        <el-tabs v-model="activeName" @tab-click="init(true)" v-loading="loading">
+          <el-tab-pane :key="tab.id" :name="tab.id" :label="tab.label" v-for="tab in tabs" :disabled="isDebugHistory">
+            <span slot="label">
+              <el-badge class="ms-badge-item" v-if="showBadge(tab.id) > 0" :value="showBadge(tab.id)">
+                {{ tab.label }}
+              </el-badge>
+              <span style="font-size: 13px" v-else>{{ tab.label }}</span>
             </span>
-              <el-button size="mini" class="ms-task-stop" @click.stop @click="stop(item)"
-                         v-if="showStop(item.executionStatus)">
-                {{ $t('report.stop_btn') }}
-              </el-button>
-              <br/>
-              <span>
-                  {{ $t('commons.actuator') }}：{{ item.actuator }} {{ $t('commons.from') }} {{ item.executor }} {{
-                  item.executionTime | timestampFormatDate
-                }} {{ getMode(item.triggerMode) }}
-              </span>
-              <br/>
-              <el-row>
-                <el-col :span="20">
-                  <el-progress :percentage="getPercentage(item.executionStatus)" :format="format"/>
-                </el-col>
-                <el-col :span="4">
-                  <span :class="showClass(item.executionStatus.toLowerCase())">
-                     {{ showStatus(item.executionStatus.toLowerCase()) }}
-                  </span>
-                </el-col>
-              </el-row>
-            </el-card>
-          </div>
-        </div>
-        <div class="report-bottom">
-          <ms-table-pagination v-if="showType !== 'SCENARIO' && showType !== 'CASE'" :change="init"
-                               :current-page.sync="currentPage" :page-size.sync="pageSize" :total="total"
-                               small/>
-          <span v-else> {{ $t('commons.task_center_remark') }}</span>
-        </div>
+            <task-center-item
+              :task-data="taskData"
+              :is-debug-history="isDebugHistory"
+              :show-type="showType"
+              :total="total"
+              :maintainer-options="maintainerOptions"
+              @packUp="packUp"
+              @nextPage="nextPage"
+              @showReport="showReport"
+            />
+          </el-tab-pane>
+        </el-tabs>
       </el-card>
 
     </el-drawer>
@@ -134,11 +116,13 @@
 <script>
 import MsDrawer from "../common/components/MsDrawer";
 import {getCurrentProjectID, getCurrentUser, hasPermissions} from "@/common/js/utils";
+import TaskCenterItem from "./TaskCenterItem";
 
 export default {
   name: "MsTaskCenter",
   components: {
     MsDrawer,
+    TaskCenterItem,
     MsRequestResultTail: () => import("../../components/api/definition/components/response/RequestResultTail"),
     MsApiReportDetail: () => import("../../components/api/automation/report/ApiReportDetail"),
     PerformanceReportView: () => import("../../components/performance/report/PerformanceReportView"),
@@ -162,7 +146,7 @@ export default {
       currentPage: 1,
       total: 0,
       runMode: [
-        {id: '', label: this.$t('api_test.definition.document.data_set.all')},
+        {id: 'ALL', label: this.$t('api_test.definition.document.data_set.all')},
         {id: 'BATCH', label: this.$t('api_test.automation.batch_execute')},
         {id: 'SCHEDULE', label: this.$t('commons.trigger_mode.schedule')},
         {id: 'MANUAL', label: this.$t('commons.trigger_mode.manual')},
@@ -185,11 +169,18 @@ export default {
       condition: {triggerMode: "", executionStatus: ""},
       maintainerOptions: [],
       websocket: Object,
-      size: 550,
+      size: 600,
       reportId: "",
       executionModule: "",
       reportType: "",
-      isDebugHistory: false
+      isDebugHistory: false,
+      runningData: {},
+      activeName: "API",
+      tabs: [
+        {id: 'API', label: this.$t('task.api_title')},
+        {id: 'SCENARIO', label: this.$t('task.scenario_title')},
+        {id: 'PERF', label: this.$t('task.perf_title')}
+      ],
     };
   },
   props: {
@@ -242,7 +233,7 @@ export default {
       return '';
     },
     packUp() {
-      this.size = 550;
+      this.size = 600;
     },
     stop(row) {
       let array = [];
@@ -256,7 +247,7 @@ export default {
       }
       this.$post('/api/automation/stop/batch', array, response => {
         this.$success(this.$t('report.test_stop_success'));
-        this.init();
+        this.init(true);
       });
     },
     getMaintainerOptions() {
@@ -270,7 +261,8 @@ export default {
       if (window.location.protocol === 'https:') {
         protocol = "wss://";
       }
-      const uri = protocol + window.location.host + "/task/center/count/running/" + getCurrentProjectID() + "/" + getCurrentUser().id;
+      this.condition.triggerMode = this.condition.triggerMode || 'ALL';
+      const uri = protocol + window.location.host + "/task/center/count/running/" + this.condition.executor + "/" + this.condition.triggerMode;
       this.websocket = new WebSocket(uri);
       this.websocket.onmessage = this.onMessage;
       this.websocket.onopen = this.onOpen;
@@ -282,24 +274,40 @@ export default {
     onError(e) {
     },
     onMessage(e) {
-      this.currentPage = 1;
       this.loading = false;
-      let taskTotal = e.data;
-      this.runningTotal = taskTotal;
-      this.initIndex++;
-      if (this.taskVisible && this.initEnd) {
-        setTimeout(() => {
-          this.initEnd = false;
-          this.init();
-        }, 3000);
+      this.runningData = JSON.parse(e.data);
+      if (this.runningData) {
+        this.setActiveName();
       }
+      this.runningTotal = this.runningData.total;
+      this.init(true);
     },
     onClose(e) {
     },
+    changeInit(){
+      if (this.websocket && this.websocket.close instanceof Function) {
+        this.websocket.close();
+      }
+      this.getTaskRunning();
+      this.init(true);
+    },
+    setActiveName() {
+      if (this.runningData.apiTotal > 0) {
+        this.activeName = 'API';
+      } else if (this.runningData.scenarioTotal > 0) {
+        this.activeName = 'SCENARIO';
+      } else if (this.runningData.perfTotal > 0) {
+        this.activeName = 'PERF';
+      }
+    },
+    listenScreenChange() {
+      this.size = document.body.clientWidth;
+    },
     showTaskCenter() {
+      this.init(true);
       this.getTaskRunning();
       this.getMaintainerOptions();
-      this.init();
+      window.addEventListener("resize", this.listenScreenChange, false);
       this.taskVisible = true;
     },
     close() {
@@ -311,11 +319,11 @@ export default {
         this.websocket.close();
       }
     },
-    open() {
+    open(activeName) {
+      if (activeName) {
+        this.activeName = activeName;
+      }
       this.showTaskCenter();
-      this.initIndex = 0;
-      this.noMore = false;
-      this.currentPage = 1;
     },
     getPercentage(status) {
       if (status) {
@@ -349,7 +357,7 @@ export default {
       }
     },
     showReport(row) {
-      if (this.size > 550 && this.reportId === row.id) {
+      if (this.size > 600 && this.reportId === row.id) {
         this.packUp();
         return;
       }
@@ -408,20 +416,22 @@ export default {
     getTaskRunning() {
       this.initWebSocket();
     },
-    init() {
+    init(loading) {
       if (this.showType === "CASE" || this.showType === "SCENARIO") {
         return;
       }
       this.condition.projectId = getCurrentProjectID();
       this.condition.userId = getCurrentUser().id;
+      this.condition.activeName = this.activeName;
+      this.loading = loading;
       this.result = this.$post('/task/center/list/' + this.currentPage + '/' + this.pageSize, this.condition, response => {
         this.total = response.data.itemCount;
         this.taskData = response.data.listObject;
-        this.initEnd = true;
         this.loading = false;
       });
     },
     initCaseHistory(id) {
+      this.activeName = 'API';
       this.result = this.$get('/task/center/case/' + id, response => {
         this.taskData = response.data;
       });
@@ -434,6 +444,7 @@ export default {
       this.showType = "CASE";
     },
     openScenarioHistory(id) {
+      this.activeName = 'SCENARIO';
       this.result = this.$get('/task/center/scenario/' + id, response => {
         this.taskData = response.data;
       });
@@ -441,7 +452,22 @@ export default {
       this.isDebugHistory = true;
       this.condition.triggerMode = "MANUAL";
       this.taskVisible = true;
+    },
+    showBadge(executionModule) {
+      switch (executionModule) {
+        case "SCENARIO":
+          return this.runningData.scenarioTotal;
+        case "PERF":
+          return this.runningData.perfTotal;
+        case "API":
+          return this.runningData.apiTotal;
       }
+    },
+    nextPage(currentPage, pageSize) {
+      this.currentPage = currentPage;
+      this.pageSize = pageSize;
+      this.init();
+    },
   }
 };
 </script>
@@ -620,4 +646,17 @@ export default {
 .report-bottom {
   margin-top: 10px;
 }
+
+.ms-badge-item {
+  margin-top: 0px;
+  margin-right: 0px;
+  font-size: 13px;
+}
+
+/deep/ .el-badge__content.is-fixed {
+  transform: translateY(-10%) translateX(100%);
+  border-radius: 10px;
+}
+
+
 </style>

frontend/src/business/components/task/TaskCenterItem.vue

@@ -0,0 +1,241 @@
+<template>
+  <div>
+    <div class="ms-body-container">
+      <div v-for="item in taskData" :key="item.id" style="margin-bottom: 5px;">
+        <el-card class="ms-card-task" @click.native="showReport(item)">
+          <span>
+            {{ getModeName(item.executionModule) }} :
+            <el-link type="primary" class="ms-task-name-width"> {{ item.name }} </el-link>
+          </span>
+          <el-button size="mini" class="ms-task-stop"
+                     @click.stop @click="stop(item)"
+                     v-if="showStop(item.executionStatus)">
+            {{ $t('report.stop_btn') }}
+          </el-button>
+          <br/>
+          <span>
+            {{ $t('commons.actuator') }}：
+            {{ item.actuator }}
+            {{ $t('commons.from') }}
+            {{ item.executor }}
+            {{ item.executionTime | timestampFormatDate }}
+            {{ getMode(item.triggerMode) }}
+          </span>
+          <br/>
+          <el-row>
+            <el-col :span="20">
+              <el-progress :percentage="getPercentage(item.executionStatus)" :format="format"/>
+            </el-col>
+            <el-col :span="4">
+              <ms-task-report-status :status="item.executionStatus"/>
+            </el-col>
+          </el-row>
+        </el-card>
+      </div>
+    </div>
+    <div class="report-bottom">
+      <ms-table-pagination
+        :current-page.sync="currentPage"
+        :page-size.sync="pageSize"
+        :total="total"
+        :change="init"
+        v-if="showType !== 'SCENARIO' && showType !== 'CASE'" small/>
+      <span v-else> {{ $t('commons.task_center_remark') }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getCurrentProjectID, getCurrentUser} from "@/common/js/utils";
+
+export default {
+  name: "TaskCenterItem",
+  components: {
+    MsTaskReportStatus: () => import("./TaskReportStatus"),
+    MsTablePagination: () => import("./TaskPagination"),
+  },
+  inject: [
+    'reload'
+  ],
+  data() {
+    return {
+      pageSize: 10,
+      currentPage: 1,
+      runMode: [
+        {id: '', label: this.$t('api_test.definition.document.data_set.all')},
+        {id: 'BATCH', label: this.$t('api_test.automation.batch_execute')},
+        {id: 'SCHEDULE', label: this.$t('commons.trigger_mode.schedule')},
+        {id: 'MANUAL', label: this.$t('commons.trigger_mode.manual')},
+        {id: 'API', label: this.$t('commons.trigger_mode.api')}
+      ],
+      runStatus: [
+        {id: '', label: this.$t('api_test.definition.document.data_set.all')},
+        {id: 'STARTING', label: 'Starting'},
+        {id: 'PENDING', label: 'Pending'},
+        {id: 'RUNNING', label: 'Running'},
+        {id: 'RERUNNING', label: 'Rerunning'},
+        {id: 'REPORTING', label: 'Reporting'},
+        {id: 'SUCCESS', label: 'Success'},
+        {id: "FAKE_ERROR", label: 'FakeError'},
+        {id: 'ERROR', label: 'Error'},
+        {id: 'STOPPED', label: 'Stopped'},
+        {id: 'COMPLETED', label: 'Completed'},
+      ],
+    }
+  },
+  props: {
+    total: Number,
+    taskData: Array,
+    isDebugHistory: Boolean,
+    showType: String,
+    maintainerOptions: Array
+  },
+  methods: {
+    format(item) {
+      return '';
+    },
+    stop(row) {
+      let array = [];
+      if (row) {
+        let request = {type: row.executionModule, reportId: row.id};
+        array = [request];
+      } else {
+        array.push({type: 'API', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+        array.push({type: 'SCENARIO', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+        array.push({type: 'PERFORMANCE', projectId: getCurrentProjectID(), userId: getCurrentUser().id});
+      }
+      this.$post('/api/automation/stop/batch', array, response => {
+        this.$success(this.$t('report.test_stop_success'));
+        this.init(true);
+      });
+    },
+    getPercentage(status) {
+      if (status) {
+        status = status.toLowerCase();
+        if (status === "pending" || status === 'stopped') {
+          return 0;
+        }
+        if (status === 'saved' || status === 'completed' || status === 'success' || status === 'error' || status ===
+          'pending' || status === 'fake_error') {
+          return 100;
+        }
+      }
+      return 60;
+    },
+    showStop(status) {
+      if (status) {
+        status = status.toLowerCase();
+        if (status === "stopped" || status === 'saved' || status === 'completed' || status === 'success' || status ===
+          'error' || status === 'pending' || status === 'fake_error') {
+          return false;
+        }
+      }
+      return true;
+    },
+    getModeName(executionModule) {
+      switch (executionModule) {
+        case "SCENARIO":
+          return this.$t('test_track.scenario_test_case');
+        case "PERFORMANCE":
+          return this.$t('test_track.performance_test_case');
+        case "API":
+          return this.$t('test_track.api_test_case');
+      }
+    },
+    packUp() {
+      this.$emit("packUp")
+    },
+    showReport(row) {
+      this.$emit("showReport", row)
+    },
+    getMode(mode) {
+      if (mode) {
+        if (mode === 'MANUAL') {
+          return this.$t('commons.trigger_mode.manual');
+        }
+        if (mode === 'SCHEDULE') {
+          return this.$t('commons.trigger_mode.schedule');
+        }
+        if (mode === 'TEST_PLAN_SCHEDULE') {
+          return this.$t('commons.trigger_mode.schedule');
+        }
+        if (mode === 'API') {
+          return this.$t('commons.trigger_mode.api');
+        }
+        if (mode === 'BATCH') {
+          return this.$t('api_test.automation.batch_execute');
+        }
+        if (mode.startsWith('JENKINS')) {
+          return this.$t('commons.trigger_mode.api');
+        }
+      }
+      return mode;
+    },
+    init() {
+      if (this.showType === "CASE" || this.showType === "SCENARIO") {
+        return;
+      }
+      this.$emit("nextPage", this.currentPage, this.pageSize);
+    },
+  }
+};
+</script>
+
+
+<style scoped>
+.ms-body-container {
+  height: calc(100vh - 290px);
+  overflow-y: auto;
+}
+
+.ms-card-task :deep(.el-card__body) {
+  padding: 10px;
+}
+
+.ms-card-task:hover {
+  cursor: pointer;
+  border-color: #783887;
+}
+
+:deep(.el-progress-bar) {
+  padding-right: 20px;
+}
+
+.ms-task-stop {
+  color: #F56C6C;
+  float: right;
+  margin-right: 20px;
+}
+
+
+.ms-task-stop {
+  color: #909399;
+}
+
+.ms-task-name-width {
+  display: inline-block;
+  overflow-x: hidden;
+  padding-bottom: 0;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 300px;
+}
+
+.ms-el-form-item :deep(.el-form-item) {
+  margin-bottom: 6px;
+}
+
+.ms-task-opt-btn i {
+  margin-left: -2px;
+}
+
+.ms-task-opt-btn:hover i {
+  margin-left: 0;
+  color: white;
+}
+
+.report-bottom {
+  margin-top: 10px;
+}
+</style>

frontend/src/business/components/task/TaskReportStatus.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <el-tag size="mini" type="primary" effect="plain" v-if="getStatus(status) === 'running'">
+      {{ showStatus(status) }}
+    </el-tag>
+    <el-tag size="mini" type="success" v-else-if="getStatus(status) === 'success'">
+      {{ showStatus(status) }}
+    </el-tag>
+    <el-tag size="mini" type="danger" v-else-if="getStatus(status) === 'error'">
+      {{ showStatus(status) }}
+    </el-tag>
+    <el-tag size="mini" type="danger" style="background-color: #F6972A; color: #FFFFFF"
+            v-else-if="getStatus(status) === 'fake_error'">
+      FakeError
+    </el-tag>
+    <el-tag v-else size="mini" type="info">
+      {{ showStatus(status) }}
+    </el-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MsTaskReportStatus",
+
+  props: {
+    status: String
+  },
+  methods: {
+    getStatus(status) {
+      if (status) {
+        return status.toLowerCase();
+      }
+      return "PENDING";
+    },
+    showStatus(status) {
+      if (!status) {
+        status = 'PENDING';
+      }
+      return status.toLowerCase()[0].toUpperCase() + status.toLowerCase().substr(1);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/i18n/en-US.js

@@ -3489,5 +3489,11 @@ export default {
       edit_job_template: "Edit Job Template",
       edit_job_template_tip: "The Kubernetes Job template is a text in YAML format that defines the running parameters of the Job. You can edit the Job template here.",
     }
+  },
+  task: {
+    api_title: "Api testing tasks",
+    scenario_title: "Scenario testing tasks",
+    ui_title: "UI testing tasks",
+    perf_title: "Perf testing tasks"
   }
 };

frontend/src/i18n/zh-CN.js

@@ -3496,5 +3496,10 @@ export default {
       edit_job_template: "编辑Job模版",
       edit_job_template_tip: "Kubernetes Job模版是一个YAML格式的文本，用于定义Job的运行参数，您可以在此处编辑Job模版。",
     }
+  },
+  task: {
+    api_title: "接口测试任务",
+    scenario_title: "场景测试任务",
+    perf_title: "性能测试任务"
   }
 };

frontend/src/i18n/zh-TW.js

@@ -3492,5 +3492,11 @@ export default {
       edit_job_template: "編輯Job模版",
       edit_job_template_tip: "Kubernetes Job模版是一個YAML格式的文本，用於定義Job的運行參數，您可以在此處編輯Job模版。",
     }
+  },
+  task: {
+    api_title: "接口測試任務",
+    scenario_title: "場景測試任務",
+    ui_title: "UI測試任務",
+    perf_title: "性能測試任務"
   }
 };