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.

Sign up for GitHub

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

Jump to bottom

Variables: Prioritize showing adhoc variable key and operator #750

Merged
merged 2 commits into from
May 30, 2024
Merged

Variables: Prioritize showing adhoc variable key and operator #750

merged 2 commits into from
May 30, 2024

Conversation

oscarkilhed
Copy link
Contributor

When the value of the adhoc filter gets long, you can't see the key and operator, which are arguably more important than showing a few more characters of the already truncated value.

Before:
image

After:
image

Fixes: grafana/grafana#88328

@oscarkilhed oscarkilhed force-pushed the oscark/prioritize-showing-adhoc-variable-key-and-operator branch from 84ba707 to 45c795e Compare May 27, 2024 10:22
@oscarkilhed oscarkilhed force-pushed the oscark/prioritize-showing-adhoc-variable-key-and-operator branch from 45c795e to 05a9e5d Compare May 27, 2024 10:24
@dprokop
Copy link
Member

dprokop commented May 27, 2024

@oscarkilhed - can we also add some max width constraint to the value input? While editing it (entering custom value) it can push the time controls outside of the container:

Screenshot 2024-05-27 at 13 08 02

torkelo
torkelo reviewed May 27, 2024
View reviewed changes
packages/scenes/src/variables/adhoc/AdHocFilterRenderer.tsx Outdated
Comment on lines 198 to 199
key: css({
flexShrink: 0,
Copy link
Member

Choose a reason for hiding this comment

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

why happens when the key is really long, will this stop ellipsis on the key? I would expect both to be ellipised with some min width.

Copy link
Member

Choose a reason for hiding this comment

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

+1

Copy link
Contributor Author

@oscarkilhed oscarkilhed May 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Hmm. You're right. Trying some stuff out I think having it set to flex-shrink: 1 and a relatively small min-width for the key as well looks best.

@oscarkilhed
Copy link
Contributor Author

oscarkilhed commented May 28, 2024 •
edited
Loading

@dprokop

@oscarkilhed - can we also add some max width constraint to the value input? While editing it (entering custom value) it can push the time controls outside of the container:

Screenshot 2024-05-27 at 13 08 02

Working on this. Apparently it's not that easy to solve. Not sure what's causing the element to grow outside of the parent element.

@oscarkilhed
Copy link
Contributor Author

Managed to fix the overlap of the remove button and time controls. Seems to have been because the remove button had 0 width.

Will continue working on the controls being pushed outside of the viewport.

@oscarkilhed oscarkilhed mentioned this pull request May 28, 2024
Merged
@oscarkilhed
Copy link
Contributor Author

@dprokop I suggest we adress the growing issues in a different PR. I've got a draft PR here that solves the issue.

@oscarkilhed oscarkilhed merged commit e476023 into main May 30, 2024
3 checks passed
@oscarkilhed oscarkilhed deleted the oscark/prioritize-showing-adhoc-variable-key-and-operator branch May 30, 2024 07:02
@grafanabot
Copy link
Contributor

🚀 PR was released in v4.24.3 🚀

@ivanortegaalba ivanortegaalba mentioned this pull request May 30, 2024
Merged
ivanortegaalba added a commit to grafana/grafana that referenced this pull request May 30, 2024
@ivanortegaalba
Scenes: Update to latest 4.23.1 -> 4.24.4 (#88485)
c5ae0bb 
# v4.24.4 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

#### Authors: 1

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

# v4.24.3 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

# v4.24.2 (Wed May 29 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

# v4.24.1 (Tue May 28 2024)

#### 🐛 Bug Fix

- Plugin.json: update schema reference URL in scenes-app [#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

#### Authors: 3

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

# v4.24.0 (Mon May 27 2024)

#### 🚀 Enhancement

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

#### Authors: 1

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---
ivanortegaalba added a commit to grafana/grafana that referenced this pull request May 30, 2024
@ivanortegaalba
Scenes: Update to latest 4.23.1 -> 4.24.4 (#88485)
abc3e24 
- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

- Plugin.json: update schema reference URL in scenes-app [#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---

(cherry picked from commit c5ae0bb)
@ivanortegaalba ivanortegaalba mentioned this pull request May 30, 2024
Merged
miguelmolina95 pushed a commit to miguelmolina95/grafana that referenced this pull request Jun 3, 2024
@ivanortegaalba @miguelmolina95
Scenes: Update to latest 4.23.1 -> 4.24.4 (grafana#88485)
c081ee0 
# v4.24.4 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [grafana#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

#### Authors: 1

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

# v4.24.3 (Thu May 30 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [grafana#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [grafana#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

# v4.24.2 (Wed May 29 2024)

#### 🐛 Bug Fix

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [grafana#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

#### Authors: 2

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

# v4.24.1 (Tue May 28 2024)

#### 🐛 Bug Fix

- Plugin.json: update schema reference URL in scenes-app [grafana#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [grafana#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [grafana#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

#### Authors: 3

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

# v4.24.0 (Mon May 27 2024)

#### 🚀 Enhancement

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [grafana#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

#### Authors: 1

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---
ivanortegaalba added a commit to grafana/grafana that referenced this pull request Jun 12, 2024
@ivanortegaalba
[v11.0.x] Scenes: Update to latest 4.23.1 -> 4.24.4 (#88510)
f5fe50d 
Scenes: Update to latest 4.23.1 -> 4.24.4 (#88485)

- `@grafana/scenes`
  - VizPanelRenderer: Emit SetPanelAttention event [#716](grafana/scenes#716) ([@tskarhed](https://github.com/tskarhed))

- Tobias Skarhed ([@tskarhed](https://github.com/tskarhed))

---

- `@grafana/scenes`
  - Macros: Resolve browser timezone for `$__timezone` [#759](grafana/scenes#759) ([@ivanortegaalba](https://github.com/ivanortegaalba))
  - Variables: Prioritize showing adhoc variable key and operator [#750](grafana/scenes#750) ([@oscarkilhed](https://github.com/oscarkilhed))

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Oscar Kilhed ([@oscarkilhed](https://github.com/oscarkilhed))

---

- `@grafana/scenes`
  - MultiValueVariable: Fixes issue when value is all value but all value is not enabled [#757](grafana/scenes#757) ([@torkelo](https://github.com/torkelo) [@ivanortegaalba](https://github.com/ivanortegaalba))

- Ivan Ortega Alba ([@ivanortegaalba](https://github.com/ivanortegaalba))
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))

---

- Plugin.json: update schema reference URL in scenes-app [#754](grafana/scenes#754) ([@leventebalogh](https://github.com/leventebalogh))
- `@grafana/scenes`
  - Allow drag and dropping rows in valid states [#756](grafana/scenes#756) ([@mdvictor](https://github.com/mdvictor))
  - fix: undefined check on RefreshPicker.autoOption [#751](grafana/scenes#751) ([@darrenjaneczek](https://github.com/darrenjaneczek))

- Darren Janeczek ([@darrenjaneczek](https://github.com/darrenjaneczek))
- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
- Victor Marin ([@mdvictor](https://github.com/mdvictor))

---

- `@grafana/scenes`
  - SceneFlexLayout: Min width/height option was ignored [#749](grafana/scenes#749) ([@edvard-falkskar](https://github.com/edvard-falkskar))

- Edvard Falkskär ([@edvard-falkskar](https://github.com/edvard-falkskar))

---

(cherry picked from commit c5ae0bb)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@torkelo torkelo torkelo left review comments

@dprokop dprokop dprokop approved these changes

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
4 participants
@oscarkilhed @dprokop @grafanabot @torkelo