add basic button group component, using the the same label style as is

remove not used code

cleanup

public/app/core/components/ToggleButtonGroup/ToggleButton.tsx

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react';
+
+interface ToggleButtonProps {
+  onChange?: (value) => void;
+  selected?: boolean;
+  value: any;
+  classNames?: string;
+}
+interface ToggleButtonState {}
+
+export default class ToggleButton extends PureComponent<ToggleButtonProps, ToggleButtonState> {
+  static defaultProps = {
+    classNames: '',
+  };
+
+  handleChange = () => {
+    const { onChange, value } = this.props;
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  render() {
+    const { children, selected, classNames } = this.props;
+    const btnClassName = `btn ${classNames} ${selected ? 'active' : ''}`;
+
+    return (
+      <button className={btnClassName} onClick={this.handleChange}>
+        <span>{children}</span>
+      </button>
+    );
+  }
+}

public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -0,0 +1,46 @@
+import React, { PureComponent, ReactElement } from 'react';
+
+interface ToggleButtonGroupProps {
+  onChange: (value) => void;
+  value?: any;
+  label?: string;
+}
+
+export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
+  getValues() {
+    const { children } = this.props;
+    return React.Children.toArray(children).map(c => c['props'].value);
+  }
+
+  handleToggle(toggleValue) {
+    const { value, onChange } = this.props;
+    if (value && value === toggleValue) {
+      return;
+    }
+    onChange(toggleValue);
+  }
+
+  render() {
+    const { children, value, label } = this.props;
+    const values = this.getValues();
+    const selectedValue = value || values[0];
+
+    const childClones = React.Children.map(children, (child: ReactElement<any>) => {
+      const { value: buttonValue } = child.props;
+
+      return React.cloneElement(child, {
+        selected: buttonValue === selectedValue,
+        onChange: this.handleToggle.bind(this),
+      });
+    });
+
+    return (
+      <div className="gf-form">
+        <div className="toggle-button-group">
+          {label && <label className="gf-form-label">{label}</label>}
+          {childClones}
+        </div>
+      </div>
+    );
+  }
+}

public/sass/_grafana.scss

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

public/sass/components/_toggle_button_group.scss

@@ -0,0 +1,27 @@
+.toggle-button-group {
+  display: flex;
+
+  .gf-form-label {
+    background-color: $input-label-bg;
+  }
+
+  .btn {
+    @include buttonBackground($input-bg, $input-bg);
+    &.active {
+      background-color: lighten($input-label-bg, 5%);
+      color: $link-color;
+      &:hover {
+        cursor: default;
+      }
+    }
+  }
+
+  &:first-child {
+    border-radius: 2px 0 0 2px;
+    margin: 0;
+  }
+  &:last-child {
+    border-radius: 0 2px 2px 0;
+    margin-left: 0 !important;
+  }
+}