FieldNamePicker: Add preview details for field type and values (#38768)

* add field type and values preview to picker

* add more details to description

* add icon to Select and specify icons for FieldType

* remove description
This commit is contained in:
nikki-kiga 2021-09-02 17:04:02 -07:00 committed by GitHub
parent 27e1c49534
commit 9e7ad70e5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 1 deletions

View File

@ -1,5 +1,6 @@
import { useMemo } from 'react';
import { DataFrame, Field, getFieldDisplayName, SelectableValue } from '@grafana/data';
import { DataFrame, Field, FieldType, getFieldDisplayName, SelectableValue } from '@grafana/data';
import { IconName } from '../..';
/**
* @internal
@ -61,6 +62,15 @@ export function useFieldDisplayNames(data: DataFrame[], filter?: (field: Field)
}, [data, filter]);
}
const fieldTypeIcons: { [key in FieldType]: IconName } = {
time: 'clock-nine',
string: 'font',
number: 'calculator-alt',
boolean: 'toggle-on',
trace: 'info-circle',
other: 'brackets-curly',
};
/**
* @internal
*/
@ -79,9 +89,11 @@ export function useSelectOptions(
if (!found && name === currentName) {
found = true;
}
const field = displayNames.fields.get(name);
options.push({
value: name,
label: name,
icon: field ? fieldTypeIcons[field.type] : undefined,
});
}
for (const name of displayNames.raw) {

View File

@ -4,6 +4,8 @@ import { getSelectStyles } from './getSelectStyles';
import { cx } from '@emotion/css';
import { SelectableValue } from '@grafana/data';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
import { Icon } from '../Icon/Icon';
import { IconName } from '../../types';
interface SelectMenuProps {
maxHeight: number;
@ -49,6 +51,7 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
{...innerProps}
aria-label="Select option"
>
{data.icon && <Icon name={data.icon as IconName} className={styles.optionIcon} />}
{data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} />}
<div className={styles.optionBody}>
<span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>

View File

@ -27,6 +27,9 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
background: ${theme.colors.action.hover};
}
`,
optionIcon: css`
margin-right: ${theme.spacing(1)};
`,
optionImage: css`
label: grafana-select-option-image;
width: 16px;

View File

@ -68,6 +68,7 @@ export const getAvailableIcons = () =>
'file-copy-alt',
'filter',
'folder',
'font',
'fire',
'folder-open',
'folder-plus',
@ -140,6 +141,7 @@ export const getAvailableIcons = () =>
'table',
'tag-alt',
'times',
'toggle-on',
'trash-alt',
'unlock',
'upload',