Alerting: Indicate panels without identifier (#74746)

public/app/features/alerting/unified/components/rule-editor/DashboardAnnotationField.tsx

@@ -27,7 +27,7 @@ const DashboardAnnotationField = ({
   const styles = useStyles2(getStyles);
 
   const dashboardLink = makeDashboardLink(dashboard?.uid || dashboardUid);
-  const panelLink = makePanelLink(dashboard?.uid || dashboardUid, panel?.id.toString() || panelId);
+  const panelLink = makePanelLink(dashboard?.uid || dashboardUid, panel?.id?.toString() || panelId);
   return (
     <div className={styles.container}>
       {dashboard && (

public/app/features/alerting/unified/components/rule-editor/DashboardPicker.tsx

@@ -1,4 +1,5 @@
 import { css, cx } from '@emotion/css';
+import { noop } from 'lodash';
 import React, { CSSProperties, useCallback, useMemo, useState } from 'react';
 import { useDebounce } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -20,7 +21,7 @@ import {
 import { dashboardApi } from '../../api/dashboardApi';
 
 export interface PanelDTO {
-  id: number;
+  id?: number;
   title?: string;
   type: string;
 }
@@ -73,11 +74,12 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
 
   const filteredPanels =
     dashboardResult?.dashboard?.panels
-      ?.filter((panel): panel is PanelDTO => typeof panel.id === 'number' && typeof panel.type === 'string')
       ?.filter((panel) => panel.title?.toLowerCase().includes(panelFilter.toLowerCase()))
       .sort(panelSort) ?? [];
 
-  const currentPanel = dashboardResult?.dashboard?.panels?.find((panel) => panel.id.toString() === selectedPanelId);
+  const currentPanel: PanelDTO | undefined = dashboardResult?.dashboard?.panels?.find(
+    (panel: PanelDTO) => isValidPanelIdentifier(panel) && panel.id?.toString() === selectedPanelId
+  );
 
   const selectedDashboardIndex = useMemo(() => {
     return filteredDashboards.map((dashboard) => dashboard.uid).indexOf(selectedDashboardUid ?? '');
@@ -128,27 +130,34 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
   const PanelRow = ({ index, style }: { index: number; style: CSSProperties }) => {
     const panel = filteredPanels[index];
     const panelTitle = panel.title || '<No title>';
-    const isSelected = selectedPanelId === panel.id.toString();
+    const isSelected = panel.id && selectedPanelId === panel.id?.toString();
     const isAlertingCompatible = panel.type === 'graph' || panel.type === 'timeseries';
+    const disabled = !isValidPanelIdentifier(panel);
 
     return (
       <button
         type="button"
         style={style}
+        disabled={disabled}
         className={cx(styles.rowButton, styles.panelButton, {
           [styles.rowOdd]: index % 2 === 1,
           [styles.rowSelected]: isSelected,
         })}
-        onClick={() => setSelectedPanelId(panel.id.toString())}
+        onClick={() => (disabled ? noop : setSelectedPanelId(panel.id?.toString()))}
       >
         <div className={styles.rowButtonTitle} title={panelTitle}>
           {panelTitle}
         </div>
-        {!isAlertingCompatible && (
+        {!isAlertingCompatible && !disabled && (
           <Tooltip content="Alert tab will be disabled for this panel. It is only supported on graph and timeseries panels">
             <Icon name="exclamation-triangle" className={styles.warnIcon} data-testid="warning-icon" />
           </Tooltip>
         )}
+        {disabled && (
+          <Tooltip content="This panel does not have a valid identifier.">
+            <Icon name="info-circle" data-testid="info-icon" />
+          </Tooltip>
+        )}
       </button>
     );
   };
@@ -169,7 +178,7 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
             Dashboard: {dashboardResult?.dashboard.title} ({dashboardResult?.dashboard.uid}) in folder{' '}
             {dashboardResult?.meta.folderTitle ?? 'General'}
           </div>
-          {Boolean(currentPanel) && (
+          {currentPanel && (
             <div>
               Panel: {currentPanel.title} ({currentPanel.id})
             </div>
@@ -250,6 +259,10 @@ export const DashboardPicker = ({ dashboardUid, panelId, isOpen, onChange, onDis
   );
 };
 
+const isValidPanelIdentifier = (panel: PanelDTO): boolean => {
+  return typeof panel.id === 'number' && typeof panel.type === 'string';
+};
+
 const getPickerStyles = (theme: GrafanaTheme2) => {
   const clearButton = clearButtonStyles(theme);