github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix: [Obs Infrastructure > Inventory][KEYBOARD]: Kubernetes Pods Create Inventory Rule modal has tooltip that does not take keyboard focus (#184407)

Browse source 
Closes: https://github.com/elastic/observability-dev/issues/3416

## Description

The Obs Applications > Infrastructure > Kubernetes Pods view a tooltip
in the Create Inventory Rule modal that does not take keyboard focus.
This needs to be adjusted so keyboard users get the benefit of the
tooltip information. Screenshot attached below.

### Steps to recreate
1. Open the [Obs
Inventory](https://issue-serverless-bdwqw-pr183659-f2d99b.kb.eu-west-1.aws.qa.elastic.cloud/app/metrics/inventory)
view
2. Click the first dropdown and switch from `Hosts` to `Kubernetes Pods`
3. Click on a pod to open the Kubernetes pod popover
4. Click "Create Inventory Rule" button (has the bell icon)
5. Press `Tab` to move through the Create Inventory Rule modal
6. Verify the tooltip next to "Alert me if there is no data" never opens

### What was changed?:
1. EuiToolTip was replaced with EuiIconTip as a more accessible
component.
2. The fix was applied to similar duplicate places.
This commit is contained in:
Alexey Antonov 2024-06-04 11:49:38 +03:00 • committed by GitHub
parent 01a29261a1
commit e3ca2c59b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/plugins/observability_solution/infra/public/alerting/inventory/components/expression.tsx
View file

@ -12,11 +12,10 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiIconTip,
EuiHealth,
EuiIcon,
EuiSpacer,
EuiText,
EuiToolTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
@ -360,14 +359,14 @@ export const Expressions: React.FC<Props> = (props) => {
{i18n.translate('xpack.infra.metrics.alertFlyout.alertOnNoData', {
defaultMessage: "Alert me if there's no data",
})}{' '}
<EuiToolTip
<EuiIconTip
type="questionInCircle"
color="subdued"
content={i18n.translate('xpack.infra.metrics.alertFlyout.noDataHelpText', {
defaultMessage:
'Enable this to trigger the action if the metric(s) do not report any data over the expected time period, or if the alert fails to query Elasticsearch',
})}
>
<EuiIcon type="questionInCircle" color="subdued" />
</EuiToolTip>
/>
</>
}
checked={ruleParams.alertOnNoData}

19
x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression.tsx
View file

@ -11,12 +11,11 @@ import {
EuiCheckbox,
EuiFieldSearch,
EuiFormRow,
EuiIcon,
EuiIconTip,
EuiLink,
EuiPanel,
EuiSpacer,
EuiText,
EuiToolTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
@ -370,7 +369,9 @@ export const Expressions: React.FC<Props> = (props) => {
{i18n.translate('xpack.infra.metrics.alertFlyout.alertOnNoData', {
defaultMessage: "Alert me if there's no data",
})}{' '}
<EuiToolTip
<EuiIconTip
type="questionInCircle"
color="subdued"
content={
(disableNoData ? `${docCountNoDataDisabledHelpText} ` : '') +
i18n.translate('xpack.infra.metrics.alertFlyout.noDataHelpText', {
@ -378,9 +379,7 @@ export const Expressions: React.FC<Props> = (props) => {
'Enable this to trigger the action if the metric(s) do not report any data over the expected time period, or if the alert fails to query Elasticsearch',
})
}
>
<EuiIcon type="questionInCircle" color="subdued" />
</EuiToolTip>
/>
</>
}
checked={ruleParams.alertOnNoData}
@ -471,7 +470,9 @@ export const Expressions: React.FC<Props> = (props) => {
{i18n.translate('xpack.infra.metrics.alertFlyout.alertOnGroupDisappear', {
defaultMessage: 'Alert me if a group stops reporting data',
})}{' '}
<EuiToolTip
<EuiIconTip
type="questionInCircle"
color="subdued"
content={
(disableNoData ? `${docCountNoDataDisabledHelpText} ` : '') +
i18n.translate('xpack.infra.metrics.alertFlyout.groupDisappearHelpText', {
@ -479,9 +480,7 @@ export const Expressions: React.FC<Props> = (props) => {
'Enable this to trigger the action if a previously detected group begins to report no results. This is not recommended for dynamically scaling infrastructures that may rapidly start and stop nodes automatically.',
})
}
>
<EuiIcon type="questionInCircle" color="subdued" />
</EuiToolTip>
/>
</>
}
disabled={!hasGroupBy}

11
x-pack/plugins/observability_solution/observability/public/components/custom_threshold/custom_threshold_rule_expression.tsx
View file

@ -15,13 +15,12 @@ import {
EuiFormErrorText,
EuiFormRow,
EuiHorizontalRule,
EuiIcon,
EuiIconTip,
EuiLink,
EuiLoadingSpinner,
EuiSpacer,
EuiText,
EuiTitle,
EuiToolTip,
} from '@elastic/eui';
import { ISearchSource, Query } from '@kbn/data-plugin/common';
import { DataView } from '@kbn/data-views-plugin/common';
@ -603,7 +602,9 @@ export default function Expressions(props: Props) {
defaultMessage: 'Alert me if a group stops reporting data',
}
)}{' '}
<EuiToolTip
<EuiIconTip
type="questionInCircle"
color="subdued"
content={i18n.translate(
'xpack.observability.customThreshold.rule.alertFlyout.groupDisappearHelpText',
{
@ -611,9 +612,7 @@ export default function Expressions(props: Props) {
'Enable this to trigger the action if a previously detected group begins to report no results. This is not recommended for dynamically scaling infrastructures that may rapidly start and stop nodes automatically.',
}
)}
>
<EuiIcon type="questionInCircle" color="subdued" />
</EuiToolTip>
/>
</>
}
disabled={!hasGroupBy}