From 22a4c5f08646b31a669327731cab6391b7a3e28e Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Thu, 17 Mar 2022 10:51:42 +0100
Subject: [PATCH] Prometheus: Add optional param tooltip for visual builder
 (#46644)

---
 .../querybuilder/binaryScalarOperations.ts     |  6 +++++-
 .../querybuilder/shared/OperationEditor.tsx    | 18 ++++++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts b/public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts
index 8263cb1aad3..993545a5bb9 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts
+++ b/public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts
@@ -77,7 +77,11 @@ export const binaryScalarOperations: QueryBuilderOperationDef[] = binaryScalarDe
   const params: QueryBuilderOperationParamDef[] = [{ name: 'Value', type: 'number' }];
   const defaultParams: any[] = [2];
   if (opDef.comparison) {
-    params.unshift({ name: 'Bool', type: 'boolean' });
+    params.unshift({
+      name: 'Bool',
+      type: 'boolean',
+      description: 'If checked comparison will return 0 or 1 for the value rather than filtering.',
+    });
     defaultParams.unshift(false);
   }
 
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
index 36796fb1eb9..8b584368a0f 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { DataSourceApi, GrafanaTheme2 } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Button, useStyles2 } from '@grafana/ui';
+import { Button, Icon, Tooltip, useStyles2 } from '@grafana/ui';
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import {
@@ -70,9 +70,14 @@ export function OperationEditor({
     operationElements.push(
       <div className={styles.paramRow} key={`${paramIndex}-1`}>
         {!paramDef.hideName && (
-          <label className={styles.paramName} htmlFor={getOperationParamId(index, paramIndex)}>
-            {paramDef.name}
-          </label>
+          <div className={styles.paramName}>
+            <label htmlFor={getOperationParamId(index, paramIndex)}>{paramDef.name}</label>
+            {paramDef.description && (
+              <Tooltip placement="top" content={paramDef.description} theme="info">
+                <Icon name="info-circle" size="sm" className={styles.infoIcon} />
+              </Tooltip>
+            )}
+          </div>
         )}
         <div className={styles.paramValue}>
           <Stack gap={0.5} direction="row" alignItems="center" wrap={false}>
@@ -195,13 +200,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       position: 'relative',
     }),
     infoIcon: css({
-      color: theme.colors.text.secondary,
+      marginLeft: theme.spacing(0.5),
     }),
     body: css({
       margin: theme.spacing(1, 1, 0.5, 1),
       display: 'table',
     }),
     paramRow: css({
+      label: 'paramRow',
       display: 'table-row',
       verticalAlign: 'middle',
     }),
@@ -214,8 +220,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       height: '32px',
     }),
     paramValue: css({
+      label: 'paramValue',
       display: 'table-cell',
-      paddingBottom: theme.spacing(0.5),
       verticalAlign: 'middle',
     }),
     restParam: css({