search

grafana / explore-traces

Opinionated traces app
Apache License 2.0
21 stars 0 forks source link

Redesign header #186

Closed joey-grafana closed 2 months ago

joey-grafana commented 2 months ago

Fixes https://github.com/grafana/explore-traces/issues/167

Before Screenshot 2024-09-10 at 16 35 41

After (updated 11th Sept)

https://github.com/user-attachments/assets/7d18f63f-ecb1-4fd9-9700-382ef8f359c9

Screenshot 2024-09-11 at 09 33 23 Screenshot 2024-09-11 at 09 34 11 Screenshot 2024-09-11 at 09 31 52

joey-grafana commented 2 months ago

@nadinevehling scenes does not currently support creating a smaller version of the time picker by hiding some of its controls. We could prob update that but it's not something that will get in a release before ObsCON. If you'd like to move the time/refresh picker up on the same row as the feedback link/menu let me know please.

nadinevehling commented 2 months ago

We spoke about moving the time/refresh picker up to the same row as the feedback link/menu and will work on the intended option afterward. Do we want to open a new issue @joey-grafana or leave this open?

joey-grafana commented 2 months ago

I'll create an issue for that Nadine. It involves only a small update to the scenes lib to accept another param hideText into the SceneTimePicker and then passing that value as a prop into TimeRangePicker.

It would require a new release of scenes which we can then use in the app.

joey-grafana commented 2 months ago

Ok I've added some really nice changes. Overall the PR;

This has created a really nice and smooth scroll and keeps the global items in view that effect the entire page, which helps users know what is currently being queried.

Also adds more padding below the ds picker/preview/menu/time picker and the filters which adds a nice break to the page just above the graphs. This makes the UI feels more polished IMO as it's no longer a wall of content but has a top section and a bottom section.

joey-grafana commented 2 months ago

Honestly Nadine I don't think we need to move the time picker down to the filters bar anymore. It looks very tidy the way it is and leaves us to add more filters without squashing other filters.

Also, I put the time picker in the top right corner because it is more of a primary action than opening the new menu i.e. it's easier for users to subconsciously scroll to the edge.