calendar heatmap

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

@@ -1,6 +1,7 @@
 package io.metersphere.base.mapper.ext;
 
 import io.metersphere.base.domain.LoadTestReport;
+import io.metersphere.dto.DashboardTestDTO;
 import io.metersphere.dto.ReportDTO;
 import io.metersphere.performance.controller.request.ReportRequest;
 import org.apache.ibatis.annotations.Param;
@@ -16,4 +17,6 @@ public interface ExtLoadTestReportMapper {
     int appendLine(@Param("testId") String id, @Param("line") String line);
 
     LoadTestReport selectByPrimaryKey(String id);
+
+    List<DashboardTestDTO> selectDashboardTests(@Param("workspaceId") String workspaceId, @Param("startTimestamp") long startTimestamp);
 }

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

@@ -48,10 +48,22 @@
     </update>
 
     <select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
-        select
+        SELECT
-        <include refid="Base_Column_List" />
+        <include refid="Base_Column_List"/>
-        from load_test_report
+        FROM load_test_report
-        where id = #{id,jdbcType=VARCHAR}
+        WHERE id = #{id,jdbcType=VARCHAR}
+    </select>
+
+    <select id="selectDashboardTests" resultType="io.metersphere.dto.DashboardTestDTO">
+        SELECT create_time AS date, count(load_test_report.id) AS count,
+        date_format(from_unixtime(create_time / 1000), '%Y-%m-%d') AS x
+        FROM load_test_report
+        WHERE test_id IN (SELECT load_test.id
+        FROM load_test
+        JOIN project ON load_test.project_id = project.id
+        WHERE workspace_id = #{workspaceId,jdbcType=VARCHAR})
+        AND create_time > #{startTimestamp}
+        GROUP BY x
     </select>
 
 </mapper>

backend/src/main/java/io/metersphere/dto/DashboardTestDTO.java

@@ -0,0 +1,11 @@
+package io.metersphere.dto;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class DashboardTestDTO {
+    private Long date;
+    private Integer count;
+}

backend/src/main/java/io/metersphere/performance/controller/PerformanceTestController.java

@@ -7,6 +7,7 @@ import io.metersphere.commons.constants.RoleConstants;
 import io.metersphere.commons.utils.PageUtils;
 import io.metersphere.commons.utils.Pager;
 import io.metersphere.commons.utils.SessionUtils;
+import io.metersphere.dto.DashboardTestDTO;
 import io.metersphere.dto.LoadTestDTO;
 import io.metersphere.performance.service.PerformanceTestService;
 import io.metersphere.service.FileService;
@@ -101,4 +102,9 @@ public class PerformanceTestController {
                 .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileOperationRequest.getName() + "\"")
                 .body(bytes);
     }
+
+    @GetMapping("dashboard/tests")
+    public List<DashboardTestDTO> dashboardTests() {
+        return performanceTestService.dashboardTests(SessionUtils.getCurrentWorkspaceId());
+    }
 }

backend/src/main/java/io/metersphere/performance/service/PerformanceTestService.java

@@ -8,6 +8,7 @@ import io.metersphere.base.mapper.ext.ExtLoadTestReportMapper;
 import io.metersphere.commons.constants.PerformanceTestStatus;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.LogUtil;
+import io.metersphere.dto.DashboardTestDTO;
 import io.metersphere.dto.LoadTestDTO;
 import io.metersphere.i18n.Translator;
 import io.metersphere.performance.engine.Engine;
@@ -23,6 +24,8 @@ import org.springframework.util.CollectionUtils;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
+import java.time.Instant;
+import java.time.temporal.ChronoUnit;
 import java.util.List;
 import java.util.Optional;
 import java.util.UUID;
@@ -276,4 +279,10 @@ public class PerformanceTestService {
         return loadTestMapper.selectByExampleWithBLOBs(example);
     }
 
+    public List<DashboardTestDTO> dashboardTests(String workspaceId) {
+        Instant oneYearAgo = Instant.now().plus(-365, ChronoUnit.DAYS);
+        long startTimestamp = oneYearAgo.toEpochMilli();
+        return extLoadTestReportMapper.selectDashboardTests(workspaceId, startTimestamp);
+    }
+
 }

frontend/package.json

@@ -23,7 +23,8 @@
     "vue-i18n": "^8.15.3",
     "vue-router": "^3.1.3",
     "vuedraggable": "^2.23.2",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "vue-calendar-heatmap": "^0.8.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

frontend/src/business/components/performance/home/PerformanceTestHome.vue

@@ -1,14 +1,46 @@
 <template>
-  <div>
+  <ms-container>
-    <h1>性能测试首页</h1>
+    <ms-main-container>
-  </div>
+      <el-card>
+        <calendar-heatmap :end-date="endDate" :values="values" :locale="locale"
+                          tooltip-unit="tests"
+                          :range-color="colorRange"/>
+      </el-card>
+    </ms-main-container>
+  </ms-container>
 
 </template>
 
 <script>
-    export default {
+  import MsContainer from "../../common/components/MsContainer";
-      name: "PerformanceTestHome"
+  import MsMainContainer from "../../common/components/MsMainContainer";
-    }
+
+  export default {
+    name: "PerformanceTestHome",
+    components: {MsMainContainer, MsContainer},
+    data() {
+      return {
+        values: [],
+        endDate: new Date(),
+        colorRange: ['#ebedf0', '#dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
+        locale: {
+          // 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月
+          months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+          // 星期日 Sun. 星期一 Mon. 星期二 Tues. 星期三 Wed. 星期四 Thur. 星期五 Fri. 星期六 Sat.
+          days: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
+          No: 'No',
+          on: 'on',
+          less: 'Less',
+          more: 'More'
+        },
+      }
+    },
+    mounted() {
+      this.$get('/performance/dashboard/tests', response => {
+        this.values = response.data;
+      });
+    },
+  }
 </script>
 
 <style scoped>

frontend/src/business/main.js

@@ -12,6 +12,7 @@ import i18n from "../i18n/i18n";
 import store from "./store";
 import {permission} from './permission'
 import chart from "../common/js/chart";
+import CalendarHeatmap from "../common/js/calendar-heatmap";
 import '../common/css/menu-header.css';
 import '../common/css/main.css';
 import CKEditor from '@ckeditor/ckeditor5-vue';
@@ -24,6 +25,7 @@ Vue.use(ElementUI, {
 Vue.use(filters);
 Vue.use(ajax);
 Vue.use(chart);
+Vue.use(CalendarHeatmap);
 Vue.use(message);
 Vue.use(CKEditor);
 

frontend/src/common/js/calendar-heatmap.js

@@ -0,0 +1,7 @@
+import {CalendarHeatmap} from 'vue-calendar-heatmap'
+
+export default {
+  install(Vue) {
+    Vue.component('calendarHeatmap', CalendarHeatmap);
+  }
+}