From 9fd824960fde3f4df8307c69509c5feb4b565277 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <prokopd@gmail.com>
Date: Thu, 28 Mar 2019 17:17:01 +0100
Subject: [PATCH] Feature: added actionable message in Explore when no
 datasource configured (#16252)

---
 .../app/features/datasources/state/actions.ts |  2 +-
 public/app/features/explore/Explore.tsx       | 13 ++++--
 .../explore/NoDataSourceCallToAction.tsx      | 43 +++++++++++++++++++
 3 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 public/app/features/explore/NoDataSourceCallToAction.tsx

diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts
index 1902bfec88d..7d9c95ecc5f 100644
--- a/public/app/features/datasources/state/actions.ts
+++ b/public/app/features/datasources/state/actions.ts
@@ -98,8 +98,8 @@ export function updateDataSource(dataSource: DataSourceSettings): ThunkResult<vo
 export function deleteDataSource(): ThunkResult<void> {
   return async (dispatch, getStore) => {
     const dataSource = getStore().dataSources.dataSource;
-
     await getBackendSrv().delete(`/api/datasources/${dataSource.id}`);
+    await updateFrontendSettings();
     dispatch(updateLocation({ path: '/datasources' }));
   };
 }
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 6f19d5bfb91..f61fb47b7a5 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -38,6 +38,7 @@ import { LAST_USED_DATASOURCE_KEY, ensureQueries, DEFAULT_RANGE, DEFAULT_UI_STAT
 import { Emitter } from 'app/core/utils/emitter';
 import { ExploreToolbar } from './ExploreToolbar';
 import { scanStopAction } from './state/actionTypes';
+import { NoDataSourceCallToAction } from './NoDataSourceCallToAction';
 
 interface ExploreProps {
   StartPage?: ComponentClass<ExploreStartPageProps>;
@@ -192,6 +193,14 @@ export class Explore extends React.PureComponent<ExploreProps> {
     }
   };
 
+  renderEmptyState = () => {
+    return (
+      <div className="explore-container">
+        <NoDataSourceCallToAction />
+      </div>
+    );
+  };
+
   render() {
     const {
       StartPage,
@@ -213,9 +222,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
       <div className={exploreClass} ref={this.getRef}>
         <ExploreToolbar exploreId={exploreId} timepickerRef={this.timepickerRef} onChangeTime={this.onChangeTime} />
         {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}
+        {datasourceMissing ? this.renderEmptyState() : null}
 
         {datasourceError && (
           <div className="explore-container">
diff --git a/public/app/features/explore/NoDataSourceCallToAction.tsx b/public/app/features/explore/NoDataSourceCallToAction.tsx
new file mode 100644
index 00000000000..12733c3265a
--- /dev/null
+++ b/public/app/features/explore/NoDataSourceCallToAction.tsx
@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { css } from 'emotion';
+import { ThemeContext, ExtraLargeLinkButton, CallToActionCard } from '@grafana/ui';
+
+export const NoDataSourceCallToAction = () => {
+  const theme = useContext(ThemeContext);
+
+  const message =
+    'Explore requires at least one data source. Once you have added a data source, you can query it here.';
+  const footer = (
+    <>
+      <i className="fa fa-rocket" />
+      <> ProTip: You can also define data sources through configuration files. </>
+      <a
+        href="http://docs.grafana.org/administration/provisioning/#datasources?utm_source=explore"
+        target="_blank"
+        className="text-link"
+      >
+        Learn more
+      </a>
+    </>
+  );
+
+  const ctaElement = (
+    <ExtraLargeLinkButton href="/datasources/new" icon="gicon gicon-add-datasources">
+      Add data source
+    </ExtraLargeLinkButton>
+  );
+
+  const cardClassName = css`
+    max-width: ${theme.breakpoints.lg};
+  `;
+
+  return (
+    <CallToActionCard
+      callToActionElement={ctaElement}
+      className={cardClassName}
+      footer={footer}
+      message={message}
+      theme={theme}
+    />
+  );
+};