QueryEditor: Clean-up interface to only have one PanelData (#19249)

* QueryEditor: Clean-up interface to only have one PanelData

* Renamed to prop name to data

packages/grafana-ui/src/types/datasource.ts

@@ -279,8 +279,10 @@ export interface QueryEditorProps<
   query: TQuery;
   query: TQuery;
   onRunQuery: () => void;
   onRunQuery: () => void;
   onChange: (value: TQuery) => void;
   onChange: (value: TQuery) => void;
-  panelData: PanelData; // The current panel data
-  queryResponse?: PanelData; // data filtered to only this query.  Includes the error.
+  /*
+   * Contains query response filtered by refId and possible query error
+   */
+  data?: PanelData;
 }
 }
 
 
 export enum DataSourceStatus {
 export enum DataSourceStatus {

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -33,7 +33,7 @@ interface State {
   datasource: DataSourceApi | null;
   datasource: DataSourceApi | null;
   isCollapsed: boolean;
   isCollapsed: boolean;
   hasTextEditMode: boolean;
   hasTextEditMode: boolean;
-  queryResponse?: PanelData;
+  data?: PanelData;
 }
 }
 
 
 export class QueryEditorRow extends PureComponent<Props, State> {
 export class QueryEditorRow extends PureComponent<Props, State> {
@@ -46,7 +46,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     isCollapsed: false,
     isCollapsed: false,
     loadedDataSourceValue: undefined,
     loadedDataSourceValue: undefined,
     hasTextEditMode: false,
     hasTextEditMode: false,
-    queryResponse: null,
+    data: null,
   };
   };
 
 
   componentDidMount() {
   componentDidMount() {
@@ -92,7 +92,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const { data, query, panel } = this.props;
     const { data, query, panel } = this.props;
 
 
     if (data !== prevProps.data) {
     if (data !== prevProps.data) {
-      this.setState({ queryResponse: filterPanelDataToQuery(data, query.refId) });
+      this.setState({ data: filterPanelDataToQuery(data, query.refId) });
 
 
       if (this.angularScope) {
       if (this.angularScope) {
         this.angularScope.range = getTimeSrv().timeRange();
         this.angularScope.range = getTimeSrv().timeRange();
@@ -133,8 +133,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   };
   };
 
 
   renderPluginEditor() {
   renderPluginEditor() {
-    const { query, data, onChange } = this.props;
-    const { datasource, queryResponse } = this.state;
+    const { query, onChange } = this.props;
+    const { datasource, data } = this.state;
 
 
     if (datasource.components.QueryCtrl) {
     if (datasource.components.QueryCtrl) {
       return <div ref={element => (this.element = element)} />;
       return <div ref={element => (this.element = element)} />;
@@ -149,8 +149,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
           datasource={datasource}
           datasource={datasource}
           onChange={onChange}
           onChange={onChange}
           onRunQuery={this.onRunQuery}
           onRunQuery={this.onRunQuery}
-          queryResponse={queryResponse}
-          panelData={data}
+          data={data}
         />
         />
       );
       );
     }
     }

public/app/features/explore/QueryRow.tsx

@@ -146,8 +146,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
               onRunQuery={this.onRunQuery}
               onRunQuery={this.onRunQuery}
               onHint={this.onClickHintFix}
               onHint={this.onClickHintFix}
               onChange={this.onChange}
               onChange={this.onChange}
-              panelData={null}
-              queryResponse={queryResponse}
+              data={queryResponse}
               absoluteRange={absoluteRange}
               absoluteRange={absoluteRange}
             />
             />
           ) : (
           ) : (

public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx

@@ -64,7 +64,7 @@ class ElasticsearchQueryField extends React.PureComponent<Props, State> {
   };
   };
 
 
   render() {
   render() {
-    const { queryResponse, query } = this.props;
+    const { data, query } = this.props;
     const { syntaxLoaded } = this.state;
     const { syntaxLoaded } = this.state;
 
 
     return (
     return (
@@ -82,9 +82,7 @@ class ElasticsearchQueryField extends React.PureComponent<Props, State> {
             />
             />
           </div>
           </div>
         </div>
         </div>
-        {queryResponse && queryResponse.error ? (
-          <div className="prom-query-field-info text-error">{queryResponse.error.message}</div>
-        ) : null}
+        {data && data.error ? <div className="prom-query-field-info text-error"> data.error.message}</div> : null}
       </>
       </>
     );
     );
   }
   }

public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx

@@ -42,7 +42,7 @@ export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEdito
         onChange={(query: LokiQuery) => onChange(query.expr)}
         onChange={(query: LokiQuery) => onChange(query.expr)}
         onRunQuery={() => {}}
         onRunQuery={() => {}}
         history={[]}
         history={[]}
-        panelData={null}
+        data={null}
         onLoadOptions={setActiveOption}
         onLoadOptions={setActiveOption}
         onLabelsRefresh={refreshLabels}
         onLabelsRefresh={refreshLabels}
         syntaxLoaded={isSyntaxReady}
         syntaxLoaded={isSyntaxReady}

public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx

@@ -12,11 +12,11 @@ import { useLokiSyntax } from './useLokiSyntax';
 type Props = QueryEditorProps<LokiDatasource, LokiQuery>;
 type Props = QueryEditorProps<LokiDatasource, LokiQuery>;
 
 
 export const LokiQueryEditor = memo(function LokiQueryEditor(props: Props) {
 export const LokiQueryEditor = memo(function LokiQueryEditor(props: Props) {
-  const { query, panelData, datasource, onChange, onRunQuery } = props;
+  const { query, data, datasource, onChange, onRunQuery } = props;
 
 
   let absolute: AbsoluteTimeRange;
   let absolute: AbsoluteTimeRange;
-  if (panelData && panelData.request) {
-    const { range } = panelData.request;
+  if (data && data.request) {
+    const { range } = data.request;
     absolute = {
     absolute = {
       from: range.from.valueOf(),
       from: range.from.valueOf(),
       to: range.to.valueOf(),
       to: range.to.valueOf(),
@@ -44,7 +44,7 @@ export const LokiQueryEditor = memo(function LokiQueryEditor(props: Props) {
         onChange={onChange}
         onChange={onChange}
         onRunQuery={onRunQuery}
         onRunQuery={onRunQuery}
         history={[]}
         history={[]}
-        panelData={panelData}
+        data={data}
         onLoadOptions={setActiveOption}
         onLoadOptions={setActiveOption}
         onLabelsRefresh={refreshLabels}
         onLabelsRefresh={refreshLabels}
         syntaxLoaded={isSyntaxReady}
         syntaxLoaded={isSyntaxReady}

public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx

@@ -142,7 +142,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
 
 
   render() {
   render() {
     const {
     const {
-      queryResponse,
+      data,
       query,
       query,
       syntaxLoaded,
       syntaxLoaded,
       logLabelOptions,
       logLabelOptions,
@@ -155,7 +155,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
     const hasLogLabels = logLabelOptions && logLabelOptions.length > 0;
     const hasLogLabels = logLabelOptions && logLabelOptions.length > 0;
     const chooserText = getChooserText(syntaxLoaded, hasLogLabels, datasourceStatus);
     const chooserText = getChooserText(syntaxLoaded, hasLogLabels, datasourceStatus);
     const buttonDisabled = !syntaxLoaded || datasourceStatus === DataSourceStatus.Disconnected;
     const buttonDisabled = !syntaxLoaded || datasourceStatus === DataSourceStatus.Disconnected;
-    const showError = queryResponse && queryResponse.error && queryResponse.error.refId === query.refId;
+    const showError = data && data.error && data.error.refId === query.refId;
 
 
     return (
     return (
       <>
       <>
@@ -192,9 +192,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
             />
             />
           </div>
           </div>
         </div>
         </div>
-        <div>
-          {showError ? <div className="prom-query-field-info text-error">{queryResponse.error.message}</div> : null}
-        </div>
+        <div>{showError ? <div className="prom-query-field-info text-error">{data.error.message}</div> : null}</div>
       </>
       </>
     );
     );
   }
   }

public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx

@@ -92,7 +92,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
   };
   };
 
 
   render() {
   render() {
-    const { datasource, query, panelData, queryResponse } = this.props;
+    const { datasource, query, data } = this.props;
     const { formatOption, instant, interval, intervalFactorOption, legendFormat } = this.state;
     const { formatOption, instant, interval, intervalFactorOption, legendFormat } = this.state;
 
 
     return (
     return (
@@ -103,8 +103,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
           onRunQuery={this.onRunQuery}
           onRunQuery={this.onRunQuery}
           onChange={this.onFieldChange}
           onChange={this.onFieldChange}
           history={[]}
           history={[]}
-          panelData={panelData}
-          queryResponse={queryResponse}
+          data={data}
           datasourceStatus={DataSourceStatus.Connected} // TODO: replace with real DataSourceStatus
           datasourceStatus={DataSourceStatus.Connected} // TODO: replace with real DataSourceStatus
         />
         />
 
 
@@ -165,7 +164,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
               <PromLink
               <PromLink
                 datasource={datasource}
                 datasource={datasource}
                 query={this.query} // Use modified query
                 query={this.query} // Use modified query
-                panelData={panelData}
+                panelData={data}
               />
               />
             </FormLabel>
             </FormLabel>
           </div>
           </div>

public/app/plugins/datasource/prometheus/components/PromQueryField.tsx

@@ -152,9 +152,9 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   }
   }
 
 
   componentDidUpdate(prevProps: PromQueryFieldProps) {
   componentDidUpdate(prevProps: PromQueryFieldProps) {
-    const { queryResponse } = this.props;
+    const { data } = this.props;
 
 
-    if (queryResponse && prevProps.queryResponse && prevProps.queryResponse.series !== queryResponse.series) {
+    if (data && prevProps.data && prevProps.data.series !== data.series) {
       this.refreshHint();
       this.refreshHint();
     }
     }
 
 
@@ -175,16 +175,14 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   }
   }
 
 
   refreshHint = () => {
   refreshHint = () => {
-    const { datasource, query, queryResponse } = this.props;
+    const { datasource, query, data } = this.props;
 
 
-    if (!queryResponse || queryResponse.series.length === 0) {
+    if (!data || data.series.length === 0) {
       this.setState({ hint: null });
       this.setState({ hint: null });
       return;
       return;
     }
     }
 
 
-    const result = isDataFrame(queryResponse.series[0])
-      ? queryResponse.series.map(toLegacyResponseData)
-      : queryResponse.series;
+    const result = isDataFrame(data.series[0]) ? data.series.map(toLegacyResponseData) : data.series;
     const hints = datasource.getQueryHints(query, result);
     const hints = datasource.getQueryHints(query, result);
     const hint = hints && hints.length > 0 ? hints[0] : null;
     const hint = hints && hints.length > 0 ? hints[0] : null;
     this.setState({ hint });
     this.setState({ hint });
@@ -297,12 +295,12 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
   };
   };
 
 
   render() {
   render() {
-    const { queryResponse, query, datasourceStatus } = this.props;
+    const { data, query, datasourceStatus } = this.props;
     const { metricsOptions, syntaxLoaded, hint } = this.state;
     const { metricsOptions, syntaxLoaded, hint } = this.state;
     const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
     const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
     const chooserText = getChooserText(syntaxLoaded, datasourceStatus);
     const chooserText = getChooserText(syntaxLoaded, datasourceStatus);
     const buttonDisabled = !syntaxLoaded || datasourceStatus === DataSourceStatus.Disconnected;
     const buttonDisabled = !syntaxLoaded || datasourceStatus === DataSourceStatus.Disconnected;
-    const showError = queryResponse && queryResponse.error && queryResponse.error.refId === query.refId;
+    const showError = data && data.error && data.error.refId === query.refId;
 
 
     return (
     return (
       <>
       <>
@@ -329,7 +327,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
             />
             />
           </div>
           </div>
         </div>
         </div>
-        {showError ? <div className="prom-query-field-info text-error">{queryResponse.error.message}</div> : null}
+        {showError ? <div className="prom-query-field-info text-error">{data.error.message}</div> : null}
         {hint ? (
         {hint ? (
           <div className="prom-query-field-info text-warning">
           <div className="prom-query-field-info text-warning">
             {hint.label}{' '}
             {hint.label}{' '}