mirror of
https://github.com/grafana/grafana.git
synced 2025-01-17 04:02:50 -06:00
1d689888b0
* Updated package json but not updated source files * Update eslint plugin * updated files
37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import React, { PropsWithChildren, useMemo } from 'react';
|
|
import { SelectableValue } from '@grafana/data';
|
|
import { selectors } from '@grafana/e2e-selectors';
|
|
import { VariableSelectField } from '../editor/VariableSelectField';
|
|
import { VariableSort } from '../types';
|
|
|
|
interface Props {
|
|
onChange: (option: SelectableValue<VariableSort>) => void;
|
|
sort: VariableSort;
|
|
}
|
|
|
|
const SORT_OPTIONS = [
|
|
{ label: 'Disabled', value: VariableSort.disabled },
|
|
{ label: 'Alphabetical (asc)', value: VariableSort.alphabeticalAsc },
|
|
{ label: 'Alphabetical (desc)', value: VariableSort.alphabeticalDesc },
|
|
{ label: 'Numerical (asc)', value: VariableSort.numericalAsc },
|
|
{ label: 'Numerical (desc)', value: VariableSort.numericalDesc },
|
|
{ label: 'Alphabetical (case-insensitive, asc)', value: VariableSort.alphabeticalCaseInsensitiveAsc },
|
|
{ label: 'Alphabetical (case-insensitive, desc)', value: VariableSort.alphabeticalCaseInsensitiveDesc },
|
|
];
|
|
|
|
export function QueryVariableSortSelect({ onChange, sort }: PropsWithChildren<Props>) {
|
|
const value = useMemo(() => SORT_OPTIONS.find((o) => o.value === sort) ?? SORT_OPTIONS[0], [sort]);
|
|
|
|
return (
|
|
<VariableSelectField
|
|
name="Sort"
|
|
value={value}
|
|
options={SORT_OPTIONS}
|
|
onChange={onChange}
|
|
labelWidth={10}
|
|
ariaLabel={selectors.pages.Dashboard.Settings.Variables.Edit.QueryVariable.queryOptionsSortSelect}
|
|
tooltip="How to sort the values of this variable."
|
|
/>
|
|
);
|
|
}
|