test(visual): optimize ui

test/runTest/client/client.css

@@ -37,6 +37,11 @@
     height: 55px;
 }
 
+.header>* {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 .header h1 {
     color: #222;
     line-height: 50px;
@@ -79,7 +84,7 @@
     z-index: 1;
     position: sticky;
     width: 100%;
-    padding: 5px 20px;
+    padding: 5px 40px;
     top: 0px;
 
     background: #896bda;
@@ -99,6 +104,8 @@
 
 .run-config-item {
     margin: 0 5px;
+    color: #fff;
+    font-size: 12px;
 }
 .run-config-item>* {
     display: inline-block;

test/runTest/client/client.js

@@ -78,6 +78,8 @@ function processTestsData(tests, oldTestsData) {
             test.summary = 'warning';
         }
 
+        // To simplify the condition in sort
+        test.actualErrors = test.actualErrors || [];
         // Keep select status not change.
         if (oldTestsData && oldTestsData[idx]) {
             test.selected = oldTestsData[idx].selected;
@@ -187,20 +189,15 @@ const app = new Vue({
             let sortFunc = this.runConfig.sortBy === 'name'
                 ? (a, b) => a.name.localeCompare(b.name)
                 : (a, b) => {
-                    if (a.percentage === b.percentage) {
-                        if (a.actualErrors && b.actualErrors) {
-                            if (a.actualErrors.length === b.actualErrors.length) {
-                                return a.name.localeCompare(b.name);
-                            }
-                            else {
-                                return b.actualErrors.length - a.actualErrors.length;
-                            }
+                    if (a.actualErrors.length === b.actualErrors.length) {
+                        if (a.percentage === b.percentage) {
+                            return a.name.localeCompare(b.name);
                         }
                         else {
-                            return a.name.localeCompare(b.name);
+                            return a.percentage - b.percentage;
                         }
                     }
-                    return a.percentage - b.percentage;
+                    return b.actualErrors.length - a.actualErrors.length;
                 };
 
             if (!this.searchString) {

test/runTest/client/index.html

@@ -63,26 +63,26 @@ under the License.
                         </span>
                         <i class="el-icon-loading" v-if="test.status === 'pending' && running"></i>
 
-                        <el-tooltip
-                            v-if="test.status === 'finished'"
-                        >
-                            <div slot="content">{{test.percentage}}% Passed</div>
-                            <el-progress
-                                type="circle"
-                                :width="20"
-                                :stroke-width="2"
-                                :percentage="test.percentage"
-                                :status="test.summary"
-                            ></el-progress>
-                        </el-tooltip>
-                        <el-tooltip
-                            v-else-if="test.status==='finished' && test.actualErrors && test.actualErrors.length > 0"
-                        >
-                            <div slot="content">{{test.actualErrors.length}} Errors</div>
-                            <i class="el-icon-message-solid"
-                                style="color: #F56C6C"
-                            ></i>
-                        </el-tooltip>
+                        <template v-if="test.status === 'finished'">
+                            <el-tooltip
+                                v-if="test.actualErrors && test.actualErrors.length > 0"
+                            >
+                                <div slot="content">{{test.actualErrors.length}} Errors</div>
+                                <i class="el-icon-message-solid"
+                                    style="color: #F56C6C"
+                                ></i>
+                            </el-tooltip>
+                            <el-tooltip v-else>
+                                <div slot="content">{{test.percentage}}% Passed</div>
+                                <el-progress
+                                    type="circle"
+                                    :width="20"
+                                    :stroke-width="2"
+                                    :percentage="test.percentage"
+                                    :status="test.summary"
+                                ></el-progress>
+                            </el-tooltip>
+                        </template>
                         <el-tooltip
                             content="Not yet run"
                             v-else-if="!(test.status === 'pending' && running)"
@@ -101,6 +101,15 @@ under the License.
             </el-aside>
             <el-main>
                 <div class="test-run-controls">
+                    <div class="run-config-item">
+                        <el-tooltip content="Show All Tests Runs">
+                            <div style="cursor: pointer;"  @click="showAllTestsRuns">
+                                <i style="font-size:20px;vertical-align:middle;display:inline-block;" class="el-icon-files"></i>
+                                <span style="vertical-align:middle;display:inline-block;">ALL RUNS</span>
+                            </div>
+                        </el-tooltip>
+                    </div>
+
                     <div class="run-config-item">
                         <el-dropdown v-if="!running" split-button size="mini" title="Run"
                             @click="run('selected')"
@@ -130,16 +139,6 @@ under the License.
                         </el-tooltip>
                     </div>
 
-                    <div class="run-config-item">
-                        <el-tooltip content="Show All Tests Runs">
-                            <i
-                                style="font-size: 20px; cursor: pointer;"
-                                class="el-icon-files"
-                                @click="showAllTestsRuns"
-                            ></i>
-                        </el-tooltip>
-                    </div>
-
                     <div class="run-config-item">
                         <span class="label">
                             Expected