transparent toggle style and new button group style

public/app/core/components/Switch/Switch.tsx

@@ -6,6 +6,7 @@ export interface Props {
   checked: boolean;
   labelClass?: string;
   switchClass?: string;
+  transparent?: boolean;
   onChange: (event) => any;
 }
 
@@ -24,11 +25,11 @@ export class Switch extends PureComponent<Props, State> {
   };
 
   render() {
-    const { labelClass = '', switchClass = '', label, checked } = this.props;
+    const { labelClass = '', switchClass = '', label, checked, transparent } = this.props;
 
     const labelId = `check-${this.state.id}`;
-    const labelClassName = `gf-form-label ${labelClass} pointer`;
+    const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
-    const switchClassName = `gf-form-switch ${switchClass}`;
+    const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
       <label htmlFor={labelId} className="gf-form-switch-container">

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

@@ -1,43 +1,19 @@
-import React, { SFC, ReactNode, PureComponent, ReactElement } from 'react';
+import React, { SFC, ReactNode, PureComponent } from 'react';
 
 interface ToggleButtonGroupProps {
-  onChange: (value) => void;
-  value?: any;
   label?: string;
-  render: (props) => void;
+  children: JSX.Element[];
+  transparent?: boolean;
 }
 
 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 { children, label, transparent } = 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={`gf-form-label ${transparent ? 'gf-form-label--transparent' : ''}`}>{label}</label>}
-          {label && <label className={labelClassName}>{label}</label>}
+        <div className={`toggle-button-group ${transparent ? 'toggle-button-group--transparent' : ''}`}>{children}</div>
-          {this.props.render({ selectedValue, onChange: this.handleToggle.bind(this) })}
-        </div>
       </div>
     );
   }

public/app/features/explore/Logs.tsx

@@ -431,27 +431,17 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
         </div>
         <div className="logs-panel-options">
           <div className="logs-panel-controls">
-            <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} />
+            <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} transparent />
-            <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} />
+            <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} transparent />
-            <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} />
+            <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} transparent />
-            <ToggleButtonGroup
+            <ToggleButtonGroup label="Dedup" transparent={true}>
-              label="Dedup"
+              {Object.keys(LogsDedupStrategy).map((dedupType, i) => (
-              onChange={this.onChangeDedup}
+                <ToggleButton key={i} value={dedupType} onChange={this.onChangeDedup} selected={dedup === dedupType}>
-              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>
-                ))
+              ))}
-              }
+            </ToggleButtonGroup>
-            />
+
             {hasData &&
               meta && (
                 <div className="logs-panel-meta">

public/app/plugins/datasource/loki/plugin.json

@@ -7,7 +7,7 @@
   "annotations": false,
   "logs": true,
   "explore": true,
-  "tables": true,
+  "tables": false,
   "info": {
     "description": "Loki Logging Data Source for Grafana",
     "author": {

public/sass/_variables.dark.scss

@@ -391,3 +391,8 @@ $panel-grid-placeholder-shadow: 0 0 4px $blue;
 
 // logs
 $logs-color-unkown: $gray-2;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $page-bg;

public/sass/_variables.light.scss

@@ -400,3 +400,8 @@ $panel-grid-placeholder-shadow: 0 0 4px $blue-light;
 
 // logs
 $logs-color-unkown: $gray-5;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, $yellow, $red);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $gray-6;

public/sass/base/_reboot.scss

@@ -87,7 +87,7 @@ body {
 // might still respond to pointer events.
 //
 // Credit: https://github.com/suitcss/base
-[tabindex="-1"]:focus {
+[tabindex='-1']:focus {
   outline: none !important;
 }
 
@@ -171,7 +171,7 @@ a {
   }
 
   &:focus {
-    @include tab-focus();
+    @include no-focus();
   }
 }
 
@@ -214,7 +214,7 @@ img {
 // for traditionally non-focusable elements with role="button"
 // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
-[role="button"] {
+[role='button'] {
   cursor: pointer;
 }
 
@@ -231,7 +231,7 @@ img {
 a,
 area,
 button,
-[role="button"],
+[role='button'],
 input,
 label,
 select,
@@ -320,7 +320,7 @@ legend {
   //  border: 0;
 }
 
-input[type="search"] {
+input[type='search'] {
   // This overrides the extra rounded corners on search inputs in iOS so that our
   // `.form-control` class can properly style them. Note that this cannot simply
   // be added to `.form-control` as it's not specific enough. For details, see

public/sass/components/_buttons.scss

@@ -23,7 +23,7 @@
   &.active {
     &:focus,
     &.focus {
-      @include tab-focus();
+      @include no-focus();
     }
   }
 

public/sass/components/_gf-form.scss

@@ -117,9 +117,11 @@ $input-border: 1px solid $input-border-color;
     color: $critical;
   }
 
-  &--small {
+  &--transparent {
-    padding: ($input-padding-y / 2) ($input-padding-x / 2);
+    background-color: transparent;
-    font-size: $font-size-xs;
+    border: 0;
+    text-align: right;
+    padding-left: 0px;
   }
 
   &:disabled {

public/sass/components/_panel_logs.scss

@@ -1,6 +1,6 @@
 $column-horizontal-spacing: 10px;
 
-.logs-panel-controls {
+.logs-panel-options {
   display: flex;
   background-color: $page-bg;
   padding: $panel-padding;
@@ -8,8 +8,14 @@ $column-horizontal-spacing: 10px;
   border-radius: $border-radius;
   margin: 2*$panel-margin 0;
   border: $panel-border;
+  flex-direction: column;
+}
+
+.logs-panel-controls {
+  display: flex;
   justify-items: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
 
   > * {
     margin-right: 1em;
@@ -27,10 +33,14 @@ $column-horizontal-spacing: 10px;
   color: $text-color-weak;
   // Align first line with controls labels
   margin-top: -2px;
+  min-width: 30%;
+  display: flex;
 }
 
 .logs-panel-meta__item {
   margin-right: 1em;
+  display: flex;
+  flex-direction: column;
 }
 
 .logs-panel-meta__label {

public/sass/components/_switch.scss

@@ -27,33 +27,39 @@ gf-form-switch[disabled] {
   border: 1px solid $input-border-color;
   border-left: none;
   border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   input {
     opacity: 0;
     width: 0;
     height: 0;
   }
+
+  &--transparent {
+    background: transparent;
+    border: 0;
+    width: 40px;
+  }
 }
 
 /* The slider */
 .gf-form-switch__slider {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  right: 14px;
-  bottom: 10px;
   background: $switch-slider-off-bg;
   border-radius: 8px;
   height: 16px;
   width: 29px;
+  display: block;
+  position: relative;
 
   &::before {
     position: absolute;
     content: '';
     height: 12px;
     width: 12px;
-    left: 2px;
+    left: 1px;
-    bottom: 2px;
+    top: 2px;
     background: $switch-slider-color;
     transition: 0.4s;
     border-radius: 50%;

public/sass/components/_toggle_button_group.scss

@@ -1,24 +1,21 @@
 .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;
+    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
+
+    padding: 7px 10px;
+    font-weight: $font-weight-semi-bold;
+    font-size: $font-size-sm;
     border-radius: 0;
     color: $text-color;
+    border-right: $button-toggle-group-btn-seperator-border;
+
     &.active {
-      background-color: $input-bg;
+      background: $button-toggle-group-btn-active-bg;
+      box-shadow: $button-toggle-group-btn-active-shadow;
+      border-right: 0;
+
       &:hover {
         cursor: default;
       }

public/sass/mixins/_mixins.scss

@@ -1,6 +1,6 @@
 @mixin clearfix() {
   &::after {
-    content: "";
+    content: '';
     display: table;
     clear: both;
   }
@@ -19,6 +19,10 @@
   outline-offset: -2px;
 }
 
+@mixin no-focus() {
+  outline: none;
+}
+
 // Center-align a block level element
 // ----------------------------------
 @mixin center-block() {
@@ -265,20 +269,10 @@
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   @mixin background($color: $white, $alpha: 1) {
-    background-color: hsla(
+    background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-      hue($color),
-      saturation($color),
-      lightness($color),
-      $alpha
-    );
   }
   @mixin border($color: $white, $alpha: 1) {
-    border-color: hsla(
+    border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
-      hue($color),
-      saturation($color),
-      lightness($color),
-      $alpha
-    );
     @include background-clip(padding-box);
   }
 }
@@ -294,66 +288,37 @@
 // Gradients
 @mixin gradient-horizontal($startColor: #555, $endColor: #333) {
   background-color: $endColor;
-  background-image: linear-gradient(
+  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
-    to right,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
   background-repeat: repeat-x;
 }
 
 @mixin gradient-vertical($startColor: #555, $endColor: #333) {
   background-color: mix($startColor, $endColor, 60%);
-  background-image: linear-gradient(
+  background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10
-    to bottom,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
   background-repeat: repeat-x;
 }
 
 @mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
   background-color: $endColor;
   background-repeat: repeat-x;
-  background-image: linear-gradient(
+  background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10
-    $deg,
-    $startColor,
-    $endColor
-  ); // Standard, IE10
 }
 
 @mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(
+  background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor);
-    to right,
-    $startColor,
-    $midColor $colorStop,
-    $endColor
-  );
   background-repeat: no-repeat;
 }
 
 @mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
   background-color: mix($midColor, $endColor, 80%);
-  background-image: linear-gradient(
+  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
-    $startColor,
-    $midColor $colorStop,
-    $endColor
-  );
   background-repeat: no-repeat;
 }
 
 @mixin gradient-radial($innerColor: #555, $outerColor: #333) {
   background-color: $outerColor;
-  background-image: -webkit-gradient(
+  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
-    radial,
-    center center,
-    0,
-    center center,
-    460,
-    from($innerColor),
-    to($outerColor)
-  );
   background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
   background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
@@ -380,11 +345,7 @@
 
 @mixin left-brand-border-gradient() {
   border: none;
-  border-image: linear-gradient(
+  border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
-    rgba(255, 213, 0, 1) 0%,
-    rgba(255, 68, 0, 1) 99%,
-    rgba(255, 68, 0, 1) 100%
-  );
   border-image-slice: 1;
   border-style: solid;
   border-top: 0;