refactor(ui): migrate Reports to functional component and split files
#11794
Conversation
- follow a very similar process to 25e1939 - `state` -> `useState` - `this.props` -> arguments - `BasePage` + `this.queryParams` -> `location` argument + `URLSearchParams` - `componentDidMount` -> `useEffect` - `services.info.collectEvent` -> `useCollectEvent` - `saveHistory` -> `useEffect` + `historyUrl` - `Consumer` -> `useContext` - merge `renderReport` into the main component - will move filters into a separate component in the next commit, following existing convention and the commit - Promise chains -> async/await - getters and setters to regular functions - split out a pure function - can move this into a util file in the next commit - also modify some comments in `cron-workflows-list` - convert variable assigned to anonymous function to a named function - better practice, better tracing, less memory, etc Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
- split out pure function into its own file - to make clear that it is pure and unrelated to React state, context, etc - split out `ReportsFilters` component similar to `CronWorkflowFilters`, `WorkflowFilters`, etc - be consistent with how all these work - similar to 25e1939, refactor logic to have an `onChange` function and retrieve Workflows in a top-level effect (after all state has been set) - and similarly add an SCSS file with the appropriate styles - note: this may be worth refactoring as nearly all the filters have the same styles - refactor `ReportsFilters` logic to use async/await syntax - also refactor `CronWorkflowList` to use newer async/await syntax consistent with future state of codebase Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
There was a problem hiding this comment.
It's possible to optimize this a bit with useCallback. And I think most of the functional components are memoizable too.
But that can be done in a follow-up optimization PR if needed, leaving as is for now for least potential breakage. It also runs pretty fast locally anyway so nbd probably.
| history.push(historyUrl('reports' + (Utils.managedNamespace ? '' : '/{namespace}'), {namespace, labels: labels.join(',')})); | ||
| }, [namespace, labels]); | ||
|
|
||
| async function onChange(newNamespace: string, newLabels: string[]) { |
There was a problem hiding this comment.
potential useCallback optimization
| function getLabel(name: string) { | ||
| return (labels.find(label => label.startsWith(name)) || '').replace(name + '=', ''); | ||
| } | ||
|
|
||
| function setLabel(name: string, value: string) { | ||
| onChange(namespace, labels.filter(label => !label.startsWith(name)).concat(name + '=' + value)); | ||
| } | ||
|
|
||
| function getPhase() { | ||
| return getLabel(labelKeyPhase); | ||
| } | ||
|
|
||
| function setPhase(value: string) { | ||
| setLabel(labelKeyPhase, value); | ||
| } | ||
|
|
||
| function setWorkflowTemplate(value: string) { | ||
| setLabel(labelKeyWorkflowTemplate, value); | ||
| } | ||
|
|
||
| function setCronWorkflow(value: string) { | ||
| setLabel(labelKeyCronWorkflow, value); | ||
| } |
There was a problem hiding this comment.
potential useCallback optimizations
There was a problem hiding this comment.
Looks good, no need to worry about useCallback for now imo.
Might even be slower for some functions, anyway I think the performance of the UI is not a worry for me regardless.
Oh the only exception being the swagger docs page which is unusable but yes not related to this issue.
Agreed, figure I'd notate it at least. I used to write fully memoized components, but I'd forgotten some of the optimizations like
Yea it freezes everytime I try to use it. I can't even run a profiler on it. It may very well be on the |
Partial fix for #9810
Partial fix for #11740
Motivation
Use newer, modern functional components compatible with hooks instead of legacy class-based components
Use newer, modern async/await syntax instead of Promise chains
also remove a deprecated, upgrade-blocking usage of
BasePagesimilar to refactor(ui): migrateUserInfoto functional component #11793Modifications
Follow a very similar process to #7035
state->useStatethis.props-> argumentsBasePage+this.queryParams->locationargument +URLSearchParamscomponentDidMount->useEffectservices.info.collectEvent->useCollectEventsaveHistory->useEffect+historyUrlConsumer->useContextmerge
renderReportinto the main componentsplit out filters into a separate
ReportsFilterscomponent similar toCronWorkflowFilters,WorkflowFilters, etconChangefunction and retrieve Workflows in a top-level effect (after all state has been set)Promise chains -> async/await
ReportsFilterslogic to use async/await syntaxCronWorkflowListto use newer async/await syntax consistent with UI: Refactor to use async/await syntax #11740getters and setters to regular functions
split out a pure function into a util file
Also some tiny optimizations similar to #11743:
consts assigned to anonymous functionsVerification