diff --git a/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue b/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue
index 74ca92ecfc..df0b358f44 100644
--- a/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue
+++ b/frontend/src/business/components/performance/home/PerformanceReportRecentList.vue
@@ -21,7 +21,7 @@
       </el-table-column>
       <el-table-column prop="status" :label="$t('commons.status')">
         <template v-slot:default="{row}">
-          {{row.status}}
+          <ms-performance-report-status :row="row"/>
         </template>
       </el-table-column>
     </el-table>
@@ -30,8 +30,11 @@
 
 <script>
 
+  import MsPerformanceReportStatus from "../report/PerformanceReportStatus";
+
   export default {
     name: "MsPerformanceReportRecentList",
+    components: {MsPerformanceReportStatus},
     data() {
       return {
         result: {},
diff --git a/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue b/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue
index b21269b031..d0b293943c 100644
--- a/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue
+++ b/frontend/src/business/components/performance/home/PerformanceTestRecentList.vue
@@ -22,8 +22,7 @@
       </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}}
+          <ms-performance-test-status :row="row"/>
         </template>
       </el-table-column>
     </el-table>
@@ -32,8 +31,11 @@
 
 <script>
 
+  import MsPerformanceTestStatus from "../test/PerformanceTestStatus";
+
   export default {
     name: "MsPerformanceTestRecentList",
+    components: {MsPerformanceTestStatus},
     data() {
       return {
         result: {},
diff --git a/frontend/src/business/components/performance/report/PerformanceReportStatus.vue b/frontend/src/business/components/performance/report/PerformanceReportStatus.vue
new file mode 100644
index 0000000000..4666c3a880
--- /dev/null
+++ b/frontend/src/business/components/performance/report/PerformanceReportStatus.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <el-tag size="mini" type="primary" v-if="row.status === 'Starting'">
+      {{ row.status }}
+    </el-tag>
+    <el-tag size="mini" type="success" v-else-if="row.status === 'Running'">
+      {{ row.status }}
+    </el-tag>
+    <el-tag size="mini" type="warning" v-else-if="row.status === 'Reporting'">
+      {{ row.status }}
+    </el-tag>
+    <el-tag size="mini" type="info" v-else-if="row.status === 'Completed'">
+      {{ row.status }}
+    </el-tag>
+    <el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
+      <template v-slot:content>
+        <div>{{row.description}}</div>
+      </template>
+      <el-tag size="mini" type="danger">
+        {{ row.status }}
+      </el-tag>
+    </el-tooltip>
+    <span v-else>
+      {{ row.status }}
+    </span>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "MsPerformanceReportStatus",
+
+    props: {
+      row: Object
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/performance/report/PerformanceTestReport.vue b/frontend/src/business/components/performance/report/PerformanceTestReport.vue
index ac0c9678d9..e80f679439 100644
--- a/frontend/src/business/components/performance/report/PerformanceTestReport.vue
+++ b/frontend/src/business/components/performance/report/PerformanceTestReport.vue
@@ -46,29 +46,7 @@
             prop="status"
             :label="$t('commons.status')">
             <template v-slot:default="{row}">
-              <el-tag size="mini" type="primary" v-if="row.status === 'Starting'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="success" v-else-if="row.status === 'Running'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="warning" v-else-if="row.status === 'Reporting'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="info" v-else-if="row.status === 'Completed'">
-                {{ row.status }}
-              </el-tag>
-              <el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
-                <template v-slot:content>
-                  <div>{{row.description}}</div>
-                </template>
-                <el-tag size="mini" type="danger">
-                  {{ row.status }}
-                </el-tag>
-              </el-tooltip>
-              <span v-else>
-                {{ row.status }}
-              </span>
+              <ms-performance-report-status :row="row"/>
             </template>
           </el-table-column>
           <el-table-column
@@ -91,10 +69,11 @@
   import MsTablePagination from "../../common/pagination/TablePagination";
   import MsContainer from "../../common/components/MsContainer";
   import MsMainContainer from "../../common/components/MsMainContainer";
+  import MsPerformanceReportStatus from "./PerformanceReportStatus";
 
   export default {
     name: "PerformanceTestReport",
-    components: {MsTablePagination, MsContainer, MsMainContainer},
+    components: {MsPerformanceReportStatus, MsTablePagination, MsContainer, MsMainContainer},
     created: function () {
       this.initTableData();
     },
diff --git a/frontend/src/business/components/performance/test/PerformanceTestPlan.vue b/frontend/src/business/components/performance/test/PerformanceTestPlan.vue
index 3dbbe1728c..a7c5e88c3a 100644
--- a/frontend/src/business/components/performance/test/PerformanceTestPlan.vue
+++ b/frontend/src/business/components/performance/test/PerformanceTestPlan.vue
@@ -46,32 +46,7 @@
             prop="status"
             :label="$t('commons.status')">
             <template v-slot:default="{row}">
-              <el-tag size="mini" type="info" v-if="row.status === 'Saved'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="primary" v-else-if="row.status === 'Starting'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="success" v-else-if="row.status === 'Running'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="warning" v-else-if="row.status === 'Reporting'">
-                {{ row.status }}
-              </el-tag>
-              <el-tag size="mini" type="info" v-else-if="row.status === 'Completed'">
-                {{ row.status }}
-              </el-tag>
-              <el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
-                <template v-slot:content>
-                  <div>{{row.description}}</div>
-                </template>
-                <el-tag size="mini" type="danger">
-                  {{ row.status }}
-                </el-tag>
-              </el-tooltip>
-              <span v-else>
-                {{ row.status }}
-              </span>
+              <ms-performance-test-status :row="row"/>
             </template>
           </el-table-column>
           <el-table-column
@@ -94,9 +69,11 @@
   import MsTableOperator from "../../common/components/MsTableOperator";
   import MsContainer from "../../common/components/MsContainer";
   import MsMainContainer from "../../common/components/MsMainContainer";
+  import MsPerformanceTestStatus from "./PerformanceTestStatus";
 
   export default {
     components: {
+      MsPerformanceTestStatus,
       MsTablePagination,
       MsTableOperator,
       MsContainer,
diff --git a/frontend/src/business/components/performance/test/PerformanceTestStatus.vue b/frontend/src/business/components/performance/test/PerformanceTestStatus.vue
new file mode 100644
index 0000000000..a85c22f7e8
--- /dev/null
+++ b/frontend/src/business/components/performance/test/PerformanceTestStatus.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <el-tag size="mini" type="primary" v-if="row.status === 'Starting'">
+      {{ row.status }}
+    </el-tag>
+    <el-tag size="mini" type="success" v-else-if="row.status === 'Running'">
+      {{ row.status }}
+    </el-tag>
+    <el-tag size="mini" type="warning" v-else-if="row.status === 'Reporting'">
+      {{ row.status }}
+    </el-tag>
+    <el-tooltip placement="top" v-else-if="row.status === 'Error'" effect="light">
+      <template v-slot:content>
+        <div>{{row.description}}</div>
+      </template>
+      <el-tag size="mini" type="danger">
+        {{ row.status }}
+      </el-tag>
+    </el-tooltip>
+    <el-tag size="mini" type="info">
+      {{ row.status }}
+    </el-tag>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "MsPerformanceTestStatus",
+
+    props: {
+      row: Object
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>