Skip to content

[Watcher] Migrate to use new page layout#101956

Merged
alisonelizabeth merged 7 commits intoelastic:masterfrom
alisonelizabeth:watcher/new_page_layout
Jun 16, 2021
Merged

[Watcher] Migrate to use new page layout#101956
alisonelizabeth merged 7 commits intoelastic:masterfrom
alisonelizabeth:watcher/new_page_layout

Conversation

@alisonelizabeth
Copy link
Copy Markdown
Contributor

@alisonelizabeth alisonelizabeth commented Jun 10, 2021 •
edited
Loading

This PR migrates Watcher to use the new page layout. It also addresses a couple bugs I noticed with how we were rendering errors (see inline comments for more details).

Related to #100748

Screenshots

Screenshots

Watch list
Screen Shot 2021-06-15 at 12 11 55 PM
Screen Shot 2021-06-15 at 12 19 01 PM
Screen Shot 2021-06-15 at 12 27 28 PM
Screen Shot 2021-06-15 at 12 30 25 PM

Threshold watch
Screen Shot 2021-06-15 at 12 30 00 PM
Screen Shot 2021-06-15 at 12 45 54 PM

Edit watch loading/error states
Screen Shot 2021-06-15 at 12 44 05 PM
Screen Shot 2021-06-15 at 12 45 04 PM

JSON watch
Screen Shot 2021-06-15 at 12 30 37 PM
Screen Shot 2021-06-15 at 12 30 47 PM
Screen Shot 2021-06-15 at 12 32 34 PM

System watch
Screen Shot 2021-06-15 at 12 47 13 PM

Watch details
Screen Shot 2021-06-15 at 12 50 58 PM
Screen Shot 2021-06-15 at 12 51 23 PM
Screen Shot 2021-06-15 at 12 51 31 PM
Screen Shot 2021-06-15 at 12 53 35 PM

@alisonelizabeth alisonelizabeth added chore Feature:Watcher v8.0.0 Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// release_note:skip Skip the PR/issue when compiling release notes v7.14.0 labels Jun 10, 2021
@alisonelizabeth alisonelizabeth mentioned this pull request Jun 10, 2021
Closed
10 tasks
alisonelizabeth
alisonelizabeth commented Jun 15, 2021
View reviewed changes
x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
dispatch({ command: 'setWatch', payload: loadedWatch });
} catch (error) {
dispatch({ command: 'setError', payload: error });
dispatch({ command: 'setError', payload: error.body });
Copy link
Copy Markdown
Contributor Author

@alisonelizabeth alisonelizabeth Jun 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This addresses a bug I noticed while testing - the error handling wasn't working as expected here, as getPageErrorCode(loadError) expects a statusCode.

alisonelizabeth
alisonelizabeth commented Jun 15, 2021
View reviewed changes
x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
<EuiPageContent>
<PageError />
<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
<PageError errorCode={errorCode} />
Copy link
Copy Markdown
Contributor Author

@alisonelizabeth alisonelizabeth Jun 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This addresses a bug I noticed while testing - the error handling wasn't working as expected here since we weren't passing an errorCode prop.

@alisonelizabeth alisonelizabeth marked this pull request as ready for review June 15, 2021 17:47
@alisonelizabeth alisonelizabeth requested a review from a team as a code owner June 15, 2021 17:47
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jun 15, 2021

Pinging @elastic/kibana-stack-management (Team:Stack Management)

@alisonelizabeth
Copy link
Copy Markdown
Contributor Author

alisonelizabeth commented Jun 15, 2021

@elasticmachine merge upstream

@cjcenizal
Copy link
Copy Markdown
Contributor

cjcenizal commented Jun 15, 2021

@alisonelizabeth Did you try using restrictWidth on the creation forms? I wonder if that'd result in a better UX.

sabarasaba
sabarasaba approved these changes Jun 16, 2021
View reviewed changes
Copy link
Copy Markdown
Member

@sabarasaba sabarasaba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job @alisonelizabeth! Code lgtm (great catch on the getPageErrorCode ), tested locally and everything seems to be alright.

@alisonelizabeth
Copy link
Copy Markdown
Contributor Author

alisonelizabeth commented Jun 16, 2021

@alisonelizabeth Did you try using restrictWidth on the creation forms? I wonder if that'd result in a better UX.

Thanks for the suggestion! I updated the forms to use restrictWidth and looks much better 😄 .

Screen Shot 2021-06-16 at 8 59 10 AM

Screen Shot 2021-06-16 at 8 51 45 AM

@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jun 16, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
watcher 843.3KB 841.6KB -1.7KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@alisonelizabeth alisonelizabeth merged commit 447728f into elastic:master Jun 16, 2021
@alisonelizabeth alisonelizabeth deleted the watcher/new_page_layout branch June 16, 2021 15:02
@alisonelizabeth alisonelizabeth mentioned this pull request Jun 16, 2021
Merged
alisonelizabeth added a commit that referenced this pull request Jun 16, 2021
@alisonelizabeth @kibanamachine
[Watcher] Migrate to use new page layout (#101956) (#102360)
043f24a 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sabarasaba sabarasaba sabarasaba approved these changes

Assignees

No one assigned

Labels

chore Feature:Watcher release_note:skip Skip the PR/issue when compiling release notes Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// v7.14.0 v8.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@alisonelizabeth @elasticmachine @cjcenizal @kibanamachine @sabarasaba