From bd9cec8827d5f085e4038c152b6dcce8812b6921 Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Fri, 29 Apr 2022 10:22:49 +0200
Subject: [PATCH]  Prometheus: Fix disappearing multi values in metric label
 values (#48127)

---
 .../querybuilder/shared/LabelFilterItem.tsx   | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
index f1fc4442ee6..f3dd25134af 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/LabelFilterItem.tsx
@@ -17,8 +17,8 @@ export interface Props {
 
 export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabelNames, onGetLabelValues }: Props) {
   const [state, setState] = useState<{
-    labelNames?: Array<SelectableValue<any>>;
-    labelValues?: Array<SelectableValue<any>>;
+    labelNames?: SelectableValue[];
+    labelValues?: SelectableValue[];
     isLoadingLabelNames?: boolean;
     isLoadingLabelValues?: boolean;
   }>({});
@@ -27,22 +27,18 @@ export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabe
     return item.op === operators[0].label;
   };
 
-  const getValue = (item: any) => {
-    if (item && item.value) {
-      if (item.value.indexOf('|') > 0) {
-        return item.value.split('|').map((x: any) => ({ label: x, value: x }));
+  const getSelectOptionsFromString = (item?: string): string[] => {
+    if (item) {
+      if (item.indexOf('|') > 0) {
+        return item.split('|');
       }
-      return toOption(item.value);
+      return [item];
     }
-    return null;
+    return [];
   };
 
-  const getOptions = () => {
-    if (!state.labelValues && item && item.value && item.value.indexOf('|') > 0) {
-      return getValue(item);
-    }
-
-    return state.labelValues;
+  const getOptions = (): SelectableValue[] => {
+    return [...getSelectOptionsFromString(item?.value).map(toOption), ...(state.labelValues ?? [])];
   };
 
   return (
@@ -85,7 +81,11 @@ export function LabelFilterItem({ item, defaultOp, onChange, onDelete, onGetLabe
         <Select
           inputId="prometheus-dimensions-filter-item-value"
           width="auto"
-          value={getValue(item)}
+          value={
+            isMultiSelect()
+              ? getSelectOptionsFromString(item?.value).map(toOption)
+              : getSelectOptionsFromString(item?.value).map(toOption)[0]
+          }
           allowCustomValue
           onOpenMenu={async () => {
             setState({ isLoadingLabelValues: true });