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 1/9] 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>
-    );
-  }
-}

From 063a1acf9438dbfe7511c812105682630510b5f5 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Wed, 14 Nov 2018 17:00:26 +0100
Subject: [PATCH 2/9] started on options and groups

---
 .../app/core/components/Picker/UnitPicker.tsx |  45 +-
 public/app/core/utils/kbn.ts                  | 424 +++++++++---------
 public/app/plugins/panel/gauge/module.tsx     |   2 +-
 3 files changed, 239 insertions(+), 232 deletions(-)

diff --git a/public/app/core/components/Picker/UnitPicker.tsx b/public/app/core/components/Picker/UnitPicker.tsx
index 3983f0842c9..54bfb2e208f 100644
--- a/public/app/core/components/Picker/UnitPicker.tsx
+++ b/public/app/core/components/Picker/UnitPicker.tsx
@@ -1,25 +1,22 @@
 import React, { PureComponent } from 'react';
-import Select from 'react-select';
+import Select, { components } 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 = {
+      margin: '0 15px',
+      fontSize: '16px',
+      fontWeight: 700,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
-    };
+    } as React.CSSProperties;
 
     const groupBadgeStyles = {
       backgroundColor: '#EBECF0',
@@ -37,29 +34,39 @@ export class UnitPicker extends PureComponent<Props> {
     return (
       <div style={groupStyles}>
         <span>{data.label}</span>
-        <span style={groupBadgeStyles}>{data.submenu.length}</span>
+        <span style={groupBadgeStyles}>{data.options.length}</span>
       </div>
     );
   };
 
-  render() {
-    const { className, onSelected, placeholder, width } = this.props;
+  renderOption = props => {
+    return (
+      <components.Option {...props}>
+        <div className="description-picker-option__button btn btn-link">
+          <div className="gf-form">{props.children}</div>
+        </div>
+      </components.Option>
+    );
+  };
 
+  renderGroup = props => {
+    return <components.Group {...props} />;
+  };
+
+  render() {
     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}
+        className="width-20 gf-form-input"
         isSearchable={false}
-        onChange={onSelected}
         options={options}
-        placeholder={placeholder || 'Choose'}
+        placeholder="Choose"
+        components={{
+          Option: this.renderOption,
+          Group: this.renderGroup,
+        }}
         styles={ResetStyles}
         formatGroupLabel={this.formatGroupLabel}
       />
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index 398ad9bb3e7..11d8a51f61d 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -905,284 +905,284 @@ kbn.valueFormats.dateTimeFromNow = (epoch, isUtc) => {
 kbn.getUnitFormats = () => {
   return [
     {
-      text: 'none',
-      submenu: [
-        { text: 'none', value: 'none' },
-        { text: 'short', value: 'short' },
-        { text: 'percent (0-100)', value: 'percent' },
-        { text: 'percent (0.0-1.0)', value: 'percentunit' },
-        { text: 'Humidity (%H)', value: 'humidity' },
-        { text: 'decibel', value: 'dB' },
-        { text: 'hexadecimal (0x)', value: 'hex0x' },
-        { text: 'hexadecimal', value: 'hex' },
-        { text: 'scientific notation', value: 'sci' },
-        { text: 'locale format', value: 'locale' },
+      label: 'none',
+      options: [
+        { label: 'none', value: 'none' },
+        { label: 'short', value: 'short' },
+        { label: 'percent (0-100)', value: 'percent' },
+        { label: 'percent (0.0-1.0)', value: 'percentunit' },
+        { label: 'Humidity (%H)', value: 'humidity' },
+        { label: 'decibel', value: 'dB' },
+        { label: 'hexadecimal (0x)', value: 'hex0x' },
+        { label: 'hexadecimal', value: 'hex' },
+        { label: 'scientific notation', value: 'sci' },
+        { label: 'locale format', value: 'locale' },
       ],
     },
     {
-      text: 'currency',
-      submenu: [
-        { text: 'Dollars ($)', value: 'currencyUSD' },
-        { text: 'Pounds (£)', value: 'currencyGBP' },
-        { text: 'Euro (€)', value: 'currencyEUR' },
-        { text: 'Yen (¥)', value: 'currencyJPY' },
-        { text: 'Rubles (₽)', value: 'currencyRUB' },
-        { text: 'Hryvnias (₴)', value: 'currencyUAH' },
-        { text: 'Real (R$)', value: 'currencyBRL' },
-        { text: 'Danish Krone (kr)', value: 'currencyDKK' },
-        { text: 'Icelandic Króna (kr)', value: 'currencyISK' },
-        { text: 'Norwegian Krone (kr)', value: 'currencyNOK' },
-        { text: 'Swedish Krona (kr)', value: 'currencySEK' },
-        { text: 'Czech koruna (czk)', value: 'currencyCZK' },
-        { text: 'Swiss franc (CHF)', value: 'currencyCHF' },
-        { text: 'Polish Złoty (PLN)', value: 'currencyPLN' },
-        { text: 'Bitcoin (฿)', value: 'currencyBTC' },
+      label: 'currency',
+      options: [
+        { label: 'Dollars ($)', value: 'currencyUSD' },
+        { label: 'Pounds (£)', value: 'currencyGBP' },
+        { label: 'Euro (€)', value: 'currencyEUR' },
+        { label: 'Yen (¥)', value: 'currencyJPY' },
+        { label: 'Rubles (₽)', value: 'currencyRUB' },
+        { label: 'Hryvnias (₴)', value: 'currencyUAH' },
+        { label: 'Real (R$)', value: 'currencyBRL' },
+        { label: 'Danish Krone (kr)', value: 'currencyDKK' },
+        { label: 'Icelandic Króna (kr)', value: 'currencyISK' },
+        { label: 'Norwegian Krone (kr)', value: 'currencyNOK' },
+        { label: 'Swedish Krona (kr)', value: 'currencySEK' },
+        { label: 'Czech koruna (czk)', value: 'currencyCZK' },
+        { label: 'Swiss franc (CHF)', value: 'currencyCHF' },
+        { label: 'Polish Złoty (PLN)', value: 'currencyPLN' },
+        { label: 'Bitcoin (฿)', value: 'currencyBTC' },
       ],
     },
     {
-      text: 'time',
-      submenu: [
-        { text: 'Hertz (1/s)', value: 'hertz' },
-        { text: 'nanoseconds (ns)', value: 'ns' },
-        { text: 'microseconds (µs)', value: 'µs' },
-        { text: 'milliseconds (ms)', value: 'ms' },
-        { text: 'seconds (s)', value: 's' },
-        { text: 'minutes (m)', value: 'm' },
-        { text: 'hours (h)', value: 'h' },
-        { text: 'days (d)', value: 'd' },
-        { text: 'duration (ms)', value: 'dtdurationms' },
-        { text: 'duration (s)', value: 'dtdurations' },
-        { text: 'duration (hh:mm:ss)', value: 'dthms' },
-        { text: 'Timeticks (s/100)', value: 'timeticks' },
-        { text: 'clock (ms)', value: 'clockms' },
-        { text: 'clock (s)', value: 'clocks' },
+      label: 'time',
+      options: [
+        { label: 'Hertz (1/s)', value: 'hertz' },
+        { label: 'nanoseconds (ns)', value: 'ns' },
+        { label: 'microseconds (µs)', value: 'µs' },
+        { label: 'milliseconds (ms)', value: 'ms' },
+        { label: 'seconds (s)', value: 's' },
+        { label: 'minutes (m)', value: 'm' },
+        { label: 'hours (h)', value: 'h' },
+        { label: 'days (d)', value: 'd' },
+        { label: 'duration (ms)', value: 'dtdurationms' },
+        { label: 'duration (s)', value: 'dtdurations' },
+        { label: 'duration (hh:mm:ss)', value: 'dthms' },
+        { label: 'Timeticks (s/100)', value: 'timeticks' },
+        { label: 'clock (ms)', value: 'clockms' },
+        { label: 'clock (s)', value: 'clocks' },
       ],
     },
     {
-      text: 'date & time',
-      submenu: [
-        { text: 'YYYY-MM-DD HH:mm:ss', value: 'dateTimeAsIso' },
-        { text: 'DD/MM/YYYY h:mm:ss a', value: 'dateTimeAsUS' },
-        { text: 'From Now', value: 'dateTimeFromNow' },
+      label: 'date & time',
+      options: [
+        { label: 'YYYY-MM-DD HH:mm:ss', value: 'dateTimeAsIso' },
+        { label: 'DD/MM/YYYY h:mm:ss a', value: 'dateTimeAsUS' },
+        { label: 'From Now', value: 'dateTimeFromNow' },
       ],
     },
     {
-      text: 'data (IEC)',
-      submenu: [
-        { text: 'bits', value: 'bits' },
-        { text: 'bytes', value: 'bytes' },
-        { text: 'kibibytes', value: 'kbytes' },
-        { text: 'mebibytes', value: 'mbytes' },
-        { text: 'gibibytes', value: 'gbytes' },
+      label: 'data (IEC)',
+      options: [
+        { label: 'bits', value: 'bits' },
+        { label: 'bytes', value: 'bytes' },
+        { label: 'kibibytes', value: 'kbytes' },
+        { label: 'mebibytes', value: 'mbytes' },
+        { label: 'gibibytes', value: 'gbytes' },
       ],
     },
     {
-      text: 'data (Metric)',
-      submenu: [
-        { text: 'bits', value: 'decbits' },
-        { text: 'bytes', value: 'decbytes' },
-        { text: 'kilobytes', value: 'deckbytes' },
-        { text: 'megabytes', value: 'decmbytes' },
-        { text: 'gigabytes', value: 'decgbytes' },
+      label: 'data (Metric)',
+      options: [
+        { label: 'bits', value: 'decbits' },
+        { label: 'bytes', value: 'decbytes' },
+        { label: 'kilobytes', value: 'deckbytes' },
+        { label: 'megabytes', value: 'decmbytes' },
+        { label: 'gigabytes', value: 'decgbytes' },
       ],
     },
     {
-      text: 'data rate',
-      submenu: [
-        { text: 'packets/sec', value: 'pps' },
-        { text: 'bits/sec', value: 'bps' },
-        { text: 'bytes/sec', value: 'Bps' },
-        { text: 'kilobits/sec', value: 'Kbits' },
-        { text: 'kilobytes/sec', value: 'KBs' },
-        { text: 'megabits/sec', value: 'Mbits' },
-        { text: 'megabytes/sec', value: 'MBs' },
-        { text: 'gigabytes/sec', value: 'GBs' },
-        { text: 'gigabits/sec', value: 'Gbits' },
+      label: 'data rate',
+      options: [
+        { label: 'packets/sec', value: 'pps' },
+        { label: 'bits/sec', value: 'bps' },
+        { label: 'bytes/sec', value: 'Bps' },
+        { label: 'kilobits/sec', value: 'Kbits' },
+        { label: 'kilobytes/sec', value: 'KBs' },
+        { label: 'megabits/sec', value: 'Mbits' },
+        { label: 'megabytes/sec', value: 'MBs' },
+        { label: 'gigabytes/sec', value: 'GBs' },
+        { label: 'gigabits/sec', value: 'Gbits' },
       ],
     },
     {
-      text: 'hash rate',
-      submenu: [
-        { text: 'hashes/sec', value: 'Hs' },
-        { text: 'kilohashes/sec', value: 'KHs' },
-        { text: 'megahashes/sec', value: 'MHs' },
-        { text: 'gigahashes/sec', value: 'GHs' },
-        { text: 'terahashes/sec', value: 'THs' },
-        { text: 'petahashes/sec', value: 'PHs' },
-        { text: 'exahashes/sec', value: 'EHs' },
+      label: 'hash rate',
+      options: [
+        { label: 'hashes/sec', value: 'Hs' },
+        { label: 'kilohashes/sec', value: 'KHs' },
+        { label: 'megahashes/sec', value: 'MHs' },
+        { label: 'gigahashes/sec', value: 'GHs' },
+        { label: 'terahashes/sec', value: 'THs' },
+        { label: 'petahashes/sec', value: 'PHs' },
+        { label: 'exahashes/sec', value: 'EHs' },
       ],
     },
     {
-      text: 'throughput',
-      submenu: [
-        { text: 'ops/sec (ops)', value: 'ops' },
-        { text: 'requests/sec (rps)', value: 'reqps' },
-        { text: 'reads/sec (rps)', value: 'rps' },
-        { text: 'writes/sec (wps)', value: 'wps' },
-        { text: 'I/O ops/sec (iops)', value: 'iops' },
-        { text: 'ops/min (opm)', value: 'opm' },
-        { text: 'reads/min (rpm)', value: 'rpm' },
-        { text: 'writes/min (wpm)', value: 'wpm' },
+      label: 'throughput',
+      options: [
+        { label: 'ops/sec (ops)', value: 'ops' },
+        { label: 'requests/sec (rps)', value: 'reqps' },
+        { label: 'reads/sec (rps)', value: 'rps' },
+        { label: 'writes/sec (wps)', value: 'wps' },
+        { label: 'I/O ops/sec (iops)', value: 'iops' },
+        { label: 'ops/min (opm)', value: 'opm' },
+        { label: 'reads/min (rpm)', value: 'rpm' },
+        { label: 'writes/min (wpm)', value: 'wpm' },
       ],
     },
     {
-      text: 'length',
-      submenu: [
-        { text: 'millimetre (mm)', value: 'lengthmm' },
-        { text: 'meter (m)', value: 'lengthm' },
-        { text: 'feet (ft)', value: 'lengthft' },
-        { text: 'kilometer (km)', value: 'lengthkm' },
-        { text: 'mile (mi)', value: 'lengthmi' },
+      label: 'length',
+      options: [
+        { label: 'millimetre (mm)', value: 'lengthmm' },
+        { label: 'meter (m)', value: 'lengthm' },
+        { label: 'feet (ft)', value: 'lengthft' },
+        { label: 'kilometer (km)', value: 'lengthkm' },
+        { label: 'mile (mi)', value: 'lengthmi' },
       ],
     },
     {
-      text: 'area',
-      submenu: [
-        { text: 'Square Meters (m²)', value: 'areaM2' },
-        { text: 'Square Feet (ft²)', value: 'areaF2' },
-        { text: 'Square Miles (mi²)', value: 'areaMI2' },
+      label: 'area',
+      options: [
+        { label: 'Square Meters (m²)', value: 'areaM2' },
+        { label: 'Square Feet (ft²)', value: 'areaF2' },
+        { label: 'Square Miles (mi²)', value: 'areaMI2' },
       ],
     },
     {
-      text: 'mass',
-      submenu: [
-        { text: 'milligram (mg)', value: 'massmg' },
-        { text: 'gram (g)', value: 'massg' },
-        { text: 'kilogram (kg)', value: 'masskg' },
-        { text: 'metric ton (t)', value: 'masst' },
+      label: 'mass',
+      options: [
+        { label: 'milligram (mg)', value: 'massmg' },
+        { label: 'gram (g)', value: 'massg' },
+        { label: 'kilogram (kg)', value: 'masskg' },
+        { label: 'metric ton (t)', value: 'masst' },
       ],
     },
     {
-      text: 'velocity',
-      submenu: [
-        { text: 'metres/second (m/s)', value: 'velocityms' },
-        { text: 'kilometers/hour (km/h)', value: 'velocitykmh' },
-        { text: 'miles/hour (mph)', value: 'velocitymph' },
-        { text: 'knot (kn)', value: 'velocityknot' },
+      label: 'velocity',
+      options: [
+        { label: 'metres/second (m/s)', value: 'velocityms' },
+        { label: 'kilometers/hour (km/h)', value: 'velocitykmh' },
+        { label: 'miles/hour (mph)', value: 'velocitymph' },
+        { label: 'knot (kn)', value: 'velocityknot' },
       ],
     },
     {
-      text: 'volume',
-      submenu: [
-        { text: 'millilitre (mL)', value: 'mlitre' },
-        { text: 'litre (L)', value: 'litre' },
-        { text: 'cubic metre', value: 'm3' },
-        { text: 'Normal cubic metre', value: 'Nm3' },
-        { text: 'cubic decimetre', value: 'dm3' },
-        { text: 'gallons', value: 'gallons' },
+      label: 'volume',
+      options: [
+        { label: 'millilitre (mL)', value: 'mlitre' },
+        { label: 'litre (L)', value: 'litre' },
+        { label: 'cubic metre', value: 'm3' },
+        { label: 'Normal cubic metre', value: 'Nm3' },
+        { label: 'cubic decimetre', value: 'dm3' },
+        { label: 'gallons', value: 'gallons' },
       ],
     },
     {
-      text: 'energy',
-      submenu: [
-        { text: 'Watt (W)', value: 'watt' },
-        { text: 'Kilowatt (kW)', value: 'kwatt' },
-        { text: 'Milliwatt (mW)', value: 'mwatt' },
-        { text: 'Watt per square metre (W/m²)', value: 'Wm2' },
-        { text: 'Volt-ampere (VA)', value: 'voltamp' },
-        { text: 'Kilovolt-ampere (kVA)', value: 'kvoltamp' },
-        { text: 'Volt-ampere reactive (var)', value: 'voltampreact' },
-        { text: 'Kilovolt-ampere reactive (kvar)', value: 'kvoltampreact' },
-        { text: 'Watt-hour (Wh)', value: 'watth' },
-        { text: 'Kilowatt-hour (kWh)', value: 'kwatth' },
-        { text: 'Kilowatt-min (kWm)', value: 'kwattm' },
-        { text: 'Joule (J)', value: 'joule' },
-        { text: 'Electron volt (eV)', value: 'ev' },
-        { text: 'Ampere (A)', value: 'amp' },
-        { text: 'Kiloampere (kA)', value: 'kamp' },
-        { text: 'Milliampere (mA)', value: 'mamp' },
-        { text: 'Volt (V)', value: 'volt' },
-        { text: 'Kilovolt (kV)', value: 'kvolt' },
-        { text: 'Millivolt (mV)', value: 'mvolt' },
-        { text: 'Decibel-milliwatt (dBm)', value: 'dBm' },
-        { text: 'Ohm (Ω)', value: 'ohm' },
-        { text: 'Lumens (Lm)', value: 'lumens' },
+      label: 'energy',
+      options: [
+        { label: 'Watt (W)', value: 'watt' },
+        { label: 'Kilowatt (kW)', value: 'kwatt' },
+        { label: 'Milliwatt (mW)', value: 'mwatt' },
+        { label: 'Watt per square metre (W/m²)', value: 'Wm2' },
+        { label: 'Volt-ampere (VA)', value: 'voltamp' },
+        { label: 'Kilovolt-ampere (kVA)', value: 'kvoltamp' },
+        { label: 'Volt-ampere reactive (var)', value: 'voltampreact' },
+        { label: 'Kilovolt-ampere reactive (kvar)', value: 'kvoltampreact' },
+        { label: 'Watt-hour (Wh)', value: 'watth' },
+        { label: 'Kilowatt-hour (kWh)', value: 'kwatth' },
+        { label: 'Kilowatt-min (kWm)', value: 'kwattm' },
+        { label: 'Joule (J)', value: 'joule' },
+        { label: 'Electron volt (eV)', value: 'ev' },
+        { label: 'Ampere (A)', value: 'amp' },
+        { label: 'Kiloampere (kA)', value: 'kamp' },
+        { label: 'Milliampere (mA)', value: 'mamp' },
+        { label: 'Volt (V)', value: 'volt' },
+        { label: 'Kilovolt (kV)', value: 'kvolt' },
+        { label: 'Millivolt (mV)', value: 'mvolt' },
+        { label: 'Decibel-milliwatt (dBm)', value: 'dBm' },
+        { label: 'Ohm (Ω)', value: 'ohm' },
+        { label: 'Lumens (Lm)', value: 'lumens' },
       ],
     },
     {
-      text: 'temperature',
-      submenu: [
-        { text: 'Celsius (°C)', value: 'celsius' },
-        { text: 'Farenheit (°F)', value: 'farenheit' },
-        { text: 'Kelvin (K)', value: 'kelvin' },
+      label: 'temperature',
+      options: [
+        { label: 'Celsius (°C)', value: 'celsius' },
+        { label: 'Farenheit (°F)', value: 'farenheit' },
+        { label: 'Kelvin (K)', value: 'kelvin' },
       ],
     },
     {
-      text: 'pressure',
-      submenu: [
-        { text: 'Millibars', value: 'pressurembar' },
-        { text: 'Bars', value: 'pressurebar' },
-        { text: 'Kilobars', value: 'pressurekbar' },
-        { text: 'Hectopascals', value: 'pressurehpa' },
-        { text: 'Kilopascals', value: 'pressurekpa' },
-        { text: 'Inches of mercury', value: 'pressurehg' },
-        { text: 'PSI', value: 'pressurepsi' },
+      label: 'pressure',
+      options: [
+        { label: 'Millibars', value: 'pressurembar' },
+        { label: 'Bars', value: 'pressurebar' },
+        { label: 'Kilobars', value: 'pressurekbar' },
+        { label: 'Hectopascals', value: 'pressurehpa' },
+        { label: 'Kilopascals', value: 'pressurekpa' },
+        { label: 'Inches of mercury', value: 'pressurehg' },
+        { label: 'PSI', value: 'pressurepsi' },
       ],
     },
     {
-      text: 'force',
-      submenu: [
-        { text: 'Newton-meters (Nm)', value: 'forceNm' },
-        { text: 'Kilonewton-meters (kNm)', value: 'forcekNm' },
-        { text: 'Newtons (N)', value: 'forceN' },
-        { text: 'Kilonewtons (kN)', value: 'forcekN' },
+      label: 'force',
+      options: [
+        { label: 'Newton-meters (Nm)', value: 'forceNm' },
+        { label: 'Kilonewton-meters (kNm)', value: 'forcekNm' },
+        { label: 'Newtons (N)', value: 'forceN' },
+        { label: 'Kilonewtons (kN)', value: 'forcekN' },
       ],
     },
     {
-      text: 'flow',
-      submenu: [
-        { text: 'Gallons/min (gpm)', value: 'flowgpm' },
-        { text: 'Cubic meters/sec (cms)', value: 'flowcms' },
-        { text: 'Cubic feet/sec (cfs)', value: 'flowcfs' },
-        { text: 'Cubic feet/min (cfm)', value: 'flowcfm' },
-        { text: 'Litre/hour', value: 'litreh' },
-        { text: 'Litre/min (l/min)', value: 'flowlpm' },
-        { text: 'milliLitre/min (mL/min)', value: 'flowmlpm' },
+      label: 'flow',
+      options: [
+        { label: 'Gallons/min (gpm)', value: 'flowgpm' },
+        { label: 'Cubic meters/sec (cms)', value: 'flowcms' },
+        { label: 'Cubic feet/sec (cfs)', value: 'flowcfs' },
+        { label: 'Cubic feet/min (cfm)', value: 'flowcfm' },
+        { label: 'Litre/hour', value: 'litreh' },
+        { label: 'Litre/min (l/min)', value: 'flowlpm' },
+        { label: 'milliLitre/min (mL/min)', value: 'flowmlpm' },
       ],
     },
     {
-      text: 'angle',
-      submenu: [
-        { text: 'Degrees (°)', value: 'degree' },
-        { text: 'Radians', value: 'radian' },
-        { text: 'Gradian', value: 'grad' },
+      label: 'angle',
+      options: [
+        { label: 'Degrees (°)', value: 'degree' },
+        { label: 'Radians', value: 'radian' },
+        { label: 'Gradian', value: 'grad' },
       ],
     },
     {
-      text: 'acceleration',
-      submenu: [
-        { text: 'Meters/sec²', value: 'accMS2' },
-        { text: 'Feet/sec²', value: 'accFS2' },
-        { text: 'G unit', value: 'accG' },
+      label: 'acceleration',
+      options: [
+        { label: 'Meters/sec²', value: 'accMS2' },
+        { label: 'Feet/sec²', value: 'accFS2' },
+        { label: 'G unit', value: 'accG' },
       ],
     },
     {
-      text: 'radiation',
-      submenu: [
-        { text: 'Becquerel (Bq)', value: 'radbq' },
-        { text: 'curie (Ci)', value: 'radci' },
-        { text: 'Gray (Gy)', value: 'radgy' },
-        { text: 'rad', value: 'radrad' },
-        { text: 'Sievert (Sv)', value: 'radsv' },
-        { text: 'rem', value: 'radrem' },
-        { text: 'Exposure (C/kg)', value: 'radexpckg' },
-        { text: 'roentgen (R)', value: 'radr' },
-        { text: 'Sievert/hour (Sv/h)', value: 'radsvh' },
+      label: 'radiation',
+      options: [
+        { label: 'Becquerel (Bq)', value: 'radbq' },
+        { label: 'curie (Ci)', value: 'radci' },
+        { label: 'Gray (Gy)', value: 'radgy' },
+        { label: 'rad', value: 'radrad' },
+        { label: 'Sievert (Sv)', value: 'radsv' },
+        { label: 'rem', value: 'radrem' },
+        { label: 'Exposure (C/kg)', value: 'radexpckg' },
+        { label: 'roentgen (R)', value: 'radr' },
+        { label: 'Sievert/hour (Sv/h)', value: 'radsvh' },
       ],
     },
     {
-      text: 'concentration',
-      submenu: [
-        { text: 'parts-per-million (ppm)', value: 'ppm' },
-        { text: 'parts-per-billion (ppb)', value: 'conppb' },
-        { text: 'nanogram per cubic metre (ng/m³)', value: 'conngm3' },
-        { text: 'nanogram per normal cubic metre (ng/Nm³)', value: 'conngNm3' },
-        { text: 'microgram per cubic metre (μg/m³)', value: 'conμgm3' },
-        { text: 'microgram per normal cubic metre (μg/Nm³)', value: 'conμgNm3' },
-        { text: 'milligram per cubic metre (mg/m³)', value: 'conmgm3' },
-        { text: 'milligram per normal cubic metre (mg/Nm³)', value: 'conmgNm3' },
-        { text: 'gram per cubic metre (g/m³)', value: 'congm3' },
-        { text: 'gram per normal cubic metre (g/Nm³)', value: 'congNm3' },
+      label: 'concentration',
+      options: [
+        { label: 'parts-per-million (ppm)', value: 'ppm' },
+        { label: 'parts-per-billion (ppb)', value: 'conppb' },
+        { label: 'nanogram per cubic metre (ng/m³)', value: 'conngm3' },
+        { label: 'nanogram per normal cubic metre (ng/Nm³)', value: 'conngNm3' },
+        { label: 'microgram per cubic metre (μg/m³)', value: 'conμgm3' },
+        { label: 'microgram per normal cubic metre (μg/Nm³)', value: 'conμgNm3' },
+        { label: 'milligram per cubic metre (mg/m³)', value: 'conmgm3' },
+        { label: 'milligram per normal cubic metre (mg/Nm³)', value: 'conmgNm3' },
+        { label: 'gram per cubic metre (g/m³)', value: 'congm3' },
+        { label: 'gram per normal cubic metre (g/Nm³)', value: 'congNm3' },
       ],
     },
   ];
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 94158de7738..19e6c5ffb88 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -27,7 +27,7 @@ export class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
       <div>
         <div className="section gf-form-group">
           <h5 className="page-heading">Units</h5>
-          <UnitPicker width={20} onSelected={() => {}} />
+          <UnitPicker onSelected={() => {}} />
         </div>
       </div>
     );

From 61a704a64e9418babab2da6b8bf27398e22056e6 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 15 Nov 2018 17:14:43 +0100
Subject: [PATCH 3/9] some progress on groups and options

---
 .../core/components/Picker/Unit/UnitGroup.tsx |  39 ++
 .../core/components/Picker/Unit/UnitMenu.tsx  |  17 +
 .../components/Picker/Unit/UnitOption.tsx     |  22 +
 .../components/Picker/Unit/UnitPicker.tsx     |  33 ++
 .../app/core/components/Picker/UnitPicker.tsx |  75 ---
 public/app/core/utils/kbn.ts                  | 427 +++++++++---------
 public/app/features/test/TestPage.tsx         |  14 +
 public/app/plugins/panel/gauge/module.tsx     |   2 +-
 public/app/routes/routes.ts                   |   7 +
 public/sass/_grafana.scss                     |   1 +
 public/sass/components/_unit-picker.scss      |  24 +
 11 files changed, 372 insertions(+), 289 deletions(-)
 create mode 100644 public/app/core/components/Picker/Unit/UnitGroup.tsx
 create mode 100644 public/app/core/components/Picker/Unit/UnitMenu.tsx
 create mode 100644 public/app/core/components/Picker/Unit/UnitOption.tsx
 create mode 100644 public/app/core/components/Picker/Unit/UnitPicker.tsx
 delete mode 100644 public/app/core/components/Picker/UnitPicker.tsx
 create mode 100644 public/app/features/test/TestPage.tsx
 create mode 100644 public/sass/components/_unit-picker.scss

diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx
new file mode 100644
index 00000000000..8ecc8f9b978
--- /dev/null
+++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import { GroupProps } from 'react-select/lib/components/Group';
+
+interface ExtendedGroupProps extends GroupProps<any> {
+  data: any;
+}
+
+interface State {
+  expanded: boolean;
+}
+
+export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
+  state = {
+    expanded: false,
+  };
+
+  onToggleChildren = () => {
+    this.setState(prevState => ({
+      expanded: !prevState.expanded,
+    }));
+  };
+
+  render() {
+    const { children, label } = this.props;
+    const { expanded } = this.state;
+
+    console.log(children);
+
+    return (
+      <div className="width-18 unit-picker-group" style={{ marginBottom: '5px' }}>
+        <div className="unit-picker-group-item" onClick={this.onToggleChildren}>
+          <span style={{ textTransform: 'capitalize' }}>{label}</span>
+          <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
+        </div>
+        {expanded && children}
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/Picker/Unit/UnitMenu.tsx b/public/app/core/components/Picker/Unit/UnitMenu.tsx
new file mode 100644
index 00000000000..472661277c8
--- /dev/null
+++ b/public/app/core/components/Picker/Unit/UnitMenu.tsx
@@ -0,0 +1,17 @@
+import React, { SFC } from 'react';
+import { components } from 'react-select';
+import { MenuProps } from 'react-select/lib/components/Menu';
+
+interface ExtendedMenuProps extends MenuProps<any> {
+  data: any;
+}
+
+const UnitMenu: SFC<ExtendedMenuProps> = props => {
+  return (
+    <components.Menu {...props}>
+      <div>{props.children}</div>
+    </components.Menu>
+  );
+};
+
+export default UnitMenu;
diff --git a/public/app/core/components/Picker/Unit/UnitOption.tsx b/public/app/core/components/Picker/Unit/UnitOption.tsx
new file mode 100644
index 00000000000..19986b28670
--- /dev/null
+++ b/public/app/core/components/Picker/Unit/UnitOption.tsx
@@ -0,0 +1,22 @@
+import React, { SFC } from 'react';
+import { components } from 'react-select';
+import { OptionProps } from 'react-select/lib/components/Option';
+
+interface ExtendedOptionProps extends OptionProps<any> {
+  data: any;
+}
+
+const UnitOption: SFC<ExtendedOptionProps> = props => {
+  const { children, isSelected, className } = props;
+
+  return (
+    <components.Option {...props}>
+      <div className={`unit-picker-option__button btn btn-link ${className}`}>
+        {isSelected && <i className="fa fa-check pull-right" aria-hidden="true" />}
+        <div className="gf-form">{children}</div>
+      </div>
+    </components.Option>
+  );
+};
+
+export default UnitOption;
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
new file mode 100644
index 00000000000..5a5bd5ee515
--- /dev/null
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react';
+import Select from 'react-select';
+import { UnitGroup } from './UnitGroup';
+import UnitOption from './UnitOption';
+import UnitMenu from './UnitMenu';
+import ResetStyles from '../ResetStyles';
+import kbn from '../../../utils/kbn';
+
+interface Props {
+  onSelected: (item: any) => {} | void;
+}
+
+export default class UnitPicker extends PureComponent<Props> {
+  render() {
+    const options = kbn.getUnitFormats();
+
+    return (
+      <Select
+        classNamePrefix="gf-form-select-box"
+        className="width-20 gf-form-input"
+        isSearchable={true}
+        options={options}
+        placeholder="Choose"
+        components={{
+          Group: UnitGroup,
+          Option: UnitOption,
+          Menu: UnitMenu,
+        }}
+        styles={ResetStyles}
+      />
+    );
+  }
+}
diff --git a/public/app/core/components/Picker/UnitPicker.tsx b/public/app/core/components/Picker/UnitPicker.tsx
deleted file mode 100644
index 54bfb2e208f..00000000000
--- a/public/app/core/components/Picker/UnitPicker.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { PureComponent } from 'react';
-import Select, { components } from 'react-select';
-import ResetStyles from 'app/core/components/Picker/ResetStyles';
-import kbn from '../../utils/kbn';
-
-interface Props {
-  onSelected: (item: any) => {} | void;
-}
-
-export class UnitPicker extends PureComponent<Props> {
-  formatGroupLabel = data => {
-    const groupStyles = {
-      margin: '0 15px',
-      fontSize: '16px',
-      fontWeight: 700,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    } as React.CSSProperties;
-
-    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.options.length}</span>
-      </div>
-    );
-  };
-
-  renderOption = props => {
-    return (
-      <components.Option {...props}>
-        <div className="description-picker-option__button btn btn-link">
-          <div className="gf-form">{props.children}</div>
-        </div>
-      </components.Option>
-    );
-  };
-
-  renderGroup = props => {
-    return <components.Group {...props} />;
-  };
-
-  render() {
-    const options = kbn.getUnitFormats();
-
-    return (
-      <Select
-        classNamePrefix="gf-form-select-box"
-        className="width-20 gf-form-input"
-        isSearchable={false}
-        options={options}
-        placeholder="Choose"
-        components={{
-          Option: this.renderOption,
-          Group: this.renderGroup,
-        }}
-        styles={ResetStyles}
-        formatGroupLabel={this.formatGroupLabel}
-      />
-    );
-  }
-}
diff --git a/public/app/core/utils/kbn.ts b/public/app/core/utils/kbn.ts
index 11d8a51f61d..8655fc9ab4b 100644
--- a/public/app/core/utils/kbn.ts
+++ b/public/app/core/utils/kbn.ts
@@ -405,7 +405,8 @@ kbn.valueFormats.percentunit = (size, decimals) => {
 };
 
 /* Formats the value to hex. Uses float if specified decimals are not 0.
- * There are two options, one with 0x, and one without */
+ * There are two submenu
+ * , one with 0x, and one without */
 
 kbn.valueFormats.hex = (value, decimals) => {
   if (value == null) {
@@ -905,284 +906,284 @@ kbn.valueFormats.dateTimeFromNow = (epoch, isUtc) => {
 kbn.getUnitFormats = () => {
   return [
     {
-      label: 'none',
-      options: [
-        { label: 'none', value: 'none' },
-        { label: 'short', value: 'short' },
-        { label: 'percent (0-100)', value: 'percent' },
-        { label: 'percent (0.0-1.0)', value: 'percentunit' },
-        { label: 'Humidity (%H)', value: 'humidity' },
-        { label: 'decibel', value: 'dB' },
-        { label: 'hexadecimal (0x)', value: 'hex0x' },
-        { label: 'hexadecimal', value: 'hex' },
-        { label: 'scientific notation', value: 'sci' },
-        { label: 'locale format', value: 'locale' },
+      text: 'none',
+      submenu: [
+        { text: 'none', value: 'none' },
+        { text: 'short', value: 'short' },
+        { text: 'percent (0-100)', value: 'percent' },
+        { text: 'percent (0.0-1.0)', value: 'percentunit' },
+        { text: 'Humidity (%H)', value: 'humidity' },
+        { text: 'decibel', value: 'dB' },
+        { text: 'hexadecimal (0x)', value: 'hex0x' },
+        { text: 'hexadecimal', value: 'hex' },
+        { text: 'scientific notation', value: 'sci' },
+        { text: 'locale format', value: 'locale' },
       ],
     },
     {
-      label: 'currency',
-      options: [
-        { label: 'Dollars ($)', value: 'currencyUSD' },
-        { label: 'Pounds (£)', value: 'currencyGBP' },
-        { label: 'Euro (€)', value: 'currencyEUR' },
-        { label: 'Yen (¥)', value: 'currencyJPY' },
-        { label: 'Rubles (₽)', value: 'currencyRUB' },
-        { label: 'Hryvnias (₴)', value: 'currencyUAH' },
-        { label: 'Real (R$)', value: 'currencyBRL' },
-        { label: 'Danish Krone (kr)', value: 'currencyDKK' },
-        { label: 'Icelandic Króna (kr)', value: 'currencyISK' },
-        { label: 'Norwegian Krone (kr)', value: 'currencyNOK' },
-        { label: 'Swedish Krona (kr)', value: 'currencySEK' },
-        { label: 'Czech koruna (czk)', value: 'currencyCZK' },
-        { label: 'Swiss franc (CHF)', value: 'currencyCHF' },
-        { label: 'Polish Złoty (PLN)', value: 'currencyPLN' },
-        { label: 'Bitcoin (฿)', value: 'currencyBTC' },
+      text: 'currency',
+      submenu: [
+        { text: 'Dollars ($)', value: 'currencyUSD' },
+        { text: 'Pounds (£)', value: 'currencyGBP' },
+        { text: 'Euro (€)', value: 'currencyEUR' },
+        { text: 'Yen (¥)', value: 'currencyJPY' },
+        { text: 'Rubles (₽)', value: 'currencyRUB' },
+        { text: 'Hryvnias (₴)', value: 'currencyUAH' },
+        { text: 'Real (R$)', value: 'currencyBRL' },
+        { text: 'Danish Krone (kr)', value: 'currencyDKK' },
+        { text: 'Icelandic Króna (kr)', value: 'currencyISK' },
+        { text: 'Norwegian Krone (kr)', value: 'currencyNOK' },
+        { text: 'Swedish Krona (kr)', value: 'currencySEK' },
+        { text: 'Czech koruna (czk)', value: 'currencyCZK' },
+        { text: 'Swiss franc (CHF)', value: 'currencyCHF' },
+        { text: 'Polish Złoty (PLN)', value: 'currencyPLN' },
+        { text: 'Bitcoin (฿)', value: 'currencyBTC' },
       ],
     },
     {
-      label: 'time',
-      options: [
-        { label: 'Hertz (1/s)', value: 'hertz' },
-        { label: 'nanoseconds (ns)', value: 'ns' },
-        { label: 'microseconds (µs)', value: 'µs' },
-        { label: 'milliseconds (ms)', value: 'ms' },
-        { label: 'seconds (s)', value: 's' },
-        { label: 'minutes (m)', value: 'm' },
-        { label: 'hours (h)', value: 'h' },
-        { label: 'days (d)', value: 'd' },
-        { label: 'duration (ms)', value: 'dtdurationms' },
-        { label: 'duration (s)', value: 'dtdurations' },
-        { label: 'duration (hh:mm:ss)', value: 'dthms' },
-        { label: 'Timeticks (s/100)', value: 'timeticks' },
-        { label: 'clock (ms)', value: 'clockms' },
-        { label: 'clock (s)', value: 'clocks' },
+      text: 'time',
+      submenu: [
+        { text: 'Hertz (1/s)', value: 'hertz' },
+        { text: 'nanoseconds (ns)', value: 'ns' },
+        { text: 'microseconds (µs)', value: 'µs' },
+        { text: 'milliseconds (ms)', value: 'ms' },
+        { text: 'seconds (s)', value: 's' },
+        { text: 'minutes (m)', value: 'm' },
+        { text: 'hours (h)', value: 'h' },
+        { text: 'days (d)', value: 'd' },
+        { text: 'duration (ms)', value: 'dtdurationms' },
+        { text: 'duration (s)', value: 'dtdurations' },
+        { text: 'duration (hh:mm:ss)', value: 'dthms' },
+        { text: 'Timeticks (s/100)', value: 'timeticks' },
+        { text: 'clock (ms)', value: 'clockms' },
+        { text: 'clock (s)', value: 'clocks' },
       ],
     },
     {
-      label: 'date & time',
-      options: [
-        { label: 'YYYY-MM-DD HH:mm:ss', value: 'dateTimeAsIso' },
-        { label: 'DD/MM/YYYY h:mm:ss a', value: 'dateTimeAsUS' },
-        { label: 'From Now', value: 'dateTimeFromNow' },
+      text: 'date & time',
+      submenu: [
+        { text: 'YYYY-MM-DD HH:mm:ss', value: 'dateTimeAsIso' },
+        { text: 'DD/MM/YYYY h:mm:ss a', value: 'dateTimeAsUS' },
+        { text: 'From Now', value: 'dateTimeFromNow' },
       ],
     },
     {
-      label: 'data (IEC)',
-      options: [
-        { label: 'bits', value: 'bits' },
-        { label: 'bytes', value: 'bytes' },
-        { label: 'kibibytes', value: 'kbytes' },
-        { label: 'mebibytes', value: 'mbytes' },
-        { label: 'gibibytes', value: 'gbytes' },
+      text: 'data (IEC)',
+      submenu: [
+        { text: 'bits', value: 'bits' },
+        { text: 'bytes', value: 'bytes' },
+        { text: 'kibibytes', value: 'kbytes' },
+        { text: 'mebibytes', value: 'mbytes' },
+        { text: 'gibibytes', value: 'gbytes' },
       ],
     },
     {
-      label: 'data (Metric)',
-      options: [
-        { label: 'bits', value: 'decbits' },
-        { label: 'bytes', value: 'decbytes' },
-        { label: 'kilobytes', value: 'deckbytes' },
-        { label: 'megabytes', value: 'decmbytes' },
-        { label: 'gigabytes', value: 'decgbytes' },
+      text: 'data (Metric)',
+      submenu: [
+        { text: 'bits', value: 'decbits' },
+        { text: 'bytes', value: 'decbytes' },
+        { text: 'kilobytes', value: 'deckbytes' },
+        { text: 'megabytes', value: 'decmbytes' },
+        { text: 'gigabytes', value: 'decgbytes' },
       ],
     },
     {
-      label: 'data rate',
-      options: [
-        { label: 'packets/sec', value: 'pps' },
-        { label: 'bits/sec', value: 'bps' },
-        { label: 'bytes/sec', value: 'Bps' },
-        { label: 'kilobits/sec', value: 'Kbits' },
-        { label: 'kilobytes/sec', value: 'KBs' },
-        { label: 'megabits/sec', value: 'Mbits' },
-        { label: 'megabytes/sec', value: 'MBs' },
-        { label: 'gigabytes/sec', value: 'GBs' },
-        { label: 'gigabits/sec', value: 'Gbits' },
+      text: 'data rate',
+      submenu: [
+        { text: 'packets/sec', value: 'pps' },
+        { text: 'bits/sec', value: 'bps' },
+        { text: 'bytes/sec', value: 'Bps' },
+        { text: 'kilobits/sec', value: 'Kbits' },
+        { text: 'kilobytes/sec', value: 'KBs' },
+        { text: 'megabits/sec', value: 'Mbits' },
+        { text: 'megabytes/sec', value: 'MBs' },
+        { text: 'gigabytes/sec', value: 'GBs' },
+        { text: 'gigabits/sec', value: 'Gbits' },
       ],
     },
     {
-      label: 'hash rate',
-      options: [
-        { label: 'hashes/sec', value: 'Hs' },
-        { label: 'kilohashes/sec', value: 'KHs' },
-        { label: 'megahashes/sec', value: 'MHs' },
-        { label: 'gigahashes/sec', value: 'GHs' },
-        { label: 'terahashes/sec', value: 'THs' },
-        { label: 'petahashes/sec', value: 'PHs' },
-        { label: 'exahashes/sec', value: 'EHs' },
+      text: 'hash rate',
+      submenu: [
+        { text: 'hashes/sec', value: 'Hs' },
+        { text: 'kilohashes/sec', value: 'KHs' },
+        { text: 'megahashes/sec', value: 'MHs' },
+        { text: 'gigahashes/sec', value: 'GHs' },
+        { text: 'terahashes/sec', value: 'THs' },
+        { text: 'petahashes/sec', value: 'PHs' },
+        { text: 'exahashes/sec', value: 'EHs' },
       ],
     },
     {
-      label: 'throughput',
-      options: [
-        { label: 'ops/sec (ops)', value: 'ops' },
-        { label: 'requests/sec (rps)', value: 'reqps' },
-        { label: 'reads/sec (rps)', value: 'rps' },
-        { label: 'writes/sec (wps)', value: 'wps' },
-        { label: 'I/O ops/sec (iops)', value: 'iops' },
-        { label: 'ops/min (opm)', value: 'opm' },
-        { label: 'reads/min (rpm)', value: 'rpm' },
-        { label: 'writes/min (wpm)', value: 'wpm' },
+      text: 'throughput',
+      submenu: [
+        { text: 'ops/sec (ops)', value: 'ops' },
+        { text: 'requests/sec (rps)', value: 'reqps' },
+        { text: 'reads/sec (rps)', value: 'rps' },
+        { text: 'writes/sec (wps)', value: 'wps' },
+        { text: 'I/O ops/sec (iops)', value: 'iops' },
+        { text: 'ops/min (opm)', value: 'opm' },
+        { text: 'reads/min (rpm)', value: 'rpm' },
+        { text: 'writes/min (wpm)', value: 'wpm' },
       ],
     },
     {
-      label: 'length',
-      options: [
-        { label: 'millimetre (mm)', value: 'lengthmm' },
-        { label: 'meter (m)', value: 'lengthm' },
-        { label: 'feet (ft)', value: 'lengthft' },
-        { label: 'kilometer (km)', value: 'lengthkm' },
-        { label: 'mile (mi)', value: 'lengthmi' },
+      text: 'length',
+      submenu: [
+        { text: 'millimetre (mm)', value: 'lengthmm' },
+        { text: 'meter (m)', value: 'lengthm' },
+        { text: 'feet (ft)', value: 'lengthft' },
+        { text: 'kilometer (km)', value: 'lengthkm' },
+        { text: 'mile (mi)', value: 'lengthmi' },
       ],
     },
     {
-      label: 'area',
-      options: [
-        { label: 'Square Meters (m²)', value: 'areaM2' },
-        { label: 'Square Feet (ft²)', value: 'areaF2' },
-        { label: 'Square Miles (mi²)', value: 'areaMI2' },
+      text: 'area',
+      submenu: [
+        { text: 'Square Meters (m²)', value: 'areaM2' },
+        { text: 'Square Feet (ft²)', value: 'areaF2' },
+        { text: 'Square Miles (mi²)', value: 'areaMI2' },
       ],
     },
     {
-      label: 'mass',
-      options: [
-        { label: 'milligram (mg)', value: 'massmg' },
-        { label: 'gram (g)', value: 'massg' },
-        { label: 'kilogram (kg)', value: 'masskg' },
-        { label: 'metric ton (t)', value: 'masst' },
+      text: 'mass',
+      submenu: [
+        { text: 'milligram (mg)', value: 'massmg' },
+        { text: 'gram (g)', value: 'massg' },
+        { text: 'kilogram (kg)', value: 'masskg' },
+        { text: 'metric ton (t)', value: 'masst' },
       ],
     },
     {
-      label: 'velocity',
-      options: [
-        { label: 'metres/second (m/s)', value: 'velocityms' },
-        { label: 'kilometers/hour (km/h)', value: 'velocitykmh' },
-        { label: 'miles/hour (mph)', value: 'velocitymph' },
-        { label: 'knot (kn)', value: 'velocityknot' },
+      text: 'velocity',
+      submenu: [
+        { text: 'metres/second (m/s)', value: 'velocityms' },
+        { text: 'kilometers/hour (km/h)', value: 'velocitykmh' },
+        { text: 'miles/hour (mph)', value: 'velocitymph' },
+        { text: 'knot (kn)', value: 'velocityknot' },
       ],
     },
     {
-      label: 'volume',
-      options: [
-        { label: 'millilitre (mL)', value: 'mlitre' },
-        { label: 'litre (L)', value: 'litre' },
-        { label: 'cubic metre', value: 'm3' },
-        { label: 'Normal cubic metre', value: 'Nm3' },
-        { label: 'cubic decimetre', value: 'dm3' },
-        { label: 'gallons', value: 'gallons' },
+      text: 'volume',
+      submenu: [
+        { text: 'millilitre (mL)', value: 'mlitre' },
+        { text: 'litre (L)', value: 'litre' },
+        { text: 'cubic metre', value: 'm3' },
+        { text: 'Normal cubic metre', value: 'Nm3' },
+        { text: 'cubic decimetre', value: 'dm3' },
+        { text: 'gallons', value: 'gallons' },
       ],
     },
     {
-      label: 'energy',
-      options: [
-        { label: 'Watt (W)', value: 'watt' },
-        { label: 'Kilowatt (kW)', value: 'kwatt' },
-        { label: 'Milliwatt (mW)', value: 'mwatt' },
-        { label: 'Watt per square metre (W/m²)', value: 'Wm2' },
-        { label: 'Volt-ampere (VA)', value: 'voltamp' },
-        { label: 'Kilovolt-ampere (kVA)', value: 'kvoltamp' },
-        { label: 'Volt-ampere reactive (var)', value: 'voltampreact' },
-        { label: 'Kilovolt-ampere reactive (kvar)', value: 'kvoltampreact' },
-        { label: 'Watt-hour (Wh)', value: 'watth' },
-        { label: 'Kilowatt-hour (kWh)', value: 'kwatth' },
-        { label: 'Kilowatt-min (kWm)', value: 'kwattm' },
-        { label: 'Joule (J)', value: 'joule' },
-        { label: 'Electron volt (eV)', value: 'ev' },
-        { label: 'Ampere (A)', value: 'amp' },
-        { label: 'Kiloampere (kA)', value: 'kamp' },
-        { label: 'Milliampere (mA)', value: 'mamp' },
-        { label: 'Volt (V)', value: 'volt' },
-        { label: 'Kilovolt (kV)', value: 'kvolt' },
-        { label: 'Millivolt (mV)', value: 'mvolt' },
-        { label: 'Decibel-milliwatt (dBm)', value: 'dBm' },
-        { label: 'Ohm (Ω)', value: 'ohm' },
-        { label: 'Lumens (Lm)', value: 'lumens' },
+      text: 'energy',
+      submenu: [
+        { text: 'Watt (W)', value: 'watt' },
+        { text: 'Kilowatt (kW)', value: 'kwatt' },
+        { text: 'Milliwatt (mW)', value: 'mwatt' },
+        { text: 'Watt per square metre (W/m²)', value: 'Wm2' },
+        { text: 'Volt-ampere (VA)', value: 'voltamp' },
+        { text: 'Kilovolt-ampere (kVA)', value: 'kvoltamp' },
+        { text: 'Volt-ampere reactive (var)', value: 'voltampreact' },
+        { text: 'Kilovolt-ampere reactive (kvar)', value: 'kvoltampreact' },
+        { text: 'Watt-hour (Wh)', value: 'watth' },
+        { text: 'Kilowatt-hour (kWh)', value: 'kwatth' },
+        { text: 'Kilowatt-min (kWm)', value: 'kwattm' },
+        { text: 'Joule (J)', value: 'joule' },
+        { text: 'Electron volt (eV)', value: 'ev' },
+        { text: 'Ampere (A)', value: 'amp' },
+        { text: 'Kiloampere (kA)', value: 'kamp' },
+        { text: 'Milliampere (mA)', value: 'mamp' },
+        { text: 'Volt (V)', value: 'volt' },
+        { text: 'Kilovolt (kV)', value: 'kvolt' },
+        { text: 'Millivolt (mV)', value: 'mvolt' },
+        { text: 'Decibel-milliwatt (dBm)', value: 'dBm' },
+        { text: 'Ohm (Ω)', value: 'ohm' },
+        { text: 'Lumens (Lm)', value: 'lumens' },
       ],
     },
     {
-      label: 'temperature',
-      options: [
-        { label: 'Celsius (°C)', value: 'celsius' },
-        { label: 'Farenheit (°F)', value: 'farenheit' },
-        { label: 'Kelvin (K)', value: 'kelvin' },
+      text: 'temperature',
+      submenu: [
+        { text: 'Celsius (°C)', value: 'celsius' },
+        { text: 'Farenheit (°F)', value: 'farenheit' },
+        { text: 'Kelvin (K)', value: 'kelvin' },
       ],
     },
     {
-      label: 'pressure',
-      options: [
-        { label: 'Millibars', value: 'pressurembar' },
-        { label: 'Bars', value: 'pressurebar' },
-        { label: 'Kilobars', value: 'pressurekbar' },
-        { label: 'Hectopascals', value: 'pressurehpa' },
-        { label: 'Kilopascals', value: 'pressurekpa' },
-        { label: 'Inches of mercury', value: 'pressurehg' },
-        { label: 'PSI', value: 'pressurepsi' },
+      text: 'pressure',
+      submenu: [
+        { text: 'Millibars', value: 'pressurembar' },
+        { text: 'Bars', value: 'pressurebar' },
+        { text: 'Kilobars', value: 'pressurekbar' },
+        { text: 'Hectopascals', value: 'pressurehpa' },
+        { text: 'Kilopascals', value: 'pressurekpa' },
+        { text: 'Inches of mercury', value: 'pressurehg' },
+        { text: 'PSI', value: 'pressurepsi' },
       ],
     },
     {
-      label: 'force',
-      options: [
-        { label: 'Newton-meters (Nm)', value: 'forceNm' },
-        { label: 'Kilonewton-meters (kNm)', value: 'forcekNm' },
-        { label: 'Newtons (N)', value: 'forceN' },
-        { label: 'Kilonewtons (kN)', value: 'forcekN' },
+      text: 'force',
+      submenu: [
+        { text: 'Newton-meters (Nm)', value: 'forceNm' },
+        { text: 'Kilonewton-meters (kNm)', value: 'forcekNm' },
+        { text: 'Newtons (N)', value: 'forceN' },
+        { text: 'Kilonewtons (kN)', value: 'forcekN' },
       ],
     },
     {
-      label: 'flow',
-      options: [
-        { label: 'Gallons/min (gpm)', value: 'flowgpm' },
-        { label: 'Cubic meters/sec (cms)', value: 'flowcms' },
-        { label: 'Cubic feet/sec (cfs)', value: 'flowcfs' },
-        { label: 'Cubic feet/min (cfm)', value: 'flowcfm' },
-        { label: 'Litre/hour', value: 'litreh' },
-        { label: 'Litre/min (l/min)', value: 'flowlpm' },
-        { label: 'milliLitre/min (mL/min)', value: 'flowmlpm' },
+      text: 'flow',
+      submenu: [
+        { text: 'Gallons/min (gpm)', value: 'flowgpm' },
+        { text: 'Cubic meters/sec (cms)', value: 'flowcms' },
+        { text: 'Cubic feet/sec (cfs)', value: 'flowcfs' },
+        { text: 'Cubic feet/min (cfm)', value: 'flowcfm' },
+        { text: 'Litre/hour', value: 'litreh' },
+        { text: 'Litre/min (l/min)', value: 'flowlpm' },
+        { text: 'milliLitre/min (mL/min)', value: 'flowmlpm' },
       ],
     },
     {
-      label: 'angle',
-      options: [
-        { label: 'Degrees (°)', value: 'degree' },
-        { label: 'Radians', value: 'radian' },
-        { label: 'Gradian', value: 'grad' },
+      text: 'angle',
+      submenu: [
+        { text: 'Degrees (°)', value: 'degree' },
+        { text: 'Radians', value: 'radian' },
+        { text: 'Gradian', value: 'grad' },
       ],
     },
     {
-      label: 'acceleration',
-      options: [
-        { label: 'Meters/sec²', value: 'accMS2' },
-        { label: 'Feet/sec²', value: 'accFS2' },
-        { label: 'G unit', value: 'accG' },
+      text: 'acceleration',
+      submenu: [
+        { text: 'Meters/sec²', value: 'accMS2' },
+        { text: 'Feet/sec²', value: 'accFS2' },
+        { text: 'G unit', value: 'accG' },
       ],
     },
     {
-      label: 'radiation',
-      options: [
-        { label: 'Becquerel (Bq)', value: 'radbq' },
-        { label: 'curie (Ci)', value: 'radci' },
-        { label: 'Gray (Gy)', value: 'radgy' },
-        { label: 'rad', value: 'radrad' },
-        { label: 'Sievert (Sv)', value: 'radsv' },
-        { label: 'rem', value: 'radrem' },
-        { label: 'Exposure (C/kg)', value: 'radexpckg' },
-        { label: 'roentgen (R)', value: 'radr' },
-        { label: 'Sievert/hour (Sv/h)', value: 'radsvh' },
+      text: 'radiation',
+      submenu: [
+        { text: 'Becquerel (Bq)', value: 'radbq' },
+        { text: 'curie (Ci)', value: 'radci' },
+        { text: 'Gray (Gy)', value: 'radgy' },
+        { text: 'rad', value: 'radrad' },
+        { text: 'Sievert (Sv)', value: 'radsv' },
+        { text: 'rem', value: 'radrem' },
+        { text: 'Exposure (C/kg)', value: 'radexpckg' },
+        { text: 'roentgen (R)', value: 'radr' },
+        { text: 'Sievert/hour (Sv/h)', value: 'radsvh' },
       ],
     },
     {
-      label: 'concentration',
-      options: [
-        { label: 'parts-per-million (ppm)', value: 'ppm' },
-        { label: 'parts-per-billion (ppb)', value: 'conppb' },
-        { label: 'nanogram per cubic metre (ng/m³)', value: 'conngm3' },
-        { label: 'nanogram per normal cubic metre (ng/Nm³)', value: 'conngNm3' },
-        { label: 'microgram per cubic metre (μg/m³)', value: 'conμgm3' },
-        { label: 'microgram per normal cubic metre (μg/Nm³)', value: 'conμgNm3' },
-        { label: 'milligram per cubic metre (mg/m³)', value: 'conmgm3' },
-        { label: 'milligram per normal cubic metre (mg/Nm³)', value: 'conmgNm3' },
-        { label: 'gram per cubic metre (g/m³)', value: 'congm3' },
-        { label: 'gram per normal cubic metre (g/Nm³)', value: 'congNm3' },
+      text: 'concentration',
+      submenu: [
+        { text: 'parts-per-million (ppm)', value: 'ppm' },
+        { text: 'parts-per-billion (ppb)', value: 'conppb' },
+        { text: 'nanogram per cubic metre (ng/m³)', value: 'conngm3' },
+        { text: 'nanogram per normal cubic metre (ng/Nm³)', value: 'conngNm3' },
+        { text: 'microgram per cubic metre (μg/m³)', value: 'conμgm3' },
+        { text: 'microgram per normal cubic metre (μg/Nm³)', value: 'conμgNm3' },
+        { text: 'milligram per cubic metre (mg/m³)', value: 'conmgm3' },
+        { text: 'milligram per normal cubic metre (mg/Nm³)', value: 'conmgNm3' },
+        { text: 'gram per cubic metre (g/m³)', value: 'congm3' },
+        { text: 'gram per normal cubic metre (g/Nm³)', value: 'congNm3' },
       ],
     },
   ];
diff --git a/public/app/features/test/TestPage.tsx b/public/app/features/test/TestPage.tsx
new file mode 100644
index 00000000000..ecb9bdebf8c
--- /dev/null
+++ b/public/app/features/test/TestPage.tsx
@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
+
+export default class TestPage extends PureComponent {
+  render() {
+    return (
+      <div className="page-body page-container">
+        <div style={{ margin: '160px auto 0', width: '500px' }}>
+          <UnitPicker onSelected={() => {}} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 19e6c5ffb88..94e421de9bc 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
 import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import { UnitPicker } from '../../../core/components/Picker/UnitPicker';
+import UnitPicker from '../../../core/components/Picker/Unit/UnitPicker';
 
 export interface Options {}
 
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 6770011278f..1e9e6f130ab 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -15,6 +15,7 @@ import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
 import OrgDetailsPage from '../features/org/OrgDetailsPage';
+import TestPage from '../features/test/TestPage';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -308,6 +309,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'AlertNotificationEditCtrl',
       controllerAs: 'ctrl',
     })
+    .when('/test', {
+      template: '<react-container />',
+      resolve: {
+        component: () => TestPage,
+      },
+    })
     .otherwise({
       templateUrl: 'public/app/partials/error.html',
       controller: 'ErrorCtrl',
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index e4c7a9c59e1..41cb8c5c3a9 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -101,6 +101,7 @@
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
+@import 'components/unit-picker';
 
 // PAGES
 @import 'pages/login';
diff --git a/public/sass/components/_unit-picker.scss b/public/sass/components/_unit-picker.scss
new file mode 100644
index 00000000000..4b7bb1b8e7b
--- /dev/null
+++ b/public/sass/components/_unit-picker.scss
@@ -0,0 +1,24 @@
+.unit-picker-option {
+  position: relative;
+  width: 100%;
+  display: block;
+  border-radius: 0;
+  white-space: normal;
+
+  i.fa-check {
+    padding-left: 2px;
+  }
+}
+
+.unit-picker-group {
+  margin-bottom: 5px;
+}
+
+.unit-picker-group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  font-size: 14px;
+  border-bottom: 1px solid #555;
+}

From 2b8eab8c8c1a36e2874799bc177f25f76a5ad603 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 14:11:51 +0100
Subject: [PATCH 4/9] maxHeight and style overrides

---
 .../core/components/Picker/Unit/UnitGroup.tsx |  6 ++--
 .../components/Picker/Unit/UnitPicker.tsx     | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx
index 8ecc8f9b978..c76d9ae16a0 100644
--- a/public/app/core/components/Picker/Unit/UnitGroup.tsx
+++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx
@@ -9,7 +9,7 @@ interface State {
   expanded: boolean;
 }
 
-export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
+export default class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
   state = {
     expanded: false,
   };
@@ -24,10 +24,8 @@ export class UnitGroup extends PureComponent<ExtendedGroupProps, State> {
     const { children, label } = this.props;
     const { expanded } = this.state;
 
-    console.log(children);
-
     return (
-      <div className="width-18 unit-picker-group" style={{ marginBottom: '5px' }}>
+      <div className="width-21 unit-picker-group" style={{ marginBottom: '5px' }}>
         <div className="unit-picker-group-item" onClick={this.onToggleChildren}>
           <span style={{ textTransform: 'capitalize' }}>{label}</span>
           <i className={`fa ${expanded ? 'fa-minus' : 'fa-plus'}`} />{' '}
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
index 5a5bd5ee515..8d9d6d8bb1c 100644
--- a/public/app/core/components/Picker/Unit/UnitPicker.tsx
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import Select from 'react-select';
-import { UnitGroup } from './UnitGroup';
+import UnitGroup from './UnitGroup';
 import UnitOption from './UnitOption';
 import UnitMenu from './UnitMenu';
 import ResetStyles from '../ResetStyles';
@@ -12,7 +12,34 @@ interface Props {
 
 export default class UnitPicker extends PureComponent<Props> {
   render() {
-    const options = kbn.getUnitFormats();
+    const unitGroups = kbn.getUnitFormats();
+    const options = unitGroups.map(group => {
+      const options = group.submenu.map(unit => {
+        return {
+          label: unit.text,
+          value: unit.value,
+        };
+      });
+
+      return {
+        label: group.text,
+        options,
+      };
+    });
+
+    const styles = {
+      ...ResetStyles,
+      menu: () => ({
+        maxHeight: '500px',
+        overflow: 'scroll',
+      }),
+      menuList: () =>
+        ({
+          WebkitOverflowScrolling: 'touch',
+          overflowY: 'auto',
+          position: 'relative',
+        } as React.CSSProperties),
+    };
 
     return (
       <Select
@@ -26,7 +53,7 @@ export default class UnitPicker extends PureComponent<Props> {
           Option: UnitOption,
           Menu: UnitMenu,
         }}
-        styles={ResetStyles}
+        styles={styles}
       />
     );
   }

From 8ab86c2cebc781ba3cb0b948d7a8e5995a2c396e Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 14:40:24 +0100
Subject: [PATCH 5/9] expand groups when searching

---
 .../core/components/Picker/Unit/UnitGroup.tsx   |  8 ++++++++
 .../core/components/Picker/Unit/UnitMenu.tsx    | 17 -----------------
 .../core/components/Picker/Unit/UnitPicker.tsx  |  2 --
 3 files changed, 8 insertions(+), 19 deletions(-)
 delete mode 100644 public/app/core/components/Picker/Unit/UnitMenu.tsx

diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx
index c76d9ae16a0..9df8a27cc1a 100644
--- a/public/app/core/components/Picker/Unit/UnitGroup.tsx
+++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx
@@ -14,6 +14,14 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
     expanded: false,
   };
 
+  componentDidUpdate(nextProps) {
+    if (nextProps.selectProps.inputValue !== '') {
+      this.setState({ expanded: true });
+    } else {
+      this.setState({ expanded: false });
+    }
+  }
+
   onToggleChildren = () => {
     this.setState(prevState => ({
       expanded: !prevState.expanded,
diff --git a/public/app/core/components/Picker/Unit/UnitMenu.tsx b/public/app/core/components/Picker/Unit/UnitMenu.tsx
deleted file mode 100644
index 472661277c8..00000000000
--- a/public/app/core/components/Picker/Unit/UnitMenu.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { SFC } from 'react';
-import { components } from 'react-select';
-import { MenuProps } from 'react-select/lib/components/Menu';
-
-interface ExtendedMenuProps extends MenuProps<any> {
-  data: any;
-}
-
-const UnitMenu: SFC<ExtendedMenuProps> = props => {
-  return (
-    <components.Menu {...props}>
-      <div>{props.children}</div>
-    </components.Menu>
-  );
-};
-
-export default UnitMenu;
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
index 8d9d6d8bb1c..8087ea7467c 100644
--- a/public/app/core/components/Picker/Unit/UnitPicker.tsx
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import Select from 'react-select';
 import UnitGroup from './UnitGroup';
 import UnitOption from './UnitOption';
-import UnitMenu from './UnitMenu';
 import ResetStyles from '../ResetStyles';
 import kbn from '../../../utils/kbn';
 
@@ -51,7 +50,6 @@ export default class UnitPicker extends PureComponent<Props> {
         components={{
           Group: UnitGroup,
           Option: UnitOption,
-          Menu: UnitMenu,
         }}
         styles={styles}
       />

From 0f4131b8d7cf13c93be0b03c6a5383b15552a616 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 15:26:51 +0100
Subject: [PATCH 6/9] handle default value

---
 .../core/components/Picker/Unit/UnitGroup.tsx |  2 --
 .../components/Picker/Unit/UnitPicker.tsx     | 11 +++++++++-
 public/app/plugins/panel/gauge/module.tsx     | 21 ++++++++++++++-----
 public/app/viz/Gauge.tsx                      | 14 +++++++++++--
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx
index 9df8a27cc1a..4ee17fef87f 100644
--- a/public/app/core/components/Picker/Unit/UnitGroup.tsx
+++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx
@@ -17,8 +17,6 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
   componentDidUpdate(nextProps) {
     if (nextProps.selectProps.inputValue !== '') {
       this.setState({ expanded: true });
-    } else {
-      this.setState({ expanded: false });
     }
   }
 
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
index 8087ea7467c..171807feed0 100644
--- a/public/app/core/components/Picker/Unit/UnitPicker.tsx
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -7,10 +7,13 @@ import kbn from '../../../utils/kbn';
 
 interface Props {
   onSelected: (item: any) => {} | void;
+  defaultValue?: string;
 }
 
 export default class UnitPicker extends PureComponent<Props> {
   render() {
+    const { defaultValue, onSelected } = this.props;
+
     const unitGroups = kbn.getUnitFormats();
     const options = unitGroups.map(group => {
       const options = group.submenu.map(unit => {
@@ -40,13 +43,19 @@ export default class UnitPicker extends PureComponent<Props> {
         } as React.CSSProperties),
     };
 
+    const value = options.map(group => {
+      return group.options.find(option => option.value === defaultValue);
+    });
+
     return (
       <Select
         classNamePrefix="gf-form-select-box"
-        className="width-20 gf-form-input"
+        className="width-20 gf-form-input--form-dropdown"
+        defaultValue={value}
         isSearchable={true}
         options={options}
         placeholder="Choose"
+        onChange={onSelected}
         components={{
           Group: UnitGroup,
           Option: UnitOption,
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 94e421de9bc..391f72ae9c5 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -1,33 +1,44 @@
 import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
+import { Label } from 'app/core/components/Label/Label';
+import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
 import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
-import UnitPicker from '../../../core/components/Picker/Unit/UnitPicker';
 
-export interface Options {}
+export interface Options {
+  unit: { label: string; value: string };
+}
 
 interface Props extends PanelProps<Options> {}
 
 export class GaugePanel extends PureComponent<Props> {
   render() {
     const { timeSeries } = this.props;
+    const { unit } = this.props.options;
 
     const vmSeries = getTimeSeriesVMs({
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} />;
+    return <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} unit={unit} />;
   }
 }
 
 export class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
+  onUnitChange = value => {
+    this.props.onChange({ ...this.props.options, unit: value });
+  };
+
   render() {
     return (
       <div>
         <div className="section gf-form-group">
-          <h5 className="page-heading">Units</h5>
-          <UnitPicker onSelected={() => {}} />
+          <h5 className="page-heading">Value</h5>
+          <div className="gf-form-inline">
+            <Label width={5}>Unit</Label>
+            <UnitPicker defaultValue={this.props.options.unit.value} onSelected={value => this.onUnitChange(value)} />
+          </div>
         </div>
       </div>
     );
diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index 5e90fd870db..cf934e77c43 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -12,6 +12,7 @@ interface Props {
   thresholds?: number[];
   showThresholdLables?: boolean;
   size?: { width: number; height: number };
+  unit: { label: string; value: string };
 }
 
 const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
@@ -37,7 +38,16 @@ export class Gauge extends PureComponent<Props> {
   }
 
   draw() {
-    const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props;
+    const {
+      maxValue,
+      minValue,
+      showThresholdLables,
+      size,
+      showThresholdMarkers,
+      timeSeries,
+      thresholds,
+      unit,
+    } = this.props;
 
     const width = size.width;
     const height = size.height;
@@ -88,7 +98,7 @@ export class Gauge extends PureComponent<Props> {
           value: {
             color: fontColor,
             formatter: () => {
-              return Math.round(timeSeries[0].stats.avg);
+              return `${Math.round(timeSeries[0].stats.avg)} ${unit.label}`;
             },
             font: {
               size: fontSize,

From 02d8ffda5b118b5d0711c4f54fb2cfebe0c81d82 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 16:35:42 +0100
Subject: [PATCH 7/9] default value

---
 public/app/core/components/Picker/Unit/UnitPicker.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
index 171807feed0..bbbac7f76f4 100644
--- a/public/app/core/components/Picker/Unit/UnitPicker.tsx
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -15,7 +15,9 @@ export default class UnitPicker extends PureComponent<Props> {
     const { defaultValue, onSelected } = this.props;
 
     const unitGroups = kbn.getUnitFormats();
-    const options = unitGroups.map(group => {
+
+    // Need to transform the data structure to work well with Select
+    const groupOptions = unitGroups.map(group => {
       const options = group.submenu.map(unit => {
         return {
           label: unit.text,
@@ -37,13 +39,12 @@ export default class UnitPicker extends PureComponent<Props> {
       }),
       menuList: () =>
         ({
-          WebkitOverflowScrolling: 'touch',
           overflowY: 'auto',
           position: 'relative',
         } as React.CSSProperties),
     };
 
-    const value = options.map(group => {
+    const value = groupOptions.map(group => {
       return group.options.find(option => option.value === defaultValue);
     });
 
@@ -53,7 +54,7 @@ export default class UnitPicker extends PureComponent<Props> {
         className="width-20 gf-form-input--form-dropdown"
         defaultValue={value}
         isSearchable={true}
-        options={options}
+        options={groupOptions}
         placeholder="Choose"
         onChange={onSelected}
         components={{

From ee3b438269f93aff1bf6958d6874550c75d4e867 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 16:41:01 +0100
Subject: [PATCH 8/9] format value

---
 public/app/viz/Gauge.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx
index cf934e77c43..200ee635b9a 100644
--- a/public/app/viz/Gauge.tsx
+++ b/public/app/viz/Gauge.tsx
@@ -3,6 +3,7 @@ import $ from 'jquery';
 import { withSize } from 'react-sizeme';
 import { TimeSeriesVMs } from 'app/types';
 import config from '../core/config';
+import kbn from '../core/utils/kbn';
 
 interface Props {
   timeSeries: TimeSeriesVMs;
@@ -37,17 +38,15 @@ export class Gauge extends PureComponent<Props> {
     this.draw();
   }
 
+  formatValue(value) {
+    const { unit } = this.props;
+
+    const formatFunc = kbn.valueFormats[unit.value];
+    return formatFunc(value);
+  }
+
   draw() {
-    const {
-      maxValue,
-      minValue,
-      showThresholdLables,
-      size,
-      showThresholdMarkers,
-      timeSeries,
-      thresholds,
-      unit,
-    } = this.props;
+    const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props;
 
     const width = size.width;
     const height = size.height;
@@ -98,7 +97,7 @@ export class Gauge extends PureComponent<Props> {
           value: {
             color: fontColor,
             formatter: () => {
-              return `${Math.round(timeSeries[0].stats.avg)} ${unit.label}`;
+              return this.formatValue(timeSeries[0].stats.avg);
             },
             font: {
               size: fontSize,

From 5916f769917edb90a43bfcf218aafe3125f44fb9 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 16 Nov 2018 16:58:08 +0100
Subject: [PATCH 9/9] removing test page

---
 public/app/features/test/TestPage.tsx | 14 --------------
 public/app/routes/routes.ts           |  7 -------
 2 files changed, 21 deletions(-)
 delete mode 100644 public/app/features/test/TestPage.tsx

diff --git a/public/app/features/test/TestPage.tsx b/public/app/features/test/TestPage.tsx
deleted file mode 100644
index ecb9bdebf8c..00000000000
--- a/public/app/features/test/TestPage.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { PureComponent } from 'react';
-import UnitPicker from 'app/core/components/Picker/Unit/UnitPicker';
-
-export default class TestPage extends PureComponent {
-  render() {
-    return (
-      <div className="page-body page-container">
-        <div style={{ margin: '160px auto 0', width: '500px' }}>
-          <UnitPicker onSelected={() => {}} />
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts
index 41c209ac87f..d3b3488f1fe 100644
--- a/public/app/routes/routes.ts
+++ b/public/app/routes/routes.ts
@@ -16,7 +16,6 @@ import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
 import DataSourceSettings from '../features/datasources/settings/DataSourceSettings';
 import OrgDetailsPage from '../features/org/OrgDetailsPage';
-import TestPage from '../features/test/TestPage';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -311,12 +310,6 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'AlertNotificationEditCtrl',
       controllerAs: 'ctrl',
     })
-    .when('/test', {
-      template: '<react-container />',
-      resolve: {
-        component: () => TestPage,
-      },
-    })
     .otherwise({
       templateUrl: 'public/app/partials/error.html',
       controller: 'ErrorCtrl',