Refactor kill job (#4772)

ts/webui/src/App.tsx

@@ -6,7 +6,6 @@ import NavCon from '@components/nav/Nav';
 import MessageInfo from '@components/common/MessageInfo';
 import { COLUMN } from '@static/const';
 import { isManagerExperimentPage } from '@static/function';
-
 import '@style/App.scss';
 import '@style/common/common.scss';
 import '@style/experiment/trialdetail/trialsDetail.scss';
@@ -16,20 +15,6 @@ echarts.registerTheme('nni_theme', {
     color: '#3c8dbc'
 });
 
-interface AppState {
-    interval: number;
-    columnList: string[];
-    experimentUpdateBroadcast: number;
-    trialsUpdateBroadcast: number;
-    maxDurationUnit: string;
-    metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
-    isillegalFinal: boolean;
-    expWarningMessage: string;
-    bestTrialEntries: string; // for overview page: best trial entreis
-    isUpdate: boolean;
-    expandRowIDs: Set<string>;
-}
-
 export const AppContext = React.createContext({
     interval: 10, // sendons
     columnList: COLUMN,
@@ -52,12 +37,32 @@ export const AppContext = React.createContext({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     updateDetailPage: () => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    changeExpandRowIDs: (_val: string, _type?: string): void => {}
+    changeExpandRowIDs: (_val: string, _type?: string): void => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    startTimer: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    closeTimer: (): void => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    refreshDetailTable: (): void => {}
 });
 
+interface AppState {
+    interval: number;
+    columnList: string[];
+    experimentUpdateBroadcast: number;
+    trialsUpdateBroadcast: number;
+    maxDurationUnit: string;
+    metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
+    isillegalFinal: boolean;
+    expWarningMessage: string;
+    bestTrialEntries: string; // for overview page: best trial entreis
+    expandRowIDs: Set<string>;
+    timerIdList: number[];
+}
+
 class App extends React.Component<{}, AppState> {
-    private timerId!: number | undefined;
-    private firstLoad: boolean = false; // when click refresh selector options
+    private timerId = 0;
+
     constructor(props: {}) {
         super(props);
         this.state = {
@@ -70,8 +75,8 @@ class App extends React.Component<{}, AppState> {
             isillegalFinal: false,
             expWarningMessage: '',
             bestTrialEntries: '10',
-            isUpdate: true,
-            expandRowIDs: new Set()
+            expandRowIDs: new Set(),
+            timerIdList: []
         };
     }
 
@@ -82,73 +87,8 @@ class App extends React.Component<{}, AppState> {
             trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1,
             metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'
         }));
-        this.timerId = window.setTimeout(this.refresh, this.state.interval * 100);
-    }
-
-    changeInterval = (interval: number): void => {
-        window.clearTimeout(this.timerId);
-        if (interval === 0) {
-            return;
-        }
-        // setState will trigger page refresh at once.
-        // setState is asyc, interval not update to (this.state.interval) at once.
-        this.setState({ interval }, () => {
-            this.firstLoad = true;
-            this.refresh();
-        });
-    };
-
-    // TODO: use local storage
-    changeColumn = (columnList: string[]): void => {
-        this.setState({ columnList: columnList });
-    };
-
-    changeExpandRowIDs = (id: string, type?: string): void => {
-        const currentExpandRowIDs = this.state.expandRowIDs;
-
-        if (!currentExpandRowIDs.has(id)) {
-            currentExpandRowIDs.add(id);
-        } else {
-            if (!(type !== undefined && type === 'chart')) {
-                currentExpandRowIDs.delete(id);
-            }
-        }
-
-        this.setState({ expandRowIDs: currentExpandRowIDs });
-    };
-
-    changeMetricGraphMode = (val: 'max' | 'min'): void => {
-        this.setState({ metricGraphMode: val });
-    };
-
-    // overview best trial module
-    changeEntries = (entries: string): void => {
-        this.setState({ bestTrialEntries: entries });
-    };
-
-    // overview max duration unit
-    changeMaxDurationUnit = (unit: string): void => {
-        this.setState({ maxDurationUnit: unit });
-    };
-
-    updateOverviewPage = (): void => {
-        this.setState(state => ({
-            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1
-        }));
-    };
-
-    updateDetailPage = (): void => {
-        this.setState(state => ({
-            trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
-        }));
-    };
 
-    shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
-        if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
-            nextState.isUpdate = true;
-            return false;
-        }
-        return true;
+        this.startTimer();
     }
 
     render(): React.ReactNode {
@@ -165,7 +105,7 @@ class App extends React.Component<{}, AppState> {
             expandRowIDs
         } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
-            return null; // TODO: render a loading page
+            return null;
         }
         const errorList = [
             { errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
@@ -187,7 +127,7 @@ class App extends React.Component<{}, AppState> {
                         </div>
                         <Stack className='contentBox'>
                             <Stack className='content'>
-                                {/* search space & config */}
+                                {/* search space & config & dispatcher, nnimanagerlog*/}
                                 <SlideNavBtns />
                                 {/* if api has error field, show error message */}
                                 {errorList.map(
@@ -203,6 +143,7 @@ class App extends React.Component<{}, AppState> {
                                         <MessageInfo info={expWarningMessage} typeInfo='warning' />
                                     </div>
                                 )}
+                                {/* <AppContext.Provider */}
                                 <AppContext.Provider
                                     value={{
                                         interval,
@@ -212,14 +153,17 @@ class App extends React.Component<{}, AppState> {
                                         trialsUpdateBroadcast,
                                         metricGraphMode,
                                         maxDurationUnit,
+                                        bestTrialEntries,
                                         changeMaxDurationUnit: this.changeMaxDurationUnit,
                                         changeMetricGraphMode: this.changeMetricGraphMode,
-                                        bestTrialEntries,
                                         changeEntries: this.changeEntries,
-                                        updateOverviewPage: this.updateOverviewPage,
-                                        updateDetailPage: this.updateDetailPage,
                                         expandRowIDs,
-                                        changeExpandRowIDs: this.changeExpandRowIDs
+                                        changeExpandRowIDs: this.changeExpandRowIDs,
+                                        updateOverviewPage: this.updateOverviewPage,
+                                        updateDetailPage: this.updateDetailPage, // update current record without fetch api
+                                        refreshDetailTable: this.refreshDetailTable, // update record with fetch api
+                                        startTimer: this.startTimer,
+                                        closeTimer: this.closeTimer
                                     }}
                                 >
                                     {this.props.children}
@@ -233,38 +177,108 @@ class App extends React.Component<{}, AppState> {
     }
 
     private refresh = async (): Promise<void> => {
-        // resolve this question: 10s -> 20s, page refresh twice.
-        // only refresh this page after clicking the refresh options
-        if (this.firstLoad !== true) {
-            const [experimentUpdated, trialsUpdated] = await Promise.all([EXPERIMENT.update(), TRIALS.update()]);
-            if (experimentUpdated) {
-                this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-            }
-            if (trialsUpdated) {
-                this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-            }
-        } else {
-            this.firstLoad = false;
+        const [experimentUpdated, trialsUpdated] = await Promise.all([EXPERIMENT.update(), TRIALS.update()]);
+        if (experimentUpdated) {
+            this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+        }
+        if (trialsUpdated) {
+            this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
         }
 
         // experiment status and /trial-jobs api's status could decide website update
         if (['DONE', 'ERROR', 'STOPPED', 'VIEWED'].includes(EXPERIMENT.status) || TRIALS.jobListError()) {
             // experiment finished, refresh once more to ensure consistency
-            this.setState(() => ({ interval: 0, isUpdate: false }));
+            this.setState(() => ({ interval: 0 }));
+            this.closeTimer();
             return;
         }
 
-        this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+        this.startTimer();
     };
 
-    public async lastRefresh(): Promise<void> {
+    public lastRefresh = async (): Promise<void> => {
         await EXPERIMENT.update();
         await TRIALS.update(true);
         this.setState(state => ({
             experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
             trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
         }));
-    }
+    };
+
+    public changeInterval = (interval: number): void => {
+        this.setState(() => ({ interval: interval })); // reset interval val
+        this.closeTimer(); // close page auto refresh
+        if (interval !== 0) {
+            this.refresh();
+        }
+    };
+
+    public changeColumn = (columnList: string[]): void => {
+        this.setState({ columnList: columnList });
+    };
+
+    public changeExpandRowIDs = (id: string, type?: string): void => {
+        const currentExpandRowIDs = this.state.expandRowIDs;
+
+        if (!currentExpandRowIDs.has(id)) {
+            currentExpandRowIDs.add(id);
+        } else {
+            if (!(type !== undefined && type === 'chart')) {
+                currentExpandRowIDs.delete(id);
+            }
+        }
+
+        this.setState({ expandRowIDs: currentExpandRowIDs });
+    };
+
+    public changeMetricGraphMode = (val: 'max' | 'min'): void => {
+        this.setState({ metricGraphMode: val });
+    };
+
+    // overview best trial module
+    public changeEntries = (entries: string): void => {
+        this.setState({ bestTrialEntries: entries });
+    };
+
+    // overview max duration unit
+    public changeMaxDurationUnit = (unit: string): void => {
+        this.setState({ maxDurationUnit: unit });
+    };
+
+    public updateOverviewPage = (): void => {
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1
+        }));
+    };
+
+    public updateDetailPage = async (): Promise<void> => {
+        this.setState(state => ({
+            trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
+        }));
+    };
+
+    // fetch api to update table record data
+    public refreshDetailTable = async (): Promise<void> => {
+        await TRIALS.update(true);
+        this.setState(state => ({
+            trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
+        }));
+    };
+
+    // start to refresh page automatically
+    public startTimer = (): void => {
+        this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+        const storeTimerList = this.state.timerIdList;
+        storeTimerList.push(this.timerId);
+        this.setState(() => ({ timerIdList: storeTimerList }));
+    };
+
+    public closeTimer = (): void => {
+        const { timerIdList } = this.state;
+        timerIdList.forEach(item => {
+            window.clearTimeout(item);
+        });
+    };
 }
 
 export default App;

ts/webui/src/components/common/LogPathChild.tsx

@@ -18,11 +18,11 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
             <div className='logpath'>
                 <span className='logName'>{logName}</span>
                 {isLink ? (
-                    <a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
+                    <a className='fontColor333 logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
                         {eachLogpath}
                     </a>
                 ) : (
-                    <span className='logContent'>{eachLogpath}</span>
+                    <span className='fontColor333'>{eachLogpath}</span>
                 )}
             </div>
         );

ts/webui/src/components/common/OpenRow.tsx

@@ -11,7 +11,6 @@ import TrialLog from './TrialLog';
 import MessageInfo from './MessageInfo';
 import PanelMonacoEditor from './PanelMonacoEditor';
 import '@style/experiment/overview/overview.scss';
-import '@style/copyParameter.scss';
 import '@style/openRow.scss';
 
 /**

ts/webui/src/components/experiment/overview/Title.tsx

@@ -8,7 +8,7 @@ export const Title = (): any => (
         {(value): React.ReactNode => (
             <Stack horizontal className='panelTitle'>
                 <Icon iconName={value.icon} />
-                <span>{value.text}</span>
+                <span className='fontColor333'>{value.text}</span>
             </Stack>
         )}
     </TitleContext.Consumer>

ts/webui/src/components/experiment/overview/params/BasicInfo.tsx

@@ -14,12 +14,12 @@ export const BasicInfo = (): any => {
     const descriptionId: string = useId('callout-description');
     const ref = React.createRef<HTMLDivElement>();
     const [isCalloutVisible, setCalloutVisible] = useState(false);
-    const [isShowLogDrawer, setShowLogDrawer] = useState(false);
+    const [isShowLogPanel, setShowLogPanel] = useState(false);
     const onDismiss = useCallback(() => setCalloutVisible(false), []);
     const showCallout = useCallback(() => setCalloutVisible(true), []);
 
-    const closeLogDrawer = useCallback(() => setShowLogDrawer(false), []);
-    const ShowLogDrawer = useCallback(() => setShowLogDrawer(true), []);
+    const closeLogPanel = useCallback(() => setShowLogPanel(false), []);
+    const ShowLogPanel = useCallback(() => setShowLogPanel(true), []);
 
     return (
         <div>
@@ -53,17 +53,17 @@ export const BasicInfo = (): any => {
                                         onDismiss={onDismiss}
                                         setInitialFocus={true}
                                     >
-                                        <div className={styles.header}>
-                                            <p className={`${styles.title} color`} id={labelId}>
+                                        <div className={`${styles.header} font`}>
+                                            <p className={`${styles.title} color333`} id={labelId}>
                                                 Error
                                             </p>
                                         </div>
-                                        <div className={styles.inner}>
-                                            <p className={`${styles.subtext} color`} id={descriptionId}>
+                                        <div className={`${styles.inner} font`}>
+                                            <p className={`${styles.subtext} color333`} id={descriptionId}>
                                                 {EXPERIMENT.error}
                                             </p>
                                             <div className={styles.actions}>
-                                                <Link className={styles.link} onClick={ShowLogDrawer}>
+                                                <Link className={styles.link} onClick={ShowLogPanel}>
                                                     Learn about
                                                 </Link>
                                             </div>
@@ -92,7 +92,7 @@ export const BasicInfo = (): any => {
                 </div>
             </Stack>
             {/* learn about click -> default active key is dispatcher. */}
-            {isShowLogDrawer ? <LogPanel closePanel={closeLogDrawer} activeTab='dispatcher' /> : null}
+            {isShowLogPanel ? <LogPanel closePanel={closeLogPanel} activeTab='dispatcher' /> : null}
         </div>
     );
 };

ts/webui/src/components/experiment/trialdetail/TrialsDetail.tsx

@@ -96,7 +96,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         </div>
                         {/* trial table list */}
                         <div className='detailTable' style={{ marginTop: 10 }}>
-                            <TableList tableSource={source} updateDetailPage={this.context.updateDetailPage} />
+                            <TableList tableSource={source} />
                         </div>
                     </React.Fragment>
                 )}

ts/webui/src/components/experiment/trialdetail/chart/DefaultMetricPoint.tsx

@@ -172,7 +172,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
                         notMerge={true} // update now
                         onEvents={onEvents}
                     />
-                    <div className='default-metric-noData'>{accNodata}</div>
+                    <div className='default-metric-noData fontColor333'>{accNodata}</div>
                 </div>
             </div>
         );

ts/webui/src/components/experiment/trialdetail/chart/Intermediate.tsx

@@ -277,7 +277,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                         notMerge={true} // update now
                         onEvents={IntermediateEvents}
                     />
-                    <div className='xAxis'># Intermediate result</div>
+                    <div className='fontColor333'># Intermediate result</div>
                 </div>
             </div>
         );

ts/webui/src/components/experiment/trialdetail/table/TableList.tsx

@@ -10,22 +10,29 @@ import {
     DirectionalHint,
     Checkbox
 } from '@fluentui/react';
-import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import { Trial } from '@model/trial';
 import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
-import { convertDuration, formatTimestamp, copyAndSort, parametersType, parseMetrics } from '@static/function';
+import { EXPERIMENT, TRIALS } from '@static/datamodel';
+import {
+    convertDuration,
+    formatTimestamp,
+    copyAndSort,
+    parametersType,
+    _inferColumnTitle,
+    getIntermediateAllKeys
+} from '@static/function';
 import { TableObj, SortInfo, SearchItems } from '@static/interface';
-import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
 import { blocked, copy, LineChart, tableListIcon } from '@components/fluent/Icon';
-import ChangeColumnComponent from '../ChangeColumnComponent';
-import Compare from './tableFunction/Compare';
+import Search from './tableFunction/search/Search';
 import Customize from './tableFunction/CustomizedTrial';
 import TensorboardUI from './tableFunction/tensorboard/TensorboardUI';
-import Search from './tableFunction/search/Search';
-import KillJob from './tableFunction/killTrial/Killjob';
+import ChangeColumnComponent from '../ChangeColumnComponent';
+import Compare from './tableFunction/Compare';
+import KillJobIndex from './tableFunction/killJob/KillJobIndex';
+import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
 import ExpandableDetails from '@components/common/ExpandableDetails';
 import PaginationTable from '@components/common/PaginationTable';
 import CopyButton from '@components/common/CopyButton';
-import { Trial } from '@model/trial';
 
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -35,33 +42,8 @@ type SearchOptionType = 'id' | 'trialnum' | 'status' | 'parameters';
 
 const defaultDisplayedColumns = ['sequenceId', 'id', 'duration', 'status', 'latestAccuracy'];
 
-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);
-    }
-}
-
 interface TableListProps {
     tableSource: TableObj[];
-    updateDetailPage: () => void;
 }
 
 interface TableListState {
@@ -111,6 +93,133 @@ class TableList extends React.Component<TableListProps, TableListState> {
         this._expandedTrialIds = new Set<string>();
     }
 
+    componentDidUpdate(prevProps: TableListProps): void {
+        if (this.props.tableSource !== prevProps.tableSource) {
+            this._updateTableSource();
+        }
+    }
+
+    componentDidMount(): void {
+        this._updateTableSource();
+    }
+
+    render(): React.ReactNode {
+        const {
+            displayedItems,
+            columns,
+            customizeColumnsDialogVisible,
+            compareDialogVisible,
+            displayedColumns,
+            selectedRowIds,
+            intermediateDialogTrial,
+            copiedTrialId,
+            searchItems,
+            intermediateKeyList
+        } = this.state;
+
+        return (
+            <div id='tableList'>
+                <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
+                    <span style={{ marginRight: 12 }}>{tableListIcon}</span>
+                    <span className='fontColor333'>Trial jobs</span>
+                </Stack>
+                <Stack horizontal className='allList'>
+                    <StackItem>
+                        <Stack horizontal horizontalAlign='end' className='allList'>
+                            <Search
+                                searchFilter={searchItems} // search filter list
+                                changeSearchFilterList={this.changeSearchFilterList}
+                            />
+                        </Stack>
+                    </StackItem>
+
+                    <StackItem styles={{ root: { position: 'absolute', right: '0' } }}>
+                        <DefaultButton
+                            className='allList-button-gap'
+                            text='Add/Remove columns'
+                            onClick={(): void => {
+                                this.setState({ customizeColumnsDialogVisible: true });
+                            }}
+                        />
+                        <DefaultButton
+                            text='Compare'
+                            className='allList-compare'
+                            onClick={(): void => {
+                                this.setState({ compareDialogVisible: true });
+                            }}
+                            disabled={selectedRowIds.length === 0}
+                        />
+                        <TensorboardUI
+                            selectedRowIds={selectedRowIds}
+                            changeSelectTrialIds={this.changeSelectTrialIds}
+                        />
+                    </StackItem>
+                </Stack>
+                {columns && displayedItems && (
+                    <PaginationTable
+                        columns={columns.filter(
+                            column =>
+                                displayedColumns.includes(column.key) ||
+                                ['_expand', '_operation', '_selected'].includes(column.key)
+                        )}
+                        items={displayedItems}
+                        compact={true}
+                        selectionMode={0}
+                        selectionPreservedOnEmptyClick={true}
+                        onRenderRow={(props): any => {
+                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                            return <ExpandableDetails detailsProps={props!} isExpand={props!.item._expandDetails} />;
+                        }}
+                    />
+                )}
+                {compareDialogVisible && (
+                    <Compare
+                        title='Compare trials'
+                        showDetails={true}
+                        trials={this.props.tableSource.filter(trial => selectedRowIds.includes(trial.id))}
+                        onHideDialog={(): void => {
+                            this.setState({ compareDialogVisible: false });
+                        }}
+                        changeSelectTrialIds={this.changeSelectTrialIds}
+                    />
+                )}
+                {intermediateDialogTrial !== undefined && (
+                    <Compare
+                        title='Intermediate results'
+                        showDetails={false}
+                        trials={[intermediateDialogTrial]}
+                        intermediateKeyList={intermediateKeyList}
+                        onHideDialog={(): void => {
+                            this.setState({ intermediateDialogTrial: undefined });
+                        }}
+                    />
+                )}
+                {customizeColumnsDialogVisible && (
+                    <ChangeColumnComponent
+                        selectedColumns={displayedColumns}
+                        allColumns={columns
+                            .filter(column => !column.key.startsWith('_'))
+                            .map(column => ({ key: column.key, name: column.name }))}
+                        onSelectedChange={this._updateDisplayedColumns.bind(this)}
+                        onHideDialog={(): void => {
+                            this.setState({ customizeColumnsDialogVisible: false });
+                        }}
+                        whichComponent='table'
+                    />
+                )}
+                {/* Clone a trial and customize a set of new parameters */}
+                {/* visible is done inside because prompt is needed even when the dialog is closed */}
+                <Customize
+                    visible={copiedTrialId !== undefined}
+                    copyTrialId={copiedTrialId || ''}
+                    closeCustomizeModal={(): void => {
+                        this.setState({ copiedTrialId: undefined });
+                    }}
+                />
+            </div>
+        );
+    }
+
     /* Table basic function related methods */
 
     private _onColumnClick(ev: React.MouseEvent<HTMLElement>, column: IColumn): void {
@@ -288,6 +397,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 ...(k === 'status' && {
                     // color status
                     onRender: (record): React.ReactNode => (
+                        // kill 成功之后，重新拉取的数据如果有 endtime 字段，会马上render出user_cancel
+                        // 的状态，反之，没有这个字段，table依然是部分刷新，只刷新duration，不会
+                        // 刷新 status
                         <span className={`${record.status} commonStyle`}>{record.status}</span>
                     )
                 }),
@@ -434,7 +546,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     onClick={(): void => {
                         const { tableSource } = this.props;
                         const trial = tableSource.find(trial => trial.id === record.id) as TableObj;
-                        const intermediateKeyListResult = this.getIntermediateAllKeys(trial);
+                        const intermediateKeyListResult = getIntermediateAllKeys(trial);
                         this.setState({
                             intermediateDialogTrial: trial,
                             intermediateKeyList: intermediateKeyListResult
@@ -448,7 +560,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         {blocked}
                     </PrimaryButton>
                 ) : (
-                    <KillJob trial={record} />
+                    <KillJobIndex trialId={record.id} />
                 )}
                 <PrimaryButton
                     className='detail-button-operation'
@@ -464,166 +576,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
         );
     }
 
-    private changeSearchFilterList = (arr: Array<SearchItems>): void => {
+    public changeSearchFilterList = (arr: Array<SearchItems>): void => {
         this.setState(() => ({
             searchItems: arr
         }));
     };
-
-    private 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;
-    };
-
-    componentDidUpdate(prevProps: TableListProps): void {
-        if (this.props.tableSource !== prevProps.tableSource) {
-            this._updateTableSource();
-        }
-    }
-
-    componentDidMount(): void {
-        this._updateTableSource();
-    }
-
-    render(): React.ReactNode {
-        const {
-            displayedItems,
-            columns,
-            customizeColumnsDialogVisible,
-            compareDialogVisible,
-            displayedColumns,
-            selectedRowIds,
-            intermediateDialogTrial,
-            copiedTrialId,
-            searchItems,
-            intermediateKeyList
-        } = this.state;
-
-        return (
-            <div id='tableList'>
-                <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
-                    <span style={{ marginRight: 12 }}>{tableListIcon}</span>
-                    <span>Trial jobs</span>
-                </Stack>
-                <Stack horizontal className='allList'>
-                    <StackItem>
-                        <Stack horizontal horizontalAlign='end' className='allList'>
-                            <Search
-                                searchFilter={searchItems} // search filter list
-                                changeSearchFilterList={this.changeSearchFilterList}
-                                updatePage={this.props.updateDetailPage}
-                            />
-                        </Stack>
-                    </StackItem>
-
-                    <StackItem styles={{ root: { position: 'absolute', right: '0' } }}>
-                        <DefaultButton
-                            className='allList-button-gap'
-                            text='Add/Remove columns'
-                            onClick={(): void => {
-                                this.setState({ customizeColumnsDialogVisible: true });
-                            }}
-                        />
-                        <DefaultButton
-                            text='Compare'
-                            className='allList-compare'
-                            onClick={(): void => {
-                                this.setState({ compareDialogVisible: true });
-                            }}
-                            disabled={selectedRowIds.length === 0}
-                        />
-                        <TensorboardUI
-                            selectedRowIds={selectedRowIds}
-                            changeSelectTrialIds={this.changeSelectTrialIds}
-                        />
-                    </StackItem>
-                </Stack>
-                {columns && displayedItems && (
-                    <PaginationTable
-                        columns={columns.filter(
-                            column =>
-                                displayedColumns.includes(column.key) ||
-                                ['_expand', '_operation', '_selected'].includes(column.key)
-                        )}
-                        items={displayedItems}
-                        compact={true}
-                        selectionMode={0}
-                        selectionPreservedOnEmptyClick={true}
-                        onRenderRow={(props): any => {
-                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                            return <ExpandableDetails detailsProps={props!} isExpand={props!.item._expandDetails} />;
-                        }}
-                    />
-                )}
-                {compareDialogVisible && (
-                    <Compare
-                        title='Compare trials'
-                        showDetails={true}
-                        trials={this.props.tableSource.filter(trial => selectedRowIds.includes(trial.id))}
-                        onHideDialog={(): void => {
-                            this.setState({ compareDialogVisible: false });
-                        }}
-                        changeSelectTrialIds={this.changeSelectTrialIds}
-                    />
-                )}
-                {intermediateDialogTrial !== undefined && (
-                    <Compare
-                        title='Intermediate results'
-                        showDetails={false}
-                        trials={[intermediateDialogTrial]}
-                        intermediateKeyList={intermediateKeyList}
-                        onHideDialog={(): void => {
-                            this.setState({ intermediateDialogTrial: undefined });
-                        }}
-                    />
-                )}
-                {customizeColumnsDialogVisible && (
-                    <ChangeColumnComponent
-                        selectedColumns={displayedColumns}
-                        allColumns={columns
-                            .filter(column => !column.key.startsWith('_'))
-                            .map(column => ({ key: column.key, name: column.name }))}
-                        onSelectedChange={this._updateDisplayedColumns.bind(this)}
-                        onHideDialog={(): void => {
-                            this.setState({ customizeColumnsDialogVisible: false });
-                        }}
-                        whichComponent='table'
-                    />
-                )}
-                {/* Clone a trial and customize a set of new parameters */}
-                {/* visible is done inside because prompt is needed even when the dialog is closed */}
-                <Customize
-                    visible={copiedTrialId !== undefined}
-                    copyTrialId={copiedTrialId || ''}
-                    closeCustomizeModal={(): void => {
-                        this.setState({ copiedTrialId: undefined });
-                    }}
-                />
-            </div>
-        );
-    }
 }
 
 export default TableList;

ts/webui/src/components/experiment/trialdetail/table/tableFunction/Compare.tsx

@@ -194,7 +194,7 @@ class Compare extends React.Component<CompareProps, CompareState> {
         const metricKeys = this._overlapKeys(items.map(item => item.metrics));
 
         return (
-            <table className={`compare-modal-table ${scrollClass}`}>
+            <table className={`compare-modal-table ${scrollClass} fontColor333`}>
                 <tbody>
                     {this._renderRow('id', 'ID', 'value idList', items, item => item.id)}
                     {this._renderRow('trialnum', 'Trial No.', 'value', items, item => item.sequenceId.toString())}
@@ -281,7 +281,7 @@ class Compare extends React.Component<CompareProps, CompareState> {
                     ) : null}
                     <Stack className='compare-modal-intermediate'>
                         {this._intermediates(items)}
-                        <Stack className='compare-yAxis'># Intermediate result</Stack>
+                        <Stack className='compare-yAxis fontColor333'># Intermediate result</Stack>
                     </Stack>
                     {showDetails && <Stack>{this._columns(items)}</Stack>}
                 </div>

ts/webui/src/components/experiment/trialdetail/table/tableFunction/CustomizedTrial.tsx

@@ -205,13 +205,6 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                                 </StackItem>
                             </Stack>
                         ))}
-                        {/* disable [tag] because we havn't support */}
-                        {/* <Stack key="tag" horizontal className="hyper-form tag-input">
-                            <StackItem grow={9} className="title">Tag</StackItem>
-                            <StackItem grow={15} className="inputs">
-                                <input type="text" value='Customized' />
-                            </StackItem>
-                        </Stack> */}
                     </form>
                     <DialogFooter>
                         <PrimaryButton text='Submit' onClick={this.addNewTrial} />

ts/webui/src/components/experiment/trialdetail/table/tableFunction/killJob/KillJobDialog.tsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import { PrimaryButton, Dialog, DialogType, DialogFooter } from '@fluentui/react';
+
+function KillJobDialog(props): any {
+    const { onHideDialog, trialId, isError } = props;
+
+    const dialogContentProps = {
+        type: DialogType.normal,
+        title: 'Kill job'
+    };
+
+    return (
+        <Dialog hidden={false} dialogContentProps={dialogContentProps} modalProps={{ className: 'dialog' }}>
+            {isError.isError ? (
+                <div>
+                    <div>Trial {trialId} kill failed!</div>
+                    <span>Error message: {isError.message}</span>
+                </div>
+            ) : (
+                <div>
+                    Trial <span className='bold'>{trialId}</span> had been killed successfully.
+                </div>
+            )}
+            <DialogFooter>
+                <PrimaryButton onClick={onHideDialog} text='Close' />
+            </DialogFooter>
+        </Dialog>
+    );
+}
+
+KillJobDialog.propTypes = {
+    trialId: PropTypes.string,
+    isError: PropTypes.object,
+    onHideDialog: PropTypes.func
+};
+
+export default KillJobDialog;

ts/webui/src/components/experiment/trialdetail/table/tableFunction/killJob/KillJobIndex.tsx

+import React, { useState, useRef, useContext } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { Stack, FocusTrapCallout, DefaultButton, FocusZone, PrimaryButton } from '@fluentui/react';
+import { MANAGER_IP } from '@static/const';
+import KillJobDialog from './KillJobDialog';
+import { blocked } from '@components/fluent/Icon';
+import { gap10 } from '@components/fluent/ChildrenGap';
+import { styles } from '@components/experiment/overview/params/basicInfoStyles';
+import { AppContext } from '@/App';
+
+function KillJobIndex(props): any {
+    const menuButtonElement = useRef(null);
+    const { startTimer, closeTimer, interval, refreshDetailTable } = useContext(AppContext);
+    const { trialId } = props;
+    const [isCalloutVisible, setCalloutVisible] = useState(false);
+    const [isVisibleKillDialog, setKillDialogVisible] = useState(false);
+    const [error, setError] = useState({ isError: false, message: '' });
+
+    const promptString = 'Are you sure to cancel this trial?';
+
+    // kill trial
+    const killJob = (id: string): void => {
+        if (interval !== 0) {
+            closeTimer(); // close auto refresh to confirm show the kill model
+        }
+        axios(`${MANAGER_IP}/trial-jobs/${id}`, {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json;charset=utf-8'
+            }
+        })
+            .then(res => {
+                if (res.status === 200) {
+                    setKillDialogVisible(true);
+                    setError({ isError: false, message: '' });
+                } else {
+                    setKillDialogVisible(true);
+                    setError({ isError: false, message: 'fail to cancel the job' });
+                }
+            })
+            .catch(error => {
+                if (error.response) {
+                    setKillDialogVisible(true);
+                    setError({ isError: false, message: error.response.data.error || 'Fail to cancel the job' });
+                } else {
+                    setKillDialogVisible(true);
+                    setError({
+                        isError: false,
+                        message: error.response.data.error || '500 error, fail to cancel the job'
+                    });
+                }
+            });
+    };
+
+    const onDismissKillJobMessageDialog = async (): Promise<void> => {
+        setKillDialogVisible(false);
+        await refreshDetailTable();
+        if (interval !== 0) {
+            startTimer(); // start refresh
+        }
+    };
+
+    const onDismiss = (): void => {
+        setCalloutVisible(false);
+    };
+
+    const onKill = (): void => {
+        setCalloutVisible(false);
+        killJob(props.trialId);
+    };
+
+    const openPrompt = (event: React.SyntheticEvent<EventTarget>): void => {
+        event.preventDefault();
+        event.stopPropagation();
+        setCalloutVisible(true);
+    };
+
+    return (
+        <div>
+            <div className={styles.buttonArea} ref={menuButtonElement}>
+                <PrimaryButton className='detail-button-operation' onClick={openPrompt} title='kill'>
+                    {blocked}
+                </PrimaryButton>
+            </div>
+            {isCalloutVisible ? (
+                <div>
+                    <FocusTrapCallout
+                        role='alertdialog'
+                        className={styles.callout}
+                        gapSpace={0}
+                        target={menuButtonElement}
+                        onDismiss={onDismiss}
+                        setInitialFocus={true}
+                    >
+                        <div className={`${styles.header} font`}>
+                            <p className={`${styles.title} color333`}>Kill trial</p>
+                        </div>
+                        <div className={`${styles.inner} font`}>
+                            <div>
+                                <p className={`${styles.subtext} color333`}>{promptString}</p>
+                            </div>
+                        </div>
+                        <FocusZone>
+                            <Stack className={styles.buttons} tokens={gap10} horizontal>
+                                <DefaultButton onClick={onDismiss}>No</DefaultButton>
+                                <PrimaryButton onClick={onKill}>Yes</PrimaryButton>
+                            </Stack>
+                        </FocusZone>
+                    </FocusTrapCallout>
+                </div>
+            ) : null}
+            {/* kill job status dialog */}
+            {isVisibleKillDialog && (
+                <KillJobDialog trialId={trialId} isError={error} onHideDialog={onDismissKillJobMessageDialog} />
+            )}
+        </div>
+    );
+}
+
+KillJobIndex.propTypes = {
+    trialId: PropTypes.string,
+    updatePage: PropTypes.func
+};
+
+export default KillJobIndex;

ts/webui/src/components/experiment/trialdetail/table/tableFunction/killTrial/Killjob.tsx

-import * as React from 'react';
-import { Stack, FocusTrapCallout, DefaultButton, FocusZone, PrimaryButton } from '@fluentui/react';
-import { killJob } from '@static/function';
-import { blocked } from '@components/fluent/Icon';
-import { styles } from '@components/experiment/overview/params/basicInfoStyles';
-
-interface KillJobState {
-    isCalloutVisible: boolean;
-}
-
-interface KillJobProps {
-    trial: any;
-}
-
-class KillJob extends React.Component<KillJobProps, KillJobState> {
-    private menuButtonElement!: HTMLElement | null;
-    constructor(props: KillJobProps) {
-        super(props);
-        this.state = { isCalloutVisible: false };
-    }
-
-    render(): React.ReactNode {
-        const { isCalloutVisible } = this.state;
-        const prompString = 'Are you sure to cancel this trial?';
-        return (
-            <div>
-                <div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
-                    <PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
-                        {blocked}
-                    </PrimaryButton>
-                </div>
-                {isCalloutVisible ? (
-                    <div>
-                        <FocusTrapCallout
-                            role='alertdialog'
-                            className={styles.callout}
-                            gapSpace={0}
-                            target={this.menuButtonElement}
-                            onDismiss={this.onDismiss}
-                            setInitialFocus={true}
-                        >
-                            <div className={styles.header}>
-                                <p className={styles.title} style={{ color: '#333' }}>
-                                    Kill trial
-                                </p>
-                            </div>
-                            <div className={styles.inner}>
-                                <div>
-                                    <p className={styles.subtext} style={{ color: '#333' }}>
-                                        {prompString}
-                                    </p>
-                                </div>
-                            </div>
-                            <FocusZone>
-                                <Stack className={styles.buttons} gap={8} horizontal>
-                                    <DefaultButton onClick={this.onDismiss}>No</DefaultButton>
-                                    <PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
-                                </Stack>
-                            </FocusZone>
-                        </FocusTrapCallout>
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
-
-    private onDismiss = (): void => {
-        this.setState(() => ({ isCalloutVisible: false }));
-    };
-
-    private onKill = (): void => {
-        this.setState({ isCalloutVisible: false }, () => {
-            const { trial } = this.props;
-            killJob(trial.key, trial.id, trial.status);
-        });
-    };
-
-    private openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setState({ isCalloutVisible: true });
-    };
-}
-
-export default KillJob;

ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/GeneralSearch.tsx

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Stack, PrimaryButton } from '@fluentui/react';
 import { gap10 } from '@components/fluent/ChildrenGap';
+import { AppContext } from '@/App';
 import { getSearchInputValueBySearchList } from './searchFunction';
 
 // This file is for search trial ['Trial id', 'Trial No.']
 
 function GeneralSearch(props): any {
+    const { updateDetailPage } = useContext(AppContext);
     // searchName val: Trial No. | Trial id
-    const { searchName, searchFilter, dismiss, changeSearchFilterList, setSearchInputVal, updatePage } = props;
+    const { searchName, searchFilter, dismiss, changeSearchFilterList, setSearchInputVal } = props;
     const [firstInputVal, setFirstInputVal] = useState(getSearchNameInit());
 
     function updateFirstInputVal(ev: React.ChangeEvent<HTMLInputElement>): void {
@@ -56,7 +58,7 @@ function GeneralSearch(props): any {
         }
         setSearchInputVal(getSearchInputValueBySearchList(searchFilterConditions));
         changeSearchFilterList(searchFilterConditions);
-        updatePage();
+        updateDetailPage();
         dismiss(); // close menu
     }
 
@@ -75,8 +77,7 @@ GeneralSearch.propTypes = {
     searchFilter: PropTypes.array,
     dismiss: PropTypes.func,
     setSearchInputVal: PropTypes.func,
-    changeSearchFilterList: PropTypes.func,
-    updatePage: PropTypes.func
+    changeSearchFilterList: PropTypes.func
 };
 
 export default GeneralSearch;

ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/Search.tsx

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
     Stack,
@@ -13,11 +13,13 @@ import { SearchItems } from '@static/interface';
 import SearchParameterConditions from './SearchParameterConditions';
 import GeneralSearch from './GeneralSearch';
 import { classNames, isChoiceType } from './searchFunction';
+import { AppContext } from '@/App';
 
 // TableList search layout
 
 function Search(props): any {
-    const { searchFilter, changeSearchFilterList, updatePage } = props;
+    const { searchFilter, changeSearchFilterList } = props;
+    const { updateDetailPage } = useContext(AppContext);
     const [searchInputVal, setSearchInputVal] = useState('');
 
     function getSearchMenu(parameterList): IContextualMenuProps {
@@ -80,7 +82,7 @@ function Search(props): any {
                 parameter={item.text}
                 searchFilter={searchFilter} // search filter list
                 changeSearchFilterList={changeSearchFilterList}
-                updatePage={updatePage}
+                updatePage={updateDetailPage}
                 setSearchInputVal={setSearchInputVal}
                 dismiss={dismissMenu} // close menu
             />
@@ -94,7 +96,6 @@ function Search(props): any {
                 searchFilter={searchFilter} // search fliter list
                 changeSearchFilterList={changeSearchFilterList}
                 setSearchInputVal={setSearchInputVal}
-                updatePage={updatePage}
                 dismiss={dismissMenu} // after click Apply button to close menu
             />
         );
@@ -107,7 +108,7 @@ function Search(props): any {
     // update TableList page
     function changeTableListPage(searchFilterList: Array<SearchItems>): void {
         changeSearchFilterList(searchFilterList);
-        updatePage();
+        updateDetailPage();
     }
 
     // deal with the format 1.[x, (space)xx] 2. (space)[x]
@@ -266,8 +267,7 @@ function Search(props): any {
 
 Search.propTypes = {
     searchFilter: PropTypes.array,
-    changeSearchFilterList: PropTypes.func,
-    updatePage: PropTypes.func
+    changeSearchFilterList: PropTypes.func
 };
 
 export default Search;

ts/webui/src/components/experiment/trialdetail/table/tableFunction/search/SearchParameterConditions.tsx

-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Stack, PrimaryButton, Dropdown, IDropdownOption } from '@fluentui/react';
 import { EXPERIMENT } from '@static/datamodel';
 import { getDropdownOptions, getSearchInputValueBySearchList } from './searchFunction';
 import { gap10 } from '@components/fluent/ChildrenGap';
+import { AppContext } from '@/App';
 
 // This file is for filtering trial parameters and trial status
 
 function SearchParameterConditions(props): any {
-    const { parameter, searchFilter, dismiss, changeSearchFilterList, updatePage, setSearchInputVal } = props;
+    const { parameter, searchFilter, dismiss, changeSearchFilterList, setSearchInputVal } = props;
+    const { updateDetailPage } = useContext(AppContext);
     const isChoiceTypeSearchFilter = parameter === 'StatusNNI' || EXPERIMENT.searchSpace[parameter]._type === 'choice';
     const operatorList = isChoiceTypeSearchFilter ? ['=', '≠'] : ['between', '>', '<', '=', '≠'];
 
@@ -125,7 +127,7 @@ function SearchParameterConditions(props): any {
 
         setSearchInputVal(getSearchInputValueBySearchList(newSearchFilters));
         changeSearchFilterList(newSearchFilters);
-        updatePage();
+        updateDetailPage();
         dismiss(); // close menu
     }
 

ts/webui/src/components/experimentManagement/TrialIdColumn.tsx

@@ -25,12 +25,7 @@ class TrialIdColumn extends React.Component<TrialIdColumnProps, {}> {
                 {item.status === 'STOPPED' ? (
                     <div className='idColor'>{item.id}</div>
                 ) : (
-                    <a
-                        href={webuiPortal}
-                        className='link toAnotherExp idColor'
-                        target='_blank'
-                        rel='noopener noreferrer'
-                    >
+                    <a href={webuiPortal} className='link' target='_blank' rel='noopener noreferrer'>
                         {item.id}
                     </a>
                 )}

ts/webui/src/components/nav/Nav.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import axios from 'axios';
 import { Stack, StackItem, CommandBarButton, IContextualMenuProps } from '@fluentui/react';
 import { Link } from 'react-router-dom';
-import { WEBUIDOC, MANAGER_IP } from '@static/const';
+import { MANAGER_IP, WEBUIDOC } from '@static/const';
 import ExperimentSummaryPanel from './slideNav/ExperimentSummaryPanel';
 import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './slideNav/NNItabs';
 import { EXPERIMENT } from '@static/datamodel';
@@ -160,7 +160,7 @@ class NavCon extends React.Component<NavProps, NavState> {
                     </StackItem>
                     {isvisibleExperimentDrawer && (
                         <ExperimentSummaryPanel
-                            closeExpDrawer={this.closeExpDrawer}
+                            closeExpPanel={this.closeExpDrawer}
                             experimentProfile={EXPERIMENT.profile}
                         />
                     )}

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

@@ -7,26 +7,26 @@ import { EXPERIMENT, TRIALS } from '@static/datamodel';
 import { caclMonacoEditorHeight } from '@static/function';
 import '@style/logPanel.scss';
 
-interface ExpDrawerProps {
-    closeExpDrawer: () => void;
+interface ExpPanelProps {
+    closeExpPanel: () => void;
     experimentProfile: object;
 }
 
-interface ExpDrawerState {
+interface ExpPanelState {
     experiment: string;
-    expDrawerHeight: number;
+    expPanelHeight: number;
 }
 
-class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerState> {
+class ExperimentSummaryPanel extends React.Component<ExpPanelProps, ExpPanelState> {
     public _isExperimentMount!: boolean;
     private refreshId!: number | undefined;
 
-    constructor(props: ExpDrawerProps) {
+    constructor(props: ExpPanelProps) {
         super(props);
 
         this.state = {
             experiment: '',
-            expDrawerHeight: window.innerHeight
+            expPanelHeight: window.innerHeight
         };
     }
 
@@ -67,7 +67,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
     };
 
     onWindowResize = (): void => {
-        this.setState(() => ({ expDrawerHeight: window.innerHeight }));
+        this.setState(() => ({ expPanelHeight: window.innerHeight }));
     };
 
     componentDidMount(): void {
@@ -84,12 +84,12 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
     }
 
     render(): React.ReactNode {
-        const { closeExpDrawer } = this.props;
-        const { experiment, expDrawerHeight } = this.state;
-        const monacoEditorHeight = caclMonacoEditorHeight(expDrawerHeight);
+        const { closeExpPanel } = this.props;
+        const { experiment, expPanelHeight } = this.state;
+        const monacoEditorHeight = caclMonacoEditorHeight(expPanelHeight);
 
         return (
-            <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpDrawer}>
+            <Panel isOpen={true} hasCloseButton={false} isLightDismiss={true} onLightDismissClick={closeExpPanel}>
                 <div className='panel'>
                     <div className='panelName'>Summary</div>
                     <MonacoEditor
@@ -104,7 +104,7 @@ class ExperimentSummaryPanel extends React.Component<ExpDrawerProps, ExpDrawerSt
                             <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
                         </StackItem>
                         <StackItem grow={50} className='close'>
-                            <DefaultButton text='Close' onClick={closeExpDrawer} />
+                            <DefaultButton text='Close' onClick={closeExpPanel} />
                         </StackItem>
                     </Stack>
                 </div>