From 53ba6456d470ad3f1040f02c8213f4cb4db6f948 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Tue, 9 Mar 2021 14:17:04 +0100
Subject: [PATCH] Loki, Prometheus: Change the placement for query type
 explanation (#31784)

* Fix tooltip in the way

* Add more info for instant query

* Update public/app/plugins/datasource/loki/components/LokiOptionFields.tsx

* Update public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
---
 .../loki/components/LokiOptionFields.tsx        | 15 +++++++--------
 .../components/PromExploreExtraField.tsx        | 17 ++++++++---------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
index 4e3c0bb8d07..20f73c17269 100644
--- a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
@@ -18,8 +18,12 @@ export interface LokiOptionFieldsProps {
 type LokiQueryType = 'instant' | 'range';
 
 const queryTypeOptions = [
-  { value: 'range', label: 'Range' },
-  { value: 'instant', label: 'Instant' },
+  { value: 'range', label: 'Range', description: 'Run query over a range of time.' },
+  {
+    value: 'instant',
+    label: 'Instant',
+    description: 'Run query against a single point in time. For this query, the "To" time is used.',
+  },
 ];
 
 export function LokiOptionFields(props: LokiOptionFieldsProps) {
@@ -79,12 +83,7 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
         )}
         aria-label="Query type field"
       >
-        <InlineFormLabel
-          tooltip="Choose the type of query you would like to run. An instant query queries against a single point in time. A range query queries over a range of time."
-          width="auto"
-        >
-          Query type
-        </InlineFormLabel>
+        <InlineFormLabel width="auto">Query type</InlineFormLabel>
 
         <RadioButtonGroup
           options={queryTypeOptions}
diff --git a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
index 91025032261..71f623c4fbb 100644
--- a/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx
@@ -20,9 +20,13 @@ export interface PromExploreExtraFieldProps {
 export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
   ({ queryType, stepValue, query, onChange, onStepChange, onQueryTypeChange, onKeyDownFunc }) => {
     const rangeOptions = [
-      { value: 'range', label: 'Range' },
-      { value: 'instant', label: 'Instant' },
-      { value: 'both', label: 'Both' },
+      { value: 'range', label: 'Range', description: 'Run query over a range of time.' },
+      {
+        value: 'instant',
+        label: 'Instant',
+        description: 'Run query against a single point in time. For this query, the "To" time is used.',
+      },
+      { value: 'both', label: 'Both', description: 'Run an Instant query and a Range query.' },
     ];
 
     return (
@@ -38,12 +42,7 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
           )}
           aria-label="Query type field"
         >
-          <InlineFormLabel
-            width="auto"
-            tooltip="Choose the type of query you would like to run. An instant query queries against a single point in time. A range query queries over a range of time. With both, you'll run two queries - one instant and one range. "
-          >
-            Query type
-          </InlineFormLabel>
+          <InlineFormLabel width="auto">Query type</InlineFormLabel>
 
           <RadioButtonGroup options={rangeOptions} value={queryType} onChange={onQueryTypeChange} />
         </div>