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

Fixed add panel should scroll to top

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-02-05 12:56:03 +01:00
parent fd1ef0a2be
commit bbc5dff7bd
2 changed files with 77 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/features/dashboard/components/DashNav/DashNav.tsx
View File

@ -23,6 +23,7 @@ export interface Props {
isFullscreen: boolean;
$injector: any;
updateLocation: typeof updateLocation;
onAddPanel: () => void;
}
export class DashNav extends PureComponent<Props> {
@ -39,7 +40,8 @@ export class DashNav extends PureComponent<Props> {
componentDidMount() {
const loader = getAngularLoader();
const template = '<gf-time-picker class="gf-timepicker-nav" dashboard="dashboard" ng-if="!dashboard.timepicker.hidden" />';
const template =
'<gf-time-picker class="gf-timepicker-nav" dashboard="dashboard" ng-if="!dashboard.timepicker.hidden" />';
const scopeProps = { dashboard: this.props.dashboard };
this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template);
@ -55,21 +57,6 @@ export class DashNav extends PureComponent<Props> {
appEvents.emit('show-dash-search');
};
onAddPanel = () => {
const { dashboard } = this.props;
// Return if the "Add panel" exists already
if (dashboard.panels.length > 0 && dashboard.panels[0].type === 'add-panel') {
return;
}
dashboard.addPanel({
type: 'add-panel',
gridPos: { x: 0, y: 0, w: 12, h: 8 },
title: 'Panel Title',
});
};
onClose = () => {
if (this.props.editview) {
this.props.updateLocation({
@ -137,7 +124,7 @@ export class DashNav extends PureComponent<Props> {
};
render() {
const { dashboard, isFullscreen, editview } = this.props;
const { dashboard, isFullscreen, editview, onAddPanel } = this.props;
const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
const { snapshot } = dashboard;
@ -186,7 +173,7 @@ export class DashNav extends PureComponent<Props> {
tooltip="Add panel"
classSuffix="add-panel"
icon="gicon gicon-add-panel"
onClick={this.onAddPanel}
onClick={onAddPanel}
/>
)}

31
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -178,25 +178,23 @@ export class DashboardPage extends PureComponent<Props, State> {
this.setState({ scrollTop: target.scrollTop });
};
renderDashboard() {
const { dashboard, editview } = this.props;
const { isEditing, isFullscreen } = this.state;
onAddPanel = () => {
const { dashboard } = this.props;
const classes = classNames({
'dashboard-container': true,
'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
// Return if the "Add panel" exists already
if (dashboard.panels.length > 0 && dashboard.panels[0].type === 'add-panel') {
return;
}
dashboard.addPanel({
type: 'add-panel',
gridPos: { x: 0, y: 0, w: 12, h: 8 },
title: 'Panel Title',
});
return (
<div className="scroll-canvas scroll-canvas--dashboard">
{dashboard && editview && <DashboardSettings dashboard={dashboard} />}
<div className={classes}>
<DashboardGrid dashboard={dashboard} isEditing={isEditing} isFullscreen={isFullscreen} />
</div>
</div>
);
}
// scroll to top after adding panel
this.setState({ scrollTop: 0 });
};
render() {
const { dashboard, editview, $injector } = this.props;
@ -224,6 +222,7 @@ export class DashboardPage extends PureComponent<Props, State> {
isFullscreen={isFullscreen}
editview={editview}
$injector={$injector}
onAddPanel={this.onAddPanel}
/>
<div className="scroll-canvas scroll-canvas--dashboard">
<CustomScrollbar autoHeightMin={'100%'} setScrollTop={this.setScrollTop} scrollTop={scrollTop}>