Native sidebar navigation menu and page foundations
General
Escalation
General
Escalation
Description
User Story
As a user looking to learn how to use PMM or find specific features, I want to understand that I’m navigating within the PMM tool, and not confusing it with another Grafana instance I may have access to. I want to browse the navigation menu items to perceive PMM’s most valuable features, feel confident in its capacities, and perceive its full value for my workflow.
Acceptance criteria
New native UI frame for PMM with a dedicated sidebar menu made using Peak Design and MUI as a fallback
Grafana instance renders native and PMM-custom pages inside an isolated frame
Front-end UI matches the UI design in style, content, and order as inspected in the Figma file
The UI implementation is responsive, makes use of MUI for that, and was reviewed with the product team
Content is dynamically concealed/revealed according to user permissions
URL’s carry over dashboard parameters and timeframe parameters when switching page to page
Content design reviewed and proofread
Suggested implementation (section further below) is implemented
Menu items QAA friendly
UI Design
Inspect front-end specifications directly on the UI design: (Password: slaw-card-easel-snack)
Suggested implementation
As suggested in the Figma files notes, some elements of Grafana UI must be concealed/removed to avoid conflicting UX routes:
Ability to open the Grafana sidebar menu
Grafana sidebar menu “burger” button
Ability to open the Grafana bar (the topmost bar)
Grafana bar “expand” button
PMM’s custom navigation buttons at the top right of each dashboard
User Story
As a user looking to learn how to use PMM or find specific features, I want to understand that I’m navigating within the PMM tool, and not confusing it with another Grafana instance I may have access to. I want to browse the navigation menu items to perceive PMM’s most valuable features, feel confident in its capacities, and perceive its full value for my workflow.
Acceptance criteria
New native UI frame for PMM with a dedicated sidebar menu made using Peak Design and MUI as a fallback
Grafana instance renders native and PMM-custom pages inside an isolated frame
Front-end UI matches the UI design in style, content, and order as inspected in the Figma file
The UI implementation is responsive, makes use of MUI for that, and was reviewed with the product team
Content is dynamically concealed/revealed according to user permissions
URL’s carry over dashboard parameters and timeframe parameters when switching page to page
Content design reviewed and proofread
Suggested implementation (section further below) is implemented
Menu items QAA friendly
UI Design
Inspect front-end specifications directly on the UI design: (Password:
slaw-card-easel-snack)Suggested implementation
As suggested in the Figma files notes, some elements of Grafana UI must be concealed/removed to avoid conflicting UX routes:
Ability to open the Grafana sidebar menu
Grafana sidebar menu “burger” button
Ability to open the Grafana bar (the topmost bar)
Grafana bar “expand” button
PMM’s custom navigation buttons at the top right of each dashboard
Out of scope
Content of help page
Navigation tour
Details
Initiative context and Discovery log: Notion page
Dev Notes
Custom css can be via inclusion into index.html / via js during iframe communication initialization
Dashboard variables can be fetched from grafana via iframe messaging - listen for changes in url params then update dashboard related links
Navigation tree should be dynamic (some elements depend on feature availability, user access permissions etc.)