From 7b805bdb816743a09d59d7a0314e8d50c89a5a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 13 Nov 2018 08:40:42 +0100
Subject: [PATCH] minor react panels refafactor

---
 public/app/features/dashboard/dashgrid/DashboardPanel.tsx   | 4 ++--
 .../app/features/dashboard/dashgrid/PanelPluginNotFound.tsx | 6 +++---
 public/app/features/dashboard/dashgrid/VisualizationTab.tsx | 6 +++---
 public/app/{viz => plugins/panel/gauge}/GaugeOptions.tsx    | 2 +-
 public/app/plugins/panel/gauge/module.tsx                   | 3 ++-
 .../plugins/panel/{text2 => graph2}/img/icn-graph-panel.svg | 0
 public/app/plugins/panel/graph2/module.tsx                  | 2 +-
 public/app/plugins/panel/graph2/plugin.json                 | 4 ++--
 .../plugins/panel/{graph2 => text2}/img/icn-text-panel.svg  | 0
 public/app/plugins/panel/text2/module.tsx                   | 2 +-
 public/app/plugins/panel/text2/plugin.json                  | 4 ++--
 public/app/types/panel.ts                                   | 5 +++++
 public/app/types/plugins.ts                                 | 4 ++--
 13 files changed, 24 insertions(+), 18 deletions(-)
 rename public/app/{viz => plugins/panel/gauge}/GaugeOptions.tsx (87%)
 rename public/app/plugins/panel/{text2 => graph2}/img/icn-graph-panel.svg (100%)
 rename public/app/plugins/panel/{graph2 => text2}/img/icn-text-panel.svg (100%)

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index d5c97a12e90..877d906a080 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -128,7 +128,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     return (
       <div className={containerClass}>
         <div className={panelWrapperClass}>
-          <PanelChrome component={plugin.exports.PanelComponent} panel={panel} dashboard={dashboard} />
+          <PanelChrome component={plugin.exports.Panel} panel={panel} dashboard={dashboard} />
         </div>
         {panel.isEditing && (
           <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 (plugin.exports.PanelComponent) {
+    if (plugin.exports.Panel) {
       return this.renderReactPanel();
     }
 
diff --git a/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
index 0e1a336c16b..82008b10d2f 100644
--- a/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx
@@ -14,8 +14,8 @@ class PanelPluginNotFound extends PureComponent<Props> {
   render() {
     const style = {
       display: 'flex',
-      'align-items': 'center',
-      'text-align': 'center',
+      alignItems: 'center',
+      textAlign: 'center' as 'center',
       height: '100%',
     };
 
@@ -58,7 +58,7 @@ export function getPanelPluginNotFound(id: string): PanelPlugin {
     },
 
     exports: {
-      PanelComponent: NotFound,
+      Panel: NotFound,
     },
   };
 }
diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
index 1bf03bb3b23..8702fab3ae4 100644
--- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
+++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx
@@ -21,10 +21,10 @@ export class VisualizationTab extends PureComponent<Props> {
 
   renderPanelOptions() {
     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 {
       return <p>Visualization has no options</p>;
     }
diff --git a/public/app/viz/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx
similarity index 87%
rename from public/app/viz/GaugeOptions.tsx
rename to public/app/plugins/panel/gauge/GaugeOptions.tsx
index 031855e1c78..23c773f963f 100644
--- a/public/app/viz/GaugeOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { PanelOptionsProps } from '../types';
+import { PanelOptionsProps } from 'app/types';
 
 interface Props {}
 
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 48dc4d809f3..056c9d734bb 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
 import { NullValueMode, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import { GaugeOptions } from './GaugeOptions';
 
 export interface Options {}
 
@@ -20,4 +21,4 @@ export class GaugePanel extends PureComponent<Props> {
   }
 }
 
-export { GaugePanel as PanelComponent };
+export { GaugePanel as Panel, GaugeOptions as PanelOptions };
diff --git a/public/app/plugins/panel/text2/img/icn-graph-panel.svg b/public/app/plugins/panel/graph2/img/icn-graph-panel.svg
similarity index 100%
rename from public/app/plugins/panel/text2/img/icn-graph-panel.svg
rename to public/app/plugins/panel/graph2/img/icn-graph-panel.svg
diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx
index 194f07823ad..b898d54c984 100644
--- a/public/app/plugins/panel/graph2/module.tsx
+++ b/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 };
diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json
index 2e674ab3557..9cb6a1f78a4 100644
--- a/public/app/plugins/panel/graph2/plugin.json
+++ b/public/app/plugins/panel/graph2/plugin.json
@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
     },
     "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"
     }
   }
 }
diff --git a/public/app/plugins/panel/graph2/img/icn-text-panel.svg b/public/app/plugins/panel/text2/img/icn-text-panel.svg
similarity index 100%
rename from public/app/plugins/panel/graph2/img/icn-text-panel.svg
rename to public/app/plugins/panel/text2/img/icn-text-panel.svg
diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx
index b10dc8b545e..aaca23ccbf0 100644
--- a/public/app/plugins/panel/text2/module.tsx
+++ b/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 };
diff --git a/public/app/plugins/panel/text2/plugin.json b/public/app/plugins/panel/text2/plugin.json
index b1133f65e36..53885dbd0f4 100644
--- a/public/app/plugins/panel/text2/plugin.json
+++ b/public/app/plugins/panel/text2/plugin.json
@@ -11,8 +11,8 @@
       "url": "https://grafana.com"
     },
     "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"
     }
   }
 }
diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts
index e82c3711b06..d70723408b0 100644
--- a/public/app/types/panel.ts
+++ b/public/app/types/panel.ts
@@ -13,6 +13,11 @@ export interface PanelOptionsProps<T = any> {
   onChange: (options: T) => void;
 }
 
+export interface PanelSize {
+  width: number;
+  height: number;
+}
+
 export interface PanelMenuItem {
   type?: 'submenu' | 'divider';
   text?: string;
diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts
index 3875305ea9d..4e598382a9a 100644
--- a/public/app/types/plugins.ts
+++ b/public/app/types/plugins.ts
@@ -11,8 +11,8 @@ export interface PluginExports {
 
   // Panel plugin
   PanelCtrl?;
-  PanelComponent?: ComponentClass<PanelProps>;
-  PanelOptionsComponent?: ComponentClass<PanelOptionsProps>;
+  Panel?: ComponentClass<PanelProps>;
+  PanelOptions?: ComponentClass<PanelOptionsProps>;
 }
 
 export interface PanelPlugin {