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

Elasticsearch: Fix fastpass A11y issues (#42657)

Browse Source 
* Add labels to Date Histogram settings fields

* Add labels to Terms settings fields

* Add labels to Filters settings fields

* Add labels to Geo Hash Grid settings fields

* Add labels to Histogram settings fields

* Add labels to Percentiles settings fields

* Add labels to Moving Avg settings fields

* Add labels to Bucket Script settings fields
This commit is contained in:
Giordano Ricci 2021-12-06 13:00:10 +00:00 committed by GitHub
parent 73b7485630
commit 7c3565379a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useRef } from 'react';
import { GroupBase, OptionsOrGroups } from 'react-select';
import { InlineField, Input, Select, TimeZonePicker } from '@grafana/ui';
import { DateHistogram } from '../aggregations';
@ -44,6 +44,7 @@ interface Props {
export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
const dispatch = useDispatch();
const { current: baseId } = useRef(uniqueId('es-date_histogram-'));
const handleIntervalChange = ({ value }: SelectableValue<string>) =>
dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'interval', newValue: value }));
@ -66,6 +67,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Min Doc Count" {...inlineFieldProps}>
<Input
id={`${baseId}-min_doc_count`}
onBlur={(e) =>
dispatch(
changeBucketAggregationSetting({ bucketAgg, settingName: 'min_doc_count', newValue: e.target.value })
@ -79,6 +81,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Trim Edges" {...inlineFieldProps} tooltip="Trim the edges on the timeseries datapoints">
<Input
id={`${baseId}-trime_edges`}
onBlur={(e) =>
dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'trimEdges', newValue: e.target.value }))
}
@ -94,6 +97,7 @@ export const DateHistogramSettingsEditor = ({ bucketAgg }: Props) => {
tooltip="Change the start value of each bucket by the specified positive (+) or negative offset (-) duration, such as 1h for an hour, or 1d for a day"
>
<Input
id={`${baseId}-offset`}
onBlur={(e) =>
dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'offset', newValue: e.target.value }))
}

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

@ -1,18 +1,21 @@
import { InlineField, Input, QueryField } from '@grafana/ui';
import { css } from '@emotion/css';
import React, { useEffect } from 'react';
import React, { useEffect, useRef } from 'react';
import { AddRemove } from '../../../../AddRemove';
import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';
import { Filters } from '../../aggregations';
import { changeBucketAggregationSetting } from '../../state/actions';
import { addFilter, changeFilter, removeFilter } from './state/actions';
import { reducer as filtersReducer } from './state/reducer';
import { uniqueId } from 'lodash';
interface Props {
bucketAgg: Filters;
}
export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
const { current: baseId } = useRef(uniqueId('es-filters-'));
const upperStateDispatch = useDispatch();
const dispatch = useStatelessReducer(
@ -61,6 +64,7 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
</div>
<InlineField label="Label" labelWidth={10}>
<Input
id={`${baseId}-label-${index}`}
placeholder="Label"
onBlur={(e) => dispatch(changeFilter({ index, filter: { ...filter, label: e.target.value } }))}
defaultValue={filter.label}

9
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useRef } from 'react';
import { InlineField, Select, Input } from '@grafana/ui';
import { Terms } from '../aggregations';
import { useDispatch } from '../../../../hooks/useStatelessReducer';
@ -25,6 +25,7 @@ interface Props {
export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
const { metrics } = useQuery();
const orderBy = createOrderByOptions(metrics);
const { current: baseId } = useRef(uniqueId('es-terms-'));
const dispatch = useDispatch();
@ -32,6 +33,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<>
<InlineField label="Order" {...inlineFieldProps}>
<Select
inputId={`${baseId}-order`}
menuShouldPortal
onChange={(e) =>
dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'order', newValue: e.value }))
@ -43,6 +45,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Size" {...inlineFieldProps}>
<Select
inputId={`${baseId}-size`}
menuShouldPortal
// TODO: isValidNewOption should only allow numbers & template variables
{...useCreatableSelectPersistedBehaviour({
@ -57,6 +60,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Min Doc Count" {...inlineFieldProps}>
<Input
id={`${baseId}-min_doc_count`}
onBlur={(e) =>
dispatch(
changeBucketAggregationSetting({ bucketAgg, settingName: 'min_doc_count', newValue: e.target.value })
@ -70,7 +74,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Order By" {...inlineFieldProps}>
<Select
inputId={uniqueId('es-terms-')}
inputId={`${baseId}-order_by`}
menuShouldPortal
onChange={(e) =>
dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'orderBy', newValue: e.value }))
@ -82,6 +86,7 @@ export const TermsSettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Missing" {...inlineFieldProps}>
<Input
id={`${baseId}-missing`}
onBlur={(e) =>
dispatch(changeBucketAggregationSetting({ bucketAgg, settingName: 'missing', newValue: e.target.value }))
}

8
public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx
View File

@ -1,5 +1,5 @@
import { InlineField, Input } from '@grafana/ui';
import React, { ComponentProps } from 'react';
import React, { ComponentProps, useRef } from 'react';
import { useDispatch } from '../../../../hooks/useStatelessReducer';
import { SettingsEditorContainer } from '../../SettingsEditorContainer';
import { changeBucketAggregationSetting } from '../state/actions';
@ -9,6 +9,7 @@ import { FiltersSettingsEditor } from './FiltersSettingsEditor';
import { useDescription } from './useDescription';
import { DateHistogramSettingsEditor } from './DateHistogramSettingsEditor';
import { TermsSettingsEditor } from './TermsSettingsEditor';
import { uniqueId } from 'lodash';
export const inlineFieldProps: Partial<ComponentProps<typeof InlineField>> = {
labelWidth: 16,
@ -19,6 +20,8 @@ interface Props {
}
export const SettingsEditor = ({ bucketAgg }: Props) => {
const { current: baseId } = useRef(uniqueId('es-setting-'));
const dispatch = useDispatch();
const settingsDescription = useDescription(bucketAgg);
@ -32,6 +35,7 @@ export const SettingsEditor = ({ bucketAgg }: Props) => {
{bucketAgg.type === 'geohash_grid' && (
<InlineField label="Precision" {...inlineFieldProps}>
<Input
id={`${baseId}-geohash_grid-precision`}
onBlur={(e) =>
dispatch(
changeBucketAggregationSetting({ bucketAgg, settingName: 'precision', newValue: e.target.value })
@ -48,6 +52,7 @@ export const SettingsEditor = ({ bucketAgg }: Props) => {
<>
<InlineField label="Interval" {...inlineFieldProps}>
<Input
id={`${baseId}-histogram-interval`}
onBlur={(e) =>
dispatch(
changeBucketAggregationSetting({ bucketAgg, settingName: 'interval', newValue: e.target.value })
@ -61,6 +66,7 @@ export const SettingsEditor = ({ bucketAgg }: Props) => {
<InlineField label="Min Doc Count" {...inlineFieldProps}>
<Input
id={`${baseId}-histogram-min_doc_count`}
onBlur={(e) =>
dispatch(
changeBucketAggregationSetting({ bucketAgg, settingName: 'min_doc_count', newValue: e.target.value })

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

@ -72,6 +72,7 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
`}
>
<Input
aria-label="Variable name"
defaultValue={pipelineVar.name}
placeholder="Variable Name"
onBlur={(e) => dispatch(renamePipelineVariable({ newName: e.target.value, index }))}

11
public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx
View File

@ -1,5 +1,6 @@
import { Input, InlineField, Select, InlineSwitch } from '@grafana/ui';
import React from 'react';
import { uniqueId } from 'lodash';
import React, { useRef } from 'react';
import { useDispatch } from '../../../../hooks/useStatelessReducer';
import { movingAvgModelOptions } from '../../../../query_def';
import { isEWMAMovingAverage, isHoltMovingAverage, isHoltWintersMovingAverage, MovingAverage } from '../aggregations';
@ -15,11 +16,13 @@ interface Props {
// as they might be incompatible. We should clear all other options on model change.
export const MovingAverageSettingsEditor = ({ metric }: Props) => {
const dispatch = useDispatch();
const { current: baseId } = useRef(uniqueId('es-moving-avg-'));
return (
<>
<InlineField label="Model" labelWidth={16}>
<Select
inputId={`${baseId}-model`}
menuShouldPortal
onChange={(value) => dispatch(changeMetricSetting({ metric, settingName: 'model', newValue: value.value }))}
options={movingAvgModelOptions}
@ -34,6 +37,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
{(isEWMAMovingAverage(metric) || isHoltMovingAverage(metric) || isHoltWintersMovingAverage(metric)) && (
<InlineField label="Alpha" labelWidth={16}>
<Input
id={`${baseId}-alpha`}
onBlur={(e) =>
dispatch(
changeMetricSetting({
@ -54,6 +58,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
{(isHoltMovingAverage(metric) || isHoltWintersMovingAverage(metric)) && (
<InlineField label="Beta" labelWidth={16}>
<Input
id={`${baseId}-beta`}
onBlur={(e) =>
dispatch(
changeMetricSetting({
@ -75,6 +80,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
<>
<InlineField label="Gamma" labelWidth={16}>
<Input
id={`${baseId}-gamma`}
onBlur={(e) =>
dispatch(
changeMetricSetting({
@ -92,6 +98,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
</InlineField>
<InlineField label="Period" labelWidth={16}>
<Input
id={`${baseId}-period`}
onBlur={(e) =>
dispatch(
changeMetricSetting({
@ -110,6 +117,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
<InlineField label="Pad" labelWidth={16}>
<InlineSwitch
id={`${baseId}-pad`}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
dispatch(
changeMetricSetting({
@ -128,6 +136,7 @@ export const MovingAverageSettingsEditor = ({ metric }: Props) => {
{(isEWMAMovingAverage(metric) || isHoltMovingAverage(metric) || isHoltWintersMovingAverage(metric)) && (
<InlineField label="Minimize" labelWidth={16}>
<InlineSwitch
id={`${baseId}-minimize`}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
dispatch(changeMetricSetting({ metric, settingName: 'minimize', newValue: e.target.checked }))
}

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

@ -1,5 +1,5 @@
import { InlineField, Input, InlineSwitch, Select } from '@grafana/ui';
import React, { ComponentProps, useState } from 'react';
import React, { ComponentProps, useRef, useState } from 'react';
import { extendedStats } from '../../../../query_def';
import { useDispatch } from '../../../../hooks/useStatelessReducer';
import { changeMetricMeta, changeMetricSetting } from '../state/actions';
@ -30,6 +30,8 @@ interface Props {
}
export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
const { current: baseId } = useRef(uniqueId('es-setting-'));
const dispatch = useDispatch();
const description = useDescription(metric);
const query = useQuery();
@ -112,6 +114,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
{metric.type === 'percentiles' && (
<InlineField label="Percentiles" {...inlineFieldProps}>
<Input
id={`${baseId}-percentiles-percents`}
onBlur={(e) =>
dispatch(
changeMetricSetting({