diff --git a/.drone.yml b/.drone.yml index 4084b2d60e3..e6996bdae21 100644 --- a/.drone.yml +++ b/.drone.yml @@ -702,6 +702,31 @@ steps: - yarn install --immutable image: grafana/build-container:1.5.3 name: initialize +- commands: + - git clone "https://$${GITHUB_TOKEN}@github.com/grafana/grafana-enterprise.git" + --depth=1 + - cd grafana-enterprise + - git fetch origin "refs/tags/*:refs/tags/*" + - git tag -d $${TEST_TAG} && git push --delete origin $${TEST_TAG} && git tag $${TEST_TAG} + && git push origin $${TEST_TAG} + - cd - + - git fetch origin "refs/tags/*:refs/tags/*" + - git remote add downstream https://$${GITHUB_TOKEN}@github.com/grafana/$${DOWNSTREAM_REPO}.git + - git tag -d $${TEST_TAG} && git push --delete downstream --quiet $${TEST_TAG} && + git tag $${TEST_TAG} && git push downstream $${TEST_TAG} --quiet + environment: + DOWNSTREAM_REPO: + from_secret: downstream + GITHUB_TOKEN: + from_secret: github_token + TEST_TAG: v0.0.0-test + failure: ignore + image: grafana/build-container:1.5.3 + name: trigger-test-release + when: + paths: + include: + - .drone.yml - image: grafana/drone-downstream name: trigger-enterprise-downstream settings: @@ -4388,6 +4413,6 @@ kind: secret name: gcp_upload_artifacts_key --- kind: signature -hmac: 15995eff6e5351403469b2bedcd93aa4e645d43a94f10eda77a9ee4df17eb53b +hmac: 44e231d2b9a32f86b414ad57bd5d144eb6746baf3b01b037e3a1f4cb94df8a76 ... diff --git a/CHANGELOG.md b/CHANGELOG.md index 75e6acb70bb..ece74d72c21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,24 @@ + + +# 8.4.4 (2022-03-16) + +### Features and enhancements + +- **Loki:** Add unpack to autocomplete suggestions (#44623). [#46573](https://github.com/grafana/grafana/pull/46573), [@glintik](https://github.com/glintik) +- **Plugins:** allow using both Function and Class components for app plugins. [#46148](https://github.com/grafana/grafana/pull/46148), [@leventebalogh](https://github.com/leventebalogh) +- **TimeSeries:** Add migration for Graph panel's transform series override. [#46577](https://github.com/grafana/grafana/pull/46577), [@dprokop](https://github.com/dprokop) +- **TimeSeries:** Preserve null/undefined values when performing negative y transform. [#46584](https://github.com/grafana/grafana/pull/46584), [@dprokop](https://github.com/dprokop) + +### Bug fixes + +- **CloudWatch:** Use default http client from aws-sdk-go. [#46370](https://github.com/grafana/grafana/pull/46370), [@sunker](https://github.com/sunker) +- **Dashboards:** Fixes repeating by row and no refresh. [#46565](https://github.com/grafana/grafana/pull/46565), [@torkelo](https://github.com/torkelo) +- **Gauge:** Fixes blank viz when data link exists and orientation was horizontal. [#46335](https://github.com/grafana/grafana/pull/46335), [@torkelo](https://github.com/torkelo) +- **Search:** sort results correctly when using postgres. [#46466](https://github.com/grafana/grafana/pull/46466), [@xlson](https://github.com/xlson) +- **TagsInput:** fix tags remove button accessibility issues. [#46254](https://github.com/grafana/grafana/pull/46254), [@Elfo404](https://github.com/Elfo404) +- **TextPanel:** Sanitize after markdown has been rendered to html. [#46166](https://github.com/grafana/grafana/pull/46166), [@ashharrison90](https://github.com/ashharrison90) + + # 8.4.3 (2022-03-02) diff --git a/conf/defaults.ini b/conf/defaults.ini index 722c6a480cd..13fc600cd88 100644 --- a/conf/defaults.ini +++ b/conf/defaults.ini @@ -883,14 +883,14 @@ enabled = true enabled = false #################################### Internal Grafana Metrics ############ -# Metrics available at HTTP API Url /metrics +# Metrics available at HTTP URL /metrics and /metrics/plugins/:pluginId [metrics] enabled = true interval_seconds = 10 # Disable total stats (stat_totals_*) metrics to be generated disable_total_stats = false -#If both are set, basic auth will be required for the metrics endpoint. +#If both are set, basic auth will be required for the metrics endpoints. basic_auth_username = basic_auth_password = diff --git a/conf/sample.ini b/conf/sample.ini index 71abc3ac3fa..b8134b7cffc 100644 --- a/conf/sample.ini +++ b/conf/sample.ini @@ -865,7 +865,7 @@ ;enabled = false #################################### Internal Grafana Metrics ########################## -# Metrics available at HTTP API Url /metrics +# Metrics available at HTTP URL /metrics and /metrics/plugins/:pluginId [metrics] # Disable / Enable internal metrics ;enabled = true @@ -874,7 +874,7 @@ # Disable total stats (stat_totals_*) metrics to be generated ;disable_total_stats = false -#If both are set, basic auth will be required for the metrics endpoint. +#If both are set, basic auth will be required for the metrics endpoints. ; basic_auth_username = ; basic_auth_password = diff --git a/devenv/docker/blocks/prometheus/prometheus.yml b/devenv/docker/blocks/prometheus/prometheus.yml index 5fe6e9ac988..691767247c3 100644 --- a/devenv/docker/blocks/prometheus/prometheus.yml +++ b/devenv/docker/blocks/prometheus/prometheus.yml @@ -37,3 +37,8 @@ scrape_configs: - job_name: 'prometheus-random-data' static_configs: - targets: ['prometheus-random-data:8080'] + + # - job_name: 'grafana-test-datasource' + # metrics_path: /metrics/plugins/grafana-test-datasource + # static_configs: + # - targets: ['host.docker.internal:3000'] diff --git a/docs/sources/administration/configuration.md b/docs/sources/administration/configuration.md index 7e66ccdf428..2c9be7e1886 100644 --- a/docs/sources/administration/configuration.md +++ b/docs/sources/administration/configuration.md @@ -202,6 +202,8 @@ Another way is to put a web server like Nginx or Apache in front of Grafana and ### domain +This setting is only used in as a part of the `root_url` setting (see below). Important if you use GitHub or Google OAuth. + ### enforce_domain Redirect to correct domain if the host header does not match the domain. Prevents DNS rebinding attacks. Default is `false`. diff --git a/docs/sources/administration/view-server/internal-metrics.md b/docs/sources/administration/view-server/internal-metrics.md index ed73c45492d..0c129c296dc 100644 --- a/docs/sources/administration/view-server/internal-metrics.md +++ b/docs/sources/administration/view-server/internal-metrics.md @@ -30,7 +30,7 @@ These instructions assume you have already added Prometheus as a data source in 1. Enable Prometheus to scrape metrics from Grafana. In your configuration file (`grafana.ini` or `custom.ini` depending on your operating system) remove the semicolon to enable the following configuration options: ``` - # Metrics available at HTTP API Url /metrics + # Metrics available at HTTP URL /metrics and /metrics/plugins/:pluginId [metrics] # Disable / Enable internal metrics enabled = true @@ -39,7 +39,7 @@ These instructions assume you have already added Prometheus as a data source in disable_total_stats = false ``` -1. (optional) If you want to require authorization to view the metrics endpoint, then uncomment and set the following options: +1. (optional) If you want to require authorization to view the metrics endpoints, then uncomment and set the following options: ``` basic_auth_username = @@ -92,3 +92,48 @@ These instructions assume you have already added Graphite as a data source in Gr ``` 1. Restart Grafana. Grafana now exposes metrics at http://localhost:3000/metrics and sends them to the Graphite location you specified. + +## Pull metrics from Grafana backend plugin into Prometheus + +Any installed [backend plugin]({{< relref "../../developers/plugins/backend/_index.md" >}}) exposes a metrics endpoint through Grafana that you can configure Prometheus to scrape. + +These instructions assume you have already added Prometheus as a data source in Grafana. + +1. Enable Prometheus to scrape backend plugin metrics from Grafana. In your configuration file (`grafana.ini` or `custom.ini` depending on your operating system) remove the semicolon to enable the following configuration options: + + ``` + # Metrics available at HTTP URL /metrics and /metrics/plugins/:pluginId + [metrics] + # Disable / Enable internal metrics + enabled = true + + # Disable total stats (stat_totals_*) metrics to be generated + disable_total_stats = false + ``` + +1. (optional) If you want to require authorization to view the metrics endpoints, then uncomment and set the following options: + + ``` + basic_auth_username = + basic_auth_password = + ``` + +1. Restart Grafana. Grafana now exposes metrics at `http://localhost:3000/metrics/plugins/`, e.g. http://localhost:3000/metrics/plugins/grafana-github-datasource if you have the [Grafana GitHub datasource](https://grafana.com/grafana/plugins/grafana-github-datasource/) installed. +1. Add the job to your prometheus.yml file. + Example: + + ``` + - job_name: 'grafana_github_datasource' + + scrape_interval: 15s + scrape_timeout: 5s + metrics_path: /metrics/plugins/grafana-test-datasource + + static_configs: + - targets: ['localhost:3000'] + ``` + +1. Restart Prometheus. Your new job should appear on the Targets tab. +1. In Grafana, hover your mouse over the **Configuration** (gear) icon on the left sidebar and then click **Data Sources**. +1. Select the **Prometheus** data source. +1. Import a Golang application metrics dashboard - for example [Go Processes](https://grafana.com/grafana/dashboards/6671). diff --git a/docs/sources/alerting/unified-alerting/contact-points.md b/docs/sources/alerting/unified-alerting/contact-points.md index 7f094249283..d1b53e98807 100644 --- a/docs/sources/alerting/unified-alerting/contact-points.md +++ b/docs/sources/alerting/unified-alerting/contact-points.md @@ -149,7 +149,6 @@ Example JSON body: "version": "1", "groupKey": "{}:{}", "truncatedAlerts": 0, - "orgId": 1, "title": "[FIRING:2] (blue)", "state": "alerting", "message": "**Firing**\n\nLabels:\n - alertname = T2\n - team = blue\n - zone = us-1\nAnnotations:\n - description = This is the alert rule checking the second system\n - runbook_url = https://myrunbook.com\n - summary = This is my summary\nSource: https://play.grafana.org/alerting/1afz29v7z/edit\nSilence: https://play.grafana.org/alerting/silence/new?alertmanager=grafana&matchers=alertname%3DT2%2Cteam%3Dblue%2Czone%3Dus-1\n\nLabels:\n - alertname = T1\n - team = blue\n - zone = eu-1\nAnnotations:\nSource: https://play.grafana.org/alerting/d1rdpdv7k/edit\nSilence: https://play.grafana.org/alerting/silence/new?alertmanager=grafana&matchers=alertname%3DT1%2Cteam%3Dblue%2Czone%3Deu-1\n" diff --git a/docs/sources/alerting/unified-alerting/high-availability.md b/docs/sources/alerting/unified-alerting/high-availability.md index 242de6f32fa..d85ddd9a8f4 100644 --- a/docs/sources/alerting/unified-alerting/high-availability.md +++ b/docs/sources/alerting/unified-alerting/high-availability.md @@ -1,5 +1,5 @@ +++ -title = " Configure high availability" +title = " High availability" description = "High Availability" keywords = ["grafana", "alerting", "tutorials", "ha", "high availability"] weight = 450 @@ -11,25 +11,7 @@ The Grafana alerting system has two main components: a `Scheduler` and an intern When it comes to running Grafana alerting in high availability the operational mode of the scheduler is unaffected such that all alerts continue be evaluated in each Grafana instance. Rather the operational change happens in the Alertmanager which **deduplicates** alert notifications across Grafana instances. -``` - .─────. - ╱ ╲ ┌────────────────┐ -( User )──────┐ ┌──────────────────────────────────┐ │ │ - `. ,' │ │┌─────────┐ ┌──────────────┐ │ │ ▼ - `───' │ ││Scheduler│──────▶Alertmananager│─┼──┘ ┌──────────────────────┐ - │ ┌───────────┐ ┌─▶│└─────────┘ ▲──────────────┤ │ │ │ - .─────. │ │ Load │ │ │Grafana │ │ │ │ │ - ╱ ╲ │ │ Balancing │ │ └─────────────────┼──────────────┼─┘ │ Integrations │ -( User )──────┼─────▶│ Reverse │──┤ ┌─────────────────┼──────────────┼─┐ │ │ - `. ,' │ │ Proxy │ │ │┌─────────┐ ├──────────────▼ │ │ │ - `───' │ └───────────┘ │ ││Scheduler│──────▶Alertmananager│─┼──┐ └──────────────────────┘ - │ └─▶│└─────────┘ └──────────────┘ │ │ ▲ - .─────. │ │Grafana │ │ │ - ╱ ╲ │ └──────────────────────────────────┘ └────────────────┘ -( User )──────┘ - `. ,' - `───' -``` +{{< figure src="/static/img/docs/alerting/unified/high-availability-ua.png" class="docs-image--no-shadow" max-width= "750px" caption="High availability" >}} The coordination between Grafana instances happens via [a Gossip protocol](https://en.wikipedia.org/wiki/Gossip_protocol). Alerts are not gossiped between instances. It is expected that each scheduler delivers the same alerts to each Alertmanager. diff --git a/docs/sources/auth/team-sync.md b/docs/sources/auth/team-sync.md index 416601fe9ed..f22b4562cec 100644 --- a/docs/sources/auth/team-sync.md +++ b/docs/sources/auth/team-sync.md @@ -19,4 +19,4 @@ This mechanism allows Grafana to remove an existing synchronized user from a tea
-> Team Sync is available in Grafana Enterprise Cloud Pro and Advanced and in Grafana Enterprise. For more information, refer to [Team sync]({{< relref "../enterprise/team-sync.md" >}}) in [Grafana Enterprise]({{< relref "../enterprise" >}}). +> Team Sync is available in both Grafana Enterprise and Grafana Cloud Advanced. For more information, refer to [Team sync]({{< relref "../enterprise/team-sync.md" >}}) in [Grafana Enterprise]({{< relref "../enterprise" >}}). diff --git a/docs/sources/dashboards/_index.md b/docs/sources/dashboards/_index.md index 160e7784049..672c34883df 100644 --- a/docs/sources/dashboards/_index.md +++ b/docs/sources/dashboards/_index.md @@ -4,58 +4,25 @@ aliases = ["/docs/grafana/latest/features/dashboard/dashboards/"] weight = 80 +++ -# Dashboard overview +# About Grafana dashboards -A _dashboard_ is a set of one or more panels organized and arranged into one or more rows. Grafana ships with a variety of Panels. Grafana makes it easy to construct the right queries, and customize the display properties so that you can create the perfect dashboard for your need. Each panel can interact with data from any configured Grafana Data Source (currently Graphite, Prometheus, Elasticsearch, InfluxDB, OpenTSDB, MySQL, PostgreSQL, Microsoft SQL Server and AWS Cloudwatch). +A dashboard is a set of one or more [panels]({{< relref "../panels/_index.md" >}}) organized and arranged into one or more rows. Grafana ships with a variety of panels making it easy to construct the right queries, and customize the visualization so that you can create the perfect dashboard for your need. Each panel can interact with data from any configured Grafana [data source]({{< relref "../datasources/_index.md" >}}). -## Dashboard UI +Dashboard snapshots are static . Queries and expressions cannot be re-executed from snapshots. As a result, if you update any variables in your query or expression, it will not change your dashboard data. - +Before you begin, ensure that you have configured a data source. See also: -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. -1. Manual refresh button. Will cause all panels to refresh (fetch new data). -1. Dashboard panel. Click the panel title to edit panels. -1. Graph legend. You can change series colors, y-axis and series visibility directly from the legend. - -## Dashboard header - -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. - -1. Side menubar toggle: This toggles the side menu, allowing you to focus on the data presented in the dashboard. The side menu provides access to features unrelated to a Dashboard such as Users, Organizations, and Data Sources. -1. Dashboard dropdown: This 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 or folder, import existing Dashboards, and manage Dashboard playlists. -1. Add Panel: Adds a new panel to the current Dashboard. -1. Star Dashboard: Star (or unstar) the current Dashboard. Starred Dashboards will show up on your own Home Dashboard by default, and are a convenient way to mark Dashboards that you're interested in. -1. Share Dashboard: Share the current dashboard by creating a link or create a static Snapshot of it. Make sure the Dashboard is saved before sharing. -1. Save dashboard: The current Dashboard will be saved with the current Dashboard name. -1. Settings: Manage Dashboard settings and features such as Templating and Annotations. - -## Manage dashboards - -The time period for the dashboard can be controlled by the [Time range controls]({{< relref "time-range-controls.md" >}}) in the upper right of the dashboard. - -Dashboards can use [templating]({{< relref "../variables/_index.md" >}}) to make them more dynamic and interactive. - -Dashboards can use [annotations]({{< relref "annotations.md" >}}) to display event data across panels. This can help correlate the time series data in the panel with other events. - -You can [share dashboards]({{< relref "../sharing/share-dashboard.md" >}}) in a variety of ways. - -Dashboards can be tagged, and the dashboard picker provides quick, searchable access to all dashboards in a particular organization. - -## Rows - -A _row_ is a logical divider within a dashboard. It is used to group panels together. - -Rows are always 12 “units” wide. These units are automatically scaled dependent on the horizontal resolution of your browser. You can control the relative width of panels within a row by setting their specific width. - -We use a unit abstraction so that Grafana looks great on all screen sizes. - -> **Note:** With MaxDataPoint functionality, Grafana can show you the perfect number of data points, regardless of resolution or time range. - -Collapse a row by clicking on the row title. If you save a dashboard with a row collapsed, then it saves in that state and does not load those graphs until you expand the row. - -Use the [repeating rows]({{< relref "../variables/_index.md#repeating-rows" >}}) functionality to dynamically create or remove entire rows, which can be filled with panels, based on the template variables selected. +- [Working with Grafana dashboard UI]({{< relref "./dashboard-ui/_index.md" >}}) +- [Dashboard folders]({{< relref "./dashboard-folders.md" >}}) +- [Create dashboard]({{< relref "./dashboard-create" >}}) +- [Manage dashboards]({{< relref "./dashboard-manage.md" >}}) +- [Annotations]({{< relref "./annotations.md" >}}) +- [Playlist]({{< relref "./playlist.md" >}}) +- [Search]({{< relref "./search.md" >}}) +- [Keyboard shortcuts]({{< relref "./shortcuts.md" >}}) +- [Reporting]({{< relref "./reporting.md" >}}) +- [Time range controls]({{< relref "./time-range-controls.md" >}}) +- [Dashboard version history]({{< relref "./dashboard-history.md" >}}) +- [Dashboard export and import]({{< relref "./export-import.md" >}}) +- [Dashboard JSON model]({{< relref "./json-model.md" >}}) +- [Scripted dashboards]({{< relref "./scripted-dashboards.md" >}}) diff --git a/docs/sources/dashboards/annotations.md b/docs/sources/dashboards/annotations.md index 2bc1a8171a9..138314265dd 100644 --- a/docs/sources/dashboards/annotations.md +++ b/docs/sources/dashboards/annotations.md @@ -2,16 +2,16 @@ title = "Annotations" keywords = ["grafana", "annotations", "documentation", "guide"] aliases = ["/docs/grafana/latest/reference/annotations/"] -weight = 2 +weight = 9 +++ # Annotations -{{< 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. +{{< figure src="/static/img/docs/v46/annotations.png" max-width="800px" >}} + ## Native annotations Grafana comes with a native annotation store and the ability to add annotation events directly from the graph panel or via the [HTTP API]({{< relref "../http_api/annotations.md" >}}). diff --git a/docs/sources/dashboards/dashboard-create.md b/docs/sources/dashboards/dashboard-create.md new file mode 100644 index 00000000000..cf057baf3f9 --- /dev/null +++ b/docs/sources/dashboards/dashboard-create.md @@ -0,0 +1,11 @@ ++++ +title = "Create dashboards" +aliases = ["/docs/grafana/latest/features/dashboard/dashboards/"] +weight = 7 ++++ + +## Create dashboard + +To create a new dashboard: + +Click the new dashboard link on the right side of the time picker. A blank dashboard is created. diff --git a/docs/sources/dashboards/dashboard-manage.md b/docs/sources/dashboards/dashboard-manage.md new file mode 100644 index 00000000000..1313897b903 --- /dev/null +++ b/docs/sources/dashboards/dashboard-manage.md @@ -0,0 +1,17 @@ ++++ +title = "Manage dashboards" +aliases = ["/docs/grafana/latest/features/dashboard/dashboards/"] +weight = 8 ++++ + +## Manage dashboards + +When managing dashboads, you can use: + +- Select a time period for a dashboard using the [Time range controls]({{< relref "time-range-controls.md" >}}) in the upper right of the dashboard. +- Tag dashboards. +- Use [templating]({{< relref "../variables/_index.md" >}}) to make them more dynamic and interactive. +- Use [annotations]({{< relref "annotations.md" >}}) to display event data across panels. This can help correlate the time series data in the panel with other events. +- Use the dashboard picker for quick, searchable access to all dashboards in a particular organization. + +You can also [share dashboards]({{< relref "../sharing/share-dashboard.md" >}}) in a variety of ways. diff --git a/docs/sources/dashboards/dashboard-ui/_index.md b/docs/sources/dashboards/dashboard-ui/_index.md new file mode 100644 index 00000000000..52ee157c855 --- /dev/null +++ b/docs/sources/dashboards/dashboard-ui/_index.md @@ -0,0 +1,19 @@ ++++ +title = " Dashboard UI" +aliases = ["/docs/grafana/latest/features/dashboard/dashboards/"] +weight = 2 ++++ + +# Working with Grafana dashboard UI + +The dashboard UI has the following sections to allow you to customize the presentation of data. + + + +- **Zoom out time range** (1) +- **Time picker dropdown** (2). Access relative time range options, auto refresh options and set custom absolute time ranges. +- **Manual refresh option** (3) Fetch new data. +- **Dashboard panel** (4) Click the panel title to edit panels. +- **Graph legend** (5) Change series colors, y-axis and series visibility directly from the legend. + +For more details, see [Dashboard header]({{< relref "./dashboard-header.md" >}}) and [Dashboard rows]({{< relref "./dashboard-row.md" >}}). diff --git a/docs/sources/dashboards/dashboard-ui/dashboard-header.md b/docs/sources/dashboards/dashboard-ui/dashboard-header.md new file mode 100644 index 00000000000..fd4cd72e946 --- /dev/null +++ b/docs/sources/dashboards/dashboard-ui/dashboard-header.md @@ -0,0 +1,21 @@ ++++ +title = "Dashboard header" +aliases = ["/docs/grafana/latest/features/dashboard/dashboards/"] +weight = 80 ++++ + +## Dashboard header + +The dashboard header has the following sections. + + + +- **Side menubar toggle** (1): This option toggles the side menu. It provides access to features unrelated to a dashboard such as users, organizations, data sources, and alerting. +- **Dashboard dropdown** (2): Use this option to view the current dashboard name. From here, you can: + - Select another dashboard name to easily switch to that dashboard. + - Create a new dashboard or folder, import existing dashboards, and manage dashboard playlists. +- **Add panel** (3): Use this option to add a new panel to the current dashboard. +- **Star dashboard** (4): Use this option to star (or unstar) the current dashboard. Starred dashboards show up on your own homw dashboard by default. It is a convenient way to mark Dashboards that you're interested in. +- **Share dashboard** (5): Use this option to share the current dashboard by creating a link or create a static snapshot of it. You must save the dashboard before sharing. +- **Save dashboard** (6): Use this option to save the current dashboard using its current name. +- **Settings** (7): Use this option to manage dashboard settings and configure templates and annotations. diff --git a/docs/sources/dashboards/dashboard-ui/dashboard-row.md b/docs/sources/dashboards/dashboard-ui/dashboard-row.md new file mode 100644 index 00000000000..b00e1f1c80c --- /dev/null +++ b/docs/sources/dashboards/dashboard-ui/dashboard-row.md @@ -0,0 +1,21 @@ ++++ +title = "Dashboard rows" +aliases = ["/docs/grafana/latest/features/dashboard/dashboards/"] +weight = 80 ++++ + +# Dshboard rows + +A dashboard row is a logical divider within a dashboard. It is used to group panels together. + +Grafana uses a base unit abstraction so that dashboards and panels look great on all screen sizes. Dashboard rows are always 12 “units” wide. These units are automatically scaled dependent on the horizontal resolution of your browser. You can control the relative width of panels within a row by setting their specific width. + +> **Note:** With MaxDataPoint functionality, Grafana can show you the perfect number of data points, regardless of resolution or time range. + +## Create or remove rows + +Use the [repeating rows]({{< relref "../../variables/_index.md#repeating-rows" >}}) functionality to dynamically create or remove entire rows, which can be filled with panels, based on the template variables selected. + +## Collapse rows + +Collapse a row by clicking on the row title. If you save a dashboard with a row collapsed, then it saves in that state and does not load those graphs until you expand the row. diff --git a/docs/sources/dashboards/dashboard_folders.md b/docs/sources/dashboards/dashboard_folders.md index b861ebb4063..5caf3407015 100644 --- a/docs/sources/dashboards/dashboard_folders.md +++ b/docs/sources/dashboards/dashboard_folders.md @@ -2,7 +2,7 @@ title = "Dashboard Folders" keywords = ["grafana", "dashboard", "dashboard folders", "folder", "folders", "documentation", "guide"] aliases = ["/docs/grafana/latest/reference/dashboard_folders/"] -weight = 3 +weight = 6 +++ # Dashboard Folders diff --git a/docs/sources/dashboards/dashboard_history.md b/docs/sources/dashboards/dashboard_history.md index 187b9516da6..b7c9b21211d 100644 --- a/docs/sources/dashboards/dashboard_history.md +++ b/docs/sources/dashboards/dashboard_history.md @@ -1,11 +1,11 @@ +++ -title = "Dashboard Version History" +title = "Dashboard version history" keywords = ["grafana", "dashboard", "documentation", "version", "history"] aliases = ["/docs/grafana/latest/reference/dashboard_history/"] -weight = 100 +weight = 14 +++ -# Dashboard Version History +# Dashboard version history 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. diff --git a/docs/sources/dashboards/playlist.md b/docs/sources/dashboards/playlist.md index 054547f6ea1..3fa4b9598df 100644 --- a/docs/sources/dashboards/playlist.md +++ b/docs/sources/dashboards/playlist.md @@ -2,17 +2,23 @@ title = "Playlist" keywords = ["grafana", "dashboard", "documentation", "playlist"] aliases = ["/docs/grafana/latest/reference/playlist/"] -weight = 4 +weight = 9 +++ # Playlist A playlist displays a list of dashboards that are in a sequence. Use a playlist to build situational awareness or to present your metrics to your team or visitors. Grafana automatically scales dashboards to any resolution, which makes them perfect for big screens. This topic has the following sections: -- [Access, share, and control a playlist](#access-share-and-control-a-playlist) -- [Create a playlist](#create-a-playlist) -- [Edit or delete a playlist](#edit-or-delete-a-playlist) -- [Share a playlist](#share-a-playlist-in-a-view-mode) +- [Playlist](#playlist) + - [Access, share, and control a playlist](#access-share-and-control-a-playlist) + - [Access playlist](#access-playlist) + - [Start a playlist](#start-a-playlist) + - [Control a playlist](#control-a-playlist) + - [Create a playlist](#create-a-playlist) + - [Edit or delete a playlist](#edit-or-delete-a-playlist) + - [Edit a playlist](#edit-a-playlist) + - [Delete a playlist](#delete-a-playlist) + - [Share a playlist in a view mode](#share-a-playlist-in-a-view-mode) ## Access, share, and control a playlist diff --git a/docs/sources/dashboards/reporting.md b/docs/sources/dashboards/reporting.md index 7ee97544545..b782d114d1c 100644 --- a/docs/sources/dashboards/reporting.md +++ b/docs/sources/dashboards/reporting.md @@ -3,7 +3,7 @@ title = "Reporting" description = "" keywords = ["grafana", "reporting"] aliases = ["/docs/grafana/latest/administration/reports"] -weight = 8 +weight = 10 +++ # Reporting diff --git a/docs/sources/dashboards/search.md b/docs/sources/dashboards/search.md index ec6d2c793cb..78e5daaaf37 100644 --- a/docs/sources/dashboards/search.md +++ b/docs/sources/dashboards/search.md @@ -2,7 +2,7 @@ title = "Search" keywords = ["grafana", "dashboard", "documentation", "search"] aliases =["/docs/grafana/latest/reference/search/"] -weight = 5 +weight = 9 +++ # Dashboard Search diff --git a/docs/sources/dashboards/shortcuts.md b/docs/sources/dashboards/shortcuts.md index d3112255478..e13882c9008 100644 --- a/docs/sources/dashboards/shortcuts.md +++ b/docs/sources/dashboards/shortcuts.md @@ -1,6 +1,6 @@ +++ title = "Keyboard shortcuts" -weight = 7 +weight = 10 +++ # Keyboard shortcuts diff --git a/docs/sources/dashboards/time-range-controls.md b/docs/sources/dashboards/time-range-controls.md index 7b85ec078c1..34a72186be5 100644 --- a/docs/sources/dashboards/time-range-controls.md +++ b/docs/sources/dashboards/time-range-controls.md @@ -2,7 +2,7 @@ title = "Time range controls" keywords = ["grafana", "dashboard", "documentation", "time range"] aliases = ["/docs/grafana/latest/reference/timerange/"] -weight = 7 +weight = 13 +++ # Time range controls diff --git a/docs/sources/datasources/alertmanager.md b/docs/sources/datasources/alertmanager.md index 68422acc56c..5822e2fc522 100644 --- a/docs/sources/datasources/alertmanager.md +++ b/docs/sources/datasources/alertmanager.md @@ -8,7 +8,7 @@ weight = 150 # Alertmanager data source -Grafana includes built-in support for Prometheus Alertmanager. It is presently in alpha and not accessible unless [alpha plugins are enabled in Grafana settings](https://grafana.com/docs/grafana/latest/administration/configuration/#enable_alpha). Once you add it as a data source, you can use the [Grafana alerting UI](https://grafana.com/docs/grafana/latest/alerting/) to manage silences, contact points as well as notification policies. A drop-down option in these pages allows you to switch between Grafana and any configured Alertmanager data sources. +Grafana includes built-in support for Prometheus Alertmanager. It is presently in alpha and not accessible unless [alpha plugins are enabled in Grafana settings](https://grafana.com/docs/grafana/latest/administration/configuration/#enable_alpha-1). Once you add it as a data source, you can use the [Grafana alerting UI](https://grafana.com/docs/grafana/latest/alerting/) to manage silences, contact points as well as notification policies. A drop-down option in these pages allows you to switch between Grafana and any configured Alertmanager data sources. ## Alertmanager implementations diff --git a/docs/sources/enterprise/saml.md b/docs/sources/enterprise/saml.md index 3c94203521e..4c8680f25ad 100644 --- a/docs/sources/enterprise/saml.md +++ b/docs/sources/enterprise/saml.md @@ -31,10 +31,12 @@ In terms of security: - Grafana supports signed and encrypted assertions. - Grafana does not support signed or encrypted requests. -In terms of initiation: +In terms of initiation, Grafana supports: -- Grafana supports SP-initiated requests. -- Grafana does not support IdP-initiated request. +- SP-initiated requests +- IdP-initiated requests + +By default, SP-initiated requests are enabled. For instructions on how to enable IdP-initiated logins, see https://grafana.com/docs/grafana/latest/enterprise/saml/#idp-initiated-single-sign-on-sso. ## Set up SAML authentication diff --git a/docs/sources/installation/kubernetes.md b/docs/sources/installation/kubernetes.md index a4394dcefe9..5a4d79202cd 100644 --- a/docs/sources/installation/kubernetes.md +++ b/docs/sources/installation/kubernetes.md @@ -49,7 +49,7 @@ spec: - 0 containers: - name: grafana - image: grafana/grafana:7.5.2 + image: grafana/grafana:8.4.4 imagePullPolicy: IfNotPresent ports: - containerPort: 3000 diff --git a/docs/sources/release-notes/_index.md b/docs/sources/release-notes/_index.md index 5b4dca9698b..8802b9012d0 100644 --- a/docs/sources/release-notes/_index.md +++ b/docs/sources/release-notes/_index.md @@ -8,6 +8,7 @@ weight = 10000 Here you can find detailed release notes that list everything that is included in every release as well as notices about deprecations, breaking changes as well as changes that relate to plugin development. +- [Release notes for 8.4.4]({{< relref "release-notes-8-4-4" >}}) - [Release notes for 8.4.3]({{< relref "release-notes-8-4-3" >}}) - [Release notes for 8.4.2]({{< relref "release-notes-8-4-2" >}}) - [Release notes for 8.4.1]({{< relref "release-notes-8-4-1" >}}) diff --git a/docs/sources/release-notes/release-notes-8-4-4.md b/docs/sources/release-notes/release-notes-8-4-4.md new file mode 100644 index 00000000000..f68c81fe817 --- /dev/null +++ b/docs/sources/release-notes/release-notes-8-4-4.md @@ -0,0 +1,24 @@ ++++ +title = "Release notes for Grafana 8.4.4" +hide_menu = true ++++ + + + +# Release notes for Grafana 8.4.4 + +### Features and enhancements + +- **Loki:** Add unpack to autocomplete suggestions (#44623). [#46573](https://github.com/grafana/grafana/pull/46573), [@glintik](https://github.com/glintik) +- **Plugins:** allow using both Function and Class components for app plugins. [#46148](https://github.com/grafana/grafana/pull/46148), [@leventebalogh](https://github.com/leventebalogh) +- **TimeSeries:** Add migration for Graph panel's transform series override. [#46577](https://github.com/grafana/grafana/pull/46577), [@dprokop](https://github.com/dprokop) +- **TimeSeries:** Preserve null/undefined values when performing negative y transform. [#46584](https://github.com/grafana/grafana/pull/46584), [@dprokop](https://github.com/dprokop) + +### Bug fixes + +- **CloudWatch:** Use default http client from aws-sdk-go. [#46370](https://github.com/grafana/grafana/pull/46370), [@sunker](https://github.com/sunker) +- **Dashboards:** Fixes repeating by row and no refresh. [#46565](https://github.com/grafana/grafana/pull/46565), [@torkelo](https://github.com/torkelo) +- **Gauge:** Fixes blank viz when data link exists and orientation was horizontal. [#46335](https://github.com/grafana/grafana/pull/46335), [@torkelo](https://github.com/torkelo) +- **Search:** sort results correctly when using postgres. [#46466](https://github.com/grafana/grafana/pull/46466), [@xlson](https://github.com/xlson) +- **TagsInput:** fix tags remove button accessibility issues. [#46254](https://github.com/grafana/grafana/pull/46254), [@Elfo404](https://github.com/Elfo404) +- **TextPanel:** Sanitize after markdown has been rendered to html. [#46166](https://github.com/grafana/grafana/pull/46166), [@ashharrison90](https://github.com/ashharrison90) diff --git a/docs/sources/variables/filter-variables-with-regex.md b/docs/sources/variables/filter-variables-with-regex.md index 299b1d5891f..eadbfe7cf16 100644 --- a/docs/sources/variables/filter-variables-with-regex.md +++ b/docs/sources/variables/filter-variables-with-regex.md @@ -26,7 +26,7 @@ backend_04 Regex: ```regex -/.*[01|02]/ +/(01|02)$/ ``` Result: diff --git a/go.mod b/go.mod index 4e9cc01470b..47025e4f09e 100644 --- a/go.mod +++ b/go.mod @@ -93,7 +93,7 @@ require ( github.com/uber/jaeger-client-go v2.29.1+incompatible github.com/unknwon/com v1.0.1 github.com/urfave/cli/v2 v2.3.0 - github.com/vectordotdev/go-datemath v0.1.1-0.20220110192739-f9ce83ec349f + github.com/vectordotdev/go-datemath v0.1.1-0.20220323213446-f3954d0b18ae github.com/weaveworks/common v0.0.0-20210913144402-035033b78a78 github.com/xorcare/pointer v1.1.0 github.com/yudai/gojsondiff v1.0.0 diff --git a/go.sum b/go.sum index 665845a11d3..d61f62786e5 100644 --- a/go.sum +++ b/go.sum @@ -2362,6 +2362,8 @@ github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+ github.com/valyala/tcplisten v0.0.0-20161114210144-ceec8f93295a/go.mod h1:v3UYOV9WzVtRmSR+PDvWpU/qWl4Wa5LApYYX4ZtKbio= github.com/vectordotdev/go-datemath v0.1.1-0.20220110192739-f9ce83ec349f h1:2upw/ZfjkCKpc4k6DXg7lMfCSLkfw/8epV5/y2ZUQ8U= github.com/vectordotdev/go-datemath v0.1.1-0.20220110192739-f9ce83ec349f/go.mod h1:PnwzbSst7KD3vpBzzlntZU5gjVa455Uqa5QPiKSYJzQ= +github.com/vectordotdev/go-datemath v0.1.1-0.20220323213446-f3954d0b18ae h1:oyiy3uBj1F4O3AaFh7hUGBrJjAssJhKyAbwxtkslxqo= +github.com/vectordotdev/go-datemath v0.1.1-0.20220323213446-f3954d0b18ae/go.mod h1:PnwzbSst7KD3vpBzzlntZU5gjVa455Uqa5QPiKSYJzQ= github.com/vektah/gqlparser v1.1.2/go.mod h1:1ycwN7Ij5njmMkPPAOaRFY4rET2Enx7IkVv3vaXspKw= github.com/vektra/mockery v0.0.0-20181123154057-e78b021dcbb5/go.mod h1:ppEjwdhyy7Y31EnHRDm1JkChoC7LXIJ7Ex0VYLWtZtQ= github.com/vishvananda/netlink v0.0.0-20171020171820-b2de5d10e38e/go.mod h1:+SR5DhBJrl6ZM7CoCKvpw5BKroDKQ+PJqOg65H/2ktk= diff --git a/latest.json b/latest.json index 360c9f7b7d9..0215f236bb2 100644 --- a/latest.json +++ b/latest.json @@ -1,4 +1,4 @@ { - "stable": "8.4.3", - "testing": "8.4.3" + "stable": "8.4.4", + "testing": "8.4.4" } diff --git a/package.json b/package.json index dda9191092f..ce78fedfad4 100644 --- a/package.json +++ b/package.json @@ -27,18 +27,18 @@ "packages:docsExtract": "rm -rf ./reports/docs && lerna run docsExtract", "packages:docsToMarkdown": "api-documenter markdown --input-folder ./reports/docs/ --output-folder ./docs/sources/packages_api/ --hugo", "packages:prepare": "lerna version --no-push --no-git-tag-version --force-publish --exact", - "packages:publish": "lerna publish from-package --contents dist", - "packages:publishCanary": "lerna publish from-package --contents dist --dist-tag canary --yes", - "packages:publishLatest": "lerna publish from-package --contents dist --yes", - "packages:publishNext": "lerna publish from-package --contents dist --dist-tag next --yes", - "packages:publishTest": "lerna publish from-package --contents dist --dist-tag test --yes", - "packages:publishPrevious": "lerna publish from-package --contents dist --dist-tag previous --yes", + "packages:publish": "lerna publish from-package --contents dist --no-verify-access", + "packages:publishCanary": "lerna publish from-package --contents dist --dist-tag canary --yes --no-verify-access", + "packages:publishLatest": "lerna publish from-package --contents dist --yes --no-verify-access", + "packages:publishNext": "lerna publish from-package --contents dist --dist-tag next --yes --no-verify-access", + "packages:publishTest": "lerna publish from-package --contents dist --dist-tag test --yes --no-verify-access", + "packages:publishPrevious": "lerna publish from-package --contents dist --dist-tag previous --yes --no-verify-access", "packages:publishDev": "lerna publish from-package --contents dist --dist-tag dev --yes --registry http://grafana-npm.local:4873 --force-publish=*", "packages:typecheck": "lerna run typecheck", "packages:clean": "lerna run clean", "precommit": "yarn run lint-staged", "prettier:check": "prettier --check --list-different=false --loglevel=warn \"**/*.{scss,md,mdx}\"", - "prettier:checkDocs": "prettier --check --list-different=false --loglevel=warn \"docs/**.md\" \"packages/**.{ts,tsx,scss,md,mdx}\"", + "prettier:checkDocs": "prettier --check --list-different=false --loglevel=warn \"docs/**/*.md\" \"packages/**/*.{ts,tsx,scss,md,mdx}\"", "prettier:write": "prettier --list-different \"**/*.{scss,md,mdx}\" --write", "start": "yarn themes:generate && yarn dev --watch", "start:noTsCheck": "yarn start --env noTsCheck=1", @@ -180,7 +180,7 @@ "eslint-webpack-plugin": "3.1.1", "expose-loader": "3.1.0", "file-loader": "6.2.0", - "fork-ts-checker-webpack-plugin": "6.5.0", + "fork-ts-checker-webpack-plugin": "6.4.0", "fs-extra": "10.0.0", "glob": "7.2.0", "html-loader": "3.1.0", diff --git a/packages/grafana-data/src/transformations/transformers/histogram.ts b/packages/grafana-data/src/transformations/transformers/histogram.ts index 0e8b2c1da88..5519c8354b4 100644 --- a/packages/grafana-data/src/transformations/transformers/histogram.ts +++ b/packages/grafana-data/src/transformations/transformers/histogram.ts @@ -152,7 +152,7 @@ export function buildHistogram(frames: DataFrame[], options?: HistogramTransform let bucketOffset = options?.bucketOffset ?? 0; // if bucket size is auto, try to calc from all numeric fields - if (!bucketSize) { + if (!bucketSize || bucketSize < 0) { let allValues: number[] = []; // TODO: include field configs! diff --git a/packages/grafana-runtime/src/services/templateSrv.ts b/packages/grafana-runtime/src/services/templateSrv.ts index 962dacd70c2..6af1575503f 100644 --- a/packages/grafana-runtime/src/services/templateSrv.ts +++ b/packages/grafana-runtime/src/services/templateSrv.ts @@ -1,4 +1,4 @@ -import { VariableModel, ScopedVars } from '@grafana/data'; +import { VariableModel, ScopedVars, TimeRange } from '@grafana/data'; /** * Via the TemplateSrv consumers get access to all the available template variables @@ -17,6 +17,11 @@ export interface TemplateSrv { * Replace the values within the target string. See also {@link InterpolateFunction} */ replace(target?: string, scopedVars?: ScopedVars, format?: string | Function): string; + + /** + * Update the current time range to be used when interpolating __from / __to variables. + */ + updateTimeRange(timeRange: TimeRange): void; } let singletonInstance: TemplateSrv; diff --git a/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/scripts/deploy.sh b/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/scripts/deploy.sh index e1a5fb6c3c1..6c1ab4abba7 100755 --- a/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/scripts/deploy.sh +++ b/packages/grafana-toolkit/docker/grafana-plugin-ci-alpine/scripts/deploy.sh @@ -18,8 +18,8 @@ apk add --no-cache curl npm yarn build-base openssh git-lfs perl-utils coreutils # apk add --no-cache xvfb glib nss nspr gdk-pixbuf "gtk+3.0" pango atk cairo dbus-libs libxcomposite libxrender libxi libxtst libxrandr libxscrnsaver alsa-lib at-spi2-atk at-spi2-core cups-libs gcompat libc6-compat # Install Go -filename="go1.17.linux-amd64.tar.gz" -get_file "https://dl.google.com/go/$filename" "/tmp/$filename" "6bf89fc4f5ad763871cf7eac80a2d594492de7a818303283f1366a7f6a30372d" +filename="go1.17.8.linux-amd64.tar.gz" +get_file "https://dl.google.com/go/$filename" "/tmp/$filename" "980e65a863377e69fd9b67df9d8395fd8e93858e7a24c9f55803421e453f4f99" untar_file "/tmp/$filename" # Install golangci-lint diff --git a/packages/grafana-toolkit/docker/grafana-plugin-ci-e2e/scripts/deploy.sh b/packages/grafana-toolkit/docker/grafana-plugin-ci-e2e/scripts/deploy.sh index cdd3d4ab442..6fd4db822ae 100755 --- a/packages/grafana-toolkit/docker/grafana-plugin-ci-e2e/scripts/deploy.sh +++ b/packages/grafana-toolkit/docker/grafana-plugin-ci-e2e/scripts/deploy.sh @@ -22,8 +22,8 @@ source "/etc/profile" npm i -g yarn # Install Go -filename="go1.17.linux-amd64.tar.gz" -get_file "https://dl.google.com/go/$filename" "/tmp/$filename" "6bf89fc4f5ad763871cf7eac80a2d594492de7a818303283f1366a7f6a30372d" +filename="go1.17.8.linux-amd64.tar.gz" +get_file "https://dl.google.com/go/$filename" "/tmp/$filename" "980e65a863377e69fd9b67df9d8395fd8e93858e7a24c9f55803421e453f4f99" untar_file "/tmp/$filename" # Install golangci-lint diff --git a/packages/grafana-toolkit/docker/grafana-plugin-ci/scripts/deploy.sh b/packages/grafana-toolkit/docker/grafana-plugin-ci/scripts/deploy.sh index 38b944a78fd..c9c13d956d4 100755 --- a/packages/grafana-toolkit/docker/grafana-plugin-ci/scripts/deploy.sh +++ b/packages/grafana-toolkit/docker/grafana-plugin-ci/scripts/deploy.sh @@ -2,8 +2,8 @@ source "./deploy-common.sh" # Install Go -filename="go1.17.linux-amd64.tar.gz" -get_file "https://dl.google.com/go/$filename" "/tmp/$filename" "6bf89fc4f5ad763871cf7eac80a2d594492de7a818303283f1366a7f6a30372d" +filename="go1.17.8.linux-amd64.tar.gz" +get_file "https://dl.google.com/go/$filename" "/tmp/$filename" "980e65a863377e69fd9b67df9d8395fd8e93858e7a24c9f55803421e453f4f99" untar_file "/tmp/$filename" # Install golangci-lint diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx index adcd7642899..2b081551287 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx @@ -1,9 +1,9 @@ -import React, { FunctionComponent, useState } from 'react'; import { css, cx } from '@emotion/css'; +import { GrafanaTheme2 } from '@grafana/data'; +import React, { FunctionComponent, useState } from 'react'; import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; -import { GrafanaTheme2 } from '@grafana/data'; const getStyles = (theme: GrafanaTheme2) => ({ collapse: css` @@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, header: css` label: collapse__header; - padding: ${theme.spacing(1, 2, 0.5, 2)}; + padding: ${theme.spacing(1, 2, 1, 2)}; display: flex; cursor: inherit; transition: all 0.1s linear; @@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, headerCollapsed: css` label: collapse__header--collapsed; - padding: ${theme.spacing(1, 2, 0.5, 2)}; + padding: ${theme.spacing(1, 2, 1, 2)}; `, headerLabel: css` label: collapse__header-label; @@ -137,7 +137,7 @@ export const Collapse: FunctionComponent = ({ return (
- {collapsible && } + {collapsible && }
{label}
{isOpen && ( diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx index ad42c9737d8..2395c016e5d 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx @@ -80,6 +80,7 @@ export const DataLinkInput: React.FC = memo( const [suggestionsIndex, setSuggestionsIndex] = useState(0); const [linkUrl, setLinkUrl] = useState(makeValue(value)); const prevLinkUrl = usePrevious(linkUrl); + const [scrollTop, setScrollTop] = useState(0); // Workaround for https://github.com/ianstormtaylor/slate/issues/2927 const stateRef = useRef({ showingSuggestions, suggestions, suggestionsIndex, linkUrl, onChange }); @@ -87,10 +88,9 @@ export const DataLinkInput: React.FC = memo( // Used to get the height of the suggestion elements in order to scroll to them. const activeRef = useRef(null); - const activeIndexPosition = useMemo( - () => getElementPosition(activeRef.current, suggestionsIndex), - [suggestionsIndex] - ); + useEffect(() => { + setScrollTop(getElementPosition(activeRef.current, suggestionsIndex)); + }, [suggestionsIndex]); // SelectionReference is used to position the variables suggestion relatively to current DOM selection const selectionRef = useMemo(() => new SelectionReference(), []); @@ -183,7 +183,11 @@ export const DataLinkInput: React.FC = memo( {({ ref, style, placement }) => { return (
- + setScrollTop(scrollTop)} + > = (props) => {