Skip to content

N
nexpie-grafana-theme
Commit b8b468f7 by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #14343 from grafana/develop-14333 

Update react panel header when changing angular panel settings
parents 260d0189 8460b48c
Showing with 62 additions and 12 deletions
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -83,8 +83,9 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -83,8 +83,9 @@ export class PanelChrome extends PureComponent<Props, State> {
const { panel, dashboard, plugin } = this.props; const { panel, dashboard, plugin } = this.props;
const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state; const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
const { datasource, targets } = panel; const { datasource, targets, transparent } = panel;
const PanelComponent = plugin.exports.Panel; const PanelComponent = plugin.exports.Panel;
const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
return ( return (
<AutoSizer> <AutoSizer>
...@@ -94,8 +95,17 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -94,8 +95,17 @@ export class PanelChrome extends PureComponent<Props, State> {
} }
return ( return (
<div className="panel-container panel-container--absolute"> <div className={containerClassNames}>
<PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} /> <PanelHeader
panel={panel}
dashboard={dashboard}
timeInfo={timeInfo}
title={panel.title}
description={panel.description}
scopedVars={panel.scopedVars}
links={panel.links}
/>
<DataPanel <DataPanel
datasource={datasource} datasource={datasource}
queries={targets} queries={targets}
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
import React, { PureComponent } from 'react'; import React, { Component } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import PanelHeaderCorner from './PanelHeaderCorner'; import PanelHeaderCorner from './PanelHeaderCorner';
...@@ -12,13 +12,17 @@ export interface Props { ...@@ -12,13 +12,17 @@ export interface Props {
panel: PanelModel; panel: PanelModel;
dashboard: DashboardModel; dashboard: DashboardModel;
timeInfo: string; timeInfo: string;
title?: string;
description?: string;
scopedVars?: string;
links?: [];
} }
interface State { interface State {
panelMenuOpen: boolean; panelMenuOpen: boolean;
} }
export class PanelHeader extends PureComponent<Props, State> { export class PanelHeader extends Component<Props, State> {
state = { state = {
panelMenuOpen: false, panelMenuOpen: false,
}; };
...@@ -44,7 +48,13 @@ export class PanelHeader extends PureComponent<Props, State> { ...@@ -44,7 +48,13 @@ export class PanelHeader extends PureComponent<Props, State> {
const { panel, dashboard, timeInfo } = this.props; const { panel, dashboard, timeInfo } = this.props;
return ( return (
<> <>
<PanelHeaderCorner panel={panel} /> <PanelHeaderCorner
panel={panel}
title={panel.title}
description={panel.description}
scopedVars={panel.scopedVars}
links={panel.links}
/>
<div className={panelHeaderClass}> <div className={panelHeaderClass}>
{isLoading && ( {isLoading && (
<span className="panel-loading"> <span className="panel-loading">
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
import React, { PureComponent } from 'react'; import React, { Component } from 'react';
import { PanelModel } from 'app/features/dashboard/panel_model'; import { PanelModel } from 'app/features/dashboard/panel_model';
import Tooltip from 'app/core/components/Tooltip/Tooltip'; import Tooltip from 'app/core/components/Tooltip/Tooltip';
import templateSrv from 'app/features/templating/template_srv'; import templateSrv from 'app/features/templating/template_srv';
...@@ -14,9 +14,13 @@ enum InfoModes { ...@@ -14,9 +14,13 @@ enum InfoModes {
interface Props { interface Props {
panel: PanelModel; panel: PanelModel;
title?: string;
description?: string;
scopedVars?: string;
links?: [];
} }
export class PanelHeaderCorner extends PureComponent<Props> { export class PanelHeaderCorner extends Component<Props> {
timeSrv: TimeSrv = getTimeSrv(); timeSrv: TimeSrv = getTimeSrv();
getInfoMode = () => { getInfoMode = () => {
......
public/app/features/dashboard/panel_model.ts
...@@ -53,6 +53,7 @@ const mustKeepProps: { [str: string]: boolean } = { ...@@ -53,6 +53,7 @@ const mustKeepProps: { [str: string]: boolean } = {
cacheTimeout: true, cacheTimeout: true,
nullPointMode: true, nullPointMode: true,
cachedPluginOptions: true, cachedPluginOptions: true,
transparent: true,
}; };
const defaults: any = { const defaults: any = {
...@@ -60,6 +61,7 @@ const defaults: any = { ...@@ -60,6 +61,7 @@ const defaults: any = {
datasource: null, datasource: null,
targets: [{}], targets: [{}],
cachedPluginOptions: {}, cachedPluginOptions: {},
transparent: false,
}; };
export class PanelModel { export class PanelModel {
...@@ -91,6 +93,7 @@ export class PanelModel { ...@@ -91,6 +93,7 @@ export class PanelModel {
interval?: string; interval?: string;
description?: string; description?: string;
links?: []; links?: [];
transparent: boolean;
// non persisted // non persisted
fullscreen: boolean; fullscreen: boolean;
......
public/app/features/dashboard/panellinks/link_srv.ts
...@@ -73,6 +73,7 @@ export class LinkSrv { ...@@ -73,6 +73,7 @@ export class LinkSrv {
getPanelLinkAnchorInfo(link, scopedVars) { getPanelLinkAnchorInfo(link, scopedVars) {
const info: any = {}; const info: any = {};
info.target = link.targetBlank ? '_blank' : '';
if (link.type === 'absolute') { if (link.type === 'absolute') {
info.target = link.targetBlank ? '_blank' : '_self'; info.target = link.targetBlank ? '_blank' : '_self';
info.href = this.templateSrv.replace(link.url || '', scopedVars); info.href = this.templateSrv.replace(link.url || '', scopedVars);
...@@ -80,11 +81,9 @@ export class LinkSrv { ...@@ -80,11 +81,9 @@ export class LinkSrv {
} else if (link.url) { } else if (link.url) {
info.href = link.url; info.href = link.url;
info.title = this.templateSrv.replace(link.title || '', scopedVars); info.title = this.templateSrv.replace(link.title || '', scopedVars);
info.target = link.targetBlank ? '_blank' : '';
} else if (link.dashUri) { } else if (link.dashUri) {
info.href = 'dashboard/' + link.dashUri + '?'; info.href = 'dashboard/' + link.dashUri + '?';
info.title = this.templateSrv.replace(link.title || '', scopedVars); info.title = this.templateSrv.replace(link.title || '', scopedVars);
info.target = link.targetBlank ? '_blank' : '';
} else { } else {
info.title = this.templateSrv.replace(link.title || '', scopedVars); info.title = this.templateSrv.replace(link.title || '', scopedVars);
const slug = kbn.slugifyForUrl(link.dashboard || ''); const slug = kbn.slugifyForUrl(link.dashboard || '');
......
public/app/features/panel/GeneralTabCtrl.ts
import coreModule from 'app/core/core_module'; import coreModule from 'app/core/core_module';
const obj2string = obj => {
return Object.keys(obj)
.reduce((acc, curr) => acc.concat(curr + '=' + obj[curr]), [])
.join();
};
export class GeneralTabCtrl { export class GeneralTabCtrl {
panelCtrl: any; panelCtrl: any;
/** @ngInject */ /** @ngInject */
constructor($scope) { constructor($scope) {
this.panelCtrl = $scope.ctrl; this.panelCtrl = $scope.ctrl;
const updatePanel = () => {
console.log('panel.render()');
this.panelCtrl.panel.render();
};
const generateValueFromPanel = scope => {
const { panel } = scope.ctrl;
const panelPropsToTrack = ['title', 'description', 'transparent', 'repeat', 'repeatDirection', 'minSpan'];
const panelPropsString = panelPropsToTrack
.map(prop => prop + '=' + (panel[prop] && panel[prop].toString ? panel[prop].toString() : panel[prop]))
.join();
const panelLinks = panel.links;
const panelLinksString = panelLinks.map(obj2string).join();
return panelPropsString + panelLinksString;
};
$scope.$watch(generateValueFromPanel, updatePanel, true);
} }
} }
......
public/app/features/panel/partials/general_tab.html
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<h5 class="section-heading">Info</h5> <h5 class="section-heading">Info</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Title</span> <span class="gf-form-label width-7">Title</span>
<input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title'></input> <input type="text" class="gf-form-input width-25" ng-model='ctrl.panel.title' ng-model-onblur></input>
</div> </div>
<div class="gf-form gf-form--v-stretch"> <div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span> <span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" placeholder="Panel description, supports markdown & links"></textarea> <textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.panel.description" ng-model-onblur placeholder="Panel description, supports markdown & links"></textarea>
</div> </div>
<gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch> <gf-form-switch class="gf-form" label-class="width-7" switch-class="max-width-6" label="Transparent" checked="ctrl.panel.transparent" on-change="ctrl.render()"></gf-form-switch>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment