-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Line filters: Expand on focus (#1113)
* feat: expand line filters on focus --------- Co-authored-by: Matias Chomicki <matyax@gmail.com>
- Loading branch information
1 parent
bfbf715
commit b9d6541
Showing
6 changed files
with
171 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { GrafanaTheme2 } from '@grafana/data'; | ||
| import { css } from '@emotion/css'; | ||
| import { LineFilterEditor } from '../ServiceScene/LineFilter/LineFilterEditor'; | ||
| import React, { ChangeEvent, KeyboardEvent, useState } from 'react'; | ||
| import { IconButton, useStyles2 } from '@grafana/ui'; | ||
| import { LineFilterCaseSensitive } from '../../services/filterTypes'; | ||
| import { RegexInputValue } from '../ServiceScene/LineFilter/RegexIconButton'; | ||
|
|
||
| export interface LineFilterProps { | ||
| exclusive: boolean; | ||
| lineFilter: string; | ||
| caseSensitive: boolean; | ||
| regex: boolean; | ||
| setExclusive: (exclusive: boolean) => void; | ||
| onInputChange: (e: ChangeEvent<HTMLInputElement>) => void; | ||
| onCaseSensitiveToggle: (caseSensitive: LineFilterCaseSensitive) => void; | ||
| onRegexToggle: (regex: RegexInputValue) => void; | ||
| updateFilter: (lineFilter: string, debounced: boolean) => void; | ||
| handleEnter: (e: KeyboardEvent<HTMLInputElement>, lineFilter: string) => void; | ||
| onSubmitLineFilter?: () => void; | ||
| onClearLineFilter?: () => void; | ||
| } | ||
|
|
||
| export function LineFilterVariable({ onClick, props }: { onClick: () => void; props: LineFilterProps }) { | ||
| const [focus, setFocus] = useState(false); | ||
| const styles = useStyles2(getLineFilterStyles); | ||
| return ( | ||
| <> | ||
| <span> | ||
| <div className={styles.titleWrap}> | ||
| <span>Line filter</span> | ||
| <IconButton onClick={onClick} name={'times'} size={'xs'} aria-label={'Remove line filter'} /> | ||
| </div> | ||
| <span className={styles.collapseWrap}> | ||
| <LineFilterEditor {...props} focus={focus} setFocus={setFocus} type={'variable'} /> | ||
| {focus && ( | ||
| <IconButton | ||
| className={styles.collapseBtn} | ||
| tooltip={'Collapse'} | ||
| size={'lg'} | ||
| aria-label={'Collapse filter'} | ||
| onClick={() => setFocus(false)} | ||
| name={'table-collapse-all'} | ||
| /> | ||
| )} | ||
| </span> | ||
| </span> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const getLineFilterStyles = (theme: GrafanaTheme2) => ({ | ||
| titleWrap: css({ | ||
| display: 'flex', | ||
| fontSize: theme.typography.bodySmall.fontSize, | ||
| marginBottom: theme.spacing(0.5), | ||
| gap: theme.spacing(1), | ||
| }), | ||
| collapseWrap: css({ | ||
| display: 'flex', | ||
| }), | ||
| collapseBtn: css({ | ||
| marginLeft: theme.spacing(1), | ||
| }), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
src/Components/ServiceScene/Breakdowns/LineFilterInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { css } from '@emotion/css'; | ||
| import { Icon, IconButton, Input, useStyles2 } from '@grafana/ui'; | ||
| import React, { HTMLProps } from 'react'; | ||
| import { GrafanaTheme2 } from '@grafana/data'; | ||
|
|
||
| interface Props extends Omit<HTMLProps<HTMLInputElement>, 'width' | 'prefix'> { | ||
| onClear?: () => void; | ||
| suffix?: React.ReactNode; | ||
| prefix?: React.ReactNode; | ||
| width?: number; | ||
| } | ||
|
|
||
| export const LineFilterInput = ({ value, onChange, placeholder, onClear, suffix, width, ...rest }: Props) => { | ||
| const styles = useStyles2(getStyles); | ||
| return ( | ||
| <Input | ||
| rows={2} | ||
| width={width} | ||
| value={value} | ||
| onChange={onChange} | ||
| suffix={ | ||
| <span className={styles.suffixWrapper}> | ||
| {onClear && value ? ( | ||
| <IconButton | ||
| aria-label={'Clear line filter'} | ||
| tooltip={'Clear line filter'} | ||
| onClick={onClear} | ||
| name="times" | ||
| className={styles.clearIcon} | ||
| /> | ||
| ) : undefined} | ||
| {suffix && suffix} | ||
| </span> | ||
| } | ||
| prefix={<Icon name="search" />} | ||
| placeholder={placeholder} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const getStyles = (theme: GrafanaTheme2) => ({ | ||
| suffixWrapper: css({ | ||
| gap: theme.spacing(0.5), | ||
| display: 'inline-flex', | ||
| }), | ||
| clearIcon: css({ | ||
| cursor: 'pointer', | ||
| }), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters