[webui] word format (such as Experiment summary, Log files) (#2737)

Co-authored-by: Lijiao <15910218274@163.com>

src/webui/src/components/Modals/ExperimentDrawer.tsx

@@ -106,7 +106,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
                     styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
                 >
                     <Pivot style={{ minHeight: 190 }} className="log-tab-body">
-                        <PivotItem headerText="Experiment Parameters">
+                        <PivotItem headerText="Experiment parameters">
                             <div className="just-for-log">
                                 <MonacoEditor
                                     width="100%"

src/webui/src/components/Modals/LogDrawer.tsx

@@ -51,7 +51,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
     dispatcherHTML = (): React.ReactNode => {
         return (
             <div>
-                <span>Dispatcher Log</span>
+                <span>Dispatcher log</span>
                 <span className="refresh" onClick={this.manualRefresh}>
                     {infoIcon}
                 </span>
@@ -62,7 +62,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
     nnimanagerHTML = (): React.ReactNode => {
         return (
             <div>
-                <span>NNImanager Log</span>
+                <span>NNImanager log</span>
                 <span className="refresh" onClick={this.manualRefresh}>{infoIcon}</span>
             </div>
         );
@@ -99,7 +99,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                             style={{ minHeight: 190, paddingTop: '16px' }}
                         >
                             {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
-                            <PivotItem headerText="Dispatcher Log" key="dispatcher">
+                            <PivotItem headerText="Dispatcher log" key="dispatcher">
                                 <MonacoHTML
                                     content={dispatcherLogStr || 'Loading...'}
                                     loading={isLoading}
@@ -115,7 +115,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                                     </StackItem>
                                 </Stack>
                             </PivotItem>
-                            <PivotItem headerText="NNIManager Log" key="nnimanager">
+                            <PivotItem headerText="NNIManager log" key="nnimanager">
                                 {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
                                 <MonacoHTML
                                     content={nniManagerLogStr || 'Loading...'}

src/webui/src/components/NavCon.tsx

@@ -189,13 +189,13 @@ class NavCon extends React.Component<NavProps, NavState> {
         items: [
             {
                 key: 'experiment',
-                text: 'Experiment Summary',
+                text: 'Experiment summary',
                 iconProps: { iconName: 'ShowResults' },
                 onClick: this.showExpcontent
             },
             {
                 key: 'logfiles',
-                text: 'Logfiles',
+                text: 'Log files',
                 iconProps: { iconName: 'FilePDB' },
                 onClick: this.showDispatcherLog
             }

src/webui/src/components/Overview.tsx

@@ -128,13 +128,13 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                             className="title"
                             onClick={this.clickMaxTop}
                         >
-                            <Title1 text="Top Maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
+                            <Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
                         </div>
                         <div
                             className="title minTitle"
                             onClick={this.clickMinTop}
                         >
-                            <Title1 text="Top Minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
+                            <Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
                         </div>
                         <div style={{position: 'absolute', right: 52, top: 6}}>
                             <Dropdown

src/webui/src/components/TrialsDetail.tsx

@@ -40,7 +40,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         this.state = {
             tablePageSize: 20,
             whichChart: 'Default metric',
-            searchType: 'Id',
+            searchType: 'id',
             // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
             searchFilter: trial => true
         };
@@ -56,16 +56,16 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             return;
         }
         switch (this.state.searchType) {
-            case 'Id':
+            case 'id':
                 filter = (trial): boolean => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
                 break;
             case 'Trial No.':
                 filter = (trial): boolean => trial.info.sequenceId.toString() === targetValue;
                 break;
-            case 'Status':
+            case 'status':
                 filter = (trial): boolean => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
                 break;
-            case 'Parameters':
+            case 'parameters':
                 // TODO: support filters like `x: 2` (instead of `"x": 2`)
                 filter = (trial): boolean => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
                 break;
@@ -91,7 +91,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             if (this.searchInput !== null) {
                 this.searchInput.value = '';
             }
-            this.setState(() => ({ searchType: item.text }));
+            this.setState(() => ({ searchType: item.key.toString() }));
         }
     }
 
@@ -101,10 +101,10 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         const source = TRIALS.filter(this.state.searchFilter);
         const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
         const searchOptions = [
-            { key: 'Id', text: 'Id' },
+            { key: 'id', text: 'Id' },
             { key: 'Trial No.', text: 'Trial No.' },
-            { key: 'Status', text: 'Status' },
-            { key: 'Parameters', text: 'Parameters' },
+            { key: 'status', text: 'Status' },
+            { key: 'parameters', text: 'Parameters' },
         ];
         return (
             <div>

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

@@ -196,7 +196,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
 
     StartTimeColumnConfig: any = {
-        name: 'Start Time',
+        name: 'Start time',
         key: 'startTime',
         fieldName: 'startTime',
         minWidth: 150,
@@ -210,7 +210,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
     };
 
     EndTimeColumnConfig: any = {
-        name: 'End Time',
+        name: 'End time',
         key: 'endTime',
         fieldName: 'endTime',
         minWidth: 200,
@@ -465,10 +465,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 case 'ID':
                     showColumn.push(this.IdColumnConfig);
                     break;
-                case 'Start Time':
+                case 'Start time':
                     showColumn.push(this.StartTimeColumnConfig);
                     break;
-                case 'End Time':
+                case 'End time':
                     showColumn.push(this.EndTimeColumnConfig);
                     break;
                 case 'Duration':

src/webui/src/static/const.ts

@@ -34,7 +34,7 @@ const OPERATION = 'Operation';
 // defatult selected column
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
 // all choice column !dictory final
-const COLUMNPro = ['Trial No.', 'ID', 'Start Time', 'End Time', 'Duration', 'Status',
+const COLUMNPro = ['Trial No.', 'ID', 'Start time', 'End time', 'Duration', 'Status',
     'Intermediate result', 'Default', OPERATION];
 const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
 const SUPPORTED_SEARCH_SPACE_TYPE = [