No loki datasource: Splash page (#1061)

* feat: add splash page when no loki datasource is configured

src/Components/IndexScene/IndexScene.tsx

@@ -71,6 +71,7 @@ import {
 import { VariableHide } from '@grafana/schema';
 import { CustomConstantVariable } from '../../services/CustomConstantVariable';
 import {
+  getDataSourceVariable,
   getFieldsAndMetadataVariable,
   getFieldsVariable,
   getLabelsVariable,
@@ -100,6 +101,7 @@ import { isFilterMetadata } from '../../services/filters';
 import { getFieldsTagValuesExpression } from '../../services/expressions';
 import { isOperatorInclusive } from '../../services/operatorHelpers';
 import { renderPatternFilters } from '../../services/renderPatternFilters';
+import { NoLokiSplash } from '../NoLokiSplash';
 
 export const showLogsButtonSceneKey = 'showLogsButtonScene';
 
@@ -194,6 +196,12 @@ export class IndexScene extends SceneObjectBase<IndexSceneState> {
 
   static Component = ({ model }: SceneComponentProps<IndexScene>) => {
     const { body } = model.useState();
+
+    const dsVar = getDataSourceVariable(model);
+    if (!dsVar.state.options.length) {
+      return <NoLokiSplash />;
+    }
+
     if (body) {
       return <body.Component model={body} />;
     }

src/Components/NoLokiSplash.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useStyles2, useTheme2 } from '@grafana/ui';
+import SVG from 'react-inlinesvg';
+import { GrafanaTheme2 } from '@grafana/data';
+import { css } from '@emotion/css';
+
+export const NoLokiSplash = () => {
+  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.graphicContainer}>
+        <SVG
+          src={
+            theme.isDark
+              ? `/public/plugins/grafana-lokiexplore-app/img/grot_loki.svg`
+              : `/public/plugins/grafana-lokiexplore-app/img/grot_loki.svg`
+          }
+        />
+      </div>
+      <div className={styles.text}>
+        <h3 className={styles.title}>Welcome to Grafana Logs Drilldown</h3>
+
+        <p>
+          We noticed there is no Loki datasource configured.
+          <br />
+          Add a{' '}
+          <a className={'external-link'} href={'/connections/datasources/new'}>
+            Loki datasource
+          </a>{' '}
+          to view logs.
+        </p>
+
+        <br />
+
+        <p>
+          Click{' '}
+          <a
+            href={'https://grafana.com/docs/grafana/latest/explore/simplified-exploration/logs/'}
+            target={'_blank'}
+            className={'external-link'}
+            rel="noreferrer"
+          >
+            here
+          </a>{' '}
+          to learn more...
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    graphicContainer: css({
+      display: 'flex',
+      justifyContent: 'center',
+      margin: '0 auto',
+      width: '200px',
+      height: '250px',
+      padding: theme.spacing(1),
+      [theme.breakpoints.up('md')]: {
+        alignSelf: 'flex-end',
+        width: '300px',
+        height: 'auto',
+        padding: theme.spacing(1),
+      },
+      [theme.breakpoints.up('lg')]: {
+        alignSelf: 'flex-end',
+        width: '400px',
+        height: 'auto',
+        padding: theme.spacing(1),
+      },
+    }),
+
+    text: css({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+    }),
+    title: css({
+      marginBottom: '1.5rem',
+    }),
+    wrap: css({
+      [theme.breakpoints.up('md')]: {
+        margin: '4rem auto auto auto',
+        flexDirection: 'row',
+      },
+      padding: '2rem',
+      margin: '0 auto auto auto',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      textAlign: 'center',
+    }),
+  };
+};