Prometheus: Properly handle no __name__ case on RawListItem (#110608)

* handle no __name__ case

* lint:prune

* Add nomargin

---------

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

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

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>

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>

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);
     });
   });
 });