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] 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': '創建工作空間',