Merge pull request #14353 from grafana/14249-multi-button-group

Multi button group

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

+import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
+
+interface ToggleButtonGroupProps {
+  onChange: (value) => void;
+  value?: any;
+  label?: string;
+  render: (props) => void;
+}
+
+export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
+  getValues() {
+    const { children } = this.props;
+    return React.Children.toArray(children).map((c: ReactElement<any>) => c.props.value);
+  }
+
+  smallChildren() {
+    const { children } = this.props;
+    return React.Children.toArray(children).every((c: ReactElement<any>) => c.props.className.includes('small'));
+  }
+
+  handleToggle(toggleValue) {
+    const { value, onChange } = this.props;
+    if (value && value === toggleValue) {
+      return;
+    }
+    onChange(toggleValue);
+  }
+
+  render() {
+    const { value, label } = this.props;
+    const values = this.getValues();
+    const selectedValue = value || values[0];
+    const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
+
+    return (
+      <div className="gf-form">
+        <div className="toggle-button-group">
+          {label && <label className={labelClassName}>{label}</label>}
+          {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
+        </div>
+      </div>
+    );
+  }
+}
+
+interface ToggleButtonProps {
+  onChange?: (value) => void;
+  selected?: boolean;
+  value: any;
+  className?: string;
+  children: ReactNode;
+}
+
+export const ToggleButton: SFC<ToggleButtonProps> = ({ children, selected, className = '', value, onChange }) => {
+  const handleChange = event => {
+    event.stopPropagation();
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const btnClassName = `btn ${className} ${selected ? 'active' : ''}`;
+  return (
+    <button className={btnClassName} onClick={handleChange}>
+      <span>{children}</span>
+    </button>
+  );
+};

public/app/features/explore/Logs.tsx

@@ -16,6 +16,7 @@ import {
 } from 'app/core/logs_model';
 } from 'app/core/logs_model';
 import { findHighlightChunksInText } from 'app/core/utils/text';
 import { findHighlightChunksInText } from 'app/core/utils/text';
 import { Switch } from 'app/core/components/Switch/Switch';
 import { Switch } from 'app/core/components/Switch/Switch';
+import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
 
 
 import Graph from './Graph';
 import Graph from './Graph';
 import LogLabels from './LogLabels';
 import LogLabels from './LogLabels';
@@ -302,29 +303,23 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
             <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
             <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
-            <Switch
-              label="Dedup: off"
-              checked={dedup === LogsDedupStrategy.none}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.none)}
-              small
-            />
-            <Switch
-              label="Dedup: exact"
-              checked={dedup === LogsDedupStrategy.exact}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.exact)}
-              small
-            />
-            <Switch
-              label="Dedup: numbers"
-              checked={dedup === LogsDedupStrategy.numbers}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.numbers)}
-              small
-            />
-            <Switch
-              label="Dedup: signature"
-              checked={dedup === LogsDedupStrategy.signature}
-              onChange={() => this.onChangeDedup(LogsDedupStrategy.signature)}
-              small
+            <ToggleButtonGroup
+              label="Dedup"
+              onChange={this.onChangeDedup}
+              value={dedup}
+              render={({ selectedValue, onChange }) =>
+                Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                  <ToggleButton
+                    className="btn-small"
+                    key={i}
+                    value={dedupType}
+                    onChange={onChange}
+                    selected={selectedValue === dedupType}
+                  >
+                    {dedupType}
+                  </ToggleButton>
+                ))
+              }
             />
             />
             {hasData &&
             {hasData &&
               meta && (
               meta && (

public/sass/_grafana.scss

@@ -102,6 +102,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/toggle_button_group';
 
 
 // PAGES
 // PAGES
 @import 'pages/login';
 @import 'pages/login';

public/sass/components/_toggle_button_group.scss

+.toggle-button-group {
+  display: flex;
+
+  .gf-form-label {
+    background-color: $input-label-bg;
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+      margin: 0;
+    }
+    &.small {
+      padding: ($input-padding-y / 2) ($input-padding-x / 2);
+      font-size: $font-size-xs;
+    }
+  }
+
+  .btn {
+    background-color: $typeahead-selected-bg;
+    border-radius: 0;
+    color: $text-color;
+    &.active {
+      background-color: $input-bg;
+      &:hover {
+        cursor: default;
+      }
+    }
+
+    &:first-child {
+      border-radius: $border-radius 0 0 $border-radius;
+      margin: 0;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius $border-radius 0;
+      margin-left: 0;
+    }
+  }
+}