handle default value

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 });
     }
   }
 

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,

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>
     );

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,