Panel: Show inspect panel in Drawer instead of Modal (#21148)

This commit is contained in:
Peter Holmberg 2019-12-18 13:57:07 +01:00 committed by GitHub
parent 34c1433ba4
commit 2e60752258
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 11 deletions

View File

@ -4,7 +4,7 @@ import RcDrawer from 'rc-drawer';
import { css } from 'emotion';
import { stylesFactory, useTheme, selectThemeVariant } from '../../themes';
interface Props {
export interface Props {
children: ReactNode;
/** Title shown at the top of the drawer */
title?: string;

View File

@ -110,6 +110,7 @@ export { SlideOutTransition } from './transitions/SlideOutTransition';
export { Segment, SegmentAsync, SegmentInput, SegmentSelect } from './Segment/';
export { default as Chart } from './Chart';
export { Icon } from './Icon/Icon';
export { Drawer } from './Drawer/Drawer';
// Next-gen forms
export { default as Forms } from './Forms';

View File

@ -2,7 +2,7 @@
import React, { PureComponent } from 'react';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { JSONFormatter, Modal } from '@grafana/ui';
import { Drawer, JSONFormatter } from '@grafana/ui';
import { css } from 'emotion';
import { getLocationSrv } from '@grafana/runtime';
@ -11,13 +11,7 @@ interface Props {
panel: PanelModel;
}
interface State {}
export class PanelInspector extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
}
export class PanelInspector extends PureComponent<Props> {
onDismiss = () => {
getLocationSrv().update({
query: { inspect: null },
@ -39,11 +33,11 @@ export class PanelInspector extends PureComponent<Props, State> {
// TODO? should we get the result with an observable once?
const data = (panel.getQueryRunner() as any).lastResult;
return (
<Modal title={panel.title} icon="info-circle" onDismiss={this.onDismiss} isOpen={true}>
<Drawer title={panel.title} onClose={this.onDismiss}>
<div className={bodyStyle}>
<JSONFormatter json={data} open={2} />
</div>
</Modal>
</Drawer>
);
}
}