Prometheus: bool bin op improvements (#47198)

* Change param order

* Align tooltip icon styling

public/app/plugins/datasource/prometheus/querybuilder/PromQueryModeller.test.ts

@@ -317,4 +317,19 @@ describe('PromQueryModeller', () => {
       })
     ).toBe('metric_a / on(le, foo) metric_b');
   });
+
+  it('can render bool in binary ops', () => {
+    expect(
+      modeller.renderQuery({
+        metric: 'cluster_namespace_slug_dialer_name',
+        labels: [],
+        operations: [
+          {
+            id: '__less_or_equal',
+            params: [2, true],
+          },
+        ],
+      })
+    ).toBe('cluster_namespace_slug_dialer_name <= bool 2');
+  });
 });

public/app/plugins/datasource/prometheus/querybuilder/binaryScalarOperations.ts

@@ -77,12 +77,12 @@ export const binaryScalarOperations: QueryBuilderOperationDef[] = binaryScalarDe
   const params: QueryBuilderOperationParamDef[] = [{ name: 'Value', type: 'number' }];
   const defaultParams: any[] = [2];
   if (opDef.comparison) {
-    params.unshift({
+    params.push({
       name: 'Bool',
       type: 'boolean',
       description: 'If checked comparison will return 0 or 1 for the value rather than filtering.',
     });
-    defaultParams.unshift(false);
+    defaultParams.push(false);
   }
 
   return {
@@ -102,8 +102,7 @@ function getSimpleBinaryRenderer(operator: string) {
     let param = model.params[0];
     let bool = '';
     if (model.params.length === 2) {
-      param = model.params[1];
-      bool = model.params[0] ? ' bool' : '';
+      bool = model.params[1] ? ' bool' : '';
     }
 
     return `${innerExpr} ${operator}${bool} ${param}`;

public/app/plugins/datasource/prometheus/querybuilder/parsing.test.ts

@@ -422,7 +422,7 @@ describe('buildVisualQueryFromString', () => {
         operations: [
           {
             id: '__less_or_equal',
-            params: [false, 2.5],
+            params: [2.5, false],
           },
         ],
       },
@@ -438,7 +438,7 @@ describe('buildVisualQueryFromString', () => {
         operations: [
           {
             id: '__less_or_equal',
-            params: [true, 2],
+            params: [2, true],
           },
         ],
       },

public/app/plugins/datasource/prometheus/querybuilder/parsing.ts

@@ -438,7 +438,7 @@ function makeBinOp(
 ) {
   const params: any[] = [parseFloat(getString(expr, numberNode))];
   if (opDef.comparison) {
-    params.unshift(hasBool);
+    params.push(hasBool);
   }
   return {
     id: opDef.id,

public/app/plugins/datasource/prometheus/querybuilder/shared/OperationEditor.tsx

@@ -201,6 +201,10 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     infoIcon: css({
       marginLeft: theme.spacing(0.5),
+      color: theme.colors.text.secondary,
+      ':hover': {
+        color: theme.colors.text.primary,
+      },
     }),
     body: css({
       margin: theme.spacing(1, 1, 0.5, 1),