Commit 6f8293af by Erik Sundell

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
parent 0d7b09b0
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>
);
}
}
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>
);
};
......@@ -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">
......
......@@ -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;
border-radius: $border-radius 0 0 $border-radius;
margin: 0;
}
&:last-child {
border-radius: 0 2px 2px 0;
margin-left: 0 !important;
border-radius: 0 $border-radius $border-radius 0;
margin-left: 0;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment