Merge pull request #14039 from grafana/minor-react-panels-refactor

minor react panels refafactor

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

@@ -128,7 +128,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     return (
     return (
       <div className={containerClass}>
       <div className={containerClass}>
         <div className={panelWrapperClass}>
         <div className={panelWrapperClass}>
-          <PanelChrome component={plugin.exports.PanelComponent} panel={panel} dashboard={dashboard} />
+          <PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
         </div>
         </div>
         {panel.isEditing && (
         {panel.isEditing && (
           <PanelEditor panel={panel} plugin={plugin} dashboard={dashboard} onTypeChanged={this.onPluginTypeChanged} />
           <PanelEditor panel={panel} plugin={plugin} dashboard={dashboard} onTypeChanged={this.onPluginTypeChanged} />
@@ -151,7 +151,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     }
     }
 
 
     // if exporting PanelComponent it must be a react panel
     // if exporting PanelComponent it must be a react panel
-    if (plugin.exports.PanelComponent) {
+    if (plugin.exports.Panel) {
       return this.renderReactPanel();
       return this.renderReactPanel();
     }
     }
 
 

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

@@ -14,8 +14,8 @@ class PanelPluginNotFound extends PureComponent<Props> {
   render() {
   render() {
     const style = {
     const style = {
       display: 'flex',
       display: 'flex',
-      'align-items': 'center',
-      'text-align': 'center',
+      alignItems: 'center',
+      textAlign: 'center' as 'center',
       height: '100%',
       height: '100%',
     };
     };
 
 
@@ -58,7 +58,7 @@ export function getPanelPluginNotFound(id: string): PanelPlugin {
     },
     },
 
 
     exports: {
     exports: {
-      PanelComponent: NotFound,
+      Panel: NotFound,
     },
     },
   };
   };
 }
 }

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

@@ -21,10 +21,10 @@ export class VisualizationTab extends PureComponent<Props> {
 
 
   renderPanelOptions() {
   renderPanelOptions() {
     const { plugin, panel } = this.props;
     const { plugin, panel } = this.props;
-    const { PanelOptionsComponent } = plugin.exports;
+    const { PanelOptions } = plugin.exports;
 
 
-    if (PanelOptionsComponent) {
-      return <PanelOptionsComponent options={panel.getOptions()} onChange={this.onPanelOptionsChanged} />;
+    if (PanelOptions) {
+      return <PanelOptions options={panel.getOptions()} onChange={this.onPanelOptionsChanged} />;
     } else {
     } else {
       return <p>Visualization has no options</p>;
       return <p>Visualization has no options</p>;
     }
     }

public/app/viz/GaugeOptions.tsx → public/app/plugins/panel/gauge/GaugeOptions.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import { PanelOptionsProps } from '../types';
+import { PanelOptionsProps } from 'app/types';
 
 
 interface Props {}
 interface Props {}
 
 

public/app/plugins/panel/gauge/module.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
 import Gauge from 'app/viz/Gauge';
 import { NullValueMode, PanelProps } from 'app/types';
 import { NullValueMode, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import { GaugeOptions } from './GaugeOptions';
 
 
 export interface Options {}
 export interface Options {}
 
 
@@ -20,4 +21,4 @@ export class GaugePanel extends PureComponent<Props> {
   }
   }
 }
 }
 
 
-export { GaugePanel as PanelComponent };
+export { GaugePanel as Panel, GaugeOptions as PanelOptions };

public/app/plugins/panel/graph2/module.tsx

@@ -87,4 +87,4 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
   }
   }
 }
 }
 
 
-export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent };
+export { Graph2 as Panel, GraphOptions as PanelOptions };

public/app/plugins/panel/graph2/plugin.json

@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
       "url": "https://grafana.com"
     },
     },
     "logos": {
     "logos": {
-      "small": "img/icn-text-panel.svg",
-      "large": "img/icn-text-panel.svg"
+      "small": "img/icn-graph-panel.svg",
+      "large": "img/icn-graph-panel.svg"
     }
     }
   }
   }
 }
 }

public/app/plugins/panel/text2/module.tsx

@@ -11,4 +11,4 @@ export class Text2 extends PureComponent<PanelProps> {
   }
   }
 }
 }
 
 
-export { Text2 as PanelComponent };
+export { Text2 as Panel };

public/app/plugins/panel/text2/plugin.json

@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
       "url": "https://grafana.com"
     },
     },
     "logos": {
     "logos": {
-      "small": "img/icn-graph-panel.svg",
-      "large": "img/icn-graph-panel.svg"
+      "small": "img/icn-text-panel.svg",
+      "large": "img/icn-text-panel.svg"
     }
     }
   }
   }
 }
 }

public/app/types/panel.ts

@@ -13,6 +13,11 @@ export interface PanelOptionsProps<T = any> {
   onChange: (options: T) => void;
   onChange: (options: T) => void;
 }
 }
 
 
+export interface PanelSize {
+  width: number;
+  height: number;
+}
+
 export interface PanelMenuItem {
 export interface PanelMenuItem {
   type?: 'submenu' | 'divider';
   type?: 'submenu' | 'divider';
   text?: string;
   text?: string;

public/app/types/plugins.ts

@@ -11,8 +11,8 @@ export interface PluginExports {
 
 
   // Panel plugin
   // Panel plugin
   PanelCtrl?;
   PanelCtrl?;
-  PanelComponent?: ComponentClass<PanelProps>;
-  PanelOptionsComponent?: ComponentClass<PanelOptionsProps>;
+  Panel?: ComponentClass<PanelProps>;
+  PanelOptions?: ComponentClass<PanelOptionsProps>;
 }
 }
 
 
 export interface PanelPlugin {
 export interface PanelPlugin {