IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Ensure values in metric selector are visible (#87150)

Browse Source 
* fix: ensure selectable values are visible

* refactor: remove unnecessary ternaries, strengthen types

* docs: fix typo

* style: comply with `betterer` guidelines

* refactor: add clarity

* fix: remove border for consistency's sake
This commit is contained in:
Nick Richmond 2024-05-02 16:06:40 -04:00 committed by GitHub
parent cbe3e3a5e0
commit 21afe3dc62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-prometheus/src/querybuilder/components/MetricSelect.tsx
View File

@ -56,7 +56,7 @@ export function MetricSelect({
metricLookupDisabled, metricLookupDisabled,
onBlur, onBlur,
variableEditor, variableEditor,
}: MetricSelectProps) { }: Readonly<MetricSelectProps>) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const [state, setState] = useState<{ const [state, setState] = useState<{
metrics?: SelectableValue[]; metrics?: SelectableValue[];
@ -241,10 +241,16 @@ export function MetricSelect({
<div <div
{...innerProps} {...innerProps}
className={`${stylesMenu.menu} ${styles.customMenuContainer}`} className={`${stylesMenu.menu} ${styles.customMenuContainer}`}
style={{ maxHeight }} style={{ maxHeight: Math.round(maxHeight * 0.9) }}
aria-label="Select options menu" aria-label="Select options menu"
> >
<CustomScrollbar scrollRefCallback={innerRef} autoHide={false} autoHeightMax="inherit" hideHorizontalTrack> <CustomScrollbar
scrollRefCallback={innerRef}
autoHide={false}
autoHeightMax="inherit"
hideHorizontalTrack
showScrollIndicators
>
{children} {children}
</CustomScrollbar> </CustomScrollbar>
{optionsLoaded && ( {optionsLoaded && (
@ -263,7 +269,7 @@ export function MetricSelect({
return ( return (
<AsyncSelect <AsyncSelect
data-testid={selectors.components.DataSource.Prometheus.queryEditor.builder.metricSelect} data-testid={selectors.components.DataSource.Prometheus.queryEditor.builder.metricSelect}
isClearable={variableEditor ? true : false} isClearable={Boolean(variableEditor)}
inputId="prometheus-metric-select" inputId="prometheus-metric-select"
className={styles.select} className={styles.select}
value={query.metric ? toOption(query.metric) : undefined} value={query.metric ? toOption(query.metric) : undefined}
@ -271,6 +277,7 @@ export function MetricSelect({
allowCustomValue allowCustomValue
formatOptionLabel={formatOptionLabel} formatOptionLabel={formatOptionLabel}
filterOption={customFilterOption} filterOption={customFilterOption}
minMenuHeight={250}
onOpenMenu={async () => { onOpenMenu={async () => {
if (metricLookupDisabled) { if (metricLookupDisabled) {
return; return;
@ -286,7 +293,7 @@ export function MetricSelect({
if (prometheusMetricEncyclopedia) { if (prometheusMetricEncyclopedia) {
setState({ setState({
// add the modal butoon option to the options // add the modal button option to the options
metrics: [...metricsModalOption, ...metrics], metrics: [...metricsModalOption, ...metrics],
isLoading: undefined, isLoading: undefined,
// pass the initial metrics into the metrics explorer // pass the initial metrics into the metrics explorer
@ -303,7 +310,7 @@ export function MetricSelect({
}} }}
loadOptions={metricLookupDisabled ? metricLookupDisabledSearch : debouncedSearch} loadOptions={metricLookupDisabled ? metricLookupDisabledSearch : debouncedSearch}
isLoading={state.isLoading} isLoading={state.isLoading}
defaultOptions={state.metrics} defaultOptions={state.metrics ?? Array.from(new Array(25), () => ({ value: '' }))} // We need empty values when `state.metrics` is falsy in order for the select to correctly determine top/bottom placement
onChange={(input) => { onChange={(input) => {
const value = input?.value; const value = input?.value;
if (value) { if (value) {
@ -321,7 +328,7 @@ export function MetricSelect({
components={ components={
prometheusMetricEncyclopedia ? { Option: CustomOption, MenuList: CustomMenu } : { MenuList: CustomMenu } prometheusMetricEncyclopedia ? { Option: CustomOption, MenuList: CustomMenu } : { MenuList: CustomMenu }
} }
onBlur={onBlur ? onBlur : () => {}} onBlur={onBlur}
/> />
); );
}; };