From 43dbbe51f0e05e87e684700c28034d16014d917f Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 16 Jan 2020 11:11:33 +0100 Subject: [PATCH] Inspect: Use AutoSizer for managing width for content in tabs. (#21511) * 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 --- package.json | 4 +-- packages/grafana-ui/package.json | 1 - .../src/utils/storybook/withFullSizeStory.tsx | 24 -------------- .../components/Inspector/PanelInspector.tsx | 32 +++++++++++++------ .../dashboard/dashgrid/DashboardPanel.tsx | 2 +- public/app/features/explore/Explore.tsx | 2 +- public/app/plugins/panel/table/editor.ts | 4 +-- yarn.lock | 30 +++++++---------- 8 files changed, 39 insertions(+), 60 deletions(-) delete mode 100644 packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx diff --git a/package.json b/package.json index a9ddda7a261..8c114312862 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 4251ad2ac74..ecb845e1a2c 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -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" }, diff --git a/packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx b/packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx deleted file mode 100644 index 98c3ccb2e7f..00000000000 --- a/packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx +++ /dev/null @@ -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, props: any) => ( -
- - {({ width, height }) => ( - <> - {React.createElement(component, { - ...props, - width, - height, - })} - - )} - -
-); diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx index 1d099294b2a..53c1a3b1d9b 100644 --- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx +++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx @@ -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 { return ; } - renderDataTab() { + renderDataTab(width: number) { const { data, selected } = this.state; if (!data || !data.length) { return
No Data
; @@ -140,7 +141,7 @@ export class PanelInspector extends PureComponent { )} - +
); } @@ -174,17 +175,28 @@ export class PanelInspector extends PureComponent { })} - {tab === InspectTab.Data && this.renderDataTab()} + + {({ width }) => { + if (width === 0) { + return null; + } + return ( +
+ {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 && ( -
- -
- )} + {tab === InspectTab.Raw && ( +
+ +
+ )} +
+ ); + }} + ); diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index b2749b60460..41baaad41e6 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -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; diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 22af9e30c16..c1f18d6ea87 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -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 diff --git a/public/app/plugins/panel/table/editor.ts b/public/app/plugins/panel/table/editor.ts index ac11311af94..766f3ce11d7 100644 --- a/public/app/plugins/panel/table/editor.ts +++ b/public/app/plugins/panel/table/editor.ts @@ -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(); } diff --git a/yarn.lock b/yarn.lock index 276d2715d24..2e2159a4c55 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"