Merge pull request #14343 from grafana/develop-14333

Update react panel header when changing angular panel settings 

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -83,8 +83,9 @@ export class PanelChrome extends PureComponent<Props, State> {
     const { panel, dashboard, plugin } = this.props;
     const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state;
 
-    const { datasource, targets } = panel;
+    const { datasource, targets, transparent } = panel;
     const PanelComponent = plugin.exports.Panel;
+    const containerClassNames = `panel-container panel-container--absolute ${transparent ? 'panel-transparent' : ''}`;
 
     return (
       <AutoSizer>
@@ -94,8 +95,17 @@ export class PanelChrome extends PureComponent<Props, State> {
           }
 
           return (
-            <div className="panel-container panel-container--absolute">
-              <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
+            <div className={containerClassNames}>
+              <PanelHeader
+                panel={panel}
+                dashboard={dashboard}
+                timeInfo={timeInfo}
+                title={panel.title}
+                description={panel.description}
+                scopedVars={panel.scopedVars}
+                links={panel.links}
+              />
+
               <DataPanel
                 datasource={datasource}
                 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 PanelHeaderCorner from './PanelHeaderCorner';
@@ -12,13 +12,17 @@ export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
   timeInfo: string;
+  title?: string;
+  description?: string;
+  scopedVars?: string;
+  links?: [];
 }
 
 interface State {
   panelMenuOpen: boolean;
 }
 
-export class PanelHeader extends PureComponent<Props, State> {
+export class PanelHeader extends Component<Props, State> {
   state = {
     panelMenuOpen: false,
   };
@@ -44,7 +48,13 @@ export class PanelHeader extends PureComponent<Props, State> {
     const { panel, dashboard, timeInfo } = this.props;
     return (
       <>
-        <PanelHeaderCorner panel={panel} />
+        <PanelHeaderCorner
+          panel={panel}
+          title={panel.title}
+          description={panel.description}
+          scopedVars={panel.scopedVars}
+          links={panel.links}
+        />
         <div className={panelHeaderClass}>
           {isLoading && (
             <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 Tooltip from 'app/core/components/Tooltip/Tooltip';
 import templateSrv from 'app/features/templating/template_srv';
@@ -14,9 +14,13 @@ enum InfoModes {
 
 interface Props {
   panel: PanelModel;
+  title?: string;
+  description?: string;
+  scopedVars?: string;
+  links?: [];
 }
 
-export class PanelHeaderCorner extends PureComponent<Props> {
+export class PanelHeaderCorner extends Component<Props> {
   timeSrv: TimeSrv = getTimeSrv();
 
   getInfoMode = () => {

public/app/features/dashboard/panel_model.ts

@@ -53,6 +53,7 @@ const mustKeepProps: { [str: string]: boolean } = {
   cacheTimeout: true,
   nullPointMode: true,
   cachedPluginOptions: true,
+  transparent: true,
 };
 
 const defaults: any = {
@@ -60,6 +61,7 @@ const defaults: any = {
   datasource: null,
   targets: [{}],
   cachedPluginOptions: {},
+  transparent: false,
 };
 
 export class PanelModel {
@@ -91,6 +93,7 @@ export class PanelModel {
   interval?: string;
   description?: string;
   links?: [];
+  transparent: boolean;
 
   // non persisted
   fullscreen: boolean;

public/app/features/dashboard/panellinks/link_srv.ts

@@ -73,6 +73,7 @@ export class LinkSrv {
 
   getPanelLinkAnchorInfo(link, scopedVars) {
     const info: any = {};
+    info.target = link.targetBlank ? '_blank' : '';
     if (link.type === 'absolute') {
       info.target = link.targetBlank ? '_blank' : '_self';
       info.href = this.templateSrv.replace(link.url || '', scopedVars);
@@ -80,11 +81,9 @@ export class LinkSrv {
     } else if (link.url) {
       info.href = link.url;
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
-      info.target = link.targetBlank ? '_blank' : '';
     } else if (link.dashUri) {
       info.href = 'dashboard/' + link.dashUri + '?';
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
-      info.target = link.targetBlank ? '_blank' : '';
     } else {
       info.title = this.templateSrv.replace(link.title || '', scopedVars);
       const slug = kbn.slugifyForUrl(link.dashboard || '');

public/app/features/panel/GeneralTabCtrl.ts

 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 {
   panelCtrl: any;
 
   /** @ngInject */
   constructor($scope) {
     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 @@
 		<h5 class="section-heading">Info</h5>
 		<div class="gf-form">
 			<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 class="gf-form gf-form--v-stretch">
 			<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>
     <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>