Loki: Display error with label filter conflicts

public/app/plugins/datasource/loki/querybuilder/operationUtils.test.ts

@@ -4,6 +4,7 @@ import {
   createRangeOperation,
   createRangeOperationWithGrouping,
   getLineFilterRenderer,
+  isConflictingFilter,
   labelFilterRenderer,
 } from './operationUtils';
 import { LokiVisualQueryOperationCategory } from './types';
@@ -184,3 +185,23 @@ describe('labelFilterRenderer', () => {
     );
   });
 });
+
+describe('isConflictingFilter', () => {
+  it('should return true if the operation conflict with another label filter', () => {
+    const MOCK_OPERATION = { id: '__label_filter', params: ['abc', '!=', '123'] };
+    const MOCK_QUERY_OPERATIONS = [
+      { id: '__label_filter', params: ['abc', '=', '123'] },
+      { id: '__label_filter', params: ['abc', '!=', '123'] },
+    ];
+    expect(isConflictingFilter(MOCK_OPERATION, MOCK_QUERY_OPERATIONS)).toBe(true);
+  });
+
+  it("should return false if the operation doesn't conflict with another label filter", () => {
+    const MOCK_OPERATION = { id: '__label_filter', params: ['abc', '=', '123'] };
+    const MOCK_QUERY_OPERATIONS = [
+      { id: '__label_filter', params: ['abc', '=', '123'] },
+      { id: '__label_filter', params: ['abc', '=', '123'] },
+    ];
+    expect(isConflictingFilter(MOCK_OPERATION, MOCK_QUERY_OPERATIONS)).toBe(false);
+  });
+});

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

@@ -157,6 +157,33 @@ export function labelFilterRenderer(model: QueryBuilderOperation, def: QueryBuil
   return `${innerExpr} | ${model.params[0]} ${model.params[1]} \`${model.params[2]}\``;
 }
 
+export function isConflictingFilter(
+  operation: QueryBuilderOperation,
+  queryOperations: QueryBuilderOperation[]
+): boolean {
+  let conflictingFilter = false;
+
+  const labelFilters = queryOperations.filter((op) => {
+    return op.id === LokiOperationId.LabelFilter && op.params !== operation.params;
+  });
+
+  // check if the new filter conflicts with any other label filter
+  labelFilters.forEach((filter) => {
+    if (operation.params[0] !== filter.params[0] || operation.params[2] !== filter.params[2]) {
+      return;
+    }
+
+    if (
+      (String(operation.params[1]).startsWith('!') && !String(filter.params[1]).startsWith('!')) ||
+      (String(filter.params[1]).startsWith('!') && !String(operation.params[1]).startsWith('!'))
+    ) {
+      conflictingFilter = true;
+    }
+  });
+
+  return conflictingFilter;
+}
+
 export function pipelineRenderer(model: QueryBuilderOperation, def: QueryBuilderOperationDef, innerExpr: string) {
   return `${innerExpr} | ${model.id}`;
 }

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

@@ -4,13 +4,15 @@ import React, { useState } from 'react';
 import { SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
-import { Select } from '@grafana/ui';
+import { InlineField, Select } from '@grafana/ui';
 
+import { isConflictingSelector } from './operationUtils';
 import { QueryBuilderLabelFilter } from './types';
 
 export interface Props {
   defaultOp: string;
   item: Partial<QueryBuilderLabelFilter>;
+  items: Array<Partial<QueryBuilderLabelFilter>>;
   onChange: (value: QueryBuilderLabelFilter) => void;
   onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;
   onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;
@@ -21,6 +23,7 @@ export interface Props {
 
 export function LabelFilterItem({
   item,
+  items,
   defaultOp,
   onChange,
   onDelete,
@@ -35,6 +38,7 @@ export function LabelFilterItem({
     isLoadingLabelNames?: boolean;
     isLoadingLabelValues?: boolean;
   }>({});
+  const CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = 'You have conflicting label filters';
 
   const isMultiSelect = (operator = item.op) => {
     return operators.find((op) => op.label === operator)?.isMultiValue;
@@ -58,94 +62,99 @@ export function LabelFilterItem({
     return uniqBy([...selectedOptions, ...labelValues], 'value');
   };
 
+  const isConflicting = isConflictingSelector(item, items);
+
   return (
     <div data-testid="prometheus-dimensions-filter-item">
-      <InputGroup>
-        <Select
-          placeholder="Select label"
-          aria-label={selectors.components.QueryBuilder.labelSelect}
-          inputId="prometheus-dimensions-filter-item-key"
-          width="auto"
-          value={item.label ? toOption(item.label) : null}
-          allowCustomValue
-          onOpenMenu={async () => {
-            setState({ isLoadingLabelNames: true });
-            const labelNames = await onGetLabelNames(item);
-            setState({ labelNames, isLoadingLabelNames: undefined });
-          }}
-          isLoading={state.isLoadingLabelNames}
-          options={state.labelNames}
-          onChange={(change) => {
-            if (change.label) {
-              onChange({
-                ...item,
-                op: item.op ?? defaultOp,
-                label: change.label,
-              } as unknown as QueryBuilderLabelFilter);
-            }
-          }}
-          invalid={invalidLabel}
-        />
+      <InlineField error={CONFLICTING_LABEL_FILTER_ERROR_MESSAGE} invalid={isConflicting ? true : undefined}>
+        <InputGroup>
+          <Select
+            placeholder="Select label"
+            aria-label={selectors.components.QueryBuilder.labelSelect}
+            inputId="prometheus-dimensions-filter-item-key"
+            width="auto"
+            value={item.label ? toOption(item.label) : null}
+            allowCustomValue
+            onOpenMenu={async () => {
+              setState({ isLoadingLabelNames: true });
+              const labelNames = await onGetLabelNames(item);
+              setState({ labelNames, isLoadingLabelNames: undefined });
+            }}
+            isLoading={state.isLoadingLabelNames}
+            options={state.labelNames}
+            onChange={(change) => {
+              if (change.label) {
+                onChange({
+                  ...item,
+                  op: item.op ?? defaultOp,
+                  label: change.label,
+                } as unknown as QueryBuilderLabelFilter);
+              }
+            }}
+            invalid={isConflicting || invalidLabel}
+          />
 
-        <Select
-          aria-label={selectors.components.QueryBuilder.matchOperatorSelect}
-          value={toOption(item.op ?? defaultOp)}
-          options={operators}
-          width="auto"
-          onChange={(change) => {
-            if (change.value != null) {
-              onChange({
-                ...item,
-                op: change.value,
-                value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item?.value)[0],
-              } as unknown as QueryBuilderLabelFilter);
-            }
-          }}
-        />
+          <Select
+            aria-label={selectors.components.QueryBuilder.matchOperatorSelect}
+            value={toOption(item.op ?? defaultOp)}
+            options={operators}
+            width="auto"
+            onChange={(change) => {
+              if (change.value != null) {
+                onChange({
+                  ...item,
+                  op: change.value,
+                  value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item?.value)[0],
+                } as unknown as QueryBuilderLabelFilter);
+              }
+            }}
+            invalid={isConflicting}
+          />
 
-        <Select
-          placeholder="Select value"
-          aria-label={selectors.components.QueryBuilder.valueSelect}
-          inputId="prometheus-dimensions-filter-item-value"
-          width="auto"
-          value={
-            isMultiSelect()
-              ? getSelectOptionsFromString(item?.value).map(toOption)
-              : getSelectOptionsFromString(item?.value).map(toOption)[0]
-          }
-          allowCustomValue
-          onOpenMenu={async () => {
-            setState({ isLoadingLabelValues: true });
-            const labelValues = await onGetLabelValues(item);
-            setState({
-              ...state,
-              labelValues,
-              isLoadingLabelValues: undefined,
-            });
-          }}
-          isMulti={isMultiSelect()}
-          isLoading={state.isLoadingLabelValues}
-          options={getOptions()}
-          onChange={(change) => {
-            if (change.value) {
-              onChange({
-                ...item,
-                value: change.value,
-                op: item.op ?? defaultOp,
-              } as unknown as QueryBuilderLabelFilter);
-            } else {
-              const changes = change
-                .map((change: any) => {
-                  return change.label;
-                })
-                .join('|');
-              onChange({ ...item, value: changes, op: item.op ?? defaultOp } as unknown as QueryBuilderLabelFilter);
+          <Select
+            placeholder="Select value"
+            aria-label={selectors.components.QueryBuilder.valueSelect}
+            inputId="prometheus-dimensions-filter-item-value"
+            width="auto"
+            value={
+              isMultiSelect()
+                ? getSelectOptionsFromString(item?.value).map(toOption)
+                : getSelectOptionsFromString(item?.value).map(toOption)[0]
             }
-          }}
-          invalid={invalidValue}
-        />
-        <AccessoryButton aria-label="remove" icon="times" variant="secondary" onClick={onDelete} />
-      </InputGroup>
+            allowCustomValue
+            onOpenMenu={async () => {
+              setState({ isLoadingLabelValues: true });
+              const labelValues = await onGetLabelValues(item);
+              setState({
+                ...state,
+                labelValues,
+                isLoadingLabelValues: undefined,
+              });
+            }}
+            isMulti={isMultiSelect()}
+            isLoading={state.isLoadingLabelValues}
+            options={getOptions()}
+            onChange={(change) => {
+              if (change.value) {
+                onChange({
+                  ...item,
+                  value: change.value,
+                  op: item.op ?? defaultOp,
+                } as unknown as QueryBuilderLabelFilter);
+              } else {
+                const changes = change
+                  .map((change: any) => {
+                    return change.label;
+                  })
+                  .join('|');
+                onChange({ ...item, value: changes, op: item.op ?? defaultOp } as unknown as QueryBuilderLabelFilter);
+              }
+            }}
+            invalid={isConflicting || invalidValue}
+          />
+          <AccessoryButton aria-label="remove" icon="times" variant="secondary" onClick={onDelete} />
+        </InputGroup>
+      </InlineField>
     </div>
   );
 }

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

@@ -62,6 +62,7 @@ export function LabelFilters({
           renderItem={(item: Partial<QueryBuilderLabelFilter>, onChangeItem, onDelete) => (
             <LabelFilterItem
               item={item}
+              items={items}
               defaultOp={defaultOp}
               onChange={onChangeItem}
               onDelete={onDelete}