Improvements on the status page

[Takenfal]

⚠️ 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

Along with my previous feature request:

#2451

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:

1. 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.)
2. Start timestamp and End timestamp on the beats bar. Also, the fact that you need to hover on the beats with the mouse is not really user friendly.
3. User management: Would be great to have three different levels of users: Owner; he can add monitors on the status page, remove them, add incidents and messages and manage users. Admin; he can see all the monitors and add incidents and messages. User; he can only see monitors and incidents/messages (only those choosed by the owner).
4. More incidents at the same time: right now you can only add one message/incident only. Would be nice to be able to add many of them; for example I'd like to have a pinned message on the top of the status page and still add incidents when needed.

✔️ 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

[jwgatt]

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

[Takenfal]

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)

[jwgatt]

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.

[jwgatt]

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

[adm2k]

@takenfall

Can you share your CSS?

Thanks!

[Takenfal]

@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]

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]

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.

[WaiserHai]

I think it looks nice

[Takenfal]

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

[jwgatt]

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.

[largecollider]

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

[CommanderStorm]

@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