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

Inspect: Use AutoSizer for managing width for content in tabs. (#21511)

Browse Source 
* wrap content in autosizer

* replace lib

* removing react-virtualized, correct type in editor.ts

* remove caret

* remove dep from grafana/ui and remove story util
This commit is contained in:
Peter Holmberg
2020-01-16 11:11:33 +01:00
committed by GitHub
parent 18fda3b8b4
commit 43dbbe51f0
8 changed files with 39 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/app/features/dashboard/components/Inspector/PanelInspector.tsx
View File

@@ -1,4 +1,5 @@
import React, { PureComponent } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
import { JSONFormatter, Drawer, Select, Table, TabsBar, Tab, TabContent } from '@grafana/ui';
@@ -106,7 +107,7 @@ export class PanelInspector extends PureComponent<Props, State> {
return <metaDS.components.MetadataInspector datasource={metaDS} data={data} />;
}
renderDataTab() {
renderDataTab(width: number) {
const { data, selected } = this.state;
if (!data || !data.length) {
return <div>No Data</div>;
@@ -140,7 +141,7 @@ export class PanelInspector extends PureComponent<Props, State> {
</div>
)}
<Table width={330} height={400} data={processed[selected]} />
<Table width={width} height={400} data={processed[selected]} />
</div>
);
}
@@ -174,17 +175,28 @@ export class PanelInspector extends PureComponent<Props, State> {
})}
</TabsBar>
<TabContent>
{tab === InspectTab.Data && this.renderDataTab()}
<AutoSizer disableHeight>
{({ width }) => {
if (width === 0) {
return null;
}
return (
<div style={{ width }}>
{tab === InspectTab.Data && this.renderDataTab(width)}
{tab === InspectTab.Meta && this.renderMetadataInspector()}
{tab === InspectTab.Meta && this.renderMetadataInspector()}
{tab === InspectTab.Issue && this.renderIssueTab()}
{tab === InspectTab.Issue && this.renderIssueTab()}
{tab === InspectTab.Raw && (
<div>
<JSONFormatter json={last} open={2} />
</div>
)}
{tab === InspectTab.Raw && (
<div>
<JSONFormatter json={last} open={2} />
</div>
)}
</div>
);
}}
</AutoSizer>
</TabContent>
</Drawer>
);