diff --git a/docs/sources/_index.md b/docs/sources/_index.md index fd3f590698f..73cfd0368a3 100755 --- a/docs/sources/_index.md +++ b/docs/sources/_index.md @@ -51,7 +51,7 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin", }}" class="nav-cards__item nav-cards__item--guide">

Grafana basics

Learn basic observability.

- + }}" class="nav-cards__item nav-cards__item--guide">

Configure Grafana

Review the configuration and setup options.

@@ -75,51 +75,51 @@ aliases = ["/docs/grafana/v1.1", "/docs/grafana/latest/guides/reference/admin",
}}" class="nav-cards__item nav-cards__item--ds"> - +
Graphite
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Elasticsearch
 }}" class="nav-cards__item nav-cards__item--ds"> - +
InfluxDB
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Prometheus
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Google Cloud Monitoring
 }}" class="nav-cards__item nav-cards__item--ds"> - +
AWS CloudWatch
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Azure Monitor
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Loki
 }}" class="nav-cards__item nav-cards__item--ds"> - +
MySQL
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Postgres
 }}" class="nav-cards__item nav-cards__item--ds"> - +
Microsoft SQL Server
 }}" class="nav-cards__item nav-cards__item--ds"> - +
OpenTSDB
diff --git a/docs/sources/administration/preferences/change-grafana-theme.md b/docs/sources/administration/preferences/change-grafana-theme.md index e5f086b5a0a..89a129ad46c 100644 --- a/docs/sources/administration/preferences/change-grafana-theme.md +++ b/docs/sources/administration/preferences/change-grafana-theme.md @@ -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 diff --git a/docs/sources/administration/provisioning.md b/docs/sources/administration/provisioning.md index 279c92f7cab..3a592bf6dd0 100644 --- a/docs/sources/administration/provisioning.md +++ b/docs/sources/administration/provisioning.md @@ -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 diff --git a/docs/sources/administration/set-up-for-high-availability.md b/docs/sources/administration/set-up-for-high-availability.md index 2d40ef721d3..d20169a9d35 100644 --- a/docs/sources/administration/set-up-for-high-availability.md +++ b/docs/sources/administration/set-up-for-high-availability.md @@ -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.
- +
## Configure multiple servers to use the same database diff --git a/docs/sources/alerting/old-alerting/add-notification-template.md b/docs/sources/alerting/old-alerting/add-notification-template.md index 8347b080548..2eb4f97762e 100644 --- a/docs/sources/alerting/old-alerting/add-notification-template.md +++ b/docs/sources/alerting/old-alerting/add-notification-template.md @@ -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) diff --git a/docs/sources/alerting/old-alerting/create-alerts.md b/docs/sources/alerting/old-alerting/create-alerts.md index 0e68935c589..14fedad987c 100644 --- a/docs/sources/alerting/old-alerting/create-alerts.md +++ b/docs/sources/alerting/old-alerting/create-alerts.md @@ -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 diff --git a/docs/sources/alerting/old-alerting/notifications.md b/docs/sources/alerting/old-alerting/notifications.md index e89bf56b8a8..ac4551a75b3 100644 --- a/docs/sources/alerting/old-alerting/notifications.md +++ b/docs/sources/alerting/old-alerting/notifications.md @@ -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 diff --git a/docs/sources/alerting/old-alerting/troubleshoot-alerts.md b/docs/sources/alerting/old-alerting/troubleshoot-alerts.md index df94dd2b3d3..83f47918af3 100644 --- a/docs/sources/alerting/old-alerting/troubleshoot-alerts.md +++ b/docs/sources/alerting/old-alerting/troubleshoot-alerts.md @@ -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. diff --git a/docs/sources/auth/ldap.md b/docs/sources/auth/ldap.md index 34f6d0eb568..08e745f45b2 100644 --- a/docs/sources/auth/ldap.md +++ b/docs/sources/auth/ldap.md @@ -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 diff --git a/docs/sources/auth/team-sync.md b/docs/sources/auth/team-sync.md index 1ade642c705..3a95b20ffb2 100644 --- a/docs/sources/auth/team-sync.md +++ b/docs/sources/auth/team-sync.md @@ -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. diff --git a/docs/sources/basics/exemplars/_index.md b/docs/sources/basics/exemplars/_index.md index 2ca4f90da5c..fb069e0f2fb 100644 --- a/docs/sources/basics/exemplars/_index.md +++ b/docs/sources/basics/exemplars/_index.md @@ -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/). diff --git a/docs/sources/basics/exemplars/view-exemplars.md b/docs/sources/basics/exemplars/view-exemplars.md index 2d23461eefa..8b08766962f 100644 --- a/docs/sources/basics/exemplars/view-exemplars.md +++ b/docs/sources/basics/exemplars/view-exemplars.md @@ -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 `. 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 `. 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 ``. +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 ``. 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" >}} diff --git a/docs/sources/basics/intro-histograms.md b/docs/sources/basics/intro-histograms.md index 68f737682e3..7225b431600 100644 --- a/docs/sources/basics/intro-histograms.md +++ b/docs/sources/basics/intro-histograms.md @@ -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 diff --git a/docs/sources/basics/timeseries-dimensions.md b/docs/sources/basics/timeseries-dimensions.md index 5e345e5954f..d16f121c4c9 100644 --- a/docs/sources/basics/timeseries-dimensions.md +++ b/docs/sources/basics/timeseries-dimensions.md @@ -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. diff --git a/docs/sources/basics/timeseries.md b/docs/sources/basics/timeseries.md index 1348189d3f9..959463cc791 100644 --- a/docs/sources/basics/timeseries.md +++ b/docs/sources/basics/timeseries.md @@ -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: diff --git a/docs/sources/best-practices/dashboard-management-maturity-levels.md b/docs/sources/best-practices/dashboard-management-maturity-levels.md index 7d0ce65267a..d3e44910be7 100644 --- a/docs/sources/best-practices/dashboard-management-maturity-levels.md +++ b/docs/sources/best-practices/dashboard-management-maturity-levels.md @@ -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. diff --git a/docs/sources/dashboards/_index.md b/docs/sources/dashboards/_index.md index e2007a90133..08588f28e6d 100644 --- a/docs/sources/dashboards/_index.md +++ b/docs/sources/dashboards/_index.md @@ -10,7 +10,7 @@ A _dashboard_ is a set of one or more panels organized and arranged into one or ## Dashboard UI - + 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. - + The image above shows you the top header for a Dashboard. diff --git a/docs/sources/dashboards/annotations.md b/docs/sources/dashboards/annotations.md index 85651c0cfac..a2a2aae7bca 100644 --- a/docs/sources/dashboards/annotations.md +++ b/docs/sources/dashboards/annotations.md @@ -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. - -{{< docs-imagebox img="/img/docs/v50/annotation_new_query.png" max-width="600px" >}} + +{{< 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 diff --git a/docs/sources/dashboards/dashboard_folders.md b/docs/sources/dashboards/dashboard_folders.md index 8d7584a5c77..1afd3c2c310 100644 --- a/docs/sources/dashboards/dashboard_folders.md +++ b/docs/sources/dashboards/dashboard_folders.md @@ -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: diff --git a/docs/sources/dashboards/dashboard_history.md b/docs/sources/dashboards/dashboard_history.md index 45abe97107a..801baf99a14 100644 --- a/docs/sources/dashboards/dashboard_history.md +++ b/docs/sources/dashboards/dashboard_history.md @@ -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. - + 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. - + 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. - + 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 \" button appearing in the diff view. Clicking the button will bring up the following popup prompting you to confirm the restoration. - + 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. diff --git a/docs/sources/dashboards/export-import.md b/docs/sources/dashboards/export-import.md index 3cb8f4a0f28..4953590f61d 100644 --- a/docs/sources/dashboards/export-import.md +++ b/docs/sources/dashboards/export-import.md @@ -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 diff --git a/docs/sources/dashboards/playlist.md b/docs/sources/dashboards/playlist.md index 582486590a8..93fab44cbbb 100644 --- a/docs/sources/dashboards/playlist.md +++ b/docs/sources/dashboards/playlist.md @@ -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 diff --git a/docs/sources/dashboards/reporting.md b/docs/sources/dashboards/reporting.md index 6f70d585fa4..7ee97544545 100644 --- a/docs/sources/dashboards/reporting.md +++ b/docs/sources/dashboards/reporting.md @@ -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" >}}). diff --git a/docs/sources/dashboards/search.md b/docs/sources/dashboards/search.md index 20b00402434..4cf95cd8afe 100644 --- a/docs/sources/dashboards/search.md +++ b/docs/sources/dashboards/search.md @@ -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`. - + 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. diff --git a/docs/sources/dashboards/time-range-controls.md b/docs/sources/dashboards/time-range-controls.md index 86ee917df77..bf04afbf8fe 100644 --- a/docs/sources/dashboards/time-range-controls.md +++ b/docs/sources/dashboards/time-range-controls.md @@ -37,7 +37,7 @@ Here are some examples: The dashboard and panel time controls have a common user interface (UI). - + 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). - + 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`. - + ### Relative time range diff --git a/docs/sources/datasources/add-a-data-source.md b/docs/sources/datasources/add-a-data-source.md index 092e55b9acd..d3102e65815 100644 --- a/docs/sources/datasources/add-a-data-source.md +++ b/docs/sources/datasources/add-a-data-source.md @@ -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. diff --git a/docs/sources/datasources/azuremonitor.md b/docs/sources/datasources/azuremonitor.md index b9518b87733..7ca7df8765e 100644 --- a/docs/sources/datasources/azuremonitor.md +++ b/docs/sources/datasources/azuremonitor.md @@ -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 diff --git a/docs/sources/datasources/cloudwatch.md b/docs/sources/datasources/cloudwatch.md index 29efeb562fb..28dcb244913 100644 --- a/docs/sources/datasources/cloudwatch.md +++ b/docs/sources/datasources/cloudwatch.md @@ -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 diff --git a/docs/sources/datasources/elasticsearch.md b/docs/sources/datasources/elasticsearch.md index b5a52b4e3ec..1e8d31bcae1 100644 --- a/docs/sources/datasources/elasticsearch.md +++ b/docs/sources/datasources/elasticsearch.md @@ -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]({{}}) 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" >}} diff --git a/docs/sources/datasources/google-cloud-monitoring/_index.md b/docs/sources/datasources/google-cloud-monitoring/_index.md index 19c90c54c56..2da5c71b7fc 100644 --- a/docs/sources/datasources/google-cloud-monitoring/_index.md +++ b/docs/sources/datasources/google-cloud-monitoring/_index.md @@ -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. diff --git a/docs/sources/datasources/google-cloud-monitoring/preconfig-cloud-monitoring-dashboards.md b/docs/sources/datasources/google-cloud-monitoring/preconfig-cloud-monitoring-dashboards.md index 8c99acdf4bf..31f8f77e4bf 100644 --- a/docs/sources/datasources/google-cloud-monitoring/preconfig-cloud-monitoring-dashboards.md +++ b/docs/sources/datasources/google-cloud-monitoring/preconfig-cloud-monitoring-dashboards.md @@ -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" >}} diff --git a/docs/sources/datasources/graphite.md b/docs/sources/datasources/graphite.md index 7c47937ecb0..e36bfbb7e3b 100644 --- a/docs/sources/datasources/graphite.md +++ b/docs/sources/datasources/graphite.md @@ -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: diff --git a/docs/sources/datasources/influxdb/_index.md b/docs/sources/datasources/influxdb/_index.md index cae85ba7f6b..7275c08b439 100644 --- a/docs/sources/datasources/influxdb/_index.md +++ b/docs/sources/datasources/influxdb/_index.md @@ -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: diff --git a/docs/sources/datasources/jaeger.md b/docs/sources/datasources/jaeger.md index 3e88c365e26..a06984415eb 100644 --- a/docs/sources/datasources/jaeger.md +++ b/docs/sources/datasources/jaeger.md @@ -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: diff --git a/docs/sources/datasources/loki.md b/docs/sources/datasources/loki.md index c89114175c7..84d704d28c7 100644 --- a/docs/sources/datasources/loki.md +++ b/docs/sources/datasources/loki.md @@ -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 diff --git a/docs/sources/datasources/mssql.md b/docs/sources/datasources/mssql.md index 6e2fe38cc0c..542446f67c0 100644 --- a/docs/sources/datasources/mssql.md +++ b/docs/sources/datasources/mssql.md @@ -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
-{{< 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
-{{< 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
-{{< 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:** diff --git a/docs/sources/datasources/mysql.md b/docs/sources/datasources/mysql.md index ae4e7786f2d..3c54c231f8f 100644 --- a/docs/sources/datasources/mysql.md +++ b/docs/sources/datasources/mysql.md @@ -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 diff --git a/docs/sources/datasources/opentsdb.md b/docs/sources/datasources/opentsdb.md index 9b2122e8036..950fefbca8f 100644 --- a/docs/sources/datasources/opentsdb.md +++ b/docs/sources/datasources/opentsdb.md @@ -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. diff --git a/docs/sources/datasources/postgres.md b/docs/sources/datasources/postgres.md index 04e9d9968de..3088151d0ef 100644 --- a/docs/sources/datasources/postgres.md +++ b/docs/sources/datasources/postgres.md @@ -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:
-![](/img/docs/v53/postgres_select_editor.png)
+![](/static/img/docs/v53/postgres_select_editor.png)
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 diff --git a/docs/sources/datasources/prometheus.md b/docs/sources/datasources/prometheus.md index 4ac475459ce..1951ecc24f3 100644 --- a/docs/sources/datasources/prometheus.md +++ b/docs/sources/datasources/prometheus.md @@ -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 '&'. | @@ -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" >}} diff --git a/docs/sources/datasources/tempo.md b/docs/sources/datasources/tempo.md index 29d6f6a0fce..a27fa3921c8 100644 --- a/docs/sources/datasources/tempo.md +++ b/docs/sources/datasources/tempo.md @@ -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 diff --git a/docs/sources/datasources/testdata.md b/docs/sources/datasources/testdata.md index ecd47dff50f..190e2f06360 100644 --- a/docs/sources/datasources/testdata.md +++ b/docs/sources/datasources/testdata.md @@ -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 diff --git a/docs/sources/datasources/zipkin.md b/docs/sources/datasources/zipkin.md index 3797243c624..61b078a6175 100644 --- a/docs/sources/datasources/zipkin.md +++ b/docs/sources/datasources/zipkin.md @@ -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: diff --git a/docs/sources/developers/plugins/error-handling.md b/docs/sources/developers/plugins/error-handling.md index daf3cae864d..f11935f2d89 100644 --- a/docs/sources/developers/plugins/error-handling.md +++ b/docs/sources/developers/plugins/error-handling.md @@ -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. diff --git a/docs/sources/developers/plugins/legacy/apps.md b/docs/sources/developers/plugins/legacy/apps.md index d4da640a775..a82f535a233 100644 --- a/docs/sources/developers/plugins/legacy/apps.md +++ b/docs/sources/developers/plugins/legacy/apps.md @@ -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 diff --git a/docs/sources/developers/plugins/legacy/defaults-and-editor-mode.md b/docs/sources/developers/plugins/legacy/defaults-and-editor-mode.md index 7981ed9f513..215eaa3bcbf 100644 --- a/docs/sources/developers/plugins/legacy/defaults-and-editor-mode.md +++ b/docs/sources/developers/plugins/legacy/defaults-and-editor-mode.md @@ -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. diff --git a/docs/sources/developers/plugins/legacy/snapshot-mode.md b/docs/sources/developers/plugins/legacy/snapshot-mode.md index 65061bbcaf1..6f98e5d2364 100644 --- a/docs/sources/developers/plugins/legacy/snapshot-mode.md +++ b/docs/sources/developers/plugins/legacy/snapshot-mode.md @@ -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. diff --git a/docs/sources/enterprise/datasource_permissions.md b/docs/sources/enterprise/datasource_permissions.md index 53074d14ce4..475ebb8c87a 100644 --- a/docs/sources/enterprise/datasource_permissions.md +++ b/docs/sources/enterprise/datasource_permissions.md @@ -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. diff --git a/docs/sources/enterprise/enhanced_ldap.md b/docs/sources/enterprise/enhanced_ldap.md index eebc87ca98c..272ab48e550 100644 --- a/docs/sources/enterprise/enhanced_ldap.md +++ b/docs/sources/enterprise/enhanced_ldap.md @@ -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. diff --git a/docs/sources/enterprise/reporting.md b/docs/sources/enterprise/reporting.md index 08c7cfe0a15..32f59ba3b1e 100644 --- a/docs/sources/enterprise/reporting.md +++ b/docs/sources/enterprise/reporting.md @@ -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 diff --git a/docs/sources/enterprise/team-sync.md b/docs/sources/enterprise/team-sync.md index 21a44913629..1628c732ec6 100644 --- a/docs/sources/enterprise/team-sync.md +++ b/docs/sources/enterprise/team-sync.md @@ -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. diff --git a/docs/sources/enterprise/usage-insights/dashboard-datasource-insights.md b/docs/sources/enterprise/usage-insights/dashboard-datasource-insights.md index bc43e9056a8..c95410d3373 100644 --- a/docs/sources/enterprise/usage-insights/dashboard-datasource-insights.md +++ b/docs/sources/enterprise/usage-insights/dashboard-datasource-insights.md @@ -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" >}} diff --git a/docs/sources/enterprise/usage-insights/improved-search.md b/docs/sources/enterprise/usage-insights/improved-search.md index 5262f77fd94..675d37b5132 100644 --- a/docs/sources/enterprise/usage-insights/improved-search.md +++ b/docs/sources/enterprise/usage-insights/improved-search.md @@ -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" >}} diff --git a/docs/sources/enterprise/usage-insights/presence-indicator.md b/docs/sources/enterprise/usage-insights/presence-indicator.md index 0425097bbe7..75b8a575d29 100644 --- a/docs/sources/enterprise/usage-insights/presence-indicator.md +++ b/docs/sources/enterprise/usage-insights/presence-indicator.md @@ -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: diff --git a/docs/sources/enterprise/white-labeling.md b/docs/sources/enterprise/white-labeling.md index e08b8e1fdba..4b3ebe55975 100644 --- a/docs/sources/enterprise/white-labeling.md +++ b/docs/sources/enterprise/white-labeling.md @@ -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">}}). diff --git a/docs/sources/explore/_index.md b/docs/sources/explore/_index.md index db80494ac55..703b4785277 100644 --- a/docs/sources/explore/_index.md +++ b/docs/sources/explore/_index.md @@ -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 diff --git a/docs/sources/explore/logs-integration.md b/docs/sources/explore/logs-integration.md index df91c045e1d..f55a0404b3f 100644 --- a/docs/sources/explore/logs-integration.md +++ b/docs/sources/explore/logs-integration.md @@ -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" >}} diff --git a/docs/sources/explore/query-management.md b/docs/sources/explore/query-management.md index f53c8000766..f907c6cd525 100644 --- a/docs/sources/explore/query-management.md +++ b/docs/sources/explore/query-management.md @@ -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 diff --git a/docs/sources/explore/trace-integration.md b/docs/sources/explore/trace-integration.md index 8b7dce1310a..eb038790e46 100644 --- a/docs/sources/explore/trace-integration.md +++ b/docs/sources/explore/trace-integration.md @@ -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. | diff --git a/docs/sources/getting-started/getting-started-influxdb.md b/docs/sources/getting-started/getting-started-influxdb.md index b8cddfb6075..6e1549ca36d 100644 --- a/docs/sources/getting-started/getting-started-influxdb.md +++ b/docs/sources/getting-started/getting-started-influxdb.md @@ -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. diff --git a/docs/sources/getting-started/getting-started-prometheus.md b/docs/sources/getting-started/getting-started-prometheus.md index 1ab3160259c..576f0dd00b7 100644 --- a/docs/sources/getting-started/getting-started-prometheus.md +++ b/docs/sources/getting-started/getting-started-prometheus.md @@ -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. - + diff --git a/docs/sources/getting-started/getting-started-sql.md b/docs/sources/getting-started/getting-started-sql.md index 15d9328498a..1957dbe461f 100644 --- a/docs/sources/getting-started/getting-started-sql.md +++ b/docs/sources/getting-started/getting-started-sql.md @@ -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. - + 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" >}}). diff --git a/docs/sources/http_api/auth.md b/docs/sources/http_api/auth.md index 49273c43507..3915cfd37b8 100755 --- a/docs/sources/http_api/auth.md +++ b/docs/sources/http_api/auth.md @@ -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: diff --git a/docs/sources/linking/data-links.md b/docs/sources/linking/data-links.md index 9bdd2ff8a48..6b2057434d3 100644 --- a/docs/sources/linking/data-links.md +++ b/docs/sources/linking/data-links.md @@ -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 diff --git a/docs/sources/linking/panel-links.md b/docs/sources/linking/panel-links.md index a42f69f446c..1abbe12a5ef 100644 --- a/docs/sources/linking/panel-links.md +++ b/docs/sources/linking/panel-links.md @@ -12,7 +12,7 @@ weight = 300 Click the icon on the top left corner of a panel to see available panel links. - + ## Add a panel link diff --git a/docs/sources/manage-users/manage-teams/index.md b/docs/sources/manage-users/manage-teams/index.md index 7ca7945504f..579594c415d 100644 --- a/docs/sources/manage-users/manage-teams/index.md +++ b/docs/sources/manage-users/manage-teams/index.md @@ -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 diff --git a/docs/sources/manage-users/org-admin/index.md b/docs/sources/manage-users/org-admin/index.md index 4133769d6d7..7375530dc16 100644 --- a/docs/sources/manage-users/org-admin/index.md +++ b/docs/sources/manage-users/org-admin/index.md @@ -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 diff --git a/docs/sources/manage-users/server-admin/server-admin-manage-orgs.md b/docs/sources/manage-users/server-admin/server-admin-manage-orgs.md index 1983cf84419..61766923e70 100644 --- a/docs/sources/manage-users/server-admin/server-admin-manage-orgs.md +++ b/docs/sources/manage-users/server-admin/server-admin-manage-orgs.md @@ -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 diff --git a/docs/sources/manage-users/server-admin/server-admin-manage-users.md b/docs/sources/manage-users/server-admin/server-admin-manage-users.md index 74eed2a4cfb..1a5719a8556 100644 --- a/docs/sources/manage-users/server-admin/server-admin-manage-users.md +++ b/docs/sources/manage-users/server-admin/server-admin-manage-users.md @@ -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 diff --git a/docs/sources/menu.yaml b/docs/sources/menu.yaml deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/docs/sources/panels/_index.md b/docs/sources/panels/_index.md index 4d2848c9847..3649feb9b3d 100644 --- a/docs/sources/panels/_index.md +++ b/docs/sources/panels/_index.md @@ -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 diff --git a/docs/sources/panels/add-a-panel.md b/docs/sources/panels/add-a-panel.md index 3229affda15..b9f7c4b51cd 100644 --- a/docs/sources/panels/add-a-panel.md +++ b/docs/sources/panels/add-a-panel.md @@ -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" >}}). diff --git a/docs/sources/panels/legend-options.md b/docs/sources/panels/legend-options.md index 469167667e8..afb287bee79 100644 --- a/docs/sources/panels/legend-options.md +++ b/docs/sources/panels/legend-options.md @@ -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) diff --git a/docs/sources/panels/panel-editor.md b/docs/sources/panels/panel-editor.md index be050a75d80..847bd39f5c6 100644 --- a/docs/sources/panels/panel-editor.md +++ b/docs/sources/panels/panel-editor.md @@ -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" >}}). diff --git a/docs/sources/panels/panel-options.md b/docs/sources/panels/panel-options.md index eed0433cfa5..175c803b29b 100644 --- a/docs/sources/panels/panel-options.md +++ b/docs/sources/panels/panel-options.md @@ -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 diff --git a/docs/sources/panels/queries.md b/docs/sources/panels/queries.md index 040747c5443..94d65a1d35a 100644 --- a/docs/sources/panels/queries.md +++ b/docs/sources/panels/queries.md @@ -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 diff --git a/docs/sources/panels/standard-options.md b/docs/sources/panels/standard-options.md index bce5e429498..fc90a532bd3 100644 --- a/docs/sources/panels/standard-options.md +++ b/docs/sources/panels/standard-options.md @@ -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. diff --git a/docs/sources/panels/transformations/apply-transformations.md b/docs/sources/panels/transformations/apply-transformations.md index 94c4db423f0..6dcf193e2c5 100644 --- a/docs/sources/panels/transformations/apply-transformations.md +++ b/docs/sources/panels/transformations/apply-transformations.md @@ -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" >}} diff --git a/docs/sources/panels/transformations/types-options.md b/docs/sources/panels/transformations/types-options.md index f4da1570436..f76cc993efb 100644 --- a/docs/sources/panels/transformations/types-options.md +++ b/docs/sources/panels/transformations/types-options.md @@ -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" >}} diff --git a/docs/sources/panels/visualizations/alert-list-panel.md b/docs/sources/panels/visualizations/alert-list-panel.md index 5181a56d3e3..3e144fa404e 100644 --- a/docs/sources/panels/visualizations/alert-list-panel.md +++ b/docs/sources/panels/visualizations/alert-list-panel.md @@ -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. diff --git a/docs/sources/panels/visualizations/bar-gauge-panel.md b/docs/sources/panels/visualizations/bar-gauge-panel.md index f24d1544fe6..34fbce29cb8 100644 --- a/docs/sources/panels/visualizations/bar-gauge-panel.md +++ b/docs/sources/panels/visualizations/bar-gauge-panel.md @@ -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 diff --git a/docs/sources/panels/visualizations/dashboard-list-panel.md b/docs/sources/panels/visualizations/dashboard-list-panel.md index b07fb10e3ed..812e4b594a0 100644 --- a/docs/sources/panels/visualizations/dashboard-list-panel.md +++ b/docs/sources/panels/visualizations/dashboard-list-panel.md @@ -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. diff --git a/docs/sources/panels/visualizations/gauge-panel.md b/docs/sources/panels/visualizations/gauge-panel.md index 408260c9356..42401b0b222 100644 --- a/docs/sources/panels/visualizations/gauge-panel.md +++ b/docs/sources/panels/visualizations/gauge-panel.md @@ -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 diff --git a/docs/sources/panels/visualizations/heatmap.md b/docs/sources/panels/visualizations/heatmap.md index 7c261a156c9..7d77088c2f5 100644 --- a/docs/sources/panels/visualizations/heatmap.md +++ b/docs/sources/panels/visualizations/heatmap.md @@ -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 diff --git a/docs/sources/panels/visualizations/logs-panel.md b/docs/sources/panels/visualizations/logs-panel.md index b0a5977c744..c2d9352956b 100644 --- a/docs/sources/panels/visualizations/logs-panel.md +++ b/docs/sources/panels/visualizations/logs-panel.md @@ -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+. - + 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. diff --git a/docs/sources/panels/visualizations/node-graph.md b/docs/sources/panels/visualizations/node-graph.md index 49a00c73dd4..1817853d5be 100644 --- a/docs/sources/panels/visualizations/node-graph.md +++ b/docs/sources/panels/visualizations/node-graph.md @@ -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. | diff --git a/docs/sources/panels/visualizations/pie-chart-panel.md b/docs/sources/panels/visualizations/pie-chart-panel.md index 21a9e5aa222..e3b24bce34d 100644 --- a/docs/sources/panels/visualizations/pie-chart-panel.md +++ b/docs/sources/panels/visualizations/pie-chart-panel.md @@ -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" >}} diff --git a/docs/sources/panels/visualizations/stat-panel.md b/docs/sources/panels/visualizations/stat-panel.md index 18744311b4d..9cd073ca4c1 100644 --- a/docs/sources/panels/visualizations/stat-panel.md +++ b/docs/sources/panels/visualizations/stat-panel.md @@ -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 diff --git a/docs/sources/panels/visualizations/table/_index.md b/docs/sources/panels/visualizations/table/_index.md index 88a4014786d..372fa4ca778 100644 --- a/docs/sources/panels/visualizations/table/_index.md +++ b/docs/sources/panels/visualizations/table/_index.md @@ -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. diff --git a/docs/sources/panels/visualizations/table/filter-table-columns.md b/docs/sources/panels/visualizations/table/filter-table-columns.md index c5701e76d27..ab60122d16f 100644 --- a/docs/sources/panels/visualizations/table/filter-table-columns.md +++ b/docs/sources/panels/visualizations/table/filter-table-columns.md @@ -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**. \ No newline at end of file diff --git a/docs/sources/panels/visualizations/table/table-field-options.md b/docs/sources/panels/visualizations/table/table-field-options.md index 1db2362a946..a824786bcc4 100644 --- a/docs/sources/panels/visualizations/table/table-field-options.md +++ b/docs/sources/panels/visualizations/table/table-field-options.md @@ -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 diff --git a/docs/sources/panels/visualizations/time-series/change-axis-display.md b/docs/sources/panels/visualizations/time-series/change-axis-display.md index 382ad19f519..5497ee9265a 100644 --- a/docs/sources/panels/visualizations/time-series/change-axis-display.md +++ b/docs/sources/panels/visualizations/time-series/change-axis-display.md @@ -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 diff --git a/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md b/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md index 8e4c6e3645a..534b645753f 100644 --- a/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md +++ b/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md @@ -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) diff --git a/docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md b/docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md index cdd5bf24bae..b2b77678a4f 100644 --- a/docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md +++ b/docs/sources/panels/visualizations/time-series/graph-time-series-as-lines.md @@ -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) diff --git a/docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md b/docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md index c1f3888de9d..7a00d33d05b 100644 --- a/docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md +++ b/docs/sources/panels/visualizations/time-series/graph-time-series-as-points.md @@ -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" >}} diff --git a/docs/sources/panels/visualizations/time-series/graph-time-series-stacking.md b/docs/sources/panels/visualizations/time-series/graph-time-series-stacking.md index c2ea5ab2325..53f320ae177 100644 --- a/docs/sources/panels/visualizations/time-series/graph-time-series-stacking.md +++ b/docs/sources/panels/visualizations/time-series/graph-time-series-stacking.md @@ -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) diff --git a/docs/sources/permissions/dashboard-folder-permissions.md b/docs/sources/permissions/dashboard-folder-permissions.md index 6479ac781c6..7a6f977cf31 100644 --- a/docs/sources/permissions/dashboard-folder-permissions.md +++ b/docs/sources/permissions/dashboard-folder-permissions.md @@ -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 diff --git a/docs/sources/sharing/playlists.md b/docs/sources/sharing/playlists.md index e6c85cd0af6..6a1ad91b1a2 100644 --- a/docs/sources/sharing/playlists.md +++ b/docs/sources/sharing/playlists.md @@ -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 diff --git a/docs/sources/sharing/share-dashboard.md b/docs/sources/sharing/share-dashboard.md index 8601af0b319..e805eb44383 100644 --- a/docs/sources/sharing/share-dashboard.md +++ b/docs/sources/sharing/share-dashboard.md @@ -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) diff --git a/docs/sources/sharing/share-panel.md b/docs/sources/sharing/share-panel.md index 7c8255e8a0c..981296a97bb 100644 --- a/docs/sources/sharing/share-panel.md +++ b/docs/sources/sharing/share-panel.md @@ -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: diff --git a/docs/sources/troubleshooting/troubleshoot-dashboards.md b/docs/sources/troubleshooting/troubleshoot-dashboards.md index 41c8f1d5eef..c53e044ea68 100644 --- a/docs/sources/troubleshooting/troubleshoot-dashboards.md +++ b/docs/sources/troubleshooting/troubleshoot-dashboards.md @@ -35,8 +35,8 @@ In the picture below we have enabled: - Points and 3-point radius to highlight where data points are actually present. - **Null value** is set to **connected**. -{{< docs-imagebox img="/img/docs/troubleshooting/grafana_null_connected.png" max-width="1200px" >}} +{{< figure src="/static/img/docs/troubleshooting/grafana_null_connected.png" max-width="1200px" >}} In this graph, we set graph to show bars instead of lines and set the **Null value** to graph **null as zero**. There is a very big different in the visuals. -{{< docs-imagebox img="/img/docs/troubleshooting/grafana_null_zero.png" max-width="1200px" >}} +{{< figure src="/static/img/docs/troubleshooting/grafana_null_zero.png" max-width="1200px" >}} diff --git a/docs/sources/variables/_index.md b/docs/sources/variables/_index.md index 97d58281089..4f2eeeba8ca 100644 --- a/docs/sources/variables/_index.md +++ b/docs/sources/variables/_index.md @@ -11,7 +11,7 @@ the value, using the dropdown at the top of the dashboard, your panel's metric q Variables allow you to create more interactive and dynamic dashboards. Instead of hard-coding things like server, application, and sensor names in your metric queries, you can use variables in their place. Variables are displayed as dropdown lists at the top of the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. -{{< docs-imagebox img="/img/docs/v50/variables_dashboard.png" >}} +{{< figure src="/static/img/docs/v50/variables_dashboard.png" >}} These can be especially useful for administrators who want to allow Grafana viewers to quickly adjust visualizations but do not want to give them full editing permissions. Grafana Viewers can use variables. diff --git a/docs/sources/variables/inspect-variable.md b/docs/sources/variables/inspect-variable.md index ab421d7b33b..f9502ca3277 100644 --- a/docs/sources/variables/inspect-variable.md +++ b/docs/sources/variables/inspect-variable.md @@ -11,12 +11,12 @@ The variables page lets you easily identify whether a variable is being referenc > **Note:** This feature is available in Grafana 7.4 and later versions. -![Variables list](/img/docs/variables-templates/variables-list-7-4.png) +![Variables list](/static/img/docs/variables-templates/variables-list-7-4.png) Any variable that is referenced or used has a green check mark next to it, while unreferenced variables have a orange caution icon next to them. -![Variables list](/img/docs/variables-templates/variable-not-referenced-7-4.png) +![Variables list](/static/img/docs/variables-templates/variable-not-referenced-7-4.png) In addition, all referenced variables have a dependency icon next to the green check mark. You can click on the icon to view the dependency map. The dependency map can be moved. You can zoom in out with mouse wheel or track pad equivalent. -![Variables list](/img/docs/variables-templates/dependancy-map-7-4.png) +![Variables list](/static/img/docs/variables-templates/dependancy-map-7-4.png) diff --git a/docs/sources/whatsnew/whats-new-in-v2-0.md b/docs/sources/whatsnew/whats-new-in-v2-0.md index 7c037b70188..3aca95b8e1c 100644 --- a/docs/sources/whatsnew/whats-new-in-v2-0.md +++ b/docs/sources/whatsnew/whats-new-in-v2-0.md @@ -53,7 +53,7 @@ even zoom in). Also they are fast to load as they aren't actually connected to a They're a great way to communicate about a particular incident with specific people who aren't users of your Grafana instance. You can also use them to show off your dashboards over the Internet. -![](/img/docs/v2/dashboard_snapshot_dialog.png) +![](/static/img/docs/v2/dashboard_snapshot_dialog.png) ### Publish snapshots @@ -65,11 +65,11 @@ Either way, anyone with the link (and access to your Grafana instance for local In Grafana v2.x you can now override the relative time range for individual panels, causing them to be different than what is selected in the Dashboard time picker in the upper right. You can also add a time shift to individual panels. This allows you to show metrics from different time periods or days at the same time. -![](/img/docs/v2/panel_time_override.jpg) +![](/static/img/docs/v2/panel_time_override.jpg) You control these overrides in panel editor mode and the new tab `Time Range`. -![](/img/docs/v2/time_range_tab.jpg) +![](/static/img/docs/v2/time_range_tab.jpg) When you zoom or change the Dashboard time to a custom absolute time range, all panel overrides will be disabled. The panel relative time override is only active when the dashboard time is also relative. The panel timeshift override however is always active, even when the dashboard time is absolute. @@ -94,7 +94,7 @@ This feature makes it easy to include interactive visualizations from your Grafa The top header has gotten a major streamlining in Grafana V2.0. - + 1. `Side menubar toggle` Toggle the side menubar on or off. This allows you to focus on the data presented on the Dashboard. The side menubar provides access to features unrelated to a Dashboard such as Users, Organizations, and Data Sources. 1. `Dashboard dropdown` The main dropdown shows you which Dashboard you are currently viewing, and allows you to easily switch to a new Dashboard. From here you can also create a new Dashboard, Import existing Dashboards, and manage the Playlist. @@ -119,7 +119,7 @@ You can easily collapse or re-open the side menubar at any time by clicking the ## New search view and starring dashboards -![](/img/docs/v2/dashboard_search.jpg) +![](/static/img/docs/v2/dashboard_search.jpg) The dashboard search view has gotten a big overhaul. You can now see and filter by which dashboard you have personally starred. @@ -128,11 +128,11 @@ The dashboard search view has gotten a big overhaul. You can now see and filter The Graph panel now supports 3 logarithmic scales, `log base 10`, `log base 32`, `log base 1024`. Logarithmic y-axis scales are very useful when rendering many series of different order of magnitude on the same scale (eg. latency, network traffic, and storage) -![](/img/docs/v2/graph_logbase10_ms.png) +![](/static/img/docs/v2/graph_logbase10_ms.png) ## Dashlist panel -![](/img/docs/v2/dashlist_starred.png) +![](/static/img/docs/v2/dashlist_starred.png) The dashlist is a new panel in Grafana v2.0. It allows you to show your personal starred dashboards, as well as do custom searches based on search strings or tags. @@ -151,7 +151,7 @@ In addition, connections to Data Sources can be better controlled and secured, a A commonly reported problem has been graphs dipping to zero at the end, because metric data for the last interval has yet to be written to the Data Source. These graphs then "self correct" once the data comes in, but can look deceiving or alarming at times. You can avoid this problem by adding a `now delay` in `Dashboard Settings` > `Time Picker` tab. This new feature will cause Grafana to ignore the most recent data up to the set delay. -![](/img/docs/v2/timepicker_now_delay.jpg) +![](/static/img/docs/v2/timepicker_now_delay.jpg) The delay that may be necessary depends on how much latency you have in your collection pipeline. @@ -159,7 +159,7 @@ The delay that may be necessary depends on how much latency you have in your col Grafana v2.0 protects Users from accidentally overwriting each others Dashboard changes. Similar protections are in place if you try to create a new Dashboard with the same name as an existing one. -![](/img/docs/v2/overwrite_protection.jpg) +![](/static/img/docs/v2/overwrite_protection.jpg) These protections are only the first step; we will be building out additional capabilities around dashboard versioning and management in future versions of Grafana. @@ -175,4 +175,4 @@ Grafana now supports server-side PNG rendering. From the Panel share dialog you > **Note:** This requires that your Data Source is accessible from your Grafana instance. -![](/img/docs/v2/share_dialog_image_highlight.jpg) +![](/static/img/docs/v2/share_dialog_image_highlight.jpg) diff --git a/docs/sources/whatsnew/whats-new-in-v2-1.md b/docs/sources/whatsnew/whats-new-in-v2-1.md index b4699b5c1c4..1a67255c0e8 100644 --- a/docs/sources/whatsnew/whats-new-in-v2-1.md +++ b/docs/sources/whatsnew/whats-new-in-v2-1.md @@ -21,7 +21,7 @@ A template variable with Multi-Value enabled allows for the selection of multipl These variables can then be used in any Panel to make them more dynamic, and to give you the perfect view of your data. Multi-Value variables are also enabling the new `row repeat` and `panel repeat` feature described below. -![Multi-Value Select](/img/docs/v2/multi-select.gif "Multi-Value Select") +![Multi-Value Select](/static/img/docs/v2/multi-select.gif "Multi-Value Select")

### Repeating Rows and Panels @@ -29,7 +29,7 @@ It’s now possible to create a dashboard that automatically adds (or removes) b on selected variable values. Any row or any panel can be configured to repeat (duplicate itself) based on a multi-value template variable.

-![Repeating Rows and Panels](/img/docs/v2/panel-row-repeat.gif "Repeating Rows and Panels") +![Repeating Rows and Panels](/static/img/docs/v2/panel-row-repeat.gif "Repeating Rows and Panels")

### Dashboard Links and Navigation @@ -37,7 +37,7 @@ To support better navigation between dashboards, it's now possible to create cus panels to appropriate Dashboards. You also have the ability to create flexible top-level links on any given dashboard thanks to the new dashboard navigation bar feature. -![Dashboard Links](/img/docs/v2/dash_links.png "Dashboard Links") +![Dashboard Links](/static/img/docs/v2/dash_links.png "Dashboard Links") Dashboard links can be added under dashboard settings. Either defined as static URLs with a custom icon or as dynamic dashboard links or dropdowns based on custom dashboard search query. These links appear in the same @@ -86,7 +86,7 @@ The Viewer role has been modified in Grafana 2.1 so that users assigned this rol Grafana 2.1 now comes with full support for InfluxDB 0.9. There is a new query editor designed from scratch for the new features InfluxDB 0.9 enables. -![InfluxDB Editor](/img/docs/v2/influx_09_editor_anim.gif "InfluxDB Editor") +![InfluxDB Editor](/static/img/docs/v2/influx_09_editor_anim.gif "InfluxDB Editor")
@@ -114,15 +114,15 @@ Define series color using regex rule. This is useful when you have templated gra that change depending selected template variables. Using a regex style override rule you could for example make all series that contain the word **CPU** `red` and assigned to the second y axis. -![Define series color using regex rule](/img/docs/v2/regex_color_override.png "Define series color using regex rule") +![Define series color using regex rule](/static/img/docs/v2/regex_color_override.png "Define series color using regex rule") New series style override, negative-y transform and stack groups. Negative y transform is very useful if you want to plot a series on the negative y scale without affecting the legend values like min or max or the values shown in the hover tooltip. -![Negative-y Transform](/img/docs/v2/negative-y.png "Negative-y Transform") +![Negative-y Transform](/static/img/docs/v2/negative-y.png "Negative-y Transform") -![Negative-y Transform](/img/docs/v2/negative-y-form.png "Negative-y Transform") +![Negative-y Transform](/static/img/docs/v2/negative-y-form.png "Negative-y Transform") ### Singlestat Panel Now support string values. Useful for time series database like InfluxDB that supports diff --git a/docs/sources/whatsnew/whats-new-in-v2-5.md b/docs/sources/whatsnew/whats-new-in-v2-5.md index 70d1fc63918..1d501710384 100644 --- a/docs/sources/whatsnew/whats-new-in-v2-5.md +++ b/docs/sources/whatsnew/whats-new-in-v2-5.md @@ -16,7 +16,7 @@ fixes and enhancements to all areas of Grafana, like new Data Sources, a new and resize handles and improved InfluxDB and OpenTSDB support. ### New time range controls -New Time picker +New Time picker A new timepicker with room for more quick ranges as well as new types of relative ranges, like `Today`, `The day so far` and `This day last week`. Also an improved time and calendar picker that now works @@ -24,7 +24,7 @@ correctly in UTC mode. ### Elasticsearch -Elasticsearch example +Elasticsearch example
This release brings a fully featured query editor for Elasticsearch. You will now be able to visualize @@ -44,7 +44,7 @@ Try the new Elasticsearch query editor on the [play.grafana.org](https://play.gr ### CloudWatch -Cloudwatch editor +Cloudwatch editor Grafana 2.5 ships with a new CloudWatch data source that will allow you to query and visualize CloudWatch metrics directly from Grafana. @@ -55,14 +55,14 @@ metrics directly from Grafana. ### Prometheus -Prometheus editor +Prometheus editor Grafana 2.5 ships with a new Prometheus data source that will allow you to query and visualize data stored in Prometheus. ### Mix different data sources -Mix data sources in the same dashboard or in the same graph! +Mix data sources in the same dashboard or in the same graph! In previous releases you have been able to mix different data sources on the same dashboard. In v2.5 you will be able to mix then on the same graph! You can enable this by selecting the built in `-- Mixed --` data source. @@ -71,12 +71,12 @@ to plot metrics from different Graphite servers on the same Graph or plot data f data from Prometheus. Mixing different data sources on the same graph works for any data source, even custom ones. ### Panel Resize handles - + This release adds resize handles to the bottom right corners of panels making it easy to resize both width and height. ### User invites - + This version also brings some new features for user management. diff --git a/docs/sources/whatsnew/whats-new-in-v2-6.md b/docs/sources/whatsnew/whats-new-in-v2-6.md index b9b27e820cd..e0ed75e5eff 100644 --- a/docs/sources/whatsnew/whats-new-in-v2-6.md +++ b/docs/sources/whatsnew/whats-new-in-v2-6.md @@ -25,7 +25,7 @@ table, annotation and raw JSON data. It also provides date formatting and value In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series. - + ### Table Transform Above you see the options tab for the **Table Panel**. The most important option is the `To Table Transform`. @@ -38,7 +38,7 @@ The column styles allow you control how dates and numbers are formatted. This transform allows you to take multiple time series and group them by time. Which will result in a `Time` column and a column for each time series. - + In the screenshot above you can see how the same time series query as in the previous example can be transformed into a different table by changing the `To Table Transform` to `Time series to columns`. @@ -47,7 +47,7 @@ a different table by changing the `To Table Transform` to `Time series to colum This transform works very similar to the legend values in the Graph panel. Each series gets its own row. In the Options tab you can select which aggregations you want using the plus button the Columns section. - + You have to think about how accurate the aggregations will be. It depends on what aggregation is used in the time series query, how many data points are fetched, etc. The time series aggregations are calculated by Grafana after aggregation is performed @@ -57,25 +57,25 @@ by the time series database. If you want to show documents from Elasticsearch pick `Raw Document` as the first metric. - + This in combination with the `JSON Data` table transform will allow you to pick which fields in the document you want to show in the table. - + ### Elasticsearch aggregations You can also make Elasticsearch aggregation queries without a `Date Histogram`. This allows you to use Elasticsearch metric aggregations to get accurate aggregations for the selected time range. - + ### Annotations The table can also show any annotations you have enabled in the dashboard. - + ## The New InfluxDB Editor The new InfluxDB editor is a lot more flexible and powerful. It supports nested functions, like `derivative`. @@ -89,7 +89,7 @@ group by time you need an aggregation function. Some functions like derivative r The editor tries 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 will generate the following InfluxDB `SELECT` clause: @@ -116,7 +116,7 @@ If you have Elasticsearch 2.x and Grafana 2.6 or above then you can use pipeline **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. -![](/img/docs/elasticsearch/pipeline_metrics_editor.png) +![](/static/img/docs/elasticsearch/pipeline_metrics_editor.png) ## Changelog For a detailed list and link to github issues for everything included in the 2.6 release please diff --git a/docs/sources/whatsnew/whats-new-in-v3-0.md b/docs/sources/whatsnew/whats-new-in-v3-0.md index cf6a51815e1..f4c79a3056c 100644 --- a/docs/sources/whatsnew/whats-new-in-v3-0.md +++ b/docs/sources/whatsnew/whats-new-in-v3-0.md @@ -41,7 +41,7 @@ entire experience right within Grafana. ## Grafana.com - + [Grafana.com](https://grafana.com) offers a central repository where the community can come together to discover, create and share plugins (data sources, panels, apps) and dashboards. @@ -99,7 +99,7 @@ periodically and remotely. You can also make Playlists dynamic by using Dashboard **tags** to define the Playlist. - + ## Improved UI @@ -119,11 +119,11 @@ are literally hundreds of UI improvements and refinements. Here’s the new side menu in action: - + And here's the new look for Dashboard settings: - + Check out the Play Site to get a feel for some of the UI changes. @@ -135,7 +135,7 @@ over the link and click the annotation text. This feature is very useful for linking to particular commits or tickets where more detailed information can be presented to the user. - + ## Data source variables @@ -143,11 +143,11 @@ This has been a top requested feature for very long we are excited to finally pr this feature. You can now add a new `Data source` type variable. That will automatically be filled with instance names of your data sources. - + You can then use this variable as the panel data source: - + This will allow you to quickly change data source server and reuse the same dashboard for different instances of your metrics backend. For example @@ -165,7 +165,7 @@ The Prometheus Data Source now supports annotations. ### InfluxDB You can now select the InfluxDB policy from the query editor. - + Grafana 3.0 also comes with support for InfluxDB 0.11 and InfluxDB 0.12. @@ -198,23 +198,23 @@ are a couple that I encourage you try! #### [Clock Panel](https://grafana.com/plugins/grafana-clock-panel) Support's both current time and count down mode. - + #### [Pie Chart Panel](https://grafana.com/plugins/grafana-piechart-panel) A simple pie chart panel is now available as an external plugin. - + #### [WorldPing App](https://grafana.com/plugins/raintank-worldping-app) This is full blown Grafana App that adds new panels, data sources and pages to give feature rich global performance monitoring directly from your on-prem Grafana. - + #### [Zabbix App](https://grafana.com/plugins/alexanderzobnin-zabbix-app) This app contains the already very pouplar Zabbix data source plugin, 2 dashboards and a triggers panel. It is created and maintained by [Alexander Zobnin](https://github.com/alexanderzobnin/grafana-zabbix). - + Check out the full list of plugins on [Grafana.com](https://grafana.com/plugins) diff --git a/docs/sources/whatsnew/whats-new-in-v3-1.md b/docs/sources/whatsnew/whats-new-in-v3-1.md index 32fe80dade4..e138ca8286d 100644 --- a/docs/sources/whatsnew/whats-new-in-v3-1.md +++ b/docs/sources/whatsnew/whats-new-in-v3-1.md @@ -14,17 +14,17 @@ list = false The export feature is now accessed from the share menu. - + Dashboards exported from Grafana 3.1 are now more portable and easier for others to import than before. The export process extracts information data source types used by panels and adds these to a new `inputs` section in the dashboard json. So when you or another person tries to import the dashboard they will be asked to select data source and optional metric prefix options. - + The above screenshot shows the new import modal that gives you 3 options for how to import a dashboard. One notable new addition here is the ability to import directly from Dashboards shared on [Grafana.com](https://grafana.com). The next step in the import process: - + Here you can change the name of the dashboard and also pick what data sources you want the dashboard to use. The above screenshot shows a CollectD dashboard for Graphite that requires a metric prefix be specified. @@ -32,7 +32,7 @@ Here you can change the name of the dashboard and also pick what data sources yo On [Grafana.com](https://grafana.com) you can now browse and search for dashboards. We have already added a few but more are being uploaded every day. To import a dashboard just copy the dashboard URL and head back to Grafana, then Dashboard Search -> Import -> Paste Grafana.com Dashboard URL. - + ## Constant template variables diff --git a/docs/sources/whatsnew/whats-new-in-v4-0.md b/docs/sources/whatsnew/whats-new-in-v4-0.md index e0c23e92b09..0c2e46b5899 100644 --- a/docs/sources/whatsnew/whats-new-in-v4-0.md +++ b/docs/sources/whatsnew/whats-new-in-v4-0.md @@ -15,7 +15,7 @@ is a core new feature: Alerting! Read on below for a detailed description of wha ## Alerting -{{< imgbox max-width="40%" img="/img/docs/v4/drag_handles_gif.gif" caption="Alerting overview" >}} +{{< figure class="float-right" max-width="40%" src="/static/img/docs/v4/drag_handles_gif.gif" caption="Alerting overview" >}} Alerting is a really revolutionary feature for Grafana. It transforms Grafana from a visualization tool into a truly mission critical monitoring tool. The alert rules are very easy to @@ -33,7 +33,7 @@ on but will be not ready for v4 release. ### Rules -{{< 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" >}} The rule configuration allows you to specify a name, how often the rule should be evaluated and a series of conditions that all need to be true for the alert to fire. @@ -48,7 +48,7 @@ of another alert in your conditions, and `Time Of Day`. ### Notifications -{{< 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" >}} Alerting would not be very useful if there was no way to send notifications when rules trigger and change state. You can set up notifications of different types. We currently have `Slack`, `PagerDuty`, `Email` and `Webhook` with more in the @@ -66,7 +66,7 @@ to add graph comments in the form of annotations directly from within Grafana in ### Alert List Panel -{{< imgbox max-width="30%" img="/img/docs/v4/alert_list_panel.png" caption="Alert List Panel" >}} +{{< figure class="float-right" max-width="30%" src="/static/img/docs/v4/alert_list_panel.png" caption="Alert List Panel" >}} This new panel allows you to show alert rules or a history of alert rule state changes. You can filter based on states you are interested in. This panel is very useful for overview style dashboards. @@ -75,7 +75,7 @@ interested in. This panel is very useful for overview style dashboards. ## Ad-hoc filter variable -{{< imgbox max-width="30%" img="/img/docs/v4/adhoc_filters.gif" caption="Ad-hoc filters variable" >}} +{{< figure class="float-right" max-width="30%" src="/static/img/docs/v4/adhoc_filters.gif" caption="Ad-hoc filters variable" >}} This is a new and very different type of template variable. It will allow you to create new key/value filters on the fly with autocomplete for both key and values. The filter condition will be automatically applied to all @@ -111,9 +111,9 @@ We always try to bring some UX/UI refinements and polish in every release.

- {{< lightboxhelper max-width="100%" img="/img/docs/v4/tvmode.png" caption="TV mode" >}} + {{< figure src="/static/img/docs/v4/tvmode.png" caption="TV mode" >}}
@@ -121,7 +121,7 @@ We always try to bring some UX/UI refinements and polish in every release. ### New row menu and add panel experience -{{< imgbox max-width="50%" img="/img/docs/v4/add_panel.gif" caption="Add Panel flow" >}} +{{< figure class="float-right" max-width="50%" src="/static/img/docs/v4/add_panel.gif" caption="Add Panel flow" >}} We spent a lot of time improving the dashboard building experience to make it both more efficient and easier for beginners. After many good but not great experiments @@ -144,7 +144,7 @@ We plan to further improve dashboard building in the future with a more rich gri ### Keyboard shortcuts -{{< imgbox max-width="40%" img="/img/docs/v4/shortcuts.png" caption="Shortcuts" >}} +{{< figure class="float-right" max-width="40%" src="/static/img/docs/v4/shortcuts.png" caption="Shortcuts" >}} Grafana v4 introduces a number of really powerful keyboard shortcuts. You can now focus a panel by hovering over it with your mouse. With a panel focused you can simply hit `e` to toggle panel diff --git a/docs/sources/whatsnew/whats-new-in-v4-1.md b/docs/sources/whatsnew/whats-new-in-v4-1.md index ab9f5cd4f32..17d4cd9b244 100644 --- a/docs/sources/whatsnew/whats-new-in-v4-1.md +++ b/docs/sources/whatsnew/whats-new-in-v4-1.md @@ -19,7 +19,7 @@ list = false ### Shared tooltip -{{< imgbox max-width="60%" img="/img/docs/v41/shared_tooltip.gif" caption="Shared tooltip" >}} +{{< figure class="float-right" max-width="60%" src="/static/img/docs/v41/shared_tooltip.gif" caption="Shared tooltip" >}} Showing the tooltip on all panels at the same time has been a long standing request in Grafana and we are really happy to finally be able to release it. You can enable/disable the shared tooltip from the dashboard settings menu or cycle between default, shared tooltip and shared crosshair by pressing Ctrl/Cmd+O. @@ -28,20 +28,20 @@ You can enable/disable the shared tooltip from the dashboard settings menu or cy ### Help text for panel -{{< imgbox max-width="60%" img="/img/docs/v41/helptext_for_panel_settings.png" caption="Hovering help text" >}} +{{< figure class="float-right" max-width="60%" src="/static/img/docs/v41/helptext_for_panel_settings.png" caption="Hovering help text" >}} You can set a help text in the general tab on any panel. The help text is using Markdown to enable better formatting and linking to other sites that can provide more information.
-{{< imgbox max-width="60%" img="/img/docs/v41/helptext_hover.png" caption="Hovering help text" >}} +{{< figure class="float-right" max-width="60%" src="/static/img/docs/v41/helptext_hover.png" caption="Hovering help text" >}} Panels with a help text available have a little indicator in the top left corner. You can show the help text by hovering the icon.
### Easier Cloudwatch configuration -{{< imgbox max-width="60%" img="/img/docs/v41/cloudwatch_settings.png" caption="Cloudwatch configuration" >}} +{{< figure class="float-right" max-width="60%" src="/static/img/docs/v41/cloudwatch_settings.png" caption="Cloudwatch configuration" >}} In Grafana 4.1.0 you can configure your Cloudwatch data source with `access key` and `secret key` directly in the data source configuration page. This enables people to use the Cloudwatch data source without having access to the filesystem where Grafana is running. diff --git a/docs/sources/whatsnew/whats-new-in-v4-3.md b/docs/sources/whatsnew/whats-new-in-v4-3.md index deb62c6f853..b4c7b3c88cb 100644 --- a/docs/sources/whatsnew/whats-new-in-v4-3.md +++ b/docs/sources/whatsnew/whats-new-in-v4-3.md @@ -29,7 +29,7 @@ A Histogram is a kind of bar chart that groups numbers into ranges, often called The Graph Panel now supports Histograms. -![](/img/docs/v43/heatmap_histogram.png) +![](/static/img/docs/v43/heatmap_histogram.png) ## Histogram Aggregation Support for Elasticsearch @@ -41,7 +41,7 @@ The Histogram support in the Graph Panel does not show changes over time - it ag Every column in a Heatmap is a histogram snapshot. Instead of visualizing higher values with higher bars, a heatmap visualizes higher values with color. The histogram shown above is equivalent to one column in the heatmap shown below. -![](/img/docs/v43/heatmap_histogram_over_time.png) +![](/static/img/docs/v43/heatmap_histogram_over_time.png) The Heatmap panel also works with Elasticsearch Histogram Aggregations for more accurate server side bucketing. @@ -56,11 +56,11 @@ labeling the state of the data source as Alpha. Instead of holding up the releas **The query editor can show the generated and interpolated SQL that is sent to the MySQL server.** -![](/img/docs/v43/mysql_table_query.png) +![](/static/img/docs/v43/mysql_table_query.png) **The query editor will also show any errors that resulted from running the query (very useful when you have a syntax error!).** -![](/img/docs/v43/mysql_query_error.png) +![](/static/img/docs/v43/mysql_query_error.png) ## Health Check Endpoint @@ -74,7 +74,7 @@ Grafana now delays loading panels until they become visible (scrolled into view) The Prometheus data source now supports the Table Data format by automatically assigning a column to a label. This makes it really easy to browse data in the table panel. -![](/img/docs/v43/prom_table_cols_as_labels.png) +![](/static/img/docs/v43/prom_table_cols_as_labels.png) ## Other Highlights From The Changelog diff --git a/docs/sources/whatsnew/whats-new-in-v4-5.md b/docs/sources/whatsnew/whats-new-in-v4-5.md index 50e938471f7..95a690ce269 100644 --- a/docs/sources/whatsnew/whats-new-in-v4-5.md +++ b/docs/sources/whatsnew/whats-new-in-v4-5.md @@ -16,20 +16,20 @@ list = false The new query editor has full syntax highlighting. As well as auto complete for metrics, functions, and range vectors. There are also integrated function docs right from the query editor! -{{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--block" animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}} +{{< figure src="/static/img/docs/v45/prometheus_query_editor_still.png" class="docs-image--block" animated-gif="/static/img/docs/v45/prometheus_query_editor.gif" >}} ### Elasticsearch: Add ad-hoc filters from the table panel -{{< docs-imagebox img="/img/docs/v45/elastic_ad_hoc_filters.png" class="docs-image--block" >}} +{{< figure src="/static/img/docs/v45/elastic_ad_hoc_filters.png" class="docs-image--block" >}} ### Table cell links! Create column styles that turn cells into links that use the value in the cell (or other row values) to generate a URL to another dashboard or system: -![](/img/docs/v45/table_links.jpg) +![](/static/img/docs/v45/table_links.jpg) ### Query Inspector Query Inspector is a new feature that shows query requests and responses. This can be helpful if a graph is not shown or shows something very different than what you expected. For more information about query inspector, refer to [using grafanas query inspector to troubleshoot issues](https://community.grafana.com/t/using-grafanas-query-inspector-to-troubleshoot-issues/2630). -![](/img/docs/v45/query_inspector.png) +![](/static/img/docs/v45/query_inspector.png) ## Changelog diff --git a/docs/sources/whatsnew/whats-new-in-v4-6.md b/docs/sources/whatsnew/whats-new-in-v4-6.md index 4e04c61c5ef..5e4ef6eabeb 100644 --- a/docs/sources/whatsnew/whats-new-in-v4-6.md +++ b/docs/sources/whatsnew/whats-new-in-v4-6.md @@ -14,7 +14,7 @@ Grafana v4.6 brings many enhancements to Annotations, Cloudwatch and Prometheus. ### Annotations -{{< docs-imagebox img="/img/docs/v46/add_annotation_region.png" max-width= "800px" >}} +{{< figure src="/static/img/docs/v46/add_annotation_region.png" max-width= "800px" >}} You can now add annotation events and regions right from the graph panel! Just hold Ctrl/Cmd+Click or drag region to open the **Add Annotation** view. The [Annotations]({{< relref "../dashboards/annotations.md" >}}) documentation is updated to include details on this new exciting feature. @@ -23,14 +23,14 @@ You can now add annotation events and regions right from the graph panel! Just h Cloudwatch now supports alerting. Set up alert rules for any Cloudwatch metric! -{{< docs-imagebox img="/img/docs/v46/cloudwatch_alerting.png" max-width= "800px" >}} +{{< figure src="/static/img/docs/v46/cloudwatch_alerting.png" max-width= "800px" >}} ### Postgres Grafana v4.6 now ships with a built-in data source plugin for Postgres. Have logs or metric data in Postgres? You can now visualize that data and define alert rules on it like any of our other data sources. -{{< docs-imagebox img="/img/docs/v46/postgres_table_query.png" max-width= "800px" >}} +{{< figure src="/static/img/docs/v46/postgres_table_query.png" max-width= "800px" >}} ### Prometheus diff --git a/docs/sources/whatsnew/whats-new-in-v5-0.md b/docs/sources/whatsnew/whats-new-in-v5-0.md index 87655854c0c..088a5a6277f 100644 --- a/docs/sources/whatsnew/whats-new-in-v5-0.md +++ b/docs/sources/whatsnew/whats-new-in-v5-0.md @@ -30,7 +30,7 @@ This is the most substantial update that Grafana has ever seen. This article wil ## New Dashboard Layout Engine -{{< docs-imagebox img="/img/docs/v50/new_grid.png" max-width="1000px" class="docs-image--right">}} +{{< figure src="/static/img/docs/v50/new_grid.png" max-width="1000px" class="docs-image--right">}} The new dashboard layout engine allows for much easier movement and sizing of panels, as other panels now move out of the way in a very intuitive way. Panels are sized independently, so rows are no longer necessary to create layouts. This opens @@ -43,7 +43,7 @@ with older versions of Grafana. ## New UX -{{< docs-imagebox img="/img/docs/v50/new_ux_nav.png" max-width="1000px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v50/new_ux_nav.png" max-width="1000px" class="docs-image--right" >}} Almost every page has seen significant UX improvements. All pages (except dashboard pages) have a new tab-based layout that improves navigation between pages. The side menu has also changed quite a bit. You can still hide the side menu completely if you click on the Grafana logo. @@ -51,7 +51,7 @@ Almost every page has seen significant UX improvements. All pages (except dashbo ## Dashboard Settings -{{< docs-imagebox img="/img/docs/v50/dashboard_settings.png" max-width="1000px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v50/dashboard_settings.png" max-width="1000px" class="docs-image--right" >}} Dashboard pages have a new header toolbar where buttons and actions are now all moved to the right. All the dashboard settings views have been combined with a side nav which allows you to easily move between different setting categories. @@ -59,7 +59,7 @@ settings views have been combined with a side nav which allows you to easily mov ## New Light Theme -{{< docs-imagebox img="/img/docs/v50/new_white_theme.png" max-width="1000px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v50/new_white_theme.png" max-width="1000px" class="docs-image--right" >}} This theme has not seen a lot of love in recent years and we felt it was time to give it a major overhaul. We are very happy with the result. @@ -67,7 +67,7 @@ This theme has not seen a lot of love in recent years and we felt it was time to ## Dashboard Folders -{{< docs-imagebox img="/img/docs/v50/new_search.png" max-width="1000px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v50/new_search.png" max-width="1000px" class="docs-image--right" >}} The big new feature that comes with Grafana v5.0 is dashboard folders. Now you can organize your dashboards in folders, which is very useful if you have a lot of dashboards or multiple teams. @@ -83,7 +83,7 @@ We hope to do more with teams in future releases like integration with LDAP and ## Permissions -{{< docs-imagebox img="/img/docs/v50/folder_permissions.png" max-width="1000px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v50/folder_permissions.png" max-width="1000px" class="docs-image--right" >}} You can assign permissions to folders and dashboards. The default user role-based permissions can be removed and replaced with specific teams or users enabling more control over what a user can see and edit. @@ -118,7 +118,7 @@ expects the dashboards to exist in the database. More info in the [dashboard pro ## Graphite Tags and Integrated Function Docs -{{< docs-imagebox img="/img/docs/v50/graphite_tags.png" max-width="1000px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v50/graphite_tags.png" max-width="1000px" class="docs-image--right" >}} The Graphite query editor has been updated to support the latest Graphite version (v1.2) that adds many new functions and support for querying by tags. You can now also view function documentation right in the query editor! diff --git a/docs/sources/whatsnew/whats-new-in-v5-1.md b/docs/sources/whatsnew/whats-new-in-v5-1.md index e4bbbe67e40..536d0e3188c 100644 --- a/docs/sources/whatsnew/whats-new-in-v5-1.md +++ b/docs/sources/whatsnew/whats-new-in-v5-1.md @@ -43,7 +43,7 @@ Please read the [updated documentation](/installation/docker/#migrate-to-v51-or- ## Prometheus -{{< docs-imagebox img="/img/docs/v51/prometheus_heatmap.png" max-width="800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v51/prometheus_heatmap.png" max-width="800px" class="docs-image--right" >}} The Prometheus data source now support transforming Prometheus histograms to the heatmap panel. Prometheus histogram is a powerful feature, and we're really happy to finally allow our users to render those as heatmaps. Please read [Heatmap panel documentation](/features/panels/heatmap/#pre-bucketed-data) @@ -55,7 +55,7 @@ Prometheus query editor also got support for autocomplete of template variables. ## Microsoft SQL Server -{{< docs-imagebox img="/img/docs/v51/mssql_query_editor_showcase.png" max-width= "800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v51/mssql_query_editor_showcase.png" max-width= "800px" class="docs-image--right" >}} Grafana v5.1 now ships with a built-in Microsoft SQL Server (MSSQL) data source plugin that allows you to query and visualize data from any Microsoft SQL Server 2005 or newer, including Microsoft Azure SQL Database. Do you have metric or log data in MSSQL? You can now visualize @@ -69,7 +69,7 @@ Please read [Using Microsoft SQL Server in Grafana documentation]({{< relref ".. ### Adding new panels to dashboards -{{< docs-imagebox img="/img/docs/v51/dashboard_add_panel.png" max-width= "800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v51/dashboard_add_panel.png" max-width= "800px" class="docs-image--right" >}} The control for adding new panels to dashboards have got some enhancements and now includes functionality to search for the type of panel you want to add. Further, the control has tabs separating functionality for adding new panels and pasting @@ -78,7 +78,7 @@ copied panels. By copying a panel in a dashboard it will be displayed in the `Paste` tab in *any* dashboard and allows you to paste the copied panel into the current dashboard. -{{< docs-imagebox img="/img/docs/v51/dashboard_panel_copy.png" max-width= "300px" >}} +{{< figure src="/static/img/docs/v51/dashboard_panel_copy.png" max-width= "300px" >}}
@@ -104,7 +104,7 @@ Filter Option | Example | Raw | Interpolated | Description ## Improved workflow for provisioned dashboards -{{< docs-imagebox img="/img/docs/v51/provisioning_cannot_save_dashboard.png" max-width="800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v51/provisioning_cannot_save_dashboard.png" max-width="800px" class="docs-image--right" >}} Grafana v5.1 brings an improved workflow for provisioned dashboards: diff --git a/docs/sources/whatsnew/whats-new-in-v5-2.md b/docs/sources/whatsnew/whats-new-in-v5-2.md index a4f8833076d..d9d09991cb9 100644 --- a/docs/sources/whatsnew/whats-new-in-v5-2.md +++ b/docs/sources/whatsnew/whats-new-in-v5-2.md @@ -23,7 +23,7 @@ Grafana v5.2 brings new features, many enhancements and bug fixes. This article ## Elasticsearch alerting -{{< docs-imagebox img="/img/docs/v52/elasticsearch_alerting.png" max-width="800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v52/elasticsearch_alerting.png" max-width="800px" class="docs-image--right" >}} Grafana v5.2 ships with an updated Elasticsearch data source with support for alerting. Alerting support for Elasticsearch has been one of the most requested features by our community and now it's finally here. Please try it out and let us know what you think. @@ -46,7 +46,7 @@ information in the [Installing using Docker documentation](/installation/docker/ ## Security -{{< docs-imagebox img="/img/docs/v52/login_change_password.png" max-width="800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v52/login_change_password.png" max-width="800px" class="docs-image--right" >}} Starting from Grafana v5.2, when you login with the administrator account using the default password you'll be presented with a form to change the password. We hope this encourages users to follow Grafana's best practices and change the default administrator password. @@ -70,7 +70,7 @@ By popular demand Grafana now includes support for an alert notification channel ### Modified time range and variables are no longer saved by default -{{< docs-imagebox img="/img/docs/v52/dashboard_save_modal.png" max-width="800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v52/dashboard_save_modal.png" max-width="800px" class="docs-image--right" >}} Starting from Grafana v5.2, a modified time range or variable are no longer saved by default. To save a modified time range or variable, you'll need to actively select that when saving a dashboard, see screenshot. @@ -81,7 +81,7 @@ when you actually want to overwrite those settings. ### Import dashboard enhancements -{{< docs-imagebox img="/img/docs/v52/dashboard_import.png" max-width="800px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v52/dashboard_import.png" max-width="800px" class="docs-image--right" >}} Grafana v5.2 adds support for specifying an existing folder or creating a new one when importing a dashboard - a long-awaited feature since Grafana v5.0 introduced support for dashboard folders and permissions. The import dashboard page has also got some general improvements diff --git a/docs/sources/whatsnew/whats-new-in-v5-3.md b/docs/sources/whatsnew/whats-new-in-v5-3.md index 2befd1ef09a..423433d0a90 100644 --- a/docs/sources/whatsnew/whats-new-in-v5-3.md +++ b/docs/sources/whatsnew/whats-new-in-v5-3.md @@ -22,7 +22,7 @@ Grafana v5.3 brings new features, many enhancements and bug fixes. This article ## Google Stackdriver -{{< docs-imagebox img="/img/docs/v53/stackdriver-with-heatmap.png" max-width= "600px" class="docs-image--no-shadow docs-image--right" >}} +{{< figure src="/static/img/docs/v53/stackdriver-with-heatmap.png" max-width= "600px" class="docs-image--no-shadow docs-image--right" >}} Grafana v5.3 ships with built-in support for [Google Stackdriver](https://cloud.google.com/stackdriver/) and enables you to visualize your Stackdriver metrics in Grafana. @@ -41,7 +41,7 @@ Refer to [Using Google Stackdriver in Grafana]({{< relref "../datasources/google ## TV and Kiosk Mode -{{< docs-imagebox img="/img/docs/v53/tv_mode_still.png" max-width="600px" class="docs-image--no-shadow docs-image--right" animated-gif="/img/docs/v53/tv_mode.gif" >}} +{{< figure src="/static/img/docs/v53/tv_mode_still.png" max-width="600px" class="docs-image--no-shadow docs-image--right" animated-gif="/static/img/docs/v53/tv_mode.gif" >}} We've improved the TV and kiosk mode to make it easier to use. There's now an icon in the top bar that will let you cycle through the different view modes. @@ -65,7 +65,7 @@ For more information about how to enable and configure reminders, refer to [aler Grafana 5.3 comes with a new graphical query builder for Postgres. This brings Postgres integration more in line with some of the other data sources and makes it easier for both advanced users and beginners to work with timeseries in Postgres. For more information about Postgres graphical query builder, refer to [query editor]({{< relref "../datasources/postgres/#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" >}} ## Improved OAuth Support for GitLab @@ -77,7 +77,7 @@ For more information about how to enable and configure OAuth, refer to [Gitlab O Grafana 5.3 brings improved support for [native annotations](/dashboards/annotations/#native-annotations) and makes it possible to use template variables when filtering by tags. For more information about native annotation, refer to [query by tag](/dashboards/annotations/#query-by-tag). -{{< 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" >}} ## Variables diff --git a/docs/sources/whatsnew/whats-new-in-v5-4.md b/docs/sources/whatsnew/whats-new-in-v5-4.md index 96312c59801..e069f066190 100644 --- a/docs/sources/whatsnew/whats-new-in-v5-4.md +++ b/docs/sources/whatsnew/whats-new-in-v5-4.md @@ -20,7 +20,7 @@ Grafana v5.4 brings new features, many enhancements and bug fixes. This article ## Alerting -{{< docs-imagebox img="/img/docs/v54/alerting-for-dark-theme.png" max-width="600px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v54/alerting-for-dark-theme.png" max-width="600px" class="docs-image--right" >}} Grafana v5.4 ships with a new alert rule setting named `For` which is great for removing false positives. If an alert rule has a configured `For` and the query violates the configured threshold it will first go from `OK` to `Pending`. Going from `OK` to `Pending` Grafana will not send any notifications. Once the alert rule has been firing for more than `For` duration, it will change to `Alerting` and send alert notifications. 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. @@ -32,7 +32,7 @@ Additionally, there's now support for disable the sending of `OK` alert notifica ## Google Stackdriver -{{< docs-imagebox img="/img/docs/v54/stackdriver_template_query.png" max-width="600px" class="docs-image--right" >}} +{{< figure src="/static/img/docs/v54/stackdriver_template_query.png" max-width="600px" class="docs-image--right" >}} Grafana v5.3 included built-in support for [Google Stackdriver](https://cloud.google.com/stackdriver/) which enables you to visualize your Stackdriver metrics in Grafana. One important feature missing was support for templating queries. This is now included together with a brand new templating query editor for Stackdriver. @@ -55,18 +55,18 @@ Please read [Using Google Stackdriver in Grafana]({{< relref "../datasources/goo Grafana v5.4 comes with a new graphical query builder for MySQL. This brings MySQL integration more in line with some of the other data sources and makes it easier for both advanced users and beginners to work with timeseries in MySQL. For more information about MySQL graphical query builder, refer to [query editor]({{< relref "../datasources/mysql/#query-editor" >}}). -{{< docs-imagebox img="/img/docs/v54/mysql_query_still.png" animated-gif="/img/docs/v54/mysql_query.gif" >}} +{{< figure src="/static/img/docs/v54/mysql_query_still.png" animated-gif="/static/img/docs/v54/mysql_query.gif" >}} ## Graph Panel Enhancements Grafana v5.4 adds support for highlighting weekdays and/or certain timespans in the graph panel. This should make it easier to compare for example weekends, business hours and/or off work hours. -{{< docs-imagebox img="/img/docs/v54/graph_time_regions.png" max-width= "800px" >}} +{{< figure src="/static/img/docs/v54/graph_time_regions.png" max-width= "800px" >}} Additionally, when rendering series as lines in the graph panel, should there be only one data point available for one series so that a connecting line cannot be established, a point will automatically be rendered for that data point. This should make it easier to understand what's going on when only receiving a single data point. -{{< docs-imagebox img="/img/docs/v54/graph_dot_single_point.png" max-width= "800px" >}} +{{< figure src="/static/img/docs/v54/graph_dot_single_point.png" max-width= "800px" >}} ## Team Preferences diff --git a/docs/sources/whatsnew/whats-new-in-v6-0.md b/docs/sources/whatsnew/whats-new-in-v6-0.md index 671b27ca6fe..891d99825be 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-0.md +++ b/docs/sources/whatsnew/whats-new-in-v6-0.md @@ -27,7 +27,7 @@ The main highlights are: ## Explore -{{< docs-imagebox img="/img/docs/v60/explore_prometheus.png" max-width="800px" class="docs-image--right" caption="Screenshot of the new Explore option in the panel menu" >}} +{{< figure src="/static/img/docs/v60/explore_prometheus.png" max-width="800px" class="docs-image--right" caption="Screenshot of the new Explore option in the panel menu" >}} Grafana's dashboard UI is all about building dashboards for visualization. **Explore** strips away all the dashboard and panel options so that you can focus on the query and metric exploration. Iterate until you have a working query and then think about building a dashboard. You can also jump from a dashboard panel into **Explore** and from there do some ad-hoc query exploration with the panel queries as a starting point. @@ -48,7 +48,7 @@ enabled jumping between metrics query and logs query with preserved label filter Explore supports splitting the view so you can compare different queries, different data sources and metrics and logs side by side! -{{< docs-imagebox img="/img/docs/v60/explore_split.png" max-width="800px" caption="Screenshot of the new Explore option in the panel menu" >}} +{{< figure src="/static/img/docs/v60/explore_split.png" max-width="800px" caption="Screenshot of the new Explore option in the panel menu" >}}
@@ -66,7 +66,7 @@ for other log sources to Explore and the next planned integration is Elasticsear
@@ -82,7 +82,7 @@ video below to see the new Panel Editor in action.
@@ -96,7 +96,7 @@ was not ideal. When it supports 100% of the Singlestat Gauge features, we plan t singlestats that use it become Gauge panels instead. This new panel contains a new **Threshold** editor that we will continue to refine and start using in other panels. -{{< docs-imagebox img="/img/docs/v60/gauge_panel.png" max-width="600px" caption="Gauge Panel" >}} +{{< figure src="/static/img/docs/v60/gauge_panel.png" max-width="600px" caption="Gauge Panel" >}}
@@ -107,7 +107,7 @@ is part of the future-proofing of Grafana's code base and ecosystem. Starting in source** plugins can be written in React using our published `@grafana/ui` sdk library. More information on this will be shared soon. -{{< docs-imagebox img="/img/docs/v60/react_panels.png" max-width="600px" caption="React Panel" >}} +{{< figure src="/static/img/docs/v60/react_panels.png" max-width="600px" caption="React Panel" >}}
## Google Stackdriver data source @@ -149,7 +149,7 @@ but our goal is to remove this requirement in the near future. ## Named Colors -{{< docs-imagebox img="/img/docs/v60/named_colors.png" max-width="400px" class="docs-image--right" caption="Named Colors" >}} +{{< figure src="/static/img/docs/v60/named_colors.png" max-width="400px" class="docs-image--right" caption="Named Colors" >}} We have updated the color picker to show named colors and primary colors. We hope this will improve accessibility and helps making colors more consistent across dashboards. We hope to do more in this color picker in the future, like showing diff --git a/docs/sources/whatsnew/whats-new-in-v6-1.md b/docs/sources/whatsnew/whats-new-in-v6-1.md index 07bf51ad492..5a4c132f120 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-1.md +++ b/docs/sources/whatsnew/whats-new-in-v6-1.md @@ -14,7 +14,7 @@ list = false ### Ad hoc Filtering for Prometheus -{{< imgbox max-width="30%" img="/img/docs/v61/prometheus-ad-hoc.gif" caption="Ad-hoc filters variable for Prometheus" >}} +{{< figure class="float-right" max-width="30%" src="/static/img/docs/v61/prometheus-ad-hoc.gif" caption="Ad-hoc filters variable for Prometheus" >}} The ad hoc filter feature allows you to create new key/value filters on the fly with autocomplete for both key and values. The filter condition is then automatically applied to all queries on the dashboard. This makes it easier to explore your data in a dashboard without changing queries and without having to add new template variables. diff --git a/docs/sources/whatsnew/whats-new-in-v6-2.md b/docs/sources/whatsnew/whats-new-in-v6-2.md index 5673761326a..a7321352fa7 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-2.md +++ b/docs/sources/whatsnew/whats-new-in-v6-2.md @@ -47,10 +47,10 @@ comes with 3 unique display modes, Basic, Gradient, and Retro LED. Read the more about the design and features of this new panel. Retro LED display mode -{{< docs-imagebox img="/assets/img/blog/bargauge/bar_gauge_retro_led.jpg" max-width="800px" caption="Bar Gauge LED mode" >}} +{{< figure src="/assets/img/blog/bargauge/bar_gauge_retro_led.jpg" max-width="800px" caption="Bar Gauge LED mode" >}} Gradient mode -{{< docs-imagebox img="/assets/img/blog/bargauge/gradient.jpg" max-width="800px" caption="Bar Gauge Gradient mode" >}} +{{< figure src="/assets/img/blog/bargauge/gradient.jpg" max-width="800px" caption="Bar Gauge Gradient mode" >}} ## Improved table data support @@ -71,7 +71,7 @@ Sometimes your panels do not need a title and having that panel header still tak other panels look strange and have bad vertical centering. In v6.2 Grafana will allow panel content (visualizations) to use the full panel height in case there is no panel title. -{{< docs-imagebox img="/img/docs/v62/panels_with_no_title.jpg" max-width="800px" caption="Bar Gauge Gradient mode" >}} +{{< figure src="/static/img/docs/v62/panels_with_no_title.jpg" max-width="800px" caption="Bar Gauge Gradient mode" >}} ## Minor Features and Fixes diff --git a/docs/sources/whatsnew/whats-new-in-v6-3.md b/docs/sources/whatsnew/whats-new-in-v6-3.md index 20821cc0af4..bbb4881819a 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-3.md +++ b/docs/sources/whatsnew/whats-new-in-v6-3.md @@ -46,7 +46,7 @@ allows you to view lines before and after the line of interest. This release adds support for searching and visualizing logs stored in Elasticsearch in the Explore mode. With a special simplified query interface specifically designed for logs search. -{{< docs-imagebox img="/img/docs/v63/elasticsearch_explore_logs.png" max-width="600px" caption="New Time Picker" >}} +{{< figure src="/static/img/docs/v63/elasticsearch_explore_logs.png" max-width="600px" caption="New Time Picker" >}} Please read [Using Elasticsearch in Grafana]({{< relref "../datasources/elasticsearch/#elasticsearch-version" >}}) for more detailed information on how to get started and use it. @@ -55,7 +55,7 @@ Please read [Using Elasticsearch in Grafana]({{< relref "../datasources/elastics This release adds support for searching and visualizing logs stored in InfluxDB in the Explore mode. With a special simplified query interface specifically designed for logs search. -{{< docs-imagebox img="/img/docs/v63/influxdb_explore_logs.png" max-width="600px" caption="New Time Picker" >}} +{{< figure src="/static/img/docs/v63/influxdb_explore_logs.png" max-width="600px" caption="New Time Picker" >}} Please read [Using InfluxDB in Grafana]({{< relref "../datasources/influxdb/#querying-logs-beta" >}}) for more detailed information on how to get started and use it. @@ -84,7 +84,7 @@ Name | Description You can then click on point in the Graph. -{{< docs-imagebox img="/img/docs/v63/graph_datalink.png" max-width="400px" caption="New Time Picker" >}} +{{< figure src="/static/img/docs/v63/graph_datalink.png" max-width="400px" caption="New Time Picker" >}} For now only the Graph panel supports `Data links` but we hope to add these to many visualizations. @@ -92,18 +92,18 @@ For now only the Graph panel supports `Data links` but we hope to add these to m The time picker has been re-designed and with a more basic design that makes accessing quick ranges more easy. -{{< docs-imagebox img="/img/docs/v63/time_picker.png" max-width="400px" caption="New Time Picker" >}} +{{< figure src="/static/img/docs/v63/time_picker.png" max-width="400px" caption="New Time Picker" >}} ## Graph Gradients Want more eye candy in your graphs? Then the fill gradient option might be for you! Works really well for graphs with only a single series. -{{< docs-imagebox img="/img/docs/v63/graph_gradient_area.jpeg" max-width="800px" caption="Graph Gradient Area" >}} +{{< figure src="/static/img/docs/v63/graph_gradient_area.jpeg" max-width="800px" caption="Graph Gradient Area" >}} Looks really nice in light theme as well. -{{< docs-imagebox img="/img/docs/v63/graph_gradients_white.png" max-width="800px" caption="Graph Gradient Area" >}} +{{< figure src="/static/img/docs/v63/graph_gradients_white.png" max-width="800px" caption="Graph Gradient Area" >}} ## Grafana Enterprise diff --git a/docs/sources/whatsnew/whats-new-in-v6-4.md b/docs/sources/whatsnew/whats-new-in-v6-4.md index a720b818f37..7552bba0a07 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-4.md +++ b/docs/sources/whatsnew/whats-new-in-v6-4.md @@ -39,16 +39,16 @@ Some of those new capabilities can already be seen in this release, like sharing To help accelerate workflows that involve regularly switching from Explore to a dashboard and vice-versa, we've added the ability to return to the origin dashboard after navigating to Explore from the panel's dropdown. -{{< docs-imagebox img="/img/docs/v60/explore_panel_menu.png" caption="Screenshot of the new Explore Icon" >}} +{{< figure src="/static/img/docs/v60/explore_panel_menu.png" caption="Screenshot of the new Explore Icon" >}} After you've navigated to Explore, you should notice a "Back" button in the Explore toolbar. - + Simply clicking the button will return you to the origin dashboard, or, if you'd like to bring changes you make in Explore back to the dashboard, simply click the arrow next to the button to reveal a "Return to panel with changes" menu item. - + ### Live tailing improvements @@ -56,13 +56,13 @@ With 6.4 version you can now pause the live tail view to see the last 1000 lines We also introduced some performance optimizations to allow live tailing of higher throughput log streams and various UI fixes and improvements like more consistent styling and fresh logs highlighting. - + ### New Logs Panel The logs panel shows log lines from datasources that support logs, e.g., Elastic, Influx, and Loki. Typically you would use this panel next to a graph panel to display the log output of a related process. - + Limitations: Even though Live tailing can be enabled on logs panels in dashboards, we recommend using Live tailing in Explore. On dashboards, the refresher at the top of the page should be used instead to keep the data of all panels in sync. Note that the logs panel is still beta and we're looking to get feedback. @@ -80,7 +80,7 @@ For more information about Data Links, refer to [data link](https://grafana.com/ Some graph query results are made up only of one datapoint per series but can be shown in the graph panel with the help of [series overrides](/features/panels/graph/#series-overrides). To show a horizontal line through the Y-value of the datapoint across the whole graph, add a series override and select `Transform > constant`. - + ## Share query results between panels @@ -129,7 +129,7 @@ A common request from Enterprise users have been to be able to set up reporting This feature is currently limited to Organization Admins. -{{< docs-imagebox img="/img/docs/v64/reports.jpeg" max-width="500px" caption="Reporting" >}} +{{< figure src="/static/img/docs/v64/reports.jpeg" max-width="500px" caption="Reporting" >}} ### GitLab OAuth Team Sync support diff --git a/docs/sources/whatsnew/whats-new-in-v6-5.md b/docs/sources/whatsnew/whats-new-in-v6-5.md index 43412b3ac69..364627f9908 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-5.md +++ b/docs/sources/whatsnew/whats-new-in-v6-5.md @@ -56,7 +56,7 @@ While GetMetricStatistics qualified for the CloudWatch API free tier, this is no In Grafana 6.5 or higher, you can 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" >}} The example queries all metrics in the namespace `AWS/EC2` with a metric name of `CPUUtilization` and _any_ value for the `InstanceId` dimension. 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 automatically appear in the graph without you having to track new instance IDs. You can click `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). @@ -66,7 +66,7 @@ You can untoggle `Match Exact` to include metrics that have other dimensions def #### 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 displays a context menu with a link to `View in CloudWatch console`. Clicking that link opens the CloudWatch console and displays all the metrics for that query. If you are not currently logged in to the CloudWatch console, then the link opens the login page. The link is valid for any account, but it only displays the right metrics if you are logged in to the account that corresponds to the selected data source in Grafana. @@ -96,7 +96,7 @@ The updated CloudWatch data source is shipped with pre-configured dashboards for 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 to save 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" max-width="600px" caption="CloudWatch dashboard import" >}} +{{< figure src="/static/img/docs/v65/cloudwatch-dashboard-import.png" max-width="600px" caption="CloudWatch dashboard import" >}} ### Dynamic typeahead support in query variables @@ -138,7 +138,7 @@ You can try it out by enabling a feature flag in the Grafana configuration file: enable = inspect ``` -{{< docs-imagebox img="/img/docs/v65/panel-inspector.png" max-width="400px" caption="New Panel Inspector modal" >}} +{{< figure src="/static/img/docs/v65/panel-inspector.png" max-width="400px" caption="New Panel Inspector modal" >}} In Grafana 6.6, this will have a more user friendly display. In the future, additional Metrictank functionality will become available when the Graphite datasource option is set to the `Metrictank` type. @@ -146,7 +146,7 @@ In Grafana 6.6, this will have a more user friendly display. In the future, addi We finally got around to implementing the series hover that shows values of the timeseries you hover over. This has been a requested feature ever since Explore was released. The graph component has been rewritten from scratch, making it more composable for future interactions with the graph data. -{{< docs-imagebox img="/img/docs/v65/explore_tooltip.png" max-width="500px" caption="Explore graph tooltip/hover" >}} +{{< figure src="/static/img/docs/v65/explore_tooltip.png" max-width="500px" caption="Explore graph tooltip/hover" >}} ### Explore/Logs: Log row details @@ -154,7 +154,7 @@ We have massively simplified the way we display both log row labels/fields as we So far labels had been squashed into their own column, making long label values difficult to read or interact with. Similarly, the parsed fields (available for logfmt and JSON structured logs) were too fiddly for mouse interaction. To solve this we took both and put them into a collapsed area below each row for more robust interaction. We have also added the ability to filter out labels, i.e., turn them into a negative filter on click (in addition to a positive filter). -{{< docs-imagebox img="/img/docs/v65/explore_log_details.gif" caption="Explore Log row details" >}} +{{< figure src="/static/img/docs/v65/explore_log_details.gif" caption="Explore Log row details" >}} ### Loki/Explore: Derived fields @@ -168,7 +168,7 @@ This release starts with support for Loki, but we will bring this concept to oth In the Explore split view, you can now link the two timepickers so that if you change one, the other gets changed as well. This helps with keeping start and end times of the split view queries in sync and will ensure that you're looking at the same time interval in both split panes. -{{< docs-imagebox img="/img/docs/v65/explore_time_sync.gif" caption="Time-sync of split views in Explore" >}} +{{< figure src="/static/img/docs/v65/explore_time_sync.gif" caption="Time-sync of split views in Explore" >}} ### Alerting support for Azure Application Insights diff --git a/docs/sources/whatsnew/whats-new-in-v6-6.md b/docs/sources/whatsnew/whats-new-in-v6-6.md index b3bd7b88b54..823230ce2ea 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-6.md +++ b/docs/sources/whatsnew/whats-new-in-v6-6.md @@ -40,7 +40,7 @@ Grafana 6.6 comes with a lot of new features and enhancements: ## New stat panel -{{< docs-imagebox img="/img/docs/v66/stat_panel_dark2.png" max-width="1024px" caption="Stat panel" >}} +{{< figure src="/static/img/docs/v66/stat_panel_dark2.png" max-width="1024px" caption="Stat panel" >}} This release adds a new panel named `Stat`. This panel is designed to replace the current `Singlestat` as the primary way to show big single number panels along with a sparkline. This panel is of course building on our new panel infrastructure and option design. So, you can use the new threshold UI and data links. It also supports the same repeating feature as the Gauge and Bar Gauge panels, meaning it will repeat a separate visualization for every series or row in the query result. @@ -55,7 +55,7 @@ Key features: Here is how it looks in light theme: -{{< docs-imagebox img="/img/docs/v66/stat_panel_light.png" max-width="1024px" caption="Stat panel" >}} +{{< figure src="/static/img/docs/v66/stat_panel_light.png" max-width="1024px" caption="Stat panel" >}} ## Auto min-max @@ -65,22 +65,22 @@ For the panels Gauge, Bar Gauge, and Stat, you can now leave the min and max set This panel shows RSS feeds as news items in the default home dashboard for v6.6. Add it to your custom home dashboards to keep up-to-date with Grafana news, or switch the default RSS feed to one of your choice. -{{< docs-imagebox img="/img/docs/v66/news_panel.png" max-width="600px" caption="News panel" >}} +{{< figure src="/static/img/docs/v66/news_panel.png" max-width="600px" caption="News panel" >}} ## Custom data units A top feature request for years is now finally here. All panels now support custom units. Type any text in the unit picker and select the `Custom: ` option. By default, the text will be used as a suffix unit. If you want a custom prefix, then type `prefix: ` to make the custom unit appear before the value. If you want a custom SI unit (with auto SI suffixes) specify `si:Ups`. A value like 1000 will be rendered as `1 kUps`. -{{< docs-imagebox img="/img/docs/v66/custom_unit_burger1.png" max-width="600px" caption="Custom unit" >}} +{{< figure src="/static/img/docs/v66/custom_unit_burger1.png" max-width="600px" caption="Custom unit" >}} 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" >}} ## Bar Gauge unfilled option The Bar Gauge visualization has a new display option: `Unfilled`. This new option is enabled by default, so it will change how this visualization is displayed on old dashboards. If you prefer the old default -- in which an unfilled area is not shown, and the value follows directly after -- you have to update the visualization settings. -{{< docs-imagebox img="/img/docs/v66/bar_gauge_unfilled.png" max-width="900px" caption="Bar gauge unfilled" >}} +{{< figure src="/static/img/docs/v66/bar_gauge_unfilled.png" max-width="900px" caption="Bar gauge unfilled" >}} ## New time picker @@ -91,7 +91,7 @@ The time picker has gotten a major design update. Key changes: - A single calendar view can be used to select and show the from and to date. - You can now select recent absolute ranges. -{{< docs-imagebox img="/img/docs/v66/time_picker_update.png" max-width="700px" caption="New time picker" >}} +{{< figure src="/static/img/docs/v66/time_picker_update.png" max-width="700px" caption="New time picker" >}} ## Alerting enhancements @@ -109,19 +109,19 @@ Read more about this in the [upgrade notes]({{< relref "../installation/upgradin We introduced the wrap-lines option for logs because as for some of our users feel it's more efficient to see one line per log message. The wrapped-line option is set as a default; the unwrapped setting results in horizontal scrolling. -{{< docs-imagebox img="/img/docs/v66/explore_wrap_lines.gif" max-width="600px" caption="Log message line wrapping" >}} +{{< figure src="/static/img/docs/v66/explore_wrap_lines.gif" max-width="600px" caption="Log message line wrapping" >}} ## Explore/Logs Panel: Column with unique log labels After feedback from our community, we have decided to reintroduce a labels column. However, for better readability and usefulness, we have transformed it into a Unique labels column which includes only non-common labels. All common labels are displayed above. -{{< docs-imagebox img="/img/docs/v66/explore_labels_column.png" max-width="600px" caption="Unique log labels column" >}} +{{< figure src="/static/img/docs/v66/explore_labels_column.png" max-width="600px" caption="Unique log labels column" >}} ## Explore: Context tooltip Isolating a series from a big set of lines in a graph is important for drill-downs. That's why we have implemented the context tooltip in Explore, which allows you to copy data and labels from it to further refine the query. -{{< docs-imagebox img="/img/docs/v66/explore_context_tooltip.png" max-width="600px" caption="Explore context tooltip" >}} +{{< figure src="/static/img/docs/v66/explore_context_tooltip.png" max-width="600px" caption="Explore context tooltip" >}} ## Enterprise: White labeling @@ -154,7 +154,7 @@ footer_links_guides_url = http://your.guides.site Customize the login page, side menu bar, and footer links. -{{< docs-imagebox img="/img/docs/v66/whitelabeling_1.png" max-width="700px" caption="White labeling example" >}} +{{< figure src="/static/img/docs/v66/whitelabeling_1.png" max-width="700px" caption="White labeling example" >}} ## Enterprise APT and YUM repositories @@ -182,7 +182,7 @@ We recommend all users to install the Enterprise Edition of Grafana, which can b From now on it will be possible to utilize meta data label in "group bys", filters and in the alias field. Unfortunately, there's no API to retrieve all the labels, but the group by field dropdown comes with a pre-defined list of common system labels. User labels cannot be pre-defined, but it's possible to enter them manually in the group by field. If a meta data label, user label or system label, is included in the group by segment, it will be possible to create filters based on it and to expand its value on the alias field. -{{< docs-imagebox img="/img/docs/v66/metadatalabels.gif" max-width="800px" caption="Stackdriver meta labels" >}} +{{< figure src="/static/img/docs/v66/metadatalabels.gif" max-width="800px" caption="Stackdriver meta labels" >}} ## CloudWatch: Calculate period based on time range diff --git a/docs/sources/whatsnew/whats-new-in-v6-7.md b/docs/sources/whatsnew/whats-new-in-v6-7.md index 07b2fd2f71e..34ee43acb2d 100644 --- a/docs/sources/whatsnew/whats-new-in-v6-7.md +++ b/docs/sources/whatsnew/whats-new-in-v6-7.md @@ -36,7 +36,7 @@ Query history is a new feature that lets you view and interact with the queries Learn more about query history in [Explore]({{< relref "../explore" >}}). -{{< docs-imagebox img="/img/docs/v67/rich-history.gif" max-width="1024px" caption="Query history" >}} +{{< figure src="/static/img/docs/v67/rich-history.gif" max-width="1024px" caption="Query history" >}} ### Azure OAuth Grafana v6.7 comes with a new OAuth integration for Microsoft Azure Active Directory. You can now assign users and groups to Grafana roles from the Azure Portal. Learn how to enable and configure it in [Azure AD OAuth2 authentication]({{< relref "../auth/azuread/" >}}). @@ -85,7 +85,7 @@ This feature allows you to export a dashboard as a PDF document. All dashboard p ### Report landscape mode You can now use either portrait or landscape mode in your reports. Portrait will render three panels per page and landscape two. -{{< docs-imagebox img="/img/docs/enterprise/reports_create_new.png" max-width="1024px" caption="New report" >}} +{{< figure src="/static/img/docs/enterprise/reports_create_new.png" max-width="1024px" caption="New report" >}} [Reporting]({{< relref "../enterprise/reporting/" >}}) has been updated as a result of this change. diff --git a/docs/sources/whatsnew/whats-new-in-v7-0.md b/docs/sources/whatsnew/whats-new-in-v7-0.md index 9a2139d5f2b..ceb6814c2a5 100644 --- a/docs/sources/whatsnew/whats-new-in-v7-0.md +++ b/docs/sources/whatsnew/whats-new-in-v7-0.md @@ -52,7 +52,7 @@ You can use the new trace view in Explore either directly to search for a partic In the future we will add more workflows and integrations so that correlating between metrics, logs and traces is even easier. -{{< docs-imagebox img="/img/docs/v70/tracing_ui.png" max-width="1024px" caption="Tracing UI" >}} +{{< figure src="/static/img/docs/v70/tracing_ui.png" max-width="1024px" caption="Tracing UI" >}} ## Transformations @@ -92,7 +92,7 @@ Learn more about this feature in [Field options]({{< relref "../panels/field-opt ## Inspect panels and export data to CSV -{{< docs-imagebox img="/img/docs/v70/panel_edit_export_raw_data.png" max-width="800px" class="docs-image--right" caption="Panel Edit - Export raw data to CSV" >}} +{{< figure src="/static/img/docs/v70/panel_edit_export_raw_data.png" max-width="800px" class="docs-image--right" caption="Panel Edit - Export raw data to CSV" >}} Another new feature of Grafana 7.0 is the panel inspector. Inspect allows you to view the raw data for any Grafana panel as well as export that data to a CSV file. With Panel inspect you will also be able to perform simple raw data transformations like join, view query stats or detailed execution data. @@ -155,7 +155,7 @@ To help you get started with Grafana, we’ve launched a brand new tutorials pla ## Rollup indicator for Metrictank queries -{{< docs-imagebox img="/img/docs/v70/metrictank_rollup_metadata.png" max-width="800px" class="docs-image--right" caption="Metrictank rollup metadata" >}} +{{< figure src="/static/img/docs/v70/metrictank_rollup_metadata.png" max-width="800px" class="docs-image--right" caption="Metrictank rollup metadata" >}} Depending on the cardinality of the data and the time range MetricTank may return rolled up (aggregated) data. This can be as subtle as potentially only 1 or 2 graphs out of nine being rolled up. The new rollup indicator is visible in the panel title and you can also inspect extensive metadata and stats about the Metrictank query result and its rollups. @@ -204,13 +204,13 @@ This includes problems like: - How to identify dashboards that are not being used - Who created or last viewed this dashboard? -{{< docs-imagebox img="/img/docs/v70/dashboard_insights_users.png" max-width="1024px" caption="Dashboard Insights Users" >}} +{{< figure src="/static/img/docs/v70/dashboard_insights_users.png" max-width="1024px" caption="Dashboard Insights Users" >}} ### Usage insights and Presence indicator This release includes a series of features that build on our new usage analytics engine. This “Grafana about Grafana” feature will help our large customers get better insight into the behavior and utilization of their users, dashboards, and data sources. The improved [dashboard search]({{< relref "../enterprise/usage-insights/#improved-dashboard-search" >}}) allows you to sort dashboards by usage and errors. When a user opens a dashboard, they will see a [presence indicator]({{< relref "../enterprise/usage-insights/#presence-indicator" >}}) of who else is viewing the same dashboard. And finally [Dashboard insights]({{< relref "../enterprise/usage-insights/#dashboard-insights" >}}) allows you to view recent dashboard usage. -{{< docs-imagebox img="/img/docs/v70/presence_indicator.jpg" max-width="1024px" caption="Grafana Enterprise - Presence indicator" >}} +{{< figure src="/static/img/docs/v70/presence_indicator.jpg" max-width="1024px" caption="Grafana Enterprise - Presence indicator" >}} ### SAML Role and Team Sync diff --git a/docs/sources/whatsnew/whats-new-in-v7-1.md b/docs/sources/whatsnew/whats-new-in-v7-1.md index cd49fbf6340..ceccc8d6715 100644 --- a/docs/sources/whatsnew/whats-new-in-v7-1.md +++ b/docs/sources/whatsnew/whats-new-in-v7-1.md @@ -36,7 +36,7 @@ Support for Flux and Influx v2 has been added. The InfluxData blog post, [How to In Grafana v 7.1 we are introducing search functionality in Query history. You can search across queries and your comments. It is especially useful in combination with a time filter and data source filter. Read more about [Query history here]({{< relref "../explore/_index.md#query-history" >}}). -{{< docs-imagebox img="/img/docs/v71/query_history_search.gif" max-width="800px" caption="Query history search" >}} +{{< figure src="/static/img/docs/v71/query_history_search.gif" max-width="800px" caption="Query history search" >}} ## Explore modes unified @@ -69,7 +69,7 @@ By default, the Stat panel displays: You can use the Text mode option to control what text the panel renders. If the value is not important, only name and color is, then change the `Text mode` to **Name**. The value will still be used to determine color and is displayed in a tooltip. -{{< 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" >}} ## Provisioning of apps diff --git a/docs/sources/whatsnew/whats-new-in-v7-2.md b/docs/sources/whatsnew/whats-new-in-v7-2.md index ab6af4195eb..c0565382904 100644 --- a/docs/sources/whatsnew/whats-new-in-v7-2.md +++ b/docs/sources/whatsnew/whats-new-in-v7-2.md @@ -38,7 +38,7 @@ You can now customize how dates are formatted in Grafana. Custom date formats ap This screenshot shows both a custom full date format with a 12 hour clock and am/pm suffix. The graph is also showing the same 12-hour clock format and a customized month and day format compared to the Grafana default `MM/DD` format. -{{< docs-imagebox img="/img/docs/v72/date_formats.png" max-width="800px" caption="Custom date time formats" >}} +{{< figure src="/static/img/docs/v72/date_formats.png" max-width="800px" caption="Custom date time formats" >}} Date formats are set for a Grafana instance by adjusting [server-wide settings]({{< relref "../administration/configuration.md#date_formats" >}}) in the Grafana configuration file. We hope to add org- and user-level settings in the future. @@ -65,7 +65,7 @@ After lots of testing and user feedback, we removed the beta label from the conf You can now dynamically apply value filters to any table column. This option can be enabled for all columns or one specific column using an override rule. -{{< docs-imagebox img="/img/docs/v72/table_column_filters.png" max-width="800px" caption="Table column filters" >}} +{{< figure src="/static/img/docs/v72/table_column_filters.png" max-width="800px" caption="Table column filters" >}} [Filter table columns]({{< relref "../panels/visualizations/table/filter-table-columns.md" >}}) has been added as a result of this feature. @@ -83,13 +83,13 @@ Grafana 7.2 includes the following transformation enhancements: - The [Labels to fields]({{< relref "../panels/transformations/types-options.md#labels-to-fields">}}) transformation now allows you to pick one label and use that as the name of the value field. - You can drag transformations to reorder them. Remember that transformations are processed in the order they are listed in the UI, so think before you move something! -{{< docs-imagebox img="/img/docs/v72/transformations.gif" max-width="800px" caption="Group by and reordering of transformations" >}} +{{< figure src="/static/img/docs/v72/transformations.gif" max-width="800px" caption="Group by and reordering of transformations" >}} ## Drag to reorder queries The up and down arrows, which were previously the only way to change query order, have been removed. Instead, there is now a grab icon that allows you to drag and drop queries in a list to change their order. -{{< docs-imagebox img="/img/docs/v72/drag-queries.gif" max-width="800px" caption="Drag to reorder queries" >}} +{{< figure src="/static/img/docs/v72/drag-queries.gif" max-width="800px" caption="Drag to reorder queries" >}} The [Queries]({{< relref "../panels/queries.md" >}}) topic has been updated as a result of this change. @@ -105,7 +105,7 @@ You can now use the new variable `$__rate_interval` in Prometheus for rate funct With this awesome contribution from one of our community members, you can now toggle parsed fields in Explore if your logs are structured in `json` or `logfmt`. -{{< docs-imagebox img="/img/docs/v72/explore-toggle-parsed-fields.gif" max-width="800px" caption="Toggling parsed fields in Explore" >}} +{{< figure src="/static/img/docs/v72/explore-toggle-parsed-fields.gif" max-width="800px" caption="Toggling parsed fields in Explore" >}} The [Toggle parsed fields]({{< relref "../explore/_index.md#toggle-detected-fields" >}}) section has been added to [Explore]({{< relref "../explore/_index.md" >}}) as a result of this feature. @@ -125,7 +125,7 @@ A new layout option is available when rendering reports: the grid layout. With t The grid layout is also available for the [Export dashboard as PDF]({{< relref "../enterprise/export-pdf.md" >}}) feature. -{{< docs-imagebox img="/img/docs/enterprise/reports_grid_landscape_preview.png" max-width="500px" class="docs-image--no-shadow" >}} +{{< figure src="/static/img/docs/enterprise/reports_grid_landscape_preview.png" max-width="500px" class="docs-image--no-shadow" >}} ### Report time range @@ -137,7 +137,7 @@ For more information, refer to [Reports time range]({{< relref "../enterprise/re You can now configure organization-wide report settings, such as report branding, in the Settings tab on the Reporting page. Settings are applied to all the reports of your current organization. -{{< docs-imagebox img="/img/docs/enterprise/reports_settings.png" max-width="500px" class="docs-image--no-shadow" caption="Reports settings" >}} +{{< figure src="/static/img/docs/enterprise/reports_settings.png" max-width="500px" class="docs-image--no-shadow" caption="Reports settings" >}} For more information, refer to [Reports settings]({{< relref "../enterprise/reporting.md#reports-settings" >}}). @@ -155,7 +155,7 @@ Check out [CHANGELOG.md](https://github.com/grafana/grafana/blob/master/CHANGELO In collaboration with Microsoft, we have improved the usability of our ADX datasource plugin by adding a visual query builder. The goal is to make it easier for users, regardless of their previous knowledge of writing KQL (Kusto Query Language) queries, to query and visualize their data. -{{< docs-imagebox img="/img/docs/v72/adx-ds.png" max-width="800px" caption="ADX visual query builder" >}} +{{< figure src="/static/img/docs/v72/adx-ds.png" max-width="800px" caption="ADX visual query builder" >}} ### X-Ray data source plugin diff --git a/docs/sources/whatsnew/whats-new-in-v7-3.md b/docs/sources/whatsnew/whats-new-in-v7-3.md index 9bfe9d662c6..d9e2f9917ab 100644 --- a/docs/sources/whatsnew/whats-new-in-v7-3.md +++ b/docs/sources/whatsnew/whats-new-in-v7-3.md @@ -26,13 +26,13 @@ The main highlights are: The table has been updated with improved hover behavior for cells that have longer content than what fits the current column width. As you can see in the animated gif below the cell will automatically expand to show you full content of the cell. -{{< 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" >}} Another new feature that can be seen in the image above is the new image cell display mode. 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. ## New color scheme option -{{< figure src="/img/docs/v73/color_scheme_dropdown.png" max-width="450px" caption="Color scheme" class="pull-right" >}} +{{< figure src="/static/img/docs/v73/color_scheme_dropdown.png" max-width="450px" caption="Color scheme" class="pull-right" >}} A new standard field [color scheme]({{< relref "../panels/standard-options.md#color-scheme" >}}) option has been added. This new option will provide a unified way for all new panels to specify how colors should be assigned. @@ -47,15 +47,15 @@ A new standard field [color scheme]({{< relref "../panels/standard-options.md#co As you can see this adds new continuous color schemes where Grafana will interpolate colors. A great use of these new color schemes is the table panel where you can color the background and get a heatmap like effect. -{{< figure src="/img/docs/v73/table_color_scheme.png" max-width="900px" caption="table color scheme" >}} +{{< figure src="/static/img/docs/v73/table_color_scheme.png" max-width="900px" caption="table color scheme" >}} Another thing to highlight is that all these new color schemes are theme aware and adapt to the current theme. For example here is how the new monochrome color scheme look like in the light theme: -{{< figure src="/img/docs/v73/table_color_scheme_mono_light.png" max-width="900px" caption="table color monochrome scheme" >}} +{{< figure src="/static/img/docs/v73/table_color_scheme_mono_light.png" max-width="900px" caption="table color monochrome scheme" >}} As this new option is a standard field option it works in every panel. Here is another example from the [Bar Gauge]({{< relref "../panels/visualizations/bar-gauge-panel.md" >}}) panel. -{{< figure src="/img/docs/v73/bar_gauge_gradient_color_scheme.png" max-width="900px" caption="bar gauge color scheme" >}} +{{< figure src="/static/img/docs/v73/bar_gauge_gradient_color_scheme.png" max-width="900px" caption="bar gauge color scheme" >}} ## CSV exports for Excel diff --git a/docs/sources/whatsnew/whats-new-in-v7-4.md b/docs/sources/whatsnew/whats-new-in-v7-4.md index ed76d7cc8bf..dfc41939476 100644 --- a/docs/sources/whatsnew/whats-new-in-v7-4.md +++ b/docs/sources/whatsnew/whats-new-in-v7-4.md @@ -26,7 +26,7 @@ The Time series beta panel implements the majority of the functionalities availa Apart from major performance improvements, the new Time series panel implements new features like line interpolation modes, support for more than two Y-axes, soft min and max axis limits, automatic points display based on data density, and gradient fill modes. -{{< figure src="/img/docs/v74/timeseries_panel.png" max-width="900px" caption="Time series panel" >}} +{{< figure src="/static/img/docs/v74/timeseries_panel.png" max-width="900px" caption="Time series panel" >}} The following documentation topics were added for this feature: @@ -76,7 +76,7 @@ Grafana graphs now support Prometheus _exemplars_. They are displayed as diamond > **Note:** Support for exemplars will be added in version Prometheus 2.25+. -{{< figure src="/img/docs/v74/exemplars.png" max-width="900px" caption="Exemplar example" >}} +{{< figure src="/static/img/docs/v74/exemplars.png" max-width="900px" caption="Exemplar example" >}} For more information, refer to [Exemplars]({{< relref "../datasources/prometheus.md#exemplars" >}}). @@ -105,7 +105,7 @@ For more information, refer to [Expressions]({{< relref "../panels/expressions.m You can now provide detailed information to alert notification recipients by injecting alert label data as template variables into an alert notification. Labels that exist from the evaluation of the alert query can be used in the alert rule name and in the alert notification message fields using the `${Label}` syntax. The alert label data is automatically injected into the notification fields when the alert is in the alerting state. When there are multiple unique values for the same label, the values are comma-separated. -{{< figure src="/img/docs/alerting/alert-notification-template-7-4.png" max-width="700px" caption="Variable support in alert notifications" >}} +{{< figure src="/static/img/docs/alerting/alert-notification-template-7-4.png" max-width="700px" caption="Variable support in alert notifications" >}} For more information, refer to the [alert notification docs]({{< relref "../alerting/old-alerting/notifications.md#notification-templating" >}}). @@ -160,7 +160,7 @@ Many thanks to [mtanda](https://github.com/mtanda) this contribution! Google Cloud Monitoring data source ships with pre-configured dashboards for some of the most popular GCP services. These curated dashboards are based on similar dashboards in the GCP dashboard samples repository. In this release, we have expanded the set of pre-configured dashboards. -{{< 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" >}} If 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. diff --git a/docs/sources/whatsnew/whats-new-in-v7-5.md b/docs/sources/whatsnew/whats-new-in-v7-5.md index 6ce2acc4cdf..7fe6a9954f6 100644 --- a/docs/sources/whatsnew/whats-new-in-v7-5.md +++ b/docs/sources/whatsnew/whats-new-in-v7-5.md @@ -20,7 +20,7 @@ These features are included in the Grafana open source edition. Grafana 7.5 adds a beta version of the next-generation pie chart panel. -![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) For more information, refer to [Pie chart panel]({{< relref "../panels/visualizations/pie-chart-panel.md" >}}). @@ -32,7 +32,7 @@ With alerting support for Loki, you can now create alerts on Loki metrics querie [Alerting]({{< relref "../alerting/_index.md" >}}) was updated as a result of this change. -![Loki alerting](/img/docs/alerting/alerting-for-loki-7-5.png) +![Loki alerting](/static/img/docs/alerting/alerting-for-loki-7-5.png) ### Loki label browser @@ -50,7 +50,7 @@ For new Prometheus data sources, we have changed the default HTTP method to POST When searching for text in Elasticsearch logs, matching words in the log line returned by the query are now highlighted. -![Elastic logs highlighting](/img/docs/elasticsearch/elastic-word-highlighting-7-5.png) +![Elastic logs highlighting](/static/img/docs/elasticsearch/elastic-word-highlighting-7-5.png) ### Better format definition for trace data diff --git a/docs/sources/whatsnew/whats-new-in-v8-0.md b/docs/sources/whatsnew/whats-new-in-v8-0.md index 0d5ab479a84..16d2f88cfe2 100644 --- a/docs/sources/whatsnew/whats-new-in-v8-0.md +++ b/docs/sources/whatsnew/whats-new-in-v8-0.md @@ -97,7 +97,7 @@ Log navigation in Explore has been significantly improved. We added pagination t [Logs in Explore]({{< relref "../explore/logs-integration.md" >}}) was updated as a result of these changes. -![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) ### Tracing improvements @@ -142,7 +142,7 @@ We changed how the configured Elasticsearch version is handled. You can now spec You can now use a different interpolation method to use template variables in a more extensive way. You can now use template variables in every query editor field that allows free input. -![Elasticsearch template variables](/img/docs/elasticsearch/input-templates-8-0.png) +![Elasticsearch template variables](/static/img/docs/elasticsearch/input-templates-8-0.png) ##### Allow omitting field for metrics that support inline scripts @@ -150,13 +150,13 @@ Metric aggregations can be specified without a field if a script is provided. Yo Previously this was only possible when adding a new metric without selecting a field, because once selected, the field could not have been removed. -![Elasticsearch omit fields](/img/docs/elasticsearch/omit-fields-8-0.png) +![Elasticsearch omit fields](/static/img/docs/elasticsearch/omit-fields-8-0.png) ##### Allow setting a custom limit for log queries You can now set a custom line limit for logs queries instead of accepting the previously hard-coded 500. We also simplified the query editor to only show relevant fields when issuing logs queries. -![Elasticsearch custom log limit](/img/docs/elasticsearch/custom-log-limit-8-0.png) +![Elasticsearch custom log limit](/static/img/docs/elasticsearch/custom-log-limit-8-0.png) ##### Guess field type from first non-empty value