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

4
package.json
View File

@@ -48,7 +48,6 @@
"@types/react-select": "2.0.15",
"@types/react-test-renderer": "16.9.0",
"@types/react-transition-group": "2.0.16",
"@types/react-virtualized": "9.18.12",
"@types/react-window": "1.7.0",
"@types/redux-logger": "3.0.7",
"@types/redux-mock-store": "1.0.1",
@@ -207,6 +206,7 @@
"@reduxjs/toolkit": "1.2.1",
"@torkelo/react-select": "2.4.1",
"@types/react-loadable": "5.5.2",
"@types/react-virtualized-auto-sizer": "1.0.0",
"angular": "1.6.9",
"angular-bindonce": "0.3.1",
"angular-native-dragdrop": "1.2.2",
@@ -249,7 +249,7 @@
"react-sizeme": "2.5.2",
"react-transition-group": "2.6.1",
"react-use": "12.8.0",
"react-virtualized": "9.21.0",
"react-virtualized-auto-sizer": "1.0.2",
"react-window": "1.7.1",
"redux": "4.0.4",
"redux-logger": "3.0.6",

1
packages/grafana-ui/package.json
View File

@@ -54,7 +54,6 @@
"react-storybook-addon-props-combinations": "1.1.0",
"react-table": "7.0.0-rc.15",
"react-transition-group": "2.6.1",
"react-virtualized": "9.21.0",
"slate": "0.47.8",
"tinycolor2": "1.4.1"
},

24
packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx
View File

@@ -1,24 +0,0 @@
import React from 'react';
import { AutoSizer } from 'react-virtualized';
/** This will add full size with & height properties */
export const withFullSizeStory = (component: React.ComponentType<any>, props: any) => (
<div
style={{
height: '100vh',
width: '100%',
}}
>
<AutoSizer>
{({ width, height }) => (
<>
{React.createElement(component, {
...props,
width,
height,
})}
</>
)}
</AutoSizer>
</div>
);

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

2
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
View File

@@ -1,6 +1,7 @@
// Libraries
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import AutoSizer from 'react-virtualized-auto-sizer';
// Utils & Services
import { getAngularLoader, AngularComponent } from '@grafana/runtime';
@@ -16,7 +17,6 @@ import { PanelResizer } from './PanelResizer';
// Types
import { PanelModel, DashboardModel } from '../state';
import { PanelPluginMeta, PanelPlugin } from '@grafana/data';
import { AutoSizer } from 'react-virtualized';
export interface Props {
panel: PanelModel;

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

@@ -3,7 +3,7 @@ import React from 'react';
import { hot } from 'react-hot-loader';
import { css } from 'emotion';
import { connect } from 'react-redux';
import { AutoSizer } from 'react-virtualized';
import AutoSizer from 'react-virtualized-auto-sizer';
import memoizeOne from 'memoize-one';
// Services & Utils

4
public/app/plugins/panel/table/editor.ts
View File

@@ -1,6 +1,6 @@
import _ from 'lodash';
import { transformers } from './transformers';
import { Column } from 'react-virtualized';
import { ColumnStyle } from './types';
export class TablePanelEditorCtrl {
panel: any;
@@ -79,7 +79,7 @@ export class TablePanelEditorCtrl {
this.panelCtrl.render();
}
removeColumn(column: Column) {
removeColumn(column: ColumnStyle) {
this.panel.columns = _.without(this.panel.columns, column);
this.panelCtrl.render();
}

30
yarn.lock
View File

@@ -4288,12 +4288,11 @@
dependencies:
"@types/react" "*"
"@types/react-virtualized@9.18.12":
version "9.18.12"
resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.12.tgz#541e65c5e0b4629d6a1c6f339171c7943e016ecb"
integrity sha512-Msdpt9zvYlb5Ul4PA339QUkJ0/z2O+gaFxed1rG+2rZjbe6XdYo7jWfJe206KBnjj84DwPPIbPFQCtoGuNwNTQ==
"@types/react-virtualized-auto-sizer@1.0.0", "@types/react-virtualized-auto-sizer@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272"
integrity sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==
dependencies:
"@types/prop-types" "*"
"@types/react" "*"
"@types/react-wait@^0.3.0":
@@ -6760,7 +6759,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@2.2.6, classnames@2.x, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6:
classnames@2.2.6, classnames@2.x, classnames@^2.2.5, classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -8684,7 +8683,7 @@ dom-css@^2.0.0:
prefix-style "2.0.1"
to-camel-case "1.0.0"
"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.3.1, dom-helpers@^3.4.0:
dom-helpers@^3.3.1, dom-helpers@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
@@ -13815,7 +13814,7 @@ longest@^1.0.1:
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -17973,17 +17972,10 @@ react-use@12.8.0:
ts-easing "^0.2.0"
tslib "^1.10.0"
react-virtualized@9.21.0:
version "9.21.0"
resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506"
integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ==
dependencies:
babel-runtime "^6.26.0"
classnames "^2.2.3"
dom-helpers "^2.4.0 || ^3.0.0"
loose-envify "^1.3.0"
prop-types "^15.6.0"
react-lifecycles-compat "^3.0.4"
react-virtualized-auto-sizer@1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
react-wait@^0.3.0:
version "0.3.0"