Loki: Add descriptions to query builder operations (#64046)

* feat: add descriptions to query builder operations

* refactor: add suggestion from review

* fix: update width of label operator seelct

public/app/plugins/datasource/loki/querybuilder/operations.ts

@@ -15,7 +15,7 @@ import {
   labelFilterRenderer,
   pipelineRenderer,
 } from './operationUtils';
-import { LokiOperationId, LokiOperationOrder, LokiVisualQueryOperationCategory } from './types';
+import { LokiOperationId, LokiOperationOrder, lokiOperators, LokiVisualQueryOperationCategory } from './types';
 
 export function getOperationDefinitions(): QueryBuilderOperationDef[] {
   const aggregations = [
@@ -352,7 +352,12 @@ Example: \`\`error_level=\`level\` \`\`
       id: LokiOperationId.LineFilterIpMatches,
       name: 'IP line filter expression',
       params: [
-        { name: 'Operator', type: 'string', options: ['|=', '!='] },
+        {
+          name: 'Operator',
+          type: 'string',
+          minWidth: 16,
+          options: [lokiOperators.contains, lokiOperators.doesNotContain],
+        },
         {
           name: 'Pattern',
           type: 'string',
@@ -373,9 +378,23 @@ Example: \`\`error_level=\`level\` \`\`
       id: LokiOperationId.LabelFilter,
       name: 'Label filter expression',
       params: [
-        { name: 'Label', type: 'string' },
-        { name: 'Operator', type: 'string', options: ['=', '!=', ' =~', '!~', '>', '<', '>=', '<='] },
-        { name: 'Value', type: 'string' },
+        { name: 'Label', type: 'string', minWidth: 14 },
+        {
+          name: 'Operator',
+          type: 'string',
+          minWidth: 14,
+          options: [
+            lokiOperators.equals,
+            lokiOperators.doesNotEqual,
+            lokiOperators.matchesRegex,
+            lokiOperators.doesNotMatchRegex,
+            lokiOperators.greaterThan,
+            lokiOperators.lessThan,
+            lokiOperators.greaterThanOrEqual,
+            lokiOperators.lessThanOrEqual,
+          ],
+        },
+        { name: 'Value', type: 'string', minWidth: 14 },
       ],
       defaultParams: ['', '=', ''],
       alternativesKey: 'label filter',
@@ -389,9 +408,14 @@ Example: \`\`error_level=\`level\` \`\`
       id: LokiOperationId.LabelFilterIpMatches,
       name: 'IP label filter expression',
       params: [
-        { name: 'Label', type: 'string' },
-        { name: 'Operator', type: 'string', options: ['=', '!='] },
-        { name: 'Value', type: 'string' },
+        { name: 'Label', type: 'string', minWidth: 14 },
+        {
+          name: 'Operator',
+          type: 'string',
+          minWidth: 14,
+          options: [lokiOperators.equals, lokiOperators.doesNotEqual],
+        },
+        { name: 'Value', type: 'string', minWidth: 14 },
       ],
       defaultParams: ['', '=', ''],
       alternativesKey: 'label filter',

public/app/plugins/datasource/loki/querybuilder/types.ts

@@ -102,3 +102,16 @@ export enum LokiOperationOrder {
   RangeVectorFunction = 5,
   Last = 6,
 }
+
+export const lokiOperators = {
+  equals: { label: '=', value: '=', description: 'Equals', isMultiValue: false },
+  doesNotEqual: { label: '!=', value: '!=', description: 'Does not equal', isMultiValue: false },
+  matchesRegex: { label: '=~', value: '=~', description: 'Matches regex', isMultiValue: true },
+  doesNotMatchRegex: { label: '!~', value: '!~', description: 'Does not match regex', isMultiValue: true },
+  greaterThan: { label: '>', value: '>', description: 'Greater than', isMultiValue: false },
+  greaterThanOrEqual: { label: '>=', value: '>=', description: 'Greater than or equal to', isMultiValue: false },
+  lessThan: { label: '<', value: '<', description: 'Less than', isMultiValue: false },
+  lessThanOrEqual: { label: '<=', value: '<=', description: 'Less than or equal to', isMultiValue: false },
+  contains: { label: '|=', value: '|=', description: 'Contains', isMultiValue: false },
+  doesNotContain: { label: '!=', value: '!=', description: 'Does not contain', isMultiValue: false },
+};

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

@@ -5,6 +5,7 @@ import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
 import { InlineField, Select } from '@grafana/ui';
+import { lokiOperators } from 'app/plugins/datasource/loki/querybuilder/types';
 
 import { isConflictingSelector } from './operationUtils';
 import { QueryBuilderLabelFilter } from './types';
@@ -160,8 +161,8 @@ export function LabelFilterItem({
 }
 
 const operators = [
-  { label: '=~', value: '=~', isMultiValue: true },
-  { label: '=', value: '=', isMultiValue: false },
-  { label: '!=', value: '!=', isMultiValue: false },
-  { label: '!~', value: '!~', isMultiValue: true },
+  lokiOperators.equals,
+  lokiOperators.doesNotEqual,
+  lokiOperators.matchesRegex,
+  lokiOperators.doesNotMatchRegex,
 ];

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

@@ -147,7 +147,7 @@ export function OperationEditor({
         <InlineField
           error={'You have conflicting label filters'}
           invalid={isInvalid(snapshot.isDragging)}
-          className={styles.error}
+          className={cx(styles.error, styles.cardWrapper)}
         >
           <div
             className={cx(
@@ -245,6 +245,9 @@ function callParamChangedThenOnChange(
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    cardWrapper: css({
+      alignItems: 'stretch',
+    }),
     error: css({
       marginBottom: theme.spacing(1),
     }),
@@ -258,6 +261,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       marginBottom: theme.spacing(1),
       position: 'relative',
       transition: 'all 0.5s ease-in 0s',
+      height: '100%',
     }),
     cardError: css({
       boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,

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

@@ -105,6 +105,7 @@ function SelectInputParamEditor({
         placeholder={paramDef.placeholder}
         allowCustomValue={true}
         onChange={(value) => onChange(index, value.value!)}
+        width={paramDef.minWidth || 'auto'}
       />
       {paramDef.optional && (
         <Button