From de5f9c993b4da881b17c79aa18322a9d5751ab93 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 28 Apr 2020 16:41:42 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B?=
 =?UTF-8?q?=E6=8A=A5=E5=91=8A=E6=A8=A1=E7=89=88=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/template.png              | Bin 0 -> 4741 bytes
 .../components/common/router/router.js        |   5 +
 .../components/settings/SettingMenu.vue       |   1 +
 .../workspace/TestCaseReportTemplate.vue      | 116 +++++++++
 .../components/TestCaseReportTemplateEdit.vue | 245 ++++++++++++++++++
 5 files changed, 367 insertions(+)
 create mode 100644 frontend/src/assets/template.png
 create mode 100644 frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue
 create mode 100644 frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue

diff --git a/frontend/src/assets/template.png b/frontend/src/assets/template.png
new file mode 100644
index 0000000000000000000000000000000000000000..1edb6c8bf7a5a9e10770f586e0cbd2d0ba75fedf
GIT binary patch
literal 4741
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
O1hm!l)oN62pZyQ^!wF9S

literal 0
HcmV?d00001

diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index 54525e8e35..8fe42dc524 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -8,6 +8,7 @@ import PerformanceTestPlan from "../../performance/test/PerformanceTestPlan";
 import Organization from "../../settings/system/Organization";
 import OrganizationMember from "../../settings/organization/OrganizationMember";
 import Member from "../../settings/workspace/WorkspaceMember";
+import TestCaseReportTemplate from "../../settings/workspace/TestCaseReportTemplate";
 import TestResourcePool from "../../settings/system/TestResourcePool";
 import MsProject from "../../project/MsProject";
 import OrganizationWorkspace from "../../settings/organization/OrganizationWorkspace";
@@ -78,6 +79,10 @@ const router = new VueRouter({
         {
           path: 'testresourcepool',
           component: TestResourcePool
+        },
+        {
+          path: 'testcase/report/template',
+          component: TestCaseReportTemplate
         }
       ]
     },
diff --git a/frontend/src/business/components/settings/SettingMenu.vue b/frontend/src/business/components/settings/SettingMenu.vue
index 57bce97947..803f3bab74 100644
--- a/frontend/src/business/components/settings/SettingMenu.vue
+++ b/frontend/src/business/components/settings/SettingMenu.vue
@@ -28,6 +28,7 @@
         <span>{{$t('commons.workspace')}}</span>
       </template>
       <el-menu-item index="/setting/member">{{$t('commons.member')}}</el-menu-item>
+      <el-menu-item index="/setting/testcase/report/template">测试报告模版</el-menu-item>
     </el-submenu>
 
     <el-submenu index="4">
diff --git a/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue b/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue
new file mode 100644
index 0000000000..af856ff6ea
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue
@@ -0,0 +1,116 @@
+<template>
+
+  <div v-loading="result.loading">
+    <el-card>
+      <template v-slot:header>
+        <ms-table-header :condition.sync="condition" @search="initTableData"
+                         :title="'测试报告模版'"
+                         :create-tip="'新建模版'" @create="templateEdit">
+
+        </ms-table-header>
+      </template>
+
+      <el-main>
+        <div class="testcase-template" v-for="fit in fits" :key="fit">
+          <div class="template-img">
+            <i class="el-icon-error"/>
+          </div>
+          <span class="demonstration">{{ fit }}</span>
+        </div>
+      </el-main>
+
+      <test-case-report-template-edit ref="templateEdit"/>
+
+    </el-card>
+
+  </div>
+
+</template>
+
+<script>
+
+    import MsTableHeader from "../../common/components/MsTableHeader";
+    import TestCaseReportTemplateEdit from "./components/TestCaseReportTemplateEdit";
+    export default {
+      name: "TestCaseReportTemplate",
+      components: {TestCaseReportTemplateEdit, MsTableHeader},
+      data() {
+        return {
+          result: {},
+          fits: ['默认模版', 'congewtain', 'cogewver', 'nongwee', 'scale-downddddddddddd',
+            'faill', 'cdontain', 'codver', 'nodne', 'scalde-downddddddddddd',
+            'fill', 'cowntain', 'corwver',
+            'nonewbe',
+            'scalev-downddddddddddd',
+            'filelv', 'sontwain', 'cosgewver', 'nodegne', 'scale-dfownddddddddddd',
+          ],
+          url: '../../../../assets/template.png',
+          condition: {},
+        }
+      },
+      methods: {
+        initTableData() {
+
+        },
+        templateCreate() {
+
+        },
+        templateEdit() {
+          this.$refs.templateEdit.open();
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .testcase-template {
+    display: inline-block;
+    margin: 10px 30px;
+    width: 150px;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .template-img {
+    height: 100px;
+    width: 80px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 2px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+    background: url(../../../../assets/template.png) no-repeat center;
+  }
+
+  .template-img:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .template-img > i {
+    display:none;
+    float: right;
+    color: gray;
+    margin: 2px;
+  }
+
+  .template-img > i:hover {
+    color: red;
+  }
+
+  .template-img:hover > .el-icon-error {
+    display: inline;
+  }
+
+</style>
diff --git a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
new file mode 100644
index 0000000000..2724a10bd9
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
@@ -0,0 +1,245 @@
+<template>
+
+  <el-drawer
+    :before-close="handleClose"
+    :visible.sync="showDialog"
+    :with-header="false"
+    size="100%"
+    ref="drawer"
+    v-loading="result.loading">
+
+    <template v-slot:default="scope">
+
+      <el-row type="flex" class="head-bar">
+
+        <el-col :span="12">
+
+          <div class="name-edit">
+            <el-input :placeholder="'请填写模版名称'" v-model="name"/>
+            <span v-if="name != ''">{{name}}</span>
+            <span v-if="name == ''">请填写模版名称</span>
+          </div>
+
+        </el-col>
+
+        <el-col :span="12" class="head-right">
+          <el-button plain size="mini" @click="handleClose">{{$t('test_track.return')}}</el-button>
+          <el-button type="primary" size="mini" @click="handleClose">{{$t('test_track.save')}}</el-button>
+        </el-col>
+
+      </el-row>
+
+      <div class="container">
+
+        <el-scrollbar>
+
+          <div class="template-content">
+
+            <el-aside>
+
+                <div class="description">
+                  <span class="title">组件库</span>
+                  <span>从组件库把需要使用的组件拖到右侧，预览测试报告的效果。系统组件只能添加一次。自定义组件，可以设定默认的标题和内容。</span>
+                </div>
+
+                <draggable
+                  class="component-group"
+                  :list="components"
+                  :group="{ name: 'people', pull: 'clone', put: false }"
+                  :clone="cloneDog"
+                  @change="log">
+                  <el-button class="template-component" v-for="item in components" :key="item.id">
+                    <i class="el-icon-s-unfold"/>
+                    <span>{{ item.name }}</span>
+                    <el-tag v-if="item.type == 'system'" size="mini" type="success">系统</el-tag>
+                    <el-tag v-if="item.type == 'custom'" size="mini">自定义</el-tag>
+                  </el-button>
+                </draggable>
+
+              </el-aside>
+
+            <el-main>
+              <el-row>
+                <el-col>
+
+                  <draggable
+                    class="preview-group"
+                    :list="previews"
+                    group="people"
+                    @change="log">
+                    <el-button class="template-component" v-for="item in previews" :key="item.id">
+                      {{ item.name }}
+                    </el-button>
+                  </draggable>
+
+
+                </el-col>
+              </el-row>
+            </el-main>
+
+          </div>
+
+        </el-scrollbar>
+
+      </div>
+
+    </template>
+
+  </el-drawer>
+
+</template>
+
+<script>
+
+  import draggable from 'vuedraggable';
+
+  let idGlobal = 8;
+    export default {
+      name: "TestCaseReportTemplateEdit",
+      components: {
+        draggable
+      },
+      data() {
+        return {
+          showDialog: false,
+          template: {},
+          result: {},
+          name: '',
+          type: 'edit',
+          components: [
+            { name: "dog 1", id: 1 , type: 'system'},
+            { name: "dog 2", id: 2 , type: 'custom'},
+            { name: "dog 3", id: 3 ,type: 'system'},
+            { name: "dog 4", id: 4 ,type: 'system'}
+          ],
+          previews: [
+            { name: "cat 5", id: 5 },
+            { name: "cat 6", id: 6 },
+            { name: "cat 7", id: 7 }
+          ]
+
+        }
+      },
+      methods: {
+        open() {
+          this.showDialog = true;
+        },
+        handleClose() {
+          this.showDialog = false;
+        },
+        log: function(evt) {
+          window.console.log(evt);
+        },
+        cloneDog({ id }) {
+          return {
+            id: idGlobal++,
+            name: `cat ${id}`
+          };
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .head-right {
+    text-align: right;
+  }
+
+  .head-bar {
+    background: white;
+    height: 45px;
+    line-height: 45px;
+    padding: 0 10px;
+    border: 1px solid #EBEEF5;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+  }
+
+  .name-edit:hover span {
+    display: none;
+  }
+
+  .name-edit .el-input {
+    display: none;
+    width: 200px;
+  }
+
+  .name-edit:hover .el-input{
+    display: inline-block;
+  }
+
+  .el-aside {
+    border: 1px solid #EBEEF5;
+    box-sizing: border-box;
+    min-height: calc(100vh - 70px);
+    padding: 20px 20px;
+    border-radius: 3px;
+    background: white;
+    position: absolute;
+    width: 250px;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+  }
+
+  .el-main {
+    height: 1000px;
+    margin-left: 300px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .template-component i {
+    float: left;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .template-component .el-tag {
+    float: right;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .template-component span {
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  .template-component {
+    display: block;
+    margin-left: 10px;
+    width: 90%;
+    margin-bottom: 5px;
+  }
+
+  .preview-group > .el-button {
+    display: block;
+    margin: 10px auto;
+    height: 300px;
+    width: 80%;
+  }
+
+  .description > span {
+    display: block;
+    padding-bottom: 5px;
+  }
+
+  .description {
+    margin-bottom: 10px;
+  }
+
+  .container {
+    height: 100vh;
+    background: #F5F5F5;
+  }
+
+  .template-content {
+
+  }
+
+  .el-scrollbar {
+    height: 100%;
+  }
+
+
+</style>

From 19c21dab232e0e80190662aa7ad445ad852a15bc Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 28 Apr 2020 21:14:09 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8Asql?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |  2 ++
 .../components/TestCaseReportTemplateEdit.vue | 29 +++++++++++++------
 frontend/src/business/main.js                 |  4 ++-
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index a21e6a8489..5fdab05896 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^18.0.0",
+    "@ckeditor/ckeditor5-vue": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
diff --git a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
index 2724a10bd9..c7d32cefff 100644
--- a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
+++ b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
@@ -67,9 +67,15 @@
                     :list="previews"
                     group="people"
                     @change="log">
-                    <el-button class="template-component" v-for="item in previews" :key="item.id">
-                      {{ item.name }}
-                    </el-button>
+                    <el-card class="template-component" v-for="item in previews" :key="item.id">
+
+                      <template v-slot:header>
+                        {{item.name}}
+                      </template>
+
+                      <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
+
+                    </el-card>
                   </draggable>
 
 
@@ -92,6 +98,7 @@
 <script>
 
   import draggable from 'vuedraggable';
+  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
   let idGlobal = 8;
     export default {
@@ -116,7 +123,13 @@
             { name: "cat 5", id: 5 },
             { name: "cat 6", id: 6 },
             { name: "cat 7", id: 7 }
-          ]
+          ],
+
+          editor: ClassicEditor,
+          editorData: '<p>Content of the editor.</p>',
+          editorConfig: {
+            // The configuration of the editor.
+          }
 
         }
       },
@@ -212,11 +225,9 @@
     margin-bottom: 5px;
   }
 
-  .preview-group > .el-button {
-    display: block;
-    margin: 10px auto;
-    height: 300px;
-    width: 80%;
+  .el-card {
+    margin: 5px auto;
+    min-height: 300px;
   }
 
   .description > span {
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index bbd6603b53..5f3587b8c3 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -14,6 +14,7 @@ import {permission} from './permission'
 import chart from "../common/js/chart";
 import '../common/css/menu-header.css';
 import '../common/css/main.css';
+import CKEditor from '@ckeditor/ckeditor5-vue';
 
 Vue.config.productionTip = false;
 Vue.use(icon);
@@ -23,7 +24,8 @@ Vue.use(ElementUI, {
 Vue.use(filters);
 Vue.use(ajax);
 Vue.use(chart);
-Vue.use(message)
+Vue.use(message);
+Vue.use(CKEditor);
 
 // v-permission
 Vue.directive('permission', permission);

From 570149f20f41eae83eccaa138270313fe3bfeffb Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 28 Apr 2020 21:17:06 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8Addl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../db/migration/V2__metersphere_ddl.sql      | 25 +++++++++++++++++++
 .../resources/db/migration/V3__init_data.sql  |  1 +
 package-lock.json                             | 15 ++++++++++-
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/backend/src/main/resources/db/migration/V2__metersphere_ddl.sql b/backend/src/main/resources/db/migration/V2__metersphere_ddl.sql
index facbb21e3f..d400cae649 100644
--- a/backend/src/main/resources/db/migration/V2__metersphere_ddl.sql
+++ b/backend/src/main/resources/db/migration/V2__metersphere_ddl.sql
@@ -319,4 +319,29 @@ CREATE TABLE IF NOT EXISTS `test_plan_test_case` (
     DEFAULT CHARSET = utf8mb4
     COLLATE = utf8mb4_bin;
 
+CREATE TABLE IF NOT EXISTS `test_case_report_template` (
+  `id` bigint(20) NOT NULL AUTO_INCREMENT,
+  `name` varchar(64) NOT NULL COMMENT 'Test case report template name',
+  `workspace_id` varchar(50) DEFAULT NULL COMMENT 'Workspace ID this project belongs to',
+  `content` longtext COMMENT 'Template content (JSON format)',
+  PRIMARY KEY (`id`)
+)
+    ENGINE=InnoDB
+    DEFAULT CHARSET=utf8mb4
+    COLLATE=utf8mb4_bin;
+
+CREATE TABLE IF NOT EXISTS `test_case_report` (
+  `id` bigint(20) NOT NULL AUTO_INCREMENT,
+  `name` varchar(64) NOT NULL COMMENT 'Test case report name',
+  `plan_id` bigint(50) DEFAULT NULL COMMENT 'Plan ID relation to',
+  `content` longtext COMMENT 'Report content (JSON format)',
+  PRIMARY KEY (`id`)
+)
+    ENGINE=InnoDB
+    DEFAULT CHARSET=utf8mb4
+    COLLATE=utf8mb4_bin;
+
 -- track end
+
+
+
diff --git a/backend/src/main/resources/db/migration/V3__init_data.sql b/backend/src/main/resources/db/migration/V3__init_data.sql
index 9cce9258e1..a66cc043ec 100644
--- a/backend/src/main/resources/db/migration/V3__init_data.sql
+++ b/backend/src/main/resources/db/migration/V3__init_data.sql
@@ -10,3 +10,4 @@ INSERT INTO role (id, name, description, type, create_time, update_time) VALUES
 INSERT INTO role (id, name, description, type, create_time, update_time) VALUES ('test_user', '测试人员', null, null, 1581576575948, 1581576575948);
 INSERT INTO role (id, name, description, type, create_time, update_time) VALUES ('test_viewer', 'Viewer', null, null, 1581576575948, 1581576575948);
 
+INSERT INTO test_case_report_template (name,content) VALUES ("默认模版","{\"components\":[1,2,3,4,5],\"contentMap\":{\"richTextComponentTitleSet\":{},\"richTextComponentContentSet\":{}}}");
diff --git a/package-lock.json b/package-lock.json
index 48e341a095..4927438eab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,3 +1,16 @@
 {
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-18.0.0.tgz",
+      "integrity": "sha512-7nyaDU5sUSl+7wXPwr0d5bOlO2e0LRQh2iJJCJfAjjuUESwtiBGoFC+Ql5dEht0xlfARoSWQMlkUvGuHOVja7A=="
+    },
+    "@ckeditor/ckeditor5-vue": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-vue/-/ckeditor5-vue-1.0.1.tgz",
+      "integrity": "sha512-4MaQwZ04cWwqYW0732sg2aqx9ILeHIP0LSLKUuLCLR21qYONZPvxY/V/czh1DH99toaL/iwPvEoJtO2ldriPaA=="
+    }
+  }
 }

From 516b56a7ef484aab1b78e467c419ae2bfcffa595 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Tue, 28 Apr 2020 21:26:36 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=B8=8D=E5=BF=85?=
 =?UTF-8?q?=E8=A6=81=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 4927438eab..0000000000
--- a/package-lock.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "requires": true,
-  "lockfileVersion": 1,
-  "dependencies": {
-    "@ckeditor/ckeditor5-build-classic": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-18.0.0.tgz",
-      "integrity": "sha512-7nyaDU5sUSl+7wXPwr0d5bOlO2e0LRQh2iJJCJfAjjuUESwtiBGoFC+Ql5dEht0xlfARoSWQMlkUvGuHOVja7A=="
-    },
-    "@ckeditor/ckeditor5-vue": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-vue/-/ckeditor5-vue-1.0.1.tgz",
-      "integrity": "sha512-4MaQwZ04cWwqYW0732sg2aqx9ILeHIP0LSLKUuLCLR21qYONZPvxY/V/czh1DH99toaL/iwPvEoJtO2ldriPaA=="
-    }
-  }
-}

From 73781d57c9533d5ee30fc41cd4368808ad26cec8 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Wed, 29 Apr 2020 10:50:30 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E6=8A=A5=E5=91=8A-=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=B7=BB=E5=8A=A0=E5=90=88=E8=AE=A1=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../report/components/RequestStatistics.vue   | 53 ++++++++++++++++++-
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/frontend/src/business/components/performance/report/components/RequestStatistics.vue b/frontend/src/business/components/performance/report/components/RequestStatistics.vue
index ec51bb9e81..419f4e372b 100644
--- a/frontend/src/business/components/performance/report/components/RequestStatistics.vue
+++ b/frontend/src/business/components/performance/report/components/RequestStatistics.vue
@@ -5,7 +5,8 @@
       stripe
       border
       style="width: 100%"
-      :default-sort = "{prop: 'samples', order: 'descending'}"
+      show-summary
+      :summary-method="getSummaries"
     >
       <el-table-column label="Requests" fixed width="450" align="center">
         <el-table-column
@@ -103,6 +104,54 @@
           this.tableData = res.data;
         })
       },
+      getSummaries(param) {
+        const {data} = param;
+        const sums = []
+        let allSamples = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.samples);
+        }, 0);
+        let failSize = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.ko);
+        }, 0);
+        let averageTimeTotal = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.average) * parseFloat(currentValue.samples);
+        }, 0);
+        let tp90Total = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.tp90) * parseFloat(currentValue.samples);
+        }, 0);
+        let tp95Total = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.tp95) * parseFloat(currentValue.samples);
+        }, 0);
+        let tp99Total = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.tp99) * parseFloat(currentValue.samples);
+        }, 0);
+        let transactions = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.transactions);
+        }, 0);
+        let received = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.received);
+        }, 0);
+        let sent = data.reduce(function (total, currentValue) {
+          return total + parseFloat(currentValue.sent);
+        }, 0);
+
+        let error = (Math.round(failSize / allSamples * 10000) / 100) + '%';
+        let averageTime = (averageTimeTotal / allSamples).toFixed(2);
+        let tp90 = (tp90Total / allSamples).toFixed(2);
+        let tp95 = (tp95Total / allSamples).toFixed(2);
+        let tp99 = (tp99Total / allSamples).toFixed(2);
+        let min = Math.min.apply(Math, data.map(function (o) {
+          return parseFloat(o.min)
+        }));
+        let max = Math.max.apply(Math, data.map(function (o) {
+          return parseFloat(o.max)
+        }));
+
+        sums.push('Total', allSamples, failSize, error, averageTime, min, max, tp90, tp95, tp99, transactions, received, sent);
+
+        return sums;
+
+      }
     },
     watch: {
       status() {
@@ -111,7 +160,7 @@
         }
       }
     },
-    props: ['id','status']
+    props: ['id', 'status']
   }
 </script>