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

@@ -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);

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%;

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',

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;

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<SelectableValue<ExploreGraphStyle>> = EXPLORE_GRAPH_STYLES.map((style) => ({
@@ -18,9 +18,6 @@ type Props = {
 export function ExploreGraphLabel(props: Props) {
   const { graphStyle, onChangeGraphStyle } = props;
   return (
-    <HorizontalGroup justify="space-between" wrap>
-      Graph
-      <RadioButtonGroup size="sm" options={ALL_GRAPH_STYLE_OPTIONS} value={graphStyle} onChange={onChangeGraphStyle} />
-    </HorizontalGroup>
+    <RadioButtonGroup size="sm" options={ALL_GRAPH_STYLE_OPTIONS} value={graphStyle} onChange={onChangeGraphStyle} />
   );
 }

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 (
-    <Collapse
-      label={<ExploreGraphLabel graphStyle={graphStyle} onChangeGraphStyle={onGraphStyleChange} />}
-      loading={loading}
-      isOpen
+    <PanelChrome
+      title="Graph"
+      width={width}
+      height={height}
+      loadingState={loadingState}
+      actions={<ExploreGraphLabel graphStyle={graphStyle} onChangeGraphStyle={onGraphStyleChange} />}
     >
-      <ExploreGraph
-        graphStyle={graphStyle}
-        data={data}
-        height={height}
-        width={width - spacing}
-        absoluteRange={absoluteRange}
-        onChangeTime={onChangeTime}
-        timeZone={timeZone}
-        annotations={annotations}
-        splitOpenFn={splitOpenFn}
-        loadingState={loadingState}
-        eventBus={eventBus}
-      />
-    </Collapse>
+      {(innerWidth, innerHeight) => (
+        <ExploreGraph
+          graphStyle={graphStyle}
+          data={data}
+          height={innerHeight}
+          width={innerWidth}
+          absoluteRange={absoluteRange}
+          onChangeTime={onChangeTime}
+          timeZone={timeZone}
+          annotations={annotations}
+          splitOpenFn={splitOpenFn}
+          loadingState={loadingState}
+          eventBus={eventBus}
+        />
+      )}
+    </PanelChrome>
   );
 };

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<Props> {
   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<Props> {
     const subFrames = dataFrames?.filter((df) => df.meta?.custom?.parentRowIndex !== undefined);
 
     return (
-      <Collapse label="Table" loading={loading} isOpen>
-        {mainFrame?.length ? (
-          <Table
-            ariaLabel={ariaLabel}
-            data={mainFrame}
-            subData={subFrames}
-            width={tableWidth}
-            height={height}
-            maxHeight={600}
-            onCellFilterAdded={onCellFilterAdded}
-          />
-        ) : (
-          <MetaInfoText metaItems={[{ value: '0 series returned' }]} />
+      <PanelChrome
+        title="Table"
+        width={width}
+        height={height}
+        loadingState={loading ? LoadingState.Loading : undefined}
+      >
+        {(innerWidth, innerHeight) => (
+          <>
+            {mainFrame?.length ? (
+              <Table
+                ariaLabel={ariaLabel}
+                data={mainFrame}
+                subData={subFrames}
+                width={innerWidth}
+                height={innerHeight}
+                maxHeight={600}
+                onCellFilterAdded={onCellFilterAdded}
+              />
+            ) : (
+              <MetaInfoText metaItems={[{ value: '0 series returned' }]} />
+            )}
+          </>
         )}
-      </Collapse>
+      </PanelChrome>
     );
   }
 }

public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx

@@ -71,7 +71,11 @@ export const OutsideRangePlugin = ({ config, onChangeTimeRange }: ThresholdContr
     >
       <div>
         <div>Data outside time range</div>
-        <Button onClick={(v) => onChangeTimeRange({ from: first, to: last })} variant="secondary">
+        <Button
+          onClick={(v) => onChangeTimeRange({ from: first, to: last })}
+          variant="secondary"
+          data-testid="time-series-zoom-to-data"
+        >
           Zoom to data
         </Button>
       </div>