IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: Remove nested auto sizer and pass width from main Explore component (#35919)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-06-18 14:21:54 +02:00 committed by GitHub
parent 7ff26bdfae
commit 83f62c1912
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/features/explore/Explore.tsx
View File

@ -229,13 +229,14 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
); );
} }
renderGraphPanel() { renderGraphPanel(width: number) {
const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading } = this.props; const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading, theme } = this.props;
return ( return (
<Collapse label="Graph" loading={loading} isOpen> <Collapse label="Graph" loading={loading} isOpen>
<ExploreGraphNGPanel <ExploreGraphNGPanel
data={graphResult!} data={graphResult!}
height={400} height={400}
width={width - theme.panelPadding * 2}
tooltipDisplayMode={TooltipDisplayMode.Single} tooltipDisplayMode={TooltipDisplayMode.Single}
absoluteRange={absoluteRange} absoluteRange={absoluteRange}
timeZone={timeZone} timeZone={timeZone}
@ -259,12 +260,14 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
); );
} }
renderLogsPanel() { renderLogsPanel(width: number) {
const { exploreId, syncedTimes } = this.props; const { exploreId, syncedTimes, theme } = this.props;
return ( return (
<LogsContainer <LogsContainer
exploreId={exploreId} exploreId={exploreId}
syncedTimes={syncedTimes} syncedTimes={syncedTimes}
width={width - theme.panelPadding * 2}
onClickFilterLabel={this.onClickFilterLabel} onClickFilterLabel={this.onClickFilterLabel}
onClickFilterOutLabel={this.onClickFilterOutLabel} onClickFilterOutLabel={this.onClickFilterOutLabel}
onStartScanning={this.onStartScanning} onStartScanning={this.onStartScanning}
@ -357,10 +360,10 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
{showPanels && ( {showPanels && (
<> <>
{showMetrics && graphResult && ( {showMetrics && graphResult && (
<ErrorBoundaryAlert>{this.renderGraphPanel()}</ErrorBoundaryAlert> <ErrorBoundaryAlert>{this.renderGraphPanel(width)}</ErrorBoundaryAlert>
)} )}
{showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>} {showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>}
{showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel()}</ErrorBoundaryAlert>} {showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
{showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>} {showNodeGraph && <ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>}
{showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>} {showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>}
</> </>

66
public/app/features/explore/ExploreGraphNGPanel.tsx
View File

@ -35,7 +35,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
import { splitOpen } from './state/main'; import { splitOpen } from './state/main';
import { getFieldLinksForExplore } from './utils/links'; import { getFieldLinksForExplore } from './utils/links';
import { usePrevious } from 'react-use'; import { usePrevious } from 'react-use';
import AutoSizer from 'react-virtualized-auto-sizer';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { seriesVisibilityConfigFactory } from '../dashboard/dashgrid/SeriesVisibilityConfigFactory'; import { seriesVisibilityConfigFactory } from '../dashboard/dashgrid/SeriesVisibilityConfigFactory';
import { identity } from 'lodash'; import { identity } from 'lodash';
@ -45,6 +44,7 @@ const MAX_NUMBER_OF_TIME_SERIES = 20;
interface Props { interface Props {
data: DataFrame[]; data: DataFrame[];
height: number; height: number;
width: number;
annotations?: DataFrame[]; annotations?: DataFrame[];
absoluteRange: AbsoluteTimeRange; absoluteRange: AbsoluteTimeRange;
timeZone: TimeZone; timeZone: TimeZone;
@ -57,6 +57,7 @@ interface Props {
export function ExploreGraphNGPanel({ export function ExploreGraphNGPanel({
data, data,
height, height,
width,
timeZone, timeZone,
absoluteRange, absoluteRange,
onUpdateTimeRange, onUpdateTimeRange,
@ -156,42 +157,33 @@ export function ExploreGraphNGPanel({
>{`Show all ${dataWithConfig.length}`}</span> >{`Show all ${dataWithConfig.length}`}</span>
</div> </div>
)} )}
<AutoSizer disableHeight> <TimeSeries
{({ width }) => ( frames={seriesToShow}
<TimeSeries structureRev={structureRev}
frames={seriesToShow} width={width}
structureRev={structureRev} height={height}
width={width} timeRange={timeRange}
height={height} legend={{ displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }}
timeRange={timeRange} timeZone={timeZone}
legend={{ displayMode: LegendDisplayMode.List, placement: 'bottom', calcs: [] }} >
timeZone={timeZone} {(config, alignedDataFrame) => {
> return (
{(config, alignedDataFrame) => { <>
return ( <ZoomPlugin config={config} onZoom={onUpdateTimeRange} />
<> <TooltipPlugin config={config} data={alignedDataFrame} mode={tooltipDisplayMode} timeZone={timeZone} />
<ZoomPlugin config={config} onZoom={onUpdateTimeRange} /> <ContextMenuPlugin config={config} data={alignedDataFrame} timeZone={timeZone} />
<TooltipPlugin {annotations && (
config={config} <ExemplarsPlugin
data={alignedDataFrame} config={config}
mode={tooltipDisplayMode} exemplars={annotations}
timeZone={timeZone} timeZone={timeZone}
/> getFieldLinks={getFieldLinks}
<ContextMenuPlugin config={config} data={alignedDataFrame} timeZone={timeZone} /> />
{annotations && ( )}
<ExemplarsPlugin </>
config={config} );
exemplars={annotations} }}
timeZone={timeZone} </TimeSeries>
getFieldLinks={getFieldLinks}
/>
)}
</>
);
}}
</TimeSeries>
)}
</AutoSizer>
</PanelContextProvider> </PanelContextProvider>
); );
} }

3
public/app/features/explore/Logs.tsx
View File

@ -45,6 +45,7 @@ const SETTINGS_KEYS = {
}; };
interface Props { interface Props {
width: number;
logRows: LogRowModel[]; logRows: LogRowModel[];
logsMeta?: LogsMetaItem[]; logsMeta?: LogsMetaItem[];
logsSeries?: DataFrame[]; logsSeries?: DataFrame[];
@ -233,6 +234,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
render() { render() {
const { const {
width,
logRows, logRows,
logsMeta, logsMeta,
logsSeries, logsSeries,
@ -284,6 +286,7 @@ export class UnthemedLogs extends PureComponent<Props, State> {
<ExploreGraphNGPanel <ExploreGraphNGPanel
data={logsSeries} data={logsSeries}
height={150} height={150}
width={width}
tooltipDisplayMode={TooltipDisplayMode.Multi} tooltipDisplayMode={TooltipDisplayMode.Multi}
absoluteRange={visibleRange || absoluteRange} absoluteRange={visibleRange || absoluteRange}
timeZone={timeZone} timeZone={timeZone}

3
public/app/features/explore/LogsContainer.tsx
View File

@ -17,6 +17,7 @@ import { LiveTailControls } from './useLiveTailControls';
import { getFieldLinksForExplore } from './utils/links'; import { getFieldLinksForExplore } from './utils/links';
interface LogsContainerProps extends PropsFromRedux { interface LogsContainerProps extends PropsFromRedux {
width: number;
exploreId: ExploreId; exploreId: ExploreId;
scanRange?: RawTimeRange; scanRange?: RawTimeRange;
syncedTimes: boolean; syncedTimes: boolean;
@ -74,6 +75,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
visibleRange, visibleRange,
scanning, scanning,
range, range,
width,
isLive, isLive,
exploreId, exploreId,
addResultsToCache, addResultsToCache,
@ -119,6 +121,7 @@ export class LogsContainer extends PureComponent<LogsContainerProps> {
logsMeta={logsMeta} logsMeta={logsMeta}
logsSeries={logsSeries} logsSeries={logsSeries}
logsQueries={logsQueries} logsQueries={logsQueries}
width={width}
highlighterExpressions={logsHighlighterExpressions} highlighterExpressions={logsHighlighterExpressions}
loading={loading} loading={loading}
onChangeTime={this.onChangeTime} onChangeTime={this.onChangeTime}