From 61fbcce68307cd25ae4effb6b201ec015e5349cc Mon Sep 17 00:00:00 2001
From: Giordano Ricci <me@giordanoricci.com>
Date: Wed, 4 Oct 2023 12:25:45 +0100
Subject: [PATCH] Explore: Improve series disclaimer UI (#75936)

---
 .../features/explore/Graph/GraphContainer.tsx | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/public/app/features/explore/Graph/GraphContainer.tsx b/public/app/features/explore/Graph/GraphContainer.tsx
index 52f42c51ab4..bc8cc45ddbe 100644
--- a/public/app/features/explore/Graph/GraphContainer.tsx
+++ b/public/app/features/explore/Graph/GraphContainer.tsx
@@ -80,13 +80,17 @@ export const GraphContainer = ({
       titleItems={[
         !showAllSeries && MAX_NUMBER_OF_TIME_SERIES < data.length && (
           <div key="disclaimer" className={styles.timeSeriesDisclaimer}>
-            <Tooltip content={`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series`}>
-              <Icon className={styles.disclaimerIcon} name="exclamation-triangle" />
+            <span className={styles.warningMessage}>
+              <Icon name="exclamation-triangle" aria-hidden="true" />
+              Showing only {MAX_NUMBER_OF_TIME_SERIES} series
+            </span>
+            <Tooltip
+              content={`Rendering too many series in a single panel may impact performance and make data harder to read. Consider refining your queries.`}
+            >
+              <Button variant="secondary" size="sm" onClick={toggleShowAllSeries}>
+                Show all {data.length}
+              </Button>
             </Tooltip>
-
-            <Button variant="secondary" size="sm" onClick={toggleShowAllSeries}>
-              Show all {data.length} series
-            </Button>
           </div>
         ),
       ].filter(Boolean)}
@@ -120,14 +124,15 @@ export const GraphContainer = ({
 const getStyles = (theme: GrafanaTheme2) => ({
   timeSeriesDisclaimer: css({
     label: 'time-series-disclaimer',
-    textSlign: 'center',
-    fontSize: theme.typography.bodySmall.fontSize,
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
   }),
-  disclaimerIcon: css({
-    label: 'disclaimer-icon',
+  warningMessage: css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
     color: theme.colors.warning.main,
+    fontSize: theme.typography.bodySmall.fontSize,
   }),
 });