From 6f8293af4ea9173e23795b380c935d241cc4fed5 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell87@gmail.com>
Date: Wed, 5 Dec 2018 16:27:14 +0100
Subject: [PATCH] sort of a hacky way to figure if the small variation should
 be used for the label

improve light theme look

use new toggle button group in logs

stop propagation on click event

clean up styles

improve support for small when a label is present

refactoring - move toggle button to the group file. turn it into a stateless component

improve support for light theme

rename dedupe to dedup

use radius variable
---
 .../ToggleButtonGroup/ToggleButton.tsx        | 33 -----------------
 .../ToggleButtonGroup/ToggleButtonGroup.tsx   | 36 +++++++++++++++++--
 public/app/features/explore/Logs.tsx          | 32 +++++------------
 .../sass/components/_toggle_button_group.scss | 32 +++++++++++------
 4 files changed, 62 insertions(+), 71 deletions(-)
 delete mode 100644 public/app/core/components/ToggleButtonGroup/ToggleButton.tsx

diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButton.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButton.tsx
deleted file mode 100644
index 2fdf324ac44..00000000000
--- a/public/app/core/components/ToggleButtonGroup/ToggleButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-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>
-    );
-  }
-}
diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
index b3063004ebd..91b7f1538c9 100644
--- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -1,4 +1,4 @@
-import React, { PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
 
 interface ToggleButtonGroupProps {
   onChange: (value) => void;
@@ -9,7 +9,12 @@ interface ToggleButtonGroupProps {
 export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupProps> {
   getValues() {
     const { children } = this.props;
-    return React.Children.toArray(children).map(c => c['props'].value);
+    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) {
@@ -24,6 +29,7 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
     const { children, value, label } = this.props;
     const values = this.getValues();
     const selectedValue = value || values[0];
+    const labelClassName = `gf-form-label ${this.smallChildren() ? 'small' : ''}`;
 
     const childClones = React.Children.map(children, (child: ReactElement<any>) => {
       const { value: buttonValue } = child.props;
@@ -37,10 +43,34 @@ export default class ToggleButtonGroup extends PureComponent<ToggleButtonGroupPr
     return (
       <div className="gf-form">
         <div className="toggle-button-group">
-          {label && <label className="gf-form-label">{label}</label>}
+          {label && <label className={labelClassName}>{label}</label>}
           {childClones}
         </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>
+  );
+};
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 3a584cd5664..f7704cf340a 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -16,6 +16,7 @@ import {
 } from 'app/core/logs_model';
 import { findHighlightChunksInText } from 'app/core/utils/text';
 import { Switch } from 'app/core/components/Switch/Switch';
+import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
 
 import Graph from './Graph';
 import LogLabels from './LogLabels';
@@ -304,30 +305,13 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} 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}>
+              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
+                <ToggleButton className="btn-small" key={i} value={dedupType}>
+                  {dedupType}
+                </ToggleButton>
+              ))}
+            </ToggleButtonGroup>
             {hasData &&
               meta && (
                 <div className="logs-meta">
diff --git a/public/sass/components/_toggle_button_group.scss b/public/sass/components/_toggle_button_group.scss
index 5107c18f1a7..ed701a489a9 100644
--- a/public/sass/components/_toggle_button_group.scss
+++ b/public/sass/components/_toggle_button_group.scss
@@ -3,25 +3,35 @@
 
   .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 {
-    @include buttonBackground($input-bg, $input-bg);
+    background-color: $typeahead-selected-bg;
+    border-radius: 0;
+    color: $text-color;
     &.active {
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
+      background-color: $input-bg;
       &: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;
+    &: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;
+    }
   }
 }