Refactor kill job (#4772)

ts/webui/src/components/nav/slideNav/SlideNavBtns.tsx

@@ -10,6 +10,7 @@ import '@style/nav/slideNavBtns.scss';
  * this file is the container of [config, search space, dispatcher/nnimanager log]
  * these three button is in the right of page
  */
+
 export const SlideNavBtns = (): any => {
     const [isShowConfigPanel, setShowConfigPanle] = useState(false);
     const [isShowLogPanel, setShowLogPanel] = useState(false);

ts/webui/src/components/nav/slideNav/TrialConfigPanel.tsx

@@ -8,12 +8,12 @@ import { convertDuration, caclMonacoEditorHeight } from '@static/function';
 import { prettyStringify } from '@static/jsonutil';
 import '@static/style/logPanel.scss';
 
-interface LogDrawerProps {
+interface LogPanelProps {
     hideConfigPanel: () => void;
     panelName: string;
 }
 
-interface LogDrawerState {
+interface LogPanelState {
     panelInnerHeight: number;
     innerWidth: number;
 }
@@ -24,8 +24,8 @@ interface LogDrawerState {
  * model
  */
 
-class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
-    constructor(props: LogDrawerProps) {
+class TrialConfigPanel extends React.Component<LogPanelProps, LogPanelState> {
+    constructor(props: LogPanelProps) {
         super(props);
 
         this.state = {
@@ -35,16 +35,16 @@ class TrialConfigPanel extends React.Component<LogDrawerProps, LogDrawerState> {
     }
 
     // use arrow function for change window size met error: this.setState is not a function
-    setLogDrawerHeight = (): void => {
+    setLogPanelHeight = (): void => {
         this.setState(() => ({ panelInnerHeight: window.innerHeight, innerWidth: window.innerWidth }));
     };
 
     async componentDidMount(): Promise<void> {
-        window.addEventListener('resize', this.setLogDrawerHeight);
+        window.addEventListener('resize', this.setLogPanelHeight);
     }
 
     componentWillUnmount(): void {
-        window.removeEventListener('resize', this.setLogDrawerHeight);
+        window.removeEventListener('resize', this.setLogPanelHeight);
     }
 
     render(): React.ReactNode {

ts/webui/src/index.tsx

@@ -17,7 +17,7 @@ ReactDOM.render(
         <Suspense
             fallback={
                 <div className='loading'>
-                    <img src={(path || '') + '/loading.gif'} />
+                    <img title='loading-graph' src={(path || '') + '/loading.gif'} />
                 </div>
             }
         >

ts/webui/src/static/function.ts

 import * as JSON5 from 'json5';
 import axios from 'axios';
 import { IContextualMenuProps } from '@fluentui/react';
-import { MANAGER_IP, RETIARIIPARAMETERS } from './const';
+import { RETIARIIPARAMETERS } from './const';
 import { EXPERIMENT } from './datamodel';
 import { MetricDataRecord, FinalType, TableObj, Tensorboard } from './interface';
 
@@ -71,7 +71,8 @@ const convertDuration = (seconds: number): string => {
     }
     seconds -= m * 60;
 
-    if (seconds > 0) {
+    // don't show `0s`
+    if (Math.floor(seconds) > 0) {
         str += `${Math.floor(seconds)}s`;
     }
     return str ? str : '0s';
@@ -187,37 +188,6 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
     };
 };
 
-// kill job
-const killJob = (key: number, id: string, status: string, updateList?: Function): void => {
-    axios(`${MANAGER_IP}/trial-jobs/${id}`, {
-        method: 'DELETE',
-        headers: {
-            'Content-Type': 'application/json;charset=utf-8'
-        }
-    })
-        .then(res => {
-            if (res.status === 200) {
-                // TODO: use Message.txt to tooltip
-                alert('Cancel the job successfully');
-                // render the table
-                if (updateList) {
-                    updateList(); // FIXME
-                }
-            } else {
-                alert('fail to cancel the job');
-            }
-        })
-        .catch(error => {
-            if (error.response.status === 500) {
-                if (error.response.data.error) {
-                    alert(error.response.data.error);
-                } else {
-                    alert('500 error, fail to cancel the job');
-                }
-            }
-        });
-};
-
 const filterByStatus = (item: TableObj): boolean => {
     return item.status === 'SUCCEEDED';
 };
@@ -380,6 +350,54 @@ const reformatRetiariiParameter = (parameters: any): {} => {
     return RETIARIIPARAMETERS in parameters ? parameters[RETIARIIPARAMETERS] : parameters;
 };
 
+function _inferColumnTitle(columnKey: string): string {
+    if (columnKey === 'sequenceId') {
+        return 'Trial No.';
+    } else if (columnKey === 'id') {
+        return 'ID';
+    } else if (columnKey === 'intermediateCount') {
+        return 'Intermediate results (#)';
+    } else if (columnKey === 'message') {
+        return 'Message';
+    } else if (columnKey.startsWith('space/')) {
+        return columnKey.split('/', 2)[1] + ' (space)';
+    } else if (columnKey === 'latestAccuracy') {
+        return 'Default metric'; // to align with the original design
+    } else if (columnKey.startsWith('metric/')) {
+        return columnKey.split('/', 2)[1] + ' (metric)';
+    } else if (columnKey.startsWith('_')) {
+        return columnKey;
+    } else {
+        // camel case to verbose form
+        const withSpace = columnKey.replace(/[A-Z]/g, letter => ` ${letter.toLowerCase()}`);
+        return withSpace.charAt(0).toUpperCase() + withSpace.slice(1);
+    }
+}
+
+const getIntermediateAllKeys = (intermediateDialogTrial: any): string[] => {
+    let intermediateAllKeysList: string[] = [];
+    if (intermediateDialogTrial!.intermediateMetrics !== undefined && intermediateDialogTrial!.intermediateMetrics[0]) {
+        const parsedMetric = parseMetrics(intermediateDialogTrial!.intermediateMetrics[0].data);
+        if (parsedMetric !== undefined && typeof parsedMetric === 'object') {
+            const allIntermediateKeys: string[] = [];
+            // just add type=number keys
+            for (const key in parsedMetric) {
+                if (typeof parsedMetric[key] === 'number') {
+                    allIntermediateKeys.push(key);
+                }
+            }
+            intermediateAllKeysList = allIntermediateKeys;
+        }
+    }
+
+    if (intermediateAllKeysList.includes('default') && intermediateAllKeysList[0] !== 'default') {
+        intermediateAllKeysList = intermediateAllKeysList.filter(item => item !== 'default');
+        intermediateAllKeysList.unshift('default');
+    }
+
+    return intermediateAllKeysList;
+};
+
 export {
     getPrefix,
     convertTime,
@@ -389,7 +407,6 @@ export {
     getFinal,
     downFile,
     intermediateGraphOption,
-    killJob,
     filterByStatus,
     filterDuration,
     formatAccuracy,
@@ -407,5 +424,7 @@ export {
     disableTensorboard,
     getTensorboardMenu,
     parametersType,
-    reformatRetiariiParameter
+    reformatRetiariiParameter,
+    getIntermediateAllKeys,
+    _inferColumnTitle
 };

ts/webui/src/static/style/common/common.scss

@@ -8,7 +8,6 @@ $themeBlue: #0071bc;
 
 .link {
     outline: none;
-    color: #333 !important;
     text-decoration: none;
 
     &:hover {
@@ -77,3 +76,13 @@ $themeBlue: #0071bc;
 .input-padding {
     padding-left: 10px;
 }
+
+.fontColor333 {
+    color: #333;
+}
+
+.font {
+    .color333 {
+        color: #333;
+    }
+}

ts/webui/src/static/style/copyParameter.scss

-$color: #f2f2f2;
-
-.formatStr {
-    border: 1px solid #8f8f8f;
-    color: #333;
-    padding: 5px 10px;
-    background-color: #fff;
-}
-
-.format {
-    .ant-modal-header {
-        background-color: $color;
-        border-bottom: none;
-    }
-
-    .ant-modal-footer {
-        background-color: $color;
-        border-top: none;
-    }
-
-    .ant-modal-body {
-        background-color: $color;
-        padding: 10px 24px !important;
-    }
-}

ts/webui/src/static/style/experiment/overview/basic.scss

@@ -15,11 +15,6 @@
     top: -4px;
 }
 
-/* error body font-color */
-.color {
-    color: #333 !important;
-}
-
 .inputBox {
     height: 32px;
     margin-top: 5px;

ts/webui/src/static/style/experiment/overview/overviewTitle.scss

@@ -4,7 +4,6 @@ $iconPaddingVal: 10px;
     span {
         font-size: 18px;
         font-weight: 600;
-        color: #333;
     }
 
     i {

ts/webui/src/static/style/experiment/trialdetail/compare.scss

@@ -20,7 +20,6 @@
         margin-bottom: 20px;
         border: 1px solid transparent;
         overflow: auto hidden;
-        color: #333;
 
         tr {
             line-height: 30px;
@@ -52,7 +51,6 @@
         position: relative;
 
         .compare-yAxis {
-            color: #333;
             position: absolute;
             top: 87%;
             left: 45%;

ts/webui/src/static/style/experiment/trialdetail/customized.scss

 /* resubmit confirm modal style */
-.resubmit {
-    .title {
-        font-size: 16px;
-        color: #000;
-
-        .color-warn,
-        .color-error {
-            color: red;
-        }
-
-        i {
-            margin-right: 10px;
-        }
-    }
-
-    .hint {
-        padding: 15px 0;
-        color: #333;
-        margin-left: 30px;
-    }
-
-    .color-succ {
-        color: green;
-    }
-}
-
 .hyper-box {
     padding: 16px 18px 16px 16px;
 }
@@ -48,38 +22,6 @@
     }
 }
 
-.tag-input {
-    margin-top: 25px;
-}
-
-/* submit & cancel buttons style */
-.modal-button {
-    text-align: right;
-    height: 28px;
-
-    /* cancel button style */
-    .cancelSty {
-        width: 80px;
-        background-color: #dadada;
-        border: none;
-        color: #333;
-    }
-
-    .cancelSty:hover,
-    .cancelSty:active,
-    .cancelSty:focus {
-        background-color: #dadada;
-    }
-
-    .distance {
-        margin-right: 8px;
-    }
-}
-
-.center {
-    text-align: center;
-}
-
 .icon-color {
     i {
         color: green;

ts/webui/src/static/style/experiment/trialdetail/trialsDetail.scss

@@ -81,6 +81,7 @@
 }
 
 .tooldetailAccuracy {
+    -webkit-user-select: text;
     user-select: text;
     min-width: 245px;
     max-width: 350px;
@@ -110,7 +111,6 @@
         position: absolute;
         left: 48%;
         top: 30%;
-        color: #333;
     }
 }
 
@@ -127,7 +127,6 @@
     position: relative;
 
     .xAxis {
-        color: #333;
         position: absolute;
         left: 50%;
         top: 88%;

ts/webui/src/static/style/experimentManagement/experiment.scss

@@ -70,11 +70,7 @@ $pageMargin: 24px;
     }
 
     .idColor {
-        color: #615f5d !important;
-    }
-
-    .toAnotherExp {
-        color: #0071bc !important;
+        color: #615f5d;
     }
 
     .ms-DetailsRow:focus {

ts/webui/src/static/style/logPath.scss

@@ -7,10 +7,6 @@
         margin-right: 5px;
     }
 
-    .logContent {
-        color: #333;
-    }
-
     .error {
         color: #cb4b16;
     }

ts/webui/src/static/style/nav/nav.scss

@@ -11,6 +11,7 @@ $barHeight: 56px;
 
     .ms-Button--commandBar {
         background-color: #0071bc;
+        -webkit-user-select: none;
         user-select: none;
 
         &:hover,