IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: use GrafanaTheme2 (Explore component) (#37445)

Browse Source 
* Explore: use GrafanaTheme2

* Explore: change width and paneel padding

* Explore: remove the use of stylyesFactory

* Explore: fix failing tests

* Simpify calculation of width for ExploreGraphNGPanel

* Update public/app/features/explore/Explore.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

* Update public/app/features/explore/Explore.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

* Prettified code

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
This commit is contained in:
Olof Bourghardt 2021-08-13 08:02:49 +02:00 committed by GitHub
parent aef67994a1
commit 13a91f791d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/features/explore/Explore.test.tsx
View File

@ -1,11 +1,18 @@
import React from 'react';
import { DataSourceApi, LoadingState, toUtc, DataQueryError, DataQueryRequest, CoreApp } from '@grafana/data';
import {
DataSourceApi,
LoadingState,
toUtc,
DataQueryError,
DataQueryRequest,
CoreApp,
createTheme,
} from '@grafana/data';
import { ExploreId } from 'app/types/explore';
import { shallow } from 'enzyme';
import { Explore, Props } from './Explore';
import { scanStopAction } from './state/query';
import { SecondaryActions } from './SecondaryActions';
import { getTheme } from '@grafana/ui';
const dummyProps: Props = {
logsResult: undefined,
@ -69,7 +76,7 @@ const dummyProps: Props = {
},
},
addQueryRow: jest.fn(),
theme: getTheme(),
theme: createTheme(),
showMetrics: true,
showLogs: true,
showTable: true,

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

@ -6,15 +6,8 @@ import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
import memoizeOne from 'memoize-one';
import { selectors } from '@grafana/e2e-selectors';
import {
ErrorBoundaryAlert,
stylesFactory,
withTheme,
CustomScrollbar,
Collapse,
TooltipDisplayMode,
} from '@grafana/ui';
import { AbsoluteTimeRange, DataQuery, GrafanaTheme, LoadingState, RawTimeRange, DataFrame } from '@grafana/data';
import { ErrorBoundaryAlert, CustomScrollbar, Collapse, TooltipDisplayMode, withTheme2, Themeable2 } from '@grafana/ui';
import { AbsoluteTimeRange, DataQuery, LoadingState, RawTimeRange, DataFrame, GrafanaTheme2 } from '@grafana/data';
import LogsContainer from './LogsContainer';
import QueryRows from './QueryRows';
@ -37,7 +30,7 @@ import { NodeGraphContainer } from './NodeGraphContainer';
import { ResponseErrorContainer } from './ResponseErrorContainer';
import { TraceViewContainer } from './TraceView/TraceViewContainer';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
exploreMain: css`
label: exploreMain;
@ -55,14 +48,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
height: auto !important;
flex: unset !important;
display: unset !important;
padding: ${theme.panelPadding}px;
padding: ${theme.spacing(1)};
`,
};
});
};
export interface ExploreProps {
export interface ExploreProps extends Themeable2 {
exploreId: ExploreId;
theme: GrafanaTheme;
theme: GrafanaTheme2;
}
enum ExploreDrawer {
@ -195,12 +188,13 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
renderGraphPanel(width: number) {
const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading, theme } = this.props;
const spacing = parseInt(theme.spacing(2).slice(0, -2), 10);
return (
<Collapse label="Graph" loading={loading} isOpen>
<ExploreGraphNGPanel
data={graphResult!}
height={400}
width={width - theme.panelPadding * 2}
width={width - spacing}
tooltipDisplayMode={TooltipDisplayMode.Single}
absoluteRange={absoluteRange}
timeZone={timeZone}
@ -226,12 +220,12 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
renderLogsPanel(width: number) {
const { exploreId, syncedTimes, theme } = this.props;
const spacing = parseInt(theme.spacing(2).slice(0, -2), 10);
return (
<LogsContainer
exploreId={exploreId}
syncedTimes={syncedTimes}
width={width - theme.panelPadding * 2}
width={width - spacing}
onClickFilterLabel={this.onClickFilterLabel}
onClickFilterOutLabel={this.onClickFilterOutLabel}
onStartScanning={this.onStartScanning}
@ -413,4 +407,4 @@ const mapDispatchToProps = {
const connector = connect(mapStateToProps, mapDispatchToProps);
export default compose(hot(module), connector, withTheme)(Explore) as React.ComponentType<{ exploreId: ExploreId }>;
export default compose(hot(module), connector, withTheme2)(Explore) as React.ComponentType<{ exploreId: ExploreId }>;