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

A11y: Fix Fastpass issues for tracing query editors and config pages (#42759)

Browse Source 
* Add aria-labels to Jaeger config page

* Fix fastpass issues for Tempo config page

* Fix fastpass issues for other tracing query types like search
This commit is contained in:
Connor Lindsey
2021-12-17 11:49:21 -07:00
committed by GitHub
parent dd247f26de
commit 70c0a9d117
10 changed files with 30 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-data/src/themes/createColors.ts
View File

@@ -96,7 +96,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
text = {
primary: `rgb(${this.whiteBase})`,
secondary: `rgba(${this.whiteBase}, 0.65)`,
disabled: `rgba(${this.whiteBase}, 0.58)`,
disabled: `rgba(${this.whiteBase}, 0.6)`,
link: palette.blueDarkText,
maxContrast: palette.white,
};

5
packages/grafana-runtime/src/components/DataSourcePicker.tsx
View File

@@ -38,6 +38,7 @@ export interface DataSourcePickerProps {
// If set to true and there is no value select will be empty, otherwise it will preselect default data source
noDefault?: boolean;
width?: number;
inputId?: string;
filter?: (dataSource: DataSourceInstanceSettings) => boolean;
onClear?: () => void;
}
@@ -147,7 +148,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
}
render() {
const { autoFocus, onBlur, onClear, openMenuOnFocus, placeholder, width } = this.props;
const { autoFocus, onBlur, onClear, openMenuOnFocus, placeholder, width, inputId } = this.props;
const { error } = this.state;
const options = this.getDataSourceOptions();
const value = this.getCurrentValue();
@@ -157,7 +158,7 @@ export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataS
<div aria-label={selectors.components.DataSourcePicker.container}>
<Select
aria-label={selectors.components.DataSourcePicker.inputV2}
inputId="data-source-picker"
inputId={inputId || 'data-source-picker'}
menuShouldPortal
className="ds-picker select-container"
isMulti={false}

1
public/app/core/components/NodeGraphSettings.tsx
View File

@@ -31,6 +31,7 @@ export function NodeGraphSettings({ options, onOptionsChange }: Props) {
labelWidth={26}
>
<InlineSwitch
id="enableNodeGraph"
value={options.jsonData.nodeGraph?.enabled}
onChange={(event: React.SyntheticEvent<HTMLInputElement>) =>
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'nodeGraph', {

4
public/app/core/components/TraceToLogsSettings.tsx
View File

@@ -39,6 +39,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
<InlineFieldRow>
<InlineField tooltip="The data source the trace is going to navigate to" label="Data source" labelWidth={26}>
<DataSourcePicker
inputId="trace-to-logs-data-source-picker"
pluginId="loki"
current={options.jsonData.tracesToLogs?.datasourceUid}
noDefault={true}
@@ -124,6 +125,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
tooltip="Filters logs by Trace ID. Appends '|=<trace id>' to the query."
>
<InlineSwitch
id="filterByTraceID"
value={options.jsonData.tracesToLogs?.filterByTraceID}
onChange={(event: React.SyntheticEvent<HTMLInputElement>) =>
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
@@ -143,6 +145,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
tooltip="Filters logs by Span ID. Appends '|=<span id>' to the query."
>
<InlineSwitch
id="filterBySpanID"
value={options.jsonData.tracesToLogs?.filterBySpanID}
onChange={(event: React.SyntheticEvent<HTMLInputElement>) =>
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'tracesToLogs', {
@@ -156,6 +159,7 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
<InlineFieldRow>
<InlineField label="Loki Search" labelWidth={26} grow tooltip="Use this logs data source to search for traces.">
<InlineSwitch
id="lokiSearch"
defaultChecked={true}
value={options.jsonData.tracesToLogs?.lokiSearch}
onChange={(event: React.SyntheticEvent<HTMLInputElement>) =>

6
public/app/plugins/datasource/jaeger/components/AdvancedOptions.tsx
View File

@@ -37,6 +37,8 @@ export function AdvancedOptions({ query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Min Duration" labelWidth={21} grow>
<Input
id="minDuration"
name="minDuration"
value={query.minDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
@@ -51,6 +53,8 @@ export function AdvancedOptions({ query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Max Duration" labelWidth={21} grow>
<Input
id="maxDuration"
name="maxDuration"
value={query.maxDuration || ''}
placeholder={durationPlaceholder}
onChange={(v) =>
@@ -65,6 +69,8 @@ export function AdvancedOptions({ query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Limit" labelWidth={21} grow tooltip="Maximum numbers of returned results">
<Input
id="limit"
name="limit"
value={query.limit || ''}
type="number"
onChange={(v) =>

3
public/app/plugins/datasource/jaeger/components/SearchForm.tsx
View File

@@ -54,6 +54,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Service" labelWidth={14} grow>
<Select
inputId="service"
menuShouldPortal
options={serviceOptions}
value={serviceOptions?.find((v) => v.value === query.service) || null}
@@ -72,6 +73,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Operation" labelWidth={14} grow disabled={!query.service}>
<Select
inputId="operation"
menuShouldPortal
options={operationOptions}
value={operationOptions?.find((v) => v.value === query.operation) || null}
@@ -89,6 +91,7 @@ export function SearchForm({ datasource, query, onChange }: Props) {
<InlineFieldRow>
<InlineField label="Tags" labelWidth={14} grow>
<Input
id="tags"
value={transformToLogfmt(query.tags)}
placeholder="http.status_code=200 error=true"
onChange={(v) =>

5
public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
View File

@@ -128,6 +128,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
<InlineFieldRow>
<InlineField label="Service Name" labelWidth={14} grow>
<Select
inputId="service"
menuShouldPortal
options={autocomplete.serviceNameOptions}
value={query.serviceName || ''}
@@ -147,6 +148,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
<InlineFieldRow>
<InlineField label="Span Name" labelWidth={14} grow>
<Select
inputId="spanName"
menuShouldPortal
options={autocomplete.spanNameOptions}
value={query.spanName || ''}
@@ -187,6 +189,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
<InlineFieldRow>
<InlineField label="Min Duration" invalid={!!inputErrors.minDuration} labelWidth={14} grow>
<Input
id="minDuration"
value={query.minDuration || ''}
placeholder={durationPlaceholder}
onBlur={() => {
@@ -209,6 +212,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
<InlineFieldRow>
<InlineField label="Max Duration" invalid={!!inputErrors.maxDuration} labelWidth={14} grow>
<Input
id="maxDuration"
value={query.maxDuration || ''}
placeholder={durationPlaceholder}
onBlur={() => {
@@ -237,6 +241,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
tooltip="Maximum numbers of returned results"
>
<Input
id="limit"
value={query.limit || ''}
type="number"
onChange={(v) => {

1
public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
View File

@@ -15,6 +15,7 @@ export function SearchSettings({ options, onOptionsChange }: Props) {
<InlineFieldRow className={styles.row}>
<InlineField tooltip="Removes the Search tab from the Tempo query editor." label="Hide search" labelWidth={26}>
<InlineSwitch
id="hideSearch"
value={options.jsonData.search?.hide}
onChange={(event: React.SyntheticEvent<HTMLInputElement>) =>
updateDatasourcePluginJsonDataOption({ onOptionsChange, options }, 'search', {

1
public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
View File

@@ -25,6 +25,7 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
labelWidth={26}
>
<DataSourcePicker
inputId="service-graph-data-source-picker"
pluginId="prometheus"
current={options.jsonData.serviceMap?.datasourceUid}
noDefault={true}

10
public/sass/_variables.dark.generated.scss
View File

@@ -101,8 +101,8 @@ $text-color-strong: #FFFFFF;
$text-color: rgb(204, 204, 220);
$text-color-semi-weak: rgba(204, 204, 220, 0.65);
$text-color-weak: rgba(204, 204, 220, 0.65);
$text-color-faint: rgba(204, 204, 220, 0.58);
$text-color-emphasis: #FFFFFF;
$text-color-faint: rgba(204, 204, 220, 0.6);
$text-color-emphasis: #fff;
$text-blue: #6E9FFF;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
@@ -115,8 +115,8 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
// Links
// -------------------------
$link-color: rgb(204, 204, 220);
$link-color-disabled: rgba(204, 204, 220, 0.58);
$link-hover-color: #FFFFFF;
$link-color-disabled: rgba(204, 204, 220, 0.6);
$link-hover-color: #fff;
$external-link-color: #6E9FFF;
// Typography
@@ -216,7 +216,7 @@ $input-border-color: rgba(204, 204, 220, 0.15);
$input-box-shadow: none;
$input-border-focus: #6E9FFF;
$input-box-shadow-focus: #6E9FFF !default;
$input-color-placeholder: rgba(204, 204, 220, 0.58);
$input-color-placeholder: rgba(204, 204, 220, 0.6);
$input-label-bg: #22252b;
$input-color-select-arrow: $white;