2020-05-18 11:03:29 -05:00
|
|
|
import React, { useMemo, useCallback, FC } from 'react';
|
2021-04-21 02:38:00 -05:00
|
|
|
import { flatten } from 'lodash';
|
2018-12-19 14:34:13 -06:00
|
|
|
|
2020-04-02 03:57:35 -05:00
|
|
|
import { LegacyForms } from '@grafana/ui';
|
2019-07-16 13:40:23 -05:00
|
|
|
import { SelectableValue } from '@grafana/data';
|
2018-12-19 14:34:13 -06:00
|
|
|
import { Variable } from 'app/types/templates';
|
2020-04-02 03:57:35 -05:00
|
|
|
const { Select } = LegacyForms;
|
2018-12-18 04:25:13 -06:00
|
|
|
|
|
|
|
export interface Props {
|
Chore: Fix all Typescript strict null errors (#26204)
* Chore: Fix typescript strict null errors
* Added new limit
* Fixed ts issue
* fixed tests
* trying to fix type inference
* Fixing more ts errors
* Revert tsconfig option
* Fix
* Fixed code
* More fixes
* fix tests
* Updated snapshot
* Chore: More ts strict null fixes
* More fixes in some really messed up azure config components
* More fixes, current count: 441
* 419
* More fixes
* Fixed invalid initial state in explore
* Fixing tests
* Fixed tests
* Explore fix
* More fixes
* Progress
* Sub 300
* Now at 218
* Progress
* Update
* Progress
* Updated tests
* at 159
* fixed tests
* Progress
* YAy blow 100! at 94
* 10,9,8,7,6,5,4,3,2,1... lift off
* Fixed tests
* Fixed more type errors
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
2020-07-10 05:46:59 -05:00
|
|
|
onChange: (value: string | undefined) => void;
|
2019-07-16 13:40:23 -05:00
|
|
|
options: Array<SelectableValue<string>>;
|
2018-12-19 14:14:55 -06:00
|
|
|
isSearchable: boolean;
|
2018-12-19 14:19:43 -06:00
|
|
|
value: string;
|
2018-12-18 04:25:13 -06:00
|
|
|
placeholder?: string;
|
|
|
|
className?: string;
|
2018-12-19 14:34:13 -06:00
|
|
|
variables?: Variable[];
|
2018-12-18 04:25:13 -06:00
|
|
|
}
|
|
|
|
|
2021-01-20 00:59:48 -06:00
|
|
|
export const MetricSelect: FC<Props> = (props) => {
|
2020-05-18 11:03:29 -05:00
|
|
|
const { value, placeholder, className, isSearchable, onChange } = props;
|
|
|
|
const options = useSelectOptions(props);
|
|
|
|
const selected = useSelectedOption(options, value);
|
|
|
|
const onChangeValue = useCallback((selectable: SelectableValue<string>) => onChange(selectable.value), [onChange]);
|
2018-12-18 04:25:13 -06:00
|
|
|
|
2020-05-18 11:03:29 -05:00
|
|
|
return (
|
|
|
|
<Select
|
|
|
|
className={className}
|
|
|
|
isMulti={false}
|
|
|
|
isClearable={false}
|
|
|
|
backspaceRemovesValue={false}
|
|
|
|
onChange={onChangeValue}
|
|
|
|
options={options}
|
|
|
|
isSearchable={isSearchable}
|
|
|
|
maxMenuHeight={500}
|
|
|
|
placeholder={placeholder}
|
|
|
|
noOptionsMessage={() => 'No options found'}
|
|
|
|
value={selected}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
2018-12-18 04:25:13 -06:00
|
|
|
|
2020-05-18 11:03:29 -05:00
|
|
|
const useSelectOptions = ({ variables = [], options }: Props): Array<SelectableValue<string>> => {
|
|
|
|
return useMemo(() => {
|
|
|
|
if (!Array.isArray(variables) || variables.length === 0) {
|
|
|
|
return options;
|
2018-12-18 09:01:12 -06:00
|
|
|
}
|
|
|
|
|
2020-05-18 11:03:29 -05:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
label: 'Template Variables',
|
|
|
|
options: variables.map(({ name }) => ({
|
|
|
|
label: `$${name}`,
|
|
|
|
value: `$${name}`,
|
|
|
|
})),
|
|
|
|
},
|
|
|
|
...options,
|
|
|
|
];
|
|
|
|
}, [variables, options]);
|
|
|
|
};
|
2018-12-18 09:01:12 -06:00
|
|
|
|
2020-05-18 11:03:29 -05:00
|
|
|
const useSelectedOption = (options: Array<SelectableValue<string>>, value: string): SelectableValue<string> => {
|
|
|
|
return useMemo(() => {
|
2021-04-21 02:38:00 -05:00
|
|
|
const allOptions = options.every((o) => o.options) ? flatten(options.map((o) => o.options)) : options;
|
2021-01-20 00:59:48 -06:00
|
|
|
return allOptions.find((option) => option.value === value);
|
2020-05-18 11:03:29 -05:00
|
|
|
}, [options, value]);
|
|
|
|
};
|