feat: add ping text in heartbeat tooltip

[lehuutrung1412]

Summary

In this pull request, the following changes are made:

• Add ping value in heartbeat tooltip when hovering over the monitor page heartbeat (support all kinds of monitors)

• Relates to Ping monitor need extra feature on mouse hover #7192
• Resolves Ping monitor need extra feature on mouse hover #7192

Please follow this checklist to avoid unnecessary back and forth (click to expand)

• ⚠️ If there are Breaking change (a fix or feature that alters existing functionality in a way that could cause issues) I have called them out
• 🧠 I have disclosed any use of LLMs/AI in this contribution and reviewed all generated content.
  I understand that I am responsible for and able to explain every line of code I submit.
• 🔍 Any UI changes adhere to visual style of this project.
• 🛠️ I have self-reviewed and self-tested my code to ensure it works as expected.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• 🤖 I added or updated automated tests where appropriate.
• 📄 Documentation updates are included (if applicable).
• 🧰 Dependency updates are listed and explained.
• ⚠️ CI passes and is green.

Screenshots for Visual Changes

• UI Modifications: Highlight any changes made to the user interface.

ping-text.mov

• Before & After: Include screenshots or comparisons (if applicable).

Event	Before	After
UP
DOWN

[github-actions]

Hello and thanks for lending a paw to Uptime Kuma! 🐻👋
As this is your first contribution, please be sure to check out our Pull Request guidelines.
In particular: - Mark your PR as Draft while you’re still making changes - Mark it as Ready for review once it’s fully ready
If you have any design or process questions, feel free to ask them right here in this pull request - unclear documentation is a bug too.

[lehuutrung1412]

I have updated this to use the defined color and maintain consistency for both ping and timestamp

[silversword411]

Small simple change, and a fix on a hard coded style in addition to the addition.

LGTM!

[lehuutrung1412]

Hi @CommanderStorm, could you please help me review this PR? Thank you!

[CommanderStorm]

I will get back to reviewing PRs when my thesis is done.
I currently don't have the bandwith to review non-related PRs, sorry

[smarshall-rightside]

pingText() currently uses a falsy check (!this.content.ping) - which hides valid 0 ping values

0 is treated as valid elsewhere (for example Details.vue /src/pages/Details.vue ln 537 uses ping || ping === 0) so I would assume this should check only null/undefined:

pingText() {
    if (!this.content || this.content.ping == null) {
        return null;
    }
    return Math.round(this.content.ping) + "ms";
}

[SweetSophia]

Thanks for the clean implementation! A few things worth addressing:

1. Bug (re-echoing @smarshall-rightside's comment): pingText() uses !this.content.ping which treats ping === 0 as falsy. A 0ms ping is valid (localhost, sub-ms responses). Should use this.content.ping == null instead. This was flagged on Apr 5 but doesn't appear to have been addressed yet.

2. "ms" not internationalized: pingText() hardcodes "ms". The codebase uses $t() for all user-visible strings — this should use an i18n key for consistency and to allow locale-specific formatting (e.g. spacing like "0 ms").

3. DOWN heartbeats show ping: The v-if="pingText" shows ping for all heartbeat types including DOWN. When a monitor times out, ping can reflect the full timeout duration (e.g. 30000ms). Showing this next to "DOWN" could mislead users. Consider only showing ping for UP heartbeats, or differentiating the label.

4. Minor style: .tooltip-ping sets font-weight: 500 while the adjacent .tooltip-time inherits 400. Same font-size, same color — the weight difference is subtle enough to look unintentional. They should probably match.

[SweetSophia]

This falsy check hides valid ping === 0 values (localhost monitors, sub-ms responses). As @smarshall-rightside noted, this should be:

pingText() {
    if (!this.content || this.content.ping == null) {
        return null;
    }
    return Math.round(this.content.ping) + "ms";
}

ping is treated as valid when 0 elsewhere in the codebase (e.g. Details.vue uses ping || ping === 0).

[SweetSophia]

The "ms" suffix is hardcoded rather than internationalized. The codebase uses $t() for all user-visible strings. Consider adding an i18n key (e.g. $t('pingMs', [Math.round(this.content.ping)])) so locales can format the unit with proper spacing or different conventions.

[SweetSophia]

Showing ping for DOWN heartbeats could mislead users. When a monitor times out, ping may contain the full timeout duration (e.g. 30000ms). Displaying that next to "DOWN" makes it look like a latency measurement when it's actually a connection failure.

Consider guarding with content.status === UP (import UP from util.ts — already imported in this component), or at minimum labeling it differently for non-UP states.

[SweetSophia]

.tooltip-ping sets font-weight: 500 while the adjacent .tooltip-time has no font-weight (inherits 400). They share the same font-size: 13px and now the same color — the weight difference is subtle enough to look unintentional. Should these match?