[webui] refactor overview page (#2924)

src/webui/src/static/style/loading.scss

+.loading {
+    width: 80%;
+    height: 100%;
+    margin: 0 auto;
+
+    img {
+        width: 40%;
+        position: fixed;
+        top: 30%;
+        left: 30%;
+    }
+}

src/webui/src/static/style/logDrawer.scss

@@ -28,3 +28,7 @@
         text-align: right;
     }
 }
+
+.configClose {
+    margin: 45px 0 25px 0;
+}

src/webui/src/static/style/overview.scss

-
-/* new style */
-.overMessage {
-    height: 446px;
-}
-
-.blockPadding {
-    padding: 10px 20px;
-}
-
-.commonTableStyle {
-    padding: 15px 20px;
-    height: 100%;
-    min-width: 500px;
-    overflow-y: auto;
-}
-
-.padItem {
-    padding: 10px 20px 0 20px;
-}
-
-.searchSpace {
-    line-height: 22px;
-    font-size: 14px;
-    padding: 15px 0;
-    color: #212121;
-    width: 95%;
-}
-
-.nowrap {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.main {
-    margin: 9px 0;
-}
-
-.profile {
-    pre {
-        overflow: inherit;
-    }
-}
-
-.link {
-    margin-bottom: 10px;
-}
-
-.info {
-    position: relative;
-    top: 15px;
-    left: 10px;
-
-    span {
-        color: #333;
-        font-size: 14px;
-    }
-}
-
-/* overview-succeed-graph */
-.showMess {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}

src/webui/src/static/style/overview/command.scss

+.command {
+    width: 100%;
+
+    >div {
+        display: inline-block;
+    }
+
+    .command1 {
+        width: 46%;
+
+        p {
+            margin-top: 0;
+        }
+    }
+
+    .command2 {
+        width: 54%;
+
+        p {
+            margin-top: 0;
+        }
+    }
+
+    .command1,
+    .command2 {
+        .lineMargin {
+            margin-top: 20px;
+        }
+    }
+}

src/webui/src/static/style/overview/config.scss

+.config {
+    position: fixed;
+    right: 0;
+    z-index: 1000;
+
+    .ms-Button--default {
+        padding: 0;
+        margin: 0 0 15px 0;
+        border-radius: 18px 0 0 18px;
+        border: 1px solid #ccc;
+        color: #0573bc;
+    }
+
+    .ms-Button--default:hover {
+        background-color: orangered;
+        color: #fff;
+    }
+}
+
+.ms-Fabric {
+    .ms-Panel-commands {
+        margin: 0;
+    }
+}

src/webui/src/static/style/overview/count.scss

+$seriesIconMargin: 13px;
+
+.ExpDuration {
+    margin-top: 28px;
+
+    span:hover {
+        cursor: pointer;
+    }
+}
+
+.durationInput {
+    width: 42px;
+    height: 32px;
+    padding-right: 5px;
+    text-align: right;
+    outline: none;
+    border: none;
+    border-bottom: 1px solid #ccc;
+}
+
+.maxExecDuration {
+    width: 74px;
+}
+
+.series {
+    i {
+        font-size: 20px;
+        font-weight: 700;
+    }
+
+    .confirm {
+        margin: 0 $seriesIconMargin;
+
+        i {
+            color: green;
+        }
+    }
+}
+
+.cancel i {
+    color: red;
+}
+
+.edit i {
+    margin-left: 4px;
+}
+
+.overview input:disabled {
+    background: transparent;
+    border: none;
+}
+
+.info {
+    position: absolute;
+    z-index: 999;
+    left: 0;
+}

src/webui/src/static/style/overview/overview.scss

+$boxPadding: 20px 42px;
+
+.wrapper {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-auto-rows: 82px;
+    grid-gap: 18px;
+
+    >div {
+        background: #fff;
+        padding: $boxPadding;
+        border-radius: 20px;
+        box-sizing: border-box;
+    }
+
+    .overviewProgress {
+        grid-column: 2 / 5;
+        grid-row: 1 / 5;
+        display: grid;
+        grid-auto-rows: 70px;
+        padding: 0;
+        background: transparent;
+
+        .duration,
+        .trialCount {
+            background: #fff;
+            padding: $boxPadding;
+            border-radius: 20px;
+            box-sizing: border-box;
+
+            /* for alert message tooltip position */
+            position: relative;
+        }
+
+        .duration {
+            // grid-row: 1 / 3;
+            height: 136px;
+        }
+
+        .trialCount {
+            margin-top: 14px;
+            height: 228px;
+        }
+    }
+}
+
+.overviewBasicInfo {
+    grid-column-start: 1;
+    grid-row: 1 / 5;
+    z-index: 2;
+}
+
+.basic {
+    line-height: 21px;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+
+    p {
+        font-size: 14px;
+        color: #8f8f8f;
+        margin-top: 20px;
+    }
+
+    div {
+        font-size: 16px;
+        color: #484848;
+    }
+
+    .nowrap {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.overviewTable {
+    grid-column: 5 / 9;
+    grid-row: 1 / 10;
+    overflow: hidden;
+
+    .topTrialTitle {
+        width: 72%;
+    }
+
+    .active {
+        background: #f3f2f1;
+    }
+
+    .max {
+        margin-left: 7px;
+    }
+
+    .mincenter {
+        margin: 0 13px 0 10px;
+    }
+
+    .chooseEntry {
+        margin-right: 10px;
+        line-height: 30px;
+    }
+}
+
+.overviewCommand,
+.overviewChart {
+    grid-column: 1 / 5;
+}
+
+.overviewCommand {
+    height: 144px;
+    overflow: hidden;
+}
+$circle: 10px;
+$bgblue: #0071bc;
+
+.overviewChart {
+    grid-row: 7 / 11;
+    margin-top: -38px;
+
+    .circle {
+        width: $circle;
+        height: $circle;
+        border-radius: 50%;
+        background-color: $bgblue;
+        margin-top: 6px;
+        margin-right: 18px;
+    }
+}

src/webui/src/static/style/overviewTitle.scss → src/webui/src/static/style/overview/overviewTitle.scss

-$iconPaddingVal: 14px;
+$iconPaddingVal: 20px;
 
 .panelTitle {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    width: 100%;
-    height: 38px;
-    padding: 4px $iconPaddingVal;
-    box-sizing: border-box;
-
     img {
-        height: 22px;
+        height: 23px;
 
         /* (38 - 22 ) / 2 */
         margin-top: 8px;
@@ -21,11 +15,11 @@ $iconPaddingVal: 14px;
         font-size: 18px;
         font-weight: 600;
         color: #333;
-        line-height: 38px;
     }
 
     i {
         font-size: 24px;
+        margin-right: 20px;
         color: #545454;
     }
 }
@@ -45,7 +39,7 @@ $iconPaddingVal: 14px;
     }
 
     .minTitle {
-        margin-right: $iconPaddingVal;
+        // margin-right: $iconPaddingVal;
         border-right: 2px solid #fff;
     }