Docs: New panel editor documentation (#24711)

* Create panel-editor.md

* content updates

* Update panels-overview.md

* Update panel-editor.md

* Update panel-editor.md

* Update menu.yaml

* Update whats-new-in-v7-0.md

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update _index.md

* Update docs/sources/panels/panel-editor.md

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: sarlinska <sarlinska@gmail.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: sarlinska <sarlinska@gmail.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: sarlinska <sarlinska@gmail.com>

* Update docs/sources/panels/panel-editor.md

Co-authored-by: sarlinska <sarlinska@gmail.com>

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
Co-authored-by: sarlinska <sarlinska@gmail.com>

docs/sources/guides/whats-new-in-v7-0.md

@@ -38,6 +38,8 @@ The main highlights are:
 
 
 We redesigned the UI for editing panels. We separated panel display settings to a right-hand side pane that you can collapse or expand depending on what your focus is on. With this change we are also introducing our new unified option model and UI for defining data configuration and display options. This unified data configuration system powers a consistent UI for setting data options across visualizations and making all data display settings data-driven and overridable.
 We redesigned the UI for editing panels. We separated panel display settings to a right-hand side pane that you can collapse or expand depending on what your focus is on. With this change we are also introducing our new unified option model and UI for defining data configuration and display options. This unified data configuration system powers a consistent UI for setting data options across visualizations and making all data display settings data-driven and overridable.
 
 
+Learn more about this feature in [Panel editor]({{< relref "../panels/panel-editor.md" >}}).
+
 ## New tracing UI
 ## New tracing UI
 
 
 This release adds major support for distributed tracing, including a telemetry mode to complement the existing support for metrics and logs. Traces allow you to follow how single requests travel through a distributed system. We are starting with an integrated trace viewer and two new built-in data sources: Jaeger and Zipkin.
 This release adds major support for distributed tracing, including a telemetry mode to complement the existing support for metrics and logs. Traces allow you to follow how single requests travel through a distributed system. We are starting with an integrated trace viewer and two new built-in data sources: Jaeger and Zipkin.
@@ -110,6 +112,8 @@ Grafana 7.0 adds logging support to one of our most popular cloud provider data
 
 
 The platform for plugins has been completely re-imagined and provides ready-made components and tooling to help both inexperienced and experienced developers get up and running more quickly. The tooling, documentation and new components will improve plugin quality and reduce long-term maintenance. We are seeing already that a a high quality plugin with the Grafana look and feel can be written in much fewer lines of code than previously.
 The platform for plugins has been completely re-imagined and provides ready-made components and tooling to help both inexperienced and experienced developers get up and running more quickly. The tooling, documentation and new components will improve plugin quality and reduce long-term maintenance. We are seeing already that a a high quality plugin with the Grafana look and feel can be written in much fewer lines of code than previously.
 
 
+Learn more about developing plugins in the new framework in [Build a plugin]({{< relref "../developers/plugins/_index.md" >}}).
+
 ### Front end plugins platform
 ### Front end plugins platform
 
 
 In Grafana 7.0 we are maturing our panel and front-end datasource plugins platform.
 In Grafana 7.0 we are maturing our panel and front-end datasource plugins platform.

docs/sources/menu.yaml

@@ -134,6 +134,8 @@
   children:
   children:
   - link: /features/panels/panels/
   - link: /features/panels/panels/
     name: Overview
     name: Overview
+  - link: /panels/panel-editor/
+    name: Panel editor
   - link: /features/panels/graph/
   - link: /features/panels/graph/
     name: Graph
     name: Graph
   - link: /features/panels/table_panel/
   - link: /features/panels/table_panel/

docs/sources/panels/panel-editor.md

++++
+title = "Panel editor"
+type = "docs"
+[menu.docs]
+identifier = "panel-editor"
+weight = 200
++++
+
+# Panel editor
+
+This page describes the parts of the Grafana panel editor and links to where you can find more information.
+
+{{< docs-imagebox img="/img/docs/panel-editor/panel-editor-7-0.png" class="docs-image--no-shadow" max-width="1500px" >}}
+
+## Open the Panel editor
+
+There are several ways to access the panel editor, also called the **Edit Panel** screen, _edit mode_, or _panel edit mode_:
+
+- Click the **Add panel** icon at the top of the screen and then click **Add new panel**. The new panel opens in the panel editor. For detailed instructions on how to add a panel, refer to [Add a panel]({{< relref "add-a-panel.md" >}})
+- Click the title of an existing panel and then click **Edit**. The panel opens in edit mode.
+- Click anywhere on an existing panel and then press **e** on your keyboard. The panel opens in edit mode.
+
+## Resize panel editor sections
+
+Drag to resize sections of the panel editor. If the side pane becomes too narrow, then the Panel, Field, and Overrides tabs change to a dropdown list.
+
+{{< docs-imagebox img="/img/docs/panel-editor/resize-panel-editor-panels-7-0.gif" class="docs-image--no-shadow" max-width="600px" >}}
+
+## Parts of the panel editor
+
+This section describes the parts of the panel editor screen and a bit about fields, options, or tasks associated with each part. Some sections in this page link to pages where sections or tasks are documented more fully.
+
+### Header
+
+The header section lists the name of the dashboard that the panel is in and some dashboard commands. You can also click the **Go back** arrow to return to the dashboard.
+
+{{< docs-imagebox img="/img/docs/panel-editor/edit-panel-header-7-0.png" class="docs-image--no-shadow" max-width="1000px" >}}
+
+On the right side of the header are the following options:
+
+- **Dashboard settings (gear) icon -** Click to access the dashboard settings.
+- **Discard -** Discards all changes you have made to the panel since you last saved the dashboard.
+- **Save -** Saves the dashboard, including all changes you have made in the panel editor.
+- **Apply -** Applies changes you made and then closes the panel editor, returning you to the dashboard. You will have to save the dashboard to persist the applied changes.
+
+
+### Visualization preview
+
+The visualization preview section contains viewing options, time range controls, the visualization preview, and (if applicable) the panel title, axes, and legend.
+
+{{< docs-imagebox img="/img/docs/panel-editor/visualization-preview-7-0.png" class="docs-image--no-shadow" max-width="1200px" >}}
+
+- **Fill -** The visualization preview will fill the available space in the preview part. If you change the width of the side pane or height of the bottom pane the visualisation will adapt to fill whatever space is available.
+- **Fit -** The visualization preview will fill the available space in but preserve the aspect ratio of the panel.
+- **Exact -** The visualization preview will have the exact size as the size on the dashboard. If not enough space is available, the visualization will scale down preserving the aspect ratio.
+- **Time range controls -** For more information, refer to [Time range controls](ADD LINK WHEN TOPIC IS MERGED).
+
+### Data section (bottom pane)
+
+The section contains tabs where you enter queries, transform your data, and create alert rules (if applicable).
+
+{{< docs-imagebox img="/img/docs/panel-editor/data-section-7-0.png" class="docs-image--no-shadow" max-width="1200px" >}}
+
+- **Query tab -** Select your data source and enter queries here. For more information, refer to [Queries]({{< relref "queries.md" >}}).
+- **Transform tab -** Apply data transformations. For more information, refer to [Transformations]({{< relref "transformations.md" >}}).
+- **Alert tab -** Write alert rules. For more information, refer to [Create alerts]({{< relref "../alerting/create-alerts.md" >}}).
+
+### Panel and field configuration options (side pane)
+
+The section contains tabs where you control almost every aspect of how your data is visualized. Not all tabs are available for each visualization.
+
+Features in these tabs are documented in the following topics:
+
+- [Add a panel]({{< relref "add-a-panel.md" >}}) describes basic panel settings.
+- [Visualizations]({{< relref "visualizations/_index.md" >}}) display options vary widely. They are described in the individual visualization topic.
+- [Field configuration options and overrides]({{< relref "field-configuration-options.md" >}}) allow you to control almost every aspect of your visualization, including units, value mappings, and [Thresholds]({{< relref "thresholds.md" >}}).
+- [Panel links]({{< relref "../linking/panel-links.md" >}}) and [Data links]({{< relref "../linking/data-links.md" >}}) help you connect your visualization to other resources.

docs/sources/panels/panels-overview.md

@@ -12,9 +12,13 @@ draft = "true"
 
 
 The *panel* is the basic visualization building block in Grafana. Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.
 The *panel* is the basic visualization building block in Grafana. Each panel has a query editor specific to the data source selected in the panel. The query editor allows you to extract the perfect visualization to display on the panel.
 
 
+With the exception of a few special use panels, a panel is a visual representation of one or more queries. The queries display data over time. This can range from temperature fluctuations to current server status to a list of logs or alerts.
+
+In order to display data, you need to have at least one data source added to Grafana. Refer to [Add a data source]({{< relref "../features/datasources/add-a-data-source.md" >}}) for instructions, or see our [Getting started]({{< relref "../getting-started/getting-started.md" >}}) guide if you want to make your first dashboard and panel using our TestData DB data source.
+
 There are a wide variety of styling and formatting options for each panel. Panels can be dragged and dropped and rearranged on the dashboard. They can also be resized.
 There are a wide variety of styling and formatting options for each panel. Panels can be dragged and dropped and rearranged on the dashboard. They can also be resized.
 
 
-## Move panels
+## Move or resize panels
 
 
 You can drag and drop panels by clicking and holding the panel title, then dragging it to its new location. You can also easily resize panels by clicking the (-) and (+) icons.
 You can drag and drop panels by clicking and holding the panel title, then dragging it to its new location. You can also easily resize panels by clicking the (-) and (+) icons.
 
 

docs/sources/panels/visualizations/_index.md

@@ -4,4 +4,12 @@ type = "docs"
 [menu.docs]
 [menu.docs]
 identifier = "visualizations"
 identifier = "visualizations"
 weight = 4
 weight = 4
-+++
++++
\ No newline at end of file
+
+# Visualizations
+
+Grafana offers a variety of visualizations to suit different use cases. This section of the documentation lists the different visualizations available in Grafana and their unique display settings.
+
+The default options and their unique display options are described in the pages in this section. 
+
+You can add more panel types with [plugins]({{< relref "../../plugins/_index.md" >}}).