IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Reduce spacing for Explore/Logs switches (#44935)

Browse Source
This commit is contained in:
Kristina
2022-02-08 08:21:34 -06:00
committed by GitHub
parent 6a7a486c6f
commit c5f0701707
2 changed files with 38 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

@@ -47,12 +47,11 @@ export interface InlineSwitchProps extends Props {
} }
export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps>( export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps>(
({ transparent, showLabel, label, value, id, ...props }, ref) => { ({ transparent, className, showLabel, label, value, id, ...props }, ref) => {
const theme = useTheme2(); const theme = useTheme2();
const styles = getSwitchStyles(theme, transparent); const styles = getSwitchStyles(theme, transparent);
return ( return (
<div className={styles.inlineContainer}> <div className={cx(styles.inlineContainer, className)}>
{showLabel && ( {showLabel && (
<label <label
htmlFor={id} htmlFor={id}

45
public/app/features/explore/Logs.tsx
View File

@@ -316,24 +316,43 @@ class UnthemedLogs extends PureComponent<Props, State> {
) : undefined} ) : undefined}
<div className={styles.logOptions} ref={this.topLogsRef}> <div className={styles.logOptions} ref={this.topLogsRef}>
<InlineFieldRow> <InlineFieldRow>
<InlineField label="Time" transparent> <InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch value={showTime} onChange={this.onChangeTime} transparent id="show-time" /> <InlineSwitch
value={showTime}
onChange={this.onChangeTime}
className={styles.horizontalInlineSwitch}
transparent
id="show-time"
/>
</InlineField> </InlineField>
<InlineField label="Unique labels" transparent> <InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch value={showLabels} onChange={this.onChangeLabels} transparent id="unique-labels" /> <InlineSwitch
value={showLabels}
onChange={this.onChangeLabels}
className={styles.horizontalInlineSwitch}
transparent
id="unique-labels"
/>
</InlineField> </InlineField>
<InlineField label="Wrap lines" transparent> <InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch value={wrapLogMessage} onChange={this.onChangewrapLogMessage} transparent id="wrap-lines" /> <InlineSwitch
value={wrapLogMessage}
onChange={this.onChangewrapLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id="wrap-lines"
/>
</InlineField> </InlineField>
<InlineField label="Prettify JSON" transparent> <InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch <InlineSwitch
value={prettifyLogMessage} value={prettifyLogMessage}
onChange={this.onChangePrettifyLogMessage} onChange={this.onChangePrettifyLogMessage}
className={styles.horizontalInlineSwitch}
transparent transparent
id="prettify" id="prettify"
/> />
</InlineField> </InlineField>
<InlineField label="Dedup" transparent> <InlineField label="Dedup" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup <RadioButtonGroup
options={Object.values(LogsDedupStrategy).map((dedupType) => ({ options={Object.values(LogsDedupStrategy).map((dedupType) => ({
label: capitalize(dedupType), label: capitalize(dedupType),
@@ -452,8 +471,16 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
headerButton: css` headerButton: css`
margin: ${theme.spacing(0.5, 0, 0, 1)}; margin: ${theme.spacing(0.5, 0, 0, 1)};
`, `,
horizontalInlineLabel: css`
> label {
margin-right: 0;
}
`,
horizontalInlineSwitch: css`
padding: 0 ${theme.spacing(1)} 0 0;
`,
radioButtons: css` radioButtons: css`
margin: 0 ${theme.spacing(1)}; margin: 0;
`, `,
logsSection: css` logsSection: css`
display: flex; display: flex;