add an error alert component that will be displayed when there was an error loading ds in explore

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

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">