Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug 1796641: Add error state to Notification Drawer #4130

Merged
merged 1 commit into from Feb 6, 2020

Conversation

jcaianirh
Copy link
Member

@jcaianirh jcaianirh commented Jan 30, 2020

@openshift-ci-robot openshift-ci-robot added bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. component/core Related to console core functionality labels Jan 30, 2020
@jcaianirh
Copy link
Member Author

/bugzilla refresh

@openshift-ci-robot openshift-ci-robot added bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. and removed bugzilla/invalid-bug Indicates that a referenced Bugzilla bug is invalid for the branch this PR is targeting. labels Jan 30, 2020
@openshift-ci-robot
Copy link
Contributor

@jcaianirh: This pull request references Bugzilla bug 1796641, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

In response to this:

/bugzilla refresh

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@openshift openshift deleted a comment from openshift-ci-robot Jan 30, 2020
@openshift-ci-robot
Copy link
Contributor

@jcaianirh: This pull request references Bugzilla bug 1796641, which is valid.

In response to this:

Bug 1796641: Add error state to Notification Drawer

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@jcaianirh
Copy link
Member Author

/test analyze

frontend/public/components/notification-drawer.tsx Outdated Show resolved Hide resolved
frontend/public/components/notification-drawer.tsx Outdated Show resolved Hide resolved
</Link>
</EmptyStateSecondaryActions>
<EmptyStateIcon className="co-status-card__alerts-icon" icon={UnknownIcon} />
<EmptyStateBody>Alerts could not be loaded.</EmptyStateBody>
Copy link
Member

@spadgett spadgett Jan 31, 2020

Choose a reason for hiding this comment

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

I'd suggest showing the error details with the message here.

Copy link
Member Author

Choose a reason for hiding this comment

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

@spadgett speaking with @cshinn we decided on using the same format as the dashboard. Do you want me to add more detail if available?

Copy link
Member

Choose a reason for hiding this comment

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

It will be hard to troubleshoot what's wrong if we don't show any error details.

The dashboard page is maybe a little different because we want to avoid showing the same error again and again on every card if prometheus is down. @cshinn ?

Copy link

@cshinn cshinn Jan 31, 2020

Choose a reason for hiding this comment

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

I was unaware that we would get any more information other than "not responding". If we have a more useful message to show, I think it makes sense to do so

Copy link
Member Author

Choose a reason for hiding this comment

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

cool, @cshinn do you have an idea for where to display the actual error?

@jcaianirh
Copy link
Member Author

@spadgett moved error/empty states inside component.

@spadgett
Copy link
Member

Thanks @jcaianirh, this looks a lot cleaner 👍 Let me know when you have the error message for another review.

@jcaianirh
Copy link
Member Author

jcaianirh commented Jan 31, 2020

@spadgett, @cshinn mimicked the alert page error details in the notification drawer when details are available. Let me know if you have comments on this.

Screen Shot 2020-01-31 at 4 45 57 PM

@jcaianirh
Copy link
Member Author

/retest

@cshinn
Copy link

cshinn commented Feb 3, 2020

@spadgett, @cshinn mimicked the alert page error details in the notification drawer when details are available. Let me know if you have comments on this.

Screen Shot 2020-01-31 at 4 45 57 PM

@jcaianirh This looks good and it matches well with how we display these messages elsewhere in the console. The only change I would make is to reduce the bottom margin a bit so that it matches the margin to the sides of the notification box. Not a critical change though.

@jcaianirh
Copy link
Member Author

@cshinn updated error detail alignment. thanks for the comment.

Screen Shot 2020-02-03 at 11 54 44 AM

@spadgett
Copy link
Member

spadgett commented Feb 3, 2020

@jcaianirh The margins look off in that screenshot, maybe because we're only setting the body and not empty state title.

Should it really be the unknown icon when there is an error? I'd expect an error icon. Or maybe no icon if the alert has the icon. @cshinn opinion?

@cshinn
Copy link

cshinn commented Feb 3, 2020

@spadgett That version with the <?> was meant to match the dashboard error state, but since we've got more information to show here a couple other options.

This one is based on the empty state pattern
Screen Shot 2020-02-03 at 12 33 10 PM

This one is similar to the current implementation and what appears to be the error state of metrics dashboard cards
Screen Shot 2020-02-03 at 12 33 07 PM

@spadgett
Copy link
Member

spadgett commented Feb 3, 2020

Thanks @cshinn. My personal preference is for the first option. It's already clearly an error, so I don't think we need to duplicate the icon and color with the inline alert.

@benjaminapetersen
Copy link
Contributor

/approve

Agree, prefer the first option!

@openshift-ci-robot openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Feb 3, 2020
@jcaianirh
Copy link
Member Author

/retest

1 similar comment
@jcaianirh
Copy link
Member Author

/retest

@jcaianirh
Copy link
Member Author

@spadgett updated the design as noted above. thanks

Screen Shot 2020-02-03 at 4 56 45 PM

@jcaianirh
Copy link
Member Author

@spadgett and @benjaminapetersen this is set for final review

@jcaianirh
Copy link
Member Author

/retest

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

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

lgtm, can you squash?

@jcaianirh
Copy link
Member Author

jcaianirh commented Feb 5, 2020

@spadgett squashed. thanks

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

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

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Feb 5, 2020
@jcaianirh
Copy link
Member Author

/test analyze

@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: benjaminapetersen, jcaianirh, spadgett

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

4 similar comments
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@jcaianirh
Copy link
Member Author

/retest

2 similar comments
@jcaianirh
Copy link
Member Author

/retest

@jcaianirh
Copy link
Member Author

/retest

@openshift-merge-robot openshift-merge-robot merged commit 32e10dd into openshift:master Feb 6, 2020
@openshift-ci-robot
Copy link
Contributor

@jcaianirh: All pull requests linked via external trackers have merged. Bugzilla bug 1796641 has been moved to the MODIFIED state.

In response to this:

Bug 1796641: Add error state to Notification Drawer

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@spadgett spadgett added this to the v4.4 milestone Feb 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. component/core Related to console core functionality lgtm Indicates that a PR is ready to be merged. size/M Denotes a PR that changes 30-99 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants