From 4ea7677bff0f49203dfa413ec3e0a40469db05de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 12 Apr 2023 18:58:08 +0200 Subject: [PATCH] Explore: Start using PanelChrome as container (#66370) * Explore: Start using PanelChrome as container * fix test * Fixing issue with test and timerange --- e2e/various-suite/exemplars.spec.ts | 8 ++++ .../src/components/Collapse/Collapse.tsx | 2 +- .../components/PanelChrome/PanelChrome.tsx | 1 - public/app/features/explore/Explore.tsx | 7 ++- .../explore/Graph/ExploreGraphLabel.tsx | 7 +-- .../features/explore/Graph/GraphContainer.tsx | 45 ++++++++++--------- .../app/features/explore/TableContainer.tsx | 43 ++++++++++-------- .../timeseries/plugins/OutsideRangePlugin.tsx | 6 ++- 8 files changed, 67 insertions(+), 52 deletions(-) diff --git a/e2e/various-suite/exemplars.spec.ts b/e2e/various-suite/exemplars.spec.ts index 70c286902a0..7b6f5ad6e1a 100644 --- a/e2e/various-suite/exemplars.spec.ts +++ b/e2e/various-suite/exemplars.spec.ts @@ -69,6 +69,14 @@ describe('Exemplars', () => { e2e.components.TimePicker.applyTimeRange().click(); e2e.components.QueryField.container().should('be.visible').type('exemplar-query_bucket{shift}{enter}'); + cy.wait(1000); + + cy.get('body').then((body) => { + if (body.find(`[data-testid="time-series-zoom-to-data"]`).length > 0) { + cy.get(`[data-testid="time-series-zoom-to-data"]`).click(); + } + }); + e2e.components.DataSource.Prometheus.exemplarMarker().first().trigger('mouseover'); e2e().contains('Query with gdev-tempo').click(); e2e.components.TraceViewer.spanBar().should('have.length', 11); diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx index 3b56bae307f..79453de0984 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx @@ -12,7 +12,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ label: collapse; margin-bottom: ${theme.spacing(1)}; background-color: ${theme.colors.background.primary}; - border: 1px solid ${theme.colors.border.medium}; + border: 1px solid ${theme.colors.border.weak}; position: relative; border-radius: ${theme.shape.radius.default}; width: 100%; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx index ba8310352f1..2921b053527 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx @@ -252,7 +252,6 @@ const getStyles = (theme: GrafanaTheme2) => { height: '100%', display: 'flex', flexDirection: 'column', - flex: '1 1 0', '.show-on-hover': { visibility: 'hidden', diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 17ebe026ad8..3fab8c067ad 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -76,10 +76,9 @@ const getStyles = (theme: GrafanaTheme2) => { // Is needed for some transition animations to work. position: relative; margin-top: 21px; - `, - button: css` - label: button; - margin: 1em 4px 0 0; + display: flex; + flex-direction: column; + gap: ${theme.spacing(1)}; `, queryContainer: css` label: queryContainer; diff --git a/public/app/features/explore/Graph/ExploreGraphLabel.tsx b/public/app/features/explore/Graph/ExploreGraphLabel.tsx index 576a55e10e5..72d1c609d2c 100644 --- a/public/app/features/explore/Graph/ExploreGraphLabel.tsx +++ b/public/app/features/explore/Graph/ExploreGraphLabel.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { SelectableValue } from '@grafana/data'; -import { RadioButtonGroup, HorizontalGroup } from '@grafana/ui'; +import { RadioButtonGroup } from '@grafana/ui'; import { EXPLORE_GRAPH_STYLES, ExploreGraphStyle } from 'app/types'; const ALL_GRAPH_STYLE_OPTIONS: Array> = EXPLORE_GRAPH_STYLES.map((style) => ({ @@ -18,9 +18,6 @@ type Props = { export function ExploreGraphLabel(props: Props) { const { graphStyle, onChangeGraphStyle } = props; return ( - - Graph - - + ); } diff --git a/public/app/features/explore/Graph/GraphContainer.tsx b/public/app/features/explore/Graph/GraphContainer.tsx index cbbbbc8d166..ca3ce6cf752 100644 --- a/public/app/features/explore/Graph/GraphContainer.tsx +++ b/public/app/features/explore/Graph/GraphContainer.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState } from 'react'; import { DataFrame, EventBus, AbsoluteTimeRange, TimeZone, SplitOpen, LoadingState } from '@grafana/data'; -import { Collapse, useTheme2 } from '@grafana/ui'; +import { PanelChrome } from '@grafana/ui'; import { ExploreGraphStyle } from 'app/types'; import { storeGraphStyle } from '../state/utils'; @@ -25,7 +25,6 @@ interface Props { } export const GraphContainer = ({ - loading, data, eventBus, height, @@ -38,8 +37,6 @@ export const GraphContainer = ({ loadingState, }: Props) => { const [graphStyle, setGraphStyle] = useState(loadGraphStyle); - const theme = useTheme2(); - const spacing = parseInt(theme.spacing(2).slice(0, -2), 10); const onGraphStyleChange = useCallback((graphStyle: ExploreGraphStyle) => { storeGraphStyle(graphStyle); @@ -47,24 +44,28 @@ export const GraphContainer = ({ }, []); return ( - } - loading={loading} - isOpen + } > - - + {(innerWidth, innerHeight) => ( + + )} + ); }; diff --git a/public/app/features/explore/TableContainer.tsx b/public/app/features/explore/TableContainer.tsx index affe1bb0a6e..6e7795d9eb9 100644 --- a/public/app/features/explore/TableContainer.tsx +++ b/public/app/features/explore/TableContainer.tsx @@ -1,10 +1,9 @@ import React, { PureComponent } from 'react'; import { connect, ConnectedProps } from 'react-redux'; -import { ValueLinkConfig, applyFieldOverrides, TimeZone, SplitOpen, DataFrame } from '@grafana/data'; -import { Collapse, Table, AdHocFilterItem } from '@grafana/ui'; +import { ValueLinkConfig, applyFieldOverrides, TimeZone, SplitOpen, DataFrame, LoadingState } from '@grafana/data'; +import { Table, AdHocFilterItem, PanelChrome } from '@grafana/ui'; import { config } from 'app/core/config'; -import { PANEL_BORDER } from 'app/core/constants'; import { StoreState } from 'app/types'; import { ExploreId, ExploreItemState } from 'app/types/explore'; @@ -53,7 +52,6 @@ export class TableContainer extends PureComponent { render() { const { loading, onCellFilterAdded, tableResult, width, splitOpenFn, range, ariaLabel, timeZone } = this.props; const height = this.getTableHeight(); - const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER; let dataFrames = tableResult; @@ -90,21 +88,30 @@ export class TableContainer extends PureComponent { const subFrames = dataFrames?.filter((df) => df.meta?.custom?.parentRowIndex !== undefined); return ( - - {mainFrame?.length ? ( - - ) : ( - + + {(innerWidth, innerHeight) => ( + <> + {mainFrame?.length ? ( +
+ ) : ( + + )} + )} - + ); } } diff --git a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx index f75057f6f7f..d802f85def4 100644 --- a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx +++ b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx @@ -71,7 +71,11 @@ export const OutsideRangePlugin = ({ config, onChangeTimeRange }: ThresholdContr >
Data outside time range
-