From 4f3be31e1aa0a66df05c64db559fc864ead70a23 Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 29 Sep 2020 07:27:57 -0700
Subject: [PATCH] Chore: show error/warning notice with a different icon
 (#27872)

---
 .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index e301266fc7f..421725d2e25 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/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>