From be85944d846d36758a240ff1b682f595b41dfe0d Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Fri, 30 Nov 2018 13:51:49 +0100
Subject: [PATCH] add an error alert component that will be displayed when
 there was an error loading ds in explore

---
 public/app/features/explore/Error.tsx   | 21 +++++++++++++++++++++
 public/app/features/explore/Explore.tsx | 11 ++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 public/app/features/explore/Error.tsx

diff --git a/public/app/features/explore/Error.tsx b/public/app/features/explore/Error.tsx
new file mode 100644
index 00000000000..2bfd366b3c9
--- /dev/null
+++ b/public/app/features/explore/Error.tsx
@@ -0,0 +1,21 @@
+import React, { SFC } from 'react';
+
+interface Props {
+  message: any;
+}
+
+export const Alert: SFC<Props> = props => {
+  const { message } = props;
+  return (
+    <div className="gf-form-group section">
+      <div className="alert-error alert">
+        <div className="alert-icon">
+          <i className="fa fa-exclamation-triangle" />
+        </div>
+        <div className="alert-body">
+          <div className="alert-title">{message}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 26884ec58dc..345ccd472ce 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -40,6 +40,7 @@ import Logs from './Logs';
 import Table from './Table';
 import ErrorBoundary from './ErrorBoundary';
 import TimePicker from './TimePicker';
+import { Alert } from './Error';
 
 interface ExploreProps {
   datasourceSrv: DatasourceSrv;
@@ -851,16 +852,16 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
             </button>
           </div>
         </div>
-
         {datasourceLoading ? <div className="explore-container">Loading datasource...</div> : null}
-
         {datasourceMissing ? (
           <div className="explore-container">Please add a datasource that supports Explore (e.g., Prometheus).</div>
         ) : null}
 
-        {datasourceError ? (
-          <div className="explore-container">Error connecting to datasource. [{datasourceError}]</div>
-        ) : null}
+        {datasourceError && (
+          <div className="explore-container">
+            <Alert message={`Error connecting to datasource: ${datasourceError}`} />
+          </div>
+        )}
 
         {datasource && !datasourceError ? (
           <div className="explore-container">