From a8adfe83b56798eb3842e8c2d72ccd33877e19f5 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Mon, 27 Mar 2023 12:26:34 -0500
Subject: [PATCH] Canvas: Update metric value text for no data (#65372)

---
 .../features/canvas/elements/metricValue.tsx  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/public/app/features/canvas/elements/metricValue.tsx b/public/app/features/canvas/elements/metricValue.tsx
index 8268470547a..af5057f8a4c 100644
--- a/public/app/features/canvas/elements/metricValue.tsx
+++ b/public/app/features/canvas/elements/metricValue.tsx
@@ -22,20 +22,36 @@ const dummyFieldSettings: StandardEditorsRegistryItem<string, FieldNamePickerCon
 } as StandardEditorsRegistryItem<string, FieldNamePickerConfigSettings>;
 
 const MetricValueDisplay = (props: CanvasElementProps<TextConfig, TextData>) => {
-  const { data, isSelected } = props;
+  const { data, isSelected, config } = props;
   const styles = useStyles2(getStyles(data));
 
   const context = usePanelContext();
   const scene = context.instanceState?.scene;
+  let panelData: DataFrame[];
+  panelData = context.instanceState?.scene?.data.series;
 
   const isEditMode = useObservable<boolean>(scene?.editModeEnabled ?? of(false));
 
+  const getDisplayValue = () => {
+    if (panelData && config.text?.field && fieldNotFound()) {
+      return 'Field not found';
+    }
+
+    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));
+    return !field.length;
+  };
+
   if (isEditMode && isSelected) {
     return <MetricValueEdit {...props} />;
   }
+
   return (
     <div className={styles.container}>
-      <span className={styles.span}>{data?.text ? data.text : 'Double click to set field'}</span>
+      <span className={styles.span}>{getDisplayValue()}</span>
     </div>
   );
 };
@@ -48,6 +64,7 @@ const MetricValueEdit = (props: CanvasElementProps<TextConfig, TextData>) => {
 
   const onFieldChange = useCallback(
     (field) => {
+      console.log('onfieldchange', field);
       let selectedElement: ElementState;
       selectedElement = context.instanceState?.selected[0];
       if (selectedElement) {