Explore: Improve timeseries limit disclaimer (#75587)

* Explore: improve timeseries limit disclaimer

* use object notation for style definition

* increase gap

* Update public/app/features/explore/Graph/GraphContainer.tsx

Co-authored-by: Kristina <kristina.durivage@grafana.com>

---------

Co-authored-by: Kristina <kristina.durivage@grafana.com>

.betterer.results

@@ -3825,11 +3825,6 @@ exports[`better eslint`] = {
     "public/app/features/explore/FlameGraph/FlameGraphExploreContainer.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/features/explore/Graph/ExploreGraph.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
     "public/app/features/explore/LiveTailButton.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],

public/app/features/explore/Graph/ExploreGraph.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import { identity } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 
@@ -11,7 +10,6 @@ import {
   FieldColorModeId,
   FieldConfigSource,
   getFrameDisplayName,
-  GrafanaTheme2,
   LoadingState,
   SplitOpen,
   TimeZone,
@@ -27,15 +25,7 @@ import {
   SortOrder,
   GraphThresholdsStyleConfig,
 } from '@grafana/schema';
-import {
-  Button,
-  Icon,
-  PanelContext,
-  PanelContextProvider,
-  SeriesVisibilityChangeMode,
-  useStyles2,
-  useTheme2,
-} from '@grafana/ui';
+import { PanelContext, PanelContextProvider, SeriesVisibilityChangeMode, useTheme2 } from '@grafana/ui';
 import { GraphFieldConfig } from 'app/plugins/panel/graph/types';
 import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/timeseries/config';
 import { Options as TimeSeriesOptions } from 'app/plugins/panel/timeseries/panelcfg.gen';
@@ -47,7 +37,7 @@ import { useExploreDataLinkPostProcessor } from '../hooks/useExploreDataLinkPost
 import { applyGraphStyle, applyThresholdsConfig } from './exploreGraphStyleUtils';
 import { useStructureRev } from './useStructureRev';
 
-const MAX_NUMBER_OF_TIME_SERIES = 20;
+export const MAX_NUMBER_OF_TIME_SERIES = 20;
 
 interface Props {
   data: DataFrame[];
@@ -67,6 +57,7 @@ interface Props {
   thresholdsConfig?: ThresholdsConfig;
   thresholdsStyle?: GraphThresholdsStyleConfig;
   eventBus: EventBus;
+  showAllTimeSeries: boolean;
 }
 
 export function ExploreGraph({
@@ -87,10 +78,9 @@ export function ExploreGraph({
   thresholdsConfig,
   thresholdsStyle,
   eventBus,
+  showAllTimeSeries,
 }: Props) {
   const theme = useTheme2();
-  const style = useStyles2(getStyles);
-  const [showAllTimeSeries, setShowAllTimeSeries] = useState(false);
 
   const timeRange = useMemo(
     () => ({
@@ -198,20 +188,6 @@ export function ExploreGraph({
 
   return (
     <PanelContextProvider value={panelContext}>
-      {data.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && (
-        <div className={style.timeSeriesDisclaimer}>
-          <Icon className={style.disclaimerIcon} name="exclamation-triangle" />
-          Showing only {MAX_NUMBER_OF_TIME_SERIES} time series.
-          <Button
-            variant="primary"
-            fill="text"
-            onClick={() => setShowAllTimeSeries(true)}
-            className={style.showAllButton}
-          >
-            Show all {data.length}
-          </Button>
-        </div>
-      )}
       <PanelRenderer
         data={{
           series: dataWithConfig,
@@ -231,20 +207,3 @@ export function ExploreGraph({
     </PanelContextProvider>
   );
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  timeSeriesDisclaimer: css`
-    label: time-series-disclaimer;
-    margin: ${theme.spacing(1)} auto;
-    padding: 10px 0;
-    text-align: center;
-  `,
-  disclaimerIcon: css`
-    label: disclaimer-icon;
-    color: ${theme.colors.warning.main};
-    margin-right: ${theme.spacing(0.5)};
-  `,
-  showAllButton: css`
-    margin-left: ${theme.spacing(0.5)};
-  `,
-});

public/app/features/explore/Graph/GraphContainer.tsx

@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import React, { useCallback, useState } from 'react';
 
 import {
@@ -8,13 +9,22 @@ import {
   SplitOpen,
   LoadingState,
   ThresholdsConfig,
+  GrafanaTheme2,
 } from '@grafana/data';
-import { GraphThresholdsStyleConfig, PanelChrome, PanelChromeProps } from '@grafana/ui';
+import {
+  GraphThresholdsStyleConfig,
+  PanelChrome,
+  PanelChromeProps,
+  Icon,
+  Button,
+  useStyles2,
+  Tooltip,
+} from '@grafana/ui';
 import { ExploreGraphStyle } from 'app/types';
 
 import { storeGraphStyle } from '../state/utils';
 
-import { ExploreGraph } from './ExploreGraph';
+import { ExploreGraph, MAX_NUMBER_OF_TIME_SERIES } from './ExploreGraph';
 import { ExploreGraphLabel } from './ExploreGraphLabel';
 import { loadGraphStyle } from './utils';
 
@@ -48,7 +58,9 @@ export const GraphContainer = ({
   loadingState,
   statusMessage,
 }: Props) => {
+  const [showAllTimeSeries, setShowAllTimeSeries] = useState(false);
   const [graphStyle, setGraphStyle] = useState(loadGraphStyle);
+  const styles = useStyles2(getStyles);
 
   const onGraphStyleChange = useCallback((graphStyle: ExploreGraphStyle) => {
     storeGraphStyle(graphStyle);
@@ -58,6 +70,18 @@ export const GraphContainer = ({
   return (
     <PanelChrome
       title="Graph"
+      titleItems={[
+        MAX_NUMBER_OF_TIME_SERIES < data.length && !showAllTimeSeries && (
+          <div key="disclaimer" className={styles.timeSeriesDisclaimer}>
+            <Tooltip content={`Showing only ${MAX_NUMBER_OF_TIME_SERIES} time series`}>
+              <Icon className={styles.disclaimerIcon} name="exclamation-triangle" />
+            </Tooltip>
+            <Button variant="secondary" size="sm" onClick={() => setShowAllTimeSeries(true)}>
+              Show all {data.length} series
+            </Button>
+          </div>
+        ),
+      ].filter(Boolean)}
       width={width}
       height={height}
       loadingState={loadingState}
@@ -79,8 +103,24 @@ export const GraphContainer = ({
           thresholdsConfig={thresholdsConfig}
           thresholdsStyle={thresholdsStyle}
           eventBus={eventBus}
+          showAllTimeSeries={showAllTimeSeries}
         />
       )}
     </PanelChrome>
   );
 };
+
+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',
+    color: theme.colors.warning.main,
+  }),
+});

public/app/features/explore/Logs/LogsVolumePanel.tsx

@@ -80,6 +80,7 @@ export function LogsVolumePanel(props: Props) {
         anchorToZero
         yAxisMaximum={allLogsVolumeMaximum}
         eventBus={props.eventBus}
+        showAllTimeSeries
       />
       {extraInfoComponent && <div className={styles.extraInfoContainer}>{extraInfoComponent}</div>}
     </div>