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

Table Panel: Update column filters to use Stack component (#83800)

Browse Source 
* Update filter list to use stack

* Remove dead comments
This commit is contained in:
Kyle Cunningham
2024-03-05 13:54:31 -06:00
committed by GitHub
parent f4da9bd09e
commit cb008657cb
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-ui/src/components/Table/FilterList.tsx
View File

@@ -4,7 +4,7 @@ import { FixedSizeList as List } from 'react-window';
import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data'; import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
import { ButtonSelect, Checkbox, FilterInput, HorizontalGroup, Label, VerticalGroup } from '..'; import { ButtonSelect, Checkbox, FilterInput, Label, Stack } from '..';
import { useStyles2, useTheme2 } from '../../themes'; import { useStyles2, useTheme2 } from '../../themes';
interface Props { interface Props {
@@ -169,11 +169,11 @@ export const FilterList = ({
}, [onChange, values, items, selectedItems]); }, [onChange, values, items, selectedItems]);
return ( return (
<VerticalGroup spacing="md"> <Stack direction="column" gap={0.25}>
{!showOperators && <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />} {!showOperators && <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />}
{showOperators && ( {showOperators && (
<HorizontalGroup> <Stack direction="row" gap={0}>
<ButtonSelect<string> <ButtonSelect
variant="canvas" variant="canvas"
options={OPERATORS} options={OPERATORS}
onChange={setOperator} onChange={setOperator}
@@ -181,7 +181,7 @@ export const FilterList = ({
tooltip={operator.description} tooltip={operator.description}
/> />
<FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} /> <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />
</HorizontalGroup> </Stack>
)} )}
{!items.length && <Label>No values</Label>} {!items.length && <Label>No values</Label>}
{items.length && ( {items.length && (
@@ -206,7 +206,7 @@ export const FilterList = ({
</List> </List>
)} )}
{items.length && ( {items.length && (
<VerticalGroup spacing="xs"> <Stack direction="column" gap={0.25}>
<div className={cx(styles.selectDivider)} /> <div className={cx(styles.selectDivider)} />
<div className={cx(styles.filterListRow)}> <div className={cx(styles.filterListRow)}>
<Checkbox <Checkbox
@@ -217,9 +217,9 @@ export const FilterList = ({
onChange={onSelectChanged} onChange={onSelectChanged}
/> />
</div> </div>
</VerticalGroup> </Stack>
)} )}
</VerticalGroup> </Stack>
); );
}; };