From 551a2ac9ec8f4dbe67a0a008736339d0eab5c816 Mon Sep 17 00:00:00 2001
From: ismail simsek <ismailsimsek09@gmail.com>
Date: Thu, 8 Dec 2022 20:52:27 +0300
Subject: [PATCH] Prometheus: Tweak query builder select component (#59749)

* Have consistent color for operators

* Add more operators and reorder them to align with dashboard filters
---
 .../querybuilder/components/LabelFilterItem.tsx           | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilterItem.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilterItem.tsx
index bb1ce8c8bfd..d5e31f675e3 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilterItem.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/LabelFilterItem.tsx
@@ -6,9 +6,10 @@ import { selectors } from '@grafana/e2e-selectors';
 import { AccessoryButton, InputGroup } from '@grafana/experimental';
 import { AsyncSelect, Select } from '@grafana/ui';
 
-import { PROMETHEUS_QUERY_BUILDER_MAX_RESULTS } from '../components/MetricSelect';
 import { QueryBuilderLabelFilter } from '../shared/types';
 
+import { PROMETHEUS_QUERY_BUILDER_MAX_RESULTS } from './MetricSelect';
+
 export interface Props {
   defaultOp: string;
   item: Partial<QueryBuilderLabelFilter>;
@@ -89,6 +90,7 @@ export function LabelFilterItem({
         {/* Operator select i.e.   = =~ != !~   */}
         <Select
           aria-label={selectors.components.QueryBuilder.matchOperatorSelect}
+          className="query-segment-operator"
           value={toOption(item.op ?? defaultOp)}
           options={operators}
           width="auto"
@@ -159,8 +161,10 @@ export function LabelFilterItem({
 }
 
 const operators = [
-  { label: '=~', value: '=~', isMultiValue: true },
   { label: '=', value: '=', isMultiValue: false },
   { label: '!=', value: '!=', isMultiValue: false },
+  { label: '<', value: '<', isMultiValue: false },
+  { label: '>', value: '>', isMultiValue: false },
+  { label: '=~', value: '=~', isMultiValue: true },
   { label: '!~', value: '!~', isMultiValue: true },
 ];