Merge remote-tracking branch 'origin/dev' into dev

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/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>

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>

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

@@ -1,16 +1,54 @@
 <template>
-  <div>
+  <ms-container>
-    <h1>性能测试首页</h1>
+    <ms-main-container v-loading="result.loading">
-  </div>
+      <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>
 
 </template>
 
 <script>
-    export default {
+  import MsContainer from "../../common/components/MsContainer";
-      name: "PerformanceTestHome"
+  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: {
+      MsTestHeatmap,
+      MsMainContainer,
+      MsContainer,
+      MsPerformanceTestRecentList,
+      MsPerformanceReportRecentList
+    },
+    data() {
+      return {
+        values: [],
+        result: {},
+      }
+    },
+    mounted() {
+      this.result = this.$get('/performance/dashboard/tests', response => {
+        this.values = response.data;
+      });
+    },
+  }
 </script>
 
 <style scoped>
-
+  .el-row {
+    padding-bottom: 20px;
+  }
 </style>

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>

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);
+  }
+}

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',

frontend/src/i18n/zh-CN.js

@@ -60,6 +60,7 @@ export default {
     'title': '标题',
     'custom': '自定义',
     'select_date': '选择日期',
+    'calendar_heatmap': '测试日历'
   },
   workspace: {
     'create': '创建工作空间',

frontend/src/i18n/zh-TW.js

@@ -60,6 +60,7 @@ export default {
     'title': '標題',
     'custom': '自定義',
     'select_date': '選擇日期',
+    'calendar_heatmap': '測試日曆'
   },
   workspace: {
     'create': '創建工作空間',