Chore: show error/warning notice with a different icon (#27872)

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice, ScopedVars } from '@grafana/data';
 import { AngularComponent } from '@grafana/runtime';
-import { ClickOutsideWrapper, Icon, Tooltip } from '@grafana/ui';
+import { ClickOutsideWrapper, Icon, IconName, Tooltip } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 
 import PanelHeaderCorner from './PanelHeaderCorner';
@@ -112,16 +112,22 @@ export class PanelHeader extends Component<Props, State> {
     });
   };
 
+  // This will show one icon for each severity
   renderNotice = (notice: QueryResultMetaNotice) => {
+    let iconName: IconName = 'info-circle';
+    if (notice.severity === 'error' || notice.severity === 'warning') {
+      iconName = 'exclamation-triangle';
+    }
+
     return (
       <Tooltip content={notice.text} key={notice.severity}>
         {notice.inspect ? (
           <div className="panel-info-notice pointer" onClick={e => this.openInspect(e, notice.inspect!)}>
-            <Icon name="info-circle" style={{ marginRight: '8px' }} />
+            <Icon name={iconName} style={{ marginRight: '8px' }} />
           </div>
         ) : (
           <a className="panel-info-notice" href={notice.link} target="_blank">
-            <Icon name="info-circle" style={{ marginRight: '8px' }} />
+            <Icon name={iconName} style={{ marginRight: '8px' }} />
           </a>
         )}
       </Tooltip>