Align inference pipeline card/option styling #172952
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Mikep86
commented
Dec 8, 2023
...ions/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
Outdated
Show resolved
Hide resolved
kderusso
approved these changes
Dec 8, 2023
...ions/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
Outdated
Show resolved
Hide resolved
Mikep86
added
release_note:skip
demjened
approved these changes
Dec 8, 2023
...enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.test.tsx
Show resolved
Hide resolved
Comment on lines
52
to
53
| const actionButton = ( | ||
| <EuiButtonEmpty |
There was a problem hiding this comment.
I see some discrepancies with the model-related subcomponents here vs in the model selection component within the pipeline configuration flyout. Let's make sure we address these in the unified ML design:
- The status badge is part of the "..." button here. In the model selection list it's not.
- We display a wrench button to navigate to the Trained Models page if the model is not deployed vs in the model selection list we don't.
- The model status badge here works with the reduced set of states (implemented in
TrainedModelHealth), for example the downloading/downloaded states all map to "Not started". If we want to display more fine-grained states, we'll need to use model details fromMlModelin the pipeline card. - The model type is rendered as a badge here (
text_embedding) vs a user-friendly title in the model selector ("Dense Vector Text Embedding"). (We may not have the space the display the full title here.)
I'll link to this comment in the unified UX Jira.
There was a problem hiding this comment.
Good callouts! I could address the first point in this PR by shrinking the button to not include the status badge, but IMO it's nice to have a larger button area, especially since there's no other click action to associate with the status badge. WDYT?
There was a problem hiding this comment.
To me it doesn't come intuitively that a badge is clickable. I'd either restrict clickability to the "..." button only, or turn the status badge into a (non-empty) button. But this is a good question to the UX folks, maybe they have some suggestions.
There was a problem hiding this comment.
Ok, since this an open question for the UX folks, I will keep this as-is for now and we can adjust in a follow-up PR.
Mikep86
commented
Dec 8, 2023
...ions/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
Show resolved
Hide resolved
sphilipse
reviewed
Dec 8, 2023
...ions/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
Outdated
Show resolved
Hide resolved
|
LGTM |
saikatsarkar056
approved these changes
Dec 11, 2023
… act as links" This reverts commit 95a0506.
sphilipse
approved these changes
Dec 11, 2023
💚 Build Succeeded
Metrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Dec 11, 2023
## Summary More closely align the styling used for inference pipeline cards on the indices page and existing inference pipeline options on the "Add an inference pipeline" flyout. Also used this as an opportunity to refactor `inference_pipeline_card.tsx` to improve readability and change the model/pipeline management popover to make the "Fix issue in Trained Models" button fit better with the other buttons. (cherry picked from commit 1abc0c2)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Dec 11, 2023
# Backport This will backport the following commits from `main` to `8.12`: - [Align inference pipeline card/option styling (#172952)](#172952) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Mike Pellegrini","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-12-11T15:21:32Z","message":"Align inference pipeline card/option styling (#172952)\n\n## Summary\r\n\r\nMore closely align the styling used for inference pipeline cards on the\r\nindices page and existing inference pipeline options on the \"Add an\r\ninference pipeline\" flyout.\r\n\r\nAlso used this as an opportunity to refactor\r\n`inference_pipeline_card.tsx` to improve readability and change the\r\nmodel/pipeline management popover to make the \"Fix issue in Trained\r\nModels\" button fit better with the other buttons.","sha":"1abc0c2df75110512bd1069fe1cbd208b0895052","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:EnterpriseSearch","v8.12.0","v8.13.0"],"number":172952,"url":"https://github.com/elastic/kibana/pull/172952","mergeCommit":{"message":"Align inference pipeline card/option styling (#172952)\n\n## Summary\r\n\r\nMore closely align the styling used for inference pipeline cards on the\r\nindices page and existing inference pipeline options on the \"Add an\r\ninference pipeline\" flyout.\r\n\r\nAlso used this as an opportunity to refactor\r\n`inference_pipeline_card.tsx` to improve readability and change the\r\nmodel/pipeline management popover to make the \"Fix issue in Trained\r\nModels\" button fit better with the other buttons.","sha":"1abc0c2df75110512bd1069fe1cbd208b0895052"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172952","number":172952,"mergeCommit":{"message":"Align inference pipeline card/option styling (#172952)\n\n## Summary\r\n\r\nMore closely align the styling used for inference pipeline cards on the\r\nindices page and existing inference pipeline options on the \"Add an\r\ninference pipeline\" flyout.\r\n\r\nAlso used this as an opportunity to refactor\r\n`inference_pipeline_card.tsx` to improve readability and change the\r\nmodel/pipeline management popover to make the \"Fix issue in Trained\r\nModels\" button fit better with the other buttons.","sha":"1abc0c2df75110512bd1069fe1cbd208b0895052"}}]}] BACKPORT--> Co-authored-by: Mike Pellegrini <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
More closely align the styling used for inference pipeline cards on the indices page and existing inference pipeline options on the "Add an inference pipeline" flyout.
Also used this as an opportunity to refactor
inference_pipeline_card.tsxto improve readability and change the model/pipeline management popover to make the "Fix issue in Trained Models" button fit better with the other buttons.Old:
Inference pipeline cards:
Desktop:
Mobile:
Popover (w/o "Fix issue in Trained Models"):
Popover (w/ "Fix issue in Trained Models"):
Existing inference pipeline options:
Desktop:
Mobile:
New:
Inference pipeline cards:
Desktop:
Mobile:
Popover (w/o "Fix issue in Trained Models"):
Popover (w/ "Fix issue in Trained Models"):
Existing inference pipeline options:
Desktop:
Mobile:
Checklist