[v10.0.x] Canvas: Fix field not found (#68503)

Canvas: Fix field not found (#68415)

(cherry picked from commit 92d865ccce)

Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>

packages/grafana-ui/src/components/MatchersUI/utils.ts

@@ -31,7 +31,10 @@ export function frameHasName(name: string | undefined, names: FrameFieldsDisplay
 /**
  * Returns the distinct names in a set of frames
  */
-function getFrameFieldsDisplayNames(data: DataFrame[], filter?: (field: Field) => boolean): FrameFieldsDisplayNames {
+export function getFrameFieldsDisplayNames(
+  data: DataFrame[],
+  filter?: (field: Field) => boolean
+): FrameFieldsDisplayNames {
   const names: FrameFieldsDisplayNames = {
     display: new Set<string>(),
     raw: new Set<string>(),

public/app/features/canvas/elements/metricValue.tsx

@@ -7,11 +7,12 @@ import { DataFrame, FieldNamePickerConfigSettings, GrafanaTheme2, StandardEditor
 import { TextDimensionMode } from '@grafana/schema';
 import { usePanelContext, useStyles2 } from '@grafana/ui';
 import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { frameHasName, getFrameFieldsDisplayNames } from '@grafana/ui/src/components/MatchersUI/utils';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
+import { getDataLinks } from 'app/plugins/panel/canvas/utils';
 
-import { getDataLinks } from '../../../plugins/panel/canvas/utils';
 import { CanvasElementItem, CanvasElementProps, defaultBgColor, defaultTextColor } from '../element';
 import { ElementState } from '../runtime/element';
 import { Align, TextConfig, TextData, VAlign } from '../types';
@@ -37,12 +38,16 @@ const MetricValueDisplay = (props: CanvasElementProps<TextConfig, TextData>) =>
       return 'Field not found';
     }
 
+    if (panelData && config.text?.field && !data?.text) {
+      return 'No data';
+    }
+
     return data?.text ? data.text : 'Double click to set field';
   };
 
   const fieldNotFound = () => {
-    const field = panelData.filter((series) => series.fields.find((field) => field.name === config.text?.field));
+    const fieldNames = getFrameFieldsDisplayNames(panelData);
-    return !field.length;
+    return !frameHasName(config.text?.field, fieldNames);
   };
 
   if (isEditMode && isSelected) {