IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

cleanup shortcodes, asset paths (#34826)

Browse Source
This commit is contained in:
Robby Milo 2021-05-28 11:27:40 +02:00 committed by GitHub
parent 179eb0898e
commit 327fa124a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
134 changed files with 566 additions and 566 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/sources/_index.md
View File

@ -51,7 +51,7 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin",
<a href="{{< relref "basics/_index.md" >}}" class="nav-cards__item nav-cards__item--guide">
<h4>Grafana basics</h4>
<p>Learn basic observability.</p>
</a>
</a>
<a href="{{< relref "administration/configuration.md" >}}" class="nav-cards__item nav-cards__item--guide">
<h4>Configure Grafana</h4>
<p>Review the configuration and setup options.</p>
@ -75,51 +75,51 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin",
<div class="nav-cards">
<a href="{{< relref "datasources/graphite.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_graphite.svg" >
<img src="/static/img/docs/logos/icon_graphite.svg" >
<h5>Graphite</h5>
</a>
<a href="{{< relref "datasources/elasticsearch.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_elasticsearch.svg" >
<img src="/static/img/docs/logos/icon_elasticsearch.svg" >
<h5>Elasticsearch</h5>
</a>
<a href="{{< relref "datasources/influxdb/_index.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_influxdb.svg" >
<img src="/static/img/docs/logos/icon_influxdb.svg" >
<h5>InfluxDB</h5>
</a>
<a href="{{< relref "datasources/prometheus.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_prometheus.svg" >
<img src="/static/img/docs/logos/icon_prometheus.svg" >
<h5>Prometheus</h5>
</a>
<a href="{{< relref "datasources/google-cloud-monitoring/_index.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_cloudmonitoring.svg">
<img src="/static/img/docs/logos/icon_cloudmonitoring.svg">
<h5>Google Cloud Monitoring</h5>
</a>
<a href="{{< relref "datasources/cloudwatch.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_cloudwatch.svg">
<img src="/static/img/docs/logos/icon_cloudwatch.svg">
<h5>AWS CloudWatch</h5>
</a>
<a href="{{< relref "datasources/azuremonitor.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_azure_monitor.jpg">
<img src="/static/img/docs/logos/icon_azure_monitor.jpg">
<h5>Azure Monitor</h5>
</a>
<a href="{{< relref "datasources/loki.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_loki.svg">
<img src="/static/img/docs/logos/icon_loki.svg">
<h5>Loki</h5>
</a>
<a href="{{< relref "datasources/mysql.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_mysql.png" >
<img src="/static/img/docs/logos/icon_mysql.png" >
<h5>MySQL</h5>
</a>
<a href="{{< relref "datasources/postgres.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_postgres.svg" >
<img src="/static/img/docs/logos/icon_postgres.svg" >
<h5>Postgres</h5>
</a>
<a href="{{< relref "datasources/mssql.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/sql_server_logo.svg">
<img src="/static/img/docs/logos/sql_server_logo.svg">
<h5>Microsoft SQL Server</h5>
</a>
<a href="{{< relref "datasources/opentsdb.md" >}}" class="nav-cards__item nav-cards__item--ds">
<img src="/img/docs/logos/icon_opentsdb.png" >
<img src="/static/img/docs/logos/icon_opentsdb.png" >
<h5>OpenTSDB</h5>
</a>
</div>

4
docs/sources/administration/preferences/change-grafana-theme.md
View File

@ -23,13 +23,13 @@ The theme affects how Grafana displays graphs, menus, other UI elements.
Here is an example of the dark theme.
![Dark theme example](/img/docs/preferences/dark-theme-7-4.png)
![Dark theme example](/static/img/docs/preferences/dark-theme-7-4.png)
### Light
Here is an example of the light theme.
![Light theme example](/img/docs/preferences/light-theme-7-4.png)
![Light theme example](/static/img/docs/preferences/light-theme-7-4.png)
## Change server UI theme

2
docs/sources/administration/provisioning.md
View File

@ -305,7 +305,7 @@ Grafana offers options to export the JSON definition of a dashboard. Either `Cop
Note: The JSON definition in the input field when using `Copy JSON to Clipboard` or `Save JSON to file` will have the `id` field automatically removed to aid the provisioning workflow.
{{< docs-imagebox img="/img/docs/v51/provisioning_cannot_save_dashboard.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/v51/provisioning_cannot_save_dashboard.png" max-width="500px" class="docs-image--no-shadow" >}}
### Reusable Dashboard URLs

2
docs/sources/administration/set-up-for-high-availability.md
View File

@ -11,7 +11,7 @@ Setting up Grafana for high availability is fairly simple. You just need a share
and other persistent data. So the default embedded SQLite database will not work, you will have to switch to MySQL or Postgres.
<div class="text-center">
<img src="/img/docs/tutorials/grafana-high-availability.png" max-width= "800px" class="center" />
<img src="/static/img/docs/tutorials/grafana-high-availability.png" max-width= "800px" class="center" />
</div>
## Configure multiple servers to use the same database

4
docs/sources/alerting/old-alerting/add-notification-template.md
View File

@ -17,7 +17,7 @@ This topic explains how you can use alert query labels in alert notifications.
1. Navigate to the panel you want to add or edit an alert rule for.
1. Click on the panel title, and then click **Edit**.
1. On the Alert tab, click **Create Alert**. If an alert already exists for this panel, then you can edit the alert directly.
1. Refer to the alert query labels in the alert rule name and/or alert notification message field by using the `${Label}` syntax.
1. Refer to the alert query labels in the alert rule name and/or alert notification message field by using the `${Label}` syntax.
1. Click **Save** in the upper right corner to save the alert rule and the dashboard.
![Alerting notification template](/img/docs/alerting/alert-notification-template-7-4.png)
![Alerting notification template](/static/img/docs/alerting/alert-notification-template-7-4.png)

6
docs/sources/alerting/old-alerting/create-alerts.md
View File

@ -9,7 +9,7 @@ weight = 200
Grafana alerting allows you to attach rules to your dashboard panels. When you save the dashboard, Grafana extracts the alert rules into a separate alert rule storage and schedules them for evaluation.
![Alerting overview](/img/docs/alerting/drag_handles_gif.gif)
![Alerting overview](/static/img/docs/alerting/drag_handles_gif.gif)
In the Alert tab of the graph panel you can configure how often the alert rule should be evaluated and the conditions that need to be met for the alert to change state and trigger its [notifications]({{< relref "notifications.md" >}}).
@ -46,9 +46,9 @@ If an alert rule has a configured `For` and the query violates the configured th
Typically, it's always a good idea to use this setting since it's often worse to get false positive than wait a few minutes before the alert notification triggers. Looking at the `Alert list` or `Alert list panels` you will be able to see alerts in pending state.
Below you can see an example timeline of an alert using the `For` setting. At ~16:04 the alert state changes to `Pending` and after 4 minutes it changes to `Alerting` which is when alert notifications are sent. Once the series falls back to normal the alert rule goes back to `OK`.
{{< imgbox img="/img/docs/v54/alerting-for-dark-theme.png" caption="Alerting For" >}}
{{< figure class="float-right" src="/static/img/docs/v54/alerting-for-dark-theme.png" caption="Alerting For" >}}
{{< imgbox max-width="40%" img="/img/docs/v4/alerting_conditions.png" caption="Alerting Conditions" >}}
{{< figure class="float-right" max-width="40%" src="/static/img/docs/v4/alerting_conditions.png" caption="Alerting Conditions" >}}
### Conditions

4
docs/sources/alerting/old-alerting/notifications.md
View File

@ -89,7 +89,7 @@ Addresses | Email addresses to recipients. You can enter multiple email addresse
### Slack
{{< imgbox max-width="40%" img="/img/docs/v4/slack_notification.png" caption="Alerting Slack Notification" >}}
{{< figure class="float-right" max-width="40%" src="/static/img/docs/v4/slack_notification.png" caption="Alerting Slack Notification" >}}
To set up Slack, you need to configure an incoming Slack webhook URL. You can follow
[Sending messages using Incoming Webhooks](https://api.slack.com/incoming-webhooks) on how to do that. If you want to include screenshots of the
@ -162,7 +162,7 @@ API Token | Application token
User key(s) | A comma-separated list of user keys
Device(s) | A comma-separated list of devices
Priority | The priority alerting nottifications are sent
OK priority | The priority OK notifications are sent; if not set, then OK notifications are sent with the priority set for alerting notifications
OK priority | The priority OK notifications are sent; if not set, then OK notifications are sent with the priority set for alerting notifications
Retry | How often (in seconds) the Pushover servers send the same notification to the user. (minimum 30 seconds)
Expire | How many seconds your notification will continue to be retried for (maximum 86400 seconds)
Alerting sound | The sound for alerting notifications

2
docs/sources/alerting/old-alerting/troubleshoot-alerts.md
View File

@ -9,7 +9,7 @@ weight = 500
If alerts are not behaving as you expect, here are some steps you can take to troubleshoot and figure out what is going wrong.
![Test Rule](/img/docs/v4/alert_test_rule.png)
![Test Rule](/static/img/docs/v4/alert_test_rule.png)
The first level of troubleshooting you can do is click **Test Rule**. You will get result back that you can expand to the point where you can see the raw data that was returned from your query.

4
docs/sources/auth/ldap.md
View File

@ -100,7 +100,7 @@ Grafana has an LDAP debug view built-in which allows you to test your LDAP confi
Within this view, you'll be able to see which LDAP servers are currently reachable and test your current configuration.
{{< docs-imagebox img="/img/docs/ldap_debug.png" class="docs-image--no-shadow" max-width="600px" >}}
{{< figure src="/static/img/docs/ldap_debug.png" class="docs-image--no-shadow" max-width="600px" >}}
To use the debug view:
@ -109,7 +109,7 @@ To use the debug view:
1. Then, press "Run"
1. If the user is found within any of your LDAP instances, the mapping information is displayed
{{< docs-imagebox img="/img/docs/ldap_debug_mapping_testing.png" class="docs-image--no-shadow" max-width="600px" >}}
{{< figure src="/static/img/docs/ldap_debug_mapping_testing.png" class="docs-image--no-shadow" max-width="600px" >}}
### Bind

2
docs/sources/auth/team-sync.md
View File

@ -12,7 +12,7 @@ With Team Sync, you can set up synchronization between your auth provider's team
of certain teams/groups to automatically be added/removed as members to certain teams in Grafana. Currently the synchronization will only happen every
time a user logs in, unless LDAP is used together with active background synchronization that was added in Grafana 6.3.
{{< docs-imagebox img="/img/docs/enterprise/team_members_ldap.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
{{< figure src="/static/img/docs/enterprise/team_members_ldap.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
Grafana keeps track of all synchronized users in teams and you can see which users have been synchronized in the team members list, see `LDAP` label in screenshot.
This mechanism allows Grafana to remove an existing synchronized user from a team when its LDAP group membership (for example) changes. This mechanism also enables you to manually add a user as member of a team and it will not be removed when the user signs in. This gives you flexibility to combine LDAP group memberships and Grafana team memberships.

6
docs/sources/basics/exemplars/_index.md
View File

@ -11,14 +11,14 @@ An exemplar is a specific trace representative of a repeated pattern of data in
Suppose your company website is experiencing a surge in traffic volumes. While more than eighty percent of the users are able to access the website in under two seconds, some users are experiencing a higher than normal response time resulting in bad user experience
To identify the factors that are contributing to the latency, you must compare a trace for a fast response against a trace for a slow response. Given the vast amount of data in a typical production environment, it will be extremely laborious and time-consuming effort.
To identify the factors that are contributing to the latency, you must compare a trace for a fast response against a trace for a slow response. Given the vast amount of data in a typical production environment, it will be extremely laborious and time-consuming effort.
Use exemplars to help isolate problems within your data distribution by pinpointing query traces exhibiting high latency within a time interval. Once you localize the latency problem to a few exemplar traces, you can combine it with additional system based information or location properties to perform a root cause analysis faster, leading to quick resolutions to performance issues.
Support for exemplars is available for the Prometheus data source only. Once you enable the functionality, exemplars data is available by default. For more information on exemplar configuration and how to enable exemplars, refer to [configuring exemplars in Prometheus data source]({{< relref "../../datasources/prometheus.md#configuring-exemplars" >}}).
Grafana shows exemplars alongside a metric in the Explore view and in dashboards. Each exemplar displays as a highlighted star. You can hover your cursor over an exemplar to view the unique traceID, which is a combination of a key value pair. To investigate further, click the blue button next to the `traceID` property.
Grafana shows exemplars alongside a metric in the Explore view and in dashboards. Each exemplar displays as a highlighted star. You can hover your cursor over an exemplar to view the unique traceID, which is a combination of a key value pair. To investigate further, click the blue button next to the `traceID` property.
{{< docs-imagebox img="/img/docs/v74/exemplars.png" class="docs-image--no-shadow" max-width= "750px" caption="Screenshot showing the detail window of an Exemplar" >}}
{{< figure src="/static/img/docs/v74/exemplars.png" class="docs-image--no-shadow" max-width= "750px" caption="Screenshot showing the detail window of an Exemplar" >}}
Refer to [View exemplar data]({{< relref "./view-exemplars.md" >}}) for instructions on how to drill down and view exemplar trace details from metrics and logs. To know more about exemplars, refer to the blogpost [Intro to exemplars, which enable Grafana Tempo’s distributed tracing at massive scale](https://grafana.com/blog/2021/03/31/intro-to-exemplars-which-enable-grafana-tempos-distributed-tracing-at-massive-scale/).

28
docs/sources/basics/exemplars/view-exemplars.md
View File

@ -7,7 +7,7 @@ weight = 400
# View exemplar data
When support for exemplar support is enabled for a Prometheus data source, you can view exemplar data either in the Explore view or from the Loki log details.
When support for exemplar support is enabled for a Prometheus data source, you can view exemplar data either in the Explore view or from the Loki log details.
## In Explore
@ -15,13 +15,13 @@ Explore visualizes exemplar traces as highlighted stars alongside metrics data.
To examine the details of an exemplar trace:
1. Place your cursor over an exemplar (highlighted star). Depending on your backend trace data source, you will see a blue button with the label `Query with <data source name>`. In the following example, the tracing data source is Tempo.
1. Place your cursor over an exemplar (highlighted star). Depending on your backend trace data source, you will see a blue button with the label `Query with <data source name>`. In the following example, the tracing data source is Tempo.
{{< docs-imagebox img="/img/docs/basics/exemplar-details.png" class="docs-image--no-shadow" max-width= "275px" caption="Screenshot showing Exemplar details" >}}
{{< figure src="/static/img/docs/basics/exemplar-details.png" class="docs-image--no-shadow" max-width= "275px" caption="Screenshot showing Exemplar details" >}}
1. Click the **Query with Tempo** option next to the `traceID` property. The trace details, including the spans within the trace are listed in a separate panel on the right.
{{< docs-imagebox img="/img/docs/basics/exemplar-explore-view.png" class="docs-image--no-shadow" max-width= "750px" caption="Explorer view with panel showing trace details" >}}
{{< figure src="/static/img/docs/basics/exemplar-explore-view.png" class="docs-image--no-shadow" max-width= "750px" caption="Explorer view with panel showing trace details" >}}
For more information on how to drill down and analyze the trace and span details, refer to the [Analyze trace and span details](#analyze-trace-and-spans) section.
@ -32,32 +32,32 @@ You can also view exemplar trace details from the Loki logs in Explore. Use rege
To view the details of an exemplar trace:
1. Expand a log line and scroll down to the `Detected fields` section. Depending on your backend trace data source, you will see a blue button with the label `<data source name>`.
1. Expand a log line and scroll down to the `Detected fields` section. Depending on your backend trace data source, you will see a blue button with the label `<data source name>`.
1. Click the blue button next to the `traceID` property. Typically, it will have the name of the backend data source. In the following example, the tracing data source is Tempo. The trace details, including the spans within the trace are listed in a separate panel on the right.
{{< docs-imagebox img="/img/docs/basics/exemplar-loki-logs.png" class="docs-image--no-shadow" max-width= "750px" caption="Explorer view with panel showing trace details" >}}
{{< figure src="/static/img/docs/basics/exemplar-loki-logs.png" class="docs-image--no-shadow" max-width= "750px" caption="Explorer view with panel showing trace details" >}}
For more information on how to drill down and analyze the trace and span details, refer to the [Analyze trace and span details](#analyze-trace-and-spans) section.
## Analyze trace and spans
This panel shows the details of the trace in different segments.
- The top segment shows the Trace ID to indicate that the query results correspond to the specific trace.
This panel shows the details of the trace in different segments.
- The top segment shows the Trace ID to indicate that the query results correspond to the specific trace.
You can add more traces to the results using the `Add query` button.
- The next segment shows the entire span for the specific trace as a narrow strip. All levels of the trace from the client all the way down to database query is displayed, which provides a bird's eye view of the time distribution across all layers over which the HTTP request was processed.
1. You can click within this strip view to display a magnified view of a smaller time segment within the span. This magnified view shows up in the bottom segment of the panel.
1. In the magnified view, you can expand or collapse the various levels of the trace to drill down to the specific span of interest.
1. In the magnified view, you can expand or collapse the various levels of the trace to drill down to the specific span of interest.
For example, if the strip view shows that most of the latency was within the app layer, you can expand the trace down the app layer to investigate the problem further. To expand a particular layer of span, click the icon on the left. The same button can collapse an expanded span.
- To see the details of the span at any level, click the span itself.
- To see the details of the span at any level, click the span itself.
This displays additional metadata associated with the span. The metadata itself is initially shown in a narrow strip but you can see more details by clicking the metadata strip.
{{< docs-imagebox img="/img/docs/basics/exemplar-span-details.png" class="docs-image--no-shadow" max-width= "750px" caption="Span details" >}}
{{< figure src="/static/img/docs/basics/exemplar-span-details.png" class="docs-image--no-shadow" max-width= "750px" caption="Span details" >}}

4
docs/sources/basics/intro-histograms.md
View File

@ -19,7 +19,7 @@ and the bar height represents the frequency (such as count) of values that fell
This histogram shows the value distribution of a couple of time series. You can easily see that
most values land between 240-300 with a peak between 260-280.
![](/img/docs/v43/heatmap_histogram.png)
![](/static/img/docs/v43/heatmap_histogram.png)
Histograms only look at _value distributions_ over a specific time range. The problem with histograms is you cannot see any trends or changes in the distribution over time.
This is where heatmaps become useful.
@ -30,7 +30,7 @@ A _heatmap_ is like a histogram, but over time where each time slice represents
In this example, you can clearly see what values are more common and how they trend over time.
![](/img/docs/v43/heatmap_histogram_over_time.png)
![](/static/img/docs/v43/heatmap_histogram_over_time.png)
## Pre-bucketed data

2
docs/sources/basics/timeseries-dimensions.md
View File

@ -14,7 +14,7 @@ In [Introduction to time series]({{< relref "timeseries.md#time-series-databases
With time series data, the data often contain more than a single series, and is a set of multiple time series. Many Grafana data sources support this type of data.
{{< docs-imagebox img="/img/docs/example_graph_multi_dim.png" class="docs-image--no-shadow" max-width="850px" >}}
{{< figure src="/static/img/docs/example_graph_multi_dim.png" class="docs-image--no-shadow" max-width="850px" >}}
The common case is issuing a single query for a measurement with one or more additional properties as dimensions. For example, querying a temperature measurement along with a location property. In this case, multiple series are returned back from that single query and each series has unique location as a dimension.

2
docs/sources/basics/timeseries.md
View File

@ -19,7 +19,7 @@ Temperature data like this is one example of what we call a *time series*—a se
Tables are useful when you want to identify individual measurements but make it difficult to see the big picture. A more common visualization for time series is the _graph_, which instead places each measurement along a time axis. Visual representations like the graph make it easier to discover patterns and features of the data that otherwise would be difficult to see.
{{< docs-imagebox img="/img/docs/example_graph.png" class="docs-image--no-shadow" max-width="850px" >}}
{{< figure src="/static/img/docs/example_graph.png" class="docs-image--no-shadow" max-width="850px" >}}
Temperature data like the one in the example, is far from the only example of a time series. Other examples of time series are:

4
docs/sources/best-practices/dashboard-management-maturity-levels.md
View File

@ -38,11 +38,11 @@ How can you tell you are here?
- Methodical dashboards according to an [observability strategy]({{< relref "common-observability-strategies.md" >}}).
- Hierarchical dashboards with drill-downs to the next level.
{{< imgbox max-width="100%" img="/img/docs/best-practices/drill-down-example.png" caption="Example of using drill-down" >}}
{{< figure class="float-right" max-width="100%" src="/static/img/docs/best-practices/drill-down-example.png" caption="Example of using drill-down" >}}
- Dashboard design reflects service hierarchies. The example shown below uses the RED method (request and error rate on the left, latency duration on the right) with one row per service. The row order reflects the data flow.
{{< imgbox max-width="100%" img="/img/docs/best-practices/service-hierarchy-example.png" caption="Example of a service hierarchy" >}}
{{< figure class="float-right" max-width="100%" src="/static/img/docs/best-practices/service-hierarchy-example.png" caption="Example of a service hierarchy" >}}
- Compare like to like: split service dashboards when the magnitude differs. Make sure aggregated metrics don't drown out important information.
- Expressive charts with meaningful use of color and normalizing axes where you can.

4
docs/sources/dashboards/_index.md
View File

@ -10,7 +10,7 @@ A _dashboard_ is a set of one or more panels organized and arranged into one or
## Dashboard UI
<img src="/img/docs/v50/dashboard_annotated.png" class="no-shadow" width="700px">
<img src="/static/img/docs/v50/dashboard_annotated.png" class="no-shadow" width="700px">
1. Zoom out time range
1. Time picker dropdown. Here you can access relative time range options, auto refresh options and set custom absolute time ranges.
@ -22,7 +22,7 @@ A _dashboard_ is a set of one or more panels organized and arranged into one or
Click the new Dashboard link on the right side of the Dashboard picker. You now have a blank Dashboard.
<img class="no-shadow" src="/img/docs/v50/top_nav_annotated.png" width="580px">
<img class="no-shadow" src="/static/img/docs/v50/top_nav_annotated.png" width="580px">
The image above shows you the top header for a Dashboard.

16
docs/sources/dashboards/annotations.md
View File

@ -7,7 +7,7 @@ weight = 2
# Annotations
{{< docs-imagebox img="/img/docs/v46/annotations.png" max-width="800px" >}}
{{< figure src="/static/img/docs/v46/annotations.png" max-width="800px" >}}
Annotations provide a way to mark points on the graph with rich events. When you hover over an annotation
you can get event description and event tags. The text field can include links to other systems with more detail.
@ -20,15 +20,15 @@ Grafana comes with a native annotation store and the ability to add annotation e
By holding down Ctrl/Cmd+Click. Adding tags to the annotation will make it searchable from other dashboards.
{{< docs-imagebox img="/img/docs/annotations/annotation-still.png"
max-width="600px" animated-gif="/img/docs/annotations/annotation.gif" >}}
{{< figure src="/static/img/docs/annotations/annotation-still.png"
max-width="600px" animated-gif="/static/img/docs/annotations/annotation.gif" >}}
### Adding regions events
You can also hold down Ctrl/Cmd and select region to create a region annotation.
{{< docs-imagebox img="/img/docs/annotations/region-annotation-still.png"
max-width="600px" animated-gif="/img/docs/annotations/region-annotation.gif" >}}
{{< figure src="/static/img/docs/annotations/region-annotation-still.png"
max-width="600px" animated-gif="/static/img/docs/annotations/region-annotation.gif" >}}
### Built in query
@ -46,7 +46,7 @@ one tag. For example create an annotation query name `outages` and specify a tag
In Grafana v5.3+ it's possible to use template variables in the tag query. So if you have a dashboard showing stats for different services and a template variable that dictates which services to show, you can now use the same template variable in your annotation query to only show annotations for those services.
{{< docs-imagebox img="/img/docs/v53/annotation_tag_filter_variable.png" max-width="600px" >}}
{{< figure src="/static/img/docs/v53/annotation_tag_filter_variable.png" max-width="600px" >}}
## Querying other data sources
@ -54,8 +54,8 @@ Annotation events are fetched via annotation queries. To add a new annotation qu
open the dashboard settings menu, then select `Annotations`. This will open the dashboard annotations
settings view. To create a new annotation query hit the `New` button.
<!--![](/img/docs/v50/annotation_new_query.png)-->
{{< docs-imagebox img="/img/docs/v50/annotation_new_query.png" max-width="600px" >}}
<!--![](/static/img/docs/v50/annotation_new_query.png)-->
{{< figure src="/static/img/docs/v50/annotation_new_query.png" max-width="600px" >}}
Specify a name for the annotation query. This name is given to the toggle (checkbox) that will allow
you to enable/disable showing annotation events from this query. For example you might have two

2
docs/sources/dashboards/dashboard_folders.md
View File

@ -21,7 +21,7 @@ On the Create Folder page, fill in a unique name for the folder and then click C
## Manage Dashboards
{{< docs-imagebox img="/img/docs/v50/manage_dashboard_menu.png" max-width="300px" class="docs-image--right" >}}
{{< figure src="/static/img/docs/v50/manage_dashboard_menu.png" max-width="300px" class="docs-image--right" >}}
There is a new Manage Dashboards page where you can carry out a variety of tasks:

8
docs/sources/dashboards/dashboard_history.md
View File

@ -10,7 +10,7 @@ weight = 100
Whenever you save a version of your dashboard, a copy of that version is saved so that previous versions of your dashboard are never lost. A list of these versions is available by entering the dashboard settings and then selecting "Versions" in the left side menu.
<img class="no-shadow" src="/img/docs/v50/dashboard_versions_list.png">
<img class="no-shadow" src="/static/img/docs/v50/dashboard_versions_list.png">
The dashboard version history feature lets you compare and restore to previously saved dashboard versions.
@ -18,11 +18,11 @@ The dashboard version history feature lets you compare and restore to previously
To compare two dashboard versions, select the two versions from the list that you wish to compare. Once selected, the "Compare versions" button will become clickable. Click the button to view the diff between the two versions.
<img class="no-shadow" src="/img/docs/v50/dashboard_versions_select.png">
<img class="no-shadow" src="/static/img/docs/v50/dashboard_versions_select.png">
Upon clicking the button, you'll be brought to the diff view. By default, you'll see a textual summary of the changes, like in the image below.
<img class="no-shadow" src="/img/docs/v50/dashboard_versions_diff_basic.png">
<img class="no-shadow" src="/static/img/docs/v50/dashboard_versions_diff_basic.png">
If you want to view the diff of the raw JSON that represents your dashboard, you can do that as well by clicking the "View JSON Diff" button at the bottom.
@ -32,6 +32,6 @@ If you want to restore to the version you are diffing against, you can do so by
If you need to restore to a previously saved dashboard version, you can do so by either clicking the "Restore" button on the right of a row in the dashboard version list, or by clicking the "Restore to version \<x\>" button appearing in the diff view. Clicking the button will bring up the following popup prompting you to confirm the restoration.
<img class="no-shadow" src="/img/docs/v50/dashboard_versions_restore.png">
<img class="no-shadow" src="/static/img/docs/v50/dashboard_versions_restore.png">
After restoring to a previous version, a new version will be created containing the same exact data as the previous version, only with a different version number. This is indicated in the "Notes column" for the row in the new dashboard version. This is done simply to ensure your previous dashboard versions are not affected by the change.

8
docs/sources/dashboards/export-import.md
View File

@ -15,7 +15,7 @@ Dashboards are exported in Grafana JSON format, and contain everything you need
The export feature is accessed in the share window which you open by clicking the share button in the dashboard menu.
{{< docs-imagebox img="/img/docs/export/export-modal-8-0.png" max-width="800px" >}}
{{< figure src="/static/img/docs/export/export-modal-8-0.png" max-width="800px" >}}
### Making a dashboard portable
@ -35,12 +35,12 @@ During import, the removed default values are automatically added back to the da
To import a dashboard click the + icon in the side menu, and then click **Import**.
{{< docs-imagebox img="/img/docs/v70/import_step1.png" max-width="700px" >}}
{{< figure src="/static/img/docs/v70/import_step1.png" max-width="700px" >}}
From here you can upload a dashboard JSON file, paste a [Grafana.com](https://grafana.com) dashboard
URL or paste dashboard JSON text directly into the text area.
{{< docs-imagebox img="/img/docs/v70/import_step2_grafana.com.png" max-width="700px" >}}
{{< figure src="/static/img/docs/v70/import_step2_grafana.com.png" max-width="700px" >}}
In step 2 of the import process Grafana will let you change the name of the dashboard, pick what
data source you want the dashboard to use and specify any metric prefixes (if the dashboard use any).
@ -49,7 +49,7 @@ data source you want the dashboard to use and specify any metric prefixes (if th
Find dashboards for common server applications at [Grafana.com/dashboards](https://grafana.com/dashboards).
{{< docs-imagebox img="/img/docs/v50/gcom_dashboard_list.png" max-width="700px" >}}
{{< figure src="/static/img/docs/v50/gcom_dashboard_list.png" max-width="700px" >}}
## Import and sharing with Grafana 2.x or 3.0

2
docs/sources/dashboards/playlist.md
View File

@ -14,7 +14,7 @@ Grafana automatically scales dashboards to any resolution, which makes them perf
You can access the Playlist feature from Grafana's side menu, in the Dashboards submenu.
{{< docs-imagebox img="/img/docs/v50/playlist.png" max-width="25rem">}}
{{< figure src="/static/img/docs/v50/playlist.png" max-width="25rem">}}
## Create a playlist

2
docs/sources/dashboards/reporting.md
View File

@ -10,6 +10,6 @@ weight = 8
Reporting allows you to generate PDFs from any of your dashboards and have them sent out to interested parties on a schedule.
{{< docs-imagebox img="/img/docs/enterprise/reports_list.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/reports_list.png" max-width="500px" class="docs-image--no-shadow" >}}
> Reporting is only available in Grafana Enterprise, v6.4 or later. For more information, refer to [Reporting]({{< relref "../enterprise/reporting.md" >}}) in [Grafana Enterprise]({{< relref "../enterprise" >}}).

2
docs/sources/dashboards/search.md
View File

@ -10,7 +10,7 @@ weight = 5
Dashboards can be searched by the dashboard name, filtered by one (or many) tags or filtered by starred status. The dashboard search is accessed through the dashboard picker, available in the dashboard top nav area. The dashboard search can also be opened by using the shortcut `F`.
<img class="no-shadow" src="/img/docs/v50/dashboard_search_annotated.png" width="700px">
<img class="no-shadow" src="/static/img/docs/v50/dashboard_search_annotated.png" width="700px">
1. `Search Bar`: The search bar allows you to enter any string and search both database and file based dashboards in real-time.
1. `Starred`: Here you find all your starred dashboards.

6
docs/sources/dashboards/time-range-controls.md
View File

@ -37,7 +37,7 @@ Here are some examples:
The dashboard and panel time controls have a common user interface (UI).
<img class="no-shadow" src="/img/docs/time-range-controls/common-time-controls-7-0.png" max-width="700px">
<img class="no-shadow" src="/static/img/docs/time-range-controls/common-time-controls-7-0.png" max-width="700px">
The options are defined below.
@ -47,11 +47,11 @@ The current time range, also called the _time picker_, shows the time range curr
Hover your cursor over the field to see the exact time stamps in the range and their source (such as the local browser).
<img class="no-shadow" src="/img/docs/time-range-controls/time-picker-7-0.png" max-width="300px">
<img class="no-shadow" src="/static/img/docs/time-range-controls/time-picker-7-0.png" max-width="300px">
Click on the current time range to change the time range. You can change the current time using a _relative time range_, such as the last 15 minutes, or an _absolute time range_, such as `2020-05-14 00:00:00 to 2020-05-15 23:59:59`.
<img class="no-shadow" src="/img/docs/time-range-controls/change-current-time-range-7-0.png" max-width="900px">
<img class="no-shadow" src="/static/img/docs/time-range-controls/change-current-time-range-7-0.png" max-width="900px">
### Relative time range

14
docs/sources/datasources/add-a-data-source.md
View File

@ -13,21 +13,21 @@ Before you can create your first dashboard, you need to add your data source.
To add a data source:
1. Move your cursor to the cog icon on the side menu which will show the configuration options.
{{< docs-imagebox img="/img/docs/v75/sidemenu-datasource-7-5.png" max-width="150px" class="docs-image--no-shadow">}}
{{< figure src="/static/img/docs/v75/sidemenu-datasource-7-5.png" max-width="150px" class="docs-image--no-shadow">}}
1. Click on **Data sources**. The data sources page opens showing a list of previously configured data sources for the Grafana instance.
1. Click **Add data source** to see a list of all supported data sources.
{{< docs-imagebox img="/img/docs/v75/add-data-source-7-5.png" max-width="600px" class="docs-image--no-shadow">}}
{{< figure src="/static/img/docs/v75/add-data-source-7-5.png" max-width="600px" class="docs-image--no-shadow">}}
1. Search for a specific data source by entering the name in the search dialog. Or you can scroll through supported data sources grouped into time series, logging, tracing and other categories.
1. Move the cursor over the data source you want to add.
{{< docs-imagebox img="/img/docs/v75/select-data-source-7-5.png" max-width="700px" class="docs-image--no-shadow">}}
{{< figure src="/static/img/docs/v75/select-data-source-7-5.png" max-width="700px" class="docs-image--no-shadow">}}
1. Click **Select**. The data source configuration page opens.
1. Configure the data source following instructions specific to that data source. See [Data sources]({{< relref "_index.md" >}}) for links to configuration instructions for all supported data sources.

26
docs/sources/datasources/azuremonitor.md
View File

@ -35,7 +35,7 @@ The data source can access metrics from four different services. You can configu
- **Default Subscription Id** (Subscriptions -> Choose subscription -> Overview -> Subscription ID)
1. Paste these four items into the fields in the Azure Monitor API Details section:
{{< docs-imagebox img="/img/docs/v62/config_1_azure_monitor_details.png" class="docs-image--no-shadow" caption="Azure Monitor Configuration Details" >}}
{{< figure src="/static/img/docs/v62/config_1_azure_monitor_details.png" class="docs-image--no-shadow" caption="Azure Monitor Configuration Details" >}}
- The Subscription Id can be changed per query. Save the data source and refresh the page to see the list of subscriptions available for the specified Client Id.
@ -50,10 +50,10 @@ The data source can access metrics from four different services. You can configu
- API Key
1. Paste these two items into the appropriate fields in the Application Insights API Details section:
{{< docs-imagebox img="/img/docs/v62/config_2_app_insights_api_details.png" class="docs-image--no-shadow" caption="Application Insights Configuration Details" >}}
{{< figure src="/static/img/docs/v62/config_2_app_insights_api_details.png" class="docs-image--no-shadow" caption="Application Insights Configuration Details" >}}
1. Test that the configuration details are correct by clicking on the "Save & Test" button:
{{< docs-imagebox img="/img/docs/v62/config_3_save_and_test.png" class="docs-image--no-shadow" caption="Save and Test" >}}
{{< figure src="/static/img/docs/v62/config_3_save_and_test.png" class="docs-image--no-shadow" caption="Save and Test" >}}
Alternatively on step 4 if creating a new Azure Active Directory App, use the [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest):
@ -89,7 +89,7 @@ Examples of metrics that you can get from the service are:
- `Microsoft.Network/networkInterfaces - Bytes sent`
- `Microsoft.Storage/storageAccounts - Used Capacity`
{{< docs-imagebox img="/img/docs/v60/azuremonitor-service-query-editor.png" class="docs-image--no-shadow" caption="Metrics Query Editor" >}}
{{< figure src="/static/img/docs/v60/azuremonitor-service-query-editor.png" class="docs-image--no-shadow" caption="Metrics Query Editor" >}}
As of Grafana 7.1, the query editor allows you to query multiple dimensions for metrics that support them. Metrics that support multiple dimensions are those listed in the [Azure Monitor supported Metrics List](https://docs.microsoft.com/en-us/azure/azure-monitor/platform/metrics-supported) that have one or more values listed in the "Dimension" column for the metric.
@ -147,7 +147,7 @@ Examples:
- Chaining template variables: `ResourceNames($rg, $ns)`
- Do not quote parameters: `MetricNames(hg, Microsoft.Network/publicIPAddresses, grafanaIP)`
{{< docs-imagebox img="/img/docs/v60/azuremonitor-service-variables.png" class="docs-image--no-shadow" caption="Nested Azure Monitor Template Variables" >}}
{{< figure src="/static/img/docs/v60/azuremonitor-service-variables.png" class="docs-image--no-shadow" caption="Nested Azure Monitor Template Variables" >}}
Check out the [Templating]({{< relref "../variables/_index.md" >}}) documentation for an introduction to the templating feature and the different
types of template variables.
@ -160,7 +160,7 @@ Not all metrics returned by the Azure Monitor Metrics API have values. To make i
Grafana alerting is supported for the Azure Monitor service. This is not Azure Alerts support. For more information about Grafana alerting, refer to [how alerting in Grafana works]({{< relref "../alerting/_index.md" >}}).
{{< docs-imagebox img="/img/docs/v60/azuremonitor-alerting.png" class="docs-image--no-shadow" caption="Azure Monitor Alerting" >}}
{{< figure src="/static/img/docs/v60/azuremonitor-alerting.png" class="docs-image--no-shadow" caption="Azure Monitor Alerting" >}}
## Query the Logs service
@ -202,7 +202,7 @@ Perf
> **Tip**: In the above query, the Kusto syntax `Samples=count()` and `["Avg Value"]=...` is used to rename those columns — the second syntax allowing for the space. This changes the name of the metric that Grafana uses, and as a result, things like series legends and table columns will match what you specify. Here `Samples` is displayed instead of `_count`.
{{< docs-imagebox img="/img/docs/azuremonitor/logs_multi-value_multi-dim.png" class="docs-image--no-shadow" caption="Azure Logs query with multiple values and multiple dimensions" >}}
{{< figure src="/static/img/docs/azuremonitor/logs_multi-value_multi-dim.png" class="docs-image--no-shadow" caption="Azure Logs query with multiple values and multiple dimensions" >}}
### Table queries
@ -294,7 +294,7 @@ Perf
> Only available in Grafana v7.0+.
{{< docs-imagebox img="/img/docs/v70/azure-log-analytics-deep-linking.png" max-width="500px" class="docs-image--right" caption="Logs deep linking" >}}
{{< figure src="/static/img/docs/v70/azure-log-analytics-deep-linking.png" max-width="500px" class="docs-image--right" caption="Logs deep linking" >}}
Click on a time series in the panel to see a context menu with a link to `View in Azure Portal`. Clicking that link opens the Azure Metric Logs query editor in the Azure Portal and runs the query from the Grafana panel there.
@ -310,7 +310,7 @@ Grafana alerting is supported for Application Insights. This is not Azure Alerts
## Query Application Insights service
{{< docs-imagebox img="/img/docs/azuremonitor/insights_metrics_multi-dim.png" class="docs-image--no-shadow" caption="Application Insights Query Editor" >}}
{{< figure src="/static/img/docs/azuremonitor/insights_metrics_multi-dim.png" class="docs-image--no-shadow" caption="Application Insights Query Editor" >}}
As of Grafana 7.1, you can select more than one group by dimension.
@ -362,19 +362,19 @@ Examples:
- Passing in metric name variable: `AppInsightsGroupBys(requests/count)`
- Chaining template variables: `AppInsightsGroupBys($metricnames)`
{{< docs-imagebox img="/img/docs/v60/appinsights-service-variables.png" class="docs-image--no-shadow" caption="Nested Application Insights Template Variables" >}}
{{< figure src="/static/img/docs/v60/appinsights-service-variables.png" class="docs-image--no-shadow" caption="Nested Application Insights Template Variables" >}}
### Application Insights alerting
Grafana alerting is supported for Application Insights. This is not Azure Alerts support. For more information about Grafana alerting, refer to [Alerts overview]({{< relref "../alerting/_index.md" >}}).
{{< docs-imagebox img="/img/docs/v60/azuremonitor-alerting.png" class="docs-image--no-shadow" caption="Azure Monitor Alerting" >}}
{{< figure src="/static/img/docs/v60/azuremonitor-alerting.png" class="docs-image--no-shadow" caption="Azure Monitor Alerting" >}}
## Query the Application Insights Analytics service
If you change the service type to **Insights Analytics**, then a similar editor to the Log Analytics service is available. This service also uses the Kusto language, so the instructions for querying data are identical to [querying the log analytics service]({{< relref "#querying-the-azure-log-analytics-service" >}}), except that you query Application Insights Analytics data instead.
{{< docs-imagebox img="/img/docs/azuremonitor/insights_analytics_multi-dim.png" class="docs-image--no-shadow" caption="Azure Application Insights Analytics query with multiple dimensions" >}}
{{< figure src="/static/img/docs/azuremonitor/insights_analytics_multi-dim.png" class="docs-image--no-shadow" caption="Azure Application Insights Analytics query with multiple dimensions" >}}
## Configure the data source with provisioning
@ -419,7 +419,7 @@ To prepare for this upcoming change, Application Insights queries can now be mad
Azure Resource Graph (ARG) is a service in Azure that is designed to extend Azure Resource Management by providing efficient and performant resource exploration with the ability to query at scale across a given set of subscriptions so that you can effectively govern your environment. By querying ARG, you can query resources with complex filtering, iteratively explore resources based on governance requirements, and assess the impact of applying policies in a vast cloud environment.
{{< docs-imagebox img="/img/docs/azure-monitor/azure-resource-graph-8-0.png" class="docs-image--no-shadow" caption="Azure Resource Graph Editor" >}}
{{< figure src="/static/img/docs/azure-monitor/azure-resource-graph-8-0.png" class="docs-image--no-shadow" caption="Azure Resource Graph Editor" >}}
### Table queries

16
docs/sources/datasources/cloudwatch.md
View File

@ -137,8 +137,8 @@ region = us-west-2
The CloudWatch data source can query data from both CloudWatch metrics and CloudWatch Logs APIs, each with its own specialized query editor. You select which API you want to query with using the query mode switch on top of the editor.
{{< docs-imagebox img="/img/docs/v70/cloudwatch-metrics-query-field.png" max-width="800px" class="docs-image--left" caption="CloudWatch metrics query field" >}}
{{< docs-imagebox img="/img/docs/v70/cloudwatch-logs-query-field.png" max-width="800px" class="docs-image--right" caption="CloudWatch Logs query field" >}}
{{< figure src="/static/img/docs/v70/cloudwatch-metrics-query-field.png" max-width="800px" class="docs-image--left" caption="CloudWatch metrics query field" >}}
{{< figure src="/static/img/docs/v70/cloudwatch-logs-query-field.png" max-width="800px" class="docs-image--right" caption="CloudWatch Logs query field" >}}
## Using the Metric Query Editor
@ -150,7 +150,7 @@ To create a valid query, you need to specify the namespace, metric name and at l
In Grafana 6.5 or higher, you’re able to monitor a dynamic list of metrics by using the asterisk (\*) wildcard for one or more dimension values.
{{< docs-imagebox img="/img/docs/v65/cloudwatch-dimension-wildcard.png" max-width="800px" class="docs-image--right" caption="CloudWatch dimension wildcard" >}}
{{< figure src="/static/img/docs/v65/cloudwatch-dimension-wildcard.png" max-width="800px" class="docs-image--right" caption="CloudWatch dimension wildcard" >}}
In the example, all metrics in the namespace `AWS/EC2` with a metric name of `CPUUtilization` and ANY value for the `InstanceId` dimension are queried. This can help you monitor metrics for AWS resources, like EC2 instances or containers. For example, when new instances get created as part of an auto scaling event, they will automatically appear in the graph without you having to track the new instance IDs. This capability is currently limited to retrieving up to 100 metrics. You can click on `Show Query Preview` to see the search expression that is automatically built to support wildcards. To learn more about search expressions, visit the [CloudWatch documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/search-expression-syntax.html).
@ -184,7 +184,7 @@ If the period field is left blank or set to `auto`, then it calculates automatic
### Deep linking from Grafana panels to the CloudWatch console
{{< docs-imagebox img="/img/docs/v65/cloudwatch-deep-linking.png" max-width="500px" class="docs-image--right" caption="CloudWatch deep linking" >}}
{{< figure src="/static/img/docs/v65/cloudwatch-deep-linking.png" max-width="500px" class="docs-image--right" caption="CloudWatch deep linking" >}}
Left clicking a time series in the panel shows a context menu with a link to `View in CloudWatch console`. Clicking that link will open a new tab that will take you to the CloudWatch console and display all the metrics for that query. If you're not currently logged in to the CloudWatch console, the link will forward you to the login page. The provided link is valid for any account but will only display the right metrics if you're logged in to the account that corresponds to the selected data source in Grafana.
@ -198,11 +198,11 @@ To query CloudWatch Logs, select the region and up to 20 log groups which you wa
You can also write queries returning time series data by using the [`stats` command](https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/CWL_Insights-Visualizing-Log-Data.html). When making `stats` queries in Explore, you have to make sure you are in Metrics Explore mode.
{{< docs-imagebox img="/img/docs/v70/explore-mode-switcher.png" max-width="500px" class="docs-image--right" caption="Explore mode switcher" >}}
{{< figure src="/static/img/docs/v70/explore-mode-switcher.png" max-width="500px" class="docs-image--right" caption="Explore mode switcher" >}}
To the right of the query input field is a CloudWatch Logs Insights link that opens the CloudWatch Logs Insights console with your query. You can continue exploration there if necessary.
{{< docs-imagebox img="/img/docs/v70/cloudwatch-logs-deep-linking.png" max-width="500px" class="docs-image--right" caption="CloudWatch Logs deep linking" >}}
{{< figure src="/static/img/docs/v70/cloudwatch-logs-deep-linking.png" max-width="500px" class="docs-image--right" caption="CloudWatch Logs deep linking" >}}
### Using template variables
@ -211,7 +211,7 @@ See the [Templating]({{< relref "../variables/_index.md" >}}) documentation for
### Deep linking from Grafana panels to the CloudWatch console
{{< docs-imagebox img="/img/docs/v70/cloudwatch-logs-deep-linking.png" max-width="500px" class="docs-image--right" caption="CloudWatch Logs deep linking" >}}
{{< figure src="/static/img/docs/v70/cloudwatch-logs-deep-linking.png" max-width="500px" class="docs-image--right" caption="CloudWatch Logs deep linking" >}}
If you'd like to view your query in the CloudWatch Logs Insights console, simply click the `CloudWatch Logs Insights` button next to the query editor.
If you're not currently logged in to the CloudWatch console, the link will forward you to the login page. The provided link is valid for any account but will only display the right metrics if you're logged in to the account that corresponds to the selected data source in Grafana.
@ -232,7 +232,7 @@ The updated CloudWatch data source ships with pre-configured dashboards for five
To import the pre-configured dashboards, go to the configuration page of your CloudWatch data source and click on the `Dashboards` tab. Click `Import` for the dashboard you would like to use. To customize the dashboard, we recommend saving the dashboard under a different name, because otherwise the dashboard will be overwritten when a new version of the dashboard is released.
{{< docs-imagebox img="/img/docs/v65/cloudwatch-dashboard-import.png" caption="CloudWatch dashboard import" >}}
{{< figure src="/static/img/docs/v65/cloudwatch-dashboard-import.png" caption="CloudWatch dashboard import" >}}
## Templated queries

10
docs/sources/datasources/elasticsearch.md
View File

@ -49,7 +49,7 @@ http.cors.allow-origin: "*"
### Index settings
![Elasticsearch data source details](/img/docs/elasticsearch/elasticsearch-ds-details-7-4.png)
![Elasticsearch data source details](/static/img/docs/elasticsearch/elasticsearch-ds-details-7-4.png)
Here you can specify a default for the `time field` and specify the name of your Elasticsearch index. You can use
a time pattern for the index name or a wildcard.
@ -101,7 +101,7 @@ Each data link configuration consists of:
## Metric Query editor
![Elasticsearch Query Editor](/img/docs/elasticsearch/query-editor-7-4.png)
![Elasticsearch Query Editor](/static/img/docs/elasticsearch/query-editor-7-4.png)
The Elasticsearch query editor allows you to select multiple metrics and group by multiple terms or filters. Use the plus and minus icons to the right to add/remove
metrics or group by clauses. Some metrics and group by clauses haves options, click the option text to expand the row to view and edit metric or group by options.
@ -120,7 +120,7 @@ You can control the name for time series via the `Alias` input field.
Some metric aggregations are called Pipeline aggregations, for example, *Moving Average* and *Derivative*. Elasticsearch pipeline metrics require another metric to be based on. Use the eye icon next to the metric to hide metrics from appearing in the graph. This is useful for metrics you only have in the query for use in a pipeline metric.
![Pipeline aggregation editor](/img/docs/elasticsearch/pipeline-aggregation-editor-7-4.png)
![Pipeline aggregation editor](/static/img/docs/elasticsearch/pipeline-aggregation-editor-7-4.png)
## Templating
@ -170,7 +170,7 @@ There are two syntaxes:
Why two ways? The first syntax is easier to read and write but does not allow you to use a variable in the middle of a word. When the *Multi-value* or *Include all value*
options are enabled, Grafana converts the labels from plain text to a lucene compatible condition.
![Query with template variables](/img/docs/elasticsearch/elastic-templating-query-7-4.png)
![Query with template variables](/static/img/docs/elasticsearch/elastic-templating-query-7-4.png)
In the above example, we have a lucene query that filters documents based on the `@hostname` property using a variable named `$hostname`. It is also using
a variable in the *Terms* group by field input box. This allows you to use a variable to quickly change how the data is grouped.
@ -262,4 +262,4 @@ In order to sign requests to your Amazon Elasticsearch Service domain, SigV4 can
Once AWS SigV4 is enabled, it can be configured on the Elasticsearch data source configuration page. Refer to [Cloudwatch authentication]({{<relref "./cloudwatch.md#authentication" >}}) for more information about authentication options.
{{< docs-imagebox img="/img/docs/v73/elasticsearch-sigv4-config-editor.png" max-width="500px" class="docs-image--no-shadow" caption="SigV4 configuration for AWS Elasticsearch Service" >}}
{{< figure src="/static/img/docs/v73/elasticsearch-sigv4-config-editor.png" max-width="500px" class="docs-image--no-shadow" caption="SigV4 configuration for AWS Elasticsearch Service" >}}

20
docs/sources/datasources/google-cloud-monitoring/_index.md
View File

@ -39,31 +39,31 @@ The following APIs need to be enabled first:
Click on the links above and click the `Enable` button:
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_enable_api.png" max-width="450px" class="docs-image--no-shadow" caption="Enable GCP APIs" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_enable_api.png" max-width="450px" class="docs-image--no-shadow" caption="Enable GCP APIs" >}}
#### Create a GCP Service Account for a Project
1. Navigate to the [APIs and Services Credentials page](https://console.cloud.google.com/apis/credentials).
1. Click on the `Create credentials` dropdown/button and choose the `Service account key` option.
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_create_service_account_button.png" max-width="500px" class="docs-image--no-shadow" caption="Create service account button" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_create_service_account_button.png" max-width="500px" class="docs-image--no-shadow" caption="Create service account button" >}}
1. On the `Create service account key` page, choose key type `JSON`. Then in the `Service Account` dropdown, choose the `New service account` option:
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_create_service_account_key.png" max-width="500px" class="docs-image--no-shadow" caption="Create service account key" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_create_service_account_key.png" max-width="500px" class="docs-image--no-shadow" caption="Create service account key" >}}
1. Some new fields will appear. Fill in a name for the service account in the `Service account name` field and then choose the `Monitoring Viewer` role from the `Role` dropdown:
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_service_account_choose_role.png" max-width="600px" class="docs-image--no-shadow" caption="Choose role" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_service_account_choose_role.png" max-width="600px" class="docs-image--no-shadow" caption="Choose role" >}}
1. Click the Create button. A JSON key file will be created and downloaded to your computer. Store this file in a secure place as it allows access to your Google Cloud Monitoring data.
1. Upload it to Grafana on the data source Configuration page. You can either upload the file or paste in the contents of the file.
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_grafana_upload_key.png" max-width="550px" class="docs-image--no-shadow" caption="Upload service key file to Grafana" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_grafana_upload_key.png" max-width="550px" class="docs-image--no-shadow" caption="Upload service key file to Grafana" >}}
1. The file contents will be encrypted and saved in the Grafana database. Don't forget to save after uploading the file!
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_grafana_key_uploaded.png" max-width="600px" class="docs-image--no-shadow" caption="Service key file is uploaded to Grafana" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_grafana_key_uploaded.png" max-width="600px" class="docs-image--no-shadow" caption="Service key file is uploaded to Grafana" >}}
### Using GCE Default Service Account
@ -81,7 +81,7 @@ The Google Cloud Monitoring query editor allows you to build two types of querie
### Metric Queries
{{< docs-imagebox img="/img/docs/google-cloud-monitoring/metric-query-builder-8-0.png" max-width= "400px" class="docs-image--right" >}}
{{< figure src="/static/img/docs/google-cloud-monitoring/metric-query-builder-8-0.png" max-width= "400px" class="docs-image--right" >}}
The metric query editor allows you to select metrics, group/aggregate by labels and by time, and use filters to specify which time series you want in the results.
@ -195,7 +195,7 @@ Example Result: `gce_instance - compute.googleapis.com/instance/cpu/usage_time`
> **Note:** Available in Grafana v7.1 and later versions.
{{< docs-imagebox img="/img/docs/v71/cloudmonitoring_deep_linking.png" max-width="500px" class="docs-image--right" caption="Google Cloud Monitoring deep linking" >}}
{{< figure src="/static/img/docs/v71/cloudmonitoring_deep_linking.png" max-width="500px" class="docs-image--right" caption="Google Cloud Monitoring deep linking" >}}
Click on a time series in the panel to see a context menu with a link to View in Metrics Explorer in Google Cloud Console. Clicking that link opens the Metrics Explorer in the Google Cloud Console and runs the query from the Grafana panel there.
The link navigates the user first to the Google Account Chooser and after successfully selecting an account, the user is redirected to the Metrics Explorer. The provided link is valid for any account, but it only displays the query if your account has access to the GCP project specified in the query.
@ -208,7 +208,7 @@ Grafana issues one query to the Cloud Monitoring API per query editor row, and e
> **Note:** Available in Grafana v7.0 and later versions.
{{< docs-imagebox img="/img/docs/google-cloud-monitoring/slo-query-builder-8-0.png" max-width= "400px" class="docs-image--right" >}}
{{< figure src="/static/img/docs/google-cloud-monitoring/slo-query-builder-8-0.png" max-width= "400px" class="docs-image--right" >}}
The SLO query builder in the Google Cloud Monitoring data source allows you to display SLO data in time series format. To get an understanding of the basic concepts in service monitoring, please refer to Google Cloud Monitoring's [official docs](https://cloud.google.com/monitoring/service-monitoring).
@ -303,7 +303,7 @@ Why two ways? The first syntax is easier to read and write but does not allow yo
## Annotations
{{< docs-imagebox img="/img/docs/google-cloud-monitoring/annotations-8-0.png" max-width= "400px" class="docs-image--right" >}}
{{< figure src="/static/img/docs/google-cloud-monitoring/annotations-8-0.png" max-width= "400px" class="docs-image--right" >}}
[Annotations]({{< relref "../../dashboards/annotations.md" >}}) allow you to overlay rich event information on top of graphs. You add annotation
queries via the Dashboard menu / Annotations view. Annotation rendering is expensive so it is important to limit the number of rows returned. There is no support for showing Google Cloud Monitoring annotations and events yet but it works well with [custom metrics](https://cloud.google.com/monitoring/custom-metrics/) in Google Cloud Monitoring.

2
docs/sources/datasources/google-cloud-monitoring/preconfig-cloud-monitoring-dashboards.md
View File

@ -21,4 +21,4 @@ The data source of the newly created dashboard panels will be the one selected a
In case you want to customize a dashboard, we recommend that you save it under a different name. Otherwise the dashboard will be overwritten when a new version of the dashboard is released.
{{< docs-imagebox img="/img/docs/google-cloud-monitoring/curated-dashboards-7-4.png" max-width= "650px" >}}
{{< figure src="/static/img/docs/google-cloud-monitoring/curated-dashboards-7-4.png" max-width= "650px" >}}

16
docs/sources/datasources/graphite.md
View File

@ -55,8 +55,8 @@ To see the raw text of the query that is sent to Graphite, click the **Toggle te
Click **Select metric** to start navigating the metric space. Once you start, you can continue using the mouse or keyboard arrow keys. You can select a wildcard and still continue.
{{< docs-imagebox img="/img/docs/graphite/graphite-query-editor-still.png"
animated-gif="/img/docs/graphite/graphite-query-editor.gif" >}}
{{< figure src="/static/img/docs/graphite/graphite-query-editor-still.png"
animated-gif="/static/img/docs/graphite/graphite-query-editor.gif" >}}
### Functions
@ -65,8 +65,8 @@ a function is selected, it will be added and your focus will be in the text box
- To edit or change a parameter, click on it and it will turn into a text box.
- To delete a function, click the function name followed by the x icon.
{{< docs-imagebox img="/img/docs/graphite/graphite-functions-still.png"
animated-gif="/img/docs/graphite/graphite-functions-demo.gif" >}}
{{< figure src="/static/img/docs/graphite/graphite-functions-still.png"
animated-gif="/static/img/docs/graphite/graphite-functions-demo.gif" >}}
Some functions like aliasByNode support an optional second argument. To add an argument, hover your mouse over the first argument and then click the `+` symbol that appears. To remove the second optional parameter, click on it and leave it blank and the editor will remove it.
@ -141,12 +141,12 @@ For more details, see the [Graphite docs on the autocomplete API for tags](http:
The query you specify in the query field should be a metric find type of query. For example, a query like `prod.servers.*` fills the
variable with all possible values that exist in the wildcard position.
The results contain all possible values occurring only at the last level of the query. To get full metric names matching the query
use expand function (`expand(*.servers.*)`).
The results contain all possible values occurring only at the last level of the query. To get full metric names matching the query
use expand function (`expand(*.servers.*)`).
#### Comparison between expanded and non-expanded metric search results
The expanded query returns the full names of matching metrics. In combination with regex, it can extract any part of the metric name. By contrast, a non-expanded query only returns the last part of the metric name. It does not allow you to extract other parts of metric names.
The expanded query returns the full names of matching metrics. In combination with regex, it can extract any part of the metric name. By contrast, a non-expanded query only returns the last part of the metric name. It does not allow you to extract other parts of metric names.
Here are some example metrics:
- `prod.servers.001.cpu`
@ -190,7 +190,7 @@ tag_values(server, server=~${__searchFilter:regex})
### Variable usage
You can use a variable in a metric node path or as a parameter to a function.
![variable](/img/docs/v2/templated_variable_parameter.png)
![variable](/static/img/docs/v2/templated_variable_parameter.png)
There are two syntaxes:

6
docs/sources/datasources/influxdb/_index.md
View File

@ -19,7 +19,7 @@ To access data source settings, hover your mouse over the **Configuration** (gea
InfluxDB data source options differ depending on which [query language](#query-languages) you select: InfluxQL or Flux.
> **Note:** Though not required, it's a good practice to append the language choice to the data source name. For example:
>
>
- InfluxDB-InfluxQL
- InfluxDB-Flux
@ -74,7 +74,7 @@ To help you choose the best language for your needs, here’s a comparison of [F
Enter edit mode by clicking the panel title and clicking **Edit**. The editor allows you to select metrics and tags.
![InfluxQL query editor](/img/docs/influxdb/influxql-query-editor-7-5.png)
![InfluxQL query editor](/static/img/docs/influxdb/influxql-query-editor-7-5.png)
### Filter data (WHERE)
@ -89,7 +89,7 @@ You can type in regex patterns for metric names or tag filter values. Be sure to
In the `SELECT` row you can specify what fields and functions you want to use. If you have a
group by time you need an aggregation function. Some functions like derivative require an aggregation function. The editor tries to simplify and unify this part of the query. For example:
![](/img/docs/influxdb/select_editor.png)
![](/static/img/docs/influxdb/select_editor.png)
The above generates the following InfluxDB `SELECT` clause:

6
docs/sources/datasources/jaeger.md
View File

@ -33,17 +33,17 @@ This is a configuration for the [trace to logs feature]({{< relref "../explore/t
- **Data source -** Target data source.
- **Tags -** The tags that will be used in the Loki query. Default is `'cluster', 'hostname', 'namespace', 'pod'`.
![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png 'Screenshot of the trace to logs settings')
![Trace to logs settings](/static/img/docs/explore/trace-to-logs-settings-7-4.png 'Screenshot of the trace to logs settings')
## Query traces
You can query and display traces from Jaeger via [Explore]({{< relref "../explore/_index.md" >}}).
{{< docs-imagebox img="/img/docs/explore/jaeger-search-form.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}}
{{< figure src="/static/img/docs/explore/jaeger-search-form.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor" >}}
You can query by trace ID or use the search form to find traces. To query by trace ID, select the TraceID from the Query type selector and insert the ID into the text input.
{{< docs-imagebox img="/img/docs/explore/jaeger-trace-id.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace ID selected" >}}
{{< figure src="/static/img/docs/explore/jaeger-trace-id.png" class="docs-image--no-shadow" caption="Screenshot of the Jaeger query editor with trace ID selected" >}}
To perform a search, set the query type selector to Search, then use the following fields to find traces:

8
docs/sources/datasources/loki.md
View File

@ -43,10 +43,10 @@ Each derived field consists of:
- **Internal link -** Select if the link is internal or external. In case of internal link, a data source selector allows you to select the target data source. Only tracing data sources are supported.
You can use a debug section to see what your fields extract and how the URL is interpolated. Click **Show example log message** to show the text area where you can enter a log message.
{{< docs-imagebox img="/img/docs/v75/loki_derived_fields_settings.png" class="docs-image--no-shadow" max-width="800px" caption="Screenshot of the derived fields debugging" >}}
{{< figure src="/static/img/docs/v75/loki_derived_fields_settings.png" class="docs-image--no-shadow" max-width="800px" caption="Screenshot of the derived fields debugging" >}}
The new field with the link shown in log details:
{{< docs-imagebox img="/img/docs/explore/detected-fields-link-7-4.png" max-width="800px" caption="Detected fields link in Explore" >}}
{{< figure src="/static/img/docs/explore/detected-fields-link-7-4.png" max-width="800px" caption="Detected fields link in Explore" >}}
## Loki query editor
@ -63,10 +63,10 @@ You can use the Loki query editor to create log and metric queries.
With Loki log browser you can easily navigate trough your list of labels and values and construct the query of your choice. Log browser has multi-step selection:
1. Choose the labels you would like to consider for your search.
2. Pick the values for selected labels. Log browser supports facetting and therefore it shows you only possible label combinations.
2. Pick the values for selected labels. Log browser supports facetting and therefore it shows you only possible label combinations.
3. Choose the type of query - logs query or rate metrics query. Additionally, you can also validate selector.
{{< docs-imagebox img="/img/docs/v75/loki_log_browser.png" class="docs-image--no-shadow" max-width="800px" caption="Screenshot of the derived fields debugging" >}}
{{< figure src="/static/img/docs/v75/loki_log_browser.png" class="docs-image--no-shadow" max-width="800px" caption="Screenshot of the derived fields debugging" >}}
## Querying with Loki

16
docs/sources/datasources/mssql.md
View File

@ -69,7 +69,7 @@ If possible, we recommend you to use the latest service pack available for optim
## Query Editor
{{< docs-imagebox img="/img/docs/v51/mssql_query_editor.png" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/v51/mssql_query_editor.png" class="docs-image--no-shadow" >}}
You will find the MSSQL query editor in the metrics tab in Graph, Singlestat or Table panel's edit mode. You enter edit mode by clicking the
panel title, then edit. The editor allows you to define a SQL query to select data to be visualized.
@ -145,7 +145,7 @@ SELECT
Query editor with example query:
{{< docs-imagebox img="/img/docs/v51/mssql_table_query.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/v51/mssql_table_query.png" max-width="500px" class="docs-image--no-shadow" >}}
The query:
@ -164,7 +164,7 @@ FROM
The resulting table panel:
{{< docs-imagebox img="/img/docs/v51/mssql_table_result.png" max-width="1489px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/v51/mssql_table_result.png" max-width="1489px" class="docs-image--no-shadow" >}}
## Time series queries
@ -199,7 +199,7 @@ INSERT metric_values (time, measurement, valueOne, valueTwo) VALUES('2018-03-15
```
{{< docs-imagebox img="/img/docs/v51/mssql_time_series_one.png" class="docs-image--no-shadow docs-image--right" >}}
{{< figure src="/static/img/docs/v51/mssql_time_series_one.png" class="docs-image--no-shadow docs-image--right" >}}
**Example with one `value` and one `metric` column.**
@ -219,7 +219,7 @@ When the above query is used in a graph panel, it will produce two series named
<div class="clearfix"></div>
{{< docs-imagebox img="/img/docs/v51/mssql_time_series_two.png" class="docs-image--no-shadow docs-image--right" >}}
{{< figure src="/static/img/docs/v51/mssql_time_series_two.png" class="docs-image--no-shadow docs-image--right" >}}
**Example with multiple `value` columns:**
@ -239,7 +239,7 @@ When the above query is used in a graph panel, it will produce two series named
<div class="clearfix"></div>
{{< docs-imagebox img="/img/docs/v51/mssql_time_series_three.png" class="docs-image--no-shadow docs-image--right" >}}
{{< figure src="/static/img/docs/v51/mssql_time_series_three.png" class="docs-image--no-shadow docs-image--right" >}}
**Example using the \$\_\_timeGroup macro:**
@ -263,7 +263,7 @@ Any two series lacking a value in a three-minute window will render a line betwe
<div class="clearfix"></div>
{{< docs-imagebox img="/img/docs/v51/mssql_time_series_four.png" class="docs-image--no-shadow docs-image--right" >}}
{{< figure src="/static/img/docs/v51/mssql_time_series_four.png" class="docs-image--no-shadow docs-image--right" >}}
**Example using the \$\_\_timeGroup macro with fill parameter set to zero:**
@ -440,7 +440,7 @@ Please note that any macro function will not work inside a stored procedure.
### Examples
{{< docs-imagebox img="/img/docs/v51/mssql_metrics_graph.png" class="docs-image--no-shadow docs-image--right" >}}
{{< figure src="/static/img/docs/v51/mssql_metrics_graph.png" class="docs-image--no-shadow docs-image--right" >}}
For the following examples, the database table is defined in [Time series queries](#time-series-queries). Let's say that we want to visualize four series in a graph panel, such as all combinations of columns `valueOne`, `valueTwo` and `measurement`. Graph panel to the right visualizes what we want to achieve. To solve this, we need to use two queries:
**First query:**

6
docs/sources/datasources/mysql.md
View File

@ -72,7 +72,7 @@ You can use wildcards (`*`) in place of database or table if you want to grant
> Only available in Grafana v5.4+.
{{< docs-imagebox img="/img/docs/v54/mysql_query_still.png" class="docs-image--no-shadow" animated-gif="/img/docs/v54/mysql_query.gif" >}}
{{< figure src="/static/img/docs/v54/mysql_query_still.png" class="docs-image--no-shadow" animated-gif="/static/img/docs/v54/mysql_query.gif" >}}
You find the MySQL query editor in the metrics tab in a panel's edit mode. You enter edit mode by clicking the
panel title, then edit.
@ -155,7 +155,7 @@ If the `Format as` query option is set to `Table` then you can basically do any
Query editor with example query:
{{< docs-imagebox img="/img/docs/v45/mysql_table_query.png" >}}
{{< figure src="/static/img/docs/v45/mysql_table_query.png" >}}
The query:
@ -173,7 +173,7 @@ You can control the name of the Table panel columns by using regular `as ` SQL c
The resulting table panel:
![](/img/docs/v43/mysql_table.png)
![](/static/img/docs/v43/mysql_table.png)
## Time series queries

2
docs/sources/datasources/opentsdb.md
View File

@ -30,7 +30,7 @@ Open a graph in edit mode by click the title. Query editor will differ if the da
In the former version, only tags can be used to query OpenTSDB. But in the latter version, filters as well as tags
can be used to query opentsdb. Fill Policy is also introduced in OpenTSDB 2.2.
![](/img/docs/v43/opentsdb_query_editor.png)
![](/static/img/docs/v43/opentsdb_query_editor.png)
> **Note:** While using OpenTSDB 2.2 data source, make sure you use either Filters or Tags as they are mutually exclusive. If used together, might give you weird results.

10
docs/sources/datasources/postgres.md
View File

@ -22,7 +22,7 @@ Name | Description
`Database` | Name of your PostgreSQL database.
`User` | Database user's login/username
`Password` | Database user's password
`SSL Mode` | Determines whether or with what priority a secure SSL TCP/IP connection will be negotiated with the server. When SSL Mode is disabled, SSL Method and Auth Details would not be visible.
`SSL Mode` | Determines whether or with what priority a secure SSL TCP/IP connection will be negotiated with the server. When SSL Mode is disabled, SSL Method and Auth Details would not be visible.
`SSL Auth Details Method` | Determines whether the SSL Auth details will be configured as a file path or file content. Grafana v7.5+
`SSL Auth Details Value` | File path or file content of SSL root certificate, client certificate and client key
`Max open` | The maximum number of open connections to the database, default `unlimited` (Grafana v5.4+).
@ -68,7 +68,7 @@ Make sure the user does not get any unwanted privileges from the public role.
## Query editor
{{< docs-imagebox img="/img/docs/v53/postgres_query_still.png" class="docs-image--no-shadow" animated-gif="/img/docs/v53/postgres_query.gif" >}}
{{< figure src="/static/img/docs/v53/postgres_query_still.png" class="docs-image--no-shadow" animated-gif="/static/img/docs/v53/postgres_query.gif" >}}
You find the PostgreSQL query editor in the metrics tab in Graph or Singlestat panel's edit mode. You enter edit mode by clicking the
panel title, then edit.
@ -98,7 +98,7 @@ The available functions in the query editor depend on the PostgreSQL version you
If you use aggregate functions you need to group your resultset. The editor will automatically add a `GROUP BY time` if you add an aggregate function.
The editor tries to simplify and unify this part of the query. For example:<br>
![](/img/docs/v53/postgres_select_editor.png)<br>
![](/static/img/docs/v53/postgres_select_editor.png)<br>
The above will generate the following PostgreSQL `SELECT` clause:
@ -160,7 +160,7 @@ If the `Format as` query option is set to `Table` then you can basically do any
Query editor with example query:
![](/img/docs/v46/postgres_table_query.png)
![](/static/img/docs/v46/postgres_table_query.png)
The query:
@ -179,7 +179,7 @@ You can control the name of the Table panel columns by using regular `as ` SQL c
The resulting table panel:
![postgres table](/img/docs/v46/postgres_table.png)
![postgres table](/static/img/docs/v46/postgres_table.png)
## Time series queries

10
docs/sources/datasources/prometheus.md
View File

@ -23,7 +23,7 @@ To access Prometheus settings, hover your mouse over the **Configuration** (gear
| `Basic Auth` | Enable basic authentication to the Prometheus data source. |
| `User` | User name for basic authentication. |
| `Password` | Password for basic authentication. |
| `Scrape interval` | Set this to the typical scrape and evaluation interval configured in Prometheus. Defaults to 15s.
| `Scrape interval` | Set this to the typical scrape and evaluation interval configured in Prometheus. Defaults to 15s.
| `HTTP method` | Use either POST or GET HTTP method to query your data source. POST is the recommended and pre-selected method as it allows bigger queries. Change this to GET if you have a Prometheus version older than 2.1 or if POST requests are restricted in your network. |
| `Disable metrics lookup` | Checking this option will disable the metrics chooser and metric/label support in the query field's autocomplete. This helps if you have performance issues with bigger Prometheus instances. |
| `Custom Query Parameters` | Add custom parameters to the Prometheus query URL. For example `timeout`, `partial_response`, `dedup`, or `max_source_resolution`. Multiple parameters should be concatenated together with an '&amp;'. |
@ -39,8 +39,8 @@ Below you can find information and options for Prometheus query editor in dashbo
Open a graph in edit mode by clicking the title > Edit (or by pressing `e` key while hovering over panel).
{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png"
animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}}
{{< figure src="/static/img/docs/v45/prometheus_query_editor_still.png"
animated-gif="/static/img/docs/v45/prometheus_query_editor.gif" >}}
| Name | Description |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@ -218,7 +218,7 @@ If you are running Grafana in an Amazon EKS cluster, follow the AWS guide to [Qu
Grafana 7.4 and later versions have the capability to show exemplars data alongside a metric both in Explore and Dashboards.
Exemplars are a way to associate higher cardinality metadata from a specific event with traditional timeseries data.
{{< docs-imagebox img="/img/docs/v74/exemplars.png" class="docs-image--no-shadow" caption="Screenshot showing the detail window of an Exemplar" >}}
{{< figure src="/static/img/docs/v74/exemplars.png" class="docs-image--no-shadow" caption="Screenshot showing the detail window of an Exemplar" >}}
Configure Exemplars in the data source settings by adding external or internal links.
{{< docs-imagebox img="/img/docs/v74/exemplars-setting.png" class="docs-image--no-shadow" caption="Screenshot of the Exemplars configuration" >}}
{{< figure src="/static/img/docs/v74/exemplars-setting.png" class="docs-image--no-shadow" caption="Screenshot of the Exemplars configuration" >}}

4
docs/sources/datasources/tempo.md
View File

@ -32,14 +32,14 @@ This is a configuration for the [trace to logs feature]({{< relref "../explore/t
- **Data source -** Target data source.
- **Tags -** The tags that will be used in the Loki query. Default is `'cluster', 'hostname', 'namespace', 'pod'`.
![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png 'Screenshot of the trace to logs settings')
![Trace to logs settings](/static/img/docs/explore/trace-to-logs-settings-7-4.png 'Screenshot of the trace to logs settings')
## Query traces
You can query and display traces from Tempo via [Explore]({{< relref "../explore/_index.md" >}}).
To query a particular trace, insert its trace ID into the query text input.
{{< docs-imagebox img="/img/docs/v73/tempo-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Tempo query editor" >}}
{{< figure src="/static/img/docs/v73/tempo-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Tempo query editor" >}}
## Linking Trace ID from logs

4
docs/sources/datasources/testdata.md
View File

@ -24,14 +24,14 @@ The `TestData DB` data source is not enabled by default. To enable it:
Once `TestData DB` is enabled, you can use it as a data source in any metric panel.
![](/img/docs/v41/test_data_add.png)
![](/static/img/docs/v41/test_data_add.png)
## CSV
The comma separated values scenario is the most powerful one since it lets you create any kind of graph you like.
Once you provided the numbers, `TestData DB` distributes them evenly based on the time range of your query.
![](/img/docs/v41/test_data_csv_example.png)
![](/static/img/docs/v41/test_data_csv_example.png)
## Dashboards

6
docs/sources/datasources/zipkin.md
View File

@ -33,17 +33,17 @@ This is a configuration for the [trace to logs feature]({{< relref "../explore/t
- **Data source -** Target data source.
- **Tags -** The tags that will be used in the Loki query. Default is `'cluster', 'hostname', 'namespace', 'pod'`.
![Trace to logs settings](/img/docs/explore/trace-to-logs-settings-7-4.png "Screenshot of the trace to logs settings")
![Trace to logs settings](/static/img/docs/explore/trace-to-logs-settings-7-4.png "Screenshot of the trace to logs settings")
## Query traces
Querying and displaying traces from Zipkin is available via [Explore]({{< relref "../explore" >}}).
{{< docs-imagebox img="/img/docs/v70/zipkin-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Zipkin query editor" >}}
{{< figure src="/static/img/docs/v70/zipkin-query-editor.png" class="docs-image--no-shadow" caption="Screenshot of the Zipkin query editor" >}}
The Zipkin query editor allows you to query by trace ID directly or selecting a trace from trace selector. To query by trace ID, insert the ID into the text input.
{{< docs-imagebox img="/img/docs/v70/zipkin-query-editor-open.png" class="docs-image--no-shadow" caption="Screenshot of the Zipkin query editor with trace selector expanded" >}}
{{< figure src="/static/img/docs/v70/zipkin-query-editor-open.png" class="docs-image--no-shadow" caption="Screenshot of the Zipkin query editor with trace selector expanded" >}}
Use the trace selector to pick particular trace from all traces logged in the time range you have selected in Explore. The trace selector has three levels of nesting:

2
docs/sources/developers/plugins/error-handling.md
View File

@ -31,7 +31,7 @@ throw new Error('An error occurred');
Grafana displays the error message in the top-left corner of the panel.
{{< docs-imagebox img="/img/docs/panel_error.png" class="docs-image--no-shadow" max-width="850px" >}}
{{< figure src="/static/img/docs/panel_error.png" class="docs-image--no-shadow" max-width="850px" >}}
Avoid displaying overly-technical error messages to the user. If you want to let technical users report an error, consider logging it instead.

4
docs/sources/developers/plugins/legacy/apps.md
View File

@ -10,7 +10,7 @@ App plugins are Grafana plugins that can bundle data source and panel plugins wi
Data source and panel plugins will show up like normal plugins. The app pages will be available in the main menu.
{{< imgbox img="/img/docs/v3/app-in-main-menu.png" caption="App in Main Menu" >}}
{{< figure class="float-right" src="/static/img/docs/v3/app-in-main-menu.png" caption="App in Main Menu" >}}
## Enabling app plugins
@ -45,7 +45,7 @@ ConfigCtrl.templateUrl = 'components/config/config.html';
If possible, a link to a dashboard or custom page should be shown after enabling the app to guide the user to the appropriate place.
{{< imgbox img="/img/docs/app_plugin_after_enable.png" caption="After enabling" >}}
{{< figure class="float-right" src="/static/img/docs/app_plugin_after_enable.png" caption="After enabling" >}}
### Develop your own App

2
docs/sources/developers/plugins/legacy/defaults-and-editor-mode.md
View File

@ -96,7 +96,7 @@ Then each pair, label and field is wrapped in a div with a gf-form class.
Note that there are some Angular attributes here. *ng-model* will update the panel data. *ng-change* will render the panel when you change the value. This change will occur on the onblur event due to the *ng-model-onblur* attribute. This means you can see the effect of your changes on the panel while editing.
{{< imgbox img="/assets/img/blog/clock-panel-editor.png" caption="Panel Editor" >}}
{{< figure class="float-right" src="/assets/img/blog/clock-panel-editor.png" caption="Panel Editor" >}}
On the editor tab we use a drop down for 12/24 hour clock, an input field for font size and a color picker for the background color.

6
docs/sources/developers/plugins/legacy/snapshot-mode.md
View File

@ -5,11 +5,11 @@ aliases = ["/docs/grafana/latest/plugins/developing/snapshot-mode/"]
# Legacy snapshot mode
{{< imgbox img="/img/docs/Grafana-snapshot-example.png" caption="A dashboard using snapshot data and not live data." >}}
{{< figure class="float-right" src="/static/img/docs/Grafana-snapshot-example.png" caption="A dashboard using snapshot data and not live data." >}}
Grafana has this great feature where you can [save a snapshot of your dashboard]({{< relref "../../../dashboards/json-model.md" >}}). Instead of sending a screenshot of a dashboard to someone, you can send them a working, interactive Grafana dashboard with the snapshot data embedded inside it. The snapshot can be saved on your Grafana server and is available to all your co-workers. Raintank also hosts a [snapshot server](http://snapshot.raintank.io/) if you want to send the snapshot to someone who does not have access to your Grafana server.
{{< imgbox img="/img/docs/animated_gifs/snapshots.gif" caption="Selecting a snapshot" >}}
{{< figure class="float-right" src="/static/img/docs/animated_gifs/snapshots.gif" caption="Selecting a snapshot" >}}
This all works because Grafana saves a snapshot of the current data in the dashboard json instead of fetching the data from a data source. However, if you are building a custom panel plugin then this will not work straight out of the box. You will need to make some small (and easy!) changes first.
@ -41,7 +41,7 @@ This will cover most use cases for snapshot support. Sometimes you will want to
Data that is not time series data from a Grafana data source is not saved automatically by Grafana. Saving custom data for snapshot mode has to be done manually.
{{< imgbox img="/img/docs/Grafana-save-snapshot.png" caption="Save snapshot" >}}
{{< figure class="float-right" src="/static/img/docs/Grafana-save-snapshot.png" caption="Save snapshot" >}}
Grafana gives us a chance to save data to the dashboard json when it is creating a snapshot. In the 'data-received' event handler, you can check the snapshot flag on the dashboard object. If this is true, then Grafana is creating a snapshot and you can manually save custom data to the panel json. In the example, a new field called snapshotLocationData in the panel json is initialized with a snapshot of the custom data.

6
docs/sources/enterprise/datasource_permissions.md
View File

@ -13,7 +13,7 @@ Data source permissions allow you to restrict access for users to query a data s
## Enable data source permissions
{{< docs-imagebox img="/img/docs/enterprise/datasource_permissions_enable_still.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" animated-gif="/img/docs/enterprise/datasource_permissions_enable.gif" >}}
{{< figure src="/static/img/docs/enterprise/datasource_permissions_enable_still.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" animated-gif="/static/img/docs/enterprise/datasource_permissions_enable.gif" >}}
By default, data sources in an organization can be queried by any user in that organization. For example, a user with the `Viewer` role can issue any possible query to a data source, not just
queries that exist on dashboards they have access to.
@ -32,7 +32,7 @@ When permissions are enabled for a data source in an organization, you restrict
## Allow users and teams to query a data source
{{< docs-imagebox img="/img/docs/enterprise/datasource_permissions_add_still.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" animated-gif="/img/docs/enterprise/datasource_permissions_add.gif" >}}
{{< figure src="/static/img/docs/enterprise/datasource_permissions_add_still.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" animated-gif="/static/img/docs/enterprise/datasource_permissions_add.gif" >}}
After you have enabled permissions for a data source you can assign query permissions to users and teams which will allow access to query the data source.
@ -48,7 +48,7 @@ After you have enabled permissions for a data source you can assign query permis
## Disable data source permissions
{{< docs-imagebox img="/img/docs/enterprise/datasource_permissions_disable_still.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" animated-gif="/img/docs/enterprise/datasource_permissions_disable.gif" >}}
{{< figure src="/static/img/docs/enterprise/datasource_permissions_disable_still.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" animated-gif="/static/img/docs/enterprise/datasource_permissions_disable.gif" >}}
If you have enabled permissions for a data source and want to return data source permissions to the default, then you can disable permissions with a click of a button.

2
docs/sources/enterprise/enhanced_ldap.md
View File

@ -13,7 +13,7 @@ The enhanced LDAP integration adds additional functionality on top of the [LDAP
## LDAP group synchronization for teams
{{< docs-imagebox img="/img/docs/enterprise/team_members_ldap.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
{{< figure src="/static/img/docs/enterprise/team_members_ldap.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
With enhanced LDAP integration, you can set up synchronization between LDAP groups and teams. This enables LDAP users that are members
of certain LDAP groups to automatically be added or removed as members to certain teams in Grafana.

22
docs/sources/enterprise/reporting.md
View File

@ -11,11 +11,11 @@ weight = 800
Reporting allows you to automatically generate PDFs from any of your dashboards and have Grafana email them to interested parties on a schedule.
> Only available in Grafana Enterprise v6.4+.
> If you have [Fine-grained access Control]({{< relref "../enterprise/access-control/_index.md" >}}) enabled, for some actions you would need to have relevant permissions.
Refer to specific guides to understand what permissions are required.
{{< docs-imagebox img="/img/docs/enterprise/reports_list.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/reports_list.png" max-width="500px" class="docs-image--no-shadow" >}}
Any changes you make to a dashboard used in a report are reflected the next time the report is sent. For example, if you change the time range in the dashboard, then the time range in the report changes as well.
@ -39,7 +39,7 @@ Only organization admins can create reports by default. You can customize who ca
- **Recipients -** Enter the emails of the people or teams that you want to receive the report, separated by semicolons.
- **Reply to -** (optional) The address that will appear in the **Reply to** field of the email.
- **Message -** (optional) Message body in the email with the report.
- **Link back to the source dashboard -** Include a link to the dashboard from within the report email.
- **Link back to the source dashboard -** Include a link to the dashboard from within the report email.
- **Time range -** (optional) Use custom time range for the report. For more information check [Report time range]({{< relref "#report-time-range" >}}).
1. **Preview PDF** to make sure the report appears as you expect. Update if necessary.
1. Enter scheduling information. Options vary depending on the frequency you select.
@ -48,7 +48,7 @@ Only organization admins can create reports by default. You can customize who ca
1. **Save** the report.
1. **Send test email** to verify that the whole configuration is working as expected.
{{< docs-imagebox img="/img/docs/enterprise/reports-create-new-8.0.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/reports-create-new-8.0.png" max-width="500px" class="docs-image--no-shadow" >}}
### Layout and orientation
@ -56,10 +56,10 @@ Only organization admins can create reports by default. You can customize who ca
Layout | Orientation | Support | Description | Preview
------ | ----------- | ------- | ----------- | -------
Simple | Portrait | v6.4+ | Generates an A4 page in portrait mode with three panels per page. | {{< docs-imagebox img="/img/docs/enterprise/reports_portrait_preview.png" max-width="500px" max-height="500px" class="docs-image--no-shadow" >}}
Simple | Landscape | v6.7+ | Generates an A4 page in landscape mode with a single panel per page. | {{< docs-imagebox img="/img/docs/enterprise/reports_landscape_preview.png" max-width="500px" class="docs-image--no-shadow" >}}
Grid | Portrait | v7.2+ | Generates an A4 page in portrait mode with panels arranged in the same way as at the original dashboard. | {{< docs-imagebox img="/img/docs/enterprise/reports_grid_portrait_preview.png" max-width="500px" max-height="500px" class="docs-image--no-shadow" >}}
Grid | Landscape | v7.2+ | Generates an A4 page in landscape mode with panels arranged in the same way as at the original dashboard. | {{< docs-imagebox img="/img/docs/enterprise/reports_grid_landscape_preview.png" max-width="500px" class="docs-image--no-shadow" >}}
Simple | Portrait | v6.4+ | Generates an A4 page in portrait mode with three panels per page. | {{< figure src="/static/img/docs/enterprise/reports_portrait_preview.png" max-width="500px" max-height="500px" class="docs-image--no-shadow" >}}
Simple | Landscape | v6.7+ | Generates an A4 page in landscape mode with a single panel per page. | {{< figure src="/static/img/docs/enterprise/reports_landscape_preview.png" max-width="500px" class="docs-image--no-shadow" >}}
Grid | Portrait | v7.2+ | Generates an A4 page in portrait mode with panels arranged in the same way as at the original dashboard. | {{< figure src="/static/img/docs/enterprise/reports_grid_portrait_preview.png" max-width="500px" max-height="500px" class="docs-image--no-shadow" >}}
Grid | Landscape | v7.2+ | Generates an A4 page in landscape mode with panels arranged in the same way as at the original dashboard. | {{< figure src="/static/img/docs/enterprise/reports_grid_landscape_preview.png" max-width="500px" class="docs-image--no-shadow" >}}
### Scheduling
@ -116,7 +116,7 @@ If you want to use email addresses from the report, then select the **Use emails
The last saved version of the report will be sent to selected emails. You can use this to verify emails are working and to make sure the report is generated and displayed as you expect.
{{< docs-imagebox img="/img/docs/enterprise/reports_send_test_mail.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/reports_send_test_mail.png" max-width="500px" class="docs-image--no-shadow" >}}
## Send report via the API
@ -167,7 +167,7 @@ If the time zone is set differently between your Grafana server and its remote i
> ** Note:** Available in Grafana Enterprise version 7.5+ (behind `reportVariables` feature flag).
You can configure report-specific template variables for the dashboard on the report page. The variables that you select will override the variables from the dashboard, and they are used when rendering a PDF file of the report. For detailed information about using template variables, refer to the [Templates and variables]({{< relref "../variables/_index.md" >}}) section.
You can configure report-specific template variables for the dashboard on the report page. The variables that you select will override the variables from the dashboard, and they are used when rendering a PDF file of the report. For detailed information about using template variables, refer to the [Templates and variables]({{< relref "../variables/_index.md" >}}) section.
## Reports settings
@ -186,7 +186,7 @@ Email branding:
- **Footer link text** - Text for the link in the report email footer. Defaults to "Grafana".
- **Footer link URL** - Link for the report email footer.
{{< docs-imagebox img="/img/docs/enterprise/reports_settings.png" max-width="500px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/reports_settings.png" max-width="500px" class="docs-image--no-shadow" >}}
## Troubleshoot reporting

4
docs/sources/enterprise/team-sync.md
View File

@ -8,7 +8,7 @@ weight = 1000
# Team sync
{{< docs-imagebox img="/img/docs/enterprise/team_members_ldap.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
{{< figure src="/static/img/docs/enterprise/team_members_ldap.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
Team sync lets you set up synchronization between your auth providers teams and teams in Grafana. This enables LDAP, OAuth, or SAML users who are members of certain teams or groups to automatically be added or removed as members of certain teams in Grafana.
@ -35,7 +35,7 @@ This mechanism allows Grafana to remove an existing synchronized user from a tea
If you have already grouped some users into a team, then you can synchronize that team with an external group.
{{< docs-imagebox img="/img/docs/enterprise/team_add_external_group.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
{{< figure src="/static/img/docs/enterprise/team_add_external_group.png" class="docs-image--no-shadow docs-image--right" max-width= "600px" >}}
1. In Grafana, navigate to **Configuration > Teams**.
1. Select a team.

8
docs/sources/enterprise/usage-insights/dashboard-datasource-insights.md
View File

@ -16,14 +16,14 @@ For every dashboard and data source, you can access usage information.
To see dashboard usage information, go to the top bar and click **Dashboard insights**.
{{< docs-imagebox img="/img/docs/enterprise/dashboard_insights_button.png" max-width="400px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/dashboard_insights_button.png" max-width="400px" class="docs-image--no-shadow" >}}
Dashboard insights show the following information:
- **Stats:** The number of daily queries and errors for the past 30 days.
- **Users & activity:** The daily view count for the last 30 days; last activities on the dashboard and recent users (with a limit of 20).
{{< docs-imagebox img="/img/docs/enterprise/dashboard_insights_stats.png" max-width="400px" class="docs-image--no-shadow" >}}{{< docs-imagebox img="/img/docs/enterprise/dashboard_insights_users.png" max-width="400px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/dashboard_insights_stats.png" max-width="400px" class="docs-image--no-shadow" >}}{{< figure src="/static/img/docs/enterprise/dashboard_insights_users.png" max-width="400px" class="docs-image--no-shadow" >}}
## Data source insights
@ -34,10 +34,10 @@ Data source insights give you information about how a data source has been used
- Queries per day
- Errors per day
- Query load time per day (averaged in ms)
To find data source insights:
1. Go to the Data source list view.
1. Click on a data source.
1. Click the **Insights** tab.
{{< docs-imagebox img="/img/docs/enterprise/datasource_insights.png" max-width="650px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/datasource_insights.png" max-width="650px" class="docs-image--no-shadow" >}}

2
docs/sources/enterprise/usage-insights/improved-search.md
View File

@ -18,4 +18,4 @@ There are several sort options:
- Views total
- Views 30 days
{{< docs-imagebox img="/img/docs/enterprise/improved-search-7-5.png" max-width="650px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/improved-search-7-5.png" max-width="650px" class="docs-image--no-shadow" >}}

2
docs/sources/enterprise/usage-insights/presence-indicator.md
View File

@ -14,7 +14,7 @@ When you are signed in and looking at any given dashboard, you can know who is l
When there are more active users on a dashboard than can fit within the presence indicator, click the **+X** icon. Doing so opens [dashboard insights]({{< relref "dashboard-datasource-insights.md" >}}), which contains more details about recent user activity.
{{< docs-imagebox img="/img/docs/enterprise/presence_indicators.png" max-width="400px" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/enterprise/presence_indicators.png" max-width="400px" class="docs-image--no-shadow" >}}
To change _recent_ to something other than the past 10 minutes, edit the [configuration]({{< relref "../../administration/configuration.md">}}) file:

2
docs/sources/enterprise/white-labeling.md
View File

@ -28,7 +28,7 @@ You can change the following elements:
> You will have to host your logo and other images used by the white labeling feature separately. Make sure Grafana can access the URL where the assets are stored.
{{< docs-imagebox img="/img/docs/v66/whitelabeling_1.png" max-width="800px" caption="White labeling example" >}}
{{< figure src="/static/img/docs/v66/whitelabeling_1.png" max-width="800px" caption="White labeling example" >}}
The configuration file in Grafana Enterprise contains the following options. Each option is defined in the file. For more information about configuring Grafana, refer to [Configuration]({{< relref "../administration/configuration.md">}}).

8
docs/sources/explore/_index.md
View File

@ -24,13 +24,13 @@ To access Explore:
1. Click on the Explore icon on the menu bar.
{{< docs-imagebox img="/img/docs/explore/access-explore-7-4.png" max-width= "650px" caption="Screenshot of the new Explore Icon" >}}
{{< figure src="/static/img/docs/explore/access-explore-7-4.png" max-width= "650px" caption="Screenshot of the new Explore Icon" >}}
An empty Explore tab opens.
Alternately to start with an existing query in a panel, choose the Explore option from the Panel menu. This opens an Explore tab with the query from the panel and allows you to tweak or iterate in the query outside of your dashboard.
{{< docs-imagebox img="/img/docs/explore/panel_dropdown-7-4.png" class="docs-image--no-shadow" max-width= "650px" caption="Screenshot of the new Explore option in the panel menu" >}}
{{< figure src="/static/img/docs/explore/panel_dropdown-7-4.png" class="docs-image--no-shadow" max-width= "650px" caption="Screenshot of the new Explore option in the panel menu" >}}
1. Choose your data source from the dropdown in the top left. [Prometheus](https://grafana.com/oss/prometheus/) has a custom Explore implementation, the other data sources use their standard query editor.
1. In the query field, write your query to explore your data. There are three buttons beside the query field, a clear button (X), an add query button (+) and the remove query button (-). Just like the normal query editor, you can add and remove multiple queries.
@ -45,7 +45,7 @@ To open the split view:
It is possible to select another data source for the new query which for example, allows you to compare the same query for two different servers or to compare the staging environment to the production environment.
{{< docs-imagebox img="/img/docs/explore/explore_split-7-4.png" max-width= "950px" caption="Screenshot of Explore option in the panel menu" >}}
{{< figure src="/static/img/docs/explore/explore_split-7-4.png" max-width= "950px" caption="Screenshot of Explore option in the panel menu" >}}
In split view, timepickers for both panels can be linked (if you change one, the other gets changed as well) by clicking on one of the time-sync buttons attached to the timepickers. Linking of timepickers helps with keeping the start and the end times of the split view queries in sync. It ensures that you’re looking at the same time interval in both split panels.
@ -57,7 +57,7 @@ To help accelerate workflows that involve regularly switching from Explore to a
After you've navigated to Explore, you should notice a "Back" button in the Explore toolbar. Simply click it to return to the origin dashboard. To bring changes you make in Explore back to the dashboard, click the arrow next to the button to reveal a "Return to panel with changes" menu item.
{{< docs-imagebox img="/img/docs/explore/explore_return_dropdown-7-4.png" class="docs-image--no-shadow" max-width= "400px" caption="Screenshot of the expanded explore return dropdown" >}}
{{< figure src="/static/img/docs/explore/explore_return_dropdown-7-4.png" class="docs-image--no-shadow" max-width= "400px" caption="Screenshot of the expanded explore return dropdown" >}}
## Share shortened link

8
docs/sources/explore/logs-integration.md
View File

@ -53,7 +53,7 @@ For logs where a **level** label is specified, we use the value of the label to
Logs navigation next to the log lines can be used to request more logs. You can do this by clicking on Older logs button on the bottom of navigation. This is especially useful when you hit the line limit and you want to see more logs. Each request that is run from the navigation is then displayed in the navigation as separate page. Every page is showing from and to timestamp of the incoming log lines. You can re-rerun the same request by clicking on the page.
![Navigate logs in Explore](/img/docs/explore/navigate-logs-8-0.png)
![Navigate logs in Explore](/static/img/docs/explore/navigate-logs-8-0.png)
### Visualization options
@ -90,7 +90,7 @@ Each log row has an extendable area with its labels and detected fields, for mor
#### Derived fields links
By using Derived fields, you can turn any part of a log message into an internal or external link. The created link is visible as a button next to the Detected field in the Log details view.
{{< docs-imagebox img="/img/docs/explore/detected-fields-link-7-4.png" max-width="800px" caption="Detected fields link in Explore" >}}
{{< figure src="/static/img/docs/explore/detected-fields-link-7-4.png" max-width="800px" caption="Detected fields link in Explore" >}}
#### Toggle detected fields
@ -98,7 +98,7 @@ By using Derived fields, you can turn any part of a log message into an internal
If your logs are structured in `json` or `logfmt`, then you can show or hide detected fields. Expand a log line and then click the eye icon to show or hide fields.
{{< docs-imagebox img="/img/docs/explore/parsed-fields-7-2.gif" max-width="800px" caption="Toggling detected fields in Explore" >}}
{{< figure src="/static/img/docs/explore/parsed-fields-7-2.gif" max-width="800px" caption="Toggling detected fields in Explore" >}}
### Loki-specific features
@ -126,4 +126,4 @@ Click the **Live** button in the Explore toolbar to switch to Live tail view.
While in Live tail view new logs will come from the bottom of the screen and will have fading contrasting background so you can keep track of what is new. Click the **Pause** button or scroll the logs view to pause the Live tailing and explore previous logs without interruption. Click **Resume** button to resume the Live tailing or click **Stop** button to exit Live tailing and go back to standard Explore view.
{{< docs-imagebox img="/img/docs/v64/explore_live_tailing.gif" class="docs-image--no-shadow" caption="Explore Live tailing in action" >}}
{{< figure src="/static/img/docs/v64/explore_live_tailing.gif" class="docs-image--no-shadow" caption="Explore Live tailing in action" >}}

4
docs/sources/explore/query-management.md
View File

@ -10,7 +10,7 @@ To help with debugging queries, Explore allows you to investigate query requests
This functionality is similar to the panel inspector [Stats tab]({{< relref "../panels/inspect-panel.md#inspect-query-performance" >}}) and
[Query tab]({{< relref "../panels/inspect-panel.md##view-raw-request-and-response-to-data-source" >}}).
{{< docs-imagebox img="/img/docs/v71/query_inspector_explore.png" class="docs-image--no-shadow" max-width= "550px" caption="Screenshot of the query inspector button in Explore" >}}
{{< figure src="/static/img/docs/v71/query_inspector_explore.png" class="docs-image--no-shadow" max-width= "550px" caption="Screenshot of the query inspector button in Explore" >}}
## Query history
@ -86,7 +86,7 @@ The first version of Explore features a custom querying experience for Prometheu
On the left side of the query field, click **Metrics** to open the Metric Explorer. This shows a hierarchical menu with metrics grouped by their prefix. For example, all Alertmanager metrics are grouped under the `alertmanager` prefix. This is a good starting point if you just want to explore which metrics are available.
{{< docs-imagebox img="/img/docs/v65/explore_metric_explorer.png" class="docs-image--no-shadow" max-width= "800px" caption="Screenshot of the new Explore option in the panel menu" >}}
{{< figure src="/static/img/docs/v65/explore_metric_explorer.png" class="docs-image--no-shadow" max-width= "800px" caption="Screenshot of the new Explore option in the panel menu" >}}
### Query field

16
docs/sources/explore/trace-integration.md
View File

@ -18,11 +18,11 @@ Supported data sources are:
For information on how to configure queries for the data sources listed above, refer to the documentation for specific data source.
{{< docs-imagebox img="/img/docs/v70/explore-trace-view-full.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
{{< figure src="/static/img/docs/v70/explore-trace-view-full.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view" >}}
##### Header
{{< docs-imagebox img="/img/docs/v70/explore-trace-view-header.png" class="docs-image--no-shadow" max-width= "750px" caption="Screenshot of the trace view header" >}}
{{< figure src="/static/img/docs/v70/explore-trace-view-header.png" class="docs-image--no-shadow" max-width= "750px" caption="Screenshot of the trace view header" >}}
- Header title: Shows the name of the root span and trace ID.
- Search: Highlights spans containing the searched text.
@ -30,13 +30,13 @@ For information on how to configure queries for the data sources listed above, r
##### Minimap
{{< docs-imagebox img="/img/docs/v70/explore-trace-view-minimap.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view minimap" >}}
{{< figure src="/static/img/docs/v70/explore-trace-view-minimap.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view minimap" >}}
Shows condensed view or the trace timeline. Drag your mouse over the minimap to zoom into smaller time range. Zooming will also update the main timeline, so it is easy to see shorter spans. Hovering over the minimap, when zoomed, will show Reset Selection button which resets the zoom.
##### Timeline
{{< docs-imagebox img="/img/docs/v70/explore-trace-view-timeline.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view timeline" >}}
{{< figure src="/static/img/docs/v70/explore-trace-view-timeline.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view timeline" >}}
Shows list of spans within the trace. Each span row consists of these components:
@ -49,7 +49,7 @@ Clicking anywhere on the span row shows span details.
##### Span details
{{< docs-imagebox img="/img/docs/v70/explore-trace-view-span-details.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view span details" >}}
{{< figure src="/static/img/docs/v70/explore-trace-view-span-details.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the trace view span details" >}}
- Operation name
- Span metadata
@ -63,7 +63,7 @@ Clicking anywhere on the span row shows span details.
You can navigate from a span in a trace view directly to logs relevant for that span. This is available for Tempo, Jaeger and Zipkin data source at this moment. their relevant documentation for instruction how to configure this feature.
{{< docs-imagebox img="/img/docs/explore/trace-to-log-7-4.png" class="docs-image--no-shadow" max-width= "600px" caption="Screenshot of the trace view in Explore with icon next to the spans" >}}
{{< figure src="/static/img/docs/explore/trace-to-log-7-4.png" class="docs-image--no-shadow" max-width= "600px" caption="Screenshot of the trace view in Explore with icon next to the spans" >}}
Click the document icon to open a split view in Explore with the configured data source and query relevant logs for the span.
@ -77,7 +77,7 @@ Data source needs to return data frame and set `frame.meta.preferredVisualisatio
Required fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| traceID | string | Identifier for the entire trace. There should be only one trace in the data frame. |
| spanID | string | Identifier for the current span. SpanIDs should be unique per trace. |
@ -89,7 +89,7 @@ Required fields:
Optional fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| logs | TraceLog[] | List of logs associated with the current span. |
| tags | TraceKeyValuePair[] | List of tags associated with the current span. |

12
docs/sources/getting-started/getting-started-influxdb.md
View File

@ -65,7 +65,7 @@ This step varies depending on the query language that you selected when you set
In the query editor, click **select measurement**.
![InfluxQL query](/img/docs/influxdb/influxql-query-7-5.png)
![InfluxQL query](/static/img/docs/influxdb/influxql-query-7-5.png)
Grafana displays a list of possible series. Click one to select it, and Grafana graphs any available data. If there is no data to display, then try another selection or check your data source.
@ -80,19 +80,19 @@ Create a simple Flux query.
This generic query returns a list of buckets.
![Flux query](/img/docs/influxdb/flux-query-7-5.png)
![Flux query](/static/img/docs/influxdb/flux-query-7-5.png)
You can also create Flux queries in the InfluxDB Explore view.
1. In your browser, log in to the InfluxDB native UI (OSS is typically something like http://localhost:8086 or for InfluxDB Cloud use: https://cloud2.influxdata.com).
1. Click **Explore** to open the Data Explorer.
1. The InfluxDB Data Explorer provides two mechanisms for creating Flux queries: a graphical query editor and a script editor. Using the graphical query editor, [create a query](https://docs.influxdata.com/influxdb/cloud/query-data/execute-queries/data-explorer/). It will look something like this:
![InfluxDB Explore query](/img/docs/influxdb/influx-explore-query-7-5.png)
![InfluxDB Explore query](/static/img/docs/influxdb/influx-explore-query-7-5.png)
1. Click **Script Editor** to view the text of the query, and then copy all the lines of your Flux code, which will look something like this:
![InfluxDB Explore Script Editor](/img/docs/influxdb/explore-query-text-7-5.png)
![InfluxDB Explore Script Editor](/static/img/docs/influxdb/explore-query-text-7-5.png)
1. In Grafana, [add a panel](../panels/add-a-panel.md) and then paste your Flux code into the query editor.
1. Click **Apply**. Your new panel should be visible with data from your Flux query.

2
docs/sources/getting-started/getting-started-prometheus.md
View File

@ -61,4 +61,4 @@ Now that you have a curated list of queries, create [dashboards]({{< relref "../
The following image shows a dashboard with three panels showing some system metrics.
<img width="850px" src="/img/docs/getting-started/simple_grafana_prom_dashboard.png" caption="Prometheus dashboards" >
<img width="850px" src="/static/img/docs/getting-started/simple_grafana_prom_dashboard.png" caption="Prometheus dashboards" >

8
docs/sources/getting-started/getting-started-sql.md
View File

@ -30,18 +30,18 @@ To add MS SQL Server data source:
1. Filter by `mssql` and select the **Microsoft SQL Server** option.
1. Click **Add data source** in the top right header to open the configuration page.
1. Enter the information specified in the table below, then click **Save & Test**.
Name | Description
------------ | -------------
`Name` | The data source name. This is how you refer to the data source in panels and queries.
`Host` | The IP address/hostname and optional port of your MS SQL instance. If port is omitted, the default 1433 will be used.
`Database` | Name of your MS SQL database.
`User` | Database user's login/username.
`Password` | Database user's password.
`Password` | Database user's password.
For installations from the [grafana/grafana](https://github.com/grafana/grafana/tree/main) repository, `gdev-mssql` data source is available. Once you add this data source, you can use the `Datasource tests - MSSQL` dashboard with three panels showing metrics generated from a test database.
<img src="/img/docs/getting-started/gdev-sql-dashboard.png" class="no-shadow" width="700px">
<img src="/static/img/docs/getting-started/gdev-sql-dashboard.png" class="no-shadow" width="700px">
Optionally, play around this dashboard and customize it to:
- Create different panels.
@ -55,5 +55,5 @@ Optionally, play around this dashboard and customize it to:
Now that you have gained some idea of using the pre-packaged MS SQL data source and some test data, the next step is to setup your own instance of MS SQL Server database and data your development or sandbox area. In the previous steps, if you followed along the path of deploying your own instance of MS SQL Server, you are already on your way.
To fetch data from your own instance of MS SQL Server, add the data source using instructions in Step 4 of this topic. In Grafana [Explore]({{< relref "../explore/_index.md" >}}) build queries to experiment with the metrics you want to monitor.
Once you have a curated list of queries, create [dashboards]({{< relref "../dashboards/_index.md" >}}) to render metrics from the SQL Server database. For troubleshooting, user permissions, known issues, and query examples, refer to [Using Microsoft SQL Server in Grafana]({{< relref "../datasources/mssql.md" >}}).

2
docs/sources/http_api/auth.md
View File

@ -47,7 +47,7 @@ curl example:
Open the sidemenu and click the organization dropdown and select the `API Keys` option.
![](/img/docs/v2/orgdropdown_api_keys.png)
![](/static/img/docs/v2/orgdropdown_api_keys.png)
You use the token in all requests in the `Authorization` header, like this:

2
docs/sources/linking/data-links.md
View File

@ -17,7 +17,7 @@ You can use variables in data links to send people to a detailed dashboard with
When creating or updating a data link, press Cmd+Space or Ctrl+Space on your keyboard to open the typeahead suggestions to more easily add variables to your URL.
{{< docs-imagebox img="/img/docs/data_link_typeahead.png" max-width= "800px" >}}
{{< figure src="/static/img/docs/data_link_typeahead.png" max-width= "800px" >}}
## Add a data link

2
docs/sources/linking/panel-links.md
View File

@ -12,7 +12,7 @@ weight = 300
Click the icon on the top left corner of a panel to see available panel links.
<img class="no-shadow" src="/img/docs/linking/panel-links.png" width="500px">
<img class="no-shadow" src="/static/img/docs/linking/panel-links.png" width="500px">
## Add a panel link

8
docs/sources/manage-users/manage-teams/index.md
View File

@ -22,11 +22,11 @@ See the complete list of teams in your Grafana organization.
### Org Admin view
![Team list](/img/docs/manage-users/org-admin-team-list-7-3.png)
![Team list](/static/img/docs/manage-users/org-admin-team-list-7-3.png)
### Team Admin view
![Team list](/img/docs/manage-users/team-admin-team-list-7-3.png)
![Team list](/static/img/docs/manage-users/team-admin-team-list-7-3.png)
## Create a team
@ -54,7 +54,7 @@ Add an existing user account to a team.
1. Repeat the process to add more team members.
{{< /docs/list >}}
![Add team member](/img/docs/manage-users/add-team-member-7-3.png)
![Add team member](/static/img/docs/manage-users/add-team-member-7-3.png)
## Remove a team member
@ -77,7 +77,7 @@ Change team member permission levels.
1. Click the **Permission** list, and then click the new user permission level.
{{< /docs/list >}}
![Change team member permissions](/img/docs/manage-users/change-team-permissions-7-3.png)
![Change team member permissions](/static/img/docs/manage-users/change-team-permissions-7-3.png)
## Delete a team

8
docs/sources/manage-users/org-admin/index.md
View File

@ -25,7 +25,7 @@ Grafana displays all user accounts on the server, listed in alphabetical order b
- **Seen -** How long ago the user logged in. If they have never logged in, then the default longest time (10y) is displayed.
- **Role -** The organization role currently assigned to the user.
![Org Admin user list](/img/docs/manage-users/org-user-list-7-3.png)
![Org Admin user list](/static/img/docs/manage-users/org-user-list-7-3.png)
## Manage organization invitations
@ -47,13 +47,13 @@ Invite or add an existing user account to your organization.
- **No -** The user is not sent an invitation, but they can sign in to the Grafana server with the email or username that you entered.
1. Click **Submit**.
![Invite User](/img/docs/manage-users/org-invite-user-7-3.png)
![Invite User](/static/img/docs/manage-users/org-invite-user-7-3.png)
### View pending invitations
Review invitations of users that were invited but have not signed in.
![Pending Invites button](/img/docs/manage-users/pending-invites-button-7-3.png)
![Pending Invites button](/static/img/docs/manage-users/pending-invites-button-7-3.png)
> **Note:** The button is only visible if there are unanswered invitations.
@ -63,7 +63,7 @@ Review invitations of users that were invited but have not signed in.
Grafana displays a list of pending invitations. If necessary, you can use the search field to filter the list.
![Pending Invites list](/img/docs/manage-users/pending-invites-list-7-3.png)
![Pending Invites list](/static/img/docs/manage-users/pending-invites-list-7-3.png)
### Cancel invitation

4
docs/sources/manage-users/server-admin/server-admin-manage-orgs.md
View File

@ -21,7 +21,7 @@ Grafana displays all organizations set up on the server, listed in alphabetical
- **Id -** The ID number of the organization.
- **Name -** The name of the organization.
![Server Admin organization list](/img/docs/manage-users/server-org-list-7-3.png)
![Server Admin organization list](/static/img/docs/manage-users/server-org-list-7-3.png)
## Create organization
@ -55,7 +55,7 @@ Permanently remove an organization from your Grafana server.
Grafana Server Admins can perform some organization management tasks that are almost identical to Organization Admin tasks, just accessed from a different menu path.
![Server admin Edit Organization](/img/docs/manage-users/server-admin-edit-org-7-3.png)
![Server admin Edit Organization](/static/img/docs/manage-users/server-admin-edit-org-7-3.png)
### View organization members and roles

10
docs/sources/manage-users/server-admin/server-admin-manage-users.md
View File

@ -27,7 +27,7 @@ Grafana displays all user accounts on the server, listed in alphabetical order b
- **Server Admin status -** If the user account has **Grafana Admin** option set, then a shield icon is displayed.
- **Account status -** If the account is disabled, then the **Disabled** label is displayed.
![Server Admin user list](/img/docs/manage-users/server-user-list-7-3.png)
![Server Admin user list](/static/img/docs/manage-users/server-user-list-7-3.png)
## View user account details
@ -49,25 +49,25 @@ This section of the account contains basic user information. Users can change va
- **Username**
- **Password**
![Server Admin user information section](/img/docs/manage-users/server-admin-user-information-7-3.png)
![Server Admin user information section](/static/img/docs/manage-users/server-admin-user-information-7-3.png)
### Permissions
This indicates whether the user account has the Grafana Admin flag applied or not. If it is **Yes**, then the user is a Grafana Server Admin.
![Server Admin Permissions section](/img/docs/manage-users/server-admin-permissions-7-3.png)
![Server Admin Permissions section](/static/img/docs/manage-users/server-admin-permissions-7-3.png)
### Organisations
This section lists the organizations the user account belongs to and the roles they hold within each organization.
![Server Admin Organizations section](/img/docs/manage-users/server-admin-organisations-7-3.png)
![Server Admin Organizations section](/static/img/docs/manage-users/server-admin-organisations-7-3.png)
### Sessions
See recent sessions that the user was logged on, including when they logged on and information about the system the logged on with. You can force logouts if necessary.
![Server Admin Sessions section](/img/docs/manage-users/server-admin-sessions-7-3.png)
![Server Admin Sessions section](/static/img/docs/manage-users/server-admin-sessions-7-3.png)
## Add a user account

0
docs/sources/menu.yaml
View File

2
docs/sources/panels/_index.md
View File

@ -14,7 +14,7 @@ There are a wide variety of styling and formatting options for each panel. Panel
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.
![](/img/docs/animated_gifs/drag_drop.gif)
![](/static/img/docs/animated_gifs/drag_drop.gif)
## Tips and shortcuts

4
docs/sources/panels/add-a-panel.md
View File

@ -12,7 +12,7 @@ Panels allow you to show your data in visual form. This topic walks you through
1. Navigate to the dashboard you want to add a panel to.
1. Click the **Add panel** icon.
![](/img/docs/panels/add-panel-icon-7-0.png)
![](/static/img/docs/panels/add-panel-icon-7-0.png)
1. Click **Add an empty panel**.
@ -29,7 +29,7 @@ Each panel needs at least one query to display a visualization. You write querie
In the Visualization list, click a visualization type. Grafana displays a preview of your query results with that visualization applied.
![](/img/docs/panel-editor/select-visualization-8-0.png)
![](/static/img/docs/panel-editor/select-visualization-8-0.png)
For more information about individual visualizations, refer to [Visualizations options]({{< relref "visualizations/_index.md" >}}).

8
docs/sources/panels/legend-options.md
View File

@ -16,21 +16,21 @@ This topic currently applies to the following visualizations:
## Toggle series
To toggle a series:
Click on the series label in the legend to isolate the series in the visualization.
Click on the series label in the legend to isolate the series in the visualization.
All other series are hidden in the visualization. The data of the hidden series is still accessible.
Use Cmd/Ctrl+click on the series label to hide the isolated series and remove the toggle.
> **Note:** This option is persistent when you save the dashboard.
![Toggle series visibility](/img/docs/legend/legend-series-toggle-7-5.png)
![Toggle series visibility](/static/img/docs/legend/legend-series-toggle-7-5.png)
This creates a system override that hides the other series. You can view this override in the Overrides tab. If you delete the override, then it removes the toggle.
![Series toggle override example](/img/docs/legend/legend-series-override-7-5.png)
![Series toggle override example](/static/img/docs/legend/legend-series-override-7-5.png)
## Change series color
Click on the series icon (colored line beside the series label) in the legend to change selected series color.
![Change legend series color](/img/docs/legend/legend-series-color-7-5.png)
![Change legend series color](/static/img/docs/legend/legend-series-color-7-5.png)

10
docs/sources/panels/panel-editor.md
View File

@ -7,7 +7,7 @@ weight = 200
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" >}}
{{< figure src="/static/img/docs/panel-editor/panel-editor-7-0.png" class="docs-image--no-shadow" max-width="1500px" >}}
## Open the Panel editor
@ -21,7 +21,7 @@ There are several ways to access the panel editor, also called the **Edit Panel*
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" >}}
{{< figure src="/static/img/docs/panel-editor/resize-panel-editor-panels-7-0.gif" class="docs-image--no-shadow" max-width="600px" >}}
## Parts of the panel editor
@ -31,7 +31,7 @@ This section describes the parts of the panel editor screen and a bit about fiel
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" >}}
{{< figure src="/static/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:
@ -44,7 +44,7 @@ On the right side of the header are the following options:
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" >}}
{{< figure src="/static/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 visualization 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.
@ -55,7 +55,7 @@ The visualization preview section contains viewing options, time range controls,
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" >}}
{{< figure src="/static/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/_index.md" >}}).

2
docs/sources/panels/panel-options.md
View File

@ -9,7 +9,7 @@ Panel options are common to all panels. They are basic options to add informatio
While not required, we recommend that you add a helpful title and description to all panels.
![](/img/docs/panels/panel-options-8-0.png)
![](/static/img/docs/panels/panel-options-8-0.png)
## Title

20
docs/sources/panels/queries.md
View File

@ -17,11 +17,11 @@ Because of the difference between query languages, data sources may have query e
**InfluxDB query editor**
{{< docs-imagebox img="/img/docs/queries/influxdb-query-editor-7-2.png" class="docs-image--no-shadow" max-width="1000px" >}}
{{< figure src="/static/img/docs/queries/influxdb-query-editor-7-2.png" class="docs-image--no-shadow" max-width="1000px" >}}
**Prometheus (PromQL) query editor**
{{< docs-imagebox img="/img/docs/queries/prometheus-query-editor-7-4.png" class="docs-image--no-shadow" max-width="1000px" >}}
{{< figure src="/static/img/docs/queries/prometheus-query-editor-7-4.png" class="docs-image--no-shadow" max-width="1000px" >}}
## Query syntax
@ -51,13 +51,13 @@ The Query tab consists of the following elements:
- Query editor list
- Expressions
{{< docs-imagebox img="/img/docs/queries/query-editor-7-2.png" class="docs-image--no-shadow" max-width="1000px" >}}
{{< figure src="/static/img/docs/queries/query-editor-7-2.png" class="docs-image--no-shadow" max-width="1000px" >}}
### Data source selector
The data source selector is a drop-down list. Click it to select a data source you have added. When you create a panel, Grafana automatically selects your default data source. For more information about adding data sources, refer to [Add a data source]({{< relref "../datasources/add-a-data-source.md" >}}).
{{< docs-imagebox img="/img/docs/queries/data-source-selector-7-0.png" class="docs-image--no-shadow" max-width="250px" >}}
{{< figure src="/static/img/docs/queries/data-source-selector-7-0.png" class="docs-image--no-shadow" max-width="250px" >}}
In addition to the data sources that you have configured in your Grafana, there are three special data sources available:
@ -71,7 +71,7 @@ In addition to the data sources that you have configured in your Grafana, there
Click **Query options** next to the data source selector to see settings for your selected data source. Changes you make here affect only queries made in this panel.
{{< docs-imagebox img="/img/docs/queries/data-source-options-7-0.png" class="docs-image--no-shadow" max-width="1000px" >}}
{{< figure src="/static/img/docs/queries/data-source-options-7-0.png" class="docs-image--no-shadow" max-width="1000px" >}}
Grafana sets defaults that are shown in dark gray text. Changes are displayed in white text. To return a field to the default setting, delete the white text from the field.
@ -119,11 +119,11 @@ You can:
| Icon | Description |
|:--:|:---|
| {{< docs-imagebox img="/img/docs/queries/query-editor-help-7-4.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Toggle query editor help. If supported by the data source, click this icon to display information on how to use the query editor or provide quick access to common queries. |
| {{< docs-imagebox img="/img/docs/queries/duplicate-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Copy a query. Duplicating queries is useful when working with multiple complex queries that are similar and you want to either experiment with different variants or do minor alterations. |
| {{< docs-imagebox img="/img/docs/queries/hide-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Hide a query. Grafana does not send hidden queries to the data source. |
| {{< docs-imagebox img="/img/docs/queries/remove-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Remove a query. Removing a query permanently deletes it, but sometimes you can recover deleted queries by reverting to previously saved versions of the panel. |
| {{< docs-imagebox img="/img/docs/queries/query-drag-icon-7-2.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Reorder queries. Change the order of queries by clicking and holding the drag icon, then drag queries where desired. The order of results reflects the order of the queries, so you can often adjust your visual results based on query order. |
| {{< figure src="/static/img/docs/queries/query-editor-help-7-4.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Toggle query editor help. If supported by the data source, click this icon to display information on how to use the query editor or provide quick access to common queries. |
| {{< figure src="/static/img/docs/queries/duplicate-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Copy a query. Duplicating queries is useful when working with multiple complex queries that are similar and you want to either experiment with different variants or do minor alterations. |
| {{< figure src="/static/img/docs/queries/hide-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Hide a query. Grafana does not send hidden queries to the data source. |
| {{< figure src="/static/img/docs/queries/remove-query-icon-7-0.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Remove a query. Removing a query permanently deletes it, but sometimes you can recover deleted queries by reverting to previously saved versions of the panel. |
| {{< figure src="/static/img/docs/queries/query-drag-icon-7-2.png" class="docs-image--no-shadow" max-width="30px" max-height="30px" >}} | Reorder queries. Change the order of queries by clicking and holding the drag icon, then drag queries where desired. The order of results reflects the order of the queries, so you can often adjust your visual results based on query order. |
### Expressions

4
docs/sources/panels/standard-options.md
View File

@ -78,7 +78,7 @@ To select a custom unit enter the unit and select the last `Custom: xxx` option
You can also paste a native emoji in the unit picker and pick it as a custom unit:
{{< docs-imagebox img="/img/docs/v66/custom_unit_burger2.png" max-width="600px" caption="Custom unit emoji" >}}
{{< figure src="/static/img/docs/v66/custom_unit_burger2.png" max-width="600px" caption="Custom unit emoji" >}}
### String units
@ -86,7 +86,7 @@ Grafana can sometime be too aggressive in parsing strings and displaying them as
## Color scheme
{{< figure src="/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="350px" caption="Color scheme" class="pull-right" >}}
The color scheme option defines how Grafana colors series or fields. There are multiple modes here that work very differently and their utility depends largely on what visualization you currently have selected.

4
docs/sources/panels/transformations/apply-transformations.md
View File

@ -21,7 +21,7 @@ To apply a transformation:
This next transformation acts on the result set returned by the previous transformation.
{{< docs-imagebox img="/img/docs/transformations/transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Delete a transformation
@ -31,4 +31,4 @@ To remove a transformation that is no longer needed, click the trash can icon.
To see the input and the output result sets of the transformation, click the bug icon on the right side of the transformation row
Grafana displays the transformation debug view below the transformation row.
{{< docs-imagebox img="/img/docs/transformations/debug-transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/debug-transformations-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}

20
docs/sources/panels/transformations/types-options.md
View File

@ -123,15 +123,15 @@ In the example below, I removed the Min field from the results.
Here is the original query table. (This is streaming data, so numbers change over time and between screenshots.)
{{< docs-imagebox img="/img/docs/transformations/filter-name-table-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/filter-name-table-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
Here is the table after I applied the transformation to remove the Min field.
{{< docs-imagebox img="/img/docs/transformations/filter-name-table-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/filter-name-table-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
Here is the same query using a Stat visualization.
{{< docs-imagebox img="/img/docs/transformations/filter-name-stat-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/filter-name-stat-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Filter data by query
@ -141,7 +141,7 @@ Grafana displays the query identification letters in dark gray text. Click a que
In the example below, the panel has three queries (A, B, C). I removed the B query from the visualization.
{{< docs-imagebox img="/img/docs/transformations/filter-by-query-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/filter-by-query-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
> **Note:** This transformation is not available for Graphite because this data source does not support correlating returned data with queries.
@ -159,7 +159,7 @@ Grafana displays a list of fields returned by the query. You can:
In the example below, I hid the value field and renamed Max and Min.
{{< docs-imagebox img="/img/docs/transformations/organize-fields-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/organize-fields-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Join by field (outer join)
@ -169,11 +169,11 @@ This transformation is especially useful if you want to combine queries so that
In the example below, I have a template query displaying time series data from multiple servers in a table visualization. I can only view the results of one query at a time.
{{< docs-imagebox img="/img/docs/transformations/join-fields-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/join-fields-before-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
I applied a transformation to join the query results using the time field. Now I can run calculations, combine, and organize the results in this new table.
{{< docs-imagebox img="/img/docs/transformations/join-fields-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/join-fields-after-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Add field from calculation
@ -190,7 +190,7 @@ Use this transformation to add a new field calculated from two other fields. Eac
In the example below, I added two fields together and named them Sum.
{{< docs-imagebox img="/img/docs/transformations/add-field-from-calc-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/add-field-from-calc-stat-example-7-0.png" class="docs-image--no-shadow" max-width= "1100px" >}}
## Labels to fields
@ -445,8 +445,8 @@ You can specify a regular expression, which is only applied to matches, along wi
In the following example, we are stripping the prefix from event types. In the before image, you can see everything is prefixed with `system.`
{{< docs-imagebox img="/img/docs/transformations/rename-by-regex-before-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/rename-by-regex-before-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}
With the transformation applied, you can see we are left with just the remainder of the string.
{{< docs-imagebox img="/img/docs/transformations/rename-by-regex-after-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}
{{< figure src="/static/img/docs/transformations/rename-by-regex-after-7-3.png" class="docs-image--no-shadow" max-width= "1100px" >}}

2
docs/sources/panels/visualizations/alert-list-panel.md
View File

@ -9,7 +9,7 @@ weight = 100
The Alert list panel allows you to display your dashboards alerts. You can configure the list to show current state or recent state changes. You can read more about alerts in [Alerts overview]({{< relref "../../alerting/_index.md" >}}).
{{< docs-imagebox img="/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
{{< figure src="/static/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
Use these settings to refine your visualization.

2
docs/sources/panels/visualizations/bar-gauge-panel.md
View File

@ -12,7 +12,7 @@ The bar gauge simplifies your data by reducing every field to a single value. Yo
This panel can show one or more bar gauges depending on how many series, rows, or columns your query returns.
{{< docs-imagebox img="/img/docs/v66/bar_gauge_cover.png" max-width="1025px" caption="Stat panel" >}}
{{< figure src="/static/img/docs/v66/bar_gauge_cover.png" max-width="1025px" caption="Stat panel" >}}
## Data and field options

2
docs/sources/panels/visualizations/dashboard-list-panel.md
View File

@ -9,7 +9,7 @@ weight = 300
The dashboard list panel allows you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, recently viewed dashboards, a search query, and dashboard tags.
{{< docs-imagebox img="/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
{{< figure src="/static/img/docs/v45/dashboard-list-panels.png" max-width="850px">}}
On each dashboard load, this panel queries the dashboard list, always providing the most up-to-date results.

2
docs/sources/panels/visualizations/gauge-panel.md
View File

@ -10,7 +10,7 @@ weight = 400
Gauge is a single value panel that can repeat a gauge for every series, column or row.
{{< docs-imagebox img="/img/docs/v66/gauge_panel_cover.png" max-width="1025px" >}}
{{< figure src="/static/img/docs/v66/gauge_panel_cover.png" max-width="1025px" >}}
## Data and field options

2
docs/sources/panels/visualizations/heatmap.md
View File

@ -10,7 +10,7 @@ weight = 600
The Heatmap panel visualization allows you to view histograms over time. For more information about histograms, refer to [Introduction to histograms and heatmaps]({{< relref "../../basics/intro-histograms.md" >}}).
![](/img/docs/v43/heatmap_panel_cover.jpg)
![](/static/img/docs/v43/heatmap_panel_cover.jpg)
## Axes options

2
docs/sources/panels/visualizations/logs-panel.md
View File

@ -11,7 +11,7 @@ The logs panel visualization shows log lines from data sources that support logs
> **Note:** The Logs panel is only available in Grafana v6.4+.
<img class="screenshot" src="/img/docs/v64/logs-panel.png">
<img class="screenshot" src="/static/img/docs/v64/logs-panel.png">
The logs panel shows the result of queries that were entered in the Query tab. The results of multiple queries are merged and sorted by time. You can scroll inside the panel if the data source returns more lines than can be displayed at any one time.

14
docs/sources/panels/visualizations/node-graph.md
View File

@ -10,11 +10,11 @@ weight = 850
The _Node graph_ can visualize directed graphs or networks. It uses directed force layout to effectively position the nodes so it can help with displaying complex infrastructure maps, hierarchies or execution diagrams.
![Node graph panel](/img/docs/node-graph/node-graph-7-4.png "Node graph")
![Node graph panel](/static/img/docs/node-graph/node-graph-7-4.png "Node graph")
## Data requirements
The Node graph panel requires specific shape of the data to be able to display it's nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph panel requires specific shape of the data to be able to display it's nodes and edges. This means not every data source or query can be visualized in this panel. If you want to use this as a data source developer see the section about data API.
The Node graph visualization consists of _nodes_ and _edges_.
@ -31,7 +31,7 @@ Usually, nodes show two statistical values inside the node and two identifiers j
For example you can have percentage of errors represented by red portion of the circle. Additional details can be displayed in a context menu when which is displayed when you click on the node. There also can be additional links in the context menu that can target either other parts of Grafana or any external link.
![Node graph navigation](/img/docs/node-graph/node-graph-navigation-7-4.gif "Node graph navigation")
![Node graph navigation](/static/img/docs/node-graph/node-graph-navigation-7-4.gif "Node graph navigation")
### Edges
@ -61,13 +61,13 @@ Data source needs to return two data frames, one for nodes and one for edges and
Required fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| id | string | Unique identifier of the node. This ID is referenced by edge in it's source and target field. |
Optional fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| title | string | Name of the node visible in just under the node. |
| subTitle | string | Additional, name, type or other identifier that will be shown right under the title. |
@ -80,7 +80,7 @@ Optional fields:
Required fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| id | string | Unique identifier of the edge. |
| source | string | Id of the source node. |
@ -88,7 +88,7 @@ Required fields:
Optional fields:
| Field name | Type | Description |
| Field name | Type | Description |
|------------|---------|-------------|
| mainStat | string/number | First stat shown in the overlay when hovering over the edge. Can be either string in which case the value will be shown as it is or it can be a number in which case any unit associated with that field will be also shown |
| secondaryStat | string/number | Same as mainStat but shown right under it. |

8
docs/sources/panels/visualizations/pie-chart-panel.md
View File

@ -8,7 +8,7 @@ weight = 850
The pie chart displays reduced series, or values in a series, from one or more queries, as they relate to each other, in the form of slices of a pie. The arc length, area and central angle of a slice are all proportional to the slices value, as it relates to the sum of all values. This type of chart is best used when you want a quick comparison of a small set of values in an aesthetically pleasing form.
![Pie chart panel](/img/docs/pie-chart-panel/pie-chart-panel-7-5.png)
![Pie chart panel](/static/img/docs/pie-chart-panel/pie-chart-panel-7-5.png)
## Data and field options
@ -51,11 +51,11 @@ Select the pie chart display style.
#### Pie
![Pie type chart](/img/docs/pie-chart-panel/pie-type-chart-7-5.png)
![Pie type chart](/static/img/docs/pie-chart-panel/pie-type-chart-7-5.png)
#### Donut
![Donut type chart](/img/docs/pie-chart-panel/donut-type-chart-7-5.png)
![Donut type chart](/static/img/docs/pie-chart-panel/donut-type-chart-7-5.png)
### Labels
@ -69,7 +69,7 @@ Labels are displayed in white over the body of the chart. You might need to sele
The following example shows a pie chart with **Name** and **Percent** labels displayed.
![Pie chart labels](/img/docs/pie-chart-panel/pie-chart-labels-7-5.png)
![Pie chart labels](/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png)
{{< docs/shared "visualizations/tooltip-mode.md" >}}

4
docs/sources/panels/visualizations/stat-panel.md
View File

@ -10,7 +10,7 @@ weight = 900
The Stat panel shows a one large stat value with an optional graph sparkline. You can control the background or value color using thresholds.
{{< docs-imagebox img="/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
{{< figure src="/static/img/docs/v66/stat_panel_dark3.png" max-width="1025px" caption="Stat panel" >}}
> **Note:** This panel replaces the Singlestat panel, which was deprecated in Grafana 7.0.
@ -24,7 +24,7 @@ You can use the **Text mode** to control whether the text is displayed or not.
Example screenshot:
{{< docs-imagebox img="/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}
{{< figure src="/static/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}
## Data and field options

4
docs/sources/panels/visualizations/table/_index.md
View File

@ -9,7 +9,7 @@ weight = 1000
The table panel is very flexible, supporting multiple modes for time series and for tables, annotation, and raw JSON data. This panel also provides date formatting, value formatting, and coloring options.
{{< docs-imagebox img="/img/docs/tables/table_visualization.png" max-width="1200px" lightbox="true" caption="Table visualization" >}}
{{< figure src="/static/img/docs/tables/table_visualization.png" max-width="1200px" lightbox="true" caption="Table visualization" >}}
## Data and field options
@ -26,7 +26,7 @@ Table visualizations allow you to apply:
- **Show header -** Show or hide column names imported from your data source.
- **Sort ascending/descending -** Click a column title to change the sort order from default to descending to ascending. Each time you click, the sort order changes to the next option in the cycle. You can only sort by one column at a time.
![Sort descending](/img/docs/tables/sort-descending.png "Sort descending")
![Sort descending](/static/img/docs/tables/sort-descending.png "Sort descending")
- [Table field options]({{< relref "table-field-options.md" >}}) allow you to change [field options]({{< relref "../../field-options/_index.md" >}}) such as column width, alignment, and cell display mode.
- [Filter table columns]({{< relref "filter-table-columns.md" >}}) - You can temporarily change how column data is displayed. For example, you can order values from highest to lowest or hide specific values.

6
docs/sources/panels/visualizations/table/filter-table-columns.md
View File

@ -19,13 +19,13 @@ If you turn on the **Column filter** in [Table options]({{< relref "table-field-
A filter icon appears next to each column title.
{{< docs-imagebox img="/img/docs/tables/column-filter-with-icon.png" max-width="500px" caption="Column filtering turned on" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/column-filter-with-icon.png" max-width="500px" caption="Column filtering turned on" class="docs-image--no-shadow" >}}
## Filter column values
To filter column values, click the filter (funnel) icon next to a column title. Grafana displays the filter options for that column.
{{< docs-imagebox img="/img/docs/tables/filter-column-values.png" max-width="500px" caption="Filter column values" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/filter-column-values.png" max-width="500px" caption="Filter column values" class="docs-image--no-shadow" >}}
Click the check box next to the values that you want to display. Enter text in the search field at the top to show those values in the display so that you can select them rather than scroll to find them.
@ -33,6 +33,6 @@ Click the check box next to the values that you want to display. Enter text in t
Columns with filters applied have a blue funnel displayed next to the title.
{{< docs-imagebox img="/img/docs/tables/filtered-column.png" max-width="500px" caption="Filtered column" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/filtered-column.png" max-width="500px" caption="Filtered column" class="docs-image--no-shadow" >}}
To remove the filter, click the blue funnel icon and then click **Clear filter**.

16
docs/sources/panels/visualizations/table/table-field-options.md
View File

@ -40,39 +40,39 @@ By default, Grafana automatically chooses display settings. You can override the
If thresholds are set, then the field text is displayed in the appropriate threshold color.
{{< docs-imagebox img="/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/color-text.png" max-width="500px" caption="Color text" class="docs-image--no-shadow" >}}
### Color background (gradient or solid)
If thresholds are set, then the field background is displayed in the appropriate threshold color.
If thresholds are set, then the field background is displayed in the appropriate threshold color.
{{< docs-imagebox img="/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/color-background.png" max-width="500px" caption="Color background" class="docs-image--no-shadow" >}}
### Gradient gauge
The threshold levels define a gradient.
{{< docs-imagebox img="/img/docs/tables/gradient-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/gradient-gauge.png" max-width="500px" caption="Gradient gauge" class="docs-image--no-shadow" >}}
### LCD gauge
The gauge is split up in small cells that are lit or unlit.
{{< docs-imagebox img="/img/docs/tables/lcd-gauge.png" max-width="500px" caption="LCD gauge" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/lcd-gauge.png" max-width="500px" caption="LCD gauge" class="docs-image--no-shadow" >}}
### JSON view
Shows value formatted as code. If a value is an object the JSON view allowing browsing the JSON object will appear on hover.
{{< docs-imagebox img="/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
{{< figure src="/static/img/docs/tables/json-view.png" max-width="500px" caption="JSON view" class="docs-image--no-shadow" >}}
### Image
### Image
> Only available in Grafana 7.3+
If you have a field value that is an image URL or a base64 encoded image you can configure the table to display it as an image.
{{< figure src="/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
{{< figure src="/static/img/docs/v73/table_hover.gif" max-width="900px" caption="Table hover" >}}
## Column filter

10
docs/sources/panels/visualizations/time-series/change-axis-display.md
View File

@ -31,25 +31,25 @@ Grafana automatically assigns Y-axis to the series. When there are two or more s
Display all Y-axes on the left side.
![Left Y-axis example](/img/docs/time-series-panel/axis-placement-left-7-4.png)
![Left Y-axis example](/static/img/docs/time-series-panel/axis-placement-left-7-4.png)
### Right
Display all Y-axes on the right side.
![Right Y-axis example](/img/docs/time-series-panel/axis-placement-right-7-4.png)
![Right Y-axis example](/static/img/docs/time-series-panel/axis-placement-right-7-4.png)
### Hidden
Hide the Y-axes.
![Hidden Y-axis example](/img/docs/time-series-panel/axis-placement-hidden-7-4.png)
![Hidden Y-axis example](/static/img/docs/time-series-panel/axis-placement-hidden-7-4.png)
## Label
Set a Y-axis text label.
![Label example](/img/docs/time-series-panel/label-example-7-4.png)
![Label example](/static/img/docs/time-series-panel/label-example-7-4.png)
If you have more than one Y-axis, then you can give assign different labels in the Override tab.
@ -67,7 +67,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard field options]({{< relref "../../standard-options.md#max" >}}).
![Label example](/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
![Label example](/static/img/docs/time-series-panel/axis-soft-min-max-7-4.png)
## Scale

34
docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md
View File

@ -33,27 +33,27 @@ Set the position of the bar relative to a data point. In the examples below, **S
#### Before
![Bar alignment before icon](/img/docs/time-series-panel/bar-alignment-icon-before-7-4.png)
![Bar alignment before icon](/static/img/docs/time-series-panel/bar-alignment-icon-before-7-4.png)
The bar is drawn before the point. The point is placed on the trailing corner of the bar.
![Bar alignment before example](/img/docs/time-series-panel/bar-alignment-before-7-4.png)
![Bar alignment before example](/static/img/docs/time-series-panel/bar-alignment-before-7-4.png)
#### Center
![Bar alignment center icon](/img/docs/time-series-panel/bar-alignment-icon-center-7-4.png)
![Bar alignment center icon](/static/img/docs/time-series-panel/bar-alignment-icon-center-7-4.png)
The bar is drawn around the point. The point is placed in the center of the bar. This is the default.
![Bar alignment center](/img/docs/time-series-panel/bar-alignment-center-7-4.png)
![Bar alignment center](/static/img/docs/time-series-panel/bar-alignment-center-7-4.png)
#### After
![Bar alignment after icon](/img/docs/time-series-panel/bar-alignment-icon-after-7-4.png)
![Bar alignment after icon](/static/img/docs/time-series-panel/bar-alignment-icon-after-7-4.png)
The bar is drawn after the point. The point is placed on the leading corner of the bar.
![Bar alignment after](/img/docs/time-series-panel/bar-alignment-after-7-4.png)
![Bar alignment after](/static/img/docs/time-series-panel/bar-alignment-after-7-4.png)
### Line width
@ -61,11 +61,11 @@ Set the thickness of the lines bar outlines, from 0 to 10 pixels. **Fill opacity
Line thickness set to 1:
![Line thickness 1 example](/img/docs/time-series-panel/bar-graph-thickness-1-7-4.png)
![Line thickness 1 example](/static/img/docs/time-series-panel/bar-graph-thickness-1-7-4.png)
Line thickness set to 7:
![Line thickness 7 example](/img/docs/time-series-panel/bar-graph-thickness-7-7-4.png)
![Line thickness 7 example](/static/img/docs/time-series-panel/bar-graph-thickness-7-7-4.png)
### Fill opacity
@ -73,11 +73,11 @@ Set the opacity of the bar fill, from 0 to 100 percent. In the examples below, t
Fill opacity set to 20:
![Fill opacity 20 example](/img/docs/time-series-panel/bar-graph-opacity-20-7-4.png)
![Fill opacity 20 example](/static/img/docs/time-series-panel/bar-graph-opacity-20-7-4.png)
Fill opacity set to 95:
![Fill opacity 95 example](/img/docs/time-series-panel/bar-graph-opacity-95-7-4.png)
![Fill opacity 95 example](/static/img/docs/time-series-panel/bar-graph-opacity-95-7-4.png)
### Gradient mode
@ -89,19 +89,19 @@ Gradient appearance is influenced by the **Fill opacity** setting. In the screen
No gradient fill. This is the default setting.
![Gradient mode none example](/img/docs/time-series-panel/bar-graph-gradient-none-7-4.png)
![Gradient mode none example](/static/img/docs/time-series-panel/bar-graph-gradient-none-7-4.png)
#### Opacity
Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis.
![Gradient mode opacity example](/img/docs/time-series-panel/bar-graph-gradient-opacity-7-4.png)
![Gradient mode opacity example](/static/img/docs/time-series-panel/bar-graph-gradient-opacity-7-4.png)
#### Hue
Gradient color is generated based on the hue of the line color.
![Gradient mode hue example](/img/docs/time-series-panel/bar-graph-gradient-hue-7-4.png)
![Gradient mode hue example](/static/img/docs/time-series-panel/bar-graph-gradient-hue-7-4.png)
### Show points
@ -121,17 +121,17 @@ Set the size of the points, from 1 to 40 pixels in diameter.
Point size set to 6:
![Show points point size 6 example](/img/docs/time-series-panel/bar-graph-show-points-6-7-4.png)
![Show points point size 6 example](/static/img/docs/time-series-panel/bar-graph-show-points-6-7-4.png)
Point size set to 20:
![Show points point size 20 example](/img/docs/time-series-panel/bar-graph-show-points-20-7-4.png)
![Show points point size 20 example](/static/img/docs/time-series-panel/bar-graph-show-points-20-7-4.png)
#### Never
Never show the points.
![Show points point never example](/img/docs/time-series-panel/bar-graph-show-points-never-7-4.png)
![Show points point never example](/static/img/docs/time-series-panel/bar-graph-show-points-never-7-4.png)
{{< docs/shared "visualizations/stack-series-link.md" >}}
@ -143,4 +143,4 @@ Below are some bar graph examples to give you ideas.
### Hue gradient
![Bars with hue gradient example](/img/docs/time-series-panel/bars-with-hue-gradient-7-4.png)
![Bars with hue gradient example](/static/img/docs/time-series-panel/bars-with-hue-gradient-7-4.png)

60
docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md
View File

@ -33,35 +33,35 @@ Choose how Grafana interpolates the series line. The screenshots below show the
#### Linear
![Linear interpolation icon](/img/docs/time-series-panel/interpolation-icon-linear-7-4.png)
![Linear interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-linear-7-4.png)
Points are joined by straight lines.
![Linear interpolation example](/img/docs/time-series-panel/interpolation-linear-7-4.png)
![Linear interpolation example](/static/img/docs/time-series-panel/interpolation-linear-7-4.png)
#### Smooth
![Smooth interpolation icon](/img/docs/time-series-panel/interpolation-icon-smooth-7-4.png)
![Smooth interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-smooth-7-4.png)
Points are joined by curved lines resulting in smooth transitions between points.
![Smooth interpolation example](/img/docs/time-series-panel/interpolation-smooth-7-4.png)
![Smooth interpolation example](/static/img/docs/time-series-panel/interpolation-smooth-7-4.png)
#### Step before
![Step before interpolation icon](/img/docs/time-series-panel/interpolation-icon-step-before-7-4.png)
![Step before interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-step-before-7-4.png)
The line is displayed as steps between points. Points are rendered at the end of the step.
![Step before interpolation example](/img/docs/time-series-panel/interpolation-step-before-7-4.png)
![Step before interpolation example](/static/img/docs/time-series-panel/interpolation-step-before-7-4.png)
#### Step after
![Step after interpolation icon](/img/docs/time-series-panel/interpolation-icon-step-after-7-4.png)
![Step after interpolation icon](/static/img/docs/time-series-panel/interpolation-icon-step-after-7-4.png)
Line is displayed as steps between points. Points are rendered at the beginning of the step.
![Step after interpolation example](/img/docs/time-series-panel/interpolation-step-after-7-4.png)
![Step after interpolation example](/static/img/docs/time-series-panel/interpolation-step-after-7-4.png)
### Line width
@ -69,11 +69,11 @@ Set the thickness of the series line, from 0 to 10 pixels.
Line thickness set to 1:
![Line thickness 1 example](/img/docs/time-series-panel/line-graph-thickness-1-7-4.png)
![Line thickness 1 example](/static/img/docs/time-series-panel/line-graph-thickness-1-7-4.png)
Line thickness set to 7:
![Line thickness 7 example](/img/docs/time-series-panel/line-graph-thickness-7-7-4.png)
![Line thickness 7 example](/static/img/docs/time-series-panel/line-graph-thickness-7-7-4.png)
### Fill opacity
@ -81,11 +81,11 @@ Set the opacity of the series fill, from 0 to 100 percent.
Fill opacity set to 20:
![Fill opacity 20 example](/img/docs/time-series-panel/line-graph-opacity-20-7-4.png)
![Fill opacity 20 example](/static/img/docs/time-series-panel/line-graph-opacity-20-7-4.png)
Fill opacity set to 95:
![Fill opacity 95 example](/img/docs/time-series-panel/line-graph-opacity-95-7-4.png)
![Fill opacity 95 example](/static/img/docs/time-series-panel/line-graph-opacity-95-7-4.png)
### Gradient mode
@ -97,19 +97,19 @@ Gradient appearance is influenced by the **Fill opacity** setting. In the screen
No gradient fill. This is the default setting.
![Gradient mode none example](/img/docs/time-series-panel/line-graph-gradient-none-7-4.png)
![Gradient mode none example](/static/img/docs/time-series-panel/line-graph-gradient-none-7-4.png)
#### Opacity
Transparency of the gradient is calculated based on the values on the y-axis. Opacity of the fill is increasing with the values on the Y-axis.
![Gradient mode opacity example](/img/docs/time-series-panel/line-graph-gradient-opacity-7-4.png)
![Gradient mode opacity example](/static/img/docs/time-series-panel/line-graph-gradient-opacity-7-4.png)
#### Hue
Gradient color is generated based on the hue of the line color.
![Gradient mode hue example](/img/docs/time-series-panel/line-graph-gradient-hue-7-4.png)
![Gradient mode hue example](/static/img/docs/time-series-panel/line-graph-gradient-hue-7-4.png)
### Line style
@ -121,7 +121,7 @@ Line style appearance is influenced by the **Line width** and **Fill opacity** s
Display solid line. This is the default setting.
![Line style solid example](/img/docs/time-series-panel/line-graph-line-style-solid-7-4.png)
![Line style solid example](/static/img/docs/time-series-panel/line-graph-line-style-solid-7-4.png)
#### Dash
@ -129,15 +129,15 @@ Display a dashed line. When you choose this option, a list appears so that you c
Dash spacing set to 10, 10 (default):
![Line style dashed 10, 10 example](/img/docs/time-series-panel/line-graph-line-style-dashed-10-10-7-4.png)
![Line style dashed 10, 10 example](/static/img/docs/time-series-panel/line-graph-line-style-dashed-10-10-7-4.png)
Dash spacing set to 10, 30:
![Line style dashed 10, 30 example](/img/docs/time-series-panel/line-graph-line-style-dashed-10-30-7-4.png)
![Line style dashed 10, 30 example](/static/img/docs/time-series-panel/line-graph-line-style-dashed-10-30-7-4.png)
Dash spacing set to 40, 10:
![Line style dashed 40, 10 example](/img/docs/time-series-panel/line-graph-line-style-dashed-40-10-7-4.png)
![Line style dashed 40, 10 example](/static/img/docs/time-series-panel/line-graph-line-style-dashed-40-10-7-4.png)
#### Dots
@ -145,11 +145,11 @@ Display dotted lines. When you choose this option, a list appears so that you ca
Dot spacing set to 0, 10 (default):
![Line style dots 0, 10 example](/img/docs/time-series-panel/line-graph-line-style-dots-0-10-7-4.png)
![Line style dots 0, 10 example](/static/img/docs/time-series-panel/line-graph-line-style-dots-0-10-7-4.png)
Dot spacing set to 0, 30:
![Line style dots 0, 30 example](/img/docs/time-series-panel/line-graph-line-style-dots-0-30-7-4.png)
![Line style dots 0, 30 example](/static/img/docs/time-series-panel/line-graph-line-style-dots-0-30-7-4.png)
### Null values
@ -159,13 +159,13 @@ Choose how null values (gaps in the data) are displayed on the graph.
If there is a gap in the series, the line in the graph will be broken and show the gap.
![Null values gaps example](/img/docs/time-series-panel/line-graph-null-gaps-7-4.png)
![Null values gaps example](/static/img/docs/time-series-panel/line-graph-null-gaps-7-4.png)
#### Connected
If there is a gap in the series, the line will skip the gap and connect to the next non-null value.
![Null values connected example](/img/docs/time-series-panel/line-graph-null-connected-7-4.png)
![Null values connected example](/static/img/docs/time-series-panel/line-graph-null-connected-7-4.png)
### Show points
@ -185,17 +185,17 @@ Set the size of the points, from 1 to 40 pixels in diameter.
Point size set to 4:
![Show points point size 4 example](/img/docs/time-series-panel/line-graph-show-points-4-7-4.png)
![Show points point size 4 example](/static/img/docs/time-series-panel/line-graph-show-points-4-7-4.png)
Point size set to 10:
![Show points point size 10 example](/img/docs/time-series-panel/line-graph-show-points-10-7-4.png)
![Show points point size 10 example](/static/img/docs/time-series-panel/line-graph-show-points-10-7-4.png)
#### Never
Never show the points.
![Show points point never example](/img/docs/time-series-panel/line-graph-show-points-never-7-4.png)
![Show points point never example](/static/img/docs/time-series-panel/line-graph-show-points-never-7-4.png)
{{< docs/shared "visualizations/stack-series-link.md" >}}
@ -213,7 +213,7 @@ Fill the area between two series. On the Overrides tab:
A-series filled below to B-series:
![Fill below to example](/img/docs/time-series-panel/line-graph-fill-below-to-7-4.png)
![Fill below to example](/static/img/docs/time-series-panel/line-graph-fill-below-to-7-4.png)
## Line graph examples
@ -223,14 +223,14 @@ Below are some line graph examples to give you ideas.
This is a graph with different line styles and colors applied to each series and zero fill.
![Various line styles example](/img/docs/time-series-panel/various-line-styles-7-4.png)
![Various line styles example](/static/img/docs/time-series-panel/various-line-styles-7-4.png)
### Interpolation modes examples
![Interpolation modes example](/img/docs/time-series-panel/interpolation-modes-examples-7-4.png)
![Interpolation modes example](/static/img/docs/time-series-panel/interpolation-modes-examples-7-4.png)
### Fill below example
This graph shows three series: Min, Max, and Value. The Min and Max series have **Line width** set to 0. Max has a **Fill below to** override set to Min, which fills the area between Max and Min with the Max line color.
![Fill below example](/img/docs/time-series-panel/fill-below-to-7-4.png)
![Fill below example](/static/img/docs/time-series-panel/fill-below-to-7-4.png)

6
docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md
View File

@ -33,15 +33,15 @@ Set the size of the points, from 1 to 40 pixels in diameter.
Point size set to 6:
![Show points point size 6 example](/img/docs/time-series-panel/points-graph-show-points-6-7-4.png)
![Show points point size 6 example](/static/img/docs/time-series-panel/points-graph-show-points-6-7-4.png)
Point size set to 20:
![Show points point size 20 example](/img/docs/time-series-panel/points-graph-show-points-20-7-4.png)
![Show points point size 20 example](/static/img/docs/time-series-panel/points-graph-show-points-20-7-4.png)
Point size set to 35:
![Show points point size 35 example](/img/docs/time-series-panel/points-graph-show-points-35-7-4.png)
![Show points point size 35 example](/static/img/docs/time-series-panel/points-graph-show-points-35-7-4.png)
{{< docs/shared "visualizations/stack-series-link.md" >}}

16
docs/sources/panels/visualizations/time-series/graph-time-series-stacking.md
View File

@ -25,37 +25,37 @@ Some field options will not affect the visualization until you click outside of
Turn series stacking on or off.
![Stack series editor](/img/docs/time-series-panel/stack-series-editor-8-0.png)
![Stack series editor](/static/img/docs/time-series-panel/stack-series-editor-8-0.png)
### Off
Turn off series stacking. A series will share the same space in the visualization.
![No series stacking example](/img/docs/time-series-panel/stacking-off-8-0.png)
![No series stacking example](/static/img/docs/time-series-panel/stacking-off-8-0.png)
### Normal
Enable stacking series on top of each other.
![Normal series stacking example](/img/docs/time-series-panel/stacking-normal-8-0.png)
![Normal series stacking example](/static/img/docs/time-series-panel/stacking-normal-8-0.png)
## Stack series in groups
The stacking group option is only available as an override.
For more information about creating field overrides, refer to [Add a field override]({{< relref "../../field-options/configure-specific-fields.md#add-a-field-override" >}})
For more information about creating field overrides, refer to [Add a field override]({{< relref "../../field-options/configure-specific-fields.md#add-a-field-override" >}})
Stack series in the same group. In the Overrides section:
1. Create a field override for **Stack series** option.
![Stack series override](/img/docs/time-series-panel/stacking-override-default-8-0.png)
![Stack series override](/static/img/docs/time-series-panel/stacking-override-default-8-0.png)
1. Click on **Normal** stacking mode.
1. Click on **Normal** stacking mode.
1. Name the stacking group you want the series to appear in. The stacking group name option is only available when creating an override.
![Stack series override](/img/docs/time-series-panel/stack-series-override-editor-8-0)
![Stack series override](/static/img/docs/time-series-panel/stack-series-override-editor-8-0)
A-series and B-series stacked in group A, C-series, and D-series stacked in group B:
![Stacking groups example](/img/docs/time-series-panel/stack-series-groups-8-0.png)
![Stacking groups example](/static/img/docs/time-series-panel/stack-series-groups-8-0.png)

2
docs/sources/permissions/dashboard-folder-permissions.md
View File

@ -14,7 +14,7 @@ This topic explains how to grant permissions to specific folders and dashboards.
To learn more about denying access to certain Grafana users, refer to [Restricting access]({{< relref "restricting-access.md">}}).
![Folder permissions](/img/docs/permissions/folder-permissions-7-5.png)
![Folder permissions](/static/img/docs/permissions/folder-permissions-7-5.png)
## Permission levels

2
docs/sources/sharing/playlists.md
View File

@ -15,7 +15,7 @@ Grafana automatically scales dashboards to any resolution, which makes them perf
You can access the Playlist feature from Grafana's side menu, in the Dashboards submenu.
{{< docs-imagebox img="/img/docs/v50/playlist.png" max-width="25rem">}}
{{< figure src="/static/img/docs/v50/playlist.png" max-width="25rem">}}
## Create a playlist

6
docs/sources/sharing/share-dashboard.md
View File

@ -14,7 +14,7 @@ To share a dashboard:
1. Go to the home page of your Grafana instance.
1. Click on the share icon in the top navigation. The share dialog opens and shows the Link tab.
![Dashboard share direct link](/img/docs/sharing/share-dashboard-direct-link-7-3.png)
![Dashboard share direct link](/static/img/docs/sharing/share-dashboard-direct-link-7-3.png)
## Use direct link
The Link tab has the current time range, template variables and theme selected by default. You can optionally select a shortened URL to share.
@ -32,7 +32,7 @@ A dashboard snapshot shares an interactive dashboard publicly. Grafana strips se
You can publish snapshots to your local instance or to [snapshot.raintank.io](http://snapshot.raintank.io). The latter is a free service
provided by Grafana Labs that allows you to publish dashboard snapshots to an external Grafana instance. The same rules still apply: anyone with the link can view it. You can set an expiration time if you want the snapshot removed after a certain time period.
![Dashboard share snapshot](/img/docs/sharing/share-dashboard-snapshot-7-3.png)
![Dashboard share snapshot](/static/img/docs/sharing/share-dashboard-snapshot-7-3.png)
To publish a snapshot:
@ -45,4 +45,4 @@ In case you created a snapshot by mistake, click **delete snapshot** to remove t
Grafana dashboards can easily be exported and imported. For more information, refer to [Export and import dashboards]({{< relref "../dashboards/export-import.md" >}}).
![Export](/img/docs/sharing/share-dashboard-export-7-3.png)
![Export](/static/img/docs/sharing/share-dashboard-export-7-3.png)

6
docs/sources/sharing/share-panel.md
View File

@ -14,7 +14,7 @@ To share a panel:
1. Click a panel title to open the panel menu.
1. Click **Share**. The share dialog opens and shows the Link tab.
![Panel share direct link](/img/docs/sharing/share-panel-direct-link-7-3.png)
![Panel share direct link](/static/img/docs/sharing/share-panel-direct-link-7-3.png)
## Use direct link
The Link tab has the current time range, template variables and theme selected by default. You can optionally enable a shortened URL to share.
@ -46,7 +46,7 @@ A panel snapshot shares an interactive panel publicly. Grafana strips sensitive
You can publish snapshots to your local instance or to [snapshot.raintank.io](http://snapshot.raintank.io). The latter is a free service provided by [Raintank](http://raintank.io), that allows you to publish dashboard snapshots to an external Grafana instance. You can optionally set an expiration time if you want the snapshot to be removed after a certain time period.
![Panel share snapshot](/img/docs/sharing/share-panel-snapshot-7-3.png)
![Panel share snapshot](/static/img/docs/sharing/share-panel-snapshot-7-3.png)
To publish a snapshot:
@ -60,7 +60,7 @@ If you created a snapshot by mistake, click **delete snapshot** to remove the sn
You can embed a panel using an iframe on another web site. Unless anonymous access permission is enabled, the viewer must be signed into Grafana to view the graph.
![Panel share embed](/img/docs/sharing/share-panel-embedded-link-7-3.png)
![Panel share embed](/static/img/docs/sharing/share-panel-embedded-link-7-3.png)
Here is an example of the HTML code:

Some files were not shown because too many files have changed in this diff Show More