From 4cf097c4e5a9d210f8d4046e44ccff0ef842ff80 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 11 Aug 2021 03:56:23 -0400
Subject: [PATCH] Small UX updates (#37694)

---
 .../loki/components/LokiCheatSheet.tsx          | 17 +++++++++++------
 .../datasource/loki/language_provider.ts        |  6 +++++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
index aaaf45a95b3..924f12b52e9 100644
--- a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
@@ -36,7 +36,7 @@ const LOGQL_EXAMPLES = [
 export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> {
   declare userLabelTimer: NodeJS.Timeout;
   state = {
-    userExamples: DEFAULT_EXAMPLES,
+    userExamples: [],
   };
 
   componentDidMount() {
@@ -81,23 +81,28 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
 
   render() {
     const { userExamples } = this.state;
+    const hasUserExamples = userExamples.length > 0;
 
     return (
       <div>
         <h2>Loki Cheat Sheet</h2>
         <div className="cheat-sheet-item">
           <div className="cheat-sheet-item__title">See your logs</div>
-          <div className="cheat-sheet-item__label">Start by selecting a log stream from the Log labels selector.</div>
           <div className="cheat-sheet-item__label">
-            Alternatively, you can write a stream selector into the query field:
+            Start by selecting a log stream from the Log browser, or alternatively you can write a stream selector into
+            the query field.
           </div>
-          {this.renderExpression('{job="default/prometheus"}')}
-          {userExamples !== DEFAULT_EXAMPLES && userExamples.length > 0 ? (
+          {hasUserExamples ? (
             <div>
               <div className="cheat-sheet-item__label">Here are some example streams from your logs:</div>
               {userExamples.map((example) => this.renderExpression(example))}
             </div>
-          ) : null}
+          ) : (
+            <div>
+              <div className="cheat-sheet-item__label">Here is an example of a log stream:</div>
+              {this.renderExpression(DEFAULT_EXAMPLES[0])}
+            </div>
+          )}
         </div>
         <div className="cheat-sheet-item">
           <div className="cheat-sheet-item__title">Combine stream selectors</div>
diff --git a/public/app/plugins/datasource/loki/language_provider.ts b/public/app/plugins/datasource/loki/language_provider.ts
index 9e275687ea0..a5fd487f3f7 100644
--- a/public/app/plugins/datasource/loki/language_provider.ts
+++ b/public/app/plugins/datasource/loki/language_provider.ts
@@ -424,7 +424,11 @@ export default class LokiLanguageProvider extends LanguageProvider {
 
     const res = await this.request(url, timeRange);
     if (Array.isArray(res)) {
-      this.labelKeys = res.slice().sort();
+      const labels = res
+        .slice()
+        .sort()
+        .filter((label) => label !== '__name__');
+      this.labelKeys = labels;
     }
 
     return [];