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

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
     });
   };
 

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 });

public/app/plugins/datasource/testdata/plugin.json

@@ -9,7 +9,8 @@
   "annotations": true,
 
   "queryOptions": {
-    "minInterval": true
+    "minInterval": true,
+    "maxDataPoints": true
   },
 
   "info": {

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
 }