From 7b856ae040cf8ea36d8ed761fc95c3cb07cdf82c Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 10 Sep 2019 22:45:08 -0700
Subject: [PATCH] QueryOptions: update maxDataPoints text and show any value
 that is configured (#18761)

* update maxDataPoints UI

* use maxDataPoints to calculate interval

* don't change interval calculation
---
 .../dashboard/panel_editor/QueryOptions.tsx   | 39 +++++++++++--------
 .../datasource/testdata/StreamHandler.ts      |  8 ++--
 .../plugins/datasource/testdata/plugin.json   |  3 +-
 .../app/plugins/datasource/testdata/types.ts  |  3 +-
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/public/app/features/dashboard/panel_editor/QueryOptions.tsx b/public/app/features/dashboard/panel_editor/QueryOptions.tsx
index 512b2857177..c0099022650 100644
--- a/public/app/features/dashboard/panel_editor/QueryOptions.tsx
+++ b/public/app/features/dashboard/panel_editor/QueryOptions.tsx
@@ -71,7 +71,8 @@ export class QueryOptions extends PureComponent<Props, State> {
       tooltipInfo: (
         <>
           The maximum data points the query should return. For graphs this is automatically set to one data point per
-          pixel. For some data sources this can also be capped in the datasource settings page.
+          pixel. For some data sources this can also be capped in the datasource settings page. With streaming data,
+          this value is used for the rolling buffer.
         </>
       ),
     },
@@ -156,27 +157,31 @@ export class QueryOptions extends PureComponent<Props, State> {
     this.setState({ ...this.state, [panelKey]: event.target.value });
   };
 
+  /**
+   * Show options for any value that is set, or values that the
+   * current datasource says it will use
+   */
   renderOptions = () => {
     const { datasource } = this.props;
-    const { queryOptions } = datasource.meta;
+    const queryOptions: any = datasource.meta.queryOptions || {};
 
-    if (!queryOptions) {
-      return null;
-    }
-
-    return Object.keys(queryOptions).map(key => {
+    return Object.keys(this.allOptions).map(key => {
       const options = this.allOptions[key];
       const panelKey = options.panelKey || key;
-      return (
-        <DataSourceOption
-          key={key}
-          {...options}
-          onChange={this.onDataSourceOptionChange(panelKey)}
-          onBlur={this.onDataSourceOptionBlur(panelKey)}
-          // @ts-ignore
-          value={this.state[panelKey]}
-        />
-      );
+      // @ts-ignore
+      const value = this.state[panelKey];
+      if (value || queryOptions[key]) {
+        return (
+          <DataSourceOption
+            key={key}
+            {...options}
+            onChange={this.onDataSourceOptionChange(panelKey)}
+            onBlur={this.onDataSourceOptionBlur(panelKey)}
+            value={value}
+          />
+        );
+      }
+      return null; // nothing to render
     });
   };
 
diff --git a/public/app/plugins/datasource/testdata/StreamHandler.ts b/public/app/plugins/datasource/testdata/StreamHandler.ts
index 4997586c2db..2d01f3ef4b8 100644
--- a/public/app/plugins/datasource/testdata/StreamHandler.ts
+++ b/public/app/plugins/datasource/testdata/StreamHandler.ts
@@ -175,9 +175,9 @@ export class SignalWorker extends StreamWorker {
   };
 
   initBuffer(refId: string) {
-    const { speed, buffer } = this.query;
+    const { speed } = this.query;
     const request = this.stream.request;
-    const maxRows = buffer ? buffer : request.maxDataPoints;
+    const maxRows = request.maxDataPoints || 1000;
     const times = new CircularVector({ capacity: maxRows });
     const vals = new CircularVector({ capacity: maxRows });
     this.values = [times, vals];
@@ -341,11 +341,11 @@ export class LogsWorker extends StreamWorker {
   };
 
   initBuffer(refId: string) {
-    const { speed, buffer } = this.query;
+    const { speed } = this.query;
 
     const request = this.stream.request;
 
-    const maxRows = buffer ? buffer : request.maxDataPoints;
+    const maxRows = request.maxDataPoints || 1000;
 
     const times = new CircularVector({ capacity: maxRows });
     const lines = new CircularVector({ capacity: maxRows });
diff --git a/public/app/plugins/datasource/testdata/plugin.json b/public/app/plugins/datasource/testdata/plugin.json
index f34498957be..522ee7ebdd9 100644
--- a/public/app/plugins/datasource/testdata/plugin.json
+++ b/public/app/plugins/datasource/testdata/plugin.json
@@ -9,7 +9,8 @@
   "annotations": true,
 
   "queryOptions": {
-    "minInterval": true
+    "minInterval": true,
+    "maxDataPoints": true
   },
 
   "info": {
diff --git a/public/app/plugins/datasource/testdata/types.ts b/public/app/plugins/datasource/testdata/types.ts
index 7b458655590..47ed6c24b50 100644
--- a/public/app/plugins/datasource/testdata/types.ts
+++ b/public/app/plugins/datasource/testdata/types.ts
@@ -18,7 +18,6 @@ export interface StreamingQuery {
   speed: number;
   spread: number;
   noise: number; // wiggle around the signal for min/max
-  bands?: number; // number of bands around the middle van
-  buffer?: number;
+  bands?: number; // number of bands around the middle band
   url?: string; // the Fetch URL
 }