[webui] refactor overview page (#2924)

src/webui/src/static/style/probar.scss

-#barBack {
-    /* status: 'INITIALIZED' | 'RUNNING' | 'ERROR' | 'STOPPING' | 'STOPPED' | 'DONE' */
-
-    /* status: 'TUNER_NO_MORE_TRIAL' | 'NO_MORE_TRIAL' */
-    .RUNNING,
-    .STOPPING,
-    .INITIALIZED,
-    .NO_MORE_TRIAL,
-    .TUNER_NO_MORE_TRIAL {
-        /* specific status color */
-        color: #0071bc;
-
-        /* progress- duration & trial numbers span */
-        .ms-ProgressIndicator-progressBar {
-            background-color: #0071bc;
-        }
-    }
-
-    .DONE,
-    .STOPPED {
-        color: #009245;
-
-        .ms-ProgressIndicator-progressBar {
-            background-color: #009245;
-        }
-    }
-
-    .ERROR {
-        color: #eb0716;
-
-        .ms-ProgressIndicator-progressBar {
-            background-color: #eb0716;
-        }
-    }
-}
-
-.errorBtn {
-    margin-left: 15px;
-    display: inline-block;
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-    text-align: center;
-    font-size: 14px;
-    border: 1px solid #4d4d4d;
-    border-radius: 50%;
-    background-color: #4d4d4d;
-    color: #fff;
-}
-
-.errorBtn:hover {
-    cursor: pointer;
-}
-
-.errors {
-    width: 240px;
-    font-size: 14px;
-    color: #212121;
-    word-wrap: break-word;
-    word-break: normal;
-}

src/webui/src/static/style/progress.scss

-.progress {
-    margin: 15px 17px;
-
-    .status {
-        color: #0573bc;
-        font-size: 20px;
-        font-weight: 600;
-        margin-top: 5px;
-
-        .status-text {
-            display: inline-block;
-            line-height: 30px;
-        }
-    }
-
-    .probar {
-        width: 100%;
-        height: 34px;
-        margin-top: 15px;
-
-        .showProgress {
-            width: 300px;
-            height: 30px;
-        }
-
-        .name {
-            width: 178px;
-            box-sizing: border-box;
-            line-height: 30px;
-            text-align: center;
-            color: #fff;
-            background-color: #999;
-            border: 2px solid #e6e6e6;
-            border-top-left-radius: 12px;
-            border-bottom-left-radius: 12px;
-        }
-
-        .boundary {
-            width: 100%;
-            line-height: 24px;
-            font-size: 12px;
-            color: #212121;
-
-            .right {
-                text-align: right;
-            }
-        }
-
-        .description {
-            line-height: 34px;
-            margin-left: 6px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-
-    &-info {
-        margin-left: 4px;
-        position: relative;
-        top: 2px;
-    }
-}
-
-/* basic experiment message style */
-.basic {
-    line-height: 24px;
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-
-    p {
-        font-size: 14px;
-        color: #212121;
-    }
-
-    div {
-        font-size: 16px;
-        color: #0573bc;
-    }
-}
-
-.colorOfbasic {
-    div {
-        color: #0573bc;
-    }
-
-    .time {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-}
-
-.mess {
-    margin: 10px 0;
-}
-
-.inputBox {
-    height: 32px;
-    margin-top: 5px;
-
-    .concurrencyInput {
-        width: 40px;
-        padding-left: 8px;
-        outline: none;
-        border: 1px solid #ccc;
-    }
-}
-
-.lineBasic {
-    padding-bottom: 14px;
-    border-bottom: 1px solid #ccc;
-}
-
-/* office-fabric-ui progressIndicator */
-.ms-ProgressIndicator-itemProgress {
-    padding: 0;
-    border: 2px solid #e6e6e6;
-    border-radius: 0 12px 12px 0 !important;
-}
-
-.cursor,
-.cursor:hover {
-    cursor: pointer;
-}

src/webui/src/static/style/progress/probar.scss

+/* status: 'INITIALIZED' | 'RUNNING' | 'ERROR' | 'STOPPING' | 'STOPPED' | 'DONE' */
+
+/* status: 'TUNER_NO_MORE_TRIAL' | 'NO_MORE_TRIAL' */
+.RUNNING,
+.STOPPING,
+.INITIALIZED,
+.NO_MORE_TRIAL,
+.TUNER_NO_MORE_TRIAL {
+    /* specific status color */
+    color: #0071bc;
+
+    /* progress- duration & trial numbers span */
+    .ms-ProgressIndicator-progressBar {
+        background-color: #0071bc;
+    }
+}
+
+.DONE,
+.STOPPED {
+    color: #009245;
+
+    .ms-ProgressIndicator-progressBar {
+        background-color: #009245;
+    }
+}
+
+.ERROR {
+    color: #eb0716;
+
+    .ms-ProgressIndicator-progressBar {
+        background-color: #eb0716;
+    }
+}

src/webui/src/static/style/progress/progress.scss

+
+.status {
+    color: #0573bc;
+    font-size: 20px;
+    font-weight: 600;
+    margin-top: 5px;
+
+    .status-text {
+        display: inline-block;
+        line-height: 30px;
+    }
+}
+
+.probar {
+    width: 100%;
+    height: 34px;
+    margin-top: 15px;
+
+    .showProgress {
+        width: 300px;
+        height: 30px;
+    }
+
+    .name {
+        width: 178px;
+        box-sizing: border-box;
+        line-height: 30px;
+        text-align: center;
+        color: #fff;
+        background-color: #999;
+        border: 2px solid #e6e6e6;
+        border-top-left-radius: 12px;
+        border-bottom-left-radius: 12px;
+    }
+
+    .boundary {
+        width: 100%;
+        line-height: 24px;
+        font-size: 12px;
+        color: #212121;
+
+        .right {
+            text-align: right;
+        }
+    }
+
+    .description {
+        line-height: 34px;
+        margin-left: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.inputBox {
+    height: 32px;
+    margin-top: 5px;
+}
+
+/* office-fabric-ui progressIndicator */
+.ms-ProgressIndicator-itemProgress {
+    padding: 0;
+    border: 2px solid #e6e6e6;
+}
+
+.cursor,
+.cursor:hover {
+    cursor: pointer;
+}

src/webui/src/static/style/succTable.scss

 #succTable {
-    height: 404px;
-    overflow: auto;
+    min-height: 400px;
+    max-height: 1000px;
+    overflow-y: auto;
     position: relative;
 
     .succTable-tooltip {
         position: absolute;
         top: 40%;
-        left: 17%;
+        left: 5%;
 
         .link {
             margin-left: 15px;

src/webui/src/static/style/trialsDetail.scss

@@ -57,6 +57,14 @@
 }
 
 /* table list all */
+.bulletedList {
+    background: #fff;
+
+    .title {
+        margin-top: 18px;
+        margin-left: 14px;
+    }
+}
 
 #tableList {
     width: 96%;