Feature: added actionable message in Explore when no datasource configured (#16252)

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

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 ? (
+        {datasourceMissing ? this.renderEmptyState() : null}
-          <div className="explore-container">Please add a datasource that supports Explore (e.g., Prometheus).</div>
-        ) : null}
 
         {datasourceError && (
           <div className="explore-container">

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