From a8cf2dc5012d5236c4daaf6ae567fa7038e5895c Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Mon, 19 Nov 2018 14:03:32 +0100
Subject: [PATCH] some touch ups on unit

---
 .../core/components/Picker/Unit/UnitGroup.tsx    |  9 +++++++++
 .../core/components/Picker/Unit/UnitPicker.tsx   | 16 ++++++++++++++--
 public/app/plugins/panel/gauge/module.tsx        |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/public/app/core/components/Picker/Unit/UnitGroup.tsx b/public/app/core/components/Picker/Unit/UnitGroup.tsx
index 4ee17fef87f..0bb2dce408e 100644
--- a/public/app/core/components/Picker/Unit/UnitGroup.tsx
+++ b/public/app/core/components/Picker/Unit/UnitGroup.tsx
@@ -14,6 +14,15 @@ export default class UnitGroup extends PureComponent<ExtendedGroupProps, State>
     expanded: false,
   };
 
+  componentDidMount() {
+    const value = this.props.selectProps.value[this.props.selectProps.value.length - 1].value;
+    console.log(value);
+
+    if (value && this.props.options.some(option => option.value === value)) {
+      this.setState({ expanded: true });
+    }
+  }
+
   componentDidUpdate(nextProps) {
     if (nextProps.selectProps.inputValue !== '') {
       this.setState({ expanded: true });
diff --git a/public/app/core/components/Picker/Unit/UnitPicker.tsx b/public/app/core/components/Picker/Unit/UnitPicker.tsx
index bbbac7f76f4..48f8c2d0856 100644
--- a/public/app/core/components/Picker/Unit/UnitPicker.tsx
+++ b/public/app/core/components/Picker/Unit/UnitPicker.tsx
@@ -8,11 +8,16 @@ import kbn from '../../../utils/kbn';
 interface Props {
   onSelected: (item: any) => {} | void;
   defaultValue?: string;
+  width?: number;
 }
 
 export default class UnitPicker extends PureComponent<Props> {
+  static defaultProps = {
+    width: 12,
+  };
+
   render() {
-    const { defaultValue, onSelected } = this.props;
+    const { defaultValue, onSelected, width } = this.props;
 
     const unitGroups = kbn.getUnitFormats();
 
@@ -42,6 +47,13 @@ export default class UnitPicker extends PureComponent<Props> {
           overflowY: 'auto',
           position: 'relative',
         } as React.CSSProperties),
+      valueContainer: () =>
+        ({
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          maxWidth: '90px',
+          whiteSpace: 'nowrap',
+        } as React.CSSProperties),
     };
 
     const value = groupOptions.map(group => {
@@ -51,7 +63,7 @@ export default class UnitPicker extends PureComponent<Props> {
     return (
       <Select
         classNamePrefix="gf-form-select-box"
-        className="width-20 gf-form-input--form-dropdown"
+        className={`width-${width} gf-form-input--form-dropdown`}
         defaultValue={value}
         isSearchable={true}
         options={groupOptions}
diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx
index 37940c560a6..7d1dc7d54d1 100644
--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/public/app/plugins/panel/gauge/module.tsx
@@ -58,7 +58,7 @@ class GaugeOptions extends PureComponent<PanelOptionsProps<Options>> {
             <Label width={5}>Stat</Label>
             <SimplePicker
               defaultValue={statOptions.find(option => option.value === this.props.options.stat.value)}
-              width={11}
+              width={12}
               options={statOptions}
               getOptionLabel={i => i.text}
               getOptionValue={i => i.value}