Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: [Obs Alerts > Alert Detail][KEYBOARD]: Table header has tooltips that must be keyboard focusable #183523

Merged
merged 4 commits into from
May 16, 2024
Merged

fix: [Obs Alerts > Alert Detail][KEYBOARD]: Table header has tooltips that must be keyboard focusable #183523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
82050c5
fix: [Obs Alerts > Alert Detail][KEYBOARD]: Table header has tooltips…
alexwizp May 15, 2024
f5e4b50
Merge branch 'main' into #3379
alexwizp May 15, 2024
7941a06
Merge branch 'main' into #3379
alexwizp May 15, 2024
7cdd120
update log_rate_analysis_results_table_groups.tsx
alexwizp May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 68 additions & 58 deletions ...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,8 @@ import {
EuiBadge,
EuiBasicTable,
EuiCode,
EuiIcon,
EuiIconTip,
EuiText,
EuiToolTip,
} from '@elastic/eui';

import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
Expand Down Expand Up @@ -150,22 +148,19 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
/>
)}
{type === SIGNIFICANT_ITEM_TYPE.LOG_PATTERN && (
<EuiToolTip
<EuiIconTip
type="aggregate"
data-test-subj={'aiopsLogPatternIcon'}
css={{ marginLeft: euiTheme.euiSizeS, marginRight: euiTheme.euiSizeXS }}
size="m"
content={i18n.translate(
'xpack.aiops.fieldContextPopover.descriptionTooltipLogPattern',
{
defaultMessage:
'The field value for this field shows an example of the identified significant text field pattern.',
}
)}
>
<EuiIcon
type="aggregate"
data-test-subj={'aiopsLogPatternIcon'}
css={{ marginLeft: euiTheme.euiSizeS, marginRight: euiTheme.euiSizeXS }}
size="m"
/>
</EuiToolTip>
/>
)}

<span title={fieldName} className="eui-textTruncate">
Expand Down Expand Up @@ -206,21 +201,27 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate('xpack.aiops.logRateAnalysis.resultsTable.logRateColumnTooltip', {
defaultMessage:
'A visual representation of the impact of the field on the message rate difference',
})}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.logRateLabel"
defaultMessage="Log rate"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.logRateLabel"
defaultMessage="Log rate"
/>
&nbsp;
<EuiIconTip
size="s"
position="top"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.logRateColumnTooltip',
{
defaultMessage:
'A visual representation of the impact of the field on the message rate difference',
}
)}
/>
</>
),
render: (_, { histogram, fieldName, fieldValue }) => (
<MiniHistogram
Expand Down Expand Up @@ -252,21 +253,27 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate('xpack.aiops.logRateAnalysis.resultsTable.pValueColumnTooltip', {
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
})}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.pValueLabel"
defaultMessage="p-value"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.pValueLabel"
defaultMessage="p-value"
/>
&nbsp;
<EuiIconTip
size="s"
position="top"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.pValueColumnTooltip',
{
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
}
)}
/>
</>
),
render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
sortable: true,
Expand All @@ -278,23 +285,26 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the field on the message rate difference.',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.impactLabel"
defaultMessage="Impact"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTable.impactLabel"
defaultMessage="Impact"
/>
&nbsp;
<EuiIconTip
size="s"
position="top"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTable.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the field on the message rate difference.',
}
)}
/>
</>
),
render: (_, { pValue }) => {
if (typeof pValue !== 'number') return NOT_AVAILABLE;
Expand Down
159 changes: 85 additions & 74 deletions ...lic/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,10 @@ import {
EuiBadge,
EuiBasicTable,
EuiButtonIcon,
EuiIcon,
EuiScreenReaderOnly,
EuiSpacer,
EuiText,
EuiToolTip,
EuiIconTip,
RIGHT_ALIGNMENT,
useEuiTheme,
euiPaletteColorBlind,
Expand Down Expand Up @@ -176,25 +175,28 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
'data-test-subj': 'aiopsLogRateAnalysisResultsGroupsTableColumnGroup',
field: 'group',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.groupColumnTooltip',
{
defaultMessage:
'Displays up to {maxItemCount} group items sorted by uniqueness and document count. Expand row to see all field/value pairs.',
values: { maxItemCount: MAX_GROUP_BADGES },
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.groupLabel"
defaultMessage="Group"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.groupLabel"
defaultMessage="Group"
/>
&nbsp;
<EuiIconTip
position="top"
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.groupColumnTooltip',
{
defaultMessage:
'Displays up to {maxItemCount} group items sorted by uniqueness and document count. Expand row to see all field/value pairs.',
values: { maxItemCount: MAX_GROUP_BADGES },
}
)}
/>
</>
),
render: (_, { uniqueItemsCount, groupItemsSortedByUniqueness }) => {
const valuesBadges = [];
Expand Down Expand Up @@ -262,24 +264,27 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.logRateColumnTooltip',
{
defaultMessage:
'A visual representation of the impact of the group on the message rate difference.',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.logRateLabel"
defaultMessage="Log rate"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.logRateLabel"
defaultMessage="Log rate"
/>
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.logRateColumnTooltip',
{
defaultMessage:
'A visual representation of the impact of the group on the message rate difference.',
}
)}
/>
</>
),
render: (_, { histogram, id }) => (
<MiniHistogram
Expand Down Expand Up @@ -313,24 +318,27 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.pValueColumnTooltip',
{
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.pValueLabel"
defaultMessage="p-value"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.pValueLabel"
defaultMessage="p-value"
/>
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.pValueColumnTooltip',
{
defaultMessage:
'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
}
)}
/>
</>
),
render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
sortable: true,
Expand All @@ -342,23 +350,26 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
width: NARROW_COLUMN_WIDTH,
field: 'pValue',
name: (
<EuiToolTip
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the group on the message rate difference',
}
)}
>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabel"
defaultMessage="Impact"
/>
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</>
</EuiToolTip>
<>
<FormattedMessage
id="xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabel"
defaultMessage="Impact"
/>
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
position="top"
content={i18n.translate(
'xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabelColumnTooltip',
{
defaultMessage: 'The level of impact of the group on the message rate difference',
}
)}
/>
</>
),
render: (_, { pValue }) => {
if (!pValue) return NOT_AVAILABLE;
Expand Down