test(visual): add run progress

test/runTest/client/client.css

@@ -107,6 +107,13 @@
     color: #fff;
 }
 
+.run-config-item .el-progress-circle__track {
+    stroke: rgba(255, 255, 255, 0.3)!important;
+}
+.run-config-item .el-progress-circle__path {
+    stroke: rgba(255, 255, 255, 1)!important;
+}
+
 .run-config-item .el-input__inner,
 .run-config-item .el-button-group {
     border: none;

test/runTest/client/client.js

@@ -144,6 +144,16 @@ const app = new Vue({
     },
 
     computed: {
+        finishedPercentage() {
+            let finishedCount = 0;
+            this.fullTests.forEach(test => {
+                if (test.status === 'finished') {
+                    finishedCount++;
+                }
+            });
+            return +(finishedCount / this.fullTests.length * 100).toFixed(0) || 0;
+        },
+
         tests() {
             let sortFunc = this.runConfig.sortBy === 'name'
                 ? (a, b) => a.name.localeCompare(b.name)

test/runTest/client/index.html

@@ -118,6 +118,16 @@ under the License.
                             <el-button size="mini" :loading="true">Stop</el-button>
                             <el-button title="Run" @click="stopTests" size="mini" icon="el-icon-close" style="padding-left: 3px;padding-right:3px;"></el-button>
                         </el-button-group>
+
+                        <el-tooltip :content="'Finished ' + finishedPercentage + '%'">
+                            <el-progress
+                                type="circle"
+                                :percentage="finishedPercentage"
+                                :width="25"
+                                :stroke-width="4"
+                                :show-text="false"
+                            ></el-progress>
+                        </el-tooltip>
                     </div>
 
                     <div class="run-config-item">