some progress on groups and options

public/app/core/components/Picker/Unit/UnitGroup.tsx

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

public/app/core/components/Picker/Unit/UnitMenu.tsx

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

public/app/core/components/Picker/Unit/UnitOption.tsx

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

public/app/core/components/Picker/Unit/UnitPicker.tsx

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

public/app/core/components/Picker/UnitPicker.tsx

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

public/app/features/test/TestPage.tsx

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

public/app/plugins/panel/gauge/module.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import Gauge from 'app/viz/Gauge';
 import Gauge from 'app/viz/Gauge';
 import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { NullValueMode, PanelOptionsProps, PanelProps } from 'app/types';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
 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 {}
 export interface Options {}
 
 

public/app/routes/routes.ts

@@ -15,6 +15,7 @@ import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import UsersListPage from 'app/features/users/UsersListPage';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
 import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
 import OrgDetailsPage from '../features/org/OrgDetailsPage';
 import OrgDetailsPage from '../features/org/OrgDetailsPage';
+import TestPage from '../features/test/TestPage';
 
 
 /** @ngInject */
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -308,6 +309,12 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controller: 'AlertNotificationEditCtrl',
       controller: 'AlertNotificationEditCtrl',
       controllerAs: 'ctrl',
       controllerAs: 'ctrl',
     })
     })
+    .when('/test', {
+      template: '<react-container />',
+      resolve: {
+        component: () => TestPage,
+      },
+    })
     .otherwise({
     .otherwise({
       templateUrl: 'public/app/partials/error.html',
       templateUrl: 'public/app/partials/error.html',
       controller: 'ErrorCtrl',
       controller: 'ErrorCtrl',

public/sass/_grafana.scss

@@ -101,6 +101,7 @@
 @import 'components/delete_button';
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
 @import 'components/page_loader';
+@import 'components/unit-picker';
 
 
 // PAGES
 // PAGES
 @import 'pages/login';
 @import 'pages/login';

public/sass/components/_unit-picker.scss

+.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;
+}