Skip to content

[Console Monaco] Improve highlighting for status codes in multiple responses#189210

Merged
ElenaStoeva merged 6 commits intoelastic:mainfrom
ElenaStoeva:console/fix-status-code-badge
Aug 2, 2024
Merged

[Console Monaco] Improve highlighting for status codes in multiple responses#189210
ElenaStoeva merged 6 commits intoelastic:mainfrom
ElenaStoeva:console/fix-status-code-badge

Conversation

@ElenaStoeva
Copy link
Copy Markdown
Contributor

@ElenaStoeva ElenaStoeva commented Jul 25, 2024 •
edited
Loading

Closes #184010

Summary

This PR adds color badges for the status codes in the output panel when there are multiple responses.

Screen.Recording.2024-07-25.at.15.56.59.mov

How to test:
Send the following requests at once (try arranging them in different orders):

Success badge 🟢 : GET _search

Client error (warning) badge 🟡 : GET _test

Server error (danger) badge 🔴 :

PUT /library/_bulk?refresh
{"index":{"_id":"Leviathan Wakes"}}
{"name":"Leviathan Wakes","author":"James S.A. Corey","release_date":"2011-06-02","page_count":561}

^ This request should usually succeed and it was fixed in #188552, but these changes aren't in this branch yet so the request still fails. I couldn't find another example that returns a 5** status code.

Note: AFAIK Es currently only uses 2**, 4**, and 5** status codes (200 OK, 201 Created, 202 Accepted, 204 No Content, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 409 Conflict, 429 Too Many Requests, 500 Internal Server Error, 503 Service Unavailable). Practically only the success, warning, and danger badges will be used, but added badges for the rest status codes in case they are added in Es.

@ElenaStoeva ElenaStoeva added Feature:Console Dev Tools Console Feature 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 labels Jul 25, 2024
@ElenaStoeva ElenaStoeva self-assigned this Jul 25, 2024
@ElenaStoeva
Copy link
Copy Markdown
Contributor Author

ElenaStoeva commented Jul 25, 2024

/ci

@ElenaStoeva
Copy link
Copy Markdown
Contributor Author

ElenaStoeva commented Jul 26, 2024

/ci

ElenaStoeva
ElenaStoeva commented Jul 26, 2024
View reviewed changes
...ns/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts
DANGER_STATUS_BADGE_CLASSNAME,
} from './constants';

const getStatusCodeClassName = (statusCode: number) => {
Copy link
Copy Markdown
Contributor Author

@ElenaStoeva ElenaStoeva Jul 26, 2024

Choose a reason for hiding this comment

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

Using the same logic we used for the Ace badge.

ElenaStoeva
ElenaStoeva commented Jul 26, 2024
View reviewed changes
src/plugins/console/public/styles/_app.scss
* The z-index for the autocomplete suggestions popup
* The styling for the multiple-response status code decorations
*/
%monaco__status_badge {
Copy link
Copy Markdown
Contributor Author

@ElenaStoeva ElenaStoeva Jul 26, 2024

Choose a reason for hiding this comment

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

Adapted this styling from the one for the Ace badge (on line 37 in this file).

@ElenaStoeva ElenaStoeva marked this pull request as ready for review July 26, 2024 11:45
@ElenaStoeva ElenaStoeva requested review from a team as code owners July 26, 2024 11:45
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jul 26, 2024

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

@yuliacech yuliacech self-requested a review July 26, 2024 15:19
yuliacech
yuliacech approved these changes Jul 26, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@yuliacech yuliacech left a comment

Choose a reason for hiding this comment

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

The status badges look great, thanks a lot for implementing them, @ElenaStoeva!

eokoneyo
eokoneyo reviewed Jul 29, 2024
View reviewed changes
@ElenaStoeva ElenaStoeva requested a review from eokoneyo July 30, 2024 09:05
eokoneyo
eokoneyo approved these changes Jul 30, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@eokoneyo eokoneyo left a comment

Choose a reason for hiding this comment

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

Code changes LGTM

ryankeairns
ryankeairns reviewed Aug 1, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

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

LGTM with one small change. Thanks

src/plugins/console/public/styles/_app.scss Outdated
font-size: $euiFontSizeS;
font-weight: $euiFontWeightMedium;
line-height: $euiLineHeight;
padding: 2px $euiSizeXS;
Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns Aug 1, 2024

Choose a reason for hiding this comment

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

2px can be replaced with calc($euiSizeXS / 2)

Copy link
Copy Markdown
Contributor Author

@ElenaStoeva ElenaStoeva Aug 1, 2024

Choose a reason for hiding this comment

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

Thanks for the suggestion! Added with 3f91410.

@ryankeairns ryankeairns self-requested a review August 1, 2024 16:04
ryankeairns
ryankeairns approved these changes Aug 1, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

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

Going ahead with approval presuming you'll making that very small change. Thanks!

@ElenaStoeva ElenaStoeva enabled auto-merge (squash) August 1, 2024 17:45
@kibana-ci
Copy link
Copy Markdown

kibana-ci commented Aug 2, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
console 259 260 +1

Async chunks

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

id before after diff
console 458.1KB 458.9KB +742.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
console 33.1KB 34.4KB +1.3KB
kbnUiSharedDeps-srcJs 3.3MB 3.3MB +166.0B
total +1.5KB

History

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

cc @ElenaStoeva

@ElenaStoeva ElenaStoeva merged commit 495bb30 into elastic:main Aug 2, 2024
@kibanamachine kibanamachine added v8.16.0 backport:skip This PR does not require backporting labels Aug 2, 2024
@ElenaStoeva ElenaStoeva deleted the console/fix-status-code-badge branch January 31, 2026 19:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ryankeairns ryankeairns ryankeairns approved these changes

@eokoneyo eokoneyo eokoneyo approved these changes

+1 more reviewer

@yuliacech yuliacech yuliacech approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@ElenaStoeva ElenaStoeva

Labels

backport:skip This PR does not require backporting Feature:Console Dev Tools Console Feature 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// v8.16.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Console Monaco migration] Color badges for status codes

7 participants

@ElenaStoeva @elasticmachine @kibana-ci @ryankeairns @yuliacech @eokoneyo @kibanamachine