opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-27 04:23:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed dashboard row title not updating when variable changed, fixes #15133

Browse Source
This commit is contained in:
Torkel Ödegaard
2019-02-01 06:38:59 +01:00
parent e54689a964
commit ac0140d596
3 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
View File

@ -18,13 +18,18 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
collapsed: this.props.panel.collapsed, collapsed: this.props.panel.collapsed,
}; };
this.toggle = this.toggle.bind(this); appEvents.on('template-variable-value-updated', this.onVariableUpdated);
this.openSettings = this.openSettings.bind(this);
this.delete = this.delete.bind(this);
this.update = this.update.bind(this);
} }
toggle() { componentWillUnmount() {
appEvents.off('template-variable-value-updated', this.onVariableUpdated);
}
onVariableUpdated = () => {
this.forceUpdate();
}
onToggle = () => {
this.props.dashboard.toggleRow(this.props.panel); this.props.dashboard.toggleRow(this.props.panel);
this.setState(prevState => { this.setState(prevState => {
@ -32,23 +37,23 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
}); });
} }
update() { onUpdate = () => {
this.props.dashboard.processRepeats(); this.props.dashboard.processRepeats();
this.forceUpdate(); this.forceUpdate();
} }
openSettings() { onOpenSettings = () => {
appEvents.emit('show-modal', { appEvents.emit('show-modal', {
templateHtml: `<row-options row="model.row" on-updated="model.onUpdated()" dismiss="dismiss()"></row-options>`, templateHtml: `<row-options row="model.row" on-updated="model.onUpdated()" dismiss="dismiss()"></row-options>`,
modalClass: 'modal--narrow', modalClass: 'modal--narrow',
model: { model: {
row: this.props.panel, row: this.props.panel,
onUpdated: this.update.bind(this), onUpdated: this.onUpdate,
}, },
}); });
} }
delete() { onDelete = () => {
appEvents.emit('confirm-modal', { appEvents.emit('confirm-modal', {
title: 'Delete Row', title: 'Delete Row',
text: 'Are you sure you want to remove this row and all its panels?', text: 'Are you sure you want to remove this row and all its panels?',
@ -81,7 +86,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
return ( return (
<div className={classes}> <div className={classes}>
<a className="dashboard-row__title pointer" onClick={this.toggle}> <a className="dashboard-row__title pointer" onClick={this.onToggle}>
<i className={chevronClass} /> <i className={chevronClass} />
{title} {title}
<span className="dashboard-row__panel_count"> <span className="dashboard-row__panel_count">
@ -90,16 +95,16 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
</a> </a>
{canEdit && ( {canEdit && (
<div className="dashboard-row__actions"> <div className="dashboard-row__actions">
<a className="pointer" onClick={this.openSettings}> <a className="pointer" onClick={this.onOpenSettings}>
<i className="fa fa-cog" /> <i className="fa fa-cog" />
</a> </a>
<a className="pointer" onClick={this.delete}> <a className="pointer" onClick={this.onDelete}>
<i className="fa fa-trash" /> <i className="fa fa-trash" />
</a> </a>
</div> </div>
)} )}
{this.state.collapsed === true && ( {this.state.collapsed === true && (
<div className="dashboard-row__toggle-target" onClick={this.toggle}> <div className="dashboard-row__toggle-target" onClick={this.onToggle}>
&nbsp; &nbsp;
</div> </div>
)} )}

2
public/sass/_variables.scss
View File

@ -135,7 +135,7 @@ $input-padding-y-sm: 4px !default;
$input-padding-x-lg: 20px !default; $input-padding-x-lg: 20px !default;
$input-padding-y-lg: 10px !default; $input-padding-y-lg: 10px !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; $input-height: 35px !default;
$gf-form-margin: 0.2rem; $gf-form-margin: 0.2rem;
$gf-form-input-height: 35px; $gf-form-input-height: 35px;

2
public/sass/components/_submenu.scss
View File

@ -40,9 +40,9 @@
background-color: $input-bg; background-color: $input-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-radius: $input-border-radius; border-radius: $input-border-radius;
box-sizing: content-box;
display: inline-block; display: inline-block;
color: $text-color; color: $text-color;
height: $gf-form-input-height;
.label-tag { .label-tag {
margin: 0 5px; margin: 0 5px;