apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/21540/head
Peter Holmberg 5 years ago committed by GitHub
parent 18fda3b8b4
commit 43dbbe51f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 42 additions and 63 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      package.json
  2. 1
      packages/grafana-ui/package.json
  3. 24
      packages/grafana-ui/src/utils/storybook/withFullSizeStory.tsx
  4. 38
      public/app/features/dashboard/components/Inspector/PanelInspector.tsx
  5. 2
      public/app/features/dashboard/dashgrid/DashboardPanel.tsx
  6. 2
      public/app/features/explore/Explore.tsx
  7. 4
      public/app/plugins/panel/table/editor.ts
  8. 30
      yarn.lock

4
package.json
Unescape 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
Unescape 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
Unescape 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>
);

38
public/app/features/dashboard/components/Inspector/PanelInspector.tsx
Unescape 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()}
{tab === InspectTab.Meta && this.renderMetadataInspector()}
{tab === InspectTab.Issue && this.renderIssueTab()}
{tab === InspectTab.Raw && (
<div>
<JSONFormatter json={last} open={2} />
</div>
)}
<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.Issue && this.renderIssueTab()}
{tab === InspectTab.Raw && (
<div>
<JSONFormatter json={last} open={2} />
</div>
)}
</div>
);
}}
</AutoSizer>
</TabContent>
</Drawer>
);

2
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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"

Write Preview
Loading…
Cancel
Save