feat: Add heartbeat tooltip while hovering over status page heartbeats

[peaktwilight]

This PR introduces a really nice and sleek tooltip component that comes up on hover (and we can use it in other places because it's a standalone vue component)

Important

It kind of builds upon the changes made in #5916 otherwise it bugs out in the time mgmt.
So merge that before looking into this please.

DEMO:

🔄 Changes

🛠️ Type of change

• 🎨 User Interface (UI) updates

🔗 Related Issues

📄 Checklist *

• 🔍 My code adheres to the style guidelines of this project.
• ✅ I ran ESLint and other code linters for modified files.
• 🛠️ I have reviewed and tested my code.
• ⚠️ My changes generate no new warnings.
• 🔒 I have considered potential security impacts and mitigated risks.
• 📚 I have read and understood the Pull Request guidelines.

[peaktwilight]

IMPORTANT:
It kind of builds upon the changes made in #5916 otherwise it bugs out in the time mgmt. So merge that before looking into this please.

[CommanderStorm]

I love the designs. Good work 👏

Will review this and the other PR on Wednesday. I am currently struggling though writing a paper for a university-seminar.

[peaktwilight]

I love the designs. Good work 👏

Will review this and the other PR on Wednesday. I am currently struggling though writing a paper for a university-seminar.

thanks man I'm glad you like it and good luck on the paper, no stress at all :)

[CommanderStorm]

Nice work.
I like the design work 👍🏻

I talked to one of my designer friends (🦖, @twihno) and they really like it too..

[CommanderStorm]

depending on discussion in other pr might need to change

[peaktwilight]

yeah keeping it open for the moment until the other one is reviewed

[twihno]

Small nitpick:
I think it would be better if the border included the arrow

Mockup (OLD/NEW):

[peaktwilight]

Super cool thanks guys for the review and UX suggestions! Will take a look at all of it soon :)

[peaktwilight]

Small nitpick: I think it would be better if the border included the arrow

Mockup (OLD/NEW):

great eye, didn't even notice that! will see if there's an elegant way to solve this

[peaktwilight]

border fixed though a rotated square hack

[peaktwilight]

Review should be ready for review again :)

[peaktwilight]

yeah keeping it open for the moment until the other one is reviewed

[CommanderStorm]

It kind of builds upon the changes made in #5916 otherwise it bugs out in the time mgmt.
So merge that before looking into this please

@peaktwilight given that I think the consensus in #5916 is that that needs another testing round, where exactly is this bugging out?

I did not find anything and would merge this one first otherwise if this is outdated.

[peaktwilight]

It kind of builds upon the changes made in #5916 otherwise it bugs out in the time mgmt.

So merge that before looking into this please

@peaktwilight given that I think the consensus in #5916 is that that needs another testing round, where exactly is this bugging out?

I did not find anything and would merge this one first otherwise if this is outdated.

I've just tested with the latest version and a fresh db and I believe that it's no longer dependent on the other merge and should work without the other one getting merged first :D

[davidwroten]

I've pulled down the latest from master tonight and have been working on something in a new branch but had noticed the heartbeats are green even when a service is down. When you hover over the heartbeats, the tooltip is correct but the down class is never applied.

In HeartbeatBar.vue I see the constants are being imported below the template:

Line 47: import { DOWN, UP, PENDING, MAINTENANCE } from "../util.ts";

if I change DOWN to 0 on line 20:

:class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === 0), 'pending': (beat.status === PENDING), 'maintenance': (beat.status === MAINTENANCE) }"

The heartbeats are displaying properly again.

I changed this back to DOWN as it was before and included the following under computed:

Line 93:    
    computed: {
        DOWN() { return DOWN; },
        PENDING() { return PENDING; },
        MAINTENANCE() { return MAINTENANCE; },

Now the heartbeats are appearing correctly on the dashboard and status pages.

[CommanderStorm]

good work and thanks for debugging it.
Would you like to open an PR and have the fix associated with you?