From 340942267cf8377af37c269bcb549547c03d403e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Fri, 23 Apr 2021 09:23:33 +0200
Subject: [PATCH] Tempo: Add cheat sheet to query editor (#33272)

---
 .../plugins/datasource/tempo/CheatSheet.tsx   | 20 +++++++++++++++++++
 public/app/plugins/datasource/tempo/module.ts |  4 +++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 public/app/plugins/datasource/tempo/CheatSheet.tsx

diff --git a/public/app/plugins/datasource/tempo/CheatSheet.tsx b/public/app/plugins/datasource/tempo/CheatSheet.tsx
new file mode 100644
index 00000000000..a037c9e753e
--- /dev/null
+++ b/public/app/plugins/datasource/tempo/CheatSheet.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function CheatSheet() {
+  return (
+    <div>
+      <h2 id="tempo-cheat-sheet">Tempo Cheat Sheet</h2>
+      <p>
+        Tempo is a trace id lookup store. Enter a trace id in the above field and hit “Run Query” to retrieve your
+        trace. Tempo is generally paired with other datasources such as Loki or Prometheus to find traces.
+      </p>
+      <p>
+        Here are some{' '}
+        <a href="https://grafana.com/docs/tempo/latest/guides/instrumentation/" target="blank">
+          instrumentation examples
+        </a>{' '}
+        to get you started with trace discovery through logs and metrics (exemplars).
+      </p>
+    </div>
+  );
+}
diff --git a/public/app/plugins/datasource/tempo/module.ts b/public/app/plugins/datasource/tempo/module.ts
index f8356dc424d..b2b612f0d52 100644
--- a/public/app/plugins/datasource/tempo/module.ts
+++ b/public/app/plugins/datasource/tempo/module.ts
@@ -1,8 +1,10 @@
 import { DataSourcePlugin } from '@grafana/data';
+import CheatSheet from './CheatSheet';
+import { ConfigEditor } from './ConfigEditor';
 import { TempoDatasource } from './datasource';
 import { TempoQueryField } from './QueryField';
-import { ConfigEditor } from './ConfigEditor';
 
 export const plugin = new DataSourcePlugin(TempoDatasource)
   .setConfigEditor(ConfigEditor)
+  .setQueryEditorHelp(CheatSheet)
   .setExploreQueryField(TempoQueryField);