From 58726720427a5b6ef8902af366f1e9a66c53caee Mon Sep 17 00:00:00 2001
From: ismail simsek <ismailsimsek09@gmail.com>
Date: Fri, 5 Sep 2025 08:17:51 +0200
Subject: [PATCH] Prometheus: Properly handle no __name__ case on RawListItem
 (#110608)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* handle no __name__ case

* lint:prune

* Add nomargin

---------

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
---
 eslint-suppressions.json                               | 10 ----------
 .../explore/PrometheusListView/RawListContainer.tsx    |  9 +++++++--
 .../explore/PrometheusListView/RawListItem.tsx         |  8 ++++----
 .../getRawPrometheusListItemsFromDataFrame.test.ts     |  2 +-
 4 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 096cff693dd..7c685c24ed5 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -2900,16 +2900,6 @@
       "count": 1
     }
   },
-  "public/app/features/explore/PrometheusListView/RawListContainer.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    }
-  },
-  "public/app/features/explore/PrometheusListView/RawListItem.tsx": {
-    "react/no-unescaped-entities": {
-      "count": 2
-    }
-  },
   "public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx": {
     "no-restricted-syntax": {
       "count": 1
diff --git a/public/app/features/explore/PrometheusListView/RawListContainer.tsx b/public/app/features/explore/PrometheusListView/RawListContainer.tsx
index 9eef00e1453..92d0110af2e 100644
--- a/public/app/features/explore/PrometheusListView/RawListContainer.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListContainer.tsx
@@ -16,7 +16,11 @@ import {
   RawPrometheusListItemEmptyValue,
 } from './utils/getRawPrometheusListItemsFromDataFrame';
 
-export type instantQueryRawVirtualizedListData = { Value: string; __name__: string; [index: string]: string };
+export type instantQueryRawVirtualizedListData = {
+  Value: string;
+  __name__?: string;
+  [index: string]: string | undefined;
+};
 
 export interface RawListContainerProps {
   tableResult: DataFrame;
@@ -122,6 +126,7 @@ const RawListContainer = (props: RawListContainerProps) => {
           className={styles.switchWrapper}
           label={t('explore.raw-list-container.label-expand-results', 'Expand results')}
           htmlFor={'isExpandedView'}
+          noMargin
         >
           <div className={styles.switch}>
             <Switch
@@ -170,7 +175,7 @@ const RawListContainer = (props: RawListContainerProps) => {
                       isExpandedView={isExpandedView}
                       valueLabels={filteredValueLabels}
                       totalNumberOfValues={valueLabels.length}
-                      listKey={items[index].__name__}
+                      listKey={items[index].__name__ || `item-${index}`}
                       listItemData={items[index]}
                     />
                   </div>
diff --git a/public/app/features/explore/PrometheusListView/RawListItem.tsx b/public/app/features/explore/PrometheusListView/RawListItem.tsx
index 65a27e128b5..4da433e89ce 100644
--- a/public/app/features/explore/PrometheusListView/RawListItem.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListItem.tsx
@@ -97,7 +97,7 @@ function getQueryValues(allLabels: Pick<instantQueryRawVirtualizedListData, 'Val
 const RawListItem = ({ listItemData, listKey, totalNumberOfValues, valueLabels, isExpandedView }: RawListProps) => {
   const { __name__, ...allLabels } = listItemData;
   // We must know whether it is a utf8 metric name or not
-  const isLegacyMetric = isValidLegacyName(__name__);
+  const isLegacyMetric = isValidLegacyName(__name__ ?? '');
   const [_, copyToClipboard] = useCopyToClipboard();
   const displayLength = valueLabels?.length ?? totalNumberOfValues;
   const styles = useStyles2(getStyles, displayLength, isExpandedView);
@@ -142,11 +142,11 @@ const RawListItem = ({ listItemData, listKey, totalNumberOfValues, valueLabels,
         </span>
         <span role={'cell'} className={styles.rowLabelWrapWrap}>
           <div className={styles.rowLabelWrap}>
-            {isLegacyMetric && <span>{__name__}</span>}
+            {!!__name__ && isLegacyMetric && <span>{__name__}</span>}
             <span>{`{`}</span>
-            {!isLegacyMetric && __name__ !== '' && (
+            {!isLegacyMetric && !!__name__ && __name__ !== '' && (
               <span>
-                "{__name__}"{', '}
+                &#34;{__name__}&#34;{', '}
               </span>
             )}
             <span>
diff --git a/public/app/features/explore/PrometheusListView/utils/getRawPrometheusListItemsFromDataFrame.test.ts b/public/app/features/explore/PrometheusListView/utils/getRawPrometheusListItemsFromDataFrame.test.ts
index 354ea2407b6..1a32fda03e8 100644
--- a/public/app/features/explore/PrometheusListView/utils/getRawPrometheusListItemsFromDataFrame.test.ts
+++ b/public/app/features/explore/PrometheusListView/utils/getRawPrometheusListItemsFromDataFrame.test.ts
@@ -30,7 +30,7 @@ describe('getRawPrometheusListItemsFromDataFrame', () => {
     const result = getRawPrometheusListItemsFromDataFrame(dataFrame);
     const differenceBetweenValueAndAttribute = 6;
     result.forEach((row) => {
-      expect(parseInt(row.attribute, 10)).toEqual(parseInt(row.Value, 10) + differenceBetweenValueAndAttribute);
+      expect(parseInt(row.attribute!, 10)).toEqual(parseInt(row.Value, 10) + differenceBetweenValueAndAttribute);
     });
   });
 });