IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Refactor QueryRow to use ConnectedProps (#36604)

Browse Source 
* Refactor QueryRow

* Upddate import in test

* Simplify typing

* Add copy when loading instance
This commit is contained in:
Ivana Huckova 2021-07-12 09:30:24 -04:00 committed by GitHub
parent 8efe1856e2
commit 3c1a9a9eae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/explore/QueryRow.test.tsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { QueryRow, QueryRowProps } from './QueryRow';
import React, { ComponentProps } from 'react';
import { QueryRow } from './QueryRow';
import { shallow } from 'enzyme';
import { ExploreId } from 'app/types/explore';
import { DataSourceApi, TimeRange, AbsoluteTimeRange, PanelData, EventBusExtended } from '@grafana/data';
const setup = (propOverrides?: object) => {
const props: QueryRowProps = {
const props: ComponentProps<typeof QueryRow> = {
exploreId: ExploreId.left,
index: 1,
exploreEvents: {} as EventBusExtended,

67
public/app/features/explore/QueryRow.tsx
View File

@ -2,53 +2,24 @@
import React, { PureComponent } from 'react';
import { debounce, has } from 'lodash';
import { hot } from 'react-hot-loader';
// @ts-ignore
import { connect } from 'react-redux';
// Components
import { connect, ConnectedProps } from 'react-redux';
import AngularQueryEditor from './QueryEditor';
import { QueryRowActions } from './QueryRowActions';
// Types
import { StoreState } from 'app/types';
import {
DataQuery,
DataSourceApi,
PanelData,
HistoryItem,
TimeRange,
AbsoluteTimeRange,
LoadingState,
EventBusExtended,
} from '@grafana/data';
import { DataQuery, LoadingState, DataSourceApi } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { ExploreItemState, ExploreId } from 'app/types/explore';
import { highlightLogsExpressionAction } from './state/explorePane';
import { ErrorContainer } from './ErrorContainer';
import { changeQuery, modifyQueries, removeQueryRowAction, runQueries } from './state/query';
import { HelpToggle } from '../query/components/HelpToggle';
interface PropsFromParent {
interface OwnProps {
exploreId: ExploreId;
index: number;
}
export interface QueryRowProps extends PropsFromParent {
changeQuery: typeof changeQuery;
className?: string;
exploreId: ExploreId;
datasourceInstance: DataSourceApi;
highlightLogsExpressionAction: typeof highlightLogsExpressionAction;
history: HistoryItem[];
query: DataQuery;
modifyQueries: typeof modifyQueries;
range: TimeRange;
absoluteRange: AbsoluteTimeRange;
removeQueryRowAction: typeof removeQueryRowAction;
runQueries: typeof runQueries;
queryResponse: PanelData;
latency: number;
exploreEvents: EventBusExtended;
}
type QueryRowProps = OwnProps & ConnectedProps<typeof connector>;
interface QueryRowState {
textEditModeEnabled: boolean;
@ -70,7 +41,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
onChange = (query: DataQuery, override?: boolean) => {
const { datasourceInstance, exploreId, index } = this.props;
this.props.changeQuery(exploreId, query, index, override);
if (query && !override && datasourceInstance.getHighlighterExpression && index === 0) {
if (query && !override && datasourceInstance?.getHighlighterExpression && index === 0) {
// Live preview of log search matches. Only use on first row for now
this.updateLogsHighlights(query);
}
@ -95,10 +66,8 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
this.setState({ textEditModeEnabled: !this.state.textEditModeEnabled });
};
setReactQueryEditor = () => {
const { datasourceInstance } = this.props;
setReactQueryEditor = (datasourceInstance: DataSourceApi) => {
let QueryEditor;
// TODO:unification
if (datasourceInstance.components?.ExploreMetricsQueryField) {
QueryEditor = datasourceInstance.components.ExploreMetricsQueryField;
@ -112,12 +81,12 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
return QueryEditor;
};
renderQueryEditor = () => {
const { datasourceInstance, history, query, exploreEvents, range, queryResponse, exploreId } = this.props;
renderQueryEditor = (datasourceInstance: DataSourceApi) => {
const { history, query, exploreEvents, range, queryResponse, exploreId } = this.props;
const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : [];
const ReactQueryEditor = this.setReactQueryEditor();
const ReactQueryEditor = this.setReactQueryEditor(datasourceInstance);
let QueryEditor: JSX.Element;
if (ReactQueryEditor) {
@ -155,7 +124,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
{QueryEditor}
{DatasourceCheatsheet && (
<HelpToggle>
<DatasourceCheatsheet onClickExample={(query) => this.onChange(query)} datasource={datasourceInstance} />
<DatasourceCheatsheet onClickExample={(query) => this.onChange(query)} datasource={datasourceInstance!} />
</HelpToggle>
)}
</>
@ -164,7 +133,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
updateLogsHighlights = debounce((value: DataQuery) => {
const { datasourceInstance } = this.props;
if (datasourceInstance.getHighlighterExpression) {
if (datasourceInstance?.getHighlighterExpression) {
const { exploreId } = this.props;
const expressions = datasourceInstance.getHighlighterExpression(value);
this.props.highlightLogsExpressionAction({ exploreId, expressions });
@ -174,6 +143,10 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
render() {
const { datasourceInstance, query, queryResponse, latency } = this.props;
if (!datasourceInstance) {
return <>Loading data source</>;
}
const canToggleEditorModes = has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode');
const isNotStarted = queryResponse.state === LoadingState.NotStarted;
@ -183,7 +156,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
return (
<>
<div className="query-row" aria-label={selectors.components.QueryEditorRows.rows}>
<div className="query-row-field flex-shrink-1">{this.renderQueryEditor()}</div>
<div className="query-row-field flex-shrink-1">{this.renderQueryEditor(datasourceInstance)}</div>
<QueryRowActions
canToggleEditorModes={canToggleEditorModes}
isDisabled={query.hide}
@ -200,7 +173,7 @@ export class QueryRow extends PureComponent<QueryRowProps, QueryRowState> {
}
}
function mapStateToProps(state: StoreState, { exploreId, index }: QueryRowProps) {
function mapStateToProps(state: StoreState, { exploreId, index }: OwnProps) {
const explore = state.explore;
const item: ExploreItemState = explore[exploreId]!;
const { datasourceInstance, history, queries, range, absoluteRange, queryResponse, latency, eventBridge } = item;
@ -226,6 +199,6 @@ const mapDispatchToProps = {
runQueries,
};
export default hot(module)(
connect(mapStateToProps, mapDispatchToProps)(QueryRow) as React.ComponentType<PropsFromParent>
);
const connector = connect(mapStateToProps, mapDispatchToProps);
export default hot(module)(connector(QueryRow));