IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

Elasticsearch query editor: ensure unique ids on labelled fields (#74396)

Browse Source
This commit is contained in:
Matias Chomicki 2023-09-06 10:17:11 +02:00 committed by GitHub
parent 79b421e8c8
commit c3cbe220bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
View File

@ -1,12 +1,11 @@
import { uniqueId } from 'lodash';
import React, { ComponentProps, useRef, useState } from 'react';
import React, { ComponentProps, useId, useRef, useState } from 'react';
import { InlineField, Input, InlineSwitch, Select } from '@grafana/ui';
import { useDispatch } from '../../../../hooks/useStatelessReducer';
import { extendedStats } from '../../../../queryDef';
import { MetricAggregation, ExtendedStat } from '../../../../types';
import { useQuery } from '../../ElasticsearchQueryContext';
import { SettingsEditorContainer } from '../../SettingsEditorContainer';
import { isMetricAggregationWithInlineScript, isMetricAggregationWithMissingSupport } from '../aggregations';
import { changeMetricMeta, changeMetricSetting } from '../state/actions';
@ -33,7 +32,10 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
const dispatch = useDispatch();
const description = useDescription(metric);
const query = useQuery();
const sizeFieldId = useId();
const unitFieldId = useId();
const modeFieldId = useId();
const rateAggUnitOptions = [
{ value: 'second', label: 'Second' },
@ -76,9 +78,9 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
)}
{(metric.type === 'raw_data' || metric.type === 'raw_document') && (
<InlineField label="Size" {...inlineFieldProps}>
<InlineField label="Size" {...inlineFieldProps} htmlFor={sizeFieldId}>
<Input
id={`ES-query-${query.refId}_metric-${metric.id}-size`}
id={sizeFieldId}
onBlur={(e) => dispatch(changeMetricSetting({ metric, settingName: 'size', newValue: e.target.value }))}
defaultValue={metric.settings?.size ?? metricAggregationConfig['raw_data'].defaults.settings?.size}
/>
@ -133,18 +135,18 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
{metric.type === 'rate' && (
<>
<InlineField label="Unit" {...inlineFieldProps} data-testid="unit-select">
<InlineField label="Unit" {...inlineFieldProps} data-testid="unit-select" htmlFor={unitFieldId}>
<Select
id={`ES-query-${query.refId}_metric-${metric.id}-unit`}
id={unitFieldId}
onChange={(e) => dispatch(changeMetricSetting({ metric, settingName: 'unit', newValue: e.value }))}
options={rateAggUnitOptions}
value={metric.settings?.unit}
/>
</InlineField>
<InlineField label="Mode" {...inlineFieldProps} data-testid="mode-select">
<InlineField label="Mode" {...inlineFieldProps} data-testid="mode-select" htmlFor={modeFieldId}>
<Select
id={`ES-query-${query.refId}_metric-${metric.id}-mode`}
id={modeFieldId}
onChange={(e) => dispatch(changeMetricSetting({ metric, settingName: 'mode', newValue: e.value }))}
options={rateAggModeOptions}
value={metric.settings?.unit}

6
public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useId, useState } from 'react';
import { SemVer } from 'semver';
import { getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
@ -90,6 +90,7 @@ export const ElasticSearchQueryField = ({ value, onChange }: { value?: string; o
const QueryEditorForm = ({ value }: Props) => {
const dispatch = useDispatch();
const nextId = useNextId();
const inputId = useId();
const styles = useStyles2(getStyles);
const isTimeSeries = isTimeSeriesQuery(value);
@ -115,9 +116,10 @@ const QueryEditorForm = ({ value }: Props) => {
label="Alias"
labelWidth={15}
tooltip="Aliasing only works for timeseries queries (when the last group is 'Date Histogram'). For all other query types this field is ignored."
htmlFor={inputId}
>
<Input
id={`ES-query-${value.refId}_alias`}
id={inputId}
placeholder="Alias Pattern"
onBlur={(e) => dispatch(changeAliasPattern(e.currentTarget.value))}
defaultValue={value.alias}