From a147aedb1007903f19deb2c3c250dc6d2e03a71e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 30 Aug 2019 15:30:24 +0200
Subject: [PATCH] Explore: Fixed query status issue (#18791)

* Explore: Fixed query status issue, fixes #18778

* Added test for QueryStatus
---
 .../app/features/explore/QueryStatus.test.tsx | 20 +++++++++++++++++++
 public/app/features/explore/QueryStatus.tsx   |  7 ++++++-
 public/sass/pages/_explore.scss               |  2 +-
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 public/app/features/explore/QueryStatus.test.tsx

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('<QueryStatus />', () => {
+  it('should render with a latency', () => {
+    const res: PanelData = { series: [], state: LoadingState.Done };
+    const wrapper = shallow(<QueryStatus latency={0} queryResponse={res} />);
+    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(<QueryStatus latency={0} queryResponse={res} />);
+    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<QueryStatusProps> {
   render() {
     const { queryResponse, latency } = this.props;
+
+    if (queryResponse.state === LoadingState.NotStarted) {
+      return null;
+    }
+
     return (
       <div className="query-transactions">
-        {queryResponse && <QueryStatusItem queryResponse={queryResponse} latency={latency} />}
+        <QueryStatusItem queryResponse={queryResponse} latency={latency} />
       </div>
     );
   }
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;
 }