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

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

@ -23,6 +23,7 @@ export interface Props {
isFullscreen: boolean; isFullscreen: boolean;
$injector: any; $injector: any;
updateLocation: typeof updateLocation; updateLocation: typeof updateLocation;
onAddPanel: () => void;
} }
export class DashNav extends PureComponent<Props> { export class DashNav extends PureComponent<Props> {
@ -39,7 +40,8 @@ export class DashNav extends PureComponent<Props> {
componentDidMount() { componentDidMount() {
const loader = getAngularLoader(); 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 }; const scopeProps = { dashboard: this.props.dashboard };
this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template); this.timepickerCmp = loader.load(this.timePickerEl, scopeProps, template);
@ -55,21 +57,6 @@ export class DashNav extends PureComponent<Props> {
appEvents.emit('show-dash-search'); 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 = () => { onClose = () => {
if (this.props.editview) { if (this.props.editview) {
this.props.updateLocation({ this.props.updateLocation({
@ -137,7 +124,7 @@ export class DashNav extends PureComponent<Props> {
}; };
render() { render() {
const { dashboard, isFullscreen, editview } = this.props; const { dashboard, isFullscreen, editview, onAddPanel } = this.props;
const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta; const { canStar, canSave, canShare, folderTitle, showSettings, isStarred } = dashboard.meta;
const { snapshot } = dashboard; const { snapshot } = dashboard;
@ -186,73 +173,73 @@ export class DashNav extends PureComponent<Props> {
tooltip="Add panel" tooltip="Add panel"
classSuffix="add-panel" classSuffix="add-panel"
icon="gicon gicon-add-panel" icon="gicon gicon-add-panel"
onClick={this.onAddPanel} onClick={onAddPanel}
/> />
)} )}
{canStar && ( {canStar && (
<DashNavButton <DashNavButton
tooltip="Mark as favorite" tooltip="Mark as favorite"
classSuffix="star" classSuffix="star"
icon={`${isStarred ? 'fa fa-star' : 'fa fa-star-o'}`} icon={`${isStarred ? 'fa fa-star' : 'fa fa-star-o'}`}
onClick={this.onStarDashboard} onClick={this.onStarDashboard}
/> />
)} )}
{canShare && ( {canShare && (
<DashNavButton <DashNavButton
tooltip="Share dashboard" tooltip="Share dashboard"
classSuffix="share" classSuffix="share"
icon="fa fa-share-square-o" icon="fa fa-share-square-o"
onClick={this.onOpenShare} onClick={this.onOpenShare}
/> />
)} )}
{canSave && ( {canSave && (
<DashNavButton tooltip="Save dashboard" classSuffix="save" icon="fa fa-save" onClick={this.onSave} /> <DashNavButton tooltip="Save dashboard" classSuffix="save" icon="fa fa-save" onClick={this.onSave} />
)} )}
{snapshotUrl && ( {snapshotUrl && (
<DashNavButton <DashNavButton
tooltip="Open original dashboard" tooltip="Open original dashboard"
classSuffix="snapshot-origin" classSuffix="snapshot-origin"
icon="fa fa-link" icon="fa fa-link"
href={snapshotUrl} href={snapshotUrl}
/> />
)} )}
{showSettings && ( {showSettings && (
<DashNavButton <DashNavButton
tooltip="Dashboard settings" tooltip="Dashboard settings"
classSuffix="settings" classSuffix="settings"
icon="fa fa-cog" icon="fa fa-cog"
onClick={this.onOpenSettings} onClick={this.onOpenSettings}
/> />
)} )}
</div> </div>
<div className="navbar-buttons navbar-buttons--tv"> <div className="navbar-buttons navbar-buttons--tv">
<DashNavButton <DashNavButton
tooltip="Cycke view mode" tooltip="Cycke view mode"
classSuffix="tv" classSuffix="tv"
icon="fa fa-desktop" icon="fa fa-desktop"
onClick={this.onToggleTVMode} onClick={this.onToggleTVMode}
/> />
</div> </div>
<div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} /> <div className="gf-timepicker-nav" ref={element => (this.timePickerEl = element)} />
{(isFullscreen || editview) && ( {(isFullscreen || editview) && (
<div className="navbar-buttons navbar-buttons--close"> <div className="navbar-buttons navbar-buttons--close">
<DashNavButton <DashNavButton
tooltip="Back to dashboard" tooltip="Back to dashboard"
classSuffix="primary" classSuffix="primary"
icon="fa fa-reply" icon="fa fa-reply"
onClick={this.onClose} onClick={this.onClose}
/> />
</div> </div>
)} )}
</div> </div>
); );
} }
} }

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