From e4e41474b145b1ba9bf155d33fadc80ac73251e0 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 14 Nov 2018 11:06:02 +0100
Subject: [PATCH] first stuff

---
 .../app/core/components/Picker/UnitPicker.tsx | 68 +++++++++++++++++++
 .../features/dashboard/dashgrid/DataPanel.tsx |  6 +-
 .../dashboard/dashgrid/PanelChrome.tsx        |  3 -
 public/app/plugins/panel/gauge/module.tsx     | 18 ++++-
 public/app/viz/GaugeOptions.tsx               | 16 -----
 5 files changed, 85 insertions(+), 26 deletions(-)
 create mode 100644 public/app/core/components/Picker/UnitPicker.tsx
 delete mode 100644 public/app/viz/GaugeOptions.tsx

diff --git a/public/app/core/components/Picker/UnitPicker.tsx b/public/app/core/components/Picker/UnitPicker.tsx
new file mode 100644
index 00000000000..3983f0842c9
--- /dev/null
+++ b/public/app/core/components/Picker/UnitPicker.tsx
@@ -0,0 +1,68 @@
+import React, { PureComponent } from 'react';
+import Select from 'react-select';
+import ResetStyles from 'app/core/components/Picker/ResetStyles';
+import DescriptionOption from './DescriptionOption';
+import kbn from '../../utils/kbn';
+
+interface Props {
+  width: number;
+  className?: string;
+  onSelected: (item: any) => {} | void;
+  placeholder?: string;
+}
+
+export class UnitPicker extends PureComponent<Props> {
+  formatGroupLabel = data => {
+    console.log('format', data);
+
+    const groupStyles = {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    };
+
+    const groupBadgeStyles = {
+      backgroundColor: '#EBECF0',
+      borderRadius: '2em',
+      color: '#172B4D',
+      display: 'inline-block',
+      fontSize: 12,
+      fontWeight: 400,
+      lineHeight: '1',
+      minWidth: 1,
+      padding: '0.16666666666667em 0.5em',
+      textAlign: 'center',
+    } as React.CSSProperties;
+
+    return (
+      <div style={groupStyles}>
+        <span>{data.label}</span>
+        <span style={groupBadgeStyles}>{data.submenu.length}</span>
+      </div>
+    );
+  };
+
+  render() {
+    const { className, onSelected, placeholder, width } = this.props;
+
+    const options = kbn.getUnitFormats();
+
+    return (
+      <Select
+        classNamePrefix="gf-form-select-box"
+        className={`width-${width} gf-form-input gf-form-input--form-dropdown ${className || ''}`}
+        components={{
+          Option: DescriptionOption,
+        }}
+        getOptionLabel={i => i.text}
+        getOptionValue={i => i.value}
+        isSearchable={false}
+        onChange={onSelected}
+        options={options}
+        placeholder={placeholder || 'Choose'}
+        styles={ResetStyles}
+        formatGroupLabel={this.formatGroupLabel}
+      />
+    );
+  }
+}
diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx
index d0122363668..ec8804de7b4 100644
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DataPanel.tsx
@@ -48,10 +48,6 @@ export class DataPanel extends Component<Props, State> {
     };
   }
 
-  componentDidMount() {
-    console.log('DataPanel mount');
-  }
-
   async componentDidUpdate(prevProps: Props) {
     if (!this.hasPropsChanged(prevProps)) {
       return;
@@ -113,7 +109,7 @@ export class DataPanel extends Component<Props, State> {
 
   render() {
     const { response, loading, isFirstLoad } = this.state;
-    console.log('data panel render');
+
     const timeSeries = response.data;
 
     if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index f6fc9028726..dc55fcc358e 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -57,7 +57,6 @@ export class PanelChrome extends PureComponent<Props, State> {
   };
 
   onRender = () => {
-    console.log('onRender');
     this.setState(prevState => ({
       ...prevState,
       renderCounter: this.state.renderCounter + 1,
@@ -75,7 +74,6 @@ export class PanelChrome extends PureComponent<Props, State> {
     const { datasource, targets } = panel;
     const PanelComponent = this.props.component;
 
-    console.log('panelChrome render');
     return (
       <div className="panel-container">
         <PanelHeader panel={panel} dashboard={dashboard} />
@@ -88,7 +86,6 @@ export class PanelChrome extends PureComponent<Props, State> {
             refreshCounter={refreshCounter}
           >
             {({ loading, timeSeries }) => {
-              console.log('panelcrome inner render');
               return (
                 <PanelComponent
                   loading={loading}
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 48dc4d809f3..94158de7738 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
-import { NullValueMode, PanelProps } from 'app/types';
+import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import { UnitPicker } from '../../../core/components/Picker/UnitPicker';
 
 export interface Options {}
 
@@ -20,4 +21,17 @@ export class GaugePanel extends PureComponent<Props> {
   }
 }
 
-export { GaugePanel as PanelComponent };
+export class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
+  render() {
+    return (
+      <div>
+        <div className="section gf-form-group">
+          <h5 className="page-heading">Units</h5>
+          <UnitPicker width={20} onSelected={() => {}} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export { GaugePanel as PanelComponent, GaugeOptions as PanelOptionsComponent };
diff --git a/public/app/viz/GaugeOptions.tsx b/public/app/viz/GaugeOptions.tsx
deleted file mode 100644
index 031855e1c78..00000000000
--- a/public/app/viz/GaugeOptions.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { PureComponent } from 'react';
-import { PanelOptionsProps } from '../types';
-
-interface Props {}
-
-export class GaugeOptions extends PureComponent<PanelOptionsProps<Props>> {
-  render() {
-    return (
-      <div>
-        <div className="section gf-form-group">
-          <h5 className="page-heading">Draw Modes</h5>
-        </div>
-      </div>
-    );
-  }
-}