From 31933c9569cc865b82931e04084f1a81adc62453 Mon Sep 17 00:00:00 2001 From: Giordano Ricci Date: Wed, 27 Sep 2023 18:36:28 +0100 Subject: [PATCH] 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 --------- Co-authored-by: Kristina --- .betterer.results | 5 -- .../features/explore/Graph/ExploreGraph.tsx | 49 ++----------------- .../features/explore/Graph/GraphContainer.tsx | 44 ++++++++++++++++- .../features/explore/Logs/LogsVolumePanel.tsx | 1 + 4 files changed, 47 insertions(+), 52 deletions(-) diff --git a/.betterer.results b/.betterer.results index 2ccb99f1535..404054712b4 100644 --- a/.betterer.results +++ b/.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"], diff --git a/public/app/features/explore/Graph/ExploreGraph.tsx b/public/app/features/explore/Graph/ExploreGraph.tsx index b9364bb77f9..159e9726841 100644 --- a/public/app/features/explore/Graph/ExploreGraph.tsx +++ b/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 ( - {data.length > MAX_NUMBER_OF_TIME_SERIES && !showAllTimeSeries && ( -
- - Showing only {MAX_NUMBER_OF_TIME_SERIES} time series. - -
- )} ); } - -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)}; - `, -}); diff --git a/public/app/features/explore/Graph/GraphContainer.tsx b/public/app/features/explore/Graph/GraphContainer.tsx index 70dbd601f92..41fc092c1d8 100644 --- a/public/app/features/explore/Graph/GraphContainer.tsx +++ b/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 ( + + + + + + ), + ].filter(Boolean)} width={width} height={height} loadingState={loadingState} @@ -79,8 +103,24 @@ export const GraphContainer = ({ thresholdsConfig={thresholdsConfig} thresholdsStyle={thresholdsStyle} eventBus={eventBus} + showAllTimeSeries={showAllTimeSeries} /> )} ); }; + +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, + }), +}); diff --git a/public/app/features/explore/Logs/LogsVolumePanel.tsx b/public/app/features/explore/Logs/LogsVolumePanel.tsx index cd31dcce517..600d19ba245 100644 --- a/public/app/features/explore/Logs/LogsVolumePanel.tsx +++ b/public/app/features/explore/Logs/LogsVolumePanel.tsx @@ -80,6 +80,7 @@ export function LogsVolumePanel(props: Props) { anchorToZero yAxisMaximum={allLogsVolumeMaximum} eventBus={props.eventBus} + showAllTimeSeries /> {extraInfoComponent &&
{extraInfoComponent}
}