diff --git a/public/app/features/explore/QueryStatus.test.tsx b/public/app/features/explore/QueryStatus.test.tsx new file mode 100644 index 00000000000..46debf76e8e --- /dev/null +++ b/public/app/features/explore/QueryStatus.test.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { LoadingState } from '@grafana/data'; +import { PanelData } from '@grafana/ui'; + +import QueryStatus from './QueryStatus'; + +describe('', () => { + it('should render with a latency', () => { + const res: PanelData = { series: [], state: LoadingState.Done }; + const wrapper = shallow(); + expect(wrapper.find('div').exists()).toBeTruthy(); + }); + it('should not render when query has not started', () => { + const res: PanelData = { series: [], state: LoadingState.NotStarted }; + const wrapper = shallow(); + expect(wrapper.getElement()).toBe(null); + }); +}); diff --git a/public/app/features/explore/QueryStatus.tsx b/public/app/features/explore/QueryStatus.tsx index daad89355e1..aabcec7ced8 100644 --- a/public/app/features/explore/QueryStatus.tsx +++ b/public/app/features/explore/QueryStatus.tsx @@ -39,9 +39,14 @@ interface QueryStatusProps { export default class QueryStatus extends PureComponent { render() { const { queryResponse, latency } = this.props; + + if (queryResponse.state === LoadingState.NotStarted) { + return null; + } + return (
- {queryResponse && } +
); } diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 4768682b93c..5a37856efe8 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -213,7 +213,7 @@ .query-transaction { display: table-row; - color: $text-color-faint; + color: $text-color-weak; line-height: 1.44; }