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;
}