mirror of
https://github.com/grafana/grafana.git
synced 2024-11-22 08:56:43 -06:00
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:
parent
27e1c49534
commit
9e7ad70e5d
@ -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) {
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user