starred/uptime-kuma

Fork 0

mirror of https://github.com/louislam/uptime-kuma.git synced 2026-03-02 22:57:00 -05:00

status page legend to inform users what they are watching #1722

New issue

Open

opened 2026-02-28 02:30:32 -05:00 by deekerman · 13 comments

deekerman commented

2026-02-28 02:30:32 -05:00

Owner

Originally created by @Takenfal on GitHub (Jan 3, 2023).

⚠️ Please verify that this feature request has NOT been suggested before.

I checked and didn't find similar feature request

🏷️ Feature Request Type

UI Feature

🔖 Feature description

I'd like to request some other features with the goal of improving the status page. Here's, then, a list of features that I'd love to see so to make uptime-kuma more professional and readable:

Legend: It would be nice to have the possibility to insert a legend on the status page, so to inform viewers about what they're watching (What's a beat? how much time passes between beats? What 100% on the pill means? And so on.)

✔️ Solution

Unfortunately, I'm not practical with the platform that has been used, so I don't have any solution at the moment. I'll try to contribute As much as I can.

Working on the Legend

❓ Alternatives

No alternatives are available.

📝 Additional Context

No response

Originally created by @Takenfal on GitHub (Jan 3, 2023). ### ⚠️ Please verify that this feature request has NOT been suggested before. - [X] I checked and didn't find similar feature request ### 🏷️ Feature Request Type UI Feature ### 🔖 Feature description I'd like to request some other features with the goal of improving the status page. Here's, then, a list of features that I'd love to see so to make uptime-kuma more professional and readable: **Legend**: It would be nice to have the possibility to insert a legend on the status page, so to inform viewers about what they're watching (What's a beat? how much time passes between beats? What 100% on the pill means? And so on.) ### ✔️ Solution Unfortunately, I'm not practical with the platform that has been used, so I don't have any solution at the moment. I'll try to contribute As much as I can. - Working on the Legend ### ❓ Alternatives No alternatives are available. ### 📝 Additional Context _No response_

deekerman added the

feature-request

A:status-page

labels

2026-02-28 02:30:32 -05:00

deekerman commented

2026-02-28 02:30:34 -05:00

Author

Owner

@ghost commented on GitHub (Jan 5, 2023):

Should the timestamp be in the drop-down? What is it counting exactly?

@ghost commented on GitHub (Jan 5, 2023): Should the timestamp be in the drop-down? What is it counting exactly?

deekerman commented

2026-02-28 02:30:34 -05:00

Author

Owner

@Takenfal commented on GitHub (Jan 5, 2023):

The timestamp should (In my opinion) be present before and after the heartbeat-bar (hp-bar-big HTML tag) so that if someone looks at the status page he immediately understands what the time ranges of the various beats are; so you know which is the most recent beat and which is the oldest. Otherwise (always in my opinion) you look at the status page and you see a meaningless series of green bars and you can't understand which is the last one, the first one, you don't understand if the last one is about 1 hour ago, 1 day, 1 year? Remember that not necessarely the status page is watched by the administrator. Other users could be able to check for it and they should know immeditaly what the variuouis elements mean. I attached an image so to better understand what I mean (I did put just the time, not the date). It's just an example of the implementation of the idea, if someone has a more pleasent idea, he is welcome.

(NOTE: The design you see in the example is thank to a custom css I'm working on)

@Takenfal commented on GitHub (Jan 5, 2023): The timestamp should (In my opinion) be present before and after the heartbeat-bar (**hp-bar-big** HTML tag) so that if someone looks at the status page he immediately understands what the time ranges of the various beats are; so you know which is the most recent beat and which is the oldest. Otherwise (always in my opinion) you look at the status page and you see a meaningless series of green bars and you can't understand which is the last one, the first one, you don't understand if the last one is about 1 hour ago, 1 day, 1 year? Remember that not necessarely the status page is watched by the administrator. Other users could be able to check for it and they should know immeditaly what the variuouis elements mean. I attached an image so to better understand what I mean (I did put just the time, not the date). It's just an example of the implementation of the idea, if someone has a more pleasent idea, he is welcome. (NOTE: The design you see in the example is thank to a custom css I'm working on) ![example](https://user-images.githubusercontent.com/28107963/210750981-8fe49921-b330-45ac-aa4f-e361b272f16f.jpg)

deekerman commented

2026-02-28 02:30:34 -05:00

Author

Owner

@ghost commented on GitHub (Jan 7, 2023):

I've got the timestamps placed,

It took a while to get the positioning right. I'll try to set one when the component mounts and the other as the current time.

@ghost commented on GitHub (Jan 7, 2023): I've got the timestamps placed, ![Screenshot from 2023-01-08 04-12-17](https://user-images.githubusercontent.com/79326421/211178847-0fd652a1-3592-45b8-aaf8-09371ea11ef2.png) It took a while to get the positioning right. I'll try to set one when the component mounts and the other as the current time.

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@ghost commented on GitHub (Jan 8, 2023):

https://github.com/louislam/uptime-kuma/pull/2537#issuecomment-1374797174

@ghost commented on GitHub (Jan 8, 2023): https://github.com/louislam/uptime-kuma/pull/2537#issuecomment-1374797174

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@adm2k commented on GitHub (Jan 8, 2023):

@takenfall

Can you share your CSS?

Thanks!

@adm2k commented on GitHub (Jan 8, 2023): @takenfall Can you share your CSS? Thanks!

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@Takenfal commented on GitHub (Jan 8, 2023):

@takenfall

Can you share your CSS?

Thanks!

Sure! Keep in mind that I'm not really a developer and the CSS edits I made are not such a big deal, but in my opinion they makes everything a little more readable and symmetrical (as side effect on mobile devices is even better).

.bg-info{
  background-color: #4e94ef!important;
  color: white !important;
  text-align: center;
}

.alert-heading{
  font-size: 40px !important;
  font-weight: bold !important
}

.bg-info .content  {
  font-size: 20px;
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 1.5rem;
}

.row{
  display: block !important;
}

.col-9{
  width: 100% !important;
}

.item-name{
  text-align: center;
}

.group-title{
  text-align: center;
  font-size: bold:
}

.description{
  text-align: center;
}

.item{
  text-align: center !important
}

.item-name{
  display: block !important;
  font-size: 20px
}

.rounded-pill{
  min-width: 110px;
  font-size: 16px !important;
}

.overall-status{
  text-align: center;
}

.col-3{
  width: 50%;
  margin: auto;
  padding-bottom: 2rem;
}

.beat{
  min-height: 25px;
  min-width: 8px
}

.beat.empty{
  display: none !important;
}

@Takenfal commented on GitHub (Jan 8, 2023): > @takenfall > > Can you share your CSS? > > Thanks! Sure! Keep in mind that I'm not really a developer and the CSS edits I made are not such a big deal, but in my opinion they makes everything a little more readable and symmetrical (as side effect on mobile devices is even better). ``` .bg-info{ background-color: #4e94ef!important; color: white !important; text-align: center; } .alert-heading{ font-size: 40px !important; font-weight: bold !important } .bg-info .content { font-size: 20px; text-align: center; padding-left: 20%; padding-right: 20%; padding-top: 1.5rem; } .row{ display: block !important; } .col-9{ width: 100% !important; } .item-name{ text-align: center; } .group-title{ text-align: center; font-size: bold: } .description{ text-align: center; } .item{ text-align: center !important } .item-name{ display: block !important; font-size: 20px } .rounded-pill{ min-width: 110px; font-size: 16px !important; } .overall-status{ text-align: center; } .col-3{ width: 50%; margin: auto; padding-bottom: 2rem; } .beat{ min-height: 25px; min-width: 8px } .beat.empty{ display: none !important; } ```

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@Takenfal commented on GitHub (Jan 8, 2023):

I've got the timestamps placed, It took a while to get the positioning right. I'll try to set one when the component mounts and the other as the current time.

This is a very good starting point! It's basically what I meant.

@Takenfal commented on GitHub (Jan 8, 2023): > I've got the timestamps placed, ![Screenshot from 2023-01-08 04-12-17](https://user-images.githubusercontent.com/79326421/211178847-0fd652a1-3592-45b8-aaf8-09371ea11ef2.png) It took a while to get the positioning right. I'll try to set one when the component mounts and the other as the current time. This is a very good starting point! It's basically what I meant.

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@Takenfal commented on GitHub (Jan 11, 2023):

Since I'm working on the legend (Actually I just made it with the ability to show it or hide it on the status page) I need feedbacks on it, on the design and also on what to write in it. Or if it's enough already. You tell me.

@Takenfal commented on GitHub (Jan 11, 2023): Since I'm working on the legend (Actually I just made it with the ability to show it or hide it on the status page) I need feedbacks on it, on the design and also on what to write in it. Or if it's enough already. You tell me. ![legend](https://user-images.githubusercontent.com/28107963/211767028-c87c7714-8526-4d74-ac05-938911cd0df4.png)

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@WaiserHai commented on GitHub (Jan 15, 2023):

I think it looks nice

@WaiserHai commented on GitHub (Jan 15, 2023): I think it looks nice

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@Takenfal commented on GitHub (Jan 16, 2023):

Great! I will make a pull request asap for the legend on the status page. Thanks!

@Takenfal commented on GitHub (Jan 16, 2023): Great! I will make a pull request asap for the legend on the status page. Thanks!

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@ghost commented on GitHub (Jan 25, 2023):

Does anyone know how to render the HTTP response inside the tool-tip? I would like the same display as the tooltip popup on the heartbeats bar.

@ghost commented on GitHub (Jan 25, 2023): Does anyone know how to render the HTTP response inside the tool-tip? I would like the same display as the tooltip popup on the heartbeats bar.

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@largecollider commented on GitHub (Sep 7, 2023):

I would be interested to test it. How can I install this modification at my instance?

@largecollider commented on GitHub (Sep 7, 2023): I would be interested to test it. How can I install this modification at my instance?

deekerman commented

2026-02-28 02:30:35 -05:00

Author

Owner

@CommanderStorm commented on GitHub (Dec 6, 2023):

@Takenfal
I have edited your FR to remove already implemted/tracked otherwise FRs

User manageement: #128
mutli-incidents: https://github.com/louislam/uptime-kuma/issues/862 and https://github.com/louislam/uptime-kuma/issues/2389
Start timestamp and End timestamp on the beats bar. Currently Implemted

@CommanderStorm commented on GitHub (Dec 6, 2023): @Takenfal I have edited your FR to remove already implemted/tracked otherwise FRs - User manageement: #128 - mutli-incidents: https://github.com/louislam/uptime-kuma/issues/862 and https://github.com/louislam/uptime-kuma/issues/2389 - Start timestamp and End timestamp on the beats bar. Currently Implemted