From 2a47c315df19febd732dfd6216a4238730af0856 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 12 Jun 2019 14:01:48 +0100
Subject: [PATCH] Influx: Adds start page for logs in Explore (#17521)

* Influx: Adds start page for logs in Explore
Closes #17499

* Influx: Rebased with master and removed conditional display of cheat sheet in explore
Cheat sheet now displays during both Metrics and Logs mode, though this is only
temporary.
---
 .../influxdb/components/InfluxCheatSheet.tsx  | 21 +++++++++++++++++++
 .../influxdb/components/InfluxStartPage.tsx   | 13 ++++++++++++
 .../app/plugins/datasource/influxdb/module.ts |  5 ++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx
 create mode 100644 public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx

diff --git a/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx b/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx
new file mode 100644
index 00000000000..8c1479f5b2c
--- /dev/null
+++ b/public/app/plugins/datasource/influxdb/components/InfluxCheatSheet.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const CHEAT_SHEET_ITEMS = [
+  {
+    title: 'Getting started',
+    label:
+      'Start by selecting a measurement and field from the dropdown above. You can then use the tag selector to further narrow your search.',
+  },
+];
+
+export default (props: any) => (
+  <div>
+    <h2>InfluxDB Cheat Sheet</h2>
+    {CHEAT_SHEET_ITEMS.map(item => (
+      <div className="cheat-sheet-item" key={item.title}>
+        <div className="cheat-sheet-item__title">{item.title}</div>
+        <div className="cheat-sheet-item__label">{item.label}</div>
+      </div>
+    ))}
+  </div>
+);
diff --git a/public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx b/public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx
new file mode 100644
index 00000000000..a825543bb75
--- /dev/null
+++ b/public/app/plugins/datasource/influxdb/components/InfluxStartPage.tsx
@@ -0,0 +1,13 @@
+import React, { PureComponent } from 'react';
+import { ExploreStartPageProps } from '@grafana/ui';
+import InfluxCheatSheet from './InfluxCheatSheet';
+
+export default class InfluxStartPage extends PureComponent<ExploreStartPageProps> {
+  render() {
+    return (
+      <div className="grafana-info-box grafana-info-box--max-lg">
+        <InfluxCheatSheet onClickExample={this.props.onClickExample} />
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/datasource/influxdb/module.ts b/public/app/plugins/datasource/influxdb/module.ts
index 926b8597839..f15f4f181eb 100644
--- a/public/app/plugins/datasource/influxdb/module.ts
+++ b/public/app/plugins/datasource/influxdb/module.ts
@@ -1,6 +1,8 @@
 import InfluxDatasource from './datasource';
 import { InfluxQueryCtrl } from './query_ctrl';
 import { InfluxLogsQueryField } from './components/InfluxLogsQueryField';
+import InfluxStartPage from './components/InfluxStartPage';
+
 import {
   createChangeHandler,
   createResetHandler,
@@ -31,4 +33,5 @@ export const plugin = new DataSourcePlugin(InfluxDatasource)
   .setConfigCtrl(InfluxConfigCtrl)
   .setQueryCtrl(InfluxQueryCtrl)
   .setAnnotationQueryCtrl(InfluxAnnotationsQueryCtrl)
-  .setExploreLogsQueryField(InfluxLogsQueryField);
+  .setExploreLogsQueryField(InfluxLogsQueryField)
+  .setExploreStartPage(InfluxStartPage);