性能测试只读页面

frontend/src/business/components/common/components/MsTableOperatorButton.vue

@@ -16,11 +16,6 @@
   export default {
     name: "MsTableOperatorButton",
     components: {MsTipButton, MsTableButton},
-    data() {
-      return{
-        disabled: false
-      }
-    },
     props: {
       icon: {
         type: String,
@@ -33,6 +28,10 @@
       tip: {
         type: String
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       isTesterPermission: {
         type: Boolean,
         default: false

frontend/src/business/components/performance/test/components/PerformanceAdvancedConfig.vue

@@ -4,7 +4,7 @@
     <el-row type="flex" justify="start">
       <el-col :span="8">
         <h3>{{$t('load_test.domain_bind')}}</h3>
-        <el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="add('domains')">{{$t('commons.add')}}
+        <el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="add('domains')">{{$t('commons.add')}}
         </el-button>
       </el-col>
     </el-row>
@@ -19,7 +19,7 @@
             <template v-slot:default="{row}">
               <el-input
                 size="mini"
-                v-if="readOnly"
+                v-if="!readOnly"
                 type="textarea"
                 :rows="1"
                 class="edit-input"
@@ -36,7 +36,7 @@
             show-overflow-tooltip>
             <template v-slot:default="{row}">
               <el-switch
-                :disabled="!row.edit"
+                :disabled="!row.edit || readOnly"
                 size="mini"
                 v-model="row.enable"
                 active-color="#13ce66"
@@ -54,7 +54,7 @@
             <template v-slot:default="{row}">
               <el-input
                 size="mini"
-                v-if="readOnly"
+                v-if="!readOnly"
                 type="textarea"
                 class="edit-input"
                 :rows="1"
@@ -66,7 +66,7 @@
           </el-table-column>
           <el-table-column align="center" :label="$t('load_test.operating')">
             <template v-slot:default="{row, $index}">
-              <ms-table-operator-button :tip="$t('commons.delete')" icon="el-icon-delete" type="danger"
+              <ms-table-operator-button :disabled="readOnly" :tip="$t('commons.delete')" icon="el-icon-delete" type="danger"
                                         @exec="del(row, 'domains', $index)"/>
             </template>
           </el-table-column>
@@ -77,7 +77,7 @@
     <el-row>
       <el-col :span="8">
         <h3>{{$t('load_test.params')}}</h3>
-        <el-button icon="el-icon-circle-plus-outline" plain size="mini" @click="add('params')">{{$t('commons.add')}}
+        <el-button :disabled="readOnly" icon="el-icon-circle-plus-outline" plain size="mini" @click="add('params')">{{$t('commons.add')}}
         </el-button>
       </el-col>
     </el-row>
@@ -92,7 +92,7 @@
             <template v-slot:default="{row}">
               <el-input
                 size="mini"
-                v-if="readOnly"
+                v-if="!readOnly"
                 type="textarea"
                 :rows="1"
                 class="edit-input"
@@ -109,7 +109,7 @@
             show-overflow-tooltip>
             <template v-slot:default="{row}">
               <el-switch
-                :disabled="!row.edit"
+                :disabled="!row.edit || readOnly"
                 size="mini"
                 v-model="row.enable"
                 active-color="#13ce66"
@@ -127,7 +127,7 @@
                <span v-else>{{ row.value }}</span>-->
               <el-input
                 size="mini"
-                v-if="readOnly"
+                v-if="!readOnly"
                 type="textarea"
                 class="edit-input"
                 :rows="1"
@@ -139,7 +139,7 @@
           </el-table-column>
           <el-table-column align="center" :label="$t('load_test.operating')">
             <template v-slot:default="{row, $index}">
-              <ms-table-operator-button :tip="$t('commons.delete')" icon="el-icon-delete" type="danger"
+              <ms-table-operator-button :disabled="readOnly" :tip="$t('commons.delete')" icon="el-icon-delete" type="danger"
                                         @exec="del(row, 'params', $index)"/>
             </template>
           </el-table-column>
@@ -154,7 +154,7 @@
             <div>{{$t('load_test.connect_timeout')}}</div>
           </el-form-item>
           <el-form-item>
-            <el-input-number size="mini" v-model="timeout" :min="10" :max="100000"></el-input-number>
+            <el-input-number :disabled="readOnly" size="mini" v-model="timeout" :min="10" :max="100000"></el-input-number>
           </el-form-item>
           <el-form-item>
             ms
@@ -169,7 +169,7 @@
             <div>{{$t('load_test.custom_http_code')}}</div>
           </el-form-item>
           <el-form-item>
-            <el-input size="mini" v-model="statusCodeStr" :placeholder="$t('load_test.separated_by_commas')"
+            <el-input :disabled="readOnly" size="mini" v-model="statusCodeStr" :placeholder="$t('load_test.separated_by_commas')"
                       @input="checkStatusCode"></el-input>
           </el-form-item>
         </el-form>
@@ -196,7 +196,7 @@
     props: {
       readOnly: {
         type: Boolean,
-        default: true
+        default: false
       },
       testId: String,
     },

frontend/src/business/components/performance/test/components/PerformanceBasicConfig.vue

@@ -10,6 +10,7 @@
       :before-upload="beforeUpload"
       :http-request="handleUpload"
       :on-exceed="handleExceed"
+      :disabled="isReadOnly"
       :file-list="fileList">
       <i class="el-icon-upload"/>
       <div class="el-upload__text" v-html="$t('load_test.upload_tips')"></div>
@@ -41,9 +42,9 @@
       <el-table-column
         :label="$t('commons.operating')">
         <template v-slot:default="scope">
-          <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id" type="primary" icon="el-icon-download"
+          <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || isReadOnly" type="primary" icon="el-icon-download"
                      size="mini" circle/>
-          <el-button @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
+          <el-button :disabled="isReadOnly" @click="handleDelete(scope.row, scope.$index)" type="danger" icon="el-icon-delete" size="mini"
                      circle/>
         </template>
       </el-table-column>
@@ -56,7 +57,15 @@
 
   export default {
     name: "PerformanceBasicConfig",
-    props: ["testPlan"],
+    props: {
+      testPlan: {
+        type: Object
+      },
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
     data() {
       return {
         result: {},

frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue

@@ -8,6 +8,7 @@
           </el-form-item>
           <el-form-item>
             <el-input-number
+              :disabled="isReadOnly"
               :placeholder="$t('load_test.input_thread_num')"
               v-model="threadNumber"
               @change="calculateChart"
@@ -21,6 +22,7 @@
           </el-form-item>
           <el-form-item>
             <el-input-number
+              :disabled="isReadOnly"
               :placeholder="$t('load_test.duration')"
               v-model="duration"
               :min="1"
@@ -35,6 +37,7 @@
             </el-form-item>
             <el-form-item>
               <el-input-number
+                :disabled="isReadOnly"
                 :placeholder="$t('load_test.input_rps_limit')"
                 v-model="rpsLimit"
                 @change="calculateChart"
@@ -50,6 +53,7 @@
           </el-form-item>
           <el-form-item>
             <el-input-number
+              :disabled="isReadOnly"
               placeholder=""
               :min="1"
               :max="duration"
@@ -62,6 +66,7 @@
           </el-form-item>
           <el-form-item>
             <el-input-number
+              :disabled="isReadOnly"
               placeholder=""
               :min="1"
               :max="Math.min(threadNumber, rampUpTime)"
@@ -78,7 +83,7 @@
             <div>{{$t('load_test.select_resource_pool')}}</div>
           </el-form-item>
           <el-form-item>
-            <el-select v-model="resourcePool" size="mini">
+            <el-select v-model="resourcePool" :disabled="isReadOnly" size="mini">
               <el-option
                 v-for="item in resourcePools"
                 :key="item.id"
@@ -108,7 +113,18 @@
 
   export default {
     name: "PerformancePressureConfig",
-    props: ['testPlan','testId'],
+    props: {
+      testPlan: {
+        type: Object
+      },
+      testId: {
+        type: String
+      },
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
     data() {
       return {
         result: {},

frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue

@@ -91,11 +91,11 @@
                     <el-tabs v-model="activeTab" type="border-card" @tab-click="testTabChange">
                       <el-tab-pane name="detail" :label="$t('test_track.plan_view.test_detail')">
                         <api-test-detail v-if="testCase.type == 'api'" @runTest="testRun" :id="testCase.testId" ref="apiTestDetail"/>
-                        <performance-test-detail v-if="testCase.type == 'performance'" @runTest="testRun" :id="testCase.testId" ref="performanceTestDetail"/>
+                        <performance-test-detail :is-read-only="isReadOnly" v-if="testCase.type == 'performance'" @runTest="testRun" :id="testCase.testId" ref="performanceTestDetail"/>
                       </el-tab-pane>
                       <el-tab-pane name="result" :label="$t('test_track.plan_view.test_result')">
                         <api-test-result :report-id="testCase.reportId" v-if=" testCase.type == 'api'" ref="apiTestResult"/>
-                        <performance-test-result :report-id="testCase.reportId" v-if="testCase.type == 'performance'" ref="performanceTestResult"/>
+                        <performance-test-result :is-read-only="isReadOnly" :report-id="testCase.reportId" v-if="testCase.type == 'performance'" ref="performanceTestResult"/>
                       </el-tab-pane>
                     </el-tabs>
                 </el-col>

frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestDetail.vue

@@ -13,19 +13,19 @@
             </el-input>
           </el-col>
           <el-col :span="12" :offset="2">
-            <el-button type="primary" plain @click="runTest">执行</el-button>
+            <el-button :disabled="isReadOnly" type="primary" plain @click="runTest">执行</el-button>
           </el-col>
         </el-row>
 
         <el-tabs class="test-config" v-model="active" type="border-card" :stretch="true">
           <el-tab-pane :label="$t('load_test.basic_config')">
-            <performance-basic-config :test-plan="test" ref="basicConfig"/>
+            <performance-basic-config :is-read-only="true" :test-plan="test" ref="basicConfig"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('load_test.pressure_config')">
-            <performance-pressure-config :test-plan="test" :test-id="id" ref="pressureConfig"/>
+            <performance-pressure-config :is-read-only="true" :test-plan="test" :test-id="id" ref="pressureConfig"/>
           </el-tab-pane>
           <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
-            <performance-advanced-config :test-id="id" ref="advancedConfig"/>
+            <performance-advanced-config :read-only="true" :test-id="id" ref="advancedConfig"/>
           </el-tab-pane>
         </el-tabs>
       </el-card>
@@ -74,7 +74,13 @@
         }]
       }
     },
-    props: ['id'],
+    props: {
+      id: String,
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
     methods: {
       init() {
         this.getTest();

frontend/src/business/components/track/plan/view/comonents/test/PerformanceTestResult.vue

@@ -13,12 +13,12 @@
                 <el-breadcrumb-item>{{reportName}}</el-breadcrumb-item>
               </el-breadcrumb>
             </el-row>
-            <el-row class="ms-report-view-btns">
-              <el-button type="primary" plain size="mini">{{$t('report.test_stop_now')}}</el-button>
-              <el-button type="success" plain size="mini">{{$t('report.test_execute_again')}}</el-button>
-              <el-button type="info" plain size="mini">{{$t('report.export')}}</el-button>
-              <el-button type="warning" plain size="mini">{{$t('report.compare')}}</el-button>
-            </el-row>
+            <!--<el-row class="ms-report-view-btns">-->
+              <!--<el-button :disabled="isReadOnly" type="primary" plain size="mini">{{$t('report.test_stop_now')}}</el-button>-->
+              <!--<el-button :disabled="isReadOnly"  type="success" plain size="mini">{{$t('report.test_execute_again')}}</el-button>-->
+              <!--<el-button :disabled="isReadOnly"  type="info" plain size="mini">{{$t('report.export')}}</el-button>-->
+              <!--<el-button :disabled="isReadOnly"  type="warning" plain size="mini">{{$t('report.compare')}}</el-button>-->
+            <!--</el-row>-->
           </el-col>
           <el-col :span="8">
             <span class="ms-report-time-desc">
@@ -91,7 +91,13 @@
         report: {}
       }
     },
-    props: ['reportId'],
+    props: {
+      reportId: String,
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      },
+    },
     mounted() {
       this.init();
     },
@@ -177,7 +183,6 @@
               this.$set(this.report, "id", this.reportId);
               this.$set(this.report, "status", data.status);
 
-              // this.checkReportStatus(data.status);
               if (this.status === "Completed") {
                 this.result = this.$get("/performance/report/content/report_time/" + this.reportId).then(res => {
                   let data = res.data.data;
@@ -205,7 +210,6 @@
           this.status = data.status;
           this.$set(this.report, "id", this.reportId);
           this.$set(this.report, "status", data.status);
-          // this.checkReportStatus(data.status);
           if (this.status === "Completed") {
             this.initReportTimeInfo();
           }