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

make add panel panel scrollbar adjust when panel/dashboard grid are resized

Browse Source
This commit is contained in:
Marcus Efraimsson 2018-04-18 13:59:26 +02:00
parent 82054e1a3e
commit ce97f89de6
No known key found for this signature in database
GPG Key ID: EBFE0FB04612DD4A
3 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/core/components/ScrollBar/ScrollBar.tsx
View File

@ -54,6 +54,10 @@ export default class ScrollBar extends React.Component<Props, any> {
return false; return false;
} }
update() {
this.scrollbar.update();
}
handleRef = ref => { handleRef = ref => {
this.container = ref; this.container = ref;
}; };

19
public/app/features/dashboard/dashgrid/AddPanelPanel.tsx
View File

@ -22,10 +22,13 @@ export interface AddPanelPanelState {
} }
export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> { export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
private scrollbar: ScrollBar;
constructor(props) { constructor(props) {
super(props); super(props);
this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this); this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
this.renderPanelItem = this.renderPanelItem.bind(this); this.renderPanelItem = this.renderPanelItem.bind(this);
this.panelSizeChanged = this.panelSizeChanged.bind(this);
this.state = { this.state = {
panelPlugins: this.getPanelPlugins(''), panelPlugins: this.getPanelPlugins(''),
@ -35,6 +38,20 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
}; };
} }
componentDidMount() {
this.props.panel.events.on('panel-size-changed', this.panelSizeChanged);
}
componentWillUnmount() {
this.props.panel.events.off('panel-size-changed', this.panelSizeChanged);
}
panelSizeChanged() {
setTimeout(() => {
this.scrollbar.update();
});
}
getPanelPlugins(filter) { getPanelPlugins(filter) {
let panels = _.chain(config.panels) let panels = _.chain(config.panels)
.filter({ hideFromList: false }) .filter({ hideFromList: false })
@ -207,7 +224,7 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
<i className="fa fa-close" /> <i className="fa fa-close" />
</button> </button>
</div> </div>
<ScrollBar className="add-panel__items"> <ScrollBar ref={element => (this.scrollbar = element)} className="add-panel__items">
<div className="add-panel__searchbar"> <div className="add-panel__searchbar">
<label className="gf-form gf-form--grow gf-form--has-input-icon"> <label className="gf-form gf-form--grow gf-form--has-input-icon">
<input <input

3
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@ -140,7 +140,6 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
for (const panel of this.dashboard.panels) { for (const panel of this.dashboard.panels) {
panel.resizeDone(); panel.resizeDone();
} }
this.triggerForceUpdate();
} }
updateGridPos(item, layout) { updateGridPos(item, layout) {
@ -153,13 +152,11 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
onResize(layout, oldItem, newItem) { onResize(layout, oldItem, newItem) {
this.panelMap[newItem.i].updateGridPos(newItem); this.panelMap[newItem.i].updateGridPos(newItem);
this.triggerForceUpdate();
} }
onResizeStop(layout, oldItem, newItem) { onResizeStop(layout, oldItem, newItem) {
this.updateGridPos(newItem, layout); this.updateGridPos(newItem, layout);
this.panelMap[newItem.i].resizeDone(); this.panelMap[newItem.i].resizeDone();
this.triggerForceUpdate();
} }
onDragStop(layout, oldItem, newItem) { onDragStop(layout, oldItem, newItem) {