From bc31e3366d2a0a2b09e32b046b87bc188e668c16 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Mon, 18 May 2020 14:17:22 +0800
Subject: [PATCH 1/3] calendar heatmap

---
 .../mapper/ext/ExtLoadTestReportMapper.java   |  3 ++
 .../mapper/ext/ExtLoadTestReportMapper.xml    | 20 +++++++--
 .../io/metersphere/dto/DashboardTestDTO.java  | 11 +++++
 .../controller/PerformanceTestController.java |  6 +++
 .../service/PerformanceTestService.java       |  9 ++++
 frontend/package.json                         |  3 +-
 .../performance/home/PerformanceTestHome.vue  | 44 ++++++++++++++++---
 frontend/src/business/main.js                 |  2 +
 frontend/src/common/js/calendar-heatmap.js    |  7 +++
 9 files changed, 94 insertions(+), 11 deletions(-)
 create mode 100644 backend/src/main/java/io/metersphere/dto/DashboardTestDTO.java
 create mode 100644 frontend/src/common/js/calendar-heatmap.js

diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.java
index 8393cbe12a..79e6c73667 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.java
+++ b/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);
 }
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.xml
index cb8e89e0e5..37d15a0676 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtLoadTestReportMapper.xml
+++ b/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
-        <include refid="Base_Column_List" />
-        from load_test_report
-        where id = #{id,jdbcType=VARCHAR}
+        SELECT
+        <include refid="Base_Column_List"/>
+        FROM load_test_report
+        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>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/dto/DashboardTestDTO.java b/backend/src/main/java/io/metersphere/dto/DashboardTestDTO.java
new file mode 100644
index 0000000000..72e70350a3
--- /dev/null
+++ b/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;
+}
diff --git a/backend/src/main/java/io/metersphere/performance/controller/PerformanceTestController.java b/backend/src/main/java/io/metersphere/performance/controller/PerformanceTestController.java
index dedd1edc57..3d5ba80c63 100644
--- a/backend/src/main/java/io/metersphere/performance/controller/PerformanceTestController.java
+++ b/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());
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/performance/service/PerformanceTestService.java b/backend/src/main/java/io/metersphere/performance/service/PerformanceTestService.java
index 9a4c8cbb22..7ee2d6043f 100644
--- a/backend/src/main/java/io/metersphere/performance/service/PerformanceTestService.java
+++ b/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);
+    }
+
 }
diff --git a/frontend/package.json b/frontend/package.json
index 5fdab05896..098e3d0295 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/business/components/performance/home/PerformanceTestHome.vue b/frontend/src/business/components/performance/home/PerformanceTestHome.vue
index df55161597..14776eb78a 100644
--- a/frontend/src/business/components/performance/home/PerformanceTestHome.vue
+++ b/frontend/src/business/components/performance/home/PerformanceTestHome.vue
@@ -1,14 +1,46 @@
 <template>
-  <div>
-    <h1>性能测试首页</h1>
-  </div>
+  <ms-container>
+    <ms-main-container>
+      <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 {
-      name: "PerformanceTestHome"
-    }
+  import MsContainer from "../../common/components/MsContainer";
+  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>
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index 5f3587b8c3..baca430ae9 100644
--- a/frontend/src/business/main.js
+++ b/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);
 
diff --git a/frontend/src/common/js/calendar-heatmap.js b/frontend/src/common/js/calendar-heatmap.js
new file mode 100644
index 0000000000..554818e26a
--- /dev/null
+++ b/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);
+  }
+}

From 7638513556dc5106d2059504e3e09b0b2479ba9c Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Mon, 18 May 2020 14:45:11 +0800
Subject: [PATCH 2/3] heatmap

---
 .../common/components/MsTestHeatmap.vue       | 37 +++++++++++
 .../home/PerformanceReportRecentList.vue      | 63 ++++++++++++++++++
 .../performance/home/PerformanceTestHome.vue  | 43 ++++++------
 .../home/PerformanceTestRecentList.vue        | 65 +++++++++++++++++++
 frontend/src/i18n/en-US.js                    |  1 +
 frontend/src/i18n/zh-CN.js                    |  1 +
 frontend/src/i18n/zh-TW.js                    |  1 +
 7 files changed, 192 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/business/components/common/components/MsTestHeatmap.vue
 create mode 100644 frontend/src/business/components/performance/home/PerformanceReportRecentList.vue
 create mode 100644 frontend/src/business/components/performance/home/PerformanceTestRecentList.vue

diff --git a/frontend/src/business/components/common/components/MsTestHeatmap.vue b/frontend/src/business/components/common/components/MsTestHeatmap.vue
new file mode 100644
index 0000000000..b0e184427c
--- /dev/null
+++ b/frontend/src/business/components/common/components/MsTestHeatmap.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-card>
+    <template v-slot:header>
+      <span class="title">{{$t('commons.calendar_heatmap')}}</span>
+    </template>
+    <calendar-heatmap :end-date="endDate" :values="values" :locale="locale"
+                      tooltip-unit="tests"
+                      :range-color="colorRange"/>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "MsTestHeatmap",
+    props: ['values'],
+    data() {
+      return {
+        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'
+        },
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue b/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue
new file mode 100644
index 0000000000..74ca92ecfc
--- /dev/null
+++ b/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading">
+    <template v-slot:header>
+      <span class="title">{{$t('api_report.title')}}</span>
+    </template>
+    <el-table :data="tableData" class="table-content">
+      <el-table-column :label="$t('commons.name')" width="150" show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <el-link type="info" @click="link(scope.row)">{{ scope.row.name }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column width="250" :label="$t('commons.create_time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="250" :label="$t('commons.update_time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" :label="$t('commons.status')">
+        <template v-slot:default="{row}">
+          {{row.status}}
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+
+  export default {
+    name: "MsPerformanceReportRecentList",
+    data() {
+      return {
+        result: {},
+        tableData: []
+      }
+    },
+
+    methods: {
+      search() {
+        this.result = this.$get("/performance/report/recent/5", response => {
+          this.tableData = response.data;
+        });
+      },
+      link(row) {
+        this.$router.push({
+          path: '/api/report/view/' + row.id,
+        })
+      }
+    },
+
+    created() {
+      this.search();
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/performance/home/PerformanceTestHome.vue b/frontend/src/business/components/performance/home/PerformanceTestHome.vue
index 14776eb78a..c7dd81ba35 100644
--- a/frontend/src/business/components/performance/home/PerformanceTestHome.vue
+++ b/frontend/src/business/components/performance/home/PerformanceTestHome.vue
@@ -1,11 +1,17 @@
 <template>
   <ms-container>
     <ms-main-container>
-      <el-card>
-        <calendar-heatmap :end-date="endDate" :values="values" :locale="locale"
-                          tooltip-unit="tests"
-                          :range-color="colorRange"/>
-      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <ms-performance-report-recent-list/>
+        </el-col>
+        <el-col :span="12">
+          <ms-performance-test-recent-list/>
+        </el-col>
+      </el-row>
+      <el-row>
+        <ms-test-heatmap :values="values"></ms-test-heatmap>
+      </el-row>
     </ms-main-container>
   </ms-container>
 
@@ -14,25 +20,22 @@
 <script>
   import MsContainer from "../../common/components/MsContainer";
   import MsMainContainer from "../../common/components/MsMainContainer";
+  import MsPerformanceTestRecentList from "./PerformanceTestRecentList"
+  import MsPerformanceReportRecentList from "./PerformanceReportRecentList"
+  import MsTestHeatmap from "../../common/components/MsTestHeatmap";
 
   export default {
     name: "PerformanceTestHome",
-    components: {MsMainContainer, MsContainer},
+    components: {
+      MsTestHeatmap,
+      MsMainContainer,
+      MsContainer,
+      MsPerformanceTestRecentList,
+      MsPerformanceReportRecentList
+    },
     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() {
@@ -44,5 +47,7 @@
 </script>
 
 <style scoped>
-
+  .el-row {
+    padding-bottom: 20px;
+  }
 </style>
diff --git a/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue b/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue
new file mode 100644
index 0000000000..b21269b031
--- /dev/null
+++ b/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue
@@ -0,0 +1,65 @@
+<template>
+  <el-card class="table-card" v-loading="result.loading">
+    <template v-slot:header>
+      <span class="title">{{$t('api_test.title')}}</span>
+    </template>
+    <el-table :data="tableData" class="table-content">
+      <el-table-column :label="$t('commons.name')" width="150" show-overflow-tooltip>
+        <template v-slot:default="scope">
+          <el-link type="info" @click="link(scope.row)">{{ scope.row.name }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column prop="projectName" :label="$t('load_test.project_name')" width="150" show-overflow-tooltip/>
+      <el-table-column width="250" :label="$t('commons.create_time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="250" :label="$t('commons.update_time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" :label="$t('commons.status')">
+        <template v-slot:default="{row}">
+          <!--          <ms-api-test-status :row="row"/>-->
+          {{row.status}}
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+
+  export default {
+    name: "MsPerformanceTestRecentList",
+    data() {
+      return {
+        result: {},
+        tableData: []
+      }
+    },
+
+    methods: {
+      search() {
+        this.result = this.$get("/performance/recent/5", response => {
+          this.tableData = response.data;
+        });
+      },
+      link(row) {
+        this.$router.push({
+          path: '/api/test/edit?id=' + row.id,
+        })
+      }
+    },
+
+    created() {
+      this.search();
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index 91646b5130..a39f571fe7 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -60,6 +60,7 @@ export default {
     'title': 'Title',
     'custom': 'Custom',
     'select_date': 'Select date',
+    'calendar_heatmap': 'Calendar Heatmap'
   },
   workspace: {
     'create': 'Create Workspace',
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index be5c6e87ea..81165aebc1 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -60,6 +60,7 @@ export default {
     'title': '标题',
     'custom': '自定义',
     'select_date': '选择日期',
+    'calendar_heatmap': '测试日历'
   },
   workspace: {
     'create': '创建工作空间',
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 7f6a454084..4a8b1aa4ac 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -60,6 +60,7 @@ export default {
     'title': '標題',
     'custom': '自定義',
     'select_date': '選擇日期',
+    'calendar_heatmap': '測試日曆'
   },
   workspace: {
     'create': '創建工作空間',

From a168f9e17a46ea475c0fea2636d81c6851c6458d Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Mon, 18 May 2020 14:48:25 +0800
Subject: [PATCH 3/3] loading

---
 .../components/performance/home/PerformanceTestHome.vue      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/business/components/performance/home/PerformanceTestHome.vue b/frontend/src/business/components/performance/home/PerformanceTestHome.vue
index c7dd81ba35..7f9992d655 100644
--- a/frontend/src/business/components/performance/home/PerformanceTestHome.vue
+++ b/frontend/src/business/components/performance/home/PerformanceTestHome.vue
@@ -1,6 +1,6 @@
 <template>
   <ms-container>
-    <ms-main-container>
+    <ms-main-container v-loading="result.loading">
       <el-row :gutter="20">
         <el-col :span="12">
           <ms-performance-report-recent-list/>
@@ -36,10 +36,11 @@
     data() {
       return {
         values: [],
+        result: {},
       }
     },
     mounted() {
-      this.$get('/performance/dashboard/tests', response => {
+      this.result = this.$get('/performance/dashboard/tests', response => {
         this.values = response.data;
       });
     },