Design: "Add panel" MVC (live preview panel builder)

Problem to solve

@jivanvl I'd like to add the live preview when working on dashboard yaml files as a way to lower the barrier of entry for users who might be not as experiences when building any kind of monitoring dashboards.

Intended users

• Devon (DevOps Engineer)
• Sidney (Systems Administrator)
• Sasha (Software Developer)

Further details

Proposal

MVC: Preview, copy and paste panel YAML

As an MVC the user will be able to preview panel YAML and copy and paste it to the dashboard file. It takes us a good step closer to a proper panel builder by slightly building upon @mrincon's work. I'm just proposing to add some more guiding text, links to the docs and repo, and change the layout slightly.

• Clicking on the "Add panel" button in Metrics menu opens the "Add panel" page. Page has a "Back" button that takes you back to Metrics.
• From there one can fill out the panel YAML and preview the panel.
• We provide a link to panels definition documentation.
• One can preview the panel to make sure it's set up as desired and then copy and paste the YAML into a dashboard file by going to their repository from the Add panel page.
• The Step 2 area also links to the dashboard YAML definition docs.

➡ MVC proposal on Figma ⬅

Permissions and Security

Documentation

This feature will require documentation.

Availability & Testing

What does success look like, and how can we measure that?

What is the type of buyer?

Is this a cross-stage feature?

Links / references