github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Observability] [Alert details page] Add tooltip on triggered and last status update fields (#225418)

Browse source 
Adds tooltip on "Triggered" and "Last status update" fields in alert
details page to show absolute time on hover

<img width="1140" alt="Screenshot 2025-06-26 at 11 13 25 AM"
src="https://github.com/user-attachments/assets/63d515cd-6c62-4af6-8ec2-4d4460422786"
/>

<img width="1074" alt="Screenshot 2025-06-26 at 11 13 43 AM"
src="https://github.com/user-attachments/assets/a9776542-a91b-43f8-9e2d-3900788801ef"
/>
This commit is contained in:
Bena Kansara 2025-06-26 13:24:17 +02:00 • committed by GitHub
parent cc6a2a978e
commit c09d3f1ae3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

41
x-pack/solutions/observability/plugins/observability/public/pages/alert_details/components/status_bar.tsx
View file

@ -7,13 +7,14 @@
import React from 'react';
import moment from 'moment';
import { EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
import { AlertLifecycleStatusBadge } from '@kbn/alerts-ui-shared/src/alert_lifecycle_status_badge';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { AlertStatus, ALERT_DURATION, ALERT_FLAPPING, TIMESTAMP, TAGS } from '@kbn/rule-data-utils';
import { css } from '@emotion/react';
import { TagsList } from '@kbn/observability-shared-plugin/public';
import { useUiSetting } from '@kbn/kibana-react-plugin/public';
import { asDuration } from '../../../../common/utils/formatters';
import { TopAlert } from '../../../typings/alerts';
import { CaseLinks } from './case_links';
@ -25,6 +26,8 @@ export interface StatusBarProps {
export function StatusBar({ alert, alertStatus }: StatusBarProps) {
const { euiTheme } = useEuiTheme();
const dateFormat = useUiSetting<string>('dateFormat');
const tags = alert?.fields[TAGS];
if (!alert) {
@ -60,14 +63,16 @@ export function StatusBar({ alert, alertStatus }: StatusBarProps) {
/>
:&nbsp;
</EuiText>
<EuiText
css={css`
font-weight: ${euiTheme.font.weight.semiBold};
`}
size="s"
>
{moment(Number(alert.start)).locale(i18n.getLocale()).fromNow()}
</EuiText>
<EuiToolTip content={moment(Number(alert.start)).format(dateFormat)}>
<EuiText
css={css`
font-weight: ${euiTheme.font.weight.semiBold};
`}
size="s"
>
{moment(Number(alert.start)).locale(i18n.getLocale()).fromNow()}
</EuiText>
</EuiToolTip>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false} css={{ minWidth: 120 }}>
@ -98,14 +103,16 @@ export function StatusBar({ alert, alertStatus }: StatusBarProps) {
/>
:&nbsp;
</EuiText>
<EuiText
css={css`
font-weight: ${euiTheme.font.weight.semiBold};
`}
size="s"
>
{moment(alert.fields[TIMESTAMP]?.toString()).locale(i18n.getLocale()).fromNow()}
</EuiText>
<EuiToolTip content={moment(alert.fields[TIMESTAMP]).format(dateFormat)}>
<EuiText
css={css`
font-weight: ${euiTheme.font.weight.semiBold};
`}
size="s"
>
{moment(alert.fields[TIMESTAMP]?.toString()).locale(i18n.getLocale()).fromNow()}
</EuiText>
</EuiToolTip>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>