diff --git a/public/app/features/explore/QueryRow.tsx b/public/app/features/explore/QueryRow.tsx index 17191e06d2e..d5c278e9b00 100644 --- a/public/app/features/explore/QueryRow.tsx +++ b/public/app/features/explore/QueryRow.tsx @@ -7,11 +7,12 @@ import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; // Components import QueryEditor from './QueryEditor'; +import { QueryRowActions } from './QueryRowActions'; // Actions import { changeQuery, modifyQueries, runQueries, addQueryRow } from './state/actions'; // Types import { StoreState } from 'app/types'; -import { TimeRange, AbsoluteTimeRange } from '@grafana/data'; +import { TimeRange, AbsoluteTimeRange, LoadingState } from '@grafana/data'; import { DataQuery, DataSourceApi, QueryFixAction, DataSourceStatus, PanelData } from '@grafana/ui'; import { HistoryItem, ExploreItemState, ExploreId, ExploreMode } from 'app/types/explore'; import { Emitter } from 'app/core/utils/emitter'; @@ -76,8 +77,13 @@ export class QueryRow extends PureComponent { this.props.addQueryRow(exploreId, index); }; - onClickClearButton = () => { - this.onChange(null, true); + onClickToggleHiddenQuery = () => { + const { exploreId, index, query } = this.props; + const newQuery = { + ...query, + hide: !query.hide, + }; + this.props.changeQuery(exploreId, newQuery, index, true); }; onClickHintFix = (action: QueryFixAction) => { @@ -120,8 +126,10 @@ export class QueryRow extends PureComponent { latency, mode, } = this.props; + const canToggleEditorModes = mode === ExploreMode.Metrics && has(datasourceInstance, 'components.QueryCtrl.prototype.toggleEditorMode'); + const canHide = queryResponse.state !== LoadingState.NotStarted; const queryErrors = queryResponse.error && queryResponse.error.refId === query.refId ? [queryResponse.error] : []; let QueryField; @@ -163,32 +171,17 @@ export class QueryRow extends PureComponent { )}
- -
-
- {canToggleEditorModes && ( -
- -
- )} -
- -
-
- -
-
- -
+
+ ); } diff --git a/public/app/features/explore/QueryRowActions.test.tsx b/public/app/features/explore/QueryRowActions.test.tsx new file mode 100644 index 00000000000..6dcc098543c --- /dev/null +++ b/public/app/features/explore/QueryRowActions.test.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { QueryRowActions, Props } from './QueryRowActions'; +import { shallow } from 'enzyme'; + +const setup = (propOverrides?: object) => { + const props: Props = { + hideQuery: false, + canHide: true, + canToggleEditorModes: true, + onClickToggleEditorMode: () => {}, + onClickToggleHiddenQuery: () => {}, + onClickAddButton: () => {}, + onClickRemoveButton: () => {}, + }; + + Object.assign(props, propOverrides); + + const wrapper = shallow(); + return wrapper; +}; + +describe('QueryRowActions', () => { + it('should render component', () => { + const wrapper = setup(); + expect(wrapper).toMatchSnapshot(); + }); + it('should render component without editor mode', () => { + const wrapper = setup({ canToggleEditorModes: false }); + expect(wrapper.find({ 'aria-label': 'Edit mode button' })).toHaveLength(0); + }); + it('should change icon to fa-eye-slash when query row result is hidden', () => { + const wrapper = setup({ hideQuery: true }); + expect(wrapper.find('i.fa-eye-slash')).toHaveLength(1); + }); + it('should change icon to fa-eye when query row result is not hidden', () => { + const wrapper = setup({ hideQuery: false }); + expect(wrapper.find('i.fa-eye')).toHaveLength(1); + }); +}); diff --git a/public/app/features/explore/QueryRowActions.tsx b/public/app/features/explore/QueryRowActions.tsx new file mode 100644 index 00000000000..59ec5049215 --- /dev/null +++ b/public/app/features/explore/QueryRowActions.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +export type Props = { + canToggleEditorModes: boolean; + hideQuery: boolean; + canHide: boolean; + onClickToggleEditorMode: () => void; + onClickToggleHiddenQuery: () => void; + onClickAddButton: () => void; + onClickRemoveButton: () => void; +}; + +export function QueryRowActions(props: Props) { + const { + canToggleEditorModes, + onClickToggleEditorMode, + onClickToggleHiddenQuery, + onClickAddButton, + onClickRemoveButton, + hideQuery, + canHide, + } = props; + + return ( +
+ {canToggleEditorModes && ( +
+ +
+ )} +
+ +
+
+ +
+
+ +
+
+ ); +} diff --git a/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap b/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap new file mode 100644 index 00000000000..77d2ce94fcf --- /dev/null +++ b/public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap @@ -0,0 +1,58 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`QueryRowActions should render component 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+ +
+
+`;