Grafana v10.1.1 fixes

[Spikatrix]

• Added Time range selector
• Removed panel header menu
• Added filters icon to submenu

Summary by CodeRabbit

• New Feature: Introduced a time range selector to enhance user control over data display.
• New Feature: Added a filters icon to the submenu for improved navigation and filtering capabilities.
• Refactor: Replaced DashNav component with DashNavTimeControls for better handling of time controls.
• Style: Updated the background color of ToolbarButton to match the primary theme color, enhancing UI consistency.
• Chore: Removed the panel header menu from the dashboard, simplifying the interface.
• Style: Adjusted cursor style in PanelHeaderMenuTrigger, improving visual behavior.

[github-actions]

CodeRabbit

Walkthrough

This update brings a significant UI overhaul to the Grafana project. It introduces a time range selector, removes the panel header menu, and adds a filter icon to the submenu. The changes also include updates to the background color of a CSS class and modifications to various components for better user interaction.

Changes

Files	Summary
packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx	Updated the background color of a CSS class from 'transparent' to the primary background color defined in the Grafana theme.
public/app/features/dashboard/components/SubMenu/SubMenu.tsx, public/app/features/dashboard/containers/DashboardPage.tsx	Added a time range selector, removed the panel header menu, and added a filters icon to the submenu. Imported new components for rendering and styling. Modified existing components to accommodate these changes.
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx, public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx	Removed the panel header menu and made visual adjustments to the PanelHeader and PanelHeaderMenuTrigger components.

"A change is here, a change is there, 🔄
A dash of color, a filter to spare. ⏱️🔍
No more menus in the panel header, ❌
Just a sleek design that's much better. ✨
Celebrate the code, oh so bright, 🎉
For it brings users delight!" 🐰💻🌟

---

Uplevel your code reviews with CodeRabbit Pro

CodeRabbit Pro

If you like this project, please support us by purchasing the Pro version. The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.

[github-actions]

CodeRabbit

Commits

Files that changed from the base of the PR and between 3e77535 and 64104b3 commits.

Files selected (5)

• packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx (1)
• public/app/features/dashboard/components/SubMenu/SubMenu.tsx (4)
• public/app/features/dashboard/containers/DashboardPage.tsx (4)
• public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx (6)
• public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx (1)

Files ignored due to filter (2)

• package.json
• yarn.lock

Files skipped from review due to trivial changes (2)

• packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
• public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

Review comments generated (9)

• Review: 8
• LGTM: 1

---

Tips

Chat with CodeRabbit Bot (@coderabbitai)

• Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
• Invite the bot into a review comment chain by tagging @coderabbitai in a reply.

Code suggestions

• The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned.
• You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

Pausing incremental reviews

• Add @coderabbitai: ignore anywhere in the PR description to pause further reviews from the bot.