fix(prometheus): Change aligment of range queries (#16110)

- future alignment cause issues with rate charts and the display of last
values
- this change modifies the alignment to use the last available aligned
end date and no longer possibly requests data from the future

docs/sources/features/datasources/prometheus.md

@@ -19,22 +19,22 @@ Grafana includes built-in support for Prometheus.
 1. Open the side menu by clicking the Grafana icon in the top header.
 2. In the side menu under the `Dashboards` link you should find a link named `Data Sources`.
 3. Click the `+ Add data source` button in the top header.
-4. Select `Prometheus` from the *Type* dropdown.
+4. Select `Prometheus` from the _Type_ dropdown.
 
 > NOTE: If you're not seeing the `Data Sources` link in your side menu it means that your current user does not have the `Admin` role for the current organization.
 
 ## Data source options
 
-Name | Description
------------- | -------------
-*Name* | The data source name. This is how you refer to the data source in panels & queries.
-*Default* | Default data source means that it will be pre-selected for new panels.
-*Url* | The http protocol, ip and port of you Prometheus server (default port is usually 9090)
-*Access* | Server (default) = URL needs to be accessible from the Grafana backend/server, Browser = URL needs to be accessible from the browser.
-*Basic Auth* | Enable basic authentication to the Prometheus data source.
-*User* | Name of your Prometheus user
-*Password* | Database user's password
-*Scrape interval* | This will be used as a lower limit for the Prometheus step query parameter. Default value is 15s.
+| Name              | Description                                                                                                                           |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| _Name_            | The data source name. This is how you refer to the data source in panels & queries.                                                   |
+| _Default_         | Default data source means that it will be pre-selected for new panels.                                                                |
+| _Url_             | The http protocol, ip and port of you Prometheus server (default port is usually 9090)                                                |
+| _Access_          | Server (default) = URL needs to be accessible from the Grafana backend/server, Browser = URL needs to be accessible from the browser. |
+| _Basic Auth_      | Enable basic authentication to the Prometheus data source.                                                                            |
+| _User_            | Name of your Prometheus user                                                                                                          |
+| _Password_        | Database user's password                                                                                                              |
+| _Scrape interval_ | This will be used as a lower limit for the Prometheus step query parameter. Default value is 15s.                                     |
 
 ## Query editor
 
@@ -43,14 +43,17 @@ Open a graph in edit mode by click the title > Edit (or by pressing `e` key whil
 {{< docs-imagebox img="/img/docs/v45/prometheus_query_editor_still.png"
                   animated-gif="/img/docs/v45/prometheus_query_editor.gif" >}}
 
-Name | Description
-------- | --------
-*Query expression* | Prometheus query expression, check out the [Prometheus documentation](http://prometheus.io/docs/querying/basics/).
-*Legend format* | Controls the name of the time series, using name or pattern. For example `{{hostname}}` will be replaced with label value for the label `hostname`.
-*Min step* | Set a lower limit for the Prometheus step option. Step controls how big the jumps are when the Prometheus query engine performs range queries. Sadly there is no official prometheus documentation to link to for this very important option.
-*Resolution* | Controls the step option. Small steps create high-resolution graphs but can be slow over larger time ranges, lowering the resolution can speed things up. `1/2` will try to set step option to generate 1 data point for every other pixel. A value of `1/10` will try to set step option so there is a data point every 10 pixels.
-*Metric lookup* | Search for metric names in this input field.
-*Format as* | Switch between Table, Time series or Heatmap. Table format will only work in the Table panel. Heatmap format is suitable for displaying metrics having histogram type on Heatmap panel. Under the hood, it converts cumulative histogram to regular and sorts series by the bucket bound.
+| Name               | Description                                                                                                                                                                                                                                                                                                                         |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _Query expression_ | Prometheus query expression, check out the [Prometheus documentation](http://prometheus.io/docs/querying/basics/).                                                                                                                                                                                                                  |
+| _Legend format_    | Controls the name of the time series, using name or pattern. For example `{{hostname}}` will be replaced with label value for the label `hostname`.                                                                                                                                                                                 |
+| _Min step_         | Set a lower limit for the Prometheus step option. Step controls how big the jumps are when the Prometheus query engine performs range queries. Sadly there is no official prometheus documentation to link to for this very important option.                                                                                       |
+| _Resolution_       | Controls the step option. Small steps create high-resolution graphs but can be slow over larger time ranges, lowering the resolution can speed things up. `1/2` will try to set step option to generate 1 data point for every other pixel. A value of `1/10` will try to set step option so there is a data point every 10 pixels. |
+| _Metric lookup_    | Search for metric names in this input field.                                                                                                                                                                                                                                                                                        |
+| _Format as_        | Switch between Table, Time series or Heatmap. Table format will only work in the Table panel. Heatmap format is suitable for displaying metrics having histogram type on Heatmap panel. Under the hood, it converts cumulative histogram to regular and sorts series by the bucket bound.                                           |
+
+> NOTE: Grafana slightly modifies the request dates for queries to align them with the dynamically calculated step.
+> This ensures consistent display of metrics data but can result in a small gap of data at the right edge of a graph.
 
 ## Templating
 
@@ -63,19 +66,18 @@ types of template variables.
 
 ### Query variable
 
-Variable of the type *Query* allows you to query Prometheus for a list of metrics, labels or label values. The Prometheus data source plugin
+Variable of the type _Query_ allows you to query Prometheus for a list of metrics, labels or label values. The Prometheus data source plugin
 provides the following functions you can use in the `Query` input field.
 
-Name | Description
----- | --------
-*label_names()* | Returns a list of label names.
-*label_values(label)* | Returns a list of label values for the `label` in every metric.
-*label_values(metric, label)* | Returns a list of label values for the `label` in the specified metric.
-*metrics(metric)* | Returns a list of metrics matching the specified `metric` regex.
-*query_result(query)* | Returns a list of Prometheus query result for the `query`.
-
-For details of *metric names*, *label names* and *label values* are please refer to the [Prometheus documentation](http://prometheus.io/docs/concepts/data_model/#metric-names-and-labels).
+| Name                          | Description                                                             |
+| ----------------------------- | ----------------------------------------------------------------------- |
+| _label_names()_               | Returns a list of label names.                                          |
+| _label_values(label)_         | Returns a list of label values for the `label` in every metric.         |
+| _label_values(metric, label)_ | Returns a list of label values for the `label` in the specified metric. |
+| _metrics(metric)_             | Returns a list of metrics matching the specified `metric` regex.        |
+| _query_result(query)_         | Returns a list of Prometheus query result for the `query`.              |
 
+For details of _metric names_, _label names_ and _label values_ are please refer to the [Prometheus documentation](http://prometheus.io/docs/concepts/data_model/#metric-names-and-labels).
 
 #### Using interval and range variables
 
@@ -106,10 +108,10 @@ Regex:
 
 There are two syntaxes:
 
-- `$<varname>`  Example: rate(http_requests_total{job=~"$job"}[5m])
+- `$<varname>` Example: rate(http_requests_total{job=~"\$job"}[5m])
 - `[[varname]]` Example: rate(http_requests_total{job=~"[[job]]"}[5m])
 
-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*
+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 regex compatible string. Which means you have to use `=~` instead of `=`.
 
 ## Annotations

public/app/plugins/datasource/prometheus/datasource.ts

@@ -224,7 +224,8 @@ export class PrometheusDatasource implements DataSourceApi<PromQuery> {
     query.expr = this.templateSrv.replace(expr, scopedVars, this.interpolateQueryExpr);
     query.requestId = options.panelId + target.refId;
 
-    // Align query interval with step
+    // Align query interval with step to allow query caching and to ensure
+    // that about-same-time query results look the same.
     const adjusted = alignRange(start, end, query.step);
     query.start = adjusted.start;
     query.end = adjusted.end;
@@ -497,8 +498,15 @@ export class PrometheusDatasource implements DataSourceApi<PromQuery> {
   }
 }
 
-export function alignRange(start, end, step) {
-  const alignedEnd = Math.ceil(end / step) * step;
+/**
+ * Align query range to step.
+ * Rounds start and end down to a multiple of step.
+ * @param start Timestamp marking the beginning of the range.
+ * @param end Timestamp marking the end of the range.
+ * @param step Interval to align start and end with.
+ */
+export function alignRange(start: number, end: number, step: number): { end: number; start: number } {
+  const alignedEnd = Math.floor(end / step) * step;
   const alignedStart = Math.floor(start / step) * step;
   return {
     end: alignedEnd,

public/app/plugins/datasource/prometheus/specs/datasource.test.ts

@@ -206,12 +206,12 @@ describe('PrometheusDatasource', () => {
     it('does align intervals that are a multiple of steps', () => {
       const range = alignRange(1, 4, 3);
       expect(range.start).toEqual(0);
-      expect(range.end).toEqual(6);
+      expect(range.end).toEqual(3);
     });
     it('does align intervals that are not a multiple of steps', () => {
       const range = alignRange(1, 5, 3);
       expect(range.start).toEqual(0);
-      expect(range.end).toEqual(6);
+      expect(range.end).toEqual(3);
     });
   });
 
@@ -360,7 +360,7 @@ describe('PrometheusDatasource', () => {
     };
     // Interval alignment with step
     const urlExpected =
-      'proxied/api/v1/query_range?query=' + encodeURIComponent('test{job="testjob"}') + '&start=60&end=240&step=60';
+      'proxied/api/v1/query_range?query=' + encodeURIComponent('test{job="testjob"}') + '&start=60&end=180&step=60';
 
     beforeEach(async () => {
       const response = {
@@ -788,7 +788,7 @@ describe('PrometheusDatasource', () => {
         interval: '5s',
       };
       // times get rounded up to interval
-      const urlExpected = 'proxied/api/v1/query_range?query=test&start=50&end=450&step=50';
+      const urlExpected = 'proxied/api/v1/query_range?query=test&start=50&end=400&step=50';
       backendSrv.datasourceRequest = jest.fn(() => Promise.resolve(response));
       ctx.ds = new PrometheusDatasource(instanceSettings, q, backendSrv as any, templateSrv, timeSrv);
       await ctx.ds.query(query);
@@ -831,7 +831,7 @@ describe('PrometheusDatasource', () => {
         interval: '10s',
       };
       // times get aligned to interval
-      const urlExpected = 'proxied/api/v1/query_range?query=test' + '&start=0&end=500&step=100';
+      const urlExpected = 'proxied/api/v1/query_range?query=test' + '&start=0&end=400&step=100';
       backendSrv.datasourceRequest = jest.fn(() => Promise.resolve(response));
       ctx.ds = new PrometheusDatasource(instanceSettings, q, backendSrv as any, templateSrv, timeSrv);
       await ctx.ds.query(query);
@@ -996,7 +996,7 @@ describe('PrometheusDatasource', () => {
       const urlExpected =
         'proxied/api/v1/query_range?query=' +
         encodeURIComponent('rate(test[$__interval])') +
-        '&start=0&end=500&step=100';
+        '&start=0&end=400&step=100';
       backendSrv.datasourceRequest = jest.fn(() => Promise.resolve(response));
       templateSrv.replace = jest.fn(str => str);
       ctx.ds = new PrometheusDatasource(instanceSettings, q, backendSrv as any, templateSrv, timeSrv);
@@ -1041,7 +1041,7 @@ describe('PrometheusDatasource', () => {
       const urlExpected =
         'proxied/api/v1/query_range?query=' +
         encodeURIComponent('rate(test[$__interval])') +
-        '&start=50&end=450&step=50';
+        '&start=50&end=400&step=50';
 
       templateSrv.replace = jest.fn(str => str);
       backendSrv.datasourceRequest = jest.fn(() => Promise.resolve(response));
@@ -1166,7 +1166,7 @@ describe('PrometheusDatasource for POST', () => {
     const dataExpected = {
       query: 'test{job="testjob"}',
       start: 1 * 60,
-      end: 3 * 60,
+      end: 2 * 60,
       step: 60,
     };
     const query = {