[webui] refactor overview page #2924
Conversation
| @@ -30,7 +30,9 @@ export const AppContext = React.createContext({ | |||
| // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars | |||
| changeMetricGraphMode: (val: 'max' | 'min') => {}, | |||
| // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars | |||
| changeEntries: (val: string) => {} | |||
| changeEntries: (val: string) => {}, | |||
There was a problem hiding this comment.
I think (_: string) => {} will suppress the warning.
Why no-empty-function is enabled? Doesn't make any sense to me.
There was a problem hiding this comment.
It makes sense to me. And this rule is discussed result?
| return ( | ||
| <React.Fragment> | ||
| <Stack className='config'> | ||
| <DefaultButton text='Config' onClick={showTrialConfigpPanel} /> |
src/webui/yarn.lock
Outdated
| @@ -12018,7 +12018,7 @@ selfsigned@^1.9.1: | |||
| resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b" | |||
| integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA== | |||
| dependencies: | |||
| node-forge "^0.10.0" | |||
| node-forge "0.9.0" | |||
There was a problem hiding this comment.
seems like the command yarn cause this change.
| <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}> | ||
| <span style={{ marginRight: 12 }}>{tableListIcon}</span> | ||
| <span>Trial jobs</span> | ||
| <div style={{ backgroundColor: '#fff', marginTop: 18 }}> |
There was a problem hiding this comment.
suggest moving the style into trialsDetail.scss
There was a problem hiding this comment.
add bulletedList className for background color style. and keep style={{ marginTop:18 }} because of priority(write this style in .bulletedList doesn't work)
| @@ -116,6 +90,12 @@ class App extends React.Component<{}, AppState> { | |||
| this.setState({ bestTrialEntries: entries }); | |||
| }; | |||
|
|
|||
| updateOverviewPage = (): void => { | |||
| this.setState(state => ({ | |||
There was a problem hiding this comment.
Seems the parenthesis is not necessary.
| import '../../../static/style/overview/config.scss'; | ||
|
|
||
| export const TrialConfigButton = (): any => { | ||
| const [isShowConfigPanel, setShowConfigPanle] = useState(false); |
There was a problem hiding this comment.
Why using hook here?
I'm not familiar with this feature. But it looks less clear and "typed" to me at first glance.
There was a problem hiding this comment.
hooks is useful for function component with [true, false] states. I upgrad react version is main to use hooks:)
related issue: #2779 #2921