Function MetricSelect

public/app/core/components/Select/MetricSelect.tsx:19–40

(props: Props)

}

export const MetricSelect = (props: Props) => {
  const { value, placeholder, className, isSearchable, onChange } = props;
  const options = useMatcherSelectOptions(props);
  const selected = useSelectedOption(options, value);
  const onChangeValue = useCallback((selectable: SelectableValue<string>) => onChange(selectable.value), [onChange]);

  return (
    <Select
      className={className}
      isMulti={false}
      isClearable={false}
      backspaceRemovesValue={false}
      onChange={onChangeValue}
      options={options}
      isSearchable={isSearchable}
      maxMenuHeight={500}
      placeholder={placeholder}
      noOptionsMessage={t('metric-select.noOptionsMessage-no-options-found', 'No options found')}
      value={selected}
    />
  );
};

const useMatcherSelectOptions = ({ variables = [], options }: Props): Array<SelectableValue<string>> => {
  return useMemo(() => {