Skip to content

N
nexpie-grafana-theme
Commit bbf2bd18 by Torkel Ödegaard Committed by GitHub
Options

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
parent fd7e2a21
Showing with 32 additions and 39 deletions
packages/grafana-ui/src/types/datasource.ts
......@@ -279,8 +279,10 @@ export interface QueryEditorProps<
query: TQuery;
onRunQuery: () => 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 {
......
public/app/features/dashboard/panel_editor/QueryEditorRow.tsx
......@@ -33,7 +33,7 @@ interface State {
datasource: DataSourceApi | null;
isCollapsed: boolean;
hasTextEditMode: boolean;
queryResponse?: PanelData;
data?: PanelData;
}
export class QueryEditorRow extends PureComponent<Props, State> {
......@@ -46,7 +46,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
isCollapsed: false,
loadedDataSourceValue: undefined,
hasTextEditMode: false,
queryResponse: null,
data: null,
};
componentDidMount() {
......@@ -92,7 +92,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
const { data, query, panel } = this.props;
if (data !== prevProps.data) {
this.setState({ queryResponse: filterPanelDataToQuery(data, query.refId) });
this.setState({ data: filterPanelDataToQuery(data, query.refId) });
if (this.angularScope) {
this.angularScope.range = getTimeSrv().timeRange();
......@@ -133,8 +133,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
};
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) {
return <div ref={element => (this.element = element)} />;
......@@ -149,8 +149,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
datasource={datasource}
onChange={onChange}
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}
onHint={this.onClickHintFix}
onChange={this.onChange}
panelData={null}
queryResponse={queryResponse}
data={queryResponse}
absoluteRange={absoluteRange}
/>
) : (
......
public/app/plugins/datasource/elasticsearch/components/ElasticsearchQueryField.tsx
......@@ -64,7 +64,7 @@ class ElasticsearchQueryField extends React.PureComponent<Props, State> {
};
render() {
const { queryResponse, query } = this.props;
const { data, query } = this.props;
const { syntaxLoaded } = this.state;
return (
......@@ -82,9 +82,7 @@ class ElasticsearchQueryField extends React.PureComponent<Props, State> {
/>
</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)}
onRunQuery={() => {}}
history={[]}
panelData={null}
data={null}
onLoadOptions={setActiveOption}
onLabelsRefresh={refreshLabels}
syntaxLoaded={isSyntaxReady}
......
public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
......@@ -12,11 +12,11 @@ import { useLokiSyntax } from './useLokiSyntax';
type Props = QueryEditorProps<LokiDatasource, LokiQuery>;
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;
if (panelData && panelData.request) {
const { range } = panelData.request;
if (data && data.request) {
const { range } = data.request;
absolute = {
from: range.from.valueOf(),
to: range.to.valueOf(),
......@@ -44,7 +44,7 @@ export const LokiQueryEditor = memo(function LokiQueryEditor(props: Props) {
onChange={onChange}
onRunQuery={onRunQuery}
history={[]}
panelData={panelData}
data={data}
onLoadOptions={setActiveOption}
onLabelsRefresh={refreshLabels}
syntaxLoaded={isSyntaxReady}
......
public/app/plugins/datasource/loki/components/LokiQueryFieldForm.tsx
......@@ -142,7 +142,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
render() {
const {
queryResponse,
data,
query,
syntaxLoaded,
logLabelOptions,
......@@ -155,7 +155,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
const hasLogLabels = logLabelOptions && logLabelOptions.length > 0;
const chooserText = getChooserText(syntaxLoaded, hasLogLabels, datasourceStatus);
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 (
<>
......@@ -192,9 +192,7 @@ export class LokiQueryFieldForm extends React.PureComponent<LokiQueryFieldFormPr
/>
</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() {
const { datasource, query, panelData, queryResponse } = this.props;
const { datasource, query, data } = this.props;
const { formatOption, instant, interval, intervalFactorOption, legendFormat } = this.state;
return (
......@@ -103,8 +103,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
onRunQuery={this.onRunQuery}
onChange={this.onFieldChange}
history={[]}
panelData={panelData}
queryResponse={queryResponse}
data={data}
datasourceStatus={DataSourceStatus.Connected} // TODO: replace with real DataSourceStatus
/>
......@@ -165,7 +164,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
<PromLink
datasource={datasource}
query={this.query} // Use modified query
panelData={panelData}
panelData={data}
/>
</FormLabel>
</div>
......
public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
......@@ -152,9 +152,9 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
}
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();
}
......@@ -175,16 +175,14 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
}
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 });
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 hint = hints && hints.length > 0 ? hints[0] : null;
this.setState({ hint });
......@@ -297,12 +295,12 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
};
render() {
const { queryResponse, query, datasourceStatus } = this.props;
const { data, query, datasourceStatus } = this.props;
const { metricsOptions, syntaxLoaded, hint } = this.state;
const cleanText = this.languageProvider ? this.languageProvider.cleanText : undefined;
const chooserText = getChooserText(syntaxLoaded, datasourceStatus);
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 (
<>
......@@ -329,7 +327,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
/>
</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 ? (
<div className="prom-query-field-info text-warning">
{hint.label}{' '}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment