Update WebUI (#295)

src/webui/src/static/interface.ts

+interface TableObj {
+    key: number;
+    sequenceId: number;
+    id: string;
+    duration: number;
+    status: string;
+    acc?: number;
+    description: Parameters;
+    color?: string;
+}
+interface ErrorParameter {
+    error?: string;
+}
+interface Parameters {
+    parameters: ErrorParameter;
+    logPath?: string;
+    isLink?: boolean;
+}
+
+interface Experiment {
+    id: string;
+    author: string;
+    revision?: number;
+    experName: string;
+    logDir?: string;
+    runConcurren: number;
+    maxDuration: number;
+    execDuration: number;
+    MaxTrialNum: number;
+    startTime: number;
+    endTime?: number;
+    trainingServicePlatform: string;
+    tuner: object;
+    assessor?: object;
+    clusterMetaData?: object;
+}
+
+// trial accuracy
+interface AccurPoint {
+    yAxis: Array<number>;
+}
+
+interface TrialNumber {
+    succTrial: number;
+    failTrial: number;
+    stopTrial: number;
+    waitTrial: number;
+    runTrial: number;
+    unknowTrial: number;
+    totalCurrentTrial: number;
+}
+
+interface TrialJob {
+    text: string;
+    value: string;
+}
+
+interface Dimobj {
+    dim: number;
+    name: string;
+    max?: number;
+    min?: number;
+    type?: string;
+    data?: string[];
+}
+
+interface HoverName {
+    name: string;
+}
+
+interface ParaObj {
+    data: number[][];
+    parallelAxis: Array<Dimobj>;
+}
+
+interface VisualMapValue {
+    maxAccuracy: number;
+    minAccuracy: number;
+}
+
+export {TableObj, Parameters, Experiment, 
+    AccurPoint, TrialNumber, TrialJob,
+    HoverName, ParaObj, VisualMapValue, Dimobj
+};
\ No newline at end of file

src/webui/src/static/style/accuracy.css

+.showMess{
+    position: absolute;
+    left: 49%;
+    top: 48%;
+    font-size: 13px;
+    color: #999;
+}
\ No newline at end of file

src/webui/src/static/style/button.scss

+Button.changeBtu, Button.changeBtu:hover, Button.changeBtu:focus{
+    background-color: #3c8dbc;
+    border-color: #3c8dbc;
+    line-height: 30px;
+    font-size: 16px;
+}
+
+Button.tableButton{
+    background:	#3c8dbc;
+    border-color: #3c8dbc;
+    height: 26px;
+    line-height: 26px;
+    margin-top: 2px;
+}
+
+/* kill btn style: delete its own hover style */
+/* after button click the color not change */
+Button.tableButton:hover, Button.tableButton:focus{
+    background-color: #3c8dbc;
+    border-color: #3c8dbc;
+}
\ No newline at end of file

src/webui/src/style/control.css → src/webui/src/static/style/control.scss

 .user{
-    background: rgb(236,240,245);
+    background: #ECF0F5;
     overflow: hidden;
 }
 .userCon{

src/webui/src/style/logPath.css → src/webui/src/static/style/logPath.scss

 .logpath{
     margin-bottom: 10px;
     margin-left: 10px;
+
+    .logName{
+        color: #268BD2;
+    }
+
+    .logContent{
+        color: #333;
+    }
+
+    .error{
+        color: #CB4B16;
+    }
 }
-.logName{
-    color: #268BD2;
-}
-.logContent{
-    color: #333;
-}
+
 .logHref:hover{
     color: blue;
     text-decoration: underline;
 }
-.error{
-    color: #CB4B16;
-}

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

+
+/* new style */
+.overMessage{
+    height: 424px;
+}
+.overGraph{
+    height: 362px;
+    
+    .accuracy{
+        width: 100%;
+        height: 324px;
+    }
+}
+.blockPadding{
+    padding: 10px 20px;
+}
+
+.commonTableStyle{
+    padding: 15px 20px;
+    height: 100%;
+    min-width: 500px;
+    overflow-y: scroll;
+}
+
+.padItem{
+    padding-left: 20px;
+}
+
+.searchSpace{
+    height: 386px;
+    line-height: 22px;
+    font-size: 14px;
+    overflow-y: scroll;
+    padding: 15px 0;
+    color: #212121;
+}
+
+.nowrap{
+    overflow: hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+}
+
+.main{
+    margin: 9px 0;
+}

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

+.overview .overviewBoder{
+    height: 100%;
+    border-right: 2px solid white;
+}
+
+.panelTitle{
+    display: block;
+    width: 100%;
+    height: 38px;
+    background: #b3b3b3;
+
+    img{
+        height: 22px;
+        margin-top: -8px;
+        padding-left: 14px;
+        padding-right: 14px;
+    }
+
+    span{
+        font-size: 18px;
+        font-weight: bold;
+        font-family: 'Segoe';
+        color: #333;
+        line-height: 38px;
+    }
+}
\ No newline at end of file

src/webui/src/static/style/para.scss

+
+.parameter{
+    height: 100%;
+
+    .meline{
+        margin-top: 15px;
+
+        span{
+            font-size: 14px;
+            margin-right: 6px;
+        }
+    }
+
+}
+
+.searcHyper{
+    position: relative;
+    margin: 0 19px;
+    
+    .noneData{
+        position: absolute;
+        left: 49%;
+        top: 2.5%;
+        font-size: 13px;
+        color: #999;
+    }    
+}
\ No newline at end of file

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

+
+.progress{
+    margin: 15px 20px;
+    .status{
+        color: #0573bc;
+        font-size: 20px;
+        font-weight: bold;
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 12px;
+    }
+
+    .probar{
+        height: 34px;
+        margin-top: 15px;
+
+        .ant-progress-inner{
+            border: 2px solid #e6e6e6;
+            border-radius: 0 12px 12px 0 !important;
+        }
+        .ant-progress-bg {
+            border-radius: 0 !important;
+        }
+        .ant-progress-status-success .ant-progress-bg{
+            border-radius: 0 12px 12px 0 !important;
+            color: #009245;
+            background-color: #009245;
+        }
+        .name{
+            height: 34px;
+            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;
+        }
+        
+        .showProgress{
+            height: 30px;
+        }
+        .description{
+            width: 100%;
+            line-height: 24px;
+            font-size: 12px;
+            .right{
+                text-align: right;
+            }
+        }
+    }
+}
+
+/* basic experiment message style */
+.basic{
+
+    line-height: 24px;
+    font-family: 'Segoe';
+    p{
+        font-size: 14px;
+        color: #212121;
+    }
+    div{
+        font-size: 16px;
+        color: #8c8c8c;
+    }
+}
+
+.colorOfbasic{
+    div{
+        color: #0573bc;
+    }
+}
+
+.mess{
+    margin: 10px 0;
+}
+
+.ant-tooltip-inner{
+    white-space: nowrap;
+    min-width: 300px;
+}
+

src/webui/src/static/style/slideBar.scss

+
+.nav{
+    list-style: none;
+    width: 100%;
+    height: 80px;
+    li{
+        float: left;
+        margin-right: 40px;
+        font-family: 'Segoe';
+        a{
+            display: block;
+            padding: 0 10px;
+            font-size: 18px;
+            color: #b8c7ce;
+            text-decoration: none;
+        }
+    }
+    .logo{
+        height: 80px;
+        line-height: 80px;  
+    }
+    .tab{
+        position: relative;
+        top: 36px;
+        line-height: 30px;
+
+    }
+    .last{
+        margin-right: 0;
+    }
+}
+
+.nav li a:hover, .nav a.high{
+    color: white;
+    border-bottom: 1px solid white;
+}
\ No newline at end of file

src/webui/src/static/style/table.scss

+
+/* react-json-view background */
+#description ul, #allList ul{
+    background: none !important;
+}
+
+.tabScroll{
+    height: 324px;
+    overflow: hidden;
+    #succeTable .commonTableStyle{
+        overflow-y: scroll;
+    }
+
+}
+
+/* add the brother selector to increase the priority */
+#succeTable .commonTableStyle, #tableList .commonTableStyle {
+
+    tr{ 
+        text-align: center;
+        color:#212121;
+        font-family: 'Segoe';
+        font-size: 14px;
+        /* background-color: #f2f2f2; */
+    }
+    th{
+        padding: 2px;
+        background-color:white !important;
+        font-size: 14px;
+        font-family: 'Segoe';
+        color: #808080;
+        border-bottom: 1px solid #d0d0d0;
+        text-align: center;
+    }
+    
+
+    .ant-table-expanded-row{
+        /* background-color: #f2f2f2 */
+        background-color: transparent; 
+    }
+
+    tr:hover{ 
+
+        /* cancel antd table default hover style */
+        td{
+            background-color: transparent;
+        }
+        .ant-table-row-expand-icon{
+            background-color: transparent;
+        }
+    }
+
+    td{
+        padding: 0px;
+        line-height: 24px;
+    }
+
+    /* + button */
+    .ant-table-row-expand-icon{
+        background: none;
+    }
+
+    .ant-table-row-expand-icon-cell{
+        background: #ccc;
+        .ant-table-row-expand-icon{
+            border: none;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .ant-table-row-expand-icon-cell:hover{
+        background: #ccc;
+    }
+}
+
+pre.hyperpar{
+    text-align: left;
+    line-height: 18px;
+    font-size: 14px;
+}
+
+/* the position of the pagination */
+.ant-table-pagination.ant-pagination{
+    margin: 16px 0;
+    float: right;
+    margin-right: 30px;
+}
+
+.ant-modal-title{
+    font-size: 20px;
+}
\ No newline at end of file

src/webui/src/static/style/tableStatus.css

+/* status bgcolor */
+/*
+.commonStyle{
+    border-radius: 3px;
+    color: white;
+}
+.RUNNING{
+    padding: 3px 8px; 
+    background: #3c8dbc;
+}
+.FAILED{
+    padding: 3px 24px;
+    background:	#dd4b39;
+}
+.USER_CANCELED{
+    padding: 3px 8px; 
+    background:	#FF4500;
+}
+.SUCCEEDED{
+    padding: 3px 6px;
+    background: #00a65a;
+}
+.UNKNOWN{
+    padding: 3px 15px;
+    background:	#FF8C00;
+}
+.SYS_CANCELED{
+    padding: 3px 24px;
+    background:	red;
+}
+.WAITING{
+    padding: 3px 24px;
+    background:	#008B8B;
+}
+*/
+.RUNNING{
+    color: #3c8dbc;
+}
+.FAILED{
+    color: #dd4b39;
+}
+.USER_CANCELED{
+    color:	#FF4500;
+}
+.SUCCEEDED{
+    color: #009245;
+}
+.UNKNOWN{
+    color:	#FF8C00;
+}
+.SYS_CANCELED{
+    color:	red;
+}
+.WAITING{
+    color:	#008B8B;
+}

src/webui/src/style/trialStatus.css → src/webui/src/static/style/trialStatus.scss

@@ -5,27 +5,14 @@
 .rungraph{
     width: 100%;
 }
-/* add the brother selector to increase the priority */
-#tableCenter .tables th, #session .tables th{
-    background:	rgb(217,222,228);
-    /* the center of the table title */
-    text-align: center;
-    font-weight: 700;
-}
-#tableCenter .tables tr, #session .tables tr{
-    text-align: center;
-    color:#333;
-}
+
 pre.hyperpar{
     text-align: left;
 }
 .tables{
     width: 100%;
 }
-/* the color of id  */
-#tableCenter .tables .ant-table-thead .tableHead>span{
-    color: #333;
-}
+
 /* the position of the pagination */
 .ant-table-pagination.ant-pagination{
     margin: 16px 0;
@@ -39,39 +26,7 @@ Button.tableButton{
     line-height: 28px;
     /* padding: 3px 4px; */
 }
-/* status bgcolor */
-.commonStyle{
-    border-radius: 3px;
-    color: white;
-}
-.RUNNING{
-    padding: 3px 8px; 
-    background: #3c8dbc;
-}
-.FAILED{
-    padding: 3px 24px;
-    background:	#dd4b39;
-}
-.USER_CANCELED{
-    padding: 3px 8px; 
-    background:	#FF4500;
-}
-.SUCCEEDED{
-    padding: 3px 6px;
-    background: #00a65a;
-}
-.UNKNOWN{
-    padding: 3px 15px;
-    background:	#FF8C00;
-}
-.SYS_CANCELED{
-    padding: 3px 24px;
-    background:	red;
-}
-.WAITING{
-    padding: 3px 24px;
-    background:	#008B8B;
-}
+
 .hyperpar ul, .hyperpar ul li{
     background: none !important;
 }

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

+
+#tabsty{
+    .ant-tabs-nav-container{
+        height: 38px;
+    }
+    .ant-tabs-tab{
+        border: none;
+        margin-right: 0;
+        line-height: 38px;
+        padding: 0;
+    }
+    .ant-tabs-nav-scroll{
+        background-color: #b3b3b3;
+    }
+    .ant-tabs-tab-active{
+        .panelTitle{
+            background-color: #999;
+            span{
+                color: #fff;
+                font-size: 18px;
+                font-family: 'Segoe';
+            }
+        }
+    }
+    .panelTitle{
+        font-size: 18px;
+        font-family: 'Segoe';
+        padding: 0 10px;
+        border-right: 2px solid #e8e8e8;
+    }
+}
+
+.trial{
+    /* graph, title total height */
+    width: 100%;
+    height: 478px;
+    /* cancle default panel title style*/
+    .ant-tabs-bar{
+        margin: 0;
+    }
+    .graph{
+        height: 432px;
+        margin: 0 auto;
+    }
+}
+
+.detailTabs{
+    padding-left: 6px;
+    padding-right: 18px;
+}
+/* table list all */
+
+#tableList{
+    .commonTableStyle{
+        overflow: hidden;
+    }
+}
\ No newline at end of file

src/webui/src/style/accuracy.css

-.graph{
-    margin-top: 50px;
-}
-.trial{
-    width: 80%;
-    margin: 0 auto;
-    border: 2px solid #ccc;
-    box-shadow: 0px 2px 0px rgba(204,204,204,.8);
-}
-.trial .title{
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    font-size: 20px;
-    color: #333;
-    border-bottom: 1px solid #ccc;
-    padding-left: 20px;
-    box-shadow: 0px 1px 0px rgba(204,204,204,.8);
-}
-.title div{
-    width: 150px;
-    margin: 0 auto;
-}
-/* no data */
-.noData>div:first-child{
-    position: relative;
-}
-.showMess{
-    position: absolute;
-    left: 49%;
-    top: 48%;
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.45)
-    /* border: 1px solid red; */
-}
\ No newline at end of file