[webui] fix little bugs (#4541)

ts/webui/README.md

@@ -14,6 +14,6 @@ WebUI is built by using [React](https://reactjs.org/docs/getting-started.html) a
 
 ## PR
 
-* WebUI uses [eslint](https://eslint.org/docs/user-guide/getting-started) and [prettier](https://prettier.io/docs/en/index.html) to format code. Before you send PR, you could use the command `yarn sanity-check` to format code style.
+* WebUI uses [eslint](https://eslint.org/docs/user-guide/getting-started) and [prettier](https://prettier.io/docs/en/index.html) to format code. You could use the command `yarn sanity-check` to check the code error status. And use `yarn sanity-check --fix` could modifiy the most code style error before you send PR.
 
 * You could send the PR if `yarn release` gets successful build after formatting code.

ts/webui/src/components/managementExp/ExperimentManager.tsx

@@ -285,7 +285,8 @@ class Experiment extends React.Component<{}, ExpListState> {
                 const searchInput = newValue.trim();
                 let result = originExperimentList.filter(
                     item =>
-                        item.experimentName.toLowerCase().includes(searchInput.toLowerCase()) ||
+                        (item.experimentName !== null &&
+                            item.experimentName.toLowerCase().includes(searchInput.toLowerCase())) ||
                         item.id.toLowerCase().includes(searchInput.toLowerCase())
                 );
                 result = this.commonSelectString(result, '');
@@ -400,13 +401,18 @@ class Experiment extends React.Component<{}, ExpListState> {
     private setSearchSource(): void {
         const { sortInfo, originExperimentList } = this.state;
         let { searchInputVal } = this.state;
+        let result = JSON.parse(JSON.stringify(originExperimentList));
         searchInputVal = searchInputVal.trim();
-        // hert re-search data for fix this status: filter first -> searchBox search result null -> close filter
-        const result = originExperimentList.filter(
-            item =>
-                item.experimentName.toLowerCase().includes(searchInputVal.toLowerCase()) ||
-                item.id.toLowerCase().includes(searchInputVal.toLowerCase())
-        );
+        // user input some value to filter trial [name, id] first...
+        if (searchInputVal !== '') {
+            // reset experiments list to first filter result
+            result = originExperimentList.filter(
+                item =>
+                    item.id.toLowerCase().includes(searchInputVal.toLowerCase()) ||
+                    (item.experimentName !== null &&
+                        item.experimentName.toLowerCase().includes(searchInputVal.toLowerCase()))
+            );
+        }
         this.setState(() => ({
             source: getSortedSource(result, sortInfo),
             selectedStatus: [],

ts/webui/src/components/modals/LogPanel.tsx

@@ -90,6 +90,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                     isFooterAtBottom={true}
                     isLightDismiss={true}
                     onLightDismissClick={closeDrawer}
+                    className='logPanel'
                 >
                     <Pivot selectedKey={activeTab} style={{ minHeight: 190 }}>
                         <PivotItem headerText='Dispatcher log' key='dispatcher'>

ts/webui/src/components/trial-detail/TableList.tsx

@@ -179,17 +179,21 @@ class TableList extends React.Component<TableListProps, TableListState> {
         checked?: boolean
     ): void => {
         const { displayedItems, selectedRowIds } = this.state;
-        const items = JSON.parse(JSON.stringify(displayedItems));
-        const temp = selectedRowIds;
-        if (checked === true) {
-            temp.push(id);
+        const latestDisplayedItems = JSON.parse(JSON.stringify(displayedItems));
+        let latestSelectedRowIds = selectedRowIds;
+
+        if (checked === false) {
+            latestSelectedRowIds = latestSelectedRowIds.filter(item => item !== id);
+        } else {
+            latestSelectedRowIds.push(id);
         }
-        items.forEach(item => {
+
+        latestDisplayedItems.forEach(item => {
             if (item.id === id) {
                 item._checked = !!checked;
             }
         });
-        this.setState(() => ({ displayedItems: items, selectedRowIds: temp }));
+        this.setState(() => ({ displayedItems: latestDisplayedItems, selectedRowIds: latestSelectedRowIds }));
     };
 
     private changeSelectTrialIds = (): void => {

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

@@ -38,6 +38,12 @@ $navBarMarginBottom: 18px;
     }
 }
 
+.logPanel {
+    .ms-Panel-main {
+        width: 80%;
+    }
+}
+
 .panel {
     padding: 0 38px;
 }